@deneb-ui/ui 2.0.70 → 2.0.72

package/dist/EditableBeforeAfterSlider.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface EditableBeforeAfterSliderProps extends React.HTMLAttributes<HTMLDivElement> {
+    beforeImageId?: string;
+    afterImageId?: string;
+    defaultBeforeImage?: string;
+    defaultAfterImage?: string;
+    beforeLabelId?: string;
+    defaultBeforeLabel?: string;
+    afterLabelId?: string;
+    defaultAfterLabel?: string;
+    initialPosition?: number;
+    aspectRatio?: string;
+    handleColor?: string;
+}
+export declare function EditableBeforeAfterSlider({ beforeImageId, afterImageId, defaultBeforeImage, defaultAfterImage, beforeLabelId, defaultBeforeLabel, afterLabelId, defaultAfterLabel, initialPosition, aspectRatio, handleColor, className, style, ...props }: EditableBeforeAfterSliderProps): React.JSX.Element;
+export declare const BeforeAfterSlider: typeof EditableBeforeAfterSlider;

package/dist/EditableBeforeAfterSlider.js

@@ -0,0 +1,137 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BeforeAfterSlider = void 0;
+exports.EditableBeforeAfterSlider = EditableBeforeAfterSlider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableImage_1 = require("./EditableImage");
+const EditableText_1 = require("./EditableText");
+function EditableBeforeAfterSlider({ beforeImageId = 'home.showcase.beforeImage', afterImageId = 'home.showcase.afterImage', defaultBeforeImage = 'https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1200&q=80', defaultAfterImage = 'https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=1200&q=80', beforeLabelId = 'home.showcase.beforeLabel', defaultBeforeLabel = 'Before', afterLabelId = 'home.showcase.afterLabel', defaultAfterLabel = 'After', initialPosition = 50, aspectRatio = '16 / 9', handleColor = '#ffffff', className = '', style, ...props }) {
+    const [sliderPos, setSliderPos] = (0, react_1.useState)(initialPosition);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    const updatePosition = (0, react_1.useCallback)((clientX) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+        setSliderPos(percentage);
+    }, []);
+    const handleTouchMove = (0, react_1.useCallback)((e) => {
+        if (!isDragging || !e.touches[0])
+            return;
+        updatePosition(e.touches[0].clientX);
+    }, [isDragging, updatePosition]);
+    const handleMouseMove = (0, react_1.useCallback)((e) => {
+        if (!isDragging)
+            return;
+        updatePosition(e.clientX);
+    }, [isDragging, updatePosition]);
+    const handleMouseUp = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (isDragging) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            window.addEventListener('touchmove', handleTouchMove);
+            window.addEventListener('touchend', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('touchmove', handleTouchMove);
+            window.removeEventListener('touchend', handleMouseUp);
+        };
+    }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove]);
+    const handleKeyDown = (e) => {
+        if (e.key === 'ArrowLeft') {
+            setSliderPos((prev) => Math.max(0, prev - 5));
+        }
+        else if (e.key === 'ArrowRight') {
+            setSliderPos((prev) => Math.min(100, prev + 5));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, tabIndex: 0, onKeyDown: handleKeyDown, className: `editable-before-after-slider relative overflow-hidden select-none cursor-ew-resize rounded-2xl shadow-xl ${className}`.trim(), style: {
+            position: 'relative',
+            width: '100%',
+            aspectRatio,
+            userSelect: 'none',
+            overflow: 'hidden',
+            outline: 'none',
+            ...style,
+        }, onMouseDown: (e) => {
+            setIsDragging(true);
+            updatePosition(e.clientX);
+        }, onTouchStart: (e) => {
+            if (e.touches[0]) {
+                setIsDragging(true);
+                updatePosition(e.touches[0].clientX);
+            }
+        }, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: { position: 'absolute', inset: 0, width: '100%', height: '100%' }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: afterImageId, src: defaultAfterImage, alt: "After transformation", style: { width: '100%', height: '100%', objectFit: 'cover' } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            bottom: '1rem',
+                            right: '1rem',
+                            backgroundColor: 'rgba(0, 0, 0, 0.65)',
+                            backdropFilter: 'blur(8px)',
+                            color: '#ffffff',
+                            padding: '0.25rem 0.75rem',
+                            borderRadius: '9999px',
+                            fontSize: '0.75rem',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                            pointerEvents: 'auto',
+                        }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: afterLabelId, defaultValue: defaultAfterLabel, as: "span" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    width: `${sliderPos}%`,
+                    overflow: 'hidden',
+                    borderRight: `2px solid ${handleColor}`,
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: containerRef.current ? `${containerRef.current.clientWidth}px` : '100%',
+                            height: '100%',
+                        }, children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: beforeImageId, src: defaultBeforeImage, alt: "Before transformation", style: { width: '100%', height: '100%', objectFit: 'cover' } }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            position: 'absolute',
+                            bottom: '1rem',
+                            left: '1rem',
+                            backgroundColor: 'rgba(0, 0, 0, 0.65)',
+                            backdropFilter: 'blur(8px)',
+                            color: '#ffffff',
+                            padding: '0.25rem 0.75rem',
+                            borderRadius: '9999px',
+                            fontSize: '0.75rem',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                            pointerEvents: 'auto',
+                        }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: beforeLabelId, defaultValue: defaultBeforeLabel, as: "span" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    left: `${sliderPos}%`,
+                    transform: 'translateX(-50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    pointerEvents: 'none',
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        width: '40px',
+                        height: '40px',
+                        backgroundColor: handleColor,
+                        borderRadius: '9999px',
+                        boxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.35)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        cursor: 'ew-resize',
+                    }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#1e293b", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "data-preview-static": "slider-arrows", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }), (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 3 12 9 6" })] }) }) })] }));
+}
+exports.BeforeAfterSlider = EditableBeforeAfterSlider;

package/dist/EditableBookingModal.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface ServiceOption {
+    id: string | number;
+    name: string;
+    duration?: string;
+    price?: string;
+}
+export interface EditableBookingModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    titleId?: string;
+    defaultTitle?: string;
+    subtitleId?: string;
+    defaultSubtitle?: string;
+    buttonLabelId?: string;
+    defaultButtonLabel?: string;
+    services?: ServiceOption[];
+    whatsappNumber?: string;
+    onSubmitBooking?: (details: {
+        service: string;
+        date: string;
+        time: string;
+        name: string;
+        phone: string;
+        notes?: string;
+    }) => void;
+}
+export declare function EditableBookingModal({ isOpen, onClose, titleId, defaultTitle, subtitleId, defaultSubtitle, buttonLabelId, defaultButtonLabel, services, whatsappNumber, onSubmitBooking, }: EditableBookingModalProps): React.JSX.Element | null;
+export declare const BookingModal: typeof EditableBookingModal;

package/dist/EditableBookingModal.js

@@ -0,0 +1,198 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BookingModal = void 0;
+exports.EditableBookingModal = EditableBookingModal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableText_1 = require("./EditableText");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+function EditableBookingModal({ isOpen, onClose, titleId = 'common.booking.title', defaultTitle = 'Book Your Appointment', subtitleId = 'common.booking.subtitle', defaultSubtitle = 'Select your desired service, date, and time. We will confirm instantly via WhatsApp.', buttonLabelId = 'common.booking.buttonLabel', defaultButtonLabel = 'Confirm & Book via WhatsApp', services = [
+    { id: '1', name: 'Signature Haircut & Style', duration: '45 mins', price: '$65' },
+    { id: '2', name: 'Bespoke Balayage & Gloss', duration: '120 mins', price: '$180' },
+    { id: '3', name: 'Scalp Detox & Deep Conditioning', duration: '40 mins', price: '$55' },
+    { id: '4', name: 'Executive Beard Sculpt & Hot Towel', duration: '30 mins', price: '$40' },
+], whatsappNumber, onSubmitBooking, }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const rawBusiness = siteData?.content?.common?.business;
+    const targetWhatsapp = whatsappNumber || rawBusiness?.whatsapp || rawBusiness?.phone || '1234567890';
+    const [selectedService, setSelectedService] = (0, react_1.useState)(services[0]?.name || '');
+    const [selectedDate, setSelectedDate] = (0, react_1.useState)('');
+    const [selectedTime, setSelectedTime] = (0, react_1.useState)('10:00 AM');
+    const [customerName, setCustomerName] = (0, react_1.useState)('');
+    const [customerPhone, setCustomerPhone] = (0, react_1.useState)('');
+    const [customerNotes, setCustomerNotes] = (0, react_1.useState)('');
+    const timeSlots = [
+        '09:00 AM',
+        '10:00 AM',
+        '11:30 AM',
+        '01:00 PM',
+        '02:30 PM',
+        '04:00 PM',
+        '05:30 PM',
+    ];
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Escape' && isOpen) {
+            onClose();
+        }
+    }, [isOpen, onClose]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            window.addEventListener('keydown', handleKeyDown);
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, handleKeyDown]);
+    if (!isOpen)
+        return null;
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (onSubmitBooking) {
+            onSubmitBooking({
+                service: selectedService,
+                date: selectedDate,
+                time: selectedTime,
+                name: customerName,
+                phone: customerPhone,
+                notes: customerNotes,
+            });
+        }
+        const cleanNumber = String(targetWhatsapp).replace(/[^0-9]/g, '');
+        const message = encodeURIComponent(`Hello! I would like to book an appointment:\n\n` +
+            `• Service: ${selectedService}\n` +
+            `• Date: ${selectedDate || 'Upcoming Available Date'}\n` +
+            `• Time: ${selectedTime}\n` +
+            `• Name: ${customerName}\n` +
+            `• Phone: ${customerPhone}\n` +
+            (customerNotes ? `• Notes: ${customerNotes}\n` : ''));
+        window.open(`https://wa.me/${cleanNumber}?text=${message}`, '_blank', 'noopener,noreferrer');
+        onClose();
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "booking-modal-title", style: {
+            position: 'fixed',
+            inset: 0,
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '1rem',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            backdropFilter: 'blur(6px)',
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                backgroundColor: 'var(--color-surface, #ffffff)',
+                color: 'var(--color-text, #1e293b)',
+                borderRadius: '24px',
+                width: '100%',
+                maxWidth: '560px',
+                maxHeight: '90vh',
+                overflowY: 'auto',
+                boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+                padding: '2rem',
+                position: 'relative',
+                border: '1px solid var(--color-border, #e2e8f0)',
+            }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": "Close booking modal", "data-preview-static": "modal-close-button", style: {
+                        position: 'absolute',
+                        top: '1.25rem',
+                        right: '1.25rem',
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        padding: '0.5rem',
+                        color: '#64748b',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        borderRadius: '9999px',
+                    }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '1.5rem', paddingRight: '2rem' }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: titleId, defaultValue: defaultTitle, as: "h2", style: {
+                                fontSize: '1.5rem',
+                                fontWeight: 700,
+                                letterSpacing: '-0.025em',
+                                marginBottom: '0.5rem',
+                                color: 'var(--color-text, #0f172a)',
+                            } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: subtitleId, defaultValue: defaultSubtitle, as: "p", style: {
+                                fontSize: '0.875rem',
+                                color: '#64748b',
+                                lineHeight: 1.5,
+                            } })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, style: { display: 'flex', flexDirection: 'column', gap: '1.25rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { "data-preview-static": "service-label", style: { display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }, children: "Select Service" }), (0, jsx_runtime_1.jsx)("select", { value: selectedService, onChange: (e) => setSelectedService(e.target.value), style: {
+                                        width: '100%',
+                                        padding: '0.75rem 1rem',
+                                        borderRadius: '12px',
+                                        border: '1px solid #cbd5e1',
+                                        fontSize: '0.95rem',
+                                        backgroundColor: '#f8fafc',
+                                        color: '#0f172a',
+                                        outline: 'none',
+                                    }, children: services.map((svc) => ((0, jsx_runtime_1.jsxs)("option", { value: svc.name, children: [svc.name, " ", svc.duration ? `(${svc.duration})` : '', " ", svc.price ? `— ${svc.price}` : ''] }, svc.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { "data-preview-static": "date-label", style: { display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }, children: "Date" }), (0, jsx_runtime_1.jsx)("input", { type: "date", required: true, value: selectedDate, onChange: (e) => setSelectedDate(e.target.value), style: {
+                                                width: '100%',
+                                                padding: '0.75rem 1rem',
+                                                borderRadius: '12px',
+                                                border: '1px solid #cbd5e1',
+                                                fontSize: '0.95rem',
+                                                backgroundColor: '#f8fafc',
+                                                color: '#0f172a',
+                                                outline: 'none',
+                                            } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { "data-preview-static": "time-label", style: { display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }, children: "Preferred Time" }), (0, jsx_runtime_1.jsx)("select", { value: selectedTime, onChange: (e) => setSelectedTime(e.target.value), style: {
+                                                width: '100%',
+                                                padding: '0.75rem 1rem',
+                                                borderRadius: '12px',
+                                                border: '1px solid #cbd5e1',
+                                                fontSize: '0.95rem',
+                                                backgroundColor: '#f8fafc',
+                                                color: '#0f172a',
+                                                outline: 'none',
+                                            }, children: timeSlots.map((time) => ((0, jsx_runtime_1.jsx)("option", { value: time, children: time }, time))) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { "data-preview-static": "name-label", style: { display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }, children: "Full Name" }), (0, jsx_runtime_1.jsx)("input", { type: "text", required: true, placeholder: "Jane Doe", value: customerName, onChange: (e) => setCustomerName(e.target.value), style: {
+                                                width: '100%',
+                                                padding: '0.75rem 1rem',
+                                                borderRadius: '12px',
+                                                border: '1px solid #cbd5e1',
+                                                fontSize: '0.95rem',
+                                                backgroundColor: '#f8fafc',
+                                                color: '#0f172a',
+                                                outline: 'none',
+                                            } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { "data-preview-static": "phone-label", style: { display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }, children: "Phone / WhatsApp" }), (0, jsx_runtime_1.jsx)("input", { type: "tel", required: true, placeholder: "+1 (555) 000-0000", value: customerPhone, onChange: (e) => setCustomerPhone(e.target.value), style: {
+                                                width: '100%',
+                                                padding: '0.75rem 1rem',
+                                                borderRadius: '12px',
+                                                border: '1px solid #cbd5e1',
+                                                fontSize: '0.95rem',
+                                                backgroundColor: '#f8fafc',
+                                                color: '#0f172a',
+                                                outline: 'none',
+                                            } })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { "data-preview-static": "notes-label", style: { display: 'block', fontSize: '0.875rem', fontWeight: 600, marginBottom: '0.5rem' }, children: "Special Notes / Requests (Optional)" }), (0, jsx_runtime_1.jsx)("textarea", { rows: 2, placeholder: "Any hair preferences, color history, or styling goals...", value: customerNotes, onChange: (e) => setCustomerNotes(e.target.value), style: {
+                                        width: '100%',
+                                        padding: '0.75rem 1rem',
+                                        borderRadius: '12px',
+                                        border: '1px solid #cbd5e1',
+                                        fontSize: '0.95rem',
+                                        backgroundColor: '#f8fafc',
+                                        color: '#0f172a',
+                                        outline: 'none',
+                                        resize: 'vertical',
+                                    } })] }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", style: {
+                                marginTop: '0.5rem',
+                                padding: '0.95rem 1.5rem',
+                                borderRadius: '14px',
+                                backgroundColor: '#16a34a',
+                                color: '#ffffff',
+                                fontWeight: 600,
+                                fontSize: '1rem',
+                                border: 'none',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                gap: '0.625rem',
+                                transition: 'background-color 0.2s ease, transform 0.1s ease',
+                                boxShadow: '0 10px 15px -3px rgba(22, 163, 74, 0.3)',
+                            }, children: [(0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "data-preview-static": "whatsapp-icon", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86.173.086.275.071.376-.043.101-.116.433-.506.549-.68.116-.173.231-.145.39-.086s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.099.824z" }) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: buttonLabelId, defaultValue: defaultButtonLabel, as: "span" })] })] })] }) }));
+}
+exports.BookingModal = EditableBookingModal;

package/dist/EditableTestimonialCarousel.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface CarouselTestimonialItem {
+    id?: string | number;
+    quote: string;
+    author: string;
+    role?: string;
+    company?: string;
+    avatar?: string;
+    rating?: number;
+}
+export interface EditableTestimonialCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    listPath?: string;
+    items?: CarouselTestimonialItem[];
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    titleId?: string;
+    defaultTitle?: string;
+    subtitleId?: string;
+    defaultSubtitle?: string;
+}
+export declare function EditableTestimonialCarousel({ listPath, items, autoplay, autoplayInterval, titleId, defaultTitle, subtitleId, defaultSubtitle, className, style, ...props }: EditableTestimonialCarouselProps): React.JSX.Element;
+export declare const TestimonialCarousel: typeof EditableTestimonialCarousel;

package/dist/EditableTestimonialCarousel.js

@@ -0,0 +1,185 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestimonialCarousel = void 0;
+exports.EditableTestimonialCarousel = EditableTestimonialCarousel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableText_1 = require("./EditableText");
+const EditableImage_1 = require("./EditableImage");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+function EditableTestimonialCarousel({ listPath = 'home.testimonials', items, autoplay = true, autoplayInterval = 5000, titleId = 'home.testimonialsSection.title', defaultTitle = 'Loved by Over 5,000+ Happy Clients', subtitleId = 'home.testimonialsSection.subtitle', defaultSubtitle = 'Real experiences, authentic transformations, and 5-star artistry.', className = '', style, ...props }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const defaultItems = [
+        {
+            id: '1',
+            quote: 'The balayage and haircut completely transformed my look. The stylists here take genuine time to understand your face shape and hair texture. Absolutely premier experience!',
+            author: 'Sophia Kensington',
+            role: 'Fashion Director & Verified Client',
+            avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=80',
+            rating: 5,
+        },
+        {
+            id: '2',
+            quote: 'Flawless precision fade and hot towel treatment. This is not just a haircut, it is true modern atelier craftsmanship. I have been coming here every two weeks for two years.',
+            author: 'Marcus Vance',
+            role: 'Creative Producer',
+            avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
+            rating: 5,
+        },
+        {
+            id: '3',
+            quote: 'Brought my daughter here for her first styling experience. The patience, warmth, and luxury care they showed made it unforgettable. Cannot recommend enough!',
+            author: 'Elena Rostova',
+            role: 'Architect & Mother',
+            avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=400&q=80',
+            rating: 5,
+        },
+    ];
+    // Resolve collection from siteData content if present
+    let resolvedList = defaultItems;
+    if (items && items.length > 0) {
+        resolvedList = items;
+    }
+    else if (siteData?.content) {
+        const parts = listPath.split('.');
+        let curr = siteData.content;
+        for (const part of parts) {
+            if (curr && typeof curr === 'object') {
+                curr = curr[part];
+            }
+            else {
+                curr = null;
+                break;
+            }
+        }
+        if (Array.isArray(curr) && curr.length > 0) {
+            resolvedList = curr;
+        }
+    }
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const [isPaused, setIsPaused] = (0, react_1.useState)(false);
+    const touchStartX = (0, react_1.useRef)(0);
+    const touchEndX = (0, react_1.useRef)(0);
+    const nextSlide = (0, react_1.useCallback)(() => {
+        setActiveIndex((prev) => (prev + 1) % resolvedList.length);
+    }, [resolvedList.length]);
+    const prevSlide = (0, react_1.useCallback)(() => {
+        setActiveIndex((prev) => (prev - 1 + resolvedList.length) % resolvedList.length);
+    }, [resolvedList.length]);
+    (0, react_1.useEffect)(() => {
+        if (!autoplay || isPaused || resolvedList.length <= 1)
+            return;
+        const interval = setInterval(nextSlide, autoplayInterval);
+        return () => clearInterval(interval);
+    }, [autoplay, isPaused, autoplayInterval, nextSlide, resolvedList.length]);
+    const handleTouchStart = (e) => {
+        touchStartX.current = e.targetTouches[0].clientX;
+    };
+    const handleTouchMove = (e) => {
+        touchEndX.current = e.targetTouches[0].clientX;
+    };
+    const handleTouchEnd = () => {
+        if (touchStartX.current - touchEndX.current > 60) {
+            nextSlide();
+        }
+        if (touchStartX.current - touchEndX.current < -60) {
+            prevSlide();
+        }
+    };
+    const currentItem = resolvedList[activeIndex] || resolvedList[0];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `editable-testimonial-carousel relative py-12 px-4 max-w-5xl mx-auto ${className}`.trim(), onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: {
+            position: 'relative',
+            width: '100%',
+            maxWidth: '56rem',
+            margin: '0 auto',
+            padding: '3rem 1rem',
+            ...style,
+        }, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: { textAlign: 'center', marginBottom: '2.5rem' }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: titleId, defaultValue: defaultTitle, as: "h2", style: {
+                            fontSize: '2rem',
+                            fontWeight: 700,
+                            letterSpacing: '-0.03em',
+                            marginBottom: '0.75rem',
+                            color: 'var(--color-text, #0f172a)',
+                        } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: subtitleId, defaultValue: defaultSubtitle, as: "p", style: {
+                            fontSize: '1rem',
+                            color: '#64748b',
+                            maxWidth: '36rem',
+                            margin: '0 auto',
+                            lineHeight: 1.6,
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { "data-preview-list-path": listPath, style: {
+                    position: 'relative',
+                    backgroundColor: 'var(--color-surface, #ffffff)',
+                    borderRadius: '24px',
+                    padding: '3rem 2.5rem',
+                    boxShadow: '0 20px 40px -15px rgba(0, 0, 0, 0.07)',
+                    border: '1px solid var(--color-border, #f1f5f9)',
+                    minHeight: '280px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `${listPath}[${activeIndex}]`, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '4px', marginBottom: '1.5rem' }, children: [...Array(5)].map((_, i) => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: i < (currentItem?.rating ?? 5) ? '#f59e0b' : '#e2e8f0', "data-preview-static": "carousel-star", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, i))) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: `${listPath}[${activeIndex}].quote`, defaultValue: currentItem?.quote, as: "p", style: {
+                                    fontSize: '1.25rem',
+                                    lineHeight: 1.7,
+                                    fontWeight: 400,
+                                    fontStyle: 'italic',
+                                    color: 'var(--color-text, #1e293b)',
+                                    marginBottom: '2rem',
+                                } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${listPath}[${activeIndex}].avatar`, src: currentItem?.avatar || 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=400&q=80', alt: currentItem?.author || 'Client', style: {
+                                            width: '52px',
+                                            height: '52px',
+                                            borderRadius: '9999px',
+                                            objectFit: 'cover',
+                                            border: '2px solid #e2e8f0',
+                                        } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: `${listPath}[${activeIndex}].author`, defaultValue: currentItem?.author, as: "h4", style: {
+                                                    fontSize: '1rem',
+                                                    fontWeight: 700,
+                                                    color: 'var(--color-text, #0f172a)',
+                                                    margin: 0,
+                                                } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { id: `${listPath}[${activeIndex}].role`, defaultValue: currentItem?.role || currentItem?.company || 'Verified Client', as: "p", style: {
+                                                    fontSize: '0.85rem',
+                                                    color: '#64748b',
+                                                    margin: '0.2rem 0 0 0',
+                                                } })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { "data-preview-static": "carousel-controls", style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            marginTop: '2rem',
+                            paddingTop: '1.5rem',
+                            borderTop: '1px solid #f1f5f9',
+                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '8px' }, children: resolvedList.map((item, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `Go to slide ${idx + 1}`, onClick: () => setActiveIndex(idx), style: {
+                                        width: idx === activeIndex ? '28px' : '8px',
+                                        height: '8px',
+                                        borderRadius: '9999px',
+                                        backgroundColor: idx === activeIndex ? 'var(--color-primary, #0f172a)' : '#cbd5e1',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        transition: 'all 0.3s ease',
+                                        padding: 0,
+                                    } }, item.id || item.author || idx))) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '8px' }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: prevSlide, "aria-label": "Previous testimonial", style: {
+                                            width: '40px',
+                                            height: '40px',
+                                            borderRadius: '9999px',
+                                            border: '1px solid #e2e8f0',
+                                            backgroundColor: '#ffffff',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            cursor: 'pointer',
+                                            color: '#334155',
+                                            transition: 'background-color 0.2s ease',
+                                        }, children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("polyline", { points: "15 18 9 12 15 6" }) }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: nextSlide, "aria-label": "Next testimonial", style: {
+                                            width: '40px',
+                                            height: '40px',
+                                            borderRadius: '9999px',
+                                            border: '1px solid #e2e8f0',
+                                            backgroundColor: '#ffffff',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            cursor: 'pointer',
+                                            color: '#334155',
+                                            transition: 'background-color 0.2s ease',
+                                        }, children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("polyline", { points: "9 18 15 12 9 6" }) }) })] })] })] })] }));
+}
+exports.TestimonialCarousel = EditableTestimonialCarousel;

package/dist/PlatformProductDetail.js

@@ -301,7 +301,7 @@ function PlatformProductDetail({ productId, queryParam = DEFAULT_QUERY_PARAM, pr
         retryDelays,
     });
     if (result.status === 'loading') {
-        return loadingFallback ?? ((0, jsx_runtime_1.jsx)("div", { role: "status", className: "mx-auto flex min-h-[40vh] max-w-7xl items-center justify-center px-4 py-16 text-sm text-slate-400", children: "Loading product\u2026" }));
+        return loadingFallback ?? ((0, jsx_runtime_1.jsx)("div", { role: "status", className: "mx-auto flex min-h-[40vh] max-w-7xl items-center justify-center px-4 py-16 text-sm text-slate-400", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-static": "product-detail-loading", children: "Loading product\u2026" }) }));
     }
     if (result.status === 'error') {
         return errorFallback ?? ((0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex min-h-[40vh] max-w-xl flex-col items-center justify-center gap-4 px-4 py-16 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold text-slate-100", children: "Unable to load product" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-slate-400", children: "Please check your connection and try again." }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: result.retry, className: "rounded-xl bg-white px-5 py-2.5 text-sm font-bold text-slate-950", children: "Try again" })] }));

package/dist/SiteDataProvider.d.ts

@@ -57,7 +57,8 @@ export type SiteData = {
     styles?: GenericRecord | null;
     [key: string]: unknown;
 };
-export declare const SiteDataContext: React.Context<SiteData>;
+declare const UNINITIALIZED_SITE_DATA: unique symbol;
+export declare const SiteDataContext: React.Context<SiteData | typeof UNINITIALIZED_SITE_DATA>;
 export declare function isRecord(value: unknown): value is GenericRecord;
 export declare function isDarkColor(color?: unknown): boolean;
 export declare function syncThemeToDocument(theme: unknown): void;
@@ -99,7 +100,7 @@ export declare function useFieldStyle(path?: string): GenericRecord | null;
  */
 export declare const DenebDataProvider: typeof SiteDataProvider;
 export declare const useDenebData: typeof useSiteData;
-export declare const DenebDataContext: React.Context<SiteData>;
+export declare const DenebDataContext: React.Context<SiteData | typeof UNINITIALIZED_SITE_DATA>;
 export type DenebData = SiteData;
 /**
  * Hook to retrieve products cleanly from SiteData, supporting both

package/dist/SiteDataProvider.js

@@ -28,6 +28,7 @@ const core_1 = require("@deneb-ui/core");
 const DenebComponentStyles_1 = require("./DenebComponentStyles");
 const FontLoader_1 = require("./fonts/FontLoader");
 const ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
+const ThemeStyles_1 = require("./ThemeStyles");
 exports.DENEB_PREVIEW_DATA_MESSAGE = 'DENEB_PREVIEW_SITE_DATA';
 exports.PREVIEW_DATA_MESSAGE = 'FIVORA_PREVIEW_SITE_DATA';
 const PREVIOUS_PREVIEW_PREFIX = `${['MARKET', 'PLACE'].join('')}_PREVIEW_`;
@@ -50,7 +51,8 @@ const SITE_DATA_CACHE_KEY = '__FIVORA_PREVIEW_SITE_DATA_CACHE__';
 const LEGACY_SITE_DATA_CACHE_KEY = previousPreviewStorageKey('SITE_DATA_CACHE');
 const SITE_DATA_GLOBAL_KEY = '__FIVORA_PREVIEW_SITE_DATA__';
 const LEGACY_SITE_DATA_GLOBAL_KEY = previousPreviewStorageKey('SITE_DATA');
-exports.SiteDataContext = (0, react_1.createContext)({});
+const UNINITIALIZED_SITE_DATA = Symbol('DENEB_UNINITIALIZED_SITE_DATA');
+exports.SiteDataContext = (0, react_1.createContext)(UNINITIALIZED_SITE_DATA);
 function isRecord(value) {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 }
@@ -464,10 +466,19 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
         return () => window.removeEventListener('message', onMessage);
     }, []);
     const value = (0, react_1.useMemo)(() => siteData, [siteData]);
-    return ((0, jsx_runtime_1.jsxs)(exports.SiteDataContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(FontLoader_1.FontLoader, {}), (0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)(DenebComponentStyles_1.DenebComponentStyles, {}), children] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.SiteDataContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(ThemeStyles_1.ThemeStyles, { theme: value?.theme }), (0, jsx_runtime_1.jsx)(FontLoader_1.FontLoader, {}), (0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)(DenebComponentStyles_1.DenebComponentStyles, {}), children] }));
 }
 function useSiteData() {
-    return (0, react_1.useContext)(exports.SiteDataContext);
+    const ctx = (0, react_1.useContext)(exports.SiteDataContext);
+    if (ctx === UNINITIALIZED_SITE_DATA) {
+        if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
+            console.warn('[Deneb UI] useSiteData() was called outside of <SiteDataProvider>. ' +
+                'Ensure your root layout.tsx or _app.tsx wraps the tree with: ' +
+                '<SiteDataProvider initialSiteData={initialSiteData}>. Falling back to empty data.');
+        }
+        return {};
+    }
+    return ctx;
 }
 function contentObject(value) {
     return isRecord(value) ? value : {};

package/dist/ThemeStyles.d.ts

@@ -17,6 +17,8 @@ export interface TemplateTheme {
     align?: 'left' | 'center' | 'right';
     buttonBackgroundColor?: string;
     buttonTextColor?: string;
+    dark?: Partial<TemplateTheme>;
+    light?: Partial<TemplateTheme>;
     [key: string]: unknown;
 }
 /**
@@ -41,8 +43,15 @@ export interface ThemeStylesProps {
     defaultAccent?: string;
     defaultBg?: string;
     defaultText?: string;
+    /**
+     * Automatically generate opposite mode selectors (.dark / .light or [data-theme="..."])
+     * so templates with theme switchers transition without writing manual CSS.
+     * Default: true.
+     */
+    enableDualMode?: boolean;
 }
 /**
  * Automatically injects standard and custom fivora theme variables into the document.
+ * Supports light-only, dark-only, and dual-mode (light & dark toggle) templates.
  */
-export declare function ThemeStyles({ theme, defaultPrimary, defaultSecondary, defaultAccent, defaultBg, defaultText, }: ThemeStylesProps): React.JSX.Element;
+export declare function ThemeStyles({ theme, defaultPrimary, defaultSecondary, defaultAccent, defaultBg, defaultText, enableDualMode, }: ThemeStylesProps): React.JSX.Element;

package/dist/ThemeStyles.js

@@ -139,14 +139,14 @@ function getThemeCssProperties(theme) {
     const customVars = {};
     if (theme) {
         for (const [key, val] of Object.entries(theme)) {
-            if (typeof val === 'string' || typeof val === 'number') {
+            if (key !== 'dark' && key !== 'light' && (typeof val === 'string' || typeof val === 'number')) {
                 const cssVarName = `--${key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}`;
                 customVars[cssVarName] = String(val);
             }
         }
     }
     const isDark = (0, core_1.isDarkColor)(theme?.backgroundColor);
-    const bgColor = theme?.backgroundColor || (isDark ? '#0f172a' : '#ffffff');
+    const bgColor = theme?.backgroundColor || (isDark ? '#090d1a' : '#ffffff');
     const textColor = theme?.textColor || (isDark ? '#f8fafc' : '#0f172a');
     const mutedColor = theme?.mutedTextColor || (isDark ? 'rgba(248, 250, 252, 0.7)' : '#64748b');
     const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : '#e2e8f0';
@@ -211,17 +211,61 @@ function getThemeCssProperties(theme) {
 }
 /**
  * Automatically injects standard and custom fivora theme variables into the document.
+ * Supports light-only, dark-only, and dual-mode (light & dark toggle) templates.
  */
-function ThemeStyles({ theme, defaultPrimary = '#2563eb', defaultSecondary = '#0f172a', defaultAccent = '#14b8a6', defaultBg = '#ffffff', defaultText = '#0f172a', }) {
+function ThemeStyles({ theme, defaultPrimary = '#2563eb', defaultSecondary = '#0f172a', defaultAccent = '#14b8a6', defaultBg = '#ffffff', defaultText = '#0f172a', enableDualMode = true, }) {
     const styleProps = getThemeCssProperties(theme);
-    const cssLines = Object.entries(styleProps)
+    const baseLines = Object.entries(styleProps)
         .filter(([key]) => key.startsWith('--'))
         .map(([key, value]) => `  ${key}: ${value};`)
         .join('\n');
-    const css = `
+    let css = `
     :root {
-${cssLines}
+${baseLines}
     }
   `;
+    if (enableDualMode) {
+        const isDarkBase = (0, core_1.isDarkColor)(theme?.backgroundColor);
+        if (isDarkBase) {
+            // Base theme is dark. Generate light mode rules for .light or [data-theme="light"]
+            const lightTheme = {
+                ...theme,
+                backgroundColor: '#ffffff',
+                textColor: '#0f172a',
+                mutedTextColor: '#64748b',
+                ...(theme?.light || {}),
+            };
+            const lightProps = getThemeCssProperties(lightTheme);
+            const lightLines = Object.entries(lightProps)
+                .filter(([key]) => key.startsWith('--'))
+                .map(([key, value]) => `  ${key}: ${value};`)
+                .join('\n');
+            css += `
+    .light, [data-theme="light"] {
+${lightLines}
+    }
+      `;
+        }
+        else {
+            // Base theme is light. Generate dark mode rules for .dark or [data-theme="dark"]
+            const darkTheme = {
+                ...theme,
+                backgroundColor: '#090d1a',
+                textColor: '#f8fafc',
+                mutedTextColor: 'rgba(248, 250, 252, 0.7)',
+                ...(theme?.dark || {}),
+            };
+            const darkProps = getThemeCssProperties(darkTheme);
+            const darkLines = Object.entries(darkProps)
+                .filter(([key]) => key.startsWith('--'))
+                .map(([key, value]) => `  ${key}: ${value};`)
+                .join('\n');
+            css += `
+    .dark, [data-theme="dark"] {
+${darkLines}
+    }
+      `;
+        }
+    }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: css } })] }));
 }

package/dist/ThemeToggle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ThemeToggleProps {
+    className?: string;
+    showLabel?: boolean;
+}
+/**
+ * Built-in ThemeToggle Component for DENEB Storefront Templates.
+ * Toggles the `.dark` class on the root <html> element and persists preference to localStorage.
+ */
+export declare function ThemeToggle({ className, showLabel }: ThemeToggleProps): React.JSX.Element;
+export default ThemeToggle;

package/dist/ThemeToggle.js

@@ -0,0 +1,51 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeToggle = ThemeToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * Built-in ThemeToggle Component for DENEB Storefront Templates.
+ * Toggles the `.dark` class on the root <html> element and persists preference to localStorage.
+ */
+function ThemeToggle({ className = '', showLabel = false }) {
+    const [isDark, setIsDark] = (0, react_1.useState)(false);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+        const hasDarkClass = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+        const storedTheme = typeof window !== 'undefined' ? localStorage.getItem('deneb-theme') : null;
+        const prefersDark = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+        const activeDark = storedTheme ? storedTheme === 'dark' : hasDarkClass || prefersDark;
+        setIsDark(activeDark);
+        if (activeDark) {
+            if (typeof document !== 'undefined')
+                document.documentElement.classList.add('dark');
+        }
+        else {
+            if (typeof document !== 'undefined')
+                document.documentElement.classList.remove('dark');
+        }
+    }, []);
+    const toggleTheme = () => {
+        const nextDark = !isDark;
+        setIsDark(nextDark);
+        if (nextDark) {
+            if (typeof document !== 'undefined')
+                document.documentElement.classList.add('dark');
+            if (typeof window !== 'undefined')
+                localStorage.setItem('deneb-theme', 'dark');
+        }
+        else {
+            if (typeof document !== 'undefined')
+                document.documentElement.classList.remove('dark');
+            if (typeof window !== 'undefined')
+                localStorage.setItem('deneb-theme', 'light');
+        }
+    };
+    if (!mounted) {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Toggle theme", "data-preview-static": "theme-toggle", className: `w-9 h-9 rounded-lg border border-[var(--border-color,#e2e8f0)] bg-[var(--card-bg,#ffffff)] opacity-0 transition-opacity ${className}` }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: toggleTheme, "data-preview-static": "theme-toggle", "aria-label": isDark ? 'Switch to light mode' : 'Switch to dark mode', title: isDark ? 'Switch to light mode' : 'Switch to dark mode', className: `inline-flex items-center justify-center gap-2 h-9 px-2.5 rounded-lg border border-[var(--border-color,rgba(0,0,0,0.1))] bg-[var(--card-bg,#ffffff)] text-[var(--text-color,#0f172a)] hover:border-[var(--color-primary,#016a7e)] hover:text-[var(--color-primary,#016a7e)] shadow-sm transition-all duration-200 cursor-pointer ${className}`, children: [isDark ? ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-4 h-4 text-amber-400", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) })) : ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-4 h-4 text-amber-500", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2v2" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 20v2" }), (0, jsx_runtime_1.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h2" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 12h2" }), (0, jsx_runtime_1.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }), (0, jsx_runtime_1.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })] })), showLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium", children: isDark ? 'Dark' : 'Light' }))] }));
+}
+exports.default = ThemeToggle;

package/dist/index.d.ts

@@ -22,6 +22,9 @@ export * from './EditableCard';
 export * from './EditablePricingCard';
 export * from './EditableTestimonialCard';
 export * from './EditableTestimonialSection';
+export * from './EditableTestimonialCarousel';
+export * from './EditableBeforeAfterSlider';
+export * from './EditableBookingModal';
 export * from './EditableFAQAccordion';
 export * from './EditableContactForm';
 export * from './EditableNavbar';
@@ -39,6 +42,7 @@ export * from './EditableCartDrawer';
 export * from './EditableFilterSidebar';
 export * from './SiteDataProvider';
 export * from './ThemeStyles';
+export * from './ThemeToggle';
 export { ResponsiveBaseStyles } from './ResponsiveBaseStyles';
 export { DenebComponentStyles } from './DenebComponentStyles';
 export { FontLoader, DENEB_FONTS_LINK_ID } from './fonts/FontLoader';
@@ -86,6 +90,9 @@ export { EditableAnnouncementBar as AnnouncementBar } from './EditableAnnounceme
 export { EditableCategoryPills as CategoryPills } from './EditableCategoryPills';
 export { EditableCartDrawer as CartDrawer } from './EditableCartDrawer';
 export { EditableFilterSidebar as FilterSidebar } from './EditableFilterSidebar';
+export { EditableBeforeAfterSlider as BeforeAfterSlider } from './EditableBeforeAfterSlider';
+export { EditableBookingModal as BookingModal } from './EditableBookingModal';
+export { EditableTestimonialCarousel as TestimonialCarousel } from './EditableTestimonialCarousel';
 export { PlatformAdditionalPages, AdditionalPagesNav } from './PlatformAdditionalPages';
 /**
  * DENEB UI Framework Metadata

package/dist/index.js

@@ -19,7 +19,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
-exports.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
+exports.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.TestimonialCarousel = exports.BookingModal = exports.BeforeAfterSlider = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
 __exportStar(require("./PreviewField"), exports);
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
@@ -40,6 +40,9 @@ __exportStar(require("./EditableCard"), exports);
 __exportStar(require("./EditablePricingCard"), exports);
 __exportStar(require("./EditableTestimonialCard"), exports);
 __exportStar(require("./EditableTestimonialSection"), exports);
+__exportStar(require("./EditableTestimonialCarousel"), exports);
+__exportStar(require("./EditableBeforeAfterSlider"), exports);
+__exportStar(require("./EditableBookingModal"), exports);
 __exportStar(require("./EditableFAQAccordion"), exports);
 __exportStar(require("./EditableContactForm"), exports);
 __exportStar(require("./EditableNavbar"), exports);
@@ -57,6 +60,7 @@ __exportStar(require("./EditableCartDrawer"), exports);
 __exportStar(require("./EditableFilterSidebar"), exports);
 __exportStar(require("./SiteDataProvider"), exports);
 __exportStar(require("./ThemeStyles"), exports);
+__exportStar(require("./ThemeToggle"), exports);
 var ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 Object.defineProperty(exports, "ResponsiveBaseStyles", { enumerable: true, get: function () { return ResponsiveBaseStyles_1.ResponsiveBaseStyles; } });
 var DenebComponentStyles_1 = require("./DenebComponentStyles");
@@ -166,6 +170,12 @@ var EditableCartDrawer_1 = require("./EditableCartDrawer");
 Object.defineProperty(exports, "CartDrawer", { enumerable: true, get: function () { return EditableCartDrawer_1.EditableCartDrawer; } });
 var EditableFilterSidebar_1 = require("./EditableFilterSidebar");
 Object.defineProperty(exports, "FilterSidebar", { enumerable: true, get: function () { return EditableFilterSidebar_1.EditableFilterSidebar; } });
+var EditableBeforeAfterSlider_1 = require("./EditableBeforeAfterSlider");
+Object.defineProperty(exports, "BeforeAfterSlider", { enumerable: true, get: function () { return EditableBeforeAfterSlider_1.EditableBeforeAfterSlider; } });
+var EditableBookingModal_1 = require("./EditableBookingModal");
+Object.defineProperty(exports, "BookingModal", { enumerable: true, get: function () { return EditableBookingModal_1.EditableBookingModal; } });
+var EditableTestimonialCarousel_1 = require("./EditableTestimonialCarousel");
+Object.defineProperty(exports, "TestimonialCarousel", { enumerable: true, get: function () { return EditableTestimonialCarousel_1.EditableTestimonialCarousel; } });
 var PlatformAdditionalPages_1 = require("./PlatformAdditionalPages");
 Object.defineProperty(exports, "PlatformAdditionalPages", { enumerable: true, get: function () { return PlatformAdditionalPages_1.PlatformAdditionalPages; } });
 Object.defineProperty(exports, "AdditionalPagesNav", { enumerable: true, get: function () { return PlatformAdditionalPages_1.AdditionalPagesNav; } });

package/dist/location/MapLink.js

@@ -66,5 +66,5 @@ function MapLink({ name, mapUrl, addressUrl, url, address, city, state, country,
         ...variantStyles[variant],
     };
     const opensNewTab = finalHref !== '#';
-    return ((0, jsx_runtime_1.jsxs)("span", { className: "deneb-map-link-group", style: { display: 'contents' }, children: [(0, jsx_runtime_1.jsxs)("a", { href: finalHref, "data-preview-static": "map-link", target: opensNewTab ? '_blank' : undefined, rel: opensNewTab ? 'noopener noreferrer' : undefined, className: `deneb-map-link ${className}`.trim(), style: mergedStyles, ...rest, children: [icon !== undefined ? icon : defaultIcon, (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": resolvedLabelFieldPath, children: label })] }), (0, jsx_runtime_1.jsx)("span", { hidden: true, "aria-hidden": "true", "data-preview-field-path": resolvedUrlFieldPath, children: urlText })] }));
+    return ((0, jsx_runtime_1.jsxs)("a", { href: finalHref, "data-preview-field-path": resolvedUrlFieldPath, target: opensNewTab ? '_blank' : undefined, rel: opensNewTab ? 'noopener noreferrer' : undefined, className: `deneb-map-link ${className}`.trim(), style: mergedStyles, ...rest, children: [icon !== undefined ? icon : defaultIcon, (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": resolvedLabelFieldPath, children: label })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.70",
+  "version": "2.0.72",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -50,7 +50,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.70"
+    "@deneb-ui/core": "^2.0.72"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/platform-contract.json

@@ -26,7 +26,10 @@
     "products[*].measurement",
     "products[*].unit",
     "testimonials[*].id",
-    "categories[*].slug"
+    "categories[*].slug",
+    "services[*].id",
+    "products[*].currency",
+    "about.collageImages[*].id"
   ],
   "platformSiteDataKeys": [
     "__fivoraIntake",