@mohasinac/appkit 2.3.2 → 2.4.1

package/dist/features/products/components/ProductDetailPageView.js

@@ -14,6 +14,7 @@ import { ProductTabsShell } from "./ProductTabsShell";
 import { ProductFeatureBadges } from "./ProductFeatureBadges";
 import { RelatedProductsCarousel } from "./RelatedProductsCarousel";
 import { BuyBar } from "./BuyBar";
+import { ShareButton } from "./ShareButton";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -30,7 +31,7 @@ function toProductItem(doc) {
                 : undefined,
         status: doc.status ?? "published",
         slug: typeof doc.slug === "string" ? doc.slug : undefined,
-        sellerName: typeof doc.sellerName === "string" ? doc.sellerName : undefined,
+        storeName: typeof doc.storeName === "string" ? doc.storeName : undefined,
         rating: typeof doc.rating === "number" ? doc.rating : undefined,
         reviewCount: typeof doc.reviewCount === "number" ? doc.reviewCount : undefined,
     };
@@ -81,7 +82,7 @@ function StarRating({ value }) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export async function ProductDetailPageView({ slug, }) {
+export async function ProductDetailPageView({ slug, renderOfferAction, }) {
     const product = await productRepository
         .findByIdOrSlug(slug)
         .catch(() => undefined);
@@ -111,8 +112,10 @@ export async function ProductDetailPageView({ slug, }) {
     const avgRating = typeof p.avgRating === "number" ? p.avgRating : null;
     const reviewCount = typeof p.reviewCount === "number" ? p.reviewCount : null;
     const category = typeof p.category === "string" ? p.category : null;
+    const categoryName = typeof p.categoryName === "string" ? p.categoryName : null;
     const subcategory = typeof p.subcategory === "string" ? p.subcategory : null;
     const brand = typeof p.brand === "string" ? p.brand : null;
+    const brandSlug = typeof p.brandSlug === "string" ? p.brandSlug : null;
     const condition = typeof p.condition === "string" ? p.condition : null;
     const tags = Array.isArray(p.tags) ? p.tags : [];
     const features = Array.isArray(p.features)
@@ -127,15 +130,26 @@ export async function ProductDetailPageView({ slug, }) {
     const specs = Array.isArray(p.specifications)
         ? p.specifications
         : [];
+    const allowOffers = p.allowOffers === true;
+    const productType = typeof p.type === "string" ? p.type : "simple";
+    const minOfferPercent = typeof p.minOfferPercent === "number" ? p.minOfferPercent : 70;
     const shippingInfo = typeof p.shippingInfo === "string" ? p.shippingInfo : null;
     const returnPolicy = typeof p.returnPolicy === "string" ? p.returnPolicy : null;
     const shippingPaidBy = p.shippingPaidBy;
     const freeShipping = shippingPaidBy === "seller";
     const featured = p.featured === true;
+    const storeName = typeof p.storeName === "string" ? p.storeName : null;
     const sellerName = typeof p.sellerName === "string" ? p.sellerName : null;
-    const safeSeller = sellerName
-        ? safeDisplayName(sellerName, "")
+    const safeSeller = (storeName || sellerName)
+        ? safeDisplayName((storeName || sellerName) ?? "", "")
         : null;
+    const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
+    const sellerId = typeof p.sellerId === "string" ? p.sellerId : null;
+    const storeHref = storeSlug
+        ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug))
+        : sellerId
+            ? String(ROUTES.PUBLIC.SELLER_DETAIL(sellerId))
+            : null;
     const descriptionHtml = toDescriptionHtml(p.description);
     // -- Fetch reviews + related in parallel ------------------------------------
     const [reviewDocs, relatedDocs] = await Promise.all([
@@ -153,7 +167,7 @@ export async function ProductDetailPageView({ slug, }) {
         .map(toProductItem);
     const formattedPrice = price !== null ? formatCurrency(price, currency) : null;
     const formattedOriginal = originalPrice !== null ? formatCurrency(originalPrice, currency) : null;
-    return (_jsx(Main, { children: _jsxs(Container, { size: "xl", className: "px-4 py-6", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs("nav", { "aria-label": "Breadcrumb", className: "mb-4 flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400 flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: "hover:text-primary-600 transition-colors", children: "Products" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "capitalize", children: category })] })), subcategory && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "capitalize", children: subcategory })] }))] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [condition && (_jsx(Span, { className: "mb-1.5 inline-block rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-0.5 text-xs font-medium capitalize text-zinc-600 dark:text-zinc-300", children: condition === "new"
+    return (_jsx(Main, { children: _jsxs(Container, { size: "xl", className: "px-4 py-6", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs("div", { className: "mb-4 flex items-center justify-between flex-wrap gap-2", children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400 flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: "hover:text-primary-600 transition-colors", children: "Products" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 transition-colors", children: categoryName || category })] })), subcategory && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "capitalize", children: subcategory })] }))] }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "sm", children: [_jsxs(Div, { children: [condition && (_jsx(Span, { className: "mb-1.5 inline-block rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-0.5 text-xs font-medium capitalize text-zinc-600 dark:text-zinc-300", children: condition === "new"
                                             ? "Brand New"
                                             : condition === "like_new"
                                                 ? "Like New"
@@ -169,7 +183,7 @@ export async function ProductDetailPageView({ slug, }) {
                                     ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
                                     : "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400"}`, children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
                                         ? ` — only ${effectiveStock} left`
-                                        : ""] })), (category || brand) && (_jsxs(Row, { align: "center", gap: "xs", className: "text-xs text-zinc-400 dark:text-zinc-500 flex-wrap", children: [category && _jsx(Span, { className: "capitalize", children: category }), category && brand && _jsx(Span, { children: "\u203A" }), brand && _jsx(Span, { className: "font-medium text-zinc-600 dark:text-zinc-300", children: brand })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
+                                        : ""] })), (categoryName || category || brand) && (_jsxs(Row, { align: "center", gap: "xs", className: "text-xs text-zinc-400 dark:text-zinc-500 flex-wrap", children: [category && (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: categoryName || category })), category && brand && _jsx(Span, { children: "\u203A" }), brand && (brandSlug ? (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "font-medium text-zinc-600 dark:text-zinc-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: brand })) : (_jsx(Span, { className: "font-medium text-zinc-600 dark:text-zinc-300", children: brand })))] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: returnPolicy != null && returnPolicy.length > 0, labels: {
                                     featured: "Featured",
                                     fasterDelivery: "Faster Delivery",
                                     ratedSeller: "Rated Seller",
@@ -183,9 +197,14 @@ export async function ProductDetailPageView({ slug, }) {
                                     codAvailable: "Cash on Delivery",
                                     wishlistCount: (n) => `${n} wishlisted`,
                                     categoryProductCount: (n, cat) => `${n} in ${cat}`,
-                                } }), features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx("ul", { className: "space-y-1.5", children: features.map((f, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-4" })), safeSeller && (_jsxs(Row, { align: "center", gap: "xs", className: "border-t border-zinc-100 dark:border-zinc-800 pt-3", children: [_jsx(Span, { className: "text-xs text-zinc-500", children: "Sold by" }), _jsx(Span, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: safeSeller })] }))] })), renderActions: () => (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5 space-y-4", children: [formattedPrice && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice }), inStock && effectiveStock !== null && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-0.5 text-xs text-amber-600 dark:text-amber-400", children: ["Only ", effectiveStock, " left \u2014 order soon!"] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", children: "\u2661 Add to Wishlist" })] }), (shippingInfo || returnPolicy || freeShipping) && (_jsxs(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4 space-y-2.5", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-emerald-500", children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { className: "text-xs text-zinc-500", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-zinc-400", children: "\uD83D\uDCE6" }), _jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: shippingInfo })] })), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-zinc-400", children: "\u21BA" }), _jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: [_jsx(Text, { className: "mb-2 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-xs text-zinc-600 dark:text-zinc-300", children: tag }, tag))) })] })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "sm", className: "justify-center text-center", children: [
+                                } }), features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx("ul", { className: "space-y-1.5", children: features.map((f, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-4" })), safeSeller && (_jsx(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-3", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] uppercase tracking-wide text-zinc-400 dark:text-zinc-500 mb-0.5", children: "Sold by" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-3 py-1.5 text-xs font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderActions: () => (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 p-5 space-y-4", children: [formattedPrice && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice }), inStock && effectiveStock !== null && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-0.5 text-xs text-amber-600 dark:text-amber-400", children: ["Only ", effectiveStock, " left \u2014 order soon!"] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "ghost", size: "md", className: "w-full", children: "\u2661 Add to Wishlist" }), allowOffers && productType === "simple" && price !== null && renderOfferAction?.({
+                                        productId: product.id,
+                                        price,
+                                        currency,
+                                        minOfferPercent,
+                                    })] }), (shippingInfo || returnPolicy || freeShipping) && (_jsxs(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4 space-y-2.5", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-emerald-500", children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { className: "text-xs text-zinc-500", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-zinc-400", children: "\uD83D\uDCE6" }), _jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: shippingInfo })] })), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-zinc-400", children: "\u21BA" }), _jsx(Text, { className: "text-xs text-zinc-600 dark:text-zinc-400", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: [_jsx(Text, { className: "mb-2 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-xs text-zinc-600 dark:text-zinc-300", children: tag }, tag))) })] })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "sm", className: "justify-center text-center", children: [
                                         { icon: "🔒", label: "Secure\nPayment" },
                                         { icon: "✓", label: "Verified\nSeller" },
                                         { icon: "⭐", label: "Quality\nGuarantee" },
-                                    ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { className: "text-base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }) })), renderRelated: () => relatedItems.length > 0 ? (_jsx(RelatedProductsCarousel, { items: relatedItems })) : null }), _jsxs(BuyBar, { children: [formattedPrice && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice })), _jsx(Button, { variant: "primary", size: "sm", className: "flex-1", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" })] })] }) }));
+                                    ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { className: "text-base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-36 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx("ul", { className: "space-y-2", children: ingredients.map((item, i) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 rounded-full bg-primary-400" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx("ol", { className: "space-y-3", children: howToUse.map((step, i) => (_jsxs("li", { className: "flex items-start gap-3 text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx(Span, { className: "flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30 text-xs font-bold text-primary-700 dark:text-primary-300", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }) })), renderRelated: () => relatedItems.length > 0 ? (_jsx(RelatedProductsCarousel, { items: relatedItems })) : null }), _jsxs(BuyBar, { children: [formattedPrice && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: formattedPrice })), _jsx(Button, { variant: "secondary", size: "sm", className: "shrink-0", disabled: !inStock, children: "Add to Cart" }), _jsx(Button, { variant: "primary", size: "sm", className: "flex-1", disabled: !inStock, children: inStock ? "Buy Now" : "Out of Stock" })] })] }) }));
 }

package/dist/features/products/components/ProductFilters.d.ts

@@ -48,6 +48,9 @@ export declare const PRODUCT_SELLER_SORT_OPTIONS: readonly [{
 export declare const PRODUCT_PUBLIC_SORT_OPTIONS: readonly [{
     readonly value: "-createdAt";
     readonly label: "Newest First";
+}, {
+    readonly value: "createdAt";
+    readonly label: "Oldest First";
 }, {
     readonly value: "-price";
     readonly label: "Price: High to Low";
@@ -56,7 +59,10 @@ export declare const PRODUCT_PUBLIC_SORT_OPTIONS: readonly [{
     readonly label: "Price: Low to High";
 }, {
     readonly value: "title";
-    readonly label: "Title A-Z";
+    readonly label: "Title A–Z";
+}, {
+    readonly value: "-title";
+    readonly label: "Title Z–A";
 }, {
     readonly value: "-views";
     readonly label: "Most Viewed";

package/dist/features/products/components/ProductFilters.js

@@ -52,9 +52,11 @@ export const PRODUCT_SELLER_SORT_OPTIONS = [
 ];
 export const PRODUCT_PUBLIC_SORT_OPTIONS = [
     { value: "-createdAt", label: "Newest First" },
+    { value: "createdAt", label: "Oldest First" },
     { value: "-price", label: "Price: High to Low" },
     { value: "price", label: "Price: Low to High" },
-    { value: "title", label: "Title A-Z" },
+    { value: "title", label: "Title A–Z" },
+    { value: "-title", label: "Title Z–A" },
     { value: "-views", label: "Most Viewed" },
 ];
 export function getProductFilterKeys(variant) {
@@ -102,5 +104,5 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
         : [];
     const resolvedVariant = variant ?? (showStatus ? "admin" : "public");
     const shouldShowStatus = resolvedVariant !== "public" || showStatus;
-    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: categoryOptions.length > 6, defaultCollapsed: true })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: true }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: true }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 6, defaultCollapsed: true })), resolvedStoreOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("store"), options: resolvedStoreOptions, selected: selectedSellers, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: resolvedStoreOptions.length > 6, defaultCollapsed: true })), showShipping && (_jsx(SwitchFilter, { title: t("shipping"), label: t("freeShippingOnly"), checked: table.get("freeShipping") === "true", onChange: (v) => table.set("freeShipping", v ? "true" : ""), defaultCollapsed: true })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 6, defaultCollapsed: true })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: true }))] }));
+    return (_jsxs(Div, { children: [categoryOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })), _jsx(FilterFacetSection, { title: t("condition"), options: conditionOptions, selected: selectedConditions, onChange: (vals) => table.set("condition", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("priceRange"), minValue: table.get("minPrice"), maxValue: table.get("maxPrice"), onMinChange: (v) => table.set("minPrice", v), onMaxChange: (v) => table.set("maxPrice", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minPrice"), maxPlaceholder: t("maxPrice"), defaultCollapsed: false }), brandOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 4, defaultCollapsed: brandOptions.length > 6 })), resolvedStoreOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("store"), options: resolvedStoreOptions, selected: selectedSellers, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: resolvedStoreOptions.length > 4, defaultCollapsed: resolvedStoreOptions.length > 6 })), showShipping && (_jsx(SwitchFilter, { title: t("shipping"), label: t("freeShippingOnly"), checked: table.get("freeShipping") === "true", onChange: (v) => table.set("freeShipping", v ? "true" : ""), defaultCollapsed: false })), tagOptions.length > 0 && (_jsx(FilterFacetSection, { title: t("tags"), options: tagOptions, selected: selectedTags, onChange: (vals) => table.set("tags", vals.join("|")), searchable: tagOptions.length > 4, defaultCollapsed: tagOptions.length > 6 })), shouldShowStatus && (_jsx(FilterFacetSection, { title: t("status"), options: statusOptions ?? defaultStatusOptions, selected: selectedStatuses, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false }))] }));
 }

package/dist/features/products/components/ProductForm.d.ts

@@ -17,6 +17,18 @@ interface StoreAddressSelectorRenderArgs {
     onChange: (value: string) => void;
     disabled: boolean;
 }
+export interface BrandSelectorRenderArgs {
+    label: string;
+    /** Current brand name (single mode) */
+    value: string;
+    /** Current brand names (mixed mode) */
+    values: string[];
+    /** Whether selector is in multi-select mode */
+    multi: boolean;
+    onValueChange: (value: string) => void;
+    onValuesChange: (values: string[]) => void;
+    disabled: boolean;
+}
 export interface ProductFormProps {
     product: ProductFormValue;
     onChange: (updated: ProductFormValue) => void;
@@ -33,6 +45,12 @@ export interface ProductFormProps {
     }) => React.ReactNode;
     /** Render app-specific category selector. */
     renderCategorySelector?: (args: CategorySelectorRenderArgs) => React.ReactNode;
+    /**
+     * Render app-specific brand selector (select existing or create new).
+     * Receives `multi=true` when brandMode is "mixed".
+     * If omitted, falls back to a plain text input.
+     */
+    renderBrandSelector?: (args: BrandSelectorRenderArgs) => React.ReactNode;
     /** Render app-specific pickup-address selector. */
     renderStoreAddressSelector?: (args: StoreAddressSelectorRenderArgs) => React.ReactNode;
     /**
@@ -43,5 +61,5 @@ export interface ProductFormProps {
     /** Currency prefix for numeric money inputs (e.g. "₹", "$", "€"). */
     currencyPrefix?: string;
 }
-export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductForm({ product, onChange, isReadonly, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, }: ProductFormProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/products/components/ProductForm.js

@@ -14,7 +14,7 @@ export const PRODUCT_STATUS_OPTIONS = [
     { value: "discontinued", label: "Discontinued" },
     { value: "sold", label: "Sold" },
 ];
-export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", }) {
+export function ProductForm({ product, onChange, isReadonly = false, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", }) {
     const t = useTranslations("adminProducts");
     const { upload } = useMediaUpload();
     const galleryIndexRef = useRef(0);
@@ -32,7 +32,7 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
             index: galleryIndexRef.current,
             name: product.title || "product",
             category: product.category || "uncategorized",
-            store: product.sellerName || "store",
+            store: product.storeName || "store",
         });
     };
     const handleVideoUpload = async (file) => {
@@ -41,7 +41,7 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
             index: 1,
             name: product.title || "product",
             category: product.category || "uncategorized",
-            store: product.sellerName || "store",
+            store: product.storeName || "store",
         });
     };
     return (_jsxs(Stack, { children: [_jsx(FormField, { name: "title", label: t("formTitle"), type: "text", value: product.title || "", onChange: (value) => update({ title: value }), disabled: isReadonly, placeholder: "Enter product title" }), renderDescriptionEditor ? (_jsx(_Fragment, { children: renderDescriptionEditor({
@@ -54,12 +54,30 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                             value: product.category || "",
                             onChange: (value) => update({ category: value }),
                             disabled: isReadonly,
-                        }) })) : (_jsx(FormField, { name: "category", label: t("formCategory"), type: "text", value: product.category || "", onChange: (value) => update({ category: value }), disabled: isReadonly })), _jsx(FormField, { name: "subcategory", label: t("formSubcategory"), type: "text", value: product.subcategory || "", onChange: (value) => update({ subcategory: value }), disabled: isReadonly, placeholder: "e.g. Smartphones" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" }), _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
+                        }) })) : (_jsx(FormField, { name: "category", label: t("formCategory"), type: "text", value: product.category || "", onChange: (value) => update({ category: value }), disabled: isReadonly })), _jsx(FormField, { name: "subcategory", label: t("formSubcategory"), type: "text", value: product.subcategory || "", onChange: (value) => update({ subcategory: value }), disabled: isReadonly, placeholder: "e.g. Smartphones" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: t("formBrand") }), _jsx("div", { className: "flex gap-3 flex-wrap", children: ["single", "unbranded", "mixed"].map((mode) => (_jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none text-sm text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "radio", name: "brandMode", value: mode, checked: (product.brandMode ?? "single") === mode, onChange: () => {
+                                        if (mode === "unbranded") {
+                                            update({ brandMode: "unbranded", brand: undefined, brands: [] });
+                                        }
+                                        else if (mode === "mixed") {
+                                            update({ brandMode: "mixed", brand: undefined });
+                                        }
+                                        else {
+                                            update({ brandMode: "single", brands: [] });
+                                        }
+                                    }, disabled: isReadonly, className: "accent-primary" }), mode === "single" ? "Single Brand" : mode === "unbranded" ? "Unbranded" : "Mixed Brands"] }, mode))) }), (product.brandMode === "unbranded") && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Unbranded items won't appear in brand-filtered results." })), (product.brandMode === "mixed") && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Mixed-brand items won't appear in single-brand filters. Select all applicable brands." })), (product.brandMode ?? "single") !== "unbranded" && (_jsx(_Fragment, { children: renderBrandSelector ? (renderBrandSelector({
+                            label: product.brandMode === "mixed" ? "Brands" : t("formBrand"),
+                            value: product.brand || "",
+                            values: product.brands || [],
+                            multi: product.brandMode === "mixed",
+                            onValueChange: (value) => update({ brand: value }),
+                            onValuesChange: (values) => update({ brands: values }),
+                            disabled: isReadonly,
+                        })) : product.brandMode === "mixed" ? (_jsx(FormField, { name: "brands", label: "Brands (comma-separated)", type: "text", value: (product.brands || []).join(", "), onChange: (value) => update({ brands: value.split(",").map((b) => b.trim()).filter(Boolean) }), disabled: isReadonly, placeholder: "e.g. Nike, Adidas, Puma" })) : (_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" })) }))] }), _jsxs(FormGroup, { columns: 2, children: [_jsx("div", {}), " ", _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
                     type: "product-image",
                     index: 1,
                     name: product.title || "product",
                     category: product.category || "uncategorized",
-                    store: product.sellerName || "store",
+                    store: product.storeName || "store",
                 }), onChange: (url) => update({ mainImage: url }), label: t("formMainImage"), helperText: "Recommended: 800x800px (1:1)" })), isReadonly && product.mainImage && (_jsx(FormField, { name: "mainImage", label: t("formMainImage"), type: "text", value: product.mainImage, onChange: () => { }, disabled: true })), !isReadonly && (_jsx(MediaUploadList, { label: t("formGalleryImages"), value: galleryImages, onChange: (fields) => update({ images: fields.map((f) => f.url) }), onUpload: handleGalleryUpload, accept: "image/*", maxItems: 5, maxSizeMB: 10, helperText: t("formGalleryImagesHelper"), onAbort: onMediaAbort })), !isReadonly && (_jsx(MediaUploadField, { label: t("formVideo"), value: product.video?.url || "", onChange: (url) => update({
                     video: url
                         ? {
@@ -117,5 +135,5 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                     value: product.pickupAddressId || "",
                     onChange: (value) => update({ pickupAddressId: value }),
                     disabled: isReadonly,
-                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.sellerName && (_jsx(FormField, { name: "sellerName", label: t("formSeller"), type: "text", value: product.sellerName, onChange: () => { }, disabled: true }))] }));
+                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
 }

package/dist/features/products/components/ProductGrid.d.ts

@@ -12,8 +12,12 @@ interface ProductCardProps<T extends ProductItem = ProductItem> {
     onAddToCart?: (product: T) => void;
     onBuyNow?: (product: T) => void;
     className?: string;
+    /** Bulk selection */
+    selectionMode?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string) => void;
 }
-export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className, selectionMode, isSelected, onSelect, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface ProductCardContext<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onWishlistToggle?: (productId: string) => void;
@@ -74,6 +78,10 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
      * @default "card"
      */
     view?: ViewMode;
+    /** Bulk selection */
+    selectionMode?: boolean;
+    selectedIds?: Set<string>;
+    onToggleSelect?: (id: string) => void;
 }
-export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, selectionMode, selectedIds, onToggleSelect, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/products/components/ProductGrid.js

@@ -1,42 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Link from "next/link";
-import { Button, Div, Grid, RichText, Row, Span, Text } from "../../../ui";
+import { Button, Div, Grid, Row, Span, Text } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { formatCurrency } from "../../../utils/number.formatter";
-import { getDefaultCurrency, getDefaultCurrencySymbol } from "../../../core/baseline-resolver";
-import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { safeDisplayName } from "../../../security";
-export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", }) {
+import { useLongPress } from "../../../react/hooks/useLongPress";
+export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", selectionMode = false, isSelected = false, onSelect, }) {
     const discount = product.originalPrice && product.originalPrice > product.price
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
         : null;
-    const cardBody = (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick && !href ? 0 : undefined, onKeyDown: onClick && !href
-            ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
-            : undefined, onClick: onClick && !href ? () => onClick(product) : undefined, className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${onClick || href ? "cursor-pointer" : ""} ${className}`, children: [_jsxs(Div, { className: "relative aspect-square overflow-hidden bg-neutral-100 dark:bg-slate-800", children: [product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "h-full w-full bg-neutral-200 dark:bg-slate-700" })), discount && (_jsxs(Span, { className: "absolute left-2 top-2 rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white", children: ["-", discount, "%"] })), product.isAuction && (_jsx(Span, { className: "absolute right-2 top-2 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-bold text-white", children: "Auction" })), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+    const isAuction = product.isAuction || product.listingType === "auction";
+    const isPreOrder = product.isPreOrder || product.listingType === "pre-order";
+    const typeBadge = isAuction
+        ? { label: "Auction", cls: "bg-amber-500 text-white" }
+        : isPreOrder
+            ? { label: "Pre-Order", cls: "bg-violet-600 text-white" }
+            : null;
+    const longPress = useLongPress(() => onSelect?.(product.id));
+    const handleCardClick = selectionMode
+        ? (e) => { e.preventDefault(); e.stopPropagation(); onSelect?.(product.id); }
+        : onClick && !href ? () => onClick(product) : undefined;
+    const cardBody = (_jsxs(Div, { role: selectionMode ? "checkbox" : onClick ? "button" : undefined, "aria-checked": selectionMode ? isSelected : undefined, tabIndex: selectionMode || (onClick && !href) ? 0 : undefined, onKeyDown: selectionMode
+            ? (e) => (e.key === "Enter" || e.key === " ") && onSelect?.(product.id)
+            : onClick && !href
+                ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
+                : undefined, onClick: handleCardClick, ...(!selectionMode ? longPress : {}), className: [
+            "group relative flex h-full flex-col overflow-hidden",
+            "rounded-2xl border bg-white",
+            "shadow-sm transition-all duration-200",
+            isSelected
+                ? "border-primary ring-2 ring-primary/30 shadow-md"
+                : "border-zinc-200/80 hover:shadow-lg hover:border-primary/30 hover:-translate-y-0.5",
+            "dark:bg-slate-900",
+            isSelected ? "dark:border-primary dark:ring-primary/30" : "dark:border-slate-700/60",
+            selectionMode || onClick || href ? "cursor-pointer" : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsxs(Div, { className: "relative overflow-hidden bg-zinc-100 dark:bg-slate-800 aspect-square", children: [product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", className: "transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Div, { className: "h-full w-full flex items-center justify-center bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700", children: _jsx(Span, { className: "text-4xl opacity-30", children: "\uD83D\uDECD\uFE0F" }) })), _jsxs(Div, { className: "absolute left-2 top-2 flex flex-col gap-1", children: [onSelect && (_jsx(Div, { onClick: (e) => { e.preventDefault(); e.stopPropagation(); onSelect(product.id); }, "aria-label": isSelected ? "Deselect" : "Select", className: [
+                                    "flex h-6 w-6 items-center justify-center rounded-md border-2 shadow-sm transition-all duration-150 cursor-pointer",
+                                    isSelected
+                                        ? "bg-primary border-primary text-white opacity-100"
+                                        : "bg-white/90 dark:bg-slate-800/90 border-zinc-300 dark:border-slate-500",
+                                    selectionMode || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+                                ].join(" "), children: isSelected && (_jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2 6l3 3 5-5" }) })) })), !selectionMode && !isSelected && (_jsxs(_Fragment, { children: [discount && (_jsxs(Span, { className: "rounded-full bg-rose-500 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm", children: ["-", discount, "%"] })), typeBadge && (_jsx(Span, { className: `rounded-full px-2 py-0.5 text-[10px] font-bold shadow-sm ${typeBadge.cls}`, children: typeBadge.label }))] }))] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                             e.stopPropagation();
+                            e.preventDefault();
                             onAddToWishlist(product.id);
-                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 dark:bg-slate-800/90 text-neutral-600 dark:text-zinc-300 shadow transition hover:bg-white dark:hover:bg-slate-700 hover:text-red-500", children: isWishlisted ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col border-t border-zinc-200/80 bg-zinc-50 p-3 dark:border-slate-700/80 dark:bg-slate-900", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-950 dark:text-white`, children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-600 dark:text-zinc-400` })), (() => {
-                        const seller = safeDisplayName(product.sellerName, "");
-                        return seller ? (_jsxs(Text, { className: "mt-0.5 text-xs text-zinc-500 dark:text-zinc-400", children: ["by ", seller] })) : null;
-                    })(), _jsxs(Div, { className: "mt-2 flex items-baseline gap-2", children: [_jsx(Span, { className: "font-semibold text-zinc-950 dark:text-white", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && (_jsx(Span, { className: "text-xs text-zinc-500 line-through dark:text-zinc-400", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1", children: [_jsx(Span, { className: "text-xs text-yellow-500", children: "\u2605" }), _jsxs(Span, { className: "text-xs text-neutral-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), (onAddToCart || onBuyNow) && (_jsxs(Row, { className: "mt-3 gap-1.5", children: [onBuyNow && (_jsx(Button, { type: "button", onClick: (e) => {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    onBuyNow(product);
-                                }, className: "flex-1 rounded-lg bg-primary py-1.5 text-xs font-semibold text-white hover:bg-primary-600 transition-colors", children: "\u26A1 Buy Now" })), onAddToCart && (_jsx(Button, { type: "button", onClick: (e) => {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    onAddToCart(product);
-                                }, className: "flex-1 rounded-lg border border-primary py-1.5 text-xs font-semibold text-primary hover:bg-primary/5 transition-colors", children: "\uD83D\uDED2 Add to Cart" }))] }))] })] }));
-    if (href) {
+                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: [
+                            "absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full shadow-sm",
+                            "transition-all duration-150",
+                            isWishlisted
+                                ? "bg-rose-500 text-white hover:bg-rose-600"
+                                : "bg-white/90 dark:bg-slate-800/90 text-zinc-500 dark:text-zinc-400 hover:text-rose-500 hover:bg-white dark:hover:bg-slate-800",
+                        ].join(" "), children: _jsx("svg", { className: "h-4 w-4", fill: isWishlisted ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" }) }) }))] }), _jsxs(Div, { className: "flex flex-1 flex-col p-3 pt-2.5", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-900 dark:text-white leading-snug`, children: product.title }), (product.categoryName || product.brand) && (_jsxs(Row, { className: "mt-1 gap-1 flex-wrap", children: [product.categoryName && (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[90px]", children: product.categoryName })), product.brand && (_jsx(Span, { className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[80px]", children: product.brand }))] })), (() => {
+                        const seller = safeDisplayName(product.storeName, "");
+                        return seller ? (_jsxs(Text, { className: "mt-0.5 text-[11px] text-zinc-400 dark:text-zinc-500 truncate", children: ["by ", seller] })) : null;
+                    })(), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1 items-center", children: [_jsx(Span, { className: "text-[11px] text-amber-400", children: "\u2605" }), _jsxs(Span, { className: "text-[11px] text-zinc-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto pt-2", children: [_jsxs(Row, { className: "items-baseline gap-2", children: [_jsx(Span, { className: "text-base font-bold text-primary dark:text-primary-400", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && product.originalPrice > product.price && (_jsx(Span, { className: "text-xs text-zinc-400 line-through dark:text-zinc-500", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), (onAddToCart || onBuyNow) && (_jsxs(Div, { className: "mt-2 grid gap-1.5", style: { gridTemplateColumns: onBuyNow && onAddToCart ? "1fr 1fr" : "1fr" }, children: [onBuyNow && (_jsxs(Button, { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            onBuyNow(product);
+                                        }, className: "flex items-center justify-center gap-1 rounded-xl bg-primary py-2 text-xs font-semibold text-white hover:bg-primary/90 active:scale-[0.97] transition-all duration-150 btn-glow", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2.5, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) }), "Buy Now"] })), onAddToCart && (_jsxs(Button, { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            onAddToCart(product);
+                                        }, className: "flex items-center justify-center gap-1 rounded-xl border-2 border-primary/30 py-2 text-xs font-semibold text-primary hover:bg-primary/5 hover:border-primary/50 active:scale-[0.97] transition-all duration-150 dark:text-primary-400 dark:border-primary-400/30 dark:hover:bg-primary/10", children: [_jsx("svg", { className: "h-3.5 w-3.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 3h2l.4 2M7 13h10l4-8H5.4m1.6 8L5 3H3m4 10v7a1 1 0 001 1h8a1 1 0 001-1v-7M9 21h6" }) }), "Cart"] }))] }))] })] })] }));
+    if (href && !selectionMode) {
         return (_jsx(Link, { href: href, className: "block h-full", children: cardBody }));
     }
     return cardBody;
 }
 // --- Grid class maps ---------------------------------------------------------
 const GRID_CLASSES = {
-    card: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4",
+    card: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6",
 };
 function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
     const discount = product.originalPrice && product.originalPrice > product.price
@@ -46,18 +86,25 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
     return (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
             : undefined, onClick: onClick ? () => onClick(product) : undefined, className: [
-            "flex items-center gap-3 p-3 rounded-lg",
-            "border-b border-zinc-100 dark:border-zinc-800 last:border-0",
+            "flex items-center gap-3 p-2 sm:p-3",
             "hover:bg-zinc-50 dark:hover:bg-zinc-800/60 transition-colors",
             onClick ? "cursor-pointer" : "",
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { className: "flex-shrink-0 w-[72px] h-[72px] rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "w-full h-full bg-center bg-cover", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200 dark:bg-zinc-700" })) }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate text-sm font-medium text-neutral-900 dark:text-zinc-100", children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp1} text-xs text-neutral-500 dark:text-zinc-400` }))] }), product.categoryName && (_jsx(Span, { className: "hidden sm:block w-[110px] text-xs text-neutral-400 dark:text-zinc-500 truncate", children: product.categoryName })), product.rating !== undefined && (_jsxs(Span, { className: "hidden sm:flex w-[72px] items-center gap-0.5 text-xs text-neutral-500", children: [_jsx(Span, { className: "text-yellow-500", children: "\u2605" }), product.rating.toFixed(1)] })), _jsxs(Div, { className: "w-[80px] text-right flex-shrink-0", children: [_jsxs(Span, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: [getDefaultCurrencySymbol(), product.price.toLocaleString()] }), discount && (_jsxs(Span, { className: "block text-[10px] text-neutral-400 dark:text-zinc-500", children: ["-", discount, "%"] }))] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+            .join(" "), children: [_jsx(Div, { className: "flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200 dark:bg-zinc-700" })) }), _jsxs(Div, { className: "flex flex-1 flex-col min-w-0 gap-0.5", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900 dark:text-zinc-100`, children: product.title }), (product.categoryName || product.brand) && (_jsx(Span, { className: "text-[11px] text-zinc-400 dark:text-zinc-500 truncate", children: [product.categoryName, product.brand].filter(Boolean).join(" · ") })), _jsxs(Div, { className: "flex items-center gap-2 flex-wrap mt-0.5", children: [_jsx(Span, { className: "text-sm font-semibold text-primary", children: formatCurrency(product.price, getDefaultCurrency()) }), discount && (_jsxs(Span, { className: "text-[10px] font-bold text-rose-500", children: ["-", discount, "%"] })), product.rating !== undefined && (_jsxs(Span, { className: "text-[11px] text-zinc-400 dark:text-zinc-500 flex items-center gap-0.5", children: [_jsx(Span, { className: "text-amber-400", children: "\u2605" }), product.rating.toFixed(1)] }))] })] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                     e.stopPropagation();
                     onAddToWishlist(product.id);
-                }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "flex-shrink-0 w-[36px] h-[36px] flex items-center justify-center rounded-lg text-neutral-400 hover:text-red-500 transition-colors", children: isWishlisted ? "♥" : "♡" }))] }));
+                }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: `flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-full text-base leading-none ${isWishlisted ? "text-rose-500" : "text-zinc-300 dark:text-zinc-600 hover:text-rose-400"}`, children: isWishlisted ? "♥" : "♡" }))] }));
+}
+function safeHref(href) {
+    if (!href)
+        return undefined;
+    // drop any href that would navigate to a literal "/undefined" segment
+    if (href.includes("/undefined") || href.includes("/null"))
+        return undefined;
+    return href;
 }
-export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", }) {
+export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", selectionMode = false, selectedIds, onToggleSelect, }) {
     const isEmpty = products.length === 0;
     // Slot resolution: explicit props win over `slots` object
     const resolvedHeader = headerSlot ??
@@ -91,7 +138,7 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                     const cardRenderer = renderCard ?? slots?.renderCard;
                     return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                             ? renderCard(p, ctx)
-                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted }, p.id));
+                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect }, p.id));
                 }) }));
         }
         const gridClass = GRID_CLASSES.card;
@@ -106,7 +153,7 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                 const cardRenderer = renderCard ?? slots?.renderCard;
                 return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                         ? renderCard(p, ctx)
-                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted }, p.id));
+                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect }, p.id));
             }) }));
     };
     return (_jsxs(Div, { children: [resolvedHeader, isEmpty