@mohasinac/appkit 4.53.1 → 4.54.0

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

@@ -5,6 +5,7 @@ import { categoryCrumbs, withTrailHead } from "../utils/breadcrumb-chain.js";
 import { ownTotalFor, descendantTotalFor } from "../schemas/category-counts.js";
 import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories/index.js";
 import { Container, Div, Heading, ImageMosaic, Main, MOSAIC_MIN, Section, Span, SplitTile, Stack, Text } from "../../../ui/index.js";
+import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { RichTextRenderer } from "../../../ui/rich-text/RichTextRenderer.js";
 import { resolveTaxonomyVisual } from "../utils/taxonomy-visual.js";
@@ -27,6 +28,7 @@ import { safeRead } from "../../../errors/safe-read.js";
 import { breadcrumbJsonLd, collectionPageJsonLd, faqJsonLd, } from "../../../seo/json-ld.js";
 import { toStoreListItem } from "../../../_internal/server/features/stores/adapters.js";
 import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility.js";
+import { productImageUrls } from "../../products/schemas/firestore.js";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -170,7 +172,7 @@ export async function CategoryDetailPageView({ slug }) {
         // Four of the ten tabs used to have no count at all and could never hide.
         categoriesIn
             ? listingTabCounts(CATEGORY_PAGE_TABS, { categoriesIn })
-            : Promise.resolve({}),
+            : Promise.resolve({ available: {}, total: {} }),
         // SB-UNI-D — bundles fetched from the categories collection. We pull
         // all active bundle rows; the carousel filters by category affinity.
         categoriesIn
@@ -419,13 +421,22 @@ export async function CategoryDetailPageView({ slug }) {
     // `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 };
+    // Two maps, not one: the BADGE is what the default (available) scope will
+    // render, while HIDING must stay keyed on the total — a tab whose rows have
+    // all ended still has a browsable archive behind the Ended/All scopes.
+    // `stores` is added to both because this page resolves its store list
+    // eagerly to render the tab body anyway, and a store has no availability
+    // scope of its own.
+    const counts = { ...tabCounts.available, stores: storeCount };
+    const totals = { ...tabCounts.total, 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;
+    // Header pills read TOTALS, deliberately: "47 products" is a statement about
+    // what this category holds, not about what one scope is currently showing.
+    const productCount = totals.products ?? category?.metrics?.totalProductCount ?? category?.metrics?.productCount ?? 0;
+    const auctionCount = totals.auctions ?? category?.metrics?.totalAuctionCount ?? category?.metrics?.auctionCount ?? 0;
+    const preOrderCount = totals["pre-orders"] ?? 0;
     /*
      * G3b — OWN vs CHILDREN, so one number stops answering two questions.
      *
@@ -465,7 +476,7 @@ export async function CategoryDetailPageView({ slug }) {
     const mosaicImages = hasCover
         ? []
         : (productsResult?.items ?? [])
-            .map((row) => row.mainImage ?? row.images?.[0] ?? null)
+            .map((row) => row.mainImage || productImageUrls(row.images)[0] || null)
             .filter((src) => !!src)
             .slice(0, 5);
     const hasMosaic = mosaicImages.length >= MOSAIC_MIN;
@@ -562,7 +573,7 @@ export async function CategoryDetailPageView({ slug }) {
     const ldFaq = category?.faqs && category.faqs.length > 0
         ? faqJsonLd(category.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 && hasMosaic && (_jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", padding: "x-md", children: _jsx(Div, { padding: "t-lg", children: _jsx(ImageMosaic, { images: mosaicImages, alt: `${category?.name ?? slug} on LetItRip` }) }) })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsx(BreadcrumbTrail, { crumbs: trail, className: "mb-4", tone: hasCover ? "on-media" : "default" }), category?.id && _jsx(LastCategoryBeacon, { categoryId: category.id }), _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"] })), showCountSplit && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "muted", size: "xs", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [ownHere.toLocaleString(), " here \u00B7 ", inSubcategories.toLocaleString(), " in subcategories"] })), 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"] }))] })] })] }), category?.hasbroName && (_jsx(Section, { padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Row, { gap: "md", align: "center", wrap: true, children: [category.hasbroCoverImage && (_jsx(MediaImage, { src: category.hasbroCoverImage, alt: `${category.hasbroName} logo`, size: "thumbnail", className: "h-12 w-auto flex-shrink-0" })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", transform: "uppercase", weight: "medium", children: "Also known as" }), _jsx(Text, { weight: "semibold", children: category.hasbroName }), _jsxs(Text, { size: "xs", color: "muted", children: ["The same wave, named differently outside Japan \u2014 Takara-Tomy releases it as ", category.name, ", Hasbro as ", category.hasbroName, ". Both names find these listings."] })] })] }) }) })), contentBody && contentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: contentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), compositions.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "md", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "What it is made of" }), _jsx(ModelCompositionPanel, { compositions: compositions, hrefForPart: (slot, tail) => String(ROUTES.PUBLIC.PART_DETAIL(slot, tail)) })] }) }) })), (() => {
+    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 && hasMosaic && (_jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", padding: "x-md", children: _jsx(Div, { padding: "t-lg", children: _jsx(ImageMosaic, { images: mosaicImages, alt: `${category?.name ?? slug} on LetItRip` }) }) })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsx(BreadcrumbTrail, { crumbs: trail, className: "mb-4", tone: hasCover ? "on-media" : "default" }), category?.id && _jsx(LastCategoryBeacon, { categoryId: category.id }), category?.id && (_jsx(OwnerQuickActions, { resource: "CATEGORY", placement: "detail", className: "mb-3", recordLabel: category.name ?? slug, editHref: String(ROUTES.ADMIN.CATEGORIES_EDIT(category.id)) })), _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"] })), showCountSplit && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "muted", size: "xs", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [ownHere.toLocaleString(), " here \u00B7 ", inSubcategories.toLocaleString(), " in subcategories"] })), 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"] }))] })] })] }), category?.hasbroName && (_jsx(Section, { padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Row, { gap: "md", align: "center", wrap: true, children: [category.hasbroCoverImage && (_jsx(MediaImage, { src: category.hasbroCoverImage, alt: `${category.hasbroName} logo`, size: "thumbnail", className: "h-12 w-auto flex-shrink-0" })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", transform: "uppercase", weight: "medium", children: "Also known as" }), _jsx(Text, { weight: "semibold", children: category.hasbroName }), _jsxs(Text, { size: "xs", color: "muted", children: ["The same wave, named differently outside Japan \u2014 Takara-Tomy releases it as ", category.name, ", Hasbro as ", category.hasbroName, ". Both names find these listings."] })] })] }) }) })), contentBody && contentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: contentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), compositions.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "md", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "What it is made of" }), _jsx(ModelCompositionPanel, { compositions: compositions, hrefForPart: (slot, tail) => String(ROUTES.PUBLIC.PART_DETAIL(slot, tail)) })] }) }) })), (() => {
                 if (category?.tier !== 0)
                     return null;
                 const branches = childCategories.filter((c) => c.tier === 1);
@@ -587,5 +598,5 @@ export async function CategoryDetailPageView({ slug }) {
                                 imageUrl: coverOf(b),
                                 countLabel: countOf(b),
                             } }) }) }));
-            })(), directChildrenWithListings.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "inline", children: _jsxs(Div, { padding: "b-2xs", children: [parentLadder.length > 0 && (_jsx(Div, { padding: "b-2xs", children: _jsx(SubcategoryCardRow, { items: parentLadder, label: "Parent category" }) })), _jsx(SubcategoryCardRow, { items: toSubcategoryItems(directChildrenWithListings, childCategories) })] }) }) })), _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)) })] }) }))] }));
+            })(), directChildrenWithListings.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "inline", children: _jsxs(Div, { padding: "b-2xs", children: [parentLadder.length > 0 && (_jsx(Div, { padding: "b-2xs", children: _jsx(SubcategoryCardRow, { items: parentLadder, label: "Parent category" }) })), _jsx(SubcategoryCardRow, { items: toSubcategoryItems(directChildrenWithListings, childCategories) })] }) }) })), _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, totals: totals, 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

@@ -17,9 +17,15 @@ export interface CategoryDetailTabsProps {
      * were structurally uncountable and could never hide (Root Cause #61).
      */
     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`. Omitted,
+     * it falls back to `counts`, i.e. the pre-split behaviour.
+     */
+    totals?: 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. */
     enabledCategoryTypes?: string[];
 }
-export declare function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles, initialStores, counts, enabledListingTypes, enabledCategoryTypes, }: CategoryDetailTabsProps): React.JSX.Element;
+export declare function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles, initialStores, counts, totals, enabledListingTypes, enabledCategoryTypes, }: CategoryDetailTabsProps): React.JSX.Element;

package/dist/features/categories/components/CategoryDetailTabs.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";
@@ -29,6 +30,21 @@ const TAB_TYPE_MAP = {
     bundles: { kind: "category", type: "bundle" },
     stores: { kind: "entity", type: "stores" },
 };
+/**
+ * The listing types a tab spans, for the availability-scope hint.
+ *
+ * Derived from `TAB_TYPE_MAP` rather than hand-written: that map is already
+ * built from `ALL_LISTING_TYPES`, so a tenth type is covered without a second
+ * enumeration (Root Cause #61). The combined Art & Stickers tab is the one
+ * entry that spans two, and `GENERIC_TAB_LISTING_TYPES` already says so.
+ */
+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"],
@@ -50,8 +66,12 @@ const GENERIC_TAB_LISTING_TYPES = {
      */
     [pluginFor("spares").tabSlug]: ["spares"],
 };
-export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
+export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, totals, enabledListingTypes, enabledCategoryTypes, }) {
     const countFor = (id) => counts?.[id];
+    // Falls back to the badge when no totals map is supplied, so a caller that
+    // has not been migrated keeps today's hide behaviour rather than hiding
+    // everything.
+    const totalFor = (id) => totals?.[id] ?? counts?.[id];
     const visibleTabs = CATEGORY_PAGE_TABS.filter((t) => {
         const mapping = TAB_TYPE_MAP[t.id];
         if (mapping) {
@@ -64,11 +84,13 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
                     return false;
             }
         }
-        // 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);
+        // 🛑 TOTAL, not the badge. The badge counts what the default (available)
+        // scope renders, and a tab whose rows have all ended badges 0 while still
+        // holding a browsable archive behind the Ended/All scopes — hiding it
+        // would strand that archive. `undefined` still means the count query
+        // FAILED, so the tab stays visible: an empty tab is a far smaller error
+        // than hiding a tab that holds real listings (Root Cause #59).
+        const count = totalFor(t.id);
         return count === undefined || count > 0;
     });
     const firstTabId = (visibleTabs[0]?.id ?? "products");
@@ -78,5 +100,5 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
     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 }))] }));
+    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: 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/CategoryGrid.d.ts

@@ -5,8 +5,18 @@ export interface CategoryCardProps {
     href?: string;
     onClick?: (category: CategoryItem) => void;
     className?: string;
+    /**
+     * Owner-only pencil / clone / bin, for an admin (categories have no owner,
+     * so only an admin ever sees it). Pass `<OwnerQuickActions>`.
+     *
+     * 🛑 Rendered OUTSIDE this card's `<Link>`, as a sibling. A `<button>`
+     * inside an `<a>` is invalid HTML that browsers resolve by closing the
+     * anchor early, which breaks the CARD's navigation rather than just the
+     * button's.
+     */
+    renderOwnerActions?: () => React.ReactNode;
 }
-export declare function CategoryCard({ category, href, onClick, className, }: CategoryCardProps): React.JSX.Element;
+export declare function CategoryCard({ category, href, onClick, className, renderOwnerActions, }: CategoryCardProps): React.JSX.Element;
 export interface CategoryGridProps {
     categories: CategoryItem[];
     getHref?: (category: CategoryItem) => string;

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

@@ -12,7 +12,7 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const CLS_FEATURED_DOT = "absolute left-2 top-2 rounded-full bg-warning-surface p-[var(--appkit-space-1)] leading-none";
-export function CategoryCard({ category, href, onClick, className = "", }) {
+export function CategoryCard({ category, href, onClick, className = "", renderOwnerActions, }) {
     // totalProductCount is the rollup (self + all descendant categories),
     // maintained incrementally by onProductWrite — prefer it over the
     // own-node-only productCount so a parent category's card shows the same
@@ -32,9 +32,16 @@ export function CategoryCard({ category, href, onClick, className = "", }) {
     if (href) {
         return (_jsx(Link, { href: href, className: cardClass, children: inner }));
     }
-    return (_jsx(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+    const card = (_jsx(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(category)
             : undefined, onClick: onClick ? () => onClick(category) : undefined, className: cardClass, children: inner }));
+    if (!renderOwnerActions)
+        return card;
+    /*
+     * Sibling of the card, never a child — see the prop's docstring. `z-20`
+     * beats the featured dot at `left-2 top-2`.
+     */
+    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: renderOwnerActions() })] }));
 }
 export function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel = "No categories found", className = "", }) {
     if (categories.length === 0) {

package/dist/features/checkout/actions/checkout-value-otp-actions.d.ts

@@ -6,12 +6,17 @@
  * purpose from `checkout-actions.ts`'s third-party shipping consent OTP —
  * same crypto primitives, separate Firestore namespace and copy.
  */
-export type CheckoutValueOtpChannel = "email" | "whatsapp";
 /**
- * Sends a checkout-value OTP either by email (default) or WhatsApp
- * (opt-in — the buyer must explicitly choose it in the UI). WhatsApp phone
- * is always resolved server-side from the selected shipping address —
- * never trust a client-supplied phone number.
+ * Email is the only checkout-OTP channel. WhatsApp was the other arm until
+ * 2026-10-20, when the Cloud API integration was removed — see
+ * `features/orders/utils/payment-proof-message.ts` for why the `wa.me`
+ * links survived and the API did not. Kept as a single-member union rather
+ * than deleted so the parameter stays self-documenting and a second channel
+ * has an obvious seam.
+ */
+export type CheckoutValueOtpChannel = "email";
+/**
+ * Sends a checkout-value OTP by email.
  *
  * If the chosen channel (and, for email, its skip-worthy fallback) is
  * currently circuit-broken or unconfigured, the OTP gate is treated as

package/dist/features/checkout/actions/checkout-value-otp-actions.js

@@ -9,17 +9,12 @@
 import { timingSafeEqual } from "crypto";
 import { ValidationError } from "../../../errors/index.js";
 import { normalizeError } from "../../../errors/normalize.js";
-import { safeRead } from "../../../errors/safe-read.js";
 import { serverLogger } from "../../../monitoring/index.js";
 import { sendEmail } from "../../contact/email.js";
 import { getAdminDb } from "../../../providers/db-firebase/index.js";
 import { resolveDate } from "../../../utils/index.js";
-import { addressesRepository } from "../../addresses/repository/addresses.repository.js";
-import { siteSettingsRepository } from "../../admin/repository/site-settings.repository.js";
-import { sendWhatsAppBusinessMessage } from "../../whatsapp-bot/helpers/whatsapp.js";
 import { isChannelHealthy, withChannelRetry } from "../../../_internal/server/notifications/channel-health.js";
-import { guardSend, logSuppressedSend } from "../../../_internal/server/notifications/send-guard.js";
-import { CHECKOUT_VALUE_OTP_EXPIRY_MS, CHECKOUT_VALUE_OTP_MAX_ATTEMPTS, hashOtp, generateOtpCode, checkoutValueOtpRef, enforceCheckoutValueOtpRateLimit, buildCheckoutValueOtpMessage, } from "../../auth/checkout-value-otp.js";
+import { CHECKOUT_VALUE_OTP_EXPIRY_MS, CHECKOUT_VALUE_OTP_MAX_ATTEMPTS, hashOtp, generateOtpCode, checkoutValueOtpRef, enforceCheckoutValueOtpRateLimit, } from "../../auth/checkout-value-otp.js";
 function maskEmail(userEmail) {
     const [local, domain] = userEmail.split("@");
     return domain
@@ -27,10 +22,7 @@ function maskEmail(userEmail) {
         : "***";
 }
 /**
- * Sends a checkout-value OTP either by email (default) or WhatsApp
- * (opt-in — the buyer must explicitly choose it in the UI). WhatsApp phone
- * is always resolved server-side from the selected shipping address —
- * never trust a client-supplied phone number.
+ * Sends a checkout-value OTP by email.
  *
  * If the chosen channel (and, for email, its skip-worthy fallback) is
  * currently circuit-broken or unconfigured, the OTP gate is treated as
@@ -45,84 +37,6 @@ export async function sendCheckoutValueOtp(userId, userEmail, channel = "email",
     const codeHash = hashOtp(code);
     const expiresAt = new Date(Date.now() + CHECKOUT_VALUE_OTP_EXPIRY_MS);
     const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "LetItRip";
-    if (channel === "whatsapp") {
-        if (!addressId) {
-            throw new ValidationError("Select a delivery address before sending the code via WhatsApp.");
-        }
-        // A failed settings read makes the WhatsApp channel look deliberately
-        // switched off ("send the code by email instead") — a defensible fallback,
-        // but one an operator has to be able to see, since it is indistinguishable
-        // from an admin having disabled it.
-        const settings = await safeRead(() => siteSettingsRepository.getSingleton(), {
-            route: "checkout/value-otp",
-            key: "checkoutValueOtp.siteSettings",
-            fallback: null,
-        });
-        const creds = settings?.credentials ?? {};
-        const whatsappOtpEnabled = settings?.notificationChannels?.whatsapp?.otpEnabled === true;
-        const phoneNumberId = creds.whatsappPhoneNumberId?.trim() ?? "";
-        const accessToken = creds.whatsappCloudApiToken?.trim() ?? "";
-        const credsReady = phoneNumberId && accessToken && !phoneNumberId.includes("PLACEHOLDER") && !accessToken.includes("PLACEHOLDER");
-        if (!whatsappOtpEnabled || !credsReady) {
-            throw new ValidationError("WhatsApp verification isn't available right now — send the code by email instead.");
-        }
-        const address = await addressesRepository.findById(addressId);
-        /*
-       * REVEALED: this phone receives the high-value checkout OTP, so it has to
-       * be the real number. `addressesRepository` is ciphertext-by-default, and
-       * `.trim()` on the stored value is what the nominal brand caught — the
-       * old intersection form let `Encrypted<string>` call string methods.
-       */
-        const addressPlain = address ? addressesRepository.revealAddress(address) : null;
-        const phone = addressPlain?.phone?.trim();
-        if (!phone) {
-            throw new ValidationError("The selected address has no phone number on file — send the code by email instead.");
-        }
-        if (!(await isChannelHealthy("whatsapp"))) {
-            serverLogger.warn("sendCheckoutValueOtp: WhatsApp channel unhealthy — skipping OTP gate", { uid: userId, channel });
-            return { skipped: true };
-        }
-        await checkoutValueOtpRef(db, userId).set({
-            codeHash,
-            expiresAt,
-            attempts: 0,
-            verified: false,
-            createdAt: new Date(),
-        });
-        const message = buildCheckoutValueOtpMessage(code, siteName);
-        // Same guard as the email branch below, same reasoning: transactional, so
-        // the kill switch does not apply (the buyer cannot check out without the
-        // code), but the daily ceiling does.
-        const waGuard = {
-            channel: "whatsapp",
-            feature: "checkout_value_otp",
-            audience: "user",
-            transactional: true,
-        };
-        const waDecision = await guardSend(waGuard);
-        if (!waDecision.allow) {
-            logSuppressedSend(waGuard, waDecision);
-            throw new ValidationError("We couldn't send the verification code via WhatsApp — please try again, or send it by email instead.");
-        }
-        try {
-            const sent = await withChannelRetry("whatsapp", async () => {
-                const ok = await sendWhatsAppBusinessMessage({ toPhone: phone, message, phoneNumberId, accessToken });
-                if (!ok)
-                    throw new Error("WhatsApp Cloud API returned a non-OK response");
-                return ok;
-            });
-            if (!sent)
-                throw new Error("WhatsApp send failed");
-        }
-        catch (err) {
-            void normalizeError(err);
-            serverLogger.error("Failed to send checkout value OTP via WhatsApp", { uid: userId, err });
-            throw new ValidationError("We couldn't send the verification code via WhatsApp — please try again, or send it by email instead.");
-        }
-        const maskedPhone = phone.length > 4 ? `${"*".repeat(phone.length - 4)}${phone.slice(-4)}` : "***";
-        serverLogger.info(`Checkout value OTP sent via WhatsApp: uid=${userId}`);
-        return { maskedPhone };
-    }
     if (!(await isChannelHealthy("email"))) {
         serverLogger.warn("sendCheckoutValueOtp: email channel unhealthy — skipping OTP gate", { uid: userId, channel });
         return { skipped: true };

package/dist/features/classified/components/ClassifiedDetailPageView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link.js";
+import { OwnerQuickActions } from "../../../features/admin/components/OwnerQuickActions.js";
 import { getClassifiedForDetail } from "../../../_internal/server/features/classified/data.js";
 const CLS_BREADCRUMB_LINK = "hover:text-primary-600 dark:hover:text-primary-400 transition-colors";
 const CLS_CLASSIFIED_BADGE = "inline-block rounded-full bg-cyan-100 dark:bg-cyan-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-cyan-700 dark:text-cyan-300";
@@ -23,6 +24,7 @@ import { getSiteSettingsGlobal } from "../../admin/utils/getSiteSettingsGlobal.j
 import { safeRead } from "../../../errors/safe-read.js";
 import { DEFAULT_MIN_OFFER_PERCENT, offersEnabledFor, resolveOfferBounds, } from "../../../_internal/shared/features/offers/config.js";
 import { ListingBottomActions } from "../../products/components/ListingBottomActions.js";
+import { productImageUrls } from "../../products/schemas/firestore.js";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -43,7 +45,15 @@ export async function ClassifiedDetailPageView({ slug, initialProduct, renderOff
     const currency = p.currency || getDefaultCurrency();
     const title = String(p.title ?? p.name ?? "Classified Listing");
     const price = typeof p.price === "number" ? p.price : null;
-    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    // `images` is `ProductImage[]` since A6 — `productImageUrls` is the one
+    // normaliser (it also accepts the legacy `string[]`). Casting it to
+    // `string[]` handed the gallery objects and rendered a placeholder.
+    const galleryUrls = productImageUrls(p.images);
+    const images = galleryUrls.length > 0
+        ? galleryUrls
+        : typeof p.mainImage === "string"
+            ? [p.mainImage]
+            : [];
     const meta = product.classified;
     const location = meta?.meetupArea ? [meta.meetupArea.locality, meta.meetupArea.city].filter(Boolean).join(", ") : null;
     const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? String(p.categorySlugs[0]) : (typeof p.category === "string" ? p.category : null);
@@ -93,7 +103,7 @@ export async function ClassifiedDetailPageView({ slug, initialProduct, renderOff
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CLASSIFIED), className: CLS_BREADCRUMB_LINK, children: "Classifieds" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_CLASSIFIED_BADGE, children: "Classified" }), meta?.negotiable && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Negotiable" })), meta?.acceptsShipping && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Shipping available" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), location && (_jsxs(Row, { color: "muted", textSize: "sm", align: "center", gap: "xs", children: [_jsx(Span, { children: "\uD83D\uDCCD" }), _jsx(Span, { children: location }), meta?.meetupArea?.pincode && _jsxs(Span, { children: ["\u00B7 ", meta.meetupArea.pincode] })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, customTabs: toCustomSectionTabs(p.customSections) })), renderBuyBar: () => (_jsx(Stack, { id: "classified-contact-bar", className: "p-[var(--appkit-space-5)]", border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: offersAvailable && offerBounds ? (_jsxs(_Fragment, { children: [renderOfferAction({
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CLASSIFIED), className: CLS_BREADCRUMB_LINK, children: "Classifieds" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_CLASSIFIED_BADGE, children: "Classified" }), meta?.negotiable && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Negotiable" })), meta?.acceptsShipping && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: "Shipping available" }))] }), _jsx(OwnerQuickActions, { resource: "PRODUCT", placement: "detail", recordLabel: String(p.title ?? p.slug ?? p.id), storeId: p.storeId ? String(p.storeId) : undefined, editHref: String(ROUTES.STORE.PRODUCTS_EDIT(String(p.id))) }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), location && (_jsxs(Row, { color: "muted", textSize: "sm", align: "center", gap: "xs", children: [_jsx(Span, { children: "\uD83D\uDCCD" }), _jsx(Span, { children: location }), meta?.meetupArea?.pincode && _jsxs(Span, { children: ["\u00B7 ", meta.meetupArea.pincode] })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, customTabs: toCustomSectionTabs(p.customSections) })), renderBuyBar: () => (_jsx(Stack, { id: "classified-contact-bar", className: "p-[var(--appkit-space-5)]", border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: offersAvailable && offerBounds ? (_jsxs(_Fragment, { children: [renderOfferAction({
                                         productId: String(product.id),
                                         price: price,
                                         currency,

package/dist/features/digital-codes/components/DigitalCodeDetailPageView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link.js";
+import { OwnerQuickActions } from "../../../features/admin/components/OwnerQuickActions.js";
 import { getDigitalCodeForDetail } from "../../../_internal/server/features/digital-code/data.js";
 const CLS_BREADCRUMB_LINK = "hover:text-primary-600 dark:hover:text-primary-400 transition-colors";
 const CLS_DIGITALCODE_BADGE = "inline-block rounded-full bg-violet-100 dark:bg-violet-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-violet-700 dark:text-violet-300";
@@ -21,6 +22,7 @@ import { GroupedListingsCarousel } from "../../grouped/components/GroupedListing
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data.js";
 import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel.js";
 import { ListingBottomActions } from "../../products/components/ListingBottomActions.js";
+import { productImageUrls } from "../../products/schemas/firestore.js";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -41,7 +43,15 @@ export async function DigitalCodeDetailPageView({ slug, initialProduct, renderPr
     const currency = p.currency || getDefaultCurrency();
     const title = String(p.title ?? p.name ?? "Digital Code");
     const price = typeof p.price === "number" ? p.price : null;
-    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    // `images` is `ProductImage[]` since A6 — `productImageUrls` is the one
+    // normaliser (it also accepts the legacy `string[]`). Casting it to
+    // `string[]` handed the gallery objects and rendered a placeholder.
+    const galleryUrls = productImageUrls(p.images);
+    const images = galleryUrls.length > 0
+        ? galleryUrls
+        : typeof p.mainImage === "string"
+            ? [p.mainImage]
+            : [];
     const meta = product.digitalCode;
     const codesLeft = meta?.codesAvailable ?? 0;
     const category = Array.isArray(p.categorySlugs) && p.categorySlugs.length > 0 ? String(p.categorySlugs[0]) : (typeof p.category === "string" ? p.category : null);
@@ -64,7 +74,7 @@ export async function DigitalCodeDetailPageView({ slug, initialProduct, renderPr
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.DIGITAL_CODES), className: CLS_BREADCRUMB_LINK, children: "Digital Codes" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_DIGITALCODE_BADGE, children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: [codesLeft, " available"] })) : (_jsx(Span, { size: "xs", weight: "semibold", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "danger-surface", color: "error", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), meta?.redemptionInstructions && (_jsx(Text, { size: "xs", color: "muted", children: meta.redemptionInstructions })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: toCustomSectionTabs(p.customSections) })), renderBuyBar: () => (_jsx(Div, { id: "digital-code-buy-bar", children: renderPrimaryActions?.({
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.DIGITAL_CODES), className: CLS_BREADCRUMB_LINK, children: "Digital Codes" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_DIGITALCODE_BADGE, children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: [codesLeft, " available"] })) : (_jsx(Span, { size: "xs", weight: "semibold", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "danger-surface", color: "error", children: "Sold out" }))] }), _jsx(OwnerQuickActions, { resource: "PRODUCT", placement: "detail", recordLabel: String(p.title ?? p.slug ?? p.id), storeId: p.storeId ? String(p.storeId) : undefined, editHref: String(ROUTES.STORE.PRODUCTS_EDIT(String(p.id))) }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), meta?.redemptionInstructions && (_jsx(Text, { size: "xs", color: "muted", children: meta.redemptionInstructions })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: toCustomSectionTabs(p.customSections) })), renderBuyBar: () => (_jsx(Div, { id: "digital-code-buy-bar", children: renderPrimaryActions?.({
                                 productId: String(product.id),
                                 productSlug: String(p.slug ?? product.id),
                                 productTitle: title,

package/dist/features/events/components/EventCard.d.ts

@@ -12,6 +12,16 @@ interface EventCardProps {
     selectable?: boolean;
     isSelected?: boolean;
     onSelect?: (id: string, selected: boolean) => void;
+    /**
+     * Owner-only pencil / clone / bin, for an admin or whoever owns this record.
+     * Pass `<OwnerQuickActions>`; it renders nothing for anyone else.
+     *
+     * 🛑 Rendered OUTSIDE this card's own `<Link>`/`<TextLink>`, as a sibling.
+     * A `<button>` inside an `<a>` is invalid HTML that browsers resolve by
+     * closing the anchor early, which breaks the CARD's navigation rather than
+     * just the button's — `stopPropagation` stops a click but cannot fix a parse.
+     */
+    renderOwnerActions?: () => React.ReactNode;
 }
-export declare function EventCard({ event, labels, onParticipate, className, selectable, isSelected, onSelect, }: EventCardProps): import("react").JSX.Element;
+export declare function EventCard({ event, labels, onParticipate, className, selectable, isSelected, onSelect, renderOwnerActions, }: EventCardProps): import("react").JSX.Element;
 export {};

package/dist/features/events/components/EventCard.js

@@ -24,7 +24,7 @@ const TYPE_ICONS = {
     spin_wheel: "🎡",
     lottery: "🎰",
 };
-export function EventCard({ event, labels = {}, onParticipate, className = "", selectable = false, isSelected = false, onSelect, }) {
+export function EventCard({ event, labels = {}, onParticipate, className = "", selectable = false, isSelected = false, onSelect, renderOwnerActions, }) {
     const longPress = useLongPress(() => onSelect?.(event.id, !isSelected));
     const safeTitle = event.title?.trim() || "Untitled event";
     const now = new Date();
@@ -32,6 +32,13 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", s
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
     const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
-    return (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+    const card = (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
                                 daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
+    if (!renderOwnerActions)
+        return card;
+    /*
+     * Sibling of the card, never a child — see the prop's docstring. `z-20`
+     * beats this card's own overlays, which all sit at `z-10`.
+     */
+    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: renderOwnerActions() })] }));
 }

package/dist/features/grouped/components/GroupedListingDetailView.js

@@ -4,6 +4,8 @@ import { Container, Div, Heading, Section, Span, Stack, Text, } from "../../../u
 import { MediaImage } from "../../media/MediaImage.js";
 import { GroupMemberPicker } from "../../products/components/GroupMemberPicker.js";
 import { readGroupRules } from "../../../_internal/shared/features/products/group-rules.js";
+import { OwnerQuickActions } from "../../../features/admin/components/OwnerQuickActions.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
 const __O = { hidden: "overflow-hidden" };
 /** Human label per theme — mirrors GROUP_THEME_TITLE on the carousel. */
 const THEME_LABEL = {
@@ -14,7 +16,7 @@ const THEME_LABEL = {
     generic: "Grouped listing",
 };
 export function GroupedListingDetailView({ group, members }) {
-    return (_jsx(Section, { padding: "section", children: _jsx(Container, { children: _jsxs(Stack, { gap: "comfortable", children: [group.coverImage && (_jsx(Div, { className: `relative h-48 w-full md:h-64 ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: group.coverImage, alt: group.title, size: "banner" }) })), _jsxs(Stack, { gap: "xs", children: [_jsx(Span, { size: "xs", color: "muted", transform: "uppercase", weight: "semibold", children: THEME_LABEL[group.groupTheme] }), _jsx(Heading, { level: 1, children: group.title }), group.description && (_jsx(Text, { color: "muted", children: group.description })), _jsxs(Text, { size: "sm", color: "muted", children: [members.length, " item", members.length === 1 ? "" : "s", " in this group"] })] }), members.length > 0 ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", children: "Pick what you want" }), _jsx(Text, { size: "sm", color: "muted", children: "Choose a quantity for each item \u2014 they'll go into your cart as a single line you can edit later." }), _jsx(GroupMemberPicker, { groupId: group.id, groupSource: "grouped-listing", members: members, 
+    return (_jsx(Section, { padding: "section", children: _jsx(Container, { children: _jsxs(Stack, { gap: "comfortable", children: [group.coverImage && (_jsx(Div, { className: `relative h-48 w-full md:h-64 ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: group.coverImage, alt: group.title, size: "banner" }) })), _jsxs(Stack, { gap: "xs", children: [_jsx(Span, { size: "xs", color: "muted", transform: "uppercase", weight: "semibold", children: THEME_LABEL[group.groupTheme] }), _jsx(OwnerQuickActions, { resource: "GROUP", placement: "detail", recordLabel: String(group.title), storeId: group.storeId ? String(group.storeId) : undefined, editHref: String(ROUTES.ADMIN.GROUPED_LISTINGS_EDIT(String(group.id))) }), _jsx(Heading, { level: 1, children: group.title }), group.description && (_jsx(Text, { color: "muted", children: group.description })), _jsxs(Text, { size: "sm", color: "muted", children: [members.length, " item", members.length === 1 ? "" : "s", " in this group"] })] }), members.length > 0 ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", children: "Pick what you want" }), _jsx(Text, { size: "sm", color: "muted", children: "Choose a quantity for each item \u2014 they'll go into your cart as a single line you can edit later." }), _jsx(GroupMemberPicker, { groupId: group.id, groupSource: "grouped-listing", members: members, 
                                 /*
                                  * Off the group document this view already loaded. The picker
                                  * and `addGroupLineToCart` run the SAME `checkGroupRules`, so