@mohasinac/appkit 4.53.0 → 4.53.2

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

@@ -162,10 +162,33 @@ export class CartRepository extends BaseRepository {
      * subtotals all compute `price × quantity`, and a grouped line pins
      * `quantity` to 1, so all four stay correct with no changes of their own.
      */
-    deriveLinePrice(members) {
+    deriveLinePrice(members, discountPercent) {
         const raw = members.reduce((sum, m) => sum + m.unitPrice * m.quantity, 0);
+        /*
+         * 🛑 THE GROUP DISCOUNT IS APPLIED HERE AND NOWHERE ELSE.
+         *
+         * This function is the only writer of `item.price` on a multi-member line,
+         * and `item.price` is what `getSubtotal`, the cart page's per-seller
+         * subtotal, both lane subtotals, `unitPriceFor` and
+         * `expandCartLineToOrderRows`' per-member GST proration (via
+         * `allocateAcrossMembers`) all read. So discounting here reaches every one
+         * of them with no change of their own — and discounting anywhere else means
+         * the cart total and the invoice are computed from two different numbers,
+         * which is exactly what Root Cause #75 cost.
+         *
+         * In particular `allocateAcrossMembers` prorates the LOCKED line price
+         * across members for tax, so a discount applied after it would under- or
+         * over-report GST against the amount actually charged.
+         *
+         * Clamped 0–100 rather than trusted: the percent is a snapshot copied off a
+         * seller-editable rule, and a negative value would silently INFLATE the
+         * line while a value over 100 would make it negative.
+         */
+        const pct = Math.min(100, Math.max(0, discountPercent ?? 0));
+        // audit-money-units-ok: pct/100 is a PERCENTAGE divisor (0-100 -> 0-1 fraction), not a paise conversion — raw/discounted are decimal rupees throughout.
+        const discounted = pct > 0 ? raw * (1 - pct / 100) : raw;
         // audit-money-units-ok: decimal rupees throughout; rounding to 2dp, not paise conversion.
-        return Math.round(raw * 100) / 100;
+        return Math.round(discounted * 100) / 100;
     }
     /**
      * Create a multi-member line. Deliberately never merges into an existing
@@ -182,7 +205,7 @@ export class CartRepository extends BaseRepository {
                 productId: input.productId,
                 productTitle: input.productTitle,
                 productImage: input.productImage,
-                price: this.deriveLinePrice(input.groupMembers),
+                price: this.deriveLinePrice(input.groupMembers, input.groupDiscountPercent),
                 currency: input.currency,
                 quantity: input.quantity,
                 storeId: input.storeId,
@@ -264,7 +287,12 @@ export class CartRepository extends BaseRepository {
             items[itemIndex] = {
                 ...target,
                 groupMembers: nextMembers,
-                price: this.deriveLinePrice(nextMembers),
+                /*
+                 * The line's OWN stored percent, so changing a member quantity
+                 * preserves the discount the buyer was quoted. Re-resolving the rule
+                 * here would silently reprice a line mid-edit.
+                 */
+                price: this.deriveLinePrice(nextMembers, target.groupDiscountPercent),
                 updatedAt: new Date(),
             };
             const updatedCart = { ...cart, items, updatedAt: new Date() };

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

@@ -148,6 +148,24 @@ export interface CartItemDocument {
     groupSlug?: string;
     /** Display snapshot of the group/bundle name. */
     groupTitle?: string;
+    /**
+     * The group discount, as a percentage, AS QUOTED WHEN THIS LINE WAS ADDED.
+     *
+     * 🛑 Stored on the line rather than resolved at read time, and that is not
+     * the mirror-drift mistake it resembles (Root Cause #42). It has to be here
+     * for a mechanical reason — `updateGroupMembers` recomputes `price` from
+     * `groupMembers` and holds only the CART, so with nothing on the line a
+     * buyer changing a quantity would silently lose the discount — and for a
+     * commercial one: this is the basis of the price the buyer was shown.
+     *
+     * 🛑 Because it is a snapshot it is RE-VALIDATED at checkout against the
+     * group's current rule, and a disagreement is REPORTED, never silently
+     * resolved either way. Honouring a stale percent would charge less than the
+     * seller now offers; re-deriving silently would change a total the buyer has
+     * already read. Same discipline as `revalidateAppliedCoupons`, which drops a
+     * lapsed coupon and tells the caller.
+     */
+    groupDiscountPercent?: number;
     /**
      * The members of a multi-member line, AUTHORITATIVE over `bundleProductIds`.
      * See `CartLineMember` for the quantity invariant.
@@ -300,6 +318,8 @@ export type AddToCartInput = {
     groupId?: string;
     groupSlug?: string;
     groupTitle?: string;
+    /** See `CartItemDocument.groupDiscountPercent` — a quoted-at-add snapshot. */
+    groupDiscountPercent?: number;
     groupMembers?: CartLineMember[];
 };
 /**

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

@@ -174,8 +174,8 @@ export declare const cartSummarySchema: z.ZodObject<{
         sessionId?: string | undefined;
         addedAt?: string | undefined;
     }[];
-    itemCount: number;
     subtotal: number;
+    itemCount: number;
 }, {
     items: {
         id: string;
@@ -193,7 +193,7 @@ export declare const cartSummarySchema: z.ZodObject<{
         sessionId?: string | undefined;
         addedAt?: string | undefined;
     }[];
-    itemCount: number;
     subtotal: number;
+    itemCount: number;
     currency?: string | undefined;
 }>;

package/dist/features/catalogue/components/PublicCatalogueItemDetailView.js

@@ -29,5 +29,5 @@ export function PublicCatalogueItemDetailView({ ownerSlug, itemId }) {
     }
     const { owner, item, linkedProductHref } = data;
     const images = item.images.length > 0 ? item.images : item.mainImage ? [item.mainImage] : [];
-    return (_jsx(Main, { children: _jsxs(Container, { size: "lg", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", gap: "xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: "/", className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: `${ROUTES.PUBLIC.PROFILE(ownerSlug)}/catalogue`, className: "hover:text-primary-600 transition-colors", children: owner.displayName ?? "Catalogue" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: item.title })] }), _jsxs(Grid, { cols: 2, gap: "lg", children: [images.length > 0 ? (_jsx(Div, { className: `relative aspect-square w-full ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: images[0], alt: item.title, size: "hero", objectFit: "contain" }) })) : (_jsx(Div, { className: "relative aspect-square w-full", rounded: "xl", surface: "muted" })), images.length > 1 && (_jsx(Row, { gap: "sm", wrap: true, className: "col-span-2", children: images.slice(1).map((src, i) => (_jsx(Div, { className: `relative h-20 w-20 ${__O.hidden}`, rounded: "lg", surface: "muted", children: _jsx(MediaImage, { src: src, alt: `${item.title} photo ${i + 2}`, size: "thumbnail", objectFit: "cover" }) }, i))) })), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "bold", color: "primary", children: item.title }), typeof item.price === "number" && item.price > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { label: "Sign in to see the estimated value", children: formatCurrency(item.price) }) }), _jsx(Text, { size: "xs", color: "muted", children: "Estimated value \u2014 not for direct sale from this page." })] })), _jsxs(Row, { gap: "sm", wrap: true, children: [item.condition && (_jsx(Span, { size: "xs", weight: "medium", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: item.condition })), typeof item.quantity === "number" && (_jsxs(Span, { size: "xs", weight: "medium", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Qty: ", item.quantity] }))] }), item.description && (_jsx(Text, { color: "muted", className: "whitespace-pre-line", children: item.description })), owner.displayName && (_jsxs(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Owned by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: owner.displayName })] })), linkedProductHref && (_jsx(Link, { href: linkedProductHref, className: "inline-flex w-fit items-center rounded-lg bg-primary px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-colors hover:opacity-90", children: "View live listing \u2192" }))] })] })] }) }));
+    return (_jsx(Main, { children: _jsxs(Container, { size: "lg", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", gap: "xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: "/", className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: `${ROUTES.PUBLIC.PROFILE(ownerSlug)}/catalogue`, className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: owner.displayName ?? "Catalogue" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: item.title })] }), _jsxs(Grid, { cols: 2, gap: "lg", children: [images.length > 0 ? (_jsx(Div, { className: `relative aspect-square w-full ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: images[0], alt: item.title, size: "hero", objectFit: "contain" }) })) : (_jsx(Div, { className: "relative aspect-square w-full", rounded: "xl", surface: "muted" })), images.length > 1 && (_jsx(Row, { gap: "sm", wrap: true, className: "col-span-2", children: images.slice(1).map((src, i) => (_jsx(Div, { className: `relative h-20 w-20 ${__O.hidden}`, rounded: "lg", surface: "muted", children: _jsx(MediaImage, { src: src, alt: `${item.title} photo ${i + 2}`, size: "thumbnail", objectFit: "cover" }) }, i))) })), _jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "bold", color: "primary", children: item.title }), typeof item.price === "number" && item.price > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { label: "Sign in to see the estimated value", children: formatCurrency(item.price) }) }), _jsx(Text, { size: "xs", color: "muted", children: "Estimated value \u2014 not for direct sale from this page." })] })), _jsxs(Row, { gap: "sm", wrap: true, children: [item.condition && (_jsx(Span, { size: "xs", weight: "medium", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: item.condition })), typeof item.quantity === "number" && (_jsxs(Span, { size: "xs", weight: "medium", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Qty: ", item.quantity] }))] }), item.description && (_jsx(Text, { color: "muted", className: "whitespace-pre-line", children: item.description })), owner.displayName && (_jsxs(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Owned by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: owner.displayName })] })), linkedProductHref && (_jsx(Link, { href: linkedProductHref, className: "inline-flex w-fit items-center rounded-lg bg-primary px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-colors hover:opacity-90", children: "View live listing \u2192" }))] })] })] }) }));
 }

package/dist/features/categories/api/[id]/price-guidance/route.d.ts

@@ -0,0 +1,42 @@
+/**
+ * feat-categories — GET /api/categories/[id]/price-guidance
+ *
+ * The seller-facing price hint `description-template/route.ts`'s own
+ * docstring names as "C1's job, from a surface that knows who is asking" —
+ * this is that surface. It is deliberately a SEPARATE endpoint rather than a
+ * field added back to the public, CDN-cached template route: that route's
+ * whole point is that anyone can fetch it, and `priceGuidance` is withheld
+ * from signed-out visitors for the same reason a listing's own price is
+ * (CLAUDE.md § "Guest price gating") — publishing the competitor-derived
+ * market band on an unauthenticated, publicly-cacheable response would be
+ * exactly the "a neighbouring surface publishes the range" leak that gate
+ * exists to close, even though the number is advisory rather than a real
+ * price.
+ *
+ * Consumer stub:
+ * ```ts
+ * // src/app/api/categories/[id]/price-guidance/route.ts
+ * export { categoryPriceGuidanceGET as GET } from "@mohasinac/appkit";
+ * ```
+ *
+ * ## What this does NOT resolve
+ *
+ * `PriceGuidanceBasis.gstRate` — "the rate that will be written onto this
+ * listing, resolved the same way `deriveTaxonomy` resolves it" — is left
+ * `undefined` here on purpose. `deriveTaxonomy` is a private method on
+ * `ProductRepository`, tightly coupled to the product WRITE path (it also
+ * applies `DEFAULT_GST_RATE` as a last resort, which is correct for a
+ * document being saved and would be a guess presented as fact on a read-only
+ * hint). `describePriceGuidanceBasis` already handles an unresolved rate
+ * correctly and safely: for the common case (a seller whose prices already
+ * include GST — the schema default), the rate is never consulted at all, so
+ * this omission costs nothing. Only an EXCLUSIVE-pricing seller sees the
+ * honest "could not be resolved" note instead of a converted figure — which
+ * is the behaviour `price-guidance.ts`'s own docstring prescribes for exactly
+ * this situation, not a half-measure standing in for the real resolution.
+ */
+export declare const GET: (request: Request, context?: {
+    params: Promise<{
+        id: string;
+    }>;
+} | undefined) => Promise<Response>;

package/dist/features/categories/api/[id]/price-guidance/route.js

@@ -0,0 +1,90 @@
+/**
+ * feat-categories — GET /api/categories/[id]/price-guidance
+ *
+ * The seller-facing price hint `description-template/route.ts`'s own
+ * docstring names as "C1's job, from a surface that knows who is asking" —
+ * this is that surface. It is deliberately a SEPARATE endpoint rather than a
+ * field added back to the public, CDN-cached template route: that route's
+ * whole point is that anyone can fetch it, and `priceGuidance` is withheld
+ * from signed-out visitors for the same reason a listing's own price is
+ * (CLAUDE.md § "Guest price gating") — publishing the competitor-derived
+ * market band on an unauthenticated, publicly-cacheable response would be
+ * exactly the "a neighbouring surface publishes the range" leak that gate
+ * exists to close, even though the number is advisory rather than a real
+ * price.
+ *
+ * Consumer stub:
+ * ```ts
+ * // src/app/api/categories/[id]/price-guidance/route.ts
+ * export { categoryPriceGuidanceGET as GET } from "@mohasinac/appkit";
+ * ```
+ *
+ * ## What this does NOT resolve
+ *
+ * `PriceGuidanceBasis.gstRate` — "the rate that will be written onto this
+ * listing, resolved the same way `deriveTaxonomy` resolves it" — is left
+ * `undefined` here on purpose. `deriveTaxonomy` is a private method on
+ * `ProductRepository`, tightly coupled to the product WRITE path (it also
+ * applies `DEFAULT_GST_RATE` as a last resort, which is correct for a
+ * document being saved and would be a guess presented as fact on a read-only
+ * hint). `describePriceGuidanceBasis` already handles an unresolved rate
+ * correctly and safely: for the common case (a seller whose prices already
+ * include GST — the schema default), the rate is never consulted at all, so
+ * this omission costs nothing. Only an EXCLUSIVE-pricing seller sees the
+ * honest "could not be resolved" note instead of a converted figure — which
+ * is the behaviour `price-guidance.ts`'s own docstring prescribes for exactly
+ * this situation, not a half-measure standing in for the real resolution.
+ */
+import { NextResponse } from "next/server.js";
+import { normalizeError } from "../../../../../errors/normalize.js";
+import { serverLogger } from "../../../../../monitoring/index.js";
+import { createRouteHandler } from "../../../../../next/api/routeHandler.js";
+import { getProviders } from "../../../../../contracts/index.js";
+import { categoriesRepository } from "../../../repository/categories.repository.js";
+import { isAdminUser } from "../../../../auth/role-predicates.js";
+import { priceGuidanceOnSellerBasis, describePriceGuidanceBasis, } from "../../../../../_internal/shared/features/categories/price-guidance.js";
+import { resolveInheritedGuidance, } from "../../../../../_internal/server/features/categories/price-guidance-resolve.js";
+export const GET = createRouteHandler({
+    roles: ["seller", "admin", "moderator"],
+    handler: async ({ user, params }) => {
+        try {
+            const categoryId = params?.id;
+            if (!categoryId) {
+                return NextResponse.json({ success: false, error: "Missing category id" }, { status: 400 });
+            }
+            const leafDoc = await categoriesRepository.findById(categoryId);
+            if (!leafDoc) {
+                return NextResponse.json({ success: false, error: "Category not found" }, { status: 404 });
+            }
+            const guidance = await resolveInheritedGuidance(leafDoc);
+            if (!guidance) {
+                return NextResponse.json({ success: true, data: { guidance: null, basisNote: null } });
+            }
+            /*
+             * One read, admin exempted (no store to look up). `pricesIncludeGst`
+             * absent means `true` — matching the schema default and the store
+             * route's own `?? true` (see `PriceGuidanceBasis.sellerIncludesGst`'s
+             * docstring for why this must stay consistent everywhere it's read).
+             */
+            let sellerIncludesGst;
+            if (!isAdminUser(user)) {
+                const { db } = getProviders();
+                const storesRepo = db?.getRepository("stores");
+                const result = await storesRepo?.findAll({ filters: `ownerId==${user.uid}`, pageSize: 1 });
+                sellerIncludesGst = result?.data[0]?.pricesIncludeGst;
+            }
+            const basis = { sellerIncludesGst, gstRate: undefined };
+            const onSellerBasis = priceGuidanceOnSellerBasis(guidance, basis);
+            const basisNote = describePriceGuidanceBasis(basis);
+            return NextResponse.json({ success: true, data: { guidance: onSellerBasis, basisNote } }, {
+                // Per-seller basis, so never shared across callers.
+                headers: { "Cache-Control": "private, max-age=3600" },
+            });
+        }
+        catch (err) {
+            const e = normalizeError(err);
+            serverLogger.error("price-guidance read failed", { message: e.message });
+            return NextResponse.json({ success: false, error: "Could not load price guidance" }, { status: 500 });
+        }
+    },
+});

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

@@ -7,6 +7,7 @@ import { ROUTES } from "../../../next/routing/route-map.js";
 import { Anchor, Container, Div, Dl, Dt, Dd, Heading, Main, Nav, Section, Span, Stack, Text } from "../../../ui/index.js";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
 import { MediaImage } from "../../media/MediaImage.js";
+import { RichTextRenderer } from "../../../ui/rich-text/RichTextRenderer.js";
 import { BrandDetailTabs } from "./BrandDetailTabs.js";
 import { CategoryGrid } from "./CategoryGrid.js";
 import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection.js";
@@ -27,8 +28,23 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
     // The brand IS this page's subject — a read failure must surface rather than
     // render an anonymous, empty brand page. `undefined` still means "no such
     // brand slug".
-    const brand = (initialBrand ?? (await categoriesRepository
-        .getCategoryBySlug(slug)) ?? undefined);
+    const brandDoc = initialBrand ?? (await categoriesRepository.getCategoryBySlug(slug)) ?? undefined;
+    const brand = (brandDoc ?? undefined);
+    /*
+     * 🛑 Read from the DOCUMENT, not from the `CategoryItem` cast — the same rule
+     * `CategoryDetailPageView` states for this exact field.
+     *
+     * `contentBody` is deliberately PRIVATE on the list projection: it is 400-900
+     * chars of HTML per row and `CategoryInlineSelect` fetches 200 rows on every
+     * seller-form open, so publishing it there would be the Fast-Origin-Transfer
+     * shape of Root Cause #104. Widening `CategoryItem` to satisfy one render site
+     * is exactly the invitation that comment warns about — and it is what the
+     * first attempt at this did, which `tsc` caught.
+     *
+     * No extra read: this page already holds the whole document (`initialBrand`,
+     * or the fetch above). Only the local cast hid it.
+     */
+    const brandContentBody = typeof brandDoc?.contentBody === "string" ? brandDoc.contentBody : null;
     const brandName = brand?.name;
     const [productsResult, tabCounts, allBundles, activeBrands, groupedListings, settings] = await Promise.all([
         brandName
@@ -44,7 +60,7 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
         // therefore never hide, however empty the brand was.
         brandName
             ? listingTabCounts(CATEGORY_PAGE_TABS, { brandName })
-            : Promise.resolve({}),
+            : Promise.resolve({ available: {}, total: {} }),
         // 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).
@@ -92,15 +108,23 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
     // 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).
+    // Badge = available scope; hiding + the header pill = total. See the same
+    // split in `CategoryDetailPageView` and `ListingTabCountResult`.
     const counts = {
-        ...tabCounts,
-        products: tabCounts.products ?? brand?.metrics?.productCount ?? 0,
-        auctions: tabCounts.auctions ?? brand?.metrics?.auctionCount ?? 0,
+        ...tabCounts.available,
+        products: tabCounts.available.products ?? brand?.metrics?.productCount ?? 0,
+        auctions: tabCounts.available.auctions ?? brand?.metrics?.auctionCount ?? 0,
+        bundles: brandBundles.length,
+    };
+    const totals = {
+        ...tabCounts.total,
+        products: tabCounts.total.products ?? brand?.metrics?.productCount ?? 0,
+        auctions: tabCounts.total.auctions ?? brand?.metrics?.auctionCount ?? 0,
         bundles: brandBundles.length,
     };
     // 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);
+    const totalItems = Object.values(totals).reduce((sum, n) => sum + (n ?? 0), 0);
     /*
      * ── D4: structured data on the brand page ───────────────────────────────
      *
@@ -152,5 +176,5 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
     const ldFaq = brand?.faqs && brand.faqs.length > 0
         ? faqJsonLd(brand.faqs.map((f) => ({ question: f.question, answer: f.answer })))
         : null;
-    return (_jsxs(Main, { children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldBreadcrumb) } }), _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldCollection) } }), ldFaq && (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldFaq) } })), _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)) })] }) }))] }));
+    return (_jsxs(Main, { children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldBreadcrumb) } }), _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldCollection) } }), ldFaq && (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldFaq) } })), _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 dark:hover:text-primary-400 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 dark:hover:text-primary-400 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 })] }))] })] }) }) })), brandContentBody && brandContentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: brandContentBody }) }) })), _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, totals: totals, 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

@@ -10,10 +10,16 @@ export interface BrandDetailTabsProps {
      * inventory (Root Cause #59). Keyed by tab id; the previous hand-named shape
      * covered only 5 of 9 tabs (Root Cause #61).
      */
+    /** Badge counts — what the default (available) scope will render. */
     counts?: Record<string, number | undefined>;
+    /**
+     * Every published row per tab, all availability scopes. Drives hide-at-zero
+     * and the "N ended — show all" hint; see `ListingTabCountResult`.
+     */
+    totals?: 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. */
     enabledCategoryTypes?: string[];
 }
-export declare function BrandDetailTabs({ brandName, initialProductsData, initialBundles, counts, enabledListingTypes, enabledCategoryTypes, }: BrandDetailTabsProps): React.JSX.Element;
+export declare function BrandDetailTabs({ brandName, initialProductsData, initialBundles, counts, totals, enabledListingTypes, enabledCategoryTypes, }: BrandDetailTabsProps): React.JSX.Element;

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { EmptyState, Tabs, TabsList, TabsTrigger } from "../../../ui/index.js";
+import { AvailabilityScopeHint } from "../../products/components/AvailabilityScopeHint.js";
 import { CategoryProductsListing } from "./CategoryProductsListing.js";
 import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing.js";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing.js";
@@ -28,6 +29,18 @@ const TAB_TYPE_MAP = {
     ])),
     bundles: { kind: "category", type: "bundle" },
 };
+/**
+ * The listing types a tab spans, for the availability-scope hint. Derived
+ * from the same maps the tabs render from, never hand-written (Root Cause
+ * #61).
+ */
+function typesForTab(id) {
+    const generic = GENERIC_TAB_LISTING_TYPES[id];
+    if (generic)
+        return generic;
+    const mapping = TAB_TYPE_MAP[id];
+    return mapping?.kind === "listing" ? [mapping.type] : [];
+}
 /** Listing types rendered by the shared products listing rather than a dedicated one. */
 const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("standard").tabSlug]: ["standard"],
@@ -35,9 +48,20 @@ const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("digital-code").tabSlug]: ["digital-code"],
     [pluginFor("live").tabSlug]: ["live"],
     [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
+    /*
+     * Spares render generically — a product grid is the whole story, unlike an
+     * auction (countdown, bid history) or a prize draw (entries remaining).
+     *
+     * 🛑 Hand-written map; a missing entry is a tab you can CLICK that renders an
+     * empty panel. `audit-tab-body-coverage` exists for exactly this, after this
+     * file silently DROPPED four types while its `CategoryDetailTabs` twin
+     * rendered them as blank panels — two spellings of one gap.
+     */
+    [pluginFor("spares").tabSlug]: ["spares"],
 };
-export function BrandDetailTabs({ brandName, initialProductsData, initialBundles = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
+export function BrandDetailTabs({ brandName, initialProductsData, initialBundles = [], counts, totals, enabledListingTypes, enabledCategoryTypes, }) {
     const countFor = (id) => counts?.[id];
+    const totalFor = (id) => totals?.[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
@@ -57,7 +81,8 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
         // 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);
+        // TOTAL, not the badge — see the same note in CategoryDetailTabs.
+        const count = totalFor(t.id);
         return count === undefined || count > 0;
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
@@ -65,5 +90,5 @@ export function BrandDetailTabs({ brandName, initialProductsData, initialBundles
     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 }))] }));
+    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))) }) }), _jsx(AvailabilityScopeHint, { total: totalFor(activeTab), available: countFor(activeTab), types: typesForTab(activeTab) }), 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

@@ -16,10 +16,11 @@ import { MediaImage } from "../../media/MediaImage.js";
 import { ImageLightbox } from "../../../ui/components/ImageLightbox.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
+import { productImageUrls } from "../../products/schemas/firestore.js";
 const PLACEHOLDER_EMOJI = "📦";
 function toGalleryImages(members, canSeePrices) {
     return members.map((p, i) => ({
-        src: p.mainImage ?? p.images?.[0] ?? "",
+        src: p.mainImage || productImageUrls(p.images)[0] || "",
         alt: p.title,
         badge: `#${i + 1}`,
         caption: p.title,
@@ -46,7 +47,7 @@ export function BundleCollage({ members, onItemClick }) {
         return null;
     const galleryImages = toGalleryImages(members, canSeePrices);
     return (_jsxs(_Fragment, { children: [_jsx(Grid, { cols: "categoryCards", gap: "3", children: members.map((p, idx) => {
-                    const cover = p.mainImage ?? p.images?.[0];
+                    const cover = p.mainImage || productImageUrls(p.images)[0];
                     const href = String(ROUTES.PUBLIC.PRODUCT_DETAIL?.(p.slug ?? 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: _jsx(GatedPrice, { 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 })] }));

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

@@ -18,6 +18,7 @@ import { Badge, Button, Checkbox, Div, Input, Row, Stack, Text } from "../../../
 import { BUNDLE_MAX_ITEMS, BUNDLE_MIN_ITEMS, } from "../../../_internal/shared/features/categories/bundle-config.js";
 import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { productImageUrls } from "../../products/schemas/firestore.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -137,11 +138,9 @@ export async function defaultBundleItemsFetch(query) {
         return {
             id,
             title,
-            image: typeof rec.mainImage === "string"
+            image: typeof rec.mainImage === "string" && rec.mainImage
                 ? rec.mainImage
-                : Array.isArray(rec.images) && typeof rec.images[0] === "string"
-                    ? rec.images[0]
-                    : undefined,
+                : productImageUrls(rec.images)[0],
             price: typeof rec.price === "number" ? rec.price : undefined,
             storeId: typeof rec.storeId === "string" ? rec.storeId : undefined,
         };

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

@@ -4,7 +4,7 @@ import { useState, useCallback, useMemo } from "react";
 import { useCategoriesFiltered } from "../hooks/useCategories.js";
 import { CATEGORY_TABS, DEFAULT_CATEGORY_TAB, matchesCategoryTab, } from "../constants/category-tabs.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
-import { Button, Div, Grid, ListingFilterDrawer, ListingToolbar, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui/index.js";
+import { Div, Grid, ListingFilterDrawer, ListingToolbar, OverflowRow, Pagination, Row, Stack, Text, StickyToolbar } from "../../../ui/index.js";
 import { CategoryCard } from "./CategoryGrid.js";
 import { CategoryFilters } from "./CategoryFilters.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
@@ -170,13 +170,28 @@ export function CategoriesIndexListing({ brandsOnly = false }) {
         pageSize: PAGE_SIZE,
     });
     const activeSearch = table.get(TABLE_KEYS.QUERY) || "";
-    const TABS = CATEGORY_TABS;
-    return (_jsxs(Div, { className: "min-h-screen", children: [!brandsOnly && (_jsx(Row, { gap: "xs", border: "default", className: "border-b mb-2", children: TABS.map((tab) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => switchTab(tab.key), paddingX: "md", paddingY: "y-xs-tall", textSize: "sm", weight: "medium", className: [
-                        "transition-colors border-b-2 -mb-px rounded-none",
-                        activeTab === tab.key
-                            ? "border-primary text-primary dark:text-primary-400 dark:border-primary-400"
-                            : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-zinc-800 text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)]",
-                    ].join(" "), children: tab.label }, tab.key))) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
+    /*
+     * 🛑 `<OverflowRow>`, not a hand-rolled row of ghost Buttons.
+     *
+     * This was five `<Button variant="ghost">`s in a `<Row>` with a hand-written
+     * underline — no `role="tablist"`, no `role="tab"`, and no overflow
+     * behaviour at all, so on a narrow viewport the last tabs simply ran past
+     * the right edge with no scrollbar and no affordance. The Known-TS-Patterns
+     * table bans exactly that shape ("A hand-rolled overflow-x-auto row of
+     * pills/tabs → <OverflowRow>"), and the primitive built for it had shipped
+     * three weeks earlier without this surface being migrated.
+     *
+     * `variant="tabs"` because these swap a panel in place — they rewrite the
+     * `tab` URL param and re-partition one already-cached payload; they do not
+     * navigate. That is also why the items carry `onSelect` rather than `href`,
+     * and therefore why `linkProps`/`scroll` do not apply here.
+     */
+    const tabItems = CATEGORY_TABS.map((tab) => ({
+        id: tab.key,
+        label: tab.label,
+        onSelect: () => switchTab(tab.key),
+    }));
+    return (_jsxs(Div, { className: "min-h-screen", children: [!brandsOnly && (_jsx(Div, { className: "mb-2", children: _jsx(OverflowRow, { items: tabItems, activeId: activeTab, variant: "tabs", ariaLabel: "Category index sections", searchPlaceholder: "Search sections\u2026" }) })), _jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: activeTab === "brands" || brandsOnly ? "Search brands..." : "Search categories...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
                     { label: "Featured only", active: table.get(TABLE_KEYS.IS_FEATURED) === "true", onChange: (next) => table.set(TABLE_KEYS.IS_FEATURED, next ? "true" : "") },
                 ] }), 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: renderCategoryGrid({ isLoading, categories, view, activeSearch, activeTab, brandsOnly }) }), renderCategoryFilterDrawer({ filterOpen, setFilterOpen, activeFilterCount, clearFilters, applyFilters, pendingTable })] }));
 }