@deneb-ui/ui 2.0.0

package/dist/EditableImage.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type ImageAspectRatio = 'square' | '1/1' | 'video' | '16/9' | 'portrait' | '3/4' | '4/3' | '2/3' | '21/9' | (string & {});
+export type ImageRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});
+export interface EditableImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    id?: string;
+    'data-preview-field-path'?: string;
+    fallbackSrc?: string;
+    aspectRatio?: ImageAspectRatio;
+    radius?: ImageRadius;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    hoverZoom?: boolean;
+}
+export declare function EditableImage({ id, 'data-preview-field-path': previewFieldPath, src, fallbackSrc, alt, aspectRatio, radius, fit, hoverZoom, style, className, ...props }: EditableImageProps): React.JSX.Element;

package/dist/EditableImage.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableImage = EditableImage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ASPECT_MAP = {
+    square: '1 / 1',
+    '1/1': '1 / 1',
+    video: '16 / 9',
+    '16/9': '16 / 9',
+    portrait: '3 / 4',
+    '3/4': '3 / 4',
+    '4/3': '4 / 3',
+    '2/3': '2 / 3',
+    '21/9': '21 / 9',
+};
+const RADIUS_MAP = {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    '2xl': '24px',
+    full: '9999px',
+};
+const DEFAULT_FALLBACK_SVG = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" fill="none"><rect width="600" height="400" fill="%23f1f5f9"/><path d="M250 180a30 30 0 100-60 30 30 0 000 60zM170 300l80-90 60 70 70-100 90 120H170z" fill="%23cbd5e1"/></svg>';
+function EditableImage({ id, 'data-preview-field-path': previewFieldPath, src, fallbackSrc = DEFAULT_FALLBACK_SVG, alt = '', aspectRatio, radius, fit = 'cover', hoverZoom = false, style, className = '', ...props }) {
+    const path = previewFieldPath || id;
+    const resolvedAspect = aspectRatio ? (ASPECT_MAP[aspectRatio] || aspectRatio) : undefined;
+    const resolvedRadius = radius ? (RADIUS_MAP[radius] || radius) : undefined;
+    const combinedStyle = {
+        ...(resolvedAspect ? { aspectRatio: resolvedAspect } : {}),
+        ...(resolvedRadius ? { borderRadius: resolvedRadius } : {}),
+        ...(fit ? { objectFit: fit } : {}),
+        ...(hoverZoom ? { transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)' } : {}),
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": path, src: src || fallbackSrc, alt: alt, style: combinedStyle, className: `editable-image ${hoverZoom ? 'hover:scale-105' : ''} ${className}`.trim(), ...props }));
+}

package/dist/EditableList.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface EditableListProps<T = any> extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * The collection path in siteData, e.g. "products", "services", or "home.features".
+     */
+    path?: string;
+    /**
+     * Explicit fivora visual editing attribute for strict static analysis.
+     */
+    'data-preview-list-path'?: string;
+    /**
+     * The list of items to iterate over.
+     */
+    items?: T[];
+    /**
+     * The outer container HTML element or component (default: 'div').
+     */
+    as?: React.ElementType;
+    /**
+     * The wrapper element for each item (default: 'div').
+     * If false, items are not wrapped automatically.
+     */
+    itemAs?: React.ElementType | false;
+    /**
+     * Class name applied to each individual item container.
+     */
+    itemClassName?: string;
+    /**
+     * Render function called for each item in the list.
+     */
+    children: (item: T, index: number, itemPath: string) => React.ReactNode;
+}
+export declare function EditableList<T = any>({ path, 'data-preview-list-path': previewListPath, items, as: Container, itemAs: ItemContainer, itemClassName, children, ...props }: EditableListProps<T>): React.JSX.Element;

package/dist/EditableList.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableList = EditableList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+function EditableList({ path, 'data-preview-list-path': previewListPath, items = [], as: Container = 'div', itemAs: ItemContainer = 'div', itemClassName, children, ...props }) {
+    const listPath = previewListPath || path || '';
+    const list = Array.isArray(items) ? items : [];
+    return ((0, jsx_runtime_1.jsx)(Container, { "data-preview-list-path": listPath, ...props, children: list.map((item, index) => {
+            const itemPath = `${listPath}[${index}]`;
+            if (ItemContainer === false) {
+                return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: children(item, index, itemPath) }, index));
+            }
+            return ((0, jsx_runtime_1.jsx)(ItemContainer, { "data-preview-item-path": itemPath, className: itemClassName, children: children(item, index, itemPath) }, index));
+        }) }));
+}

package/dist/EditableNavbar.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface NavLinkItem {
+    id: string;
+    label: string;
+    route: string;
+}
+export interface EditableNavbarProps extends React.HTMLAttributes<HTMLElement> {
+    defaultLinks?: NavLinkItem[];
+    sticky?: boolean;
+    activeRoute?: string;
+    basePath?: string;
+}
+/**
+ * Next-Level DENEB UI Navbar / Header
+ *
+ * Features:
+ * - High-end Shadcn glassmorphism design (backdrop-blur-md)
+ * - Automatic real-time state synchronization with Footer (Logo, Title, Nav labels)
+ * - Strict visual editing compliance (`common.logoUrl`, `common.websiteTitle`, `common.navLabels.*`, `common.headerCtaLabel`)
+ * - Selected-page filtering (`data-target-page`)
+ * - Responsive mobile toggle and drawer menu
+ * - Tailwind CSS classes + resilient inline CSS fallbacks
+ *
+ * Created by Chamika Gayashan (CEE G)
+ */
+export declare function EditableNavbar({ defaultLinks, sticky, activeRoute, basePath, className, style, ...props }: EditableNavbarProps): React.JSX.Element;
+export declare const Navbar: typeof EditableNavbar;
+export declare const Header: typeof EditableNavbar;

package/dist/EditableNavbar.js

@@ -0,0 +1,178 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.Navbar = void 0;
+exports.EditableNavbar = EditableNavbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const DEFAULT_PAGES = [
+    { id: 'home', label: 'Home', route: '/' },
+    { id: 'about_us', label: 'About', route: '/about_us' },
+    { id: 'services', label: 'Services', route: '/services' },
+    { id: 'contact', label: 'Contact', route: '/contact' },
+];
+/**
+ * Next-Level DENEB UI Navbar / Header
+ *
+ * Features:
+ * - High-end Shadcn glassmorphism design (backdrop-blur-md)
+ * - Automatic real-time state synchronization with Footer (Logo, Title, Nav labels)
+ * - Strict visual editing compliance (`common.logoUrl`, `common.websiteTitle`, `common.navLabels.*`, `common.headerCtaLabel`)
+ * - Selected-page filtering (`data-target-page`)
+ * - Responsive mobile toggle and drawer menu
+ * - Tailwind CSS classes + resilient inline CSS fallbacks
+ *
+ * Created by Chamika Gayashan (CEE G)
+ */
+function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRoute, basePath = '', className = '', style, ...props }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const [mobileMenuOpen, setMobileMenuOpen] = (0, react_1.useState)(false);
+    const content = (siteData?.content || {});
+    const common = (content?.common || {});
+    const siteName = String(common?.websiteTitle || common?.siteName || 'Storefront');
+    const logoUrl = String(common?.logoUrl || '');
+    const headerCtaLabel = String(common?.headerCtaLabel || 'Get in Touch');
+    const navLabels = (common?.navLabels || {});
+    const requiredPages = Array.isArray(siteData?.requirements?.requiredPages)
+        ? siteData.requirements.requiredPages
+        : siteData?.template?.structure?.pages || ['home', 'contact'];
+    const activeLinks = defaultLinks.filter((item) => item.id === 'home' || requiredPages.includes(item.id));
+    const hasContact = requiredPages.includes('contact');
+    const basePathEnv = typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_SITE_BASE_PATH
+        ? process.env.NEXT_PUBLIC_SITE_BASE_PATH
+        : '';
+    const effectiveBasePath = basePath || basePathEnv;
+    const navigate = (path) => {
+        if (typeof window !== 'undefined') {
+            const cleanBase = effectiveBasePath.replace(/\/$/, '');
+            const cleanPath = path.startsWith('/') ? path : `/${path}`;
+            window.location.href = `${cleanBase}${cleanPath}` || '/';
+        }
+    };
+    const withBase = (path) => {
+        if (!path || /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(path))
+            return path;
+        const cleanBase = effectiveBasePath.replace(/\/$/, '');
+        const cleanPath = path.startsWith('/') ? path : `/${path}`;
+        return `${cleanBase}${cleanPath}` || '/';
+    };
+    return ((0, jsx_runtime_1.jsxs)("header", { style: {
+            position: sticky ? 'sticky' : 'relative',
+            top: 0,
+            zIndex: 50,
+            width: '100%',
+            backgroundColor: 'rgba(255, 255, 255, 0.82)',
+            backdropFilter: 'blur(16px)',
+            WebkitBackdropFilter: 'blur(16px)',
+            borderBottom: '1px solid rgba(226, 232, 240, 0.8)',
+            transition: 'all 0.2s ease',
+            ...style,
+        }, className: `deneb-navbar sticky top-0 z-50 w-full border-b border-slate-200/80 bg-white/80 backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-950/80 ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    maxWidth: '1280px',
+                    margin: '0 auto',
+                    padding: '0.875rem 1.5rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '1.5rem',
+                }, className: "deneb-navbar-inner max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3.5 flex items-center justify-between gap-6", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => navigate('/'), style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.75rem',
+                            background: 'transparent',
+                            border: 0,
+                            padding: 0,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                        }, className: "deneb-brand-btn flex items-center gap-3 group cursor-pointer border-0 bg-transparent p-0", children: [(0, jsx_runtime_1.jsx)("img", { src: withBase(logoUrl || '/placeholder.svg'), alt: siteName, "data-preview-field-path": "common.logoUrl", style: {
+                                    height: '36px',
+                                    width: 'auto',
+                                    maxWidth: '140px',
+                                    objectFit: 'contain',
+                                    borderRadius: '8px',
+                                    transition: 'transform 0.2s ease',
+                                }, className: "deneb-logo h-9 w-auto max-w-[140px] object-contain rounded-lg group-hover:scale-105 transition-transform" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": "common.websiteTitle", style: {
+                                    fontSize: '1.25rem',
+                                    fontWeight: 700,
+                                    letterSpacing: '-0.025em',
+                                    color: 'var(--color-text, #0f172a)',
+                                }, className: "deneb-site-title text-xl font-bold tracking-tight text-slate-900 dark:text-white", children: siteName })] }), (0, jsx_runtime_1.jsx)("nav", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.375rem',
+                        }, className: "deneb-desktop-nav flex items-center gap-1.5", children: activeLinks.map((link) => {
+                            const label = navLabels[link.id] || link.label;
+                            const isActive = activeRoute === link.route;
+                            return ((0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate(link.route), style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        padding: '0.45rem 0.875rem',
+                                        borderRadius: '9999px',
+                                        fontSize: '0.9rem',
+                                        fontWeight: isActive ? 600 : 500,
+                                        color: isActive ? 'var(--color-primary, #0f172a)' : 'var(--color-text-muted, #475569)',
+                                        backgroundColor: isActive ? 'var(--color-secondary, #f1f5f9)' : 'transparent',
+                                        border: 0,
+                                        cursor: 'pointer',
+                                        transition: 'all 0.15s ease',
+                                    }, className: `deneb-nav-item px-3.5 py-1.5 rounded-full text-sm font-medium transition-all border-0 cursor-pointer ${isActive
+                                        ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
+                                        : 'bg-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100/70 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800/70'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label }) }) }, link.id));
+                        }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.75rem' }, className: "flex items-center gap-3", children: [hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate('/contact'), style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        backgroundColor: 'var(--color-primary, #0f172a)',
+                                        color: '#ffffff',
+                                        padding: '0.5rem 1.25rem',
+                                        borderRadius: '9999px',
+                                        fontSize: '0.875rem',
+                                        fontWeight: 600,
+                                        border: 0,
+                                        cursor: 'pointer',
+                                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                                        transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+                                    }, className: "deneb-header-cta inline-flex items-center justify-center px-4 py-2 rounded-full text-sm font-semibold bg-slate-900 text-white shadow-sm hover:bg-slate-800 hover:shadow-md transition-all border-0 cursor-pointer dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": "common.headerCtaLabel", children: headerCtaLabel }) }) })) : ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", className: "deneb-header-cta unavailable", "data-preview-field-path": "common.headerCtaLabel", children: headerCtaLabel })), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "mobile-menu-toggle", onClick: () => setMobileMenuOpen(!mobileMenuOpen), "aria-label": "Toggle Navigation Menu", style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: '40px',
+                                    height: '40px',
+                                    borderRadius: '8px',
+                                    border: '1px solid var(--color-border, #e2e8f0)',
+                                    backgroundColor: 'transparent',
+                                    color: 'var(--color-text, #0f172a)',
+                                    cursor: 'pointer',
+                                }, className: "deneb-mobile-toggle md:hidden flex items-center justify-center w-10 h-10 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-100 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800 transition-colors", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: mobileMenuOpen ? ((0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })) : ((0, jsx_runtime_1.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" })) }) })] })] }), mobileMenuOpen && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    borderTop: '1px solid var(--color-border, #e2e8f0)',
+                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                    padding: '1.25rem 1.5rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.625rem',
+                }, className: "deneb-mobile-drawer md:hidden border-t border-slate-200 bg-white/95 backdrop-blur-lg px-4 py-5 flex flex-col gap-2.5 dark:border-slate-800 dark:bg-slate-950/95", children: activeLinks.map((link) => {
+                    const label = navLabels[link.id] || link.label;
+                    const isActive = activeRoute === link.route;
+                    return ((0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                                setMobileMenuOpen(false);
+                                navigate(link.route);
+                            }, style: {
+                                display: 'block',
+                                width: '100%',
+                                textAlign: 'left',
+                                padding: '0.625rem 0.875rem',
+                                borderRadius: '8px',
+                                fontSize: '0.95rem',
+                                fontWeight: isActive ? 600 : 500,
+                                color: isActive ? 'var(--color-primary, #0f172a)' : 'var(--color-text, #0f172a)',
+                                backgroundColor: isActive ? 'var(--color-secondary, #f1f5f9)' : 'transparent',
+                                border: 0,
+                                cursor: 'pointer',
+                            }, className: `block w-full text-left px-3.5 py-2.5 rounded-lg text-base font-medium transition-colors border-0 cursor-pointer ${isActive
+                                ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
+                                : 'bg-transparent text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-static": "mobile-nav-item", children: label }) }) }, link.id));
+                }) }))] }));
+}
+exports.Navbar = EditableNavbar;
+exports.Header = EditableNavbar;

package/dist/EditablePricingCard.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export interface PricingFeature {
+    text: string;
+    included?: boolean;
+}
+export interface PricingItem {
+    id?: string | number;
+    name?: string;
+    title?: string;
+    badge?: string;
+    price?: string | number;
+    interval?: string;
+    description?: string;
+    ctaText?: string;
+    ctaTarget?: string;
+    isPopular?: boolean;
+    features?: (string | PricingFeature)[];
+    [key: string]: unknown;
+}
+export interface EditablePricingCardProps extends React.HTMLAttributes<HTMLElement> {
+    itemPath: string;
+    item: PricingItem;
+    as?: React.ElementType;
+    isPopular?: boolean;
+    actionSlot?: React.ReactNode;
+}
+/**
+ * EditablePricingCard is a high-converting tier card designed for SaaS, digital products,
+ * and service packages with strict Fivora visual editing sync.
+ */
+export declare function EditablePricingCard({ itemPath, item, as: Component, isPopular, actionSlot, className, style, ...props }: EditablePricingCardProps): React.JSX.Element;

package/dist/EditablePricingCard.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditablePricingCard = EditablePricingCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableText_1 = require("./EditableText");
+const EditableText_2 = require("./EditableText");
+/**
+ * EditablePricingCard is a high-converting tier card designed for SaaS, digital products,
+ * and service packages with strict Fivora visual editing sync.
+ */
+function EditablePricingCard({ itemPath, item, as: Component = 'div', isPopular = false, actionSlot, className = '', style, ...props }) {
+    const name = String(item?.name || item?.title || 'Standard Plan');
+    const badge = String(item?.badge || (item?.isPopular || isPopular ? 'Popular' : ''));
+    const price = String(item?.price || '$49');
+    const interval = String(item?.interval || '/month');
+    const description = String(item?.description || '');
+    const ctaText = String(item?.ctaText || 'Get Started');
+    const ctaTarget = String(item?.ctaTarget || 'contact');
+    const features = Array.isArray(item?.features) ? item.features : [];
+    const popular = item?.isPopular || isPopular;
+    const cardStyle = {
+        position: 'relative',
+        backgroundColor: popular ? '#ffffff' : 'rgba(255, 255, 255, 0.85)',
+        border: popular ? '2px solid var(--brand-color, #2563eb)' : '1px solid #e2e8f0',
+        borderRadius: '20px',
+        padding: '2.5rem 2rem',
+        boxShadow: popular
+            ? '0 20px 35px -10px rgba(37, 99, 235, 0.15), 0 1px 3px rgba(0,0,0,0.05)'
+            : '0 4px 6px -1px rgba(0, 0, 0, 0.05)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        transition: 'transform 0.25s ease, box-shadow 0.25s ease',
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, style: cardStyle, className: `editable-pricing-card ${popular ? 'is-popular' : ''} ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { children: [badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '-14px', right: '24px' }, children: (0, jsx_runtime_1.jsx)(EditableText_2.EditableBadge, { id: `${itemPath}.badge`, defaultValue: badge, badgeVariant: popular ? 'primary' : 'secondary' }) })), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.name`, defaultValue: name, style: {
+                            fontSize: '1.25rem',
+                            fontWeight: 700,
+                            color: 'var(--heading-color, #0f172a)',
+                            marginBottom: '0.5rem',
+                        } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, defaultValue: description, style: {
+                            fontSize: '0.875rem',
+                            color: 'var(--muted-text, #64748b)',
+                            marginBottom: '1.5rem',
+                            lineHeight: 1.5,
+                        } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.25rem', marginBottom: '1.5rem' }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.price`, defaultValue: price, style: {
+                                    fontSize: '2.75rem',
+                                    fontWeight: 800,
+                                    letterSpacing: '-0.03em',
+                                    color: 'var(--heading-color, #0f172a)',
+                                } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.interval`, defaultValue: interval, style: {
+                                    fontSize: '0.875rem',
+                                    color: 'var(--muted-text, #64748b)',
+                                    fontWeight: 500,
+                                } })] }), (features.length > 0 || Array.isArray(item?.features)) && ((0, jsx_runtime_1.jsx)("ul", { "data-preview-list-path": `${itemPath}.features`, style: {
+                            listStyle: 'none',
+                            padding: 0,
+                            margin: '0 0 2rem 0',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.75rem',
+                        }, children: features.map((feat, idx) => {
+                            const text = typeof feat === 'string' ? feat : feat?.text || '';
+                            const included = typeof feat === 'string' ? true : feat?.included !== false;
+                            return ((0, jsx_runtime_1.jsxs)("li", { "data-preview-item-path": `${itemPath}.features[${idx}]`, style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.75rem',
+                                    fontSize: '0.925rem',
+                                    color: included ? 'var(--page-text, #0f172a)' : 'var(--muted-text, #94a3b8)',
+                                    textDecoration: included ? 'none' : 'line-through',
+                                }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "data-preview-static": "pricing-check-icon", style: { flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "9", fill: included ? 'var(--brand-color, #2563eb)' : '#e2e8f0', fillOpacity: included ? 0.15 : 1 }), (0, jsx_runtime_1.jsx)("path", { d: "M6 10l3 3 5-6", stroke: included ? 'var(--brand-color, #2563eb)' : '#94a3b8', strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: `${itemPath}.features[${idx}]`, defaultValue: text })] }, idx));
+                        }) }))] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 'auto', paddingTop: '1rem' }, children: actionSlot ? (actionSlot) : ((0, jsx_runtime_1.jsx)("span", { "data-target-page": ctaTarget, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                            if (typeof window !== 'undefined') {
+                                const basePath = (process.env.NEXT_PUBLIC_SITE_BASE_PATH ?? '').replace(/\/$/, '');
+                                window.location.href = `${basePath}/${ctaTarget}`;
+                            }
+                        }, style: {
+                            display: 'block',
+                            textAlign: 'center',
+                            width: '100%',
+                            padding: '0.875rem 1.5rem',
+                            borderRadius: '10px',
+                            fontWeight: 600,
+                            fontSize: '0.95rem',
+                            backgroundColor: popular ? 'var(--brand-color, #2563eb)' : 'var(--brand-secondary, #0f172a)',
+                            color: '#ffffff',
+                            border: 0,
+                            cursor: 'pointer',
+                            boxShadow: popular ? '0 4px 14px rgba(37, 99, 235, 0.35)' : 'none',
+                            transition: 'opacity 0.2s ease',
+                        }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${itemPath}.ctaText`, children: ctaText }) }) })) })] }));
+}

package/dist/EditableProductCard.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+export interface ProductItem {
+    id?: string | number;
+    name?: string;
+    title?: string;
+    price?: string | number;
+    originalPrice?: string | number;
+    description?: string;
+    category?: string;
+    imageUrl?: string;
+    image?: string;
+    badge?: string;
+    rating?: number | 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'
+     */
+    cardVariant?: ProductCardVariant;
+    /**
+     * Fallback image URL if product image is empty.
+     */
+    imageFallback?: string;
+    /**
+     * HTML wrapper tag (default: 'article').
+     */
+    as?: React.ElementType;
+    /**
+     * 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;
+    /**
+     * Optional custom action slot (e.g. Add to Cart button).
+     */
+    actionSlot?: React.ReactNode;
+}
+/**
+ * EditableProductCard is an elite, auto-balancing commerce card supporting
+ * four visual variants (modern-glass, classic, minimal, horizontal) and
+ * strict Fivora visual editing synchronization.
+ */
+export declare function EditableProductCard({ itemPath, product, cardVariant, imageFallback, as: Component, showPrice, showDescription, showCategory, actionSlot, className, style, ...props }: EditableProductCardProps): React.JSX.Element;

package/dist/EditableProductCard.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableProductCard = EditableProductCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const EditableText_1 = require("./EditableText");
+const EditableImage_1 = require("./EditableImage");
+const EditableText_2 = require("./EditableText");
+/**
+ * EditableProductCard is an elite, auto-balancing commerce card supporting
+ * four visual variants (modern-glass, classic, minimal, horizontal) and
+ * strict Fivora visual editing synchronization.
+ */
+function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', showPrice = true, showDescription = true, showCategory = true, actionSlot, className = '', style, ...props }) {
+    const name = String(product?.name || product?.title || '');
+    const price = product?.price !== undefined ? String(product.price) : '';
+    const originalPrice = product?.originalPrice !== undefined ? String(product.originalPrice) : '';
+    const description = String(product?.description || '');
+    const category = String(product?.category || '');
+    const badge = String(product?.badge || '');
+    const imageUrl = String(product?.imageUrl || product?.image || '');
+    const isHorizontal = cardVariant === 'horizontal';
+    const variantStyles = {
+        'modern-glass': {
+            backgroundColor: 'rgba(255, 255, 255, 0.85)',
+            backdropFilter: 'blur(16px)',
+            WebkitBackdropFilter: 'blur(16px)',
+            border: '1px solid rgba(226, 232, 240, 0.8)',
+            borderRadius: '16px',
+            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01)',
+            overflow: 'hidden',
+            transition: 'transform 0.25s ease, box-shadow 0.25s ease',
+        },
+        classic: {
+            backgroundColor: '#ffffff',
+            border: '1px solid #e2e8f0',
+            borderRadius: '12px',
+            boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.05)',
+            overflow: 'hidden',
+            transition: 'transform 0.2s ease',
+        },
+        minimal: {
+            backgroundColor: 'transparent',
+            border: 'none',
+            overflow: 'hidden',
+        },
+        horizontal: {
+            backgroundColor: '#ffffff',
+            border: '1px solid #e2e8f0',
+            borderRadius: '14px',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, style: {
+            ...variantStyles[cardVariant],
+            ...style,
+        }, className: `editable-product-card group ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'relative',
+                    overflow: 'hidden',
+                    width: isHorizontal ? '38%' : '100%',
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }), badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '10px', left: '10px', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(EditableText_2.EditableBadge, { id: `${itemPath}.badge`, defaultValue: badge, badgeVariant: "primary" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    padding: '1.25rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: 1,
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [showCategory && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.category`, defaultValue: category, style: {
+                                    fontSize: '0.75rem',
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.05em',
+                                    color: 'var(--brand-accent, #14b8a6)',
+                                    fontWeight: 600,
+                                    display: 'inline-block',
+                                    marginBottom: '0.375rem',
+                                } })), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.name`, defaultValue: name, style: {
+                                    fontSize: '1.125rem',
+                                    fontWeight: 700,
+                                    lineHeight: 1.3,
+                                    color: 'var(--heading-color, #0f172a)',
+                                    marginBottom: '0.375rem',
+                                } }), showDescription && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, defaultValue: description, style: {
+                                    fontSize: '0.875rem',
+                                    color: 'var(--muted-text, #64748b)',
+                                    lineHeight: 1.5,
+                                    marginBottom: '0.75rem',
+                                } }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            marginTop: '0.75rem',
+                            paddingTop: '0.75rem',
+                            borderTop: cardVariant === 'minimal' ? 'none' : '1px solid rgba(226, 232, 240, 0.6)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '0.5rem',
+                        }, children: [showPrice && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.375rem' }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.price`, defaultValue: price, style: {
+                                            fontSize: '1.25rem',
+                                            fontWeight: 700,
+                                            color: 'var(--brand-color, #2563eb)',
+                                        } }), originalPrice ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.originalPrice`, defaultValue: originalPrice, style: {
+                                            fontSize: '0.875rem',
+                                            textDecoration: 'line-through',
+                                            color: 'var(--muted-text, #94a3b8)',
+                                        } })) : null] })), actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "product-action-btn", style: {
+                                    backgroundColor: 'var(--brand-color, #2563eb)',
+                                    color: '#ffffff',
+                                    border: 'none',
+                                    padding: '0.5rem 1rem',
+                                    borderRadius: '8px',
+                                    fontSize: '0.875rem',
+                                    fontWeight: 600,
+                                    cursor: 'pointer',
+                                    transition: 'opacity 0.2s ease',
+                                }, children: "Buy Now" }))] })] })] }));
+}