@mohasinac/appkit 4.13.0 → 4.14.0

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

@@ -12,6 +12,10 @@ import { CategoryGrid } from "./CategoryGrid";
 import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection";
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsForBrand } from "../../../_internal/server/features/grouped/data";
+import { listingTabCounts, } from "../../../_internal/server/features/products/listing-tab-counts";
+import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
+import { enabledCategoryTypes, enabledListingTypes } from "../../../_internal/shared/listing-types/feature-flags";
+import { siteSettingsRepository } from "../../../repositories";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -20,7 +24,7 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         .getCategoryBySlug(slug)
         .catch(() => undefined)));
     const brandName = brand?.name;
-    const [productsResult, auctionsResult, preOrdersResult, prizeDrawsResult, allBundles, activeBrands, groupedListings] = await Promise.all([
+    const [productsResult, tabCounts, allBundles, activeBrands, groupedListings, settings] = await Promise.all([
         brandName
             ? productRepository
                 .list({
@@ -31,36 +35,12 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
             })
                 .catch(() => null)
             : Promise.resolve(null),
+        // One count per tab, derived from CATEGORY_PAGE_TABS. Four of the nine tabs
+        // (classifieds, digital codes, live, art) had no count at all and could
+        // therefore never hide, however empty the brand was.
         brandName
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("brand", SIEVE_OP.EQ, brandName), sieveFilter("listingType", SIEVE_OP.EQ, "auction")),
-                sorts: sortBy("auctionEndDate", "ASC"),
-                page: 1,
-                pageSize: 1,
-            })
-                .catch(() => null)
-            : Promise.resolve(null),
-        brandName
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("brand", SIEVE_OP.EQ, brandName), sieveFilter("listingType", SIEVE_OP.EQ, "pre-order")),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 1,
-            })
-                .catch(() => null)
-            : Promise.resolve(null),
-        brandName
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("brand", SIEVE_OP.EQ, brandName), sieveFilter("listingType", SIEVE_OP.EQ, "prize-draw")),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 1,
-            })
-                .catch(() => null)
-            : Promise.resolve(null),
+            ? listingTabCounts(CATEGORY_PAGE_TABS, { brandName })
+            : Promise.resolve({}),
         // SB-UNI-D — bundles are categoryType:"bundle" rows on the categories
         // collection, tagged to a brand via the real brandSlug field (added
         // 2026-08-21 — previously a fragile seo.keywords string-match heuristic).
@@ -74,6 +54,9 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         // Related brands — every other active brand row, excluding this one.
         categoriesRepository.findActiveBrands().catch(() => []),
         brand?.slug ? getGroupsForBrand(brand.slug).catch(() => []) : Promise.resolve([]),
+        // Feature flags — accepted by BrandDetailTabs all along but never passed,
+        // so a disabled listing type still showed its tab here.
+        siteSettingsRepository.findById("global").catch(() => null),
     ]);
     const brandBundles = brand?.slug
         ? allBundles.filter((b) => b.brandSlug === brand.slug)
@@ -85,17 +68,17 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
     // configured one. The value is consumed as `style={{ backgroundColor }}` so it
     // accepts both CSS vars and raw hex written by an admin.
     const brandColor = brand?.display?.color || "var(--appkit-color-primary)";
+    // Keyed by tabSlug. `bundles` is overridden with the brand-scoped figure —
+    // `listingTabCounts` cannot narrow bundles by brand (a bundle's brand lives on
+    // `brandSlug`, which this page already filters on locally).
     const counts = {
-        products: productsResult?.total ?? brand?.metrics?.productCount ?? 0,
-        auctions: auctionsResult?.total ?? brand?.metrics?.auctionCount ?? 0,
-        preOrders: preOrdersResult?.total ?? 0,
-        prizeDraws: prizeDrawsResult?.total ?? 0,
+        ...tabCounts,
+        products: tabCounts.products ?? brand?.metrics?.productCount ?? 0,
+        auctions: tabCounts.auctions ?? brand?.metrics?.auctionCount ?? 0,
         bundles: brandBundles.length,
     };
-    const totalItems = counts.products +
-        counts.auctions +
-        counts.preOrders +
-        counts.prizeDraws +
-        counts.bundles;
-    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(_Fragment, { children: [_jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mt-1 ${hasCover ? "/80" : ""}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [counts.products > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), counts.auctions > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), counts.preOrders > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.preOrders.toLocaleString(), " ", counts.preOrders === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), (brand?.brandWebsite || brand?.brandCountry || brand?.brandFounded) && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "sm", weight: "semibold", color: "muted", transform: "uppercase", children: "About this brand" }), _jsxs(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden max-w-lg", children: [brand?.brandWebsite && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Website" }), _jsx(Dd, { className: "flex-1", children: _jsx(Anchor, { href: brand.brandWebsite, tone: "brand", underline: "hover", children: brand.brandWebsite }) })] })), brand?.brandCountry && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Country" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandCountry })] })), brand?.brandFounded && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Founded" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandFounded })] }))] })] }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: brand?.highlights, faqs: brand?.faqs }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "Brand not found." })) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedBrands.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Brands" }), _jsx(CategoryGrid, { categories: relatedBrands, getHref: (b) => String(ROUTES.PUBLIC.BRAND_DETAIL(b.slug)) })] }) }))] }));
+    // Header total — `?? 0` is right here (a pill just doesn't render), unlike the
+    // tab bar where an unknown count must keep its tab visible.
+    const totalItems = Object.values(counts).reduce((sum, n) => sum + (n ?? 0), 0);
+    return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(_Fragment, { children: [_jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mt-1 ${hasCover ? "/80" : ""}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [(counts.products ?? 0) > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: `${hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400"}`, rounded: "full", padding: "pill-sm-tall", children: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), (counts.auctions ?? 0) > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), (counts["pre-orders"] ?? 0) > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [counts["pre-orders"].toLocaleString(), " ", counts["pre-orders"] === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), (brand?.brandWebsite || brand?.brandCountry || brand?.brandFounded) && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "sm", weight: "semibold", color: "muted", transform: "uppercase", children: "About this brand" }), _jsxs(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden max-w-lg", children: [brand?.brandWebsite && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Website" }), _jsx(Dd, { className: "flex-1", children: _jsx(Anchor, { href: brand.brandWebsite, tone: "brand", underline: "hover", children: brand.brandWebsite }) })] })), brand?.brandCountry && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Country" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandCountry })] })), brand?.brandFounded && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Founded" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandFounded })] }))] })] }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: brand?.highlights, faqs: brand?.faqs }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "Brand not found." })) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedBrands.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Brands" }), _jsx(CategoryGrid, { categories: relatedBrands, getHref: (b) => String(ROUTES.PUBLIC.BRAND_DETAIL(b.slug)) })] }) }))] }));
 }

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

@@ -4,13 +4,13 @@ export interface BrandDetailTabsProps {
     brandName: string;
     initialProductsData?: any;
     initialBundles?: CategoryDocument[];
-    counts?: {
-        products?: number;
-        auctions?: number;
-        preOrders?: number;
-        prizeDraws?: number;
-        bundles?: number;
-    };
+    /**
+     * tabSlug -> row count. `undefined` means the count could not be resolved,
+     * NOT zero — such a tab stays visible so a failed query can never hide real
+     * inventory (Root Cause #59). Keyed by tab id; the previous hand-named shape
+     * covered only 5 of 9 tabs (Root Cause #61).
+     */
+    counts?: Record<string, number | undefined>;
     /** Enabled listing types (e.g. ["standard","auction"]). When omitted, all tabs shown. */
     enabledListingTypes?: string[];
     /** Enabled category types (e.g. ["category","brand","bundle"]). When omitted, all tabs shown. */

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "../../../ui";
+import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
@@ -37,16 +37,7 @@ const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
 };
 export function BrandDetailTabs({ brandName, initialProductsData, initialBundles = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
-    const countFor = (id) => {
-        switch (id) {
-            case "products": return counts?.products;
-            case "auctions": return counts?.auctions;
-            case "pre-orders": return counts?.preOrders;
-            case "prize-draws": return counts?.prizeDraws;
-            case "bundles": return counts?.bundles;
-            default: return undefined;
-        }
-    };
+    const countFor = (id) => counts?.[id];
     const visibleTabs = CATEGORY_PAGE_TABS.filter((t) => {
         const mapping = TAB_TYPE_MAP[t.id];
         // A tab with no mapping has no render branch below and would show a blank
@@ -63,11 +54,16 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
             if (!enabledCategoryTypes.includes(mapping.type))
                 return false;
         }
-        // Hide a tab only when its count is known and explicitly zero.
+        // Hide a tab only when its count is known and explicitly zero. `undefined`
+        // now means the count query FAILED (every tab is counted), so the tab stays
+        // visible rather than hiding real listings behind a swallowed error.
         const count = countFor(t.id);
         return count === undefined || count > 0;
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
     const [activeTab, setActiveTab] = useState(firstTabId);
+    if (visibleTabs.length === 0) {
+        return (_jsx(EmptyState, { title: "Nothing listed here yet", description: "This brand has no active listings right now. Check back soon." }));
+    }
     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/BundleCollage.js

@@ -43,7 +43,7 @@ export function BundleCollage({ members, onItemClick }) {
     return (_jsxs(_Fragment, { children: [_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", children: members.map((p, idx) => {
                     const cover = p.mainImage ?? p.images?.[0];
                     const href = String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? p.id) ?? "#");
-                    return (_jsxs(Div, { className: "group relative overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] transition-transform hover:scale-[1.01]", rounded: "lg", children: [_jsxs(Button, { variant: "ghost", type: "button", onClick: makeBundleItemClickHandler(p, idx, onItemClick, setLightboxIndex), paddingX: "none", paddingY: "none", rounded: "none", className: "relative block aspect-square w-full overflow-hidden focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)]", "aria-label": `View ${p.title} in lightbox`, children: [cover ? (_jsx(MediaImage, { src: cover, alt: p.title, size: "card", className: "transition-transform group-hover:scale-105" })) : (_jsx(Row, { textSize: "3xl", surface: "muted", className: "absolute inset-0", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })), _jsxs(Div, { textWeight: "semibold", textSize: "xs", surface: "overlay-xl", padding: "chip-2xs", className: "absolute left-2 top-2 text-white", rounded: "default", children: ["#", idx + 1] })] }), _jsxs(Div, { padding: "xs", children: [_jsx(Link, { href: href, className: "line-clamp-2 text-[length:var(--appkit-text-sm)] font-medium hover:underline", children: p.title }), _jsx(Text, { className: "mt-0.5 text-[var(--appkit-color-text-muted)]", size: "xs", children: formatCurrency(p.price ?? 0, p.currency ?? "INR") })] })] }, p.id));
+                    return (_jsxs(Div, { layout: "flex-col", className: "group relative overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] transition-transform hover:scale-[1.01]", rounded: "lg", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: makeBundleItemClickHandler(p, idx, onItemClick, setLightboxIndex), paddingX: "none", paddingY: "none", rounded: "none", className: "relative aspect-square w-full overflow-hidden focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)]", "aria-label": `View ${p.title} in lightbox`, children: _jsxs(Div, { className: "relative aspect-square w-full", children: [cover ? (_jsx(MediaImage, { src: cover, alt: p.title, size: "card", className: "transition-transform group-hover:scale-105" })) : (_jsx(Row, { textSize: "3xl", surface: "muted", className: "absolute inset-0", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })), _jsxs(Div, { textWeight: "semibold", textSize: "xs", surface: "overlay-xl", padding: "chip-2xs", className: "absolute left-2 top-2 text-white", rounded: "default", children: ["#", idx + 1] })] }) }), _jsxs(Div, { padding: "xs", children: [_jsx(Link, { href: href, className: "line-clamp-2 text-[length:var(--appkit-text-sm)] font-medium hover:underline", children: p.title }), _jsx(Text, { className: "mt-0.5 text-[var(--appkit-color-text-muted)]", size: "xs", children: formatCurrency(p.price ?? 0, p.currency ?? "INR") })] })] }, p.id));
                 }) }), _jsx(ImageLightbox, { images: galleryImages, activeIndex: lightboxIndex, onClose: () => setLightboxIndex(null), onNavigate: (i) => setLightboxIndex(i), showThumbnails: true })] }));
 }
 export default BundleCollage;

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

@@ -11,6 +11,10 @@ import { CategoryGrid } from "./CategoryGrid";
 import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection";
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsForCategory } from "../../../_internal/server/features/grouped/data";
+import { listingTabCounts, } from "../../../_internal/server/features/products/listing-tab-counts";
+import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs";
+import { enabledCategoryTypes, enabledListingTypes } from "../../../_internal/shared/listing-types/feature-flags";
+import { siteSettingsRepository } from "../../../repositories";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
@@ -19,16 +23,15 @@ export async function CategoryDetailPageView({ slug }) {
     const category = await categoriesRepository
         .getCategoryBySlug(slug)
         .catch(() => undefined);
-    // Roll up descendant categories so a parent category page shows products
-    // filed under any of its children too, not just products tagged with the
-    // parent's own id — parentIds stores the full ancestor chain, so a single
-    // array-contains query already returns the whole subtree (see
-    // categoriesRepository.getDescendantIds).
-    const descendantIds = category?.id
-        ? await categoriesRepository.getDescendantIds(category.id).catch(() => [])
-        : [];
-    const categoriesIn = category?.id ? [category.id, ...descendantIds] : null;
-    const [productsResult, auctionsCountResult, preOrdersCountResult, prizeDrawsCountResult, bundlesResult, childCategories, rootSiblingCategories, groupedListings] = await Promise.all([
+    // Products carry their FULL ancestor chain in `categorySlugs`, so matching on
+    // this category's own id already returns the whole subtree — no descendant
+    // expansion needed. Expanding it was also a latent outage: `categoriesIn` is
+    // applied as `array-contains-any`, which Firestore caps at 30 values, and
+    // every caller here wraps the query in `.catch(() => null)` — so a category
+    // tree deeper than a couple of levels would have turned into a silently blank
+    // page rather than an error (Root Cause #59).
+    const categoriesIn = category?.id ? [category.id] : null;
+    const [productsResult, tabCounts, bundlesResult, childCategories, rootSiblingCategories, groupedListings, settings] = await Promise.all([
         categoriesIn
             ? productRepository
                 .list({
@@ -39,36 +42,12 @@ export async function CategoryDetailPageView({ slug }) {
             }, { categoriesIn })
                 .catch(() => null)
             : Promise.resolve(null),
+        // One count per tab, derived from CATEGORY_PAGE_TABS itself — so every
+        // listing type is counted and a type with nothing in this category hides.
+        // Four of the ten tabs used to have no count at all and could never hide.
         categoriesIn
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "auction")),
-                sorts: sortBy("auctionEndDate", "ASC"),
-                page: 1,
-                pageSize: 1,
-            }, { categoriesIn })
-                .catch(() => null)
-            : Promise.resolve(null),
-        categoriesIn
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "pre-order")),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 1,
-            }, { categoriesIn })
-                .catch(() => null)
-            : Promise.resolve(null),
-        categoriesIn
-            ? productRepository
-                .list({
-                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "prize-draw")),
-                sorts: sortBy("createdAt", "DESC"),
-                page: 1,
-                pageSize: 1,
-            }, { categoriesIn })
-                .catch(() => null)
-            : Promise.resolve(null),
+            ? listingTabCounts(CATEGORY_PAGE_TABS, { categoriesIn })
+            : Promise.resolve({}),
         // SB-UNI-D — bundles fetched from the categories collection. We pull
         // all active bundle rows; the carousel filters by category affinity.
         categoriesIn
@@ -86,15 +65,34 @@ export async function CategoryDetailPageView({ slug }) {
             ? categoriesRepository.getCategoriesByRootId(category.rootId).catch(() => [])
             : Promise.resolve([]),
         category?.slug ? getGroupsForCategory(category.slug).catch(() => []) : Promise.resolve([]),
+        // Listing/category-type feature flags. This page accepted the props all
+        // along but never passed them, so an admin disabling a listing type still
+        // saw its tab here while the store page correctly hid it.
+        siteSettingsRepository.findById("global").catch(() => null),
     ]);
     const relatedCategories = rootSiblingCategories.filter((c) => c.id !== category?.id && (!c.categoryType || c.categoryType === "category"));
-    // Stores tab — query stores whose storeCategory matches this category or any child
+    // Stores tab — stores whose storeCategory is this category or ANY descendant.
+    //
+    // `storeCategory` is a single slug with no ancestor chain (unlike a product's
+    // categorySlugs), so the descendant list genuinely is needed here. It used to
+    // use direct children only, which meant a store filed under a tier-3 category
+    // was invisible on its root's Stores tab, and it issued one query per slug —
+    // an unbounded N+1. Both are fixed by pipe-joining the slugs into OR-groups:
+    // the enhanced Sieve adapter turns a same-field OR into a Firestore `in`,
+    // which caps at 30 values, hence the chunking.
     const storeCategorySlugs = [
         slug,
-        ...childCategories.map((c) => c.slug).filter(Boolean),
-    ];
-    const storeResults = await Promise.all(storeCategorySlugs.map((catSlug) => storeRepository
-        .listStores({ filters: sieveFilter("storeCategory", SIEVE_OP.EQ, catSlug), page: 1, pageSize: 50 }, true)
+        ...(await categoriesRepository
+            .getDescendantIds(category?.id ?? "")
+            .catch(() => [])),
+    ].filter(Boolean);
+    const SLUG_CHUNK = 30;
+    const slugChunks = [];
+    for (let i = 0; i < storeCategorySlugs.length; i += SLUG_CHUNK) {
+        slugChunks.push(storeCategorySlugs.slice(i, i + SLUG_CHUNK));
+    }
+    const storeResults = await Promise.all(slugChunks.map((chunk) => storeRepository
+        .listStores({ filters: sieveFilter("storeCategory", SIEVE_OP.EQ, chunk.join("|")), page: 1, pageSize: 50 }, true)
         .catch(() => null)));
     const seen = new Set();
     const categoryStores = storeResults
@@ -122,22 +120,20 @@ export async function CategoryDetailPageView({ slug }) {
         averageRating: s.stats?.averageRating,
         createdAt: s.createdAt,
     }));
-    const productCount = productsResult?.total ?? category?.metrics?.totalProductCount ?? category?.metrics?.productCount ?? 0;
-    const auctionCount = auctionsCountResult?.total ?? category?.metrics?.totalAuctionCount ?? category?.metrics?.auctionCount ?? 0;
-    const preOrderCount = preOrdersCountResult?.total ?? 0;
-    const prizeDrawCount = prizeDrawsCountResult?.total ?? 0;
-    const bundleCount = bundlesResult?.length ?? 0;
     const storeCount = categoryStores.length;
+    // `tabCounts` is keyed by tabSlug and already covers every listing type plus
+    // bundles; `stores` is added here because this page resolves its store list
+    // eagerly to render the tab body anyway.
+    const counts = { ...tabCounts, stores: storeCount };
+    // Header pills read the same numbers the tabs do. `?? 0` is safe here (a pill
+    // simply doesn't render) — unlike the tab bar, where an unknown count must
+    // stay visible rather than collapse to "hide me".
+    const productCount = counts.products ?? category?.metrics?.totalProductCount ?? category?.metrics?.productCount ?? 0;
+    const auctionCount = counts.auctions ?? category?.metrics?.totalAuctionCount ?? category?.metrics?.auctionCount ?? 0;
+    const preOrderCount = counts["pre-orders"] ?? 0;
     const coverImage = category?.display?.coverImage;
     const hasCover = Boolean(coverImage);
     return (_jsxs(Main, { children: [_jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORIES), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 transition-colors", children: "Categories" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: category?.name ?? slug })] }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: "max-w-7xl mx-auto", padding: "inline", children: _jsx(Div, { layout: "flex", gap: "2", className: `.5 ${__O.xAuto} [scrollbar-width:none]`, padding: "b-2xs", children: childCategories.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), 
                             // audit-responsive-wrap-ok: deliberate horizontal-scroll chip row (parent has overflow-x-auto) — each chip staying single-line is the intended design, not hidden content
-                            className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1-5)] rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] px-[var(--appkit-space-4)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", color: "muted", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: {
-                            products: productCount,
-                            auctions: auctionCount,
-                            preOrders: preOrderCount,
-                            prizeDraws: prizeDrawCount,
-                            bundles: bundleCount,
-                            stores: storeCount,
-                        } }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
+                            className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1-5)] rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] px-[var(--appkit-space-4)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", color: "muted", children: (child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) }) }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: counts, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
 }

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

@@ -7,14 +7,16 @@ export interface CategoryDetailTabsProps {
     initialProductsData?: any;
     initialBundles?: CategoryDocument[];
     initialStores?: StoreListItem[];
-    counts?: {
-        products?: number;
-        auctions?: number;
-        preOrders?: number;
-        prizeDraws?: number;
-        bundles?: number;
-        stores?: number;
-    };
+    /**
+     * tabSlug -> row count. `undefined` means the count could not be resolved,
+     * NOT zero — such a tab stays visible so a failed query can never hide real
+     * inventory (Root Cause #59).
+     *
+     * Keyed by tab id rather than by hand-named properties: the previous shape
+     * named only 6 of the 10 tabs, so classifieds / digital-codes / live / art
+     * were structurally uncountable and could never hide (Root Cause #61).
+     */
+    counts?: Record<string, number | undefined>;
     /** Enabled listing types (e.g. ["standard","auction","pre-order"]). When omitted, all tabs shown. */
     enabledListingTypes?: string[];
     /** Enabled category types (e.g. ["category","brand","bundle"]). When omitted, all tabs shown. */

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "../../../ui";
+import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui";
 import { CategoryProductsListing } from "./CategoryProductsListing";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing";
@@ -39,17 +39,7 @@ const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
 };
 export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
-    const countFor = (id) => {
-        switch (id) {
-            case "products": return counts?.products;
-            case "auctions": return counts?.auctions;
-            case "pre-orders": return counts?.preOrders;
-            case "prize-draws": return counts?.prizeDraws;
-            case "bundles": return counts?.bundles;
-            case "stores": return counts?.stores;
-            default: return undefined;
-        }
-    };
+    const countFor = (id) => counts?.[id];
     const visibleTabs = CATEGORY_PAGE_TABS.filter((t) => {
         const mapping = TAB_TYPE_MAP[t.id];
         if (mapping) {
@@ -62,14 +52,19 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
                     return false;
             }
         }
-        // Hide a tab only when its count is known and explicitly zero — a tab
-        // whose count was never fetched (undefined) stays visible so we don't
-        // silently hide a listing type this page hasn't wired count-tracking
-        // for yet.
+        // Hide a tab only when its count is known and explicitly zero. `undefined`
+        // now means the count query FAILED (every tab is counted), so keeping it
+        // visible is the fail-open choice: an empty tab is a far smaller error than
+        // hiding a tab that holds real listings.
         const count = countFor(t.id);
         return count === undefined || count > 0;
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
     const [activeTab, setActiveTab] = useState(firstTabId);
+    // Every tab counted zero — render the empty state rather than an empty tab
+    // strip with no body beneath it.
+    if (visibleTabs.length === 0) {
+        return (_jsx(EmptyState, { title: "Nothing listed here yet", description: "This category has no active listings right now. Check back soon." }));
+    }
     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.js

@@ -13,6 +13,9 @@ import { ProductFilters, PRODUCT_PUBLIC_SORT_OPTIONS } from "../../products/comp
 import { useGuestCart } from "../../cart/hooks/useGuestCart";
 import { useGuestWishlist } from "../../wishlist/hooks/useGuestWishlist";
 import { pushCartOp, pushWishlistOp } from "../../cart/utils/pending-ops";
+import { AvailabilityTabs } from "../../products/components/AvailabilityTabs";
+import { AVAILABILITY_VALUES } from "../../../constants/field-names";
+import { TABLE_KEYS } from "../../../constants/table-keys";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -38,6 +41,12 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
     const localWishlist = useGuestWishlist();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "product").map((i) => i.itemId));
     const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    // Absent means "available" — the same default `listStoreProducts`
+    // resolves server-side. These six store tabs sent NO availability
+    // param at all until 2026-08-24, while their SSR fetch did apply one,
+    // so any client refetch silently widened the list (Root Cause #30).
+    const availability = table.get(TABLE_KEYS.AVAILABILITY) ||
+        AVAILABILITY_VALUES.AVAILABLE;
     const params = {
         q: table.get("q") || undefined,
         category: categoryId || undefined,
@@ -52,6 +61,7 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
         // sievejs parses it as a same-field OR and the Firebase adapter upgrades
         // it to a `.where(…, "in", …)` query.
         listingType: listingTypes.join("|"),
+        availability,
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
     const commitSearch = useCallback(() => {
@@ -106,7 +116,7 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
     }, [localCart, showToast]);
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: PRODUCT_PUBLIC_SORT_OPTIONS, onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: listingTypes }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
                     isLoading, products: products, view,
                     getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)),
                     onWishlistToggle: handleWishlistToggle, wishlistedIds, onAddToCart: handleAddToCart,

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

@@ -2,5 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 export function ConcernCard({ concern, onClick, className = "", }) {
-    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), className: `group flex flex-col items-center gap-[var(--appkit-space-3)] rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-[var(--appkit-space-4)] text-left shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { className: "relative h-16 w-16", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: concern.display.coverImage, alt: concern.name, size: "thumbnail" }) })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
+    return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), 
+        // No bare `flex` here: globals.css declares `.flex` un-layered + !important,
+        // which overrides `.appkit-button`'s own display. It is redundant anyway —
+        // the button is already a flex container. `flex-col items-center` now
+        // actually reaches the icon and label, which have been rendering
+        // side-by-side since the ripple wrapper landed (Root Cause #68).
+        className: `group flex-col items-center gap-[var(--appkit-space-3)] rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-[var(--appkit-space-4)] text-left shadow-sm transition hover:border-primary dark:hover:border-primary-400 hover:shadow-md ${className}`, children: [concern.display?.coverImage && (_jsx(Div, { className: "relative h-16 w-16", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: concern.display.coverImage, alt: concern.name, size: "thumbnail" }) })), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] group-hover:text-primary dark:group-hover:text-primary-400", size: "sm", weight: "semibold", children: concern.name }), concern.description && (_jsx(Text, { className: `mt-1`, color: "muted", truncate: 2, size: "xs", children: concern.description }))] })] }));
 }

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

@@ -162,6 +162,19 @@ export interface CategoryDocument extends BaseDocument {
     bundleQueryResolvedAt?: Date;
     /** Hand-picked products list (mirror of bundleQueryRule for static rules); kept for index-friendly queries. */
     bundleProductIds?: string[];
+    /**
+     * Categories this bundle belongs to — the union of its member products'
+     * `categorySlugs`. A bundle row has no category of its own, so without this
+     * the category page could not scope its Bundles tab at all and counted every
+     * active bundle site-wide.
+     *
+     * Denormalised at bundle create/update time and refreshed by the daily bundle
+     * stock sync. Per Root Cause #42 a mirror is never trusted alone: readers
+     * treat an ABSENT mirror as "unscoped" (show it) rather than "belongs to no
+     * category" (hide it), so a write path that forgets to set it degrades to
+     * over-inclusion instead of silently losing the bundle.
+     */
+    bundleCategorySlugs?: string[];
     /**
      * Sum of member products' individual prices (decimal rupees) — the "buy
      * separately" total the discount badge is measured against. Denormalised