payaza-storefront-layouts 1.0.0

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;AAID,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';
+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,2CAmMlB"}

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

@@ -0,0 +1,96 @@
+'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';
+import { cn } from '../../lib/utils';
+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') {
+        if (!videoInfo)
+            return null;
+        // YouTube or Vimeo - use iframe
+        if (videoInfo.platform === 'youtube' || videoInfo.platform === 'vimeo') {
+            const embedUrl = getBackgroundVideoEmbedUrl(src);
+            if (!embedUrl)
+                return null;
+            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' }, 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 - not ideal for background, but try to render
+        if (videoInfo.platform === 'instagram' || videoInfo.platform === 'tiktok') {
+            // For these platforms, we might want to show a placeholder or fallback
+            return null;
+        }
+        return null;
+    }
+    // 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/hooks/use-analytics.d.ts

@@ -0,0 +1,14 @@
+import { EventType } from '../lib/services/analytics.service';
+interface TrackEventOptions {
+    eventType: EventType;
+    metadata?: Record<string, any>;
+}
+/**
+ * React hook for analytics tracking
+ * Automatically tracks page views and provides trackEvent function
+ */
+export declare function useAnalytics(): {
+    trackEvent: (options: TrackEventOptions) => Promise<void>;
+};
+export {};
+//# sourceMappingURL=use-analytics.d.ts.map

package/dist/hooks/use-analytics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-analytics.d.ts","sourceRoot":"","sources":["../../src/hooks/use-analytics.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoB,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAI/E,UAAU,iBAAiB;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED;;;GAGG;AACH,wBAAgB,YAAY;0BAWR,iBAAiB;EAuDpC"}

package/dist/hooks/use-analytics.js

@@ -0,0 +1,66 @@
+'use client';
+import { useEffect, useCallback, useRef } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { analyticsService } from '../lib/services/analytics.service';
+import { useStore } from '../lib/store-context';
+import { useAuth } from '../lib/auth-context';
+/**
+ * React hook for analytics tracking
+ * Automatically tracks page views and provides trackEvent function
+ */
+export function useAnalytics() {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const { store } = useStore();
+    const { user } = useAuth();
+    const lastTrackedPath = useRef(null);
+    /**
+     * Track a custom event
+     */
+    const trackEvent = useCallback(async (options) => {
+        if (!store?.id) {
+            console.warn('Analytics: Cannot track event, store not loaded');
+            return;
+        }
+        try {
+            await analyticsService.trackEvent({
+                storeId: store.id,
+                eventType: options.eventType,
+                userId: user?.id || null,
+                metadata: options.metadata,
+            });
+        }
+        catch (error) {
+            // Silently fail - analytics should not break the app
+            console.warn('Analytics tracking error:', error);
+        }
+    }, [store?.id, user?.id]);
+    /**
+     * Track page view
+     */
+    useEffect(() => {
+        if (!store?.id) {
+            return;
+        }
+        const currentPath = pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : '');
+        // Only track if path changed (avoid duplicate tracking)
+        if (currentPath === lastTrackedPath.current) {
+            return;
+        }
+        lastTrackedPath.current = currentPath;
+        // Small delay to ensure page is fully loaded
+        const timeoutId = setTimeout(() => {
+            trackEvent({
+                eventType: 'page_view',
+                metadata: {
+                    path: pathname,
+                    query: searchParams?.toString() || undefined,
+                },
+            });
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [pathname, searchParams, store?.id, trackEvent]);
+    return {
+        trackEvent,
+    };
+}

package/dist/hooks/use-api.d.ts

@@ -0,0 +1,17 @@
+export interface UseApiOptions<T> {
+    immediate?: boolean;
+    onSuccess?: (data: T) => void;
+    onError?: (error: Error) => void;
+}
+export interface UseApiResult<T> {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+    execute: (...args: any[]) => Promise<T | undefined>;
+    reset: () => void;
+}
+/**
+ * Generic API hook for async operations
+ */
+export declare function useApi<T>(apiFunction: (...args: any[]) => Promise<T>, options?: UseApiOptions<T>): UseApiResult<T>;
+//# sourceMappingURL=use-api.d.ts.map

package/dist/hooks/use-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-api.d.ts","sourceRoot":"","sources":["../../src/hooks/use-api.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IACpD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,CAAC,EACtB,WAAW,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAC3C,OAAO,GAAE,aAAa,CAAC,CAAC,CAAM,GAC7B,YAAY,CAAC,CAAC,CAAC,CAoDjB"}

package/dist/hooks/use-api.js

@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useLoading } from '../lib/loading-context';
+/**
+ * Generic API hook for async operations
+ */
+export function useApi(apiFunction, options = {}) {
+    const { immediate = false, onSuccess, onError } = options;
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(immediate);
+    const [error, setError] = useState(null);
+    // Get loading context if available
+    let loadingContext = null;
+    try {
+        loadingContext = useLoading();
+    }
+    catch {
+        // LoadingProvider not available, continue without it
+    }
+    const startBackendLoading = loadingContext?.startBackendLoading;
+    const stopBackendLoading = loadingContext?.stopBackendLoading;
+    const execute = useCallback(async (...args) => {
+        setLoading(true);
+        setError(null);
+        startBackendLoading?.();
+        try {
+            const result = await apiFunction(...args);
+            setData(result);
+            onSuccess?.(result);
+            return result;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            setError(error);
+            onError?.(error);
+            throw error;
+        }
+        finally {
+            setLoading(false);
+            stopBackendLoading?.();
+        }
+    }, [apiFunction, onSuccess, onError, startBackendLoading, stopBackendLoading]);
+    const reset = useCallback(() => {
+        setData(null);
+        setError(null);
+        setLoading(false);
+    }, []);
+    useEffect(() => {
+        if (immediate) {
+            execute();
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return { data, loading, error, execute, reset };
+}

package/dist/hooks/use-cart-api.d.ts

@@ -0,0 +1,17 @@
+import { Cart } from '../lib/services/cart.service';
+import { StoreConfig } from '../lib/store-types';
+export interface UseCartApiResult {
+    cart: Cart | null;
+    loading: boolean;
+    error: string | null;
+    syncCart: () => Promise<void>;
+    addItem: (productId: string, quantity: number, options?: Record<string, any>) => Promise<void>;
+    updateItem: (itemId: string, quantity: number) => Promise<void>;
+    removeItem: (itemId: string) => Promise<void>;
+    clearCart: () => Promise<void>;
+}
+/**
+ * Hook to manage cart with API sync for non-demo stores
+ */
+export declare function useCartApi(storeConfig: StoreConfig | null): UseCartApiResult;
+//# sourceMappingURL=use-cart-api.d.ts.map

package/dist/hooks/use-cart-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-cart-api.d.ts","sourceRoot":"","sources":["../../src/hooks/use-cart-api.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,IAAI,EAAY,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/F,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,gBAAgB,CAkI5E"}

package/dist/hooks/use-cart-api.js

@@ -0,0 +1,134 @@
+import { useState, useEffect, useCallback } from 'react';
+import { cartService } from '../lib/services/cart.service';
+import { shouldUseAPI } from '../lib/utils/demo-detection';
+import { useStore } from '../lib/store-context';
+/**
+ * Hook to manage cart with API sync for non-demo stores
+ */
+export function useCartApi(storeConfig) {
+    const { cart: localCart, addToCart: localAddToCart, updateCartQuantity, removeFromCart: localRemoveFromCart } = useStore();
+    const [apiCart, setApiCart] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const syncCart = useCallback(async () => {
+        if (!storeConfig || !shouldUseAPI(storeConfig.slug)) {
+            return; // Use local storage for demo stores
+        }
+        try {
+            setLoading(true);
+            setError(null);
+            const cart = await cartService.getCart();
+            setApiCart(cart);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to sync cart';
+            setError(errorMessage);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [storeConfig]);
+    const addItem = useCallback(async (productId, quantity, options) => {
+        if (!storeConfig)
+            return;
+        if (shouldUseAPI(storeConfig.slug)) {
+            try {
+                setLoading(true);
+                await cartService.addItem(productId, quantity, options);
+                await syncCart();
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Failed to add item';
+                setError(errorMessage);
+                throw err;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        else {
+            // Use local storage for demo stores
+            // This will be handled by the StoreContext
+        }
+    }, [storeConfig, syncCart]);
+    const updateItem = useCallback(async (itemId, quantity) => {
+        if (!storeConfig)
+            return;
+        if (shouldUseAPI(storeConfig.slug)) {
+            try {
+                setLoading(true);
+                await cartService.updateItem(itemId, quantity);
+                await syncCart();
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Failed to update item';
+                setError(errorMessage);
+                throw err;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        else {
+            // Use local storage for demo stores
+            updateCartQuantity(itemId, quantity);
+        }
+    }, [storeConfig, syncCart, updateCartQuantity]);
+    const removeItem = useCallback(async (itemId) => {
+        if (!storeConfig)
+            return;
+        if (shouldUseAPI(storeConfig.slug)) {
+            try {
+                setLoading(true);
+                await cartService.removeItem(itemId);
+                await syncCart();
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Failed to remove item';
+                setError(errorMessage);
+                throw err;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+        else {
+            // Use local storage for demo stores
+            localRemoveFromCart(itemId);
+        }
+    }, [storeConfig, syncCart, localRemoveFromCart]);
+    const clearCart = useCallback(async () => {
+        if (!storeConfig)
+            return;
+        if (shouldUseAPI(storeConfig.slug)) {
+            try {
+                setLoading(true);
+                await cartService.clearCart();
+                await syncCart();
+            }
+            catch (err) {
+                const errorMessage = err instanceof Error ? err.message : 'Failed to clear cart';
+                setError(errorMessage);
+                throw err;
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+    }, [storeConfig, syncCart]);
+    useEffect(() => {
+        if (storeConfig && shouldUseAPI(storeConfig.slug)) {
+            syncCart();
+        }
+    }, [storeConfig, syncCart]);
+    return {
+        cart: apiCart,
+        loading,
+        error,
+        syncCart,
+        addItem,
+        updateItem,
+        removeItem,
+        clearCart,
+    };
+}

package/dist/hooks/use-content-ready.d.ts

@@ -0,0 +1,17 @@
+interface UseContentReadyOptions {
+    pathname: string;
+    enabled?: boolean;
+    minDisplayTime?: number;
+    maxWaitTime?: number;
+    checkInterval?: number;
+}
+/**
+ * Hook to detect when page content is ready for display
+ * Uses DOM observation to verify key content elements are present
+ */
+export declare function useContentReady({ pathname, enabled, minDisplayTime, maxWaitTime, checkInterval, }: UseContentReadyOptions): {
+    isContentReady: boolean;
+    contentPercentage: number;
+};
+export {};
+//# sourceMappingURL=use-content-ready.d.ts.map

package/dist/hooks/use-content-ready.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-content-ready.d.ts","sourceRoot":"","sources":["../../src/hooks/use-content-ready.ts"],"names":[],"mappings":"AAKA,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAc,EACd,cAAoB,EACpB,WAAkB,EAClB,aAAmB,GACpB,EAAE,sBAAsB;;;EA+NxB"}