storefront-layouts-staging 1.0.0-staging.0

package/dist/components/ui/product-card.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../components/ui/button.js';
+import { ImageWithFallback } from '../../components/ui/image-with-fallback.js';
+import { ProductRating } from '../../components/ui/product-rating.js';
+import { ShoppingCart, Heart, Eye, Share2 } from 'lucide-react';
+import { shareProductLink } from '../../lib/utils/product-share.js';
+import Link from 'next/link';
+import { cn, formatCurrency } from '../../lib/utils/index.js';
+import { resolveProductImageUrls } from '../../lib/utils/product-images.js';
+import { useStore } from '../../lib/store-context.js';
+import { useToast } from '../../components/ui/toast.js';
+import { ButtonLoader } from '../../components/ui/page-loader.js';
+import { useLoading } from '../../lib/loading-context.js';
+import { OutOfStockOverlay } from '../../components/ui/out-of-stock-overlay.js';
+import { LimitedTimeOfferBadge } from '../../components/ui/limited-time-offer-badge.js';
+import { isActiveLimitedTimeOffer } from '../../lib/limited-time-offer.js';
+import { getProductStockInfo } from '../../lib/inventory-utils.js';
+import { richFieldHasContent, richFieldPlainTextForDisplay } from '../../lib/rich-html.js';
+export function ProductCard({ product, storeSlug, onAddToCart, onQuickView, className }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const { toggleWishlist, isInWishlist, isWishlistLoading } = useStore();
+    const { addToast } = useToast();
+    const { startPageLoading } = useLoading();
+    const [localWishlistLoading, setLocalWishlistLoading] = useState(false);
+    const handleProductClick = () => {
+        startPageLoading();
+    };
+    const handleShareClick = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            const result = await shareProductLink({
+                storeSlug,
+                productSlug: product.slug,
+                productName: product.name,
+            });
+            addToast(result === 'shared' ? 'Product shared!' : 'Product link copied to clipboard!', 'success');
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'AbortError')
+                return;
+            addToast('Failed to copy product link', 'error');
+        }
+    };
+    const handleWishlistClick = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Debug logging for wishlist click
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ProductCard] Wishlist button clicked:', {
+                productId: product.id,
+                productName: product.name,
+                isInWishlist: isInWishlist(product.id),
+                isLoading: localWishlistLoading || isWishlistLoading
+            });
+        }
+        if (localWishlistLoading || isWishlistLoading) {
+            if (process.env.NODE_ENV === 'development') {
+                console.warn('[ProductCard] Wishlist action already in progress, ignoring click');
+            }
+            return;
+        }
+        setLocalWishlistLoading(true);
+        try {
+            const wasInWishlist = isInWishlist(product.id);
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[ProductCard] Toggling wishlist:', { productId: product.id, wasInWishlist });
+            }
+            await toggleWishlist(product.id);
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[ProductCard] Wishlist toggled successfully');
+            }
+            addToast(wasInWishlist
+                ? `${product.name} removed from wishlist`
+                : `${product.name} added to wishlist`, 'success');
+        }
+        catch (error) {
+            console.error('[ProductCard] Failed to toggle wishlist:', error);
+            addToast('Failed to update wishlist', 'error');
+        }
+        finally {
+            setLocalWishlistLoading(false);
+        }
+    };
+    const inWishlist = isInWishlist(product.id);
+    const isLoading = localWishlistLoading || isWishlistLoading;
+    const stock = getProductStockInfo(product);
+    const isOutOfStock = !stock.canPurchase;
+    // Validate and extract image URLs (string, object, or JSON shapes from API/editor)
+    const validImages = resolveProductImageUrls(product.images);
+    // Determine which image to show
+    const hasSecondImage = validImages.length > 1;
+    const currentImage = isHovered && hasSecondImage && validImages[1]
+        ? validImages[1]
+        : validImages[0] || undefined;
+    // Debug logging for images (can be removed in production)
+    if (process.env.NODE_ENV === 'development') {
+        if (validImages.length === 0) {
+            console.warn(`[ProductCard] Product "${product.name}" (${product.id}) has no valid images:`, {
+                productId: product.id,
+                productName: product.name,
+                originalImages: product.images,
+                validImagesCount: validImages.length
+            });
+        }
+        else {
+            console.log(`[ProductCard] Product "${product.name}" (${product.id}) images:`, {
+                productId: product.id,
+                validImagesCount: validImages.length,
+                firstImage: validImages[0],
+                currentImage: currentImage,
+                hasSecondImage: hasSecondImage
+            });
+        }
+    }
+    return (_jsxs("div", { "data-product-card": true, className: cn("group relative flex flex-col h-full bg-white rounded-lg overflow-hidden border border-gray-100 hover:border-gray-300 transition-all duration-300 hover:shadow-md", className), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { className: "relative aspect-[3/4] bg-gray-50 overflow-hidden", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, onClick: handleProductClick, className: "block w-full h-full", children: _jsx(ImageWithFallback, { src: currentImage, alt: product.name, className: cn("w-full h-full object-cover transition-all duration-700 ease-in-out", isHovered && !hasSecondImage ? "scale-110" : "scale-100", isOutOfStock && "grayscale"), skeletonAspectRatio: "3/4" }) }), isOutOfStock && (_jsx(OutOfStockOverlay, { badgePosition: "center" })), (isActiveLimitedTimeOffer(product) || product.compareAtPrice || (product.rating && product.rating >= 4.8)) && (_jsxs("div", { className: "absolute top-3 left-3 flex flex-col gap-2 z-10", children: [_jsx(LimitedTimeOfferBadge, { product: product, compact: true }), product.compareAtPrice != null && product.compareAtPrice > product.price && (_jsx("span", { className: "bg-red-500 text-white text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm", children: "Sale" })), !isActiveLimitedTimeOffer(product) && !product.compareAtPrice && product.rating && product.rating >= 4.8 && (_jsx("span", { className: "bg-white/90 backdrop-blur-sm text-slate-900 text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm border border-gray-100", children: "Top Rated" }))] })), _jsxs("div", { className: "absolute top-3 right-3 z-30 flex flex-col gap-2 opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all duration-300", children: [_jsx("button", { type: "button", onClick: handleShareClick, className: "p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-all duration-300 shadow-sm text-slate-600 hover:text-slate-900", title: "Share product", "aria-label": "Share product", children: _jsx(Share2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: handleWishlistClick, disabled: isLoading, className: cn("p-2 rounded-full bg-white/80 backdrop-blur-sm hover:bg-white transition-all duration-300 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed", inWishlist ? "text-red-500" : "text-slate-600 hover:text-red-500"), title: inWishlist ? "Remove from wishlist" : "Add to wishlist", children: isLoading ? (_jsx(ButtonLoader, { className: "text-red-500" })) : (_jsx(Heart, { className: cn("h-4 w-4", inWishlist && "fill-current") })) })] }), _jsxs("div", { className: "absolute bottom-4 inset-x-4 flex items-center gap-2 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 ease-out z-20", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, className: "h-10 w-10 flex items-center justify-center rounded-full bg-white text-slate-900 hover:bg-slate-900 hover:text-white border border-transparent shadow-lg transition-colors duration-200", title: "View Details", children: _jsx(Eye, { className: "h-4 w-4" }) }), _jsxs(Button, { onClick: async (e) => {
+                                    e.preventDefault();
+                                    if (!isOutOfStock) {
+                                        await onAddToCart(product);
+                                    }
+                                }, disabled: isOutOfStock, className: cn("flex-1 h-10 bg-white text-slate-900 hover:bg-slate-900 hover:text-white font-bold border border-transparent shadow-lg rounded-full transition-colors duration-200", isOutOfStock && "opacity-50 cursor-not-allowed"), children: [_jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), " Add"] })] })] }), _jsxs("div", { className: "p-4 flex flex-col flex-1 space-y-2", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, className: "group-hover:text-blue-600 transition-colors duration-300", onClick: () => startPageLoading(`/${storeSlug}/products/${product.slug}`), children: _jsx("h3", { className: "font-bold text-slate-900 text-base leading-tight line-clamp-1", children: product.name }) }), richFieldHasContent(product.description) && (_jsx("p", { className: "text-xs text-slate-500 line-clamp-1", children: richFieldPlainTextForDisplay(product.description) })), _jsxs("div", { className: "mt-auto pt-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-lg font-bold text-slate-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice != null && product.compareAtPrice > product.price && (_jsx("span", { className: "text-sm text-slate-400 line-through font-medium", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] }), _jsx(ProductRating, { rating: product.rating, reviewCount: product.reviewCount, size: "sm", showReviewCount: false, className: "shrink-0" })] })] })] }));
+}

package/dist/components/ui/product-rating.d.ts

@@ -0,0 +1,17 @@
+interface ProductRatingProps {
+    rating?: number | null;
+    reviewCount?: number | null;
+    size?: 'sm' | 'md' | 'lg';
+    showReviewCount?: boolean;
+    className?: string;
+    showEmptyState?: boolean;
+}
+/**
+ * Smart product rating component that handles:
+ * - Products with reviews: Shows rating and review count
+ * - Products without reviews: Shows "No reviews yet" or hides completely
+ * - Zero ratings: Never shows "0.0", shows appropriate empty state instead
+ */
+export declare function ProductRating({ rating, reviewCount, size, showReviewCount, className, showEmptyState, }: ProductRatingProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-rating.d.ts.map

package/dist/components/ui/product-rating.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-rating.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-rating.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,IAAW,EACX,eAAsB,EACtB,SAAS,EACT,cAAsB,GACvB,EAAE,kBAAkB,2CA6EpB"}

package/dist/components/ui/product-rating.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Star } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+/**
+ * Smart product rating component that handles:
+ * - Products with reviews: Shows rating and review count
+ * - Products without reviews: Shows "No reviews yet" or hides completely
+ * - Zero ratings: Never shows "0.0", shows appropriate empty state instead
+ */
+export function ProductRating({ rating, reviewCount, size = 'md', showReviewCount = true, className, showEmptyState = false, }) {
+    // Determine if we should show anything
+    const hasRating = rating !== undefined && rating !== null && rating > 0;
+    const hasReviews = reviewCount !== undefined && reviewCount !== null && reviewCount > 0;
+    const shouldShow = hasRating || hasReviews || showEmptyState;
+    // If no rating/reviews and empty state is disabled, don't render
+    if (!shouldShow) {
+        return null;
+    }
+    // Size configurations
+    const sizeConfig = {
+        sm: {
+            star: 'h-3 w-3',
+            text: 'text-xs',
+            gap: 'gap-0.5',
+        },
+        md: {
+            star: 'h-4 w-4',
+            text: 'text-sm',
+            gap: 'gap-1',
+        },
+        lg: {
+            star: 'h-5 w-5',
+            text: 'text-base',
+            gap: 'gap-1.5',
+        },
+    };
+    const config = sizeConfig[size];
+    // If no reviews and no rating, show empty state or hide
+    if (!hasReviews && !hasRating) {
+        if (!showEmptyState) {
+            return null;
+        }
+        return (_jsx("div", { className: cn('flex items-center', config.gap, className), children: _jsx("span", { className: cn('text-gray-400', config.text), children: "No reviews yet" }) }));
+    }
+    // If we have reviews or rating, show them
+    const displayRating = hasRating ? Number(rating).toFixed(1) : '0.0';
+    const displayReviewCount = hasReviews ? reviewCount : 0;
+    // Don't show rating if it's 0.0 and there are no reviews
+    if (!hasRating && !hasReviews) {
+        return null;
+    }
+    return (_jsxs("div", { className: cn('flex items-center', config.gap, className), children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Star, { className: cn(config.star, 'text-amber-400 fill-amber-400') }), _jsx("span", { className: cn('font-medium text-gray-900 ml-0.5', config.text), children: displayRating })] }), showReviewCount && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsx("span", { className: cn('text-gray-600', config.text), children: displayReviewCount === 1 ? '1 review' : `${displayReviewCount} reviews` })] }))] }));
+}

package/dist/components/ui/product-stock-badge.d.ts

@@ -0,0 +1,9 @@
+import type { StoreProduct } from '../../lib/store-types';
+interface ProductStockBadgeProps {
+    product: Pick<StoreProduct, 'trackInventory' | 'availableStock' | 'inStock' | 'lowStockThreshold' | 'name'>;
+    className?: string;
+    showCount?: boolean;
+}
+export declare function ProductStockBadge({ product, className, showCount }: ProductStockBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-stock-badge.d.ts.map

package/dist/components/ui/product-stock-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-stock-badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-stock-badge.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,UAAU,sBAAsB;IAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,SAAS,GAAG,mBAAmB,GAAG,MAAM,CAAC,CAAC;IAC5G,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AASD,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAiB,EAAE,EAAE,sBAAsB,2CAuBlG"}

package/dist/components/ui/product-stock-badge.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, AlertTriangle, Info } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+import { getProductStockInfo } from '../../lib/inventory-utils.js';
+const STATUS_STYLES = {
+    untracked: 'bg-green-100 text-green-800',
+    in_stock: 'bg-green-100 text-green-800',
+    low_stock: 'bg-amber-100 text-amber-900',
+    out_of_stock: 'bg-red-100 text-red-800',
+};
+export function ProductStockBadge({ product, className, showCount = false }) {
+    const stock = getProductStockInfo(product);
+    const Icon = stock.status === 'out_of_stock' ? Info : stock.status === 'low_stock' ? AlertTriangle : CheckCircle;
+    let label = stock.label;
+    if (showCount && stock.status === 'in_stock' && stock.availableStock != null) {
+        label = `In Stock (${stock.availableStock} available)`;
+    }
+    return (_jsxs("span", { className: cn('inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium', STATUS_STYLES[stock.status], className), children: [_jsx(Icon, { className: "w-3 h-3 mr-1 shrink-0" }), label] }));
+}

package/dist/components/ui/review-form.d.ts

@@ -0,0 +1,9 @@
+import { StoreConfig } from '../../lib/store-types';
+interface ReviewFormProps {
+    storeConfig: StoreConfig;
+    onClose: () => void;
+    onSubmit: (data: any) => void;
+}
+export declare function ReviewForm({ storeConfig, onClose, onSubmit }: ReviewFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=review-form.d.ts.map

package/dist/components/ui/review-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/review-form.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,UAAU,eAAe;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAoG7E"}

package/dist/components/ui/review-form.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Star, X } from 'lucide-react';
+import { Button } from '../../components/ui/button.js';
+import { cn } from '../../lib/utils/index.js';
+export function ReviewForm({ storeConfig, onClose, onSubmit }) {
+    const [rating, setRating] = useState(0);
+    const [hoverRating, setHoverRating] = useState(0);
+    const [review, setReview] = useState('');
+    const [title, setTitle] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (rating === 0)
+            return;
+        setIsSubmitting(true);
+        // Simulate API call
+        setTimeout(() => {
+            onSubmit({ rating, title, review });
+            setIsSubmitting(false);
+        }, 1500);
+    };
+    const primaryColor = storeConfig.branding.primaryColor;
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden animate-scale-in", children: [_jsxs("div", { className: "flex justify-between items-center p-6 border-b border-gray-100", children: [_jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Write a Review" }), _jsx("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-900 transition-colors", children: _jsx(X, { className: "w-6 h-6" }) })] }), _jsxs("form", { onSubmit: handleSubmit, className: "p-6 space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-bold text-gray-700", children: "Rating" }), _jsx("div", { className: "flex gap-2", children: [1, 2, 3, 4, 5].map((star) => (_jsx("button", { type: "button", onClick: () => setRating(star), onMouseEnter: () => setHoverRating(star), onMouseLeave: () => setHoverRating(0), className: "focus:outline-none transition-transform hover:scale-110", children: _jsx(Star, { className: cn("w-8 h-8 transition-colors", (hoverRating || rating) >= star
+                                                ? "fill-yellow-400 text-yellow-400"
+                                                : "text-gray-300") }) }, star))) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "title", className: "text-sm font-bold text-gray-700", children: "Review Title" }), _jsx("input", { id: "title", type: "text", required: true, value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Summary of your experience", className: "w-full px-4 py-3 rounded-xl border-2 border-gray-100 focus:border-black focus:ring-0 outline-none transition-all" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "review", className: "text-sm font-bold text-gray-700", children: "Review" }), _jsx("textarea", { id: "review", required: true, rows: 4, value: review, onChange: (e) => setReview(e.target.value), placeholder: "Tell us what you liked or didn't like", className: "w-full px-4 py-3 rounded-xl border-2 border-gray-100 focus:border-black focus:ring-0 outline-none transition-all resize-none" })] }), _jsxs("div", { className: "pt-2 flex gap-3", children: [_jsx(Button, { type: "button", variant: "outline", onClick: onClose, className: "flex-1 h-12 rounded-xl", children: "Cancel" }), _jsx(Button, { type: "submit", disabled: isSubmitting || rating === 0, className: "flex-1 h-12 rounded-xl font-bold", style: { backgroundColor: primaryColor }, children: isSubmitting ? 'Submitting...' : 'Submit Review' })] })] })] }) }));
+}

package/dist/components/ui/route-skeleton-loader.d.ts

@@ -0,0 +1,7 @@
+interface RouteSkeletonLoaderProps {
+    className?: string;
+    pathname?: string;
+}
+export declare function RouteSkeletonLoader({ className, pathname: pathnameProp }: RouteSkeletonLoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=route-skeleton-loader.d.ts.map

package/dist/components/ui/route-skeleton-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route-skeleton-loader.d.ts","sourceRoot":"","sources":["../../../src/components/ui/route-skeleton-loader.tsx"],"names":[],"mappings":"AAUA,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,wBAAwB,2CA+GlG"}

package/dist/components/ui/route-skeleton-loader.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePathname } from 'next/navigation';
+import { ProductDetailSkeleton } from './skeletons/product-detail-skeleton.js';
+import { ProductGridSkeleton } from './skeletons/product-grid-skeleton.js';
+import { CategoryGridSkeleton } from './skeletons/category-grid-skeleton.js';
+import { PageSkeleton } from './skeletons/page-skeleton.js';
+import { CheckoutSkeleton } from './skeletons/checkout-skeleton.js';
+import { cn } from '../../lib/utils/index.js';
+export function RouteSkeletonLoader({ className, pathname: pathnameProp }) {
+    const pathnameFromHook = usePathname();
+    const pathname = pathnameProp || pathnameFromHook;
+    // Detect route type from pathname
+    const getRouteType = (path) => {
+        // Remove leading slash and split
+        const segments = path.split('/').filter(Boolean);
+        // Homepage: /[storeName] (only one segment after store name)
+        if (segments.length === 1) {
+            return 'homepage';
+        }
+        // Store routes: [storeName, ...segments]
+        // segments[0] = storeName, segments[1] = first route segment, segments[2] = second route segment
+        if (segments.length >= 2) {
+            const firstSegment = segments[1];
+            const secondSegment = segments[2];
+            // Checkout: /[storeName]/checkout
+            if (firstSegment === 'checkout') {
+                return 'checkout';
+            }
+            // Product detail: /[storeName]/products/[slug]
+            if (firstSegment === 'products' && secondSegment) {
+                return 'product-detail';
+            }
+            // Products list: /[storeName]/products
+            if (firstSegment === 'products' && !secondSegment) {
+                return 'products';
+            }
+            // Category detail: /[storeName]/categories/[slug]
+            if (firstSegment === 'categories' && secondSegment) {
+                return 'category-detail';
+            }
+            // Categories list: /[storeName]/categories
+            if (firstSegment === 'categories' && !secondSegment) {
+                return 'categories';
+            }
+        }
+        return 'generic';
+    };
+    const routeType = getRouteType(pathname);
+    const renderSkeleton = () => {
+        switch (routeType) {
+            case 'homepage':
+                // Use spinner loader for homepage instead of skeleton
+                // Spinner is centered in fixed position overlay
+                return null; // Will be handled by the fixed overlay structure
+            case 'product-detail':
+                return _jsx(ProductDetailSkeleton, {});
+            case 'products':
+                return (_jsx("div", { className: "min-h-[calc(100vh-200px)] bg-white py-8 lg:py-12", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: [_jsx("div", { className: "mb-6 h-4 bg-gray-200 rounded w-48 animate-pulse" }), _jsx(ProductGridSkeleton, { count: 12, columns: 3 })] }) }));
+            case 'categories':
+                return (_jsx("div", { className: "min-h-[calc(100vh-200px)] bg-white py-8 lg:py-12", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: [_jsx("div", { className: "mb-6 h-4 bg-gray-200 rounded w-48 animate-pulse" }), _jsx(CategoryGridSkeleton, { count: 6 })] }) }));
+            case 'category-detail':
+                return (_jsx("div", { className: "min-h-[calc(100vh-200px)] bg-white py-8 lg:py-12", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: [_jsx("div", { className: "mb-6 h-4 bg-gray-200 rounded w-48 animate-pulse" }), _jsx(ProductGridSkeleton, { count: 8, columns: 3 })] }) }));
+            case 'checkout':
+                return _jsx(CheckoutSkeleton, {});
+            default:
+                return _jsx(PageSkeleton, {});
+        }
+    };
+    // For homepage, center spinner in fixed position
+    if (routeType === 'homepage') {
+        return (_jsx("div", { className: cn('fixed inset-0 bg-white z-[9999] flex items-center justify-center', className), children: _jsx("div", { className: "flex flex-col items-center justify-center gap-3", children: _jsx("div", { className: "w-12 h-12 rounded-full border-4 border-solid border-gray-200 border-t-gray-900 border-r-gray-900 animate-spin" }) }) }));
+    }
+    return (_jsx("div", { className: cn('fixed inset-0 bg-white z-[9999] overflow-y-auto', className), children: _jsx("div", { className: "pt-20 pb-32 min-h-screen", children: renderSkeleton() }) }));
+}

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface SheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    side?: 'left' | 'right';
+    className?: string;
+    contentClassName?: string;
+    backdropClassName?: string;
+    closeButtonClassName?: string;
+    ariaLabelledBy?: string;
+    /** When true, shell renders its own header (e.g. login sheet). */
+    hideBuiltInTitle?: boolean;
+    /** Hide default close button (header provides close). */
+    showCloseButton?: boolean;
+    onOpenAutoFocus?: () => void;
+    /** Portal to document.body — use for login overlay above template stacking contexts. */
+    portal?: boolean;
+    /** z-index tier: default for cart/menu, overlay for login */
+    overlayTier?: 'default' | 'overlay';
+    /** On viewports below sm, use full viewport width/height (login sheets). */
+    overlayMobileMode?: 'drawer' | 'fullscreen';
+    /** SSO login sheet color-scheme hint for OS dark mode (light resists forced-dark). */
+    dataLoginPanel?: 'light' | 'dark';
+}
+export declare function Sheet({ isOpen, onClose, title, children, side, className, contentClassName, backdropClassName, closeButtonClassName, ariaLabelledBy, hideBuiltInTitle, showCloseButton, onOpenAutoFocus, portal, overlayTier, overlayMobileMode, dataLoginPanel, }: SheetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC5C,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAc,EACd,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,cAAc,EACd,gBAAwB,EACxB,eAAsB,EACtB,eAAe,EACf,MAAc,EACd,WAAuB,EACvB,iBAA4B,EAC5B,cAAc,GACf,EAAE,UAAU,2CA8FZ"}

package/dist/components/ui/sheet.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+import { Button } from './button.js';
+/** Login / critical overlays — above sticky headers (z-60), search (z-100), sliders, etc. */
+const OVERLAY_ROOT_Z = 'z-[9999]';
+export function Sheet({ isOpen, onClose, title, children, side = 'right', className, contentClassName, backdropClassName, closeButtonClassName, ariaLabelledBy, hideBuiltInTitle = false, showCloseButton = true, onOpenAutoFocus, portal = false, overlayTier = 'default', overlayMobileMode = 'drawer', dataLoginPanel, }) {
+    React.useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+            const t = window.setTimeout(() => onOpenAutoFocus?.(), 100);
+            return () => {
+                clearTimeout(t);
+                document.removeEventListener('keydown', handleEscape);
+                document.body.style.overflow = 'unset';
+            };
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose, onOpenAutoFocus]);
+    if (!isOpen) {
+        return null;
+    }
+    const isOverlay = overlayTier === 'overlay';
+    const rootZ = isOverlay ? OVERLAY_ROOT_Z : 'z-[110]';
+    const backdropZ = isOverlay ? 'z-0' : 'z-[105]';
+    const panelZ = isOverlay ? 'z-10' : 'z-[110]';
+    const sheetContent = (_jsxs("div", { className: cn(isOverlay && 'fixed inset-0', !isOverlay && 'contents', rootZ), children: [_jsx("div", { className: cn(isOverlay ? 'absolute inset-0' : 'fixed inset-0', backdropZ, 'transition-opacity', backdropClassName ?? 'bg-black/60 backdrop-blur-sm'), onClick: onClose, "aria-hidden": "true" }), _jsxs("div", { role: "dialog", "aria-modal": "true", "data-login-panel": dataLoginPanel, "aria-labelledby": ariaLabelledBy || (title && !hideBuiltInTitle ? 'sheet-title' : undefined), className: cn('bg-white shadow-xl transition ease-in-out duration-300 transform flex flex-col', isOverlay ? 'fixed top-0 bottom-0 h-dvh max-h-dvh supports-[height:100dvh]:h-dvh' : 'fixed', panelZ, side === 'left' ? 'left-0' : 'right-0', !isOverlay && (side === 'left' ? 'top-0 bottom-0 left-0' : 'top-0 bottom-0 right-0 h-dvh max-h-dvh'), overlayMobileMode === 'fullscreen' &&
+                    isOverlay &&
+                    'max-sm:inset-0 max-sm:left-0 max-sm:right-0 max-sm:w-screen max-sm:max-w-[100dvw] max-sm:rounded-none', 'w-full max-w-md translate-x-0 opacity-100 pointer-events-auto', className), children: [showCloseButton && !hideBuiltInTitle ? (_jsxs("div", { className: "flex items-center justify-between shrink-0 px-6 pt-6 pb-2", children: [title ? (_jsx("h2", { id: "sheet-title", className: "text-lg font-semibold text-[#1b0029]", children: title })) : (_jsx("span", {})), _jsx(Button, { variant: "ghost", size: "icon", onClick: onClose, className: cn('rounded-full shrink-0', closeButtonClassName), "aria-label": "Close", children: _jsx(X, { className: "h-4 w-4" }) })] })) : null, _jsx("div", { className: cn('flex-1 min-h-0 overflow-y-auto overflow-x-hidden py-px', contentClassName), children: children })] })] }));
+    if (portal && typeof document !== 'undefined') {
+        return createPortal(sheetContent, document.body);
+    }
+    return sheetContent;
+}

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

@@ -0,0 +1,3 @@
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAOtC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils/index.js";
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn("animate-pulse rounded-md bg-gray-200/80", className), ...props }));
+}
+export { Skeleton };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"category-grid-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/category-grid-skeleton.tsx"],"names":[],"mappings":"AAAA,UAAU,yBAAyB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAS,EAAE,EAAE,yBAAyB,2CA+B5E"}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CategoryGridSkeleton({ count = 6 }) {
+    const masonryCount = Math.max(0, count - 1);
+    return (_jsxs("div", { className: "space-y-6 mb-8", children: [_jsxs("div", { className: "relative overflow-hidden rounded-2xl bg-gray-200 animate-pulse min-h-[360px] md:min-h-[420px]", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-gray-300/80 via-gray-200/20 to-transparent" }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-6 lg:p-8", children: [_jsx("div", { className: "h-8 bg-gray-300 rounded w-3/4 mb-2" }), _jsx("div", { className: "h-4 bg-gray-300 rounded w-1/2" })] })] }), _jsx("div", { className: "columns-1 sm:columns-2 lg:columns-3 gap-6", children: Array.from({ length: masonryCount }).map((_, i) => {
+                    const heights = ['min-h-[280px]', 'min-h-[360px]', 'min-h-[320px]'];
+                    const heightClass = heights[i % heights.length];
+                    return (_jsxs("div", { className: `break-inside-avoid mb-6 relative overflow-hidden rounded-2xl bg-gray-200 animate-pulse ${heightClass}`, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-gray-300/80 via-gray-200/20 to-transparent" }), _jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-6 lg:p-8", children: [_jsx("div", { className: "h-6 bg-gray-300 rounded w-2/3 mb-2" }), _jsx("div", { className: "h-4 bg-gray-300 rounded w-1/3" })] })] }, i));
+                }) })] }));
+}

package/dist/components/ui/skeletons/checkout-skeleton.d.ts

@@ -0,0 +1,2 @@
+export declare function CheckoutSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=checkout-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/checkout-skeleton.tsx"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,4CA4I/B"}

package/dist/components/ui/skeletons/checkout-skeleton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CheckoutSkeleton() {
+    return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-12 px-4 sm:px-6 lg:px-8 font-sans animate-pulse", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "mb-10 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-10 h-10 bg-gray-200 rounded-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-24" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-8 h-8 bg-gray-200 rounded-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-20" }), _jsx("div", { className: "w-8 h-0.5 bg-gray-200" }), _jsx("div", { className: "w-8 h-8 bg-gray-200 rounded-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-20" })] })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-10", children: [_jsxs("div", { className: "flex-1 space-y-8", children: [_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "w-10 h-10 bg-gray-200 rounded-xl" }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-48" })] }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-32 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }) })] }), _jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "w-10 h-10 bg-gray-200 rounded-xl" }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-40" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-24 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-24 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }), _jsxs("div", { className: "space-y-1.5 md:col-span-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-20 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-20 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-16 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-24 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-20 ml-1" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-xl" })] })] })] }), _jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "w-10 h-10 bg-gray-200 rounded-xl" }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-40" })] }), _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl", children: [_jsxs("div", { className: "flex items-center gap-4 flex-1", children: [_jsx("div", { className: "w-5 h-5 bg-gray-200 rounded-full" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-32" }), _jsx("div", { className: "h-3 bg-gray-200 rounded w-48" })] })] }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-16" })] }) })] }), _jsx("div", { className: "h-14 bg-gray-200 rounded-2xl" })] }), _jsx("div", { className: "w-full lg:w-[400px] flex-shrink-0", children: _jsxs("div", { className: "bg-white p-8 rounded-3xl shadow-lg border border-gray-100 sticky top-8", children: [_jsx("div", { className: "h-7 bg-gray-200 rounded w-32 mb-6" }), _jsx("div", { className: "space-y-6 mb-8", children: _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "w-20 h-20 bg-gray-200 rounded-xl flex-shrink-0" }), _jsxs("div", { className: "flex-1 py-1 space-y-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-full" }), _jsx("div", { className: "h-3 bg-gray-200 rounded w-2/3" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-20" })] })] }) }), _jsxs("div", { className: "space-y-4 pt-6 border-t-2 border-gray-50", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-20" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-24" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-24" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-20" })] }), _jsxs("div", { className: "flex justify-between items-end pt-4 mt-2 border-t border-gray-100", children: [_jsx("div", { className: "h-5 bg-gray-200 rounded w-28" }), _jsx("div", { className: "h-8 bg-gray-200 rounded w-32" })] })] })] }) })] })] }) }));
+}

package/dist/components/ui/skeletons/index.d.ts

@@ -0,0 +1,6 @@
+export { ProductCardSkeleton } from './product-card-skeleton';
+export { ProductGridSkeleton } from './product-grid-skeleton';
+export { ProductDetailSkeleton } from './product-detail-skeleton';
+export { CategoryGridSkeleton } from './category-grid-skeleton';
+export { PageSkeleton } from './page-skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/skeletons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/ui/skeletons/index.js

@@ -0,0 +1,5 @@
+export { ProductCardSkeleton } from './product-card-skeleton.js';
+export { ProductGridSkeleton } from './product-grid-skeleton.js';
+export { ProductDetailSkeleton } from './product-detail-skeleton.js';
+export { CategoryGridSkeleton } from './category-grid-skeleton.js';
+export { PageSkeleton } from './page-skeleton.js';

package/dist/components/ui/skeletons/page-skeleton.d.ts

@@ -0,0 +1,2 @@
+export declare function PageSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/page-skeleton.tsx"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,4CAkC3B"}

package/dist/components/ui/skeletons/page-skeleton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function PageSkeleton() {
+    return (_jsx("div", { className: "min-h-[calc(100vh-200px)] bg-white animate-pulse", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center space-x-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-24" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-32" })] }), _jsxs("div", { className: "mb-8 space-y-4", children: [_jsx("div", { className: "h-10 bg-gray-200 rounded w-3/4" }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-1/2" })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-5/6" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-4/6" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-3/4" })] }), _jsxs("div", { className: "mt-8 flex gap-4", children: [_jsx("div", { className: "h-12 bg-gray-200 rounded-full w-32" }), _jsx("div", { className: "h-12 bg-gray-200 rounded-full w-32" })] })] }) }));
+}

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

@@ -0,0 +1,2 @@
+export declare function ProductCardSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-card-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-card-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/product-card-skeleton.tsx"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,4CAclC"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ProductCardSkeleton() {
+    return (_jsxs("div", { className: "group relative flex flex-col h-full bg-white rounded-lg overflow-hidden border border-gray-100 animate-pulse", children: [_jsx("div", { className: "relative aspect-[3/4] bg-gray-200" }), _jsxs("div", { className: "p-4 space-y-3", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "h-5 bg-gray-200 rounded w-20" }), _jsx("div", { className: "h-5 bg-gray-200 rounded w-16" })] })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function ProductDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/skeletons/product-detail-skeleton.tsx"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,4CA6DpC"}

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ProductDetailSkeleton() {
+    return (_jsx("div", { className: "min-h-[calc(100vh-200px)] bg-white animate-pulse", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center space-x-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-24" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-32" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-40" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-12", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "aspect-square bg-gray-200 rounded-lg" }), _jsx("div", { className: "grid grid-cols-5 gap-2", children: Array.from({ length: 5 }).map((_, i) => (_jsx("div", { className: "aspect-square bg-gray-200 rounded" }, i))) })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-8 bg-gray-200 rounded w-3/4" }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-1/2" })] }), _jsx("div", { className: "h-6 bg-gray-200 rounded w-24" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded w-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-full" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-gray-200 rounded w-5/6" })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "h-5 bg-gray-200 rounded w-32" }), _jsx("div", { className: "flex gap-2", children: Array.from({ length: 4 }).map((_, i) => (_jsx("div", { className: "h-10 w-10 bg-gray-200 rounded-full" }, i))) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "h-5 bg-gray-200 rounded w-24" }), _jsxs("div", { className: "flex gap-4", children: [_jsx("div", { className: "h-14 bg-gray-200 rounded-full flex-1" }), _jsx("div", { className: "h-14 bg-gray-200 rounded-full w-14" })] })] })] })] })] }) }));
+}