@mohasinac/appkit 4.11.2 → 4.12.0

package/dist/features/auctions/components/AuctionDetailPageView.js

@@ -9,8 +9,6 @@ const __P = {
 };
 const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
 const CLS_LIVE_BADGE = "inline-block rounded-full bg-warning-surface dark:bg-warning-surface px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-warning dark:text-warning";
-const CLS_STAR_ON = "text-warning";
-const CLS_STAR_OFF = "text-zinc-200 dark:text-zinc-700";
 import { ROUTES } from "../../../next";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { formatCurrency } from "../../../utils/number.formatter";
@@ -30,7 +28,7 @@ import { FeatureBadgeList } from "../../products/components/FeatureBadge";
 import { HistoryTracker } from "../../history/components/HistoryTracker";
 import { ShareButton } from "../../products/components/ShareButton";
 import { MarketplaceAuctionGrid } from "./MarketplaceAuctionGrid";
-import { listReviewsBySeller } from "../../reviews/actions/review-actions";
+import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel";
 import { PlaceBidModalButton } from "./PlaceBidFormClient";
 import { CollapsibleBidHistory } from "./CollapsibleBidHistory";
 import { LiveBidPrice } from "./LiveBidPrice";
@@ -50,11 +48,18 @@ function renderAuctionInfoPanel(props) {
     const { productId, title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
     return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsx(LiveBidPrice, { productId: productId, currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "2xl", badgeSize: "sm" }), endDate && !isEnded && (_jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: ["Ends in ", _jsx(Span, { weight: "medium", color: "muted", children: _jsx(CountdownDisplay, { targetDate: endDate, format: "auto", expiredLabel: "Ended" }) })] })), endDate && _jsxs(Text, { className: "mt-0.5", color: "faint", size: "xs", children: [isEnded ? "Ended" : "Ends", " ", endDate.toLocaleString()] })] }), buyNowPrice !== null && !isEnded && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, labels: { featured: "Featured", fasterDelivery: "Faster Delivery", ratedSeller: "Rated Seller", condition: "Condition", conditionNew: "New", conditionUsed: "Used", conditionBroken: "For Parts", conditionRefurbished: "Refurbished", returnable: "Returnable", freeShipping: "Free Shipping", codAvailable: "Cash on Delivery", emiAvailable: "EMI Available", wishlistCount: (n) => `${n} wishlisted`, categoryProductCount: (n, cat) => `${n} in ${cat}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), brand && brandSlug && _jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand }), brand && !brandSlug && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand })] })), productFeatures && features.length > 0 && _jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures }), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this item" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => _jsxs(Li, { layout: "flex-start", gap: "2", 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-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" }), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Listed by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && _jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-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" })] }) }))] }));
 }
-function renderAuctionStoreReviews(storeReviews) {
-    if (storeReviews.length === 0)
+/**
+ * Store reviews for the auction's seller.
+ *
+ * Was a bespoke `slice(0, 10)` block over `listReviewsBySeller()` — which concatenates
+ * per-product batches, so the "latest 10" it showed were in product order, not date
+ * order, and reviews 11+ were unreachable. `ReviewsListingPanel` pages the real
+ * store-reviews endpoint instead.
+ */
+function renderAuctionStoreReviews(storeSlug) {
+    if (!storeSlug)
         return null;
-    const avg = storeReviews.reduce((s, r) => s + r.rating, 0) / storeReviews.length;
-    return (_jsxs(Section, { className: "mt-10", children: [_jsx(Heading, { level: 2, className: "mb-2", color: "primary", size: "xl", weight: "semibold", children: "Store Reviews" }), _jsxs(Row, { className: "mb-4", align: "center", gap: "3", children: [_jsx(Span, { weight: "bold", size: "3xl", color: "primary", children: avg.toFixed(1) }), _jsxs(Div, { children: [_jsx(Row, { gap: "xs", children: [1, 2, 3, 4, 5].map((star) => _jsx(Span, { className: star <= Math.round(avg) ? CLS_STAR_ON : CLS_STAR_OFF, children: "\u2605" }, star)) }), _jsxs(Text, { size: "xs", color: "muted", children: [storeReviews.length, " review", storeReviews.length !== 1 ? "s" : ""] })] })] }), _jsx(Stack, { gap: "sm", children: storeReviews.slice(0, 10).map((review) => (_jsxs(Stack, { gap: "xs", surface: "card", padding: "sm", className: "", children: [_jsx(Row, { justify: "between", align: "center", children: _jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Span, { size: "sm", weight: "medium", color: "primary", children: review.userName }), _jsx(Row, { gap: "xs", children: [1, 2, 3, 4, 5].map((star) => _jsx(Span, { size: "xs", className: star <= review.rating ? CLS_STAR_ON : CLS_STAR_OFF, children: "\u2605" }, star)) })] }) }), review.title && _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: review.title }), _jsx(Text, { className: "leading-relaxed", color: "muted", size: "sm", children: review.comment }), _jsx(Text, { size: "xs", color: "faint", children: review.productTitle })] }, review.id))) })] }));
+    return (_jsxs(Section, { className: "mt-10", children: [_jsx(Heading, { level: 2, className: "mb-2", color: "primary", size: "xl", weight: "semibold", children: "Store Reviews" }), _jsx(ReviewsListingPanel, { source: { kind: "store", storeSlug }, stateMode: "local", context: "store", emptyLabel: "This store has no reviews yet." })] }));
 }
 export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, onBuyNow, productFeatures }) {
     const product = initialAuction !== undefined
@@ -64,9 +69,6 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
         ? await listBidsByProduct(String(product.id), { pageSize: 5 }).catch(() => null)
         : null;
     const storeId = product?.storeId;
-    const storeReviews = storeId
-        ? await listReviewsBySeller(storeId).catch(() => [])
-        : [];
     if (!product) {
         return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "start", gap: "md", className: "text-left", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: "Auction Not Found" }), _jsx(Text, { color: "muted", children: "This auction may have ended or the link is incorrect." }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: "text-[length:var(--appkit-text-sm)] font-medium text-primary-600 hover:underline", children: "Browse Auctions" })] }) }) }) }));
     }
@@ -191,5 +193,5 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
                                 slug: typeof r.slug === "string" ? r.slug : undefined,
                             }));
                             return (_jsxs(Stack, { gap: "xl", children: [related.length > 0 && (_jsx(RelatedProducts, { labels: { title: "Similar Auctions" }, renderGrid: () => (_jsx(MarketplaceAuctionGrid, { auctions: related, gridClassName: "grid grid-cols-2 gap-[var(--appkit-space-4)] sm:grid-cols-3 lg:grid-cols-4" })) })), _jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: storeName || undefined })] }));
-                        } }), renderAuctionStoreReviews(storeReviews), _jsx(AuctionBottomActions, { currentBid: currentBid, currency: currency, bidCount: bidCount, isEnded: isEnded, auctionEndDate: endDate })] })] }));
+                        } }), renderAuctionStoreReviews(storeId), _jsx(AuctionBottomActions, { currentBid: currentBid, currency: currency, bidCount: bidCount, isEnded: isEnded, auctionEndDate: endDate })] })] }));
 }

package/dist/features/cart/components/CartDrawer.d.ts

@@ -7,8 +7,16 @@ interface CartItemRowProps {
     href?: string;
     /** When true: grays out item, shows "Out of Stock" badge, locks qty stepper */
     isOutOfStock?: boolean;
+    /**
+     * `"card"` (default) — self-contained card with its own surface + padding,
+     * for the cart drawer where each line stands alone.
+     * `"row"` — bare row for the cart page, where the seller group is already the
+     * card. Nesting a card inside a card there produced the card-in-a-card look
+     * and gave the overflow nowhere to be clipped.
+     */
+    variant?: "card" | "row";
 }
-export declare function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock }: CartItemRowProps): import("react").JSX.Element;
+export declare function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock, variant }: CartItemRowProps): import("react").JSX.Element;
 interface CartDrawerProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/features/cart/components/CartDrawer.js

@@ -13,11 +13,12 @@ const __O = {
     yAuto: "overflow-y-auto",
 };
 const CLS_REMOVE_BTN = "self-start text-[var(--appkit-color-text-faint)] transition hover:text-error";
-export function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock = false }) {
-    return (_jsxs(Div, { layout: "flex", gap: "4", surface: "card", padding: "sm", className: `transition-opacity ${isOutOfStock ? "opacity-60" : ""}`, children: [_jsx(Div, { surface: "muted", className: `relative h-20 w-20 flex-shrink-0 ${__O.hidden}`, rounded: "lg", children: item.meta.image && (_jsx(MediaImage, { src: item.meta.image, alt: item.meta.title, size: "thumbnail" })) }), _jsxs(Stack, { justify: "between", className: "flex-1 min-w-0", children: [_jsxs(Row, { gap: "xs", className: "", align: "start", children: [href ? (_jsx(TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", weight: "medium", className: "text-[var(--appkit-color-text)] hover:underline underline-offset-2 line-clamp-2", children: item.meta.title })) : (_jsx(Text, { truncate: 2, weight: "medium", color: "primary", children: item.meta.title })), isOutOfStock && (_jsx(Span, { padding: "pill-2xs", color: "error", surface: "danger-surface", weight: "semibold", className: "flex-shrink-0 text-[10px] tracking-wide", rounded: "default", transform: "uppercase", children: "Out of Stock" }))] }), item.meta.attributes &&
+export function CartItemRow({ item, onQtyChange, onRemove, href, isOutOfStock = false, variant = "card" }) {
+    const isRow = variant === "row";
+    return (_jsxs(Div, { layout: "flex", gap: isRow ? "3" : "4", surface: isRow ? "none" : "card", padding: isRow ? "none" : "sm", className: `min-w-0 transition-opacity ${isOutOfStock ? "opacity-60" : ""}`, children: [_jsx(Div, { surface: "muted", className: `relative ${isRow ? "h-16 w-16" : "h-20 w-20"} flex-shrink-0 ${__O.hidden}`, rounded: "lg", children: item.meta.image && (_jsx(MediaImage, { src: item.meta.image, alt: item.meta.title, size: "thumbnail" })) }), _jsxs(Stack, { justify: "between", className: "flex-1 min-w-0", children: [_jsxs(Row, { gap: "xs", className: "min-w-0", align: "start", children: [href ? (_jsx(TextLink, { href: href, target: "_blank", rel: "noopener noreferrer", weight: "medium", className: "text-[var(--appkit-color-text)] hover:underline underline-offset-2 line-clamp-2", children: item.meta.title })) : (_jsx(Text, { truncate: 2, weight: "medium", color: "primary", children: item.meta.title })), isOutOfStock && (_jsx(Span, { padding: "pill-2xs", color: "error", surface: "danger-surface", weight: "semibold", className: "flex-shrink-0 text-[10px] tracking-wide", rounded: "default", transform: "uppercase", children: "Out of Stock" }))] }), item.meta.attributes &&
                         Object.keys(item.meta.attributes).length > 0 && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", truncate: 1, children: Object.entries(item.meta.attributes)
                             .map(([k, v]) => `${k}: ${v}`)
-                            .join(", ") })), _jsxs(Row, { justify: "between", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: formatCurrency(item.meta.price * item.quantity, item.meta.currency) }), onQtyChange && !isOutOfStock && (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity - 1), disabled: item.quantity <= 1, variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)] disabled:opacity-40", children: "\u2212" }), _jsx(Span, { size: "sm", className: "min-w-[1.5rem]", align: "center", children: item.quantity }), _jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity + 1), variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)]", children: "+" })] })), isOutOfStock && (_jsxs(Span, { size: "xs", color: "muted", children: ["Qty: ", item.quantity] }))] })] }), onRemove && (_jsx(Button, { onClick: () => onRemove(item.id), variant: "ghost", size: "sm", "aria-label": ACTIONS.CART["remove-item"].ariaLabel, className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
+                            .join(", ") })), _jsxs(Row, { justify: "between", className: "min-w-0", gap: "sm", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: formatCurrency(item.meta.price * item.quantity, item.meta.currency) }), onQtyChange && !isOutOfStock && (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity - 1), disabled: item.quantity <= 1, variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)] disabled:opacity-40", children: "\u2212" }), _jsx(Span, { size: "sm", className: "min-w-[1.5rem]", align: "center", children: item.quantity }), _jsx(Button, { rounded: "full", onClick: () => onQtyChange(item.id, item.quantity + 1), variant: "outline", size: "sm", className: "h-7 w-7 justify-center border border-neutral-200 border-[var(--appkit-color-border)] text-[length:var(--appkit-text-sm)]", children: "+" })] })), isOutOfStock && (_jsxs(Span, { size: "xs", color: "muted", children: ["Qty: ", item.quantity] }))] })] }), onRemove && (_jsx(Button, { onClick: () => onRemove(item.id), variant: "ghost", size: "sm", "aria-label": ACTIONS.CART["remove-item"].ariaLabel, className: CLS_REMOVE_BTN, children: "\u2715" }))] }));
 }
 export function CartDrawer({ isOpen, onClose, items, subtotal = 0, currency, isLoading, onQtyChange, onRemove, onCheckout, labels = {}, }) {
     const { hand } = useHandMode();

package/dist/features/cart/components/CartPriceBreakdown.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+/**
+ * The aggregate price breakdown shown in the cart's expandable preview and in
+ * the checkout Order Summary.
+ *
+ * Deliberately flat: one line per fee type, with a `× N` qualifier on the fees
+ * that accumulate per store. The per-store detail lives on each seller card in
+ * the cart, where the store's items and its add-on checkboxes already are —
+ * repeating it here would make the panel a second, competing place to read the
+ * same numbers.
+ *
+ * Every figure comes from the server's pricing preview, which prices only the
+ * items actually selected for checkout. A deselected item contributes to no
+ * line, and a store with nothing selected forms no order group at all, so it
+ * contributes no shipping and no add-ons.
+ */
+/** Mirrors `CheckoutPricingPreviewStore` without importing server code. */
+export interface CartPriceBreakdownStore {
+    storeId: string;
+    storeName: string;
+    subtotal: number;
+    shippingFee: number;
+    codHandlingFee: number;
+    whatsappNotifyFee: number;
+    giftWrapFee: number;
+    shipmentProtectionFee: number;
+    gstAmount: number;
+    couponDiscount: number;
+    total: number;
+}
+/** Mirrors `CheckoutPricingPreview` without importing server code. */
+export interface CartPriceBreakdownData {
+    subtotal: number;
+    shippingFee: number;
+    codHandlingFee: number;
+    whatsappNotifyFee: number;
+    giftWrapFee: number;
+    shipmentProtectionFee: number;
+    gstAmount: number;
+    couponDiscount: number;
+    platformFee: number;
+    gstOnFee: number;
+    total: number;
+    stores: CartPriceBreakdownStore[];
+}
+export interface CartPriceBreakdownProps {
+    preview: CartPriceBreakdownData | null;
+    /** Number of items included — shown in the subtotal line so a deselection is visible. */
+    itemCount?: number;
+    currency?: string;
+    /**
+     * Shown instead of the fee lines when no server preview is available (a
+     * signed-out cart). The subtotal still renders from whatever is known.
+     */
+    unavailableNote?: React.ReactNode;
+    /** Subtotal to show when `preview` is null (guest carts). */
+    fallbackSubtotal?: number;
+    isLoading?: boolean;
+    className?: string;
+}
+export declare function CartPriceBreakdown({ preview, itemCount, currency, unavailableNote, fallbackSubtotal, isLoading, className, }: CartPriceBreakdownProps): React.JSX.Element;

package/dist/features/cart/components/CartPriceBreakdown.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Row, Stack, Text } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+function Line({ label, amount, tone = "muted", strong = false, }) {
+    return (_jsxs(Row, { align: "center", justify: "between", gap: "sm", className: "min-w-0", children: [_jsx(Text, { size: "sm", color: tone, weight: strong ? "semibold" : undefined, className: "min-w-0", truncate: 1, children: label }), _jsx(Text, { size: "sm", color: tone, weight: strong ? "semibold" : undefined, className: "flex-shrink-0 tabular-nums", children: amount })] }));
+}
+/** "Shipping (2 stores)" — only qualifies when more than one store contributes. */
+function withStoreCount(label, count) {
+    return count > 1 ? `${label} (${count} stores)` : label;
+}
+export function CartPriceBreakdown({ preview, itemCount, currency = "INR", unavailableNote, fallbackSubtotal = 0, isLoading = false, className = "", }) {
+    const money = (value) => formatCurrency(value, currency);
+    if (!preview) {
+        return (_jsxs(Stack, { gap: "xs", className: className, children: [_jsx(Line, { label: itemCount !== undefined ? `Subtotal (${itemCount} item${itemCount !== 1 ? "s" : ""})` : "Subtotal", amount: money(fallbackSubtotal) }), unavailableNote && (_jsx(Text, { size: "xs", color: "muted", children: unavailableNote }))] }));
+    }
+    const storeCount = preview.stores.length;
+    // Count how many stores are actually charged each per-store add-on, so the
+    // "× N" reads as the real multiplier rather than the store count.
+    const countCharged = (pick) => preview.stores.filter((s) => pick(s) > 0).length;
+    const subtotalLabel = itemCount !== undefined
+        ? `Subtotal (${itemCount} item${itemCount !== 1 ? "s" : ""}${storeCount > 1 ? `, ${storeCount} stores` : ""})`
+        : "Subtotal";
+    return (_jsxs(Stack, { gap: "xs", className: className, children: [_jsx(Line, { label: subtotalLabel, amount: money(preview.subtotal) }), preview.shippingFee > 0 && (_jsx(Line, { label: withStoreCount("Shipping", storeCount), amount: money(preview.shippingFee) })), preview.codHandlingFee > 0 && (_jsx(Line, { label: "COD handling fee", amount: money(preview.codHandlingFee) })), preview.whatsappNotifyFee > 0 && (_jsx(Line, { label: withStoreCount("WhatsApp updates", countCharged((s) => s.whatsappNotifyFee)), amount: money(preview.whatsappNotifyFee) })), preview.giftWrapFee > 0 && (_jsx(Line, { label: withStoreCount("Gift wrap", countCharged((s) => s.giftWrapFee)), amount: money(preview.giftWrapFee) })), preview.shipmentProtectionFee > 0 && (_jsx(Line, { label: withStoreCount("Shipment protection", countCharged((s) => s.shipmentProtectionFee)), amount: money(preview.shipmentProtectionFee) })), preview.platformFee > 0 && _jsx(Line, { label: "Platform fee", amount: money(preview.platformFee) }), (preview.gstAmount > 0 || preview.gstOnFee > 0) && (_jsx(Line, { label: "GST", amount: money(preview.gstAmount + preview.gstOnFee) })), preview.couponDiscount > 0 && (_jsx(Line, { label: "Coupon discount", amount: `−${money(preview.couponDiscount)}`, tone: "success" })), _jsx(Div, { border: "top-subtle", paddingY: "t-sm", children: _jsx(Line, { label: "Total", amount: money(preview.total), tone: "primary", strong: true }) }), isLoading && (_jsx(Text, { size: "xs", color: "muted", children: "Updating\u2026" }))] }));
+}

package/dist/features/cart/components/StoreAddonsPicker.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+/**
+ * Paid add-on checkboxes for ONE store.
+ *
+ * Add-on fees are billed per order group (= per store), so they are chosen per
+ * store: ticking "WhatsApp updates" for one seller must not bill it for every
+ * seller in the cart. Rendered inside that store's card in the cart, and inside
+ * that store's row of the checkout summary — Buy Now skips the cart entirely,
+ * so both surfaces have to be able to edit them.
+ */
+export interface StoreAddonsValue {
+    whatsappNotifyAddon?: boolean;
+    giftWrapAddon?: boolean;
+    giftWrapMessage?: string;
+    shipmentProtectionAddon?: boolean;
+}
+/** The subset of `siteSettings.commissions` that gates and prices the add-ons. */
+export interface StoreAddonsRates {
+    whatsappNotifyFeeEnabled?: boolean;
+    whatsappNotifyFee?: number;
+    giftWrapFeeEnabled?: boolean;
+    giftWrapFee?: number;
+    shipmentProtectionFeeEnabled?: boolean;
+    shipmentProtectionFeePercent?: number;
+    shipmentProtectionFeeMin?: number;
+}
+export interface StoreAddonsPickerProps {
+    storeId: string;
+    /** This store's subtotal — shipment protection is a percentage of it. */
+    storeSubtotal: number;
+    value: StoreAddonsValue;
+    onChange: (storeId: string, next: StoreAddonsValue) => void;
+    rates: StoreAddonsRates | null;
+    /**
+     * When true the controls render disabled with `disabledReason`. Used in the
+     * cart when none of this store's items are selected — the fees genuinely
+     * aren't being charged, and silently hiding the controls would read as the
+     * add-ons having vanished.
+     */
+    disabled?: boolean;
+    disabledReason?: string;
+    /** Gift messages don't belong in a collapsed cart sheet — checkout only. */
+    showGiftMessage?: boolean;
+    currency?: string;
+    className?: string;
+}
+export declare function StoreAddonsPicker({ storeId, storeSubtotal, value, onChange, rates, disabled, disabledReason, showGiftMessage, currency, className, }: StoreAddonsPickerProps): React.JSX.Element | null;

package/dist/features/cart/components/StoreAddonsPicker.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gift, MessageCircle, ShieldCheck } from "lucide-react";
+import { Div, Row, Stack, Text } from "../../../ui";
+import { IconBox } from "../../../ui/components/IconBox";
+import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
+import { FieldTextarea } from "../../../ui/forms/FieldTextarea";
+import { formatCurrency } from "../../../utils/number.formatter";
+export function StoreAddonsPicker({ storeId, storeSubtotal, value, onChange, rates, disabled = false, disabledReason, showGiftMessage = false, currency = "INR", className = "", }) {
+    const anyEnabled = !!rates &&
+        (rates.whatsappNotifyFeeEnabled ||
+            rates.giftWrapFeeEnabled ||
+            rates.shipmentProtectionFeeEnabled);
+    if (!anyEnabled)
+        return null;
+    const money = (value) => formatCurrency(value, currency);
+    const set = (patch) => onChange(storeId, { ...value, ...patch });
+    // Mirrors computeShipmentProtectionFee so the label states the real charge.
+    const protectionFee = Math.max(rates.shipmentProtectionFeeMin ?? 30, Math.round(storeSubtotal * ((rates.shipmentProtectionFeePercent ?? 2) / 100) * 100) / 100);
+    return (_jsxs(Stack, { gap: "xs", className: `min-w-0 ${className}`, children: [disabled && disabledReason && (_jsx(Text, { size: "xs", color: "muted", children: disabledReason })), rates.whatsappNotifyFeeEnabled && (_jsxs(Row, { gap: "sm", align: "start", className: "min-w-0", children: [_jsx(IconBox, { size: "sm", tone: "brand", children: _jsx(MessageCircle, { size: 14 }) }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(FieldCheckbox, { name: `whatsappNotifyAddon-${storeId}`, label: `WhatsApp order updates (+${money(rates.whatsappNotifyFee ?? 10)})`, checked: !!value.whatsappNotifyAddon, onChange: (checked) => set({ whatsappNotifyAddon: checked }), disabled: disabled }) })] })), rates.giftWrapFeeEnabled && (_jsxs(Row, { gap: "sm", align: "start", className: "min-w-0", children: [_jsx(IconBox, { size: "sm", tone: "brand", children: _jsx(Gift, { size: 14 }) }), _jsxs(Stack, { gap: "xs", className: "flex-1 min-w-0", children: [_jsx(FieldCheckbox, { name: `giftWrapAddon-${storeId}`, label: `Gift wrap (+${money(rates.giftWrapFee ?? 49)})`, checked: !!value.giftWrapAddon, onChange: (checked) => set({ giftWrapAddon: checked }), disabled: disabled }), showGiftMessage && value.giftWrapAddon && (_jsx(FieldTextarea, { name: `giftWrapMessage-${storeId}`, label: "Gift message (optional)", value: value.giftWrapMessage ?? "", onChange: (next) => set({ giftWrapMessage: next.slice(0, 500) }), rows: 2, maxLength: 500, showCharCount: true, placeholder: "Add a note for the recipient\u2026", disabled: disabled }))] })] })), rates.shipmentProtectionFeeEnabled && storeSubtotal > 0 && (_jsxs(Row, { gap: "sm", align: "start", className: "min-w-0", children: [_jsx(IconBox, { size: "sm", tone: "brand", children: _jsx(ShieldCheck, { size: 14 }) }), _jsx(Div, { className: "flex-1 min-w-0", children: _jsx(FieldCheckbox, { name: `shipmentProtectionAddon-${storeId}`, label: `Shipment protection (+${money(protectionFee)})`, checked: !!value.shipmentProtectionAddon, onChange: (checked) => set({ shipmentProtectionAddon: checked }), disabled: disabled }) })] }))] }));
+}

package/dist/features/cart/components/index.d.ts

@@ -3,6 +3,10 @@ export { CartView } from "./CartView";
 export type { CartViewProps, CartOrderGroup } from "./CartView";
 export { CartSummary } from "./CartSummary";
 export type { CartSummaryProps } from "./CartSummary";
+export { StoreAddonsPicker } from "./StoreAddonsPicker";
+export type { StoreAddonsPickerProps, StoreAddonsValue, StoreAddonsRates, } from "./StoreAddonsPicker";
+export { CartPriceBreakdown } from "./CartPriceBreakdown";
+export type { CartPriceBreakdownProps, CartPriceBreakdownData, CartPriceBreakdownStore, } from "./CartPriceBreakdown";
 export { CheckoutView } from "./CheckoutView";
 export type { CheckoutViewProps } from "./CheckoutView";
 export { CheckoutAddressStep } from "./CheckoutAddressStep";

package/dist/features/cart/components/index.js

@@ -1,6 +1,8 @@
 export { CartItemRow, CartDrawer } from "./CartDrawer";
 export { CartView } from "./CartView";
 export { CartSummary } from "./CartSummary";
+export { StoreAddonsPicker } from "./StoreAddonsPicker";
+export { CartPriceBreakdown } from "./CartPriceBreakdown";
 export { CheckoutView } from "./CheckoutView";
 export { CheckoutAddressStep } from "./CheckoutAddressStep";
 export { CheckoutSuccessView } from "./CheckoutSuccessView";

package/dist/features/cart/repository/cart.repository.d.ts

@@ -1,7 +1,7 @@
-import type { DocumentReference } from "firebase-admin/firestore";
+import { type DocumentReference } from "firebase-admin/firestore";
 import type { DocumentSnapshot } from "../../../providers/db-firebase";
 import { BaseRepository, type FirebaseSieveResult, type SieveModel } from "../../../providers/db-firebase";
-import { type AddToCartInput, type CartAppliedCoupon, type CartDocument, type CartItemDocument, type UpdateCartItemInput } from "../schemas";
+import { type AddToCartInput, type CartAppliedCoupon, type CartDocument, type CartStoreAddons, type CartItemDocument, type UpdateCartItemInput } from "../schemas";
 export declare class CartRepository extends BaseRepository<CartDocument> {
     private static readonly SIEVE_FIELDS;
     constructor();
@@ -45,6 +45,24 @@ export declare class CartRepository extends BaseRepository<CartDocument> {
     updateItemShipping(userId: string, itemId: string, providerId: string, fee: number): Promise<CartDocument>;
     clearAllCoupons(userId: string): Promise<void>;
     setSelectedItems(userId: string, itemIds: string[] | null): Promise<void>;
+    /**
+     * Set (or clear) one store's add-on selections.
+     *
+     * Scoped to a single storeId so two stores' selections can't clobber each
+     * other, and written with a dotted field path so a concurrent write to a
+     * different store merges rather than overwriting the whole map.
+     *
+     * Passing an empty selection deletes the entry outright instead of leaving
+     * `{}` behind — an all-false record and an absent record mean the same thing,
+     * and keeping both shapes around invites readers that handle only one.
+     */
+    setStoreAddons(userId: string, storeId: string, addons: CartStoreAddons | null): Promise<void>;
+    /**
+     * Drop a store's add-on entry once its last item leaves the cart, so the map
+     * doesn't accumulate orphans. Cosmetic — an orphan is already unreachable,
+     * because a store with no items forms no order group.
+     */
+    pruneStoreAddons(userId: string, keepStoreIds: string[]): Promise<void>;
     /**
      * Cloud Functions: return refs of stale carts not updated within TTL.
      */

package/dist/features/cart/repository/cart.repository.js

@@ -1,4 +1,5 @@
 import { randomUUID } from "crypto";
+import { FieldValue } from "firebase-admin/firestore";
 import { DatabaseError, NotFoundError, ValidationError } from "../../../errors";
 import { CART_FIELDS } from "../../../constants/field-names";
 import { normalizeError } from "../../../errors/normalize";
@@ -337,6 +338,54 @@ export class CartRepository extends BaseRepository {
             .doc(userId)
             .set({ selectedItemIds: itemIds ?? null, updatedAt: new Date() }, { merge: true });
     }
+    /**
+     * Set (or clear) one store's add-on selections.
+     *
+     * Scoped to a single storeId so two stores' selections can't clobber each
+     * other, and written with a dotted field path so a concurrent write to a
+     * different store merges rather than overwriting the whole map.
+     *
+     * Passing an empty selection deletes the entry outright instead of leaving
+     * `{}` behind — an all-false record and an absent record mean the same thing,
+     * and keeping both shapes around invites readers that handle only one.
+     */
+    async setStoreAddons(userId, storeId, addons) {
+        const isEmpty = !addons ||
+            (!addons.whatsappNotifyAddon &&
+                !addons.giftWrapAddon &&
+                !addons.shipmentProtectionAddon);
+        await this.db
+            .collection(this.collection)
+            .doc(userId)
+            .set({
+            storeAddons: {
+                [storeId]: isEmpty ? FieldValue.delete() : addons,
+            },
+            updatedAt: new Date(),
+        }, { merge: true });
+    }
+    /**
+     * Drop a store's add-on entry once its last item leaves the cart, so the map
+     * doesn't accumulate orphans. Cosmetic — an orphan is already unreachable,
+     * because a store with no items forms no order group.
+     */
+    async pruneStoreAddons(userId, keepStoreIds) {
+        const cart = await this.findByUserId(userId);
+        const existing = cart?.storeAddons;
+        if (!existing)
+            return;
+        const keep = new Set(keepStoreIds);
+        const stale = Object.keys(existing).filter((storeId) => !keep.has(storeId));
+        if (stale.length === 0)
+            return;
+        await this.db
+            .collection(this.collection)
+            .doc(userId)
+            .set({
+            storeAddons: Object.fromEntries(stale.map((storeId) => [storeId, FieldValue.delete()])),
+            updatedAt: new Date(),
+        }, { merge: true });
+    }
     /**
      * Cloud Functions: return refs of stale carts not updated within TTL.
      */

package/dist/features/cart/schemas/firestore.d.ts

@@ -82,8 +82,21 @@ export interface CartAppliedCoupon {
     storeId?: string;
     /** Item IDs (CartItemDocument.itemId) this coupon was calculated against */
     applicableItemIds?: string[];
-    /** Mirrors CouponDocument.restrictions.combineWithSellerCoupons — used for conflict detection when adding future coupons */
-    combineWithSellerCoupons?: boolean;
+}
+/**
+ * Paid add-ons the buyer opted into, for ONE store.
+ *
+ * Add-on fees have always been billed per order group (= per store) by
+ * `createOrderForGroup` / `previewCheckoutPricing`, but the selection used to be
+ * a single cart-wide boolean — so one tick on "WhatsApp updates" quietly billed
+ * ₹10 × every store in the cart, with no way to opt in for just one seller.
+ * Keying the selection by storeId makes the choice match the billing.
+ */
+export interface CartStoreAddons {
+    whatsappNotifyAddon?: boolean;
+    giftWrapAddon?: boolean;
+    giftWrapMessage?: string;
+    shipmentProtectionAddon?: boolean;
 }
 export interface CartDocument extends BaseDocument {
     userId: string;
@@ -92,6 +105,17 @@ export interface CartDocument extends BaseDocument {
     appliedCoupons?: CartAppliedCoupon[];
     /** Item IDs the user has selected for the next checkout (undefined = all items) */
     selectedItemIds?: string[];
+    /**
+     * Per-store add-on selections, keyed by `storeId` — the same key
+     * `splitCartIntoOrderGroups` groups on.
+     *
+     * This map is the source of truth for what gets charged; the checkout request
+     * no longer carries addon booleans. A store with no selected items forms no
+     * order group, so its entry is simply never read — that is what makes
+     * "only charge a store whose items are actually checking out" structural
+     * rather than a flag someone has to remember to check.
+     */
+    storeAddons?: Record<string, CartStoreAddons>;
 }
 export declare const CART_COLLECTION: "carts";
 export declare const CART_INDEXED_FIELDS: string[];

package/dist/features/categories/components/BrandDetailTabs.js

@@ -7,14 +7,35 @@ import { AuctionsIndexListing } from "../../products/components/AuctionsIndexLis
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
 import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing";
 import { CategoryBundlesListing } from "./CategoryBundlesListing";
-import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
+import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs";
+import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+/**
+ * Tab slug → listing/category type, derived (2026-08-21). The hand-written
+ * version covered 5 of 10 tabs, and this view's filter did `if (!mapping)
+ * return false` — so classifieds, digital codes, live items and art were
+ * silently DROPPED from every brand page rather than rendering blank (the
+ * failure mode its category-page twin had). Same root gap, opposite symptom.
+ *
+ * `stores` is intentionally absent: a brand has no store roster, which is the
+ * one real difference between this component and CategoryDetailTabs (see
+ * CLAUDE.md's Categories & Brands Reference on why the duplication stands).
+ */
 const TAB_TYPE_MAP = {
-    products: { kind: "listing", type: "standard" },
-    auctions: { kind: "listing", type: "auction" },
-    "pre-orders": { kind: "listing", type: "pre-order" },
-    "prize-draws": { kind: "listing", type: "prize-draw" },
+    ...Object.fromEntries(ALL_LISTING_TYPES.map((type) => [
+        pluginFor(type).tabSlug,
+        { kind: "listing", type },
+    ])),
     bundles: { kind: "category", type: "bundle" },
 };
+/** Listing types rendered by the shared products listing rather than a dedicated one. */
+const GENERIC_TAB_LISTING_TYPES = {
+    [pluginFor("standard").tabSlug]: ["standard"],
+    [pluginFor("classified").tabSlug]: ["classified"],
+    [pluginFor("digital-code").tabSlug]: ["digital-code"],
+    [pluginFor("live").tabSlug]: ["live"],
+    [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
+};
 export function BrandDetailTabs({ brandName, initialProductsData, initialBundles = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
     const countFor = (id) => {
         switch (id) {
@@ -28,11 +49,10 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
     };
     const visibleTabs = CATEGORY_PAGE_TABS.filter((t) => {
         const mapping = TAB_TYPE_MAP[t.id];
-        // This view only has content renderers for the 5 tab ids in
-        // TAB_TYPE_MAP (products/auctions/pre-orders/prize-draws/bundles) — any
-        // other CATEGORY_PAGE_TABS id (stores, classifieds, etc.) has no case in
-        // the render switch below and would show a blank tab, so exclude those
-        // here rather than rely on downstream JSX to silently render nothing.
+        // A tab with no mapping has no render branch below and would show a blank
+        // panel, so drop it here rather than let downstream JSX render nothing.
+        // Today that's only `stores` — a brand has no store roster. Every listing
+        // type IS mapped now (it used to also silently drop four real types).
         if (!mapping)
             return false;
         if (mapping.kind === "listing" && enabledListingTypes) {
@@ -49,5 +69,5 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
     const [activeTab, setActiveTab] = useState(firstTabId);
-    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: "", brandName: brandName, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { brandName: brandName })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { brandName: brandName })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { brandName: brandName })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles, brandName: brandName }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), GENERIC_TAB_LISTING_TYPES[activeTab] && (_jsx(CategoryProductsListing, { categorySlug: "", brandName: brandName, listingTypes: GENERIC_TAB_LISTING_TYPES[activeTab], initialData: activeTab === pluginFor("standard").tabSlug ? initialProductsData : undefined })), activeTab === pluginFor("auction").tabSlug && (_jsx(AuctionsIndexListing, { brandName: brandName })), activeTab === pluginFor("pre-order").tabSlug && (_jsx(PreOrdersIndexListing, { brandName: brandName })), activeTab === pluginFor("prize-draw").tabSlug && (_jsx(PrizeDrawsIndexListing, { brandName: brandName })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles, brandName: brandName }))] }));
 }

package/dist/features/categories/components/CategoryDetailTabs.js

@@ -8,16 +8,36 @@ import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersInde
 import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing";
 import { CategoryBundlesListing } from "./CategoryBundlesListing";
 import { CategoryStoresListing } from "./CategoryStoresListing";
-import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
-/** Maps CATEGORY_PAGE_TABS id → listing type / category type key for flag filtering. */
+import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs";
+import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
+import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
+/**
+ * Maps CATEGORY_PAGE_TABS id (a `tabSlug`) → listing type / category type key
+ * for feature-flag filtering.
+ *
+ * The listing-type half is DERIVED (2026-08-21). It used to be hand-written
+ * and covered only 6 of the 10 tabs — `classifieds`, `digital-codes`, `live`
+ * and `art` had no entry, so they skipped the flag check entirely AND (worse)
+ * had no render branch below, meaning all four rendered a tab you could click
+ * that showed an empty page.
+ */
 const TAB_TYPE_MAP = {
-    products: { kind: "listing", type: "standard" },
-    auctions: { kind: "listing", type: "auction" },
-    "pre-orders": { kind: "listing", type: "pre-order" },
-    "prize-draws": { kind: "listing", type: "prize-draw" },
+    ...Object.fromEntries(ALL_LISTING_TYPES.map((type) => [
+        pluginFor(type).tabSlug,
+        { kind: "listing", type },
+    ])),
     bundles: { kind: "category", type: "bundle" },
     stores: { kind: "entity", type: "stores" },
 };
+/** Listing types rendered by the shared products listing rather than a dedicated one. */
+const GENERIC_TAB_LISTING_TYPES = {
+    [pluginFor("standard").tabSlug]: ["standard"],
+    [pluginFor("classified").tabSlug]: ["classified"],
+    [pluginFor("digital-code").tabSlug]: ["digital-code"],
+    [pluginFor("live").tabSlug]: ["live"],
+    // The combined Art & Stickers tab spans both types under the `art` slug.
+    [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
+};
 export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
     const countFor = (id) => {
         switch (id) {
@@ -51,5 +71,5 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
     const [activeTab, setActiveTab] = useState(firstTabId);
-    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), activeTab === "products" && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, initialData: initialProductsData })), activeTab === "auctions" && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === "pre-orders" && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === "prize-draws" && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), GENERIC_TAB_LISTING_TYPES[activeTab] && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, listingTypes: GENERIC_TAB_LISTING_TYPES[activeTab], initialData: activeTab === pluginFor("standard").tabSlug ? initialProductsData : undefined })), activeTab === pluginFor("auction").tabSlug && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("pre-order").tabSlug && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("prize-draw").tabSlug && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
 }

package/dist/features/categories/components/CategoryProductsListing.d.ts

@@ -4,6 +4,14 @@ export interface CategoryProductsListingProps {
     categoryId?: string;
     /** Filter products by brand name (for brand detail pages) */
     brandName?: string;
+    /**
+     * Listing types this tab spans. Defaults to `["standard"]` — the original,
+     * only behaviour. Category/brand pages pass a single non-standard type (or
+     * the `["art","stickers"]` pair) so the classifieds / digital-codes / live /
+     * art tabs render real content instead of a blank panel: those four tabs
+     * existed in CATEGORY_PAGE_TABS but had no render branch at all.
+     */
+    listingTypes?: readonly string[];
     initialData?: any;
 }
-export declare function CategoryProductsListing({ categorySlug, categoryId, brandName, initialData, }: CategoryProductsListingProps): React.JSX.Element;
+export declare function CategoryProductsListing({ categorySlug, categoryId, brandName, listingTypes, initialData, }: CategoryProductsListingProps): React.JSX.Element;

package/dist/features/categories/components/CategoryProductsListing.js

@@ -27,7 +27,7 @@ function renderCategoryProductGrid(props) {
     }
     return (_jsx(ProductGrid, { products: products, getProductHref: getProductHref, view: view, emptyLabel: "No products found in this category.", onWishlistToggle: onWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: onAddToCart }));
 }
-export function CategoryProductsListing({ categorySlug, categoryId, brandName, initialData, }) {
+export function CategoryProductsListing({ categorySlug, categoryId, brandName, listingTypes = ["standard"], initialData, }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
     const { showToast } = useToast();
     const { requireAuth, modalOpen, modalMessage, closeModal } = useAuthGate();
@@ -48,7 +48,10 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, i
         sort: table.get("sort") || "-createdAt",
         page: table.getNumber("page", 1),
         perPage: table.getNumber("pageSize", 24),
-        listingType: "standard",
+        // Pipe-joined OR-group when the tab spans several types (art + stickers);
+        // sievejs parses it as a same-field OR and the Firebase adapter upgrades
+        // it to a `.where(…, "in", …)` query.
+        listingType: listingTypes.join("|"),
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
     const commitSearch = useCallback(() => {