storefront-layouts-staging 1.0.0-staging.0

package/dist/components/ui/skeletons/product-grid-skeleton.d.ts

@@ -0,0 +1,7 @@
+interface ProductGridSkeletonProps {
+    count?: number;
+    columns?: number;
+}
+export declare function ProductGridSkeleton({ count, columns }: ProductGridSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-grid-skeleton.d.ts.map

package/dist/components/ui/skeletons/product-grid-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-grid-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/product-grid-skeleton.tsx"],"names":[],"mappings":"AAEA,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAS,EAAE,OAAW,EAAE,EAAE,wBAAwB,2CAgBvF"}

package/dist/components/ui/skeletons/product-grid-skeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProductCardSkeleton } from './product-card-skeleton.js';
+export function ProductGridSkeleton({ count = 8, columns = 4 }) {
+    const gridCols = {
+        1: 'grid-cols-1',
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+        5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
+    };
+    return (_jsx("div", { className: `grid ${gridCols[columns] || gridCols[4]} gap-6 mb-8`, children: Array.from({ length: count }).map((_, i) => (_jsx(ProductCardSkeleton, {}, i))) }));
+}

package/dist/components/ui/store-logos.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StoreConfig } from '../../lib/store-types';
+interface LogoProps extends React.SVGProps<SVGSVGElement> {
+    className?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+}
+export declare const FoodLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FoodModernLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClothingLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClothingMinimalLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookingLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BookingAgendaLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElectronicsLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ElectronicsGridLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MotivationalLogo: ({ className, primaryColor, secondaryColor, ...props }: LogoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStoreLogo: (type: string, props: LogoProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * StoreLogo component that renders backend logo if available, otherwise falls back to default SVG logo
+ */
+interface StoreLogoComponentProps extends LogoProps {
+    storeConfig: StoreConfig | null | undefined;
+    alt?: string;
+}
+export declare function StoreLogo({ storeConfig, alt, className, ...props }: StoreLogoComponentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * StoreLogoSimple component for use with simplified store objects (like StoreSummary)
+ */
+interface StoreLogoSimpleProps extends LogoProps {
+    store: {
+        type: string;
+        name?: string;
+        branding?: {
+            primaryColor?: string;
+            secondaryColor?: string;
+            logo?: string;
+        };
+    } | null | undefined;
+    alt?: string;
+}
+export declare function StoreLogoSimple({ store, alt, className, ...props }: StoreLogoSimpleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=store-logos.d.ts.map

package/dist/components/ui/store-logos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store-logos.d.ts","sourceRoot":"","sources":["../../../src/components/ui/store-logos.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,UAAU,SAAU,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,GAAI,uDAA+E,SAAS,4CA0ChH,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,uDAA+E,SAAS,4CAuBtH,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,uDAA+E,SAAS,4CAgCpH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,uDAA+E,SAAS,4CAqB3H,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,uDAA+E,SAAS,4CA4BnH,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,uDAA+E,SAAS,4CAczH,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,uDAA+E,SAAS,4CA8BvH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,uDAA+E,SAAS,4CAmB3H,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,uDAA+E,SAAS,4CA8BxH,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,EAAE,OAAO,SAAS,4CAuB1D,CAAC;AAEF;;GAEG;AACH,UAAU,uBAAwB,SAAQ,SAAS;IACjD,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CA4B3F;AAiBD;;GAEG;AACH,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE;YACT,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,cAAc,CAAC,EAAE,MAAM,CAAC;YACxB,IAAI,CAAC,EAAE,MAAM,CAAC;SACf,CAAC;KACH,GAAG,IAAI,GAAG,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CA0BxF"}

package/dist/components/ui/store-logos.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import { cn } from '../../lib/utils/index.js';
+import { getLogoUrl } from '../../lib/utils/asset-helpers.js';
+export const FoodLogo = ({ className, primaryColor = '#FF6B35', secondaryColor = '#F7931E', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("path", { d: "M100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20Z", fill: primaryColor, fillOpacity: "0.1" }), _jsx("path", { d: "M130 90C130 90 125 60 100 60C75 60 70 90 70 90V110C70 126.569 83.4315 140 100 140C116.569 140 130 126.569 130 110V90Z", stroke: primaryColor, strokeWidth: "12", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M100 60V140", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M70 90H130", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M85 45C85 45 90 35 100 35C110 35 115 45 115 45", stroke: secondaryColor, strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const FoodModernLogo = ({ className, primaryColor = '#FF6B35', secondaryColor = '#F7931E', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("rect", { width: "200", height: "200", rx: "40", fill: primaryColor }), _jsx("path", { d: "M140 70C140 70 130 50 100 50C70 50 60 70 60 70V120C60 142.091 77.9086 160 100 160C122.091 160 140 142.091 140 120V70Z", stroke: "white", strokeWidth: "12", strokeLinecap: "round" }), _jsx("path", { d: "M80 100L120 100", stroke: "white", strokeWidth: "12", strokeLinecap: "round" }), _jsx("circle", { cx: "150", cy: "50", r: "15", fill: secondaryColor })] }));
+export const ClothingLogo = ({ className, primaryColor = '#EC4899', secondaryColor = '#FBCFE8', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("path", { d: "M100 30L40 70V160C40 171.046 48.9543 180 60 180H140C151.046 180 160 171.046 160 160V70L100 30Z", fill: secondaryColor, fillOpacity: "0.3", stroke: primaryColor, strokeWidth: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M100 30V180", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M70 70L100 100L130 70", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const ClothingMinimalLogo = ({ className, primaryColor = '#000000', secondaryColor = '#FFFFFF', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("circle", { cx: "100", cy: "100", r: "90", stroke: primaryColor, strokeWidth: "8" }), _jsx("path", { d: "M60 80L100 50L140 80V150H60V80Z", stroke: primaryColor, strokeWidth: "8", strokeLinejoin: "round" }), _jsx("path", { d: "M90 150V110H110V150", stroke: primaryColor, strokeWidth: "6" })] }));
+export const BookingLogo = ({ className, primaryColor = '#E11D48', secondaryColor = '#FFE4E6', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "brushGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: primaryColor }), _jsx("stop", { offset: "100%", stopColor: secondaryColor })] }) }), _jsx("path", { d: "M130 40C150 40 160 60 150 80L100 160L50 80C40 60 50 40 70 40H130Z", fill: "url(#brushGradient)", stroke: primaryColor, strokeWidth: "6" }), _jsx("path", { d: "M100 160L100 180", stroke: primaryColor, strokeWidth: "10", strokeLinecap: "round" }), _jsx("circle", { cx: "100", cy: "70", r: "20", fill: "white", fillOpacity: "0.5" })] }));
+export const BookingAgendaLogo = ({ className, primaryColor = '#4F46E5', secondaryColor = '#E0E7FF', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("rect", { x: "40", y: "50", width: "120", height: "110", rx: "10", stroke: primaryColor, strokeWidth: "10", fill: "none" }), _jsx("path", { d: "M70 30V60", stroke: primaryColor, strokeWidth: "10", strokeLinecap: "round" }), _jsx("path", { d: "M130 30V60", stroke: primaryColor, strokeWidth: "10", strokeLinecap: "round" }), _jsx("path", { d: "M40 90H160", stroke: primaryColor, strokeWidth: "6" }), _jsx("path", { d: "M80 120L95 135L120 110", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+export const ElectronicsLogo = ({ className, primaryColor = '#2563EB', secondaryColor = '#1E40AF', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("circle", { cx: "100", cy: "100", r: "80", stroke: primaryColor, strokeWidth: "8", strokeDasharray: "20 10" }), _jsx("path", { d: "M100 50V90L130 110", stroke: primaryColor, strokeWidth: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "100", cy: "100", r: "10", fill: primaryColor }), _jsx("path", { d: "M100 30V10", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" }), _jsx("path", { d: "M170 100H190", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" })] }));
+export const ElectronicsGridLogo = ({ className, primaryColor = '#2563EB', secondaryColor = '#F59E0B', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("path", { d: "M40 100L70 40L100 160L130 70L160 100", stroke: primaryColor, strokeWidth: "12", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }), _jsx("rect", { x: "20", y: "20", width: "160", height: "160", rx: "20", stroke: primaryColor, strokeWidth: "8", fill: "none", opacity: "0.3" }), _jsx("circle", { cx: "160", cy: "100", r: "10", fill: secondaryColor })] }));
+export const MotivationalLogo = ({ className, primaryColor = '#0F172A', secondaryColor = '#E2E8F0', ...props }) => (_jsxs("svg", { viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: cn("w-10 h-10", className), ...props, children: [_jsx("circle", { cx: "100", cy: "100", r: "80", fill: primaryColor, fillOpacity: "0.1" }), _jsx("path", { d: "M100 40C100 40 60 60 60 100C60 140 100 160 100 160C100 160 140 140 140 100C140 60 100 40 100 40Z", stroke: primaryColor, strokeWidth: "12", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M80 90L100 110L140 70", stroke: primaryColor, strokeWidth: "12", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M60 140C60 140 70 155 100 155C130 155 140 140 140 140", stroke: secondaryColor, strokeWidth: "8", strokeLinecap: "round" })] }));
+export const getStoreLogo = (type, props) => {
+    switch (type) {
+        case 'food':
+            return _jsx(FoodLogo, { ...props });
+        case 'food-modern':
+            return _jsx(FoodModernLogo, { ...props });
+        case 'clothing':
+            return _jsx(ClothingLogo, { ...props });
+        case 'clothing-minimal':
+            return _jsx(ClothingMinimalLogo, { ...props });
+        case 'booking':
+            return _jsx(BookingLogo, { ...props });
+        case 'booking-agenda':
+            return _jsx(BookingAgendaLogo, { ...props });
+        case 'electronics':
+            return _jsx(ElectronicsLogo, { ...props });
+        case 'electronics-grid':
+            return _jsx(ElectronicsGridLogo, { ...props });
+        case 'motivational-speaker':
+            return _jsx(MotivationalLogo, { ...props });
+        default:
+            return _jsx(ClothingLogo, { ...props });
+    }
+};
+export function StoreLogo({ storeConfig, alt, className, ...props }) {
+    const logoUrl = getLogoUrl(storeConfig);
+    const storeType = storeConfig?.type || storeConfig?.layout || 'clothing';
+    // If backend logo exists, render it as an image
+    if (logoUrl) {
+        // Extract width/height from className if present, otherwise use defaults
+        const defaultSize = 40;
+        return (_jsx("div", { className: cn("relative flex items-center justify-center", className), children: _jsx(Image, { src: logoUrl, alt: alt || storeConfig?.name || 'Store Logo', fill: true, className: "object-contain", unoptimized: true }) }));
+    }
+    // Otherwise, fall back to default SVG logo
+    return getStoreLogo(storeType, {
+        className,
+        primaryColor: storeConfig?.branding?.primaryColor,
+        secondaryColor: storeConfig?.branding?.secondaryColor,
+        ...props,
+    });
+}
+/**
+ * Helper function to get logo URL from store config or summary
+ * Works with both StoreConfig and simplified store objects
+ */
+function getLogoUrlFromStore(store) {
+    if (!store?.branding?.logo) {
+        return null;
+    }
+    const logoUrl = store.branding.logo;
+    if (typeof logoUrl === 'string' && logoUrl.trim()) {
+        return logoUrl.trim();
+    }
+    return null;
+}
+export function StoreLogoSimple({ store, alt, className, ...props }) {
+    const logoUrl = getLogoUrlFromStore(store);
+    const storeType = store?.type || 'clothing';
+    // If backend logo exists, render it as an image
+    if (logoUrl) {
+        return (_jsx("div", { className: cn("relative flex items-center justify-center", className), children: _jsx(Image, { src: logoUrl, alt: alt || store?.name || 'Store Logo', fill: true, className: "object-contain", unoptimized: true }) }));
+    }
+    // Otherwise, fall back to default SVG logo
+    return getStoreLogo(storeType, {
+        className,
+        primaryColor: store?.branding?.primaryColor,
+        secondaryColor: store?.branding?.secondaryColor,
+        ...props,
+    });
+}

package/dist/components/ui/toast.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type ToastType = 'success' | 'error' | 'info';
+export interface Toast {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+interface ToastContextType {
+    toasts: Toast[];
+    addToast: (message: string, type?: ToastType, duration?: number) => void;
+    removeToast: (id: string) => void;
+}
+export declare const ToastContext: React.Context<ToastContextType>;
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useToast(): ToastContextType;
+export {};
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/ui/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,gBAAgB;IACxB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,iCAAyD,CAAC;AAEnF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CA0BxE;AAED,wBAAgB,QAAQ,qBAMvB"}

package/dist/components/ui/toast.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+import { X, CheckCircle, AlertCircle, Info } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+export const ToastContext = createContext(undefined);
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const removeToast = useCallback((id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const addToast = useCallback((message, type = 'info', duration = 3000) => {
+        const id = Math.random().toString(36).substring(2, 9);
+        const newToast = { id, message, type, duration };
+        setToasts((prev) => [...prev, newToast]);
+        if (duration > 0) {
+            setTimeout(() => {
+                removeToast(id);
+            }, duration);
+        }
+    }, [removeToast]);
+    return (_jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [children, _jsx(ToastContainer, { toasts: toasts, removeToast: removeToast })] }));
+}
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (context === undefined) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+}
+function ToastContainer({ toasts, removeToast }) {
+    return (_jsx("div", { className: "fixed bottom-4 right-4 z-[100] flex flex-col gap-2 pointer-events-none", children: toasts.map((toast) => (_jsxs("div", { className: cn("pointer-events-auto flex items-center gap-3 min-w-[300px] max-w-md p-4 rounded-lg shadow-lg border animate-in slide-in-from-right-full duration-300", toast.type === 'success' && "bg-white border-green-100 text-slate-800", toast.type === 'error' && "bg-white border-red-100 text-slate-800", toast.type === 'info' && "bg-white border-blue-100 text-slate-800"), children: [_jsxs("div", { className: cn("flex-shrink-0", toast.type === 'success' && "text-green-500", toast.type === 'error' && "text-red-500", toast.type === 'info' && "text-blue-500"), children: [toast.type === 'success' && _jsx(CheckCircle, { className: "h-5 w-5" }), toast.type === 'error' && _jsx(AlertCircle, { className: "h-5 w-5" }), toast.type === 'info' && _jsx(Info, { className: "h-5 w-5" })] }), _jsx("p", { className: "flex-1 text-sm font-medium", children: toast.message }), _jsx("button", { onClick: () => removeToast(toast.id), className: "text-gray-400 hover:text-gray-600 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] }, toast.id))) }));
+}

package/dist/components/ui/video-player.d.ts

@@ -0,0 +1,48 @@
+interface VideoPlayerProps {
+    /**
+     * Video URL - can be YouTube, Vimeo, Instagram, TikTok, or direct video file
+     */
+    src: string;
+    /**
+     * Poster image URL (for direct video files)
+     */
+    poster?: string;
+    /**
+     * Video context - determines behavior
+     * - 'background': Autoplay, muted, loop, no controls (for hero backgrounds)
+     * - 'embedded': With controls, optional autoplay (for content sections)
+     * - 'inline': Standard video player with controls
+     */
+    context?: 'background' | 'embedded' | 'inline';
+    /**
+     * Whether to autoplay (only applies to embedded/inline contexts)
+     */
+    autoplay?: boolean;
+    /**
+     * Whether to show controls (only applies to embedded/inline contexts)
+     */
+    controls?: boolean;
+    /**
+     * Whether to loop the video
+     */
+    loop?: boolean;
+    /**
+     * Whether video is muted
+     */
+    muted?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Aspect ratio for embedded videos (e.g., '16/9', '4/3')
+     */
+    aspectRatio?: string;
+    /**
+     * Callback when video fails to load
+     */
+    onError?: (error: Error) => void;
+}
+export declare function VideoPlayer({ src, poster, context, autoplay, controls, loop, muted, className, aspectRatio, onError, }: VideoPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=video-player.d.ts.map

package/dist/components/ui/video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.d.ts","sourceRoot":"","sources":["../../../src/components/ui/video-player.tsx"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;IAE/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,OAAkB,EAClB,QAAgB,EAChB,QAAe,EACf,IAAY,EACZ,KAAa,EACb,SAAS,EACT,WAAW,EACX,OAAO,GACR,EAAE,gBAAgB,2CA6MlB"}

package/dist/components/ui/video-player.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { parseVideoUrl, getBackgroundVideoEmbedUrl, getEmbedVideoUrl } from '../../lib/utils/video-helpers.js';
+import { cn } from '../../lib/utils/index.js';
+export function VideoPlayer({ src, poster, context = 'inline', autoplay = false, controls = true, loop = false, muted = false, className, aspectRatio, onError, }) {
+    const [videoInfo, setVideoInfo] = useState(null);
+    const [hasError, setHasError] = useState(false);
+    const videoRef = useRef(null);
+    const iframeRef = useRef(null);
+    useEffect(() => {
+        if (!src) {
+            setHasError(true);
+            return;
+        }
+        const info = parseVideoUrl(src);
+        setVideoInfo(info);
+        setHasError(info.platform === 'unknown' && !info.directUrl);
+    }, [src]);
+    // Handle error
+    useEffect(() => {
+        if (hasError && onError) {
+            onError(new Error(`Failed to load video from: ${src}`));
+        }
+    }, [hasError, onError, src]);
+    // Background video context - use iframe for YouTube/Vimeo, video tag for direct
+    if (context === 'background') {
+        // Helper to render poster fallback
+        const renderFallback = () => {
+            if (poster) {
+                return (_jsx("img", { src: poster, alt: "Hero Background", className: cn('absolute inset-0 w-full h-full object-cover', className) }));
+            }
+            return null;
+        };
+        if (hasError)
+            return renderFallback();
+        if (!videoInfo)
+            return renderFallback();
+        // YouTube or Vimeo - use iframe
+        if (videoInfo.platform === 'youtube' || videoInfo.platform === 'vimeo') {
+            const embedUrl = getBackgroundVideoEmbedUrl(src);
+            if (!embedUrl)
+                return renderFallback();
+            return (_jsx("iframe", { ref: iframeRef, src: embedUrl, className: cn('absolute inset-0 w-full h-full', className), allow: "autoplay; encrypted-media", allowFullScreen: true, style: { border: 'none', pointerEvents: 'none' }, title: "Background video" }));
+        }
+        // Direct video file - use video tag
+        if (videoInfo.platform === 'direct' && videoInfo.directUrl) {
+            return (_jsx("video", { ref: videoRef, src: videoInfo.directUrl, poster: poster, autoPlay: true, muted: true, loop: true, playsInline: true, className: cn('absolute inset-0 w-full h-full object-cover', className), onError: () => setHasError(true) }));
+        }
+        // Instagram/TikTok or unknown - not supported for background, use fallback
+        return renderFallback();
+    }
+    // Embedded context - use iframe with controls
+    if (context === 'embedded') {
+        if (!videoInfo)
+            return null;
+        const embedUrl = getEmbedVideoUrl(src, autoplay);
+        if (!embedUrl)
+            return null;
+        // YouTube or Vimeo - use iframe
+        if (videoInfo.platform === 'youtube' || videoInfo.platform === 'vimeo') {
+            const aspectRatioStyle = aspectRatio
+                ? { aspectRatio: aspectRatio.replace('-', '/') }
+                : { aspectRatio: '16/9' };
+            return (_jsx("div", { className: cn('relative w-full', className), style: aspectRatioStyle, children: _jsx("iframe", { ref: iframeRef, src: embedUrl, className: "absolute inset-0 w-full h-full", allow: "autoplay; encrypted-media", allowFullScreen: true, style: { border: 'none' }, title: "Video player", onError: () => setHasError(true) }) }));
+        }
+        // Direct video - use video tag
+        if (videoInfo.platform === 'direct' && videoInfo.directUrl) {
+            return (_jsx("video", { ref: videoRef, src: videoInfo.directUrl, poster: poster, autoPlay: autoplay, muted: muted, loop: loop, controls: controls, playsInline: true, className: cn('w-full h-full', className), onError: () => setHasError(true) }));
+        }
+        // Instagram/TikTok - use embed iframe
+        if (videoInfo.platform === 'instagram' && videoInfo.embedUrl) {
+            const aspectRatioStyle = aspectRatio
+                ? { aspectRatio: aspectRatio.replace('-', '/') }
+                : { aspectRatio: '1/1' };
+            return (_jsx("div", { className: cn('relative w-full', className), style: aspectRatioStyle, children: _jsx("iframe", { ref: iframeRef, src: videoInfo.embedUrl, className: "absolute inset-0 w-full h-full", allow: "autoplay; encrypted-media", allowFullScreen: true, style: { border: 'none' }, title: "Instagram video", onError: () => setHasError(true) }) }));
+        }
+        return null;
+    }
+    // Inline context - standard video player
+    if (context === 'inline') {
+        if (!videoInfo)
+            return null;
+        // For YouTube/Vimeo in inline mode, we can use iframe or fallback to embed
+        if (videoInfo.platform === 'youtube' || videoInfo.platform === 'vimeo') {
+            const embedUrl = getEmbedVideoUrl(src, autoplay);
+            if (!embedUrl)
+                return null;
+            const aspectRatioStyle = aspectRatio
+                ? { aspectRatio: aspectRatio.replace('-', '/') }
+                : { aspectRatio: '16/9' };
+            return (_jsx("div", { className: cn('relative w-full', className), style: aspectRatioStyle, children: _jsx("iframe", { ref: iframeRef, src: embedUrl, className: "absolute inset-0 w-full h-full", allow: "autoplay; encrypted-media", allowFullScreen: true, style: { border: 'none' }, title: "Video player", onError: () => setHasError(true) }) }));
+        }
+        // Direct video - use video tag
+        if (videoInfo.platform === 'direct' && videoInfo.directUrl) {
+            return (_jsx("video", { ref: videoRef, src: videoInfo.directUrl, poster: poster, autoPlay: autoplay, muted: muted, loop: loop, controls: controls, playsInline: true, className: cn('w-full h-full', className), onError: () => setHasError(true) }));
+        }
+        return null;
+    }
+    return null;
+}

package/dist/editor/alignment-schemas/booking-agenda.d.ts

@@ -0,0 +1,3 @@
+import { LayoutAlignmentSchema } from './types';
+export declare const BookingAgendaSchema: LayoutAlignmentSchema;
+//# sourceMappingURL=booking-agenda.d.ts.map

package/dist/editor/alignment-schemas/booking-agenda.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-agenda.d.ts","sourceRoot":"","sources":["../../../src/editor/alignment-schemas/booking-agenda.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,mBAAmB,EAAE,qBAgJjC,CAAC"}

package/dist/editor/alignment-schemas/booking-agenda.js

@@ -0,0 +1,145 @@
+export const BookingAgendaSchema = {
+    home: {
+        header: {
+            type: 'section',
+            label: 'Header & Date Picker',
+            _sourcePath: 'layoutConfig.sections.header',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                title: { type: 'text', label: 'Page Title' },
+                subtitle: { type: 'text', label: 'Subtitle' }
+            }
+        },
+        promoBanner: {
+            type: 'section',
+            label: 'Promo Banner',
+            _sourcePath: 'layoutConfig.sections.marketing',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: false },
+                promo_banner: { type: 'image', label: 'Banner Image' },
+                badge: { type: 'text', label: 'Badge Text' },
+                title: { type: 'multiline_text', label: 'Title' },
+                description: { type: 'multiline_text', label: 'Description' },
+                button: {
+                    type: 'button',
+                    label: 'Button',
+                    fields: {
+                        text: { type: 'text', label: 'Button Text' },
+                        link: { type: 'text', label: 'Button Link' }
+                    }
+                }
+            }
+        },
+        services: {
+            type: 'section',
+            label: 'Service List',
+            _sourcePath: 'layoutConfig.sections.services',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                title: { type: 'text', label: 'Section Title' }
+            }
+        },
+        team: {
+            type: 'section',
+            label: 'Our Experts',
+            _sourcePath: 'layoutConfig.sections.team',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                title: { type: 'text', label: 'Section Title' },
+                viewAllLabel: { type: 'text', label: 'View All Link Text' }
+            }
+        },
+        testimonials: {
+            type: 'section',
+            label: 'Client Reviews',
+            _sourcePath: 'layoutConfig.sections.testimonials',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                title: { type: 'text', label: 'Title' },
+                subtitle: { type: 'text', label: 'Subtitle' }
+            }
+        }
+    },
+    about: {
+        hero: {
+            type: 'section',
+            label: 'About Header',
+            _sourcePath: 'layoutConfig.pages.about.hero',
+            fields: {
+                heroImage: { type: 'image', label: 'Hero Image' },
+                title: { type: 'text', label: 'Title' },
+                missionStatement: { type: 'text', label: 'Mission Statement' }
+            }
+        },
+        story: {
+            type: 'section',
+            label: 'Our Story',
+            _sourcePath: 'layoutConfig.pages.about.story',
+            fields: {
+                content: { type: 'multiline_text', label: 'Story Content' }
+            }
+        },
+        stats: {
+            type: 'section',
+            label: 'Key Metrics',
+            _sourcePath: 'layoutConfig.pages.about.stats',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true }
+            }
+        },
+        'contact-info': {
+            type: 'section',
+            label: 'Quick Contact',
+            _sourcePath: 'layoutConfig.pages.about.contact-info',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true }
+            }
+        }
+    },
+    contact: {
+        hero: {
+            type: 'section',
+            label: 'Contact Header',
+            _sourcePath: 'layoutConfig.pages.contact.hero',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                title: { type: 'text', label: 'Page Headline', defaultValue: 'Get in Touch' },
+                subtitle: { type: 'multiline_text', label: 'Supporting Text', defaultValue: "We'd love to hear from you. Here's how you can reach us." },
+                backgroundImage: { type: 'image', label: 'Header Background Image', defaultValue: 'https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop' },
+            }
+        },
+        form: {
+            type: 'section',
+            label: 'Contact Form',
+            _sourcePath: 'layoutConfig.pages.contact.form',
+            fields: {}
+        },
+        map: {
+            type: 'section',
+            label: 'Location Map',
+            _sourcePath: 'layoutConfig.pages.contact.map',
+            fields: {}
+        }
+    },
+    services: {
+        hero: {
+            type: 'section',
+            label: 'Services Header',
+            _sourcePath: 'layoutConfig.pages.services.hero',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+                title: { type: 'text', label: 'Page Title', defaultValue: 'Our Services' },
+                description: { type: 'multiline_text', label: 'Description' },
+                backgroundImage: { type: 'image', label: 'Header Background Image', defaultValue: 'https://images.unsplash.com/photo-1512496015851-a90fb38ba796?q=80&w=2070&auto=format&fit=crop' },
+            }
+        },
+        'services-list': {
+            type: 'section',
+            label: 'Services List',
+            _sourcePath: 'layoutConfig.pages.services.services-list',
+            fields: {
+                show: { type: 'toggle', label: 'Show Section', defaultValue: true },
+            }
+        }
+    }
+};

package/dist/editor/alignment-schemas/booking-footer-section.d.ts

@@ -0,0 +1,4 @@
+import { SchemaNode } from './types';
+/** Global footer — included on every booking editor page (same _sourcePath). */
+export declare const bookingFooterSection: Record<string, SchemaNode>;
+//# sourceMappingURL=booking-footer-section.d.ts.map

package/dist/editor/alignment-schemas/booking-footer-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-footer-section.d.ts","sourceRoot":"","sources":["../../../src/editor/alignment-schemas/booking-footer-section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,SAAS,CAAC;AAS1D,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CA8D3D,CAAC"}

package/dist/editor/alignment-schemas/booking-footer-section.js

@@ -0,0 +1,69 @@
+const sectionStyleSupports = {
+    spacing: true,
+    colors: true,
+    border: true,
+    typography: true,
+};
+/** Global footer — included on every booking editor page (same _sourcePath). */
+export const bookingFooterSection = {
+    footer: {
+        type: 'section',
+        label: 'Site Footer',
+        description: 'Global footer shown at the bottom of every page.',
+        _styleSupports: sectionStyleSupports,
+        _sourcePath: 'layoutConfig.sections.footer',
+        fields: {
+            show: { type: 'toggle', label: 'Show Footer', defaultValue: true },
+            tagline: {
+                type: 'multiline_text',
+                label: 'Brand Tagline',
+                description: 'Short description beneath your logo.',
+                defaultValue: 'Experience the best in quality and care. We are dedicated to providing you with an exceptional booking experience.',
+            },
+            primaryColumnTitle: { type: 'text', label: 'Primary Links Column Title', defaultValue: 'Services' },
+            supportColumnTitle: { type: 'text', label: 'Support Column Title', defaultValue: 'Support' },
+            contactColumnTitle: { type: 'text', label: 'Contact Column Title', defaultValue: 'Contact' },
+            copyrightText: {
+                type: 'text',
+                label: 'Copyright Line',
+                description: 'Optional override. Leave blank to use the store name and current year.',
+            },
+            showSocialLinks: { type: 'toggle', label: 'Show Social Icons', defaultValue: true },
+            showPaymentBadges: { type: 'toggle', label: 'Show Payment Method Badges', defaultValue: true },
+            address: {
+                type: 'multiline_text',
+                label: 'Footer Address',
+                defaultValue: '123 Store Street\nCommerce City, ST 12345',
+            },
+            email: { type: 'text', label: 'Footer Email' },
+            phone: { type: 'text', label: 'Footer Phone', defaultValue: '+1 (555) 123-4567' },
+            mainLinks: {
+                type: 'array',
+                label: 'Primary Footer Links',
+                defaultValue: [
+                    { id: 'f-m1', label: 'Services', href: '/services' },
+                    { id: 'f-m2', label: 'Book Appointment', href: '/book' },
+                    { id: 'f-m3', label: 'About', href: '/about' },
+                    { id: 'f-m4', label: 'Contact', href: '/contact' },
+                ],
+                itemSchema: {
+                    label: { type: 'text', label: 'Link Label' },
+                    href: { type: 'text', label: 'Link Path (e.g. /services)' },
+                },
+            },
+            supportLinks: {
+                type: 'array',
+                label: 'Support Footer Links',
+                defaultValue: [
+                    { id: 'f-s1', label: 'Help Center', href: '/help-center' },
+                    { id: 'f-s2', label: 'Book Appointment', href: '/book' },
+                    { id: 'f-s3', label: 'Contact Us', href: '/contact' },
+                ],
+                itemSchema: {
+                    label: { type: 'text', label: 'Link Label' },
+                    href: { type: 'text', label: 'Link Path' },
+                },
+            },
+        },
+    },
+};

package/dist/editor/alignment-schemas/booking.d.ts

@@ -0,0 +1,3 @@
+import { LayoutAlignmentSchema } from './types';
+export declare const BookingSchema: LayoutAlignmentSchema;
+//# sourceMappingURL=booking.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking.d.ts","sourceRoot":"","sources":["../../../src/editor/alignment-schemas/booking.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAuB,MAAM,SAAS,CAAC;AAUrE,eAAO,MAAM,aAAa,EAAE,qBAwd3B,CAAC"}