@mohasinac/appkit 4.13.0 → 4.14.0

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

@@ -1,74 +1,71 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
-import { Button, Div, Input, LoginRequiredModal, Modal, Span, Stack, Text } from "../../../ui";
+import { Button, Div, LoginRequiredModal, Modal, Span, Stack, Text, } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { applyZodIssues } from "../../../ui/forms/FormShell";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { makeOfferFormSchema } from "../../seller/schemas/offer-forms";
+import { DEFAULT_MIN_OFFER_PERCENT, minOfferAmount, } from "../../../_internal/shared/features/offers/config";
 import { isAuthError } from "../../../utils/auth-error";
-import { formatCurrency, roundRupees } from "../../../utils/number.formatter";
+import { formatCurrency } from "../../../utils/number.formatter";
 import { normalizeError } from "../../../errors/normalize";
 const CLS_SUCCESS_BOX = "rounded-xl border border-success dark:border-success bg-success-surface p-[var(--appkit-space-4)] text-left space-y-1";
 const CLS_PENDING_BOX = "rounded-xl border border-warning dark:border-warning bg-warning-surface dark:bg-warning-surface p-[var(--appkit-space-4)] text-left space-y-1";
 const CLS_PENDING_TITLE = "text-[length:var(--appkit-text-sm)] font-medium text-warning dark:text-warning";
 const CLS_PENDING_BODY = "text-[length:var(--appkit-text-xs)] text-warning dark:text-warning";
+/**
+ * "You already have an offer on this listing" is a legitimate, expected outcome
+ * rather than a failure, so it gets its own panel instead of an error message —
+ * but the server signals it through an ordinary rejection, so it has to be
+ * recognised from the message. Matched on both the human string and the error
+ * code because `makeOffer` throws `ERROR_MESSAGES.OFFER.ACTIVE_OFFER_EXISTS`
+ * while `OFFER_ERROR_CODES.ALREADY_ACTIVE` is what a coded rejection carries.
+ */
 function isActiveOfferError(msg) {
     return msg.includes("active offer") || msg.includes("ACTIVE_OFFER");
 }
-export function MakeOfferButton({ productId, listedPrice, currency, minOfferPercent = 70, onMakeOffer, className = "", }) {
+export function MakeOfferButton({ productId, listedPrice, currency, minOfferPercent = DEFAULT_MIN_OFFER_PERCENT, onMakeOffer, className = "", }) {
     const [state, setState] = useState("idle");
-    const [errorMsg, setErrorMsg] = useState("");
     const [showLoginModal, setShowLoginModal] = useState(false);
     const [isPending, startTransition] = useTransition();
-    const minOffer = roundRupees(listedPrice * (minOfferPercent / 100));
-    const defaultOffer = roundRupees(listedPrice * 0.9);
-    const [offerAmount, setOfferAmount] = useState(Math.max(defaultOffer, minOffer));
+    const fmt = (n) => (currency ? formatCurrency(n, currency) : `₹${n.toLocaleString()}`);
+    // The SAME floor the server enforces — shared so the input can never seed or
+    // accept an amount `makeOffer` would then reject.
+    const minOffer = minOfferAmount(listedPrice, minOfferPercent);
+    const schema = makeOfferFormSchema({ listedPrice, minOffer, formatAmount: fmt });
+    const [offerAmount, setOfferAmount] = useState(String(Math.max(minOfferAmount(listedPrice, 90), minOffer)));
     const [buyerNote, setBuyerNote] = useState("");
-    const fmt = (n) => currency ? formatCurrency(n, currency) : `₹${n.toLocaleString()}`;
-    function handleOpenConfirm() {
-        setState("confirm");
-    }
-    function handleCancel() {
-        setState("idle");
-    }
-    function handleAmountChange(raw) {
-        const parsed = parseInt(raw.replace(/[^0-9]/g, ""), 10);
-        if (!isNaN(parsed))
-            setOfferAmount(parsed);
-    }
-    function handleOfferError(err) {
-        if (isAuthError(err)) {
-            setState("idle");
-            setShowLoginModal(true);
-        }
-        else {
-            const msg = err instanceof Error ? err.message : String(err);
-            if (isActiveOfferError(msg)) {
-                setState("pending");
-            }
-            else {
-                setErrorMsg(msg || "Could not send offer. Please try again.");
-                setState("error");
-            }
-        }
-    }
-    function handleSubmit() {
-        if (offerAmount < minOffer) {
-            setErrorMsg(`Minimum offer is ${fmt(minOffer)}`);
-            setState("error");
-            return;
-        }
-        if (offerAmount >= listedPrice) {
-            setErrorMsg(`Offer must be below the listed price of ${fmt(listedPrice)}`);
-            setState("error");
+    function submit(setFieldError, clearErrors) {
+        clearErrors();
+        const parsed = schema.safeParse({ offerAmount, buyerNote: buyerNote || undefined });
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
             return;
         }
-        setState("loading");
         startTransition(async () => {
             try {
-                await onMakeOffer(productId, offerAmount, buyerNote || undefined);
+                await onMakeOffer(productId, parsed.data.offerAmount, parsed.data.buyerNote);
                 setState("success");
             }
             catch (err) {
                 void normalizeError(err);
-                handleOfferError(err);
+                if (isAuthError(err)) {
+                    setState("idle");
+                    setShowLoginModal(true);
+                    return;
+                }
+                const msg = err instanceof Error ? err.message : String(err);
+                if (isActiveOfferError(msg)) {
+                    setState("pending");
+                    return;
+                }
+                // Server-side rejections land on the amount field — it is the only
+                // field the server can actually be objecting to, and Rule #9.6 wants
+                // them inline rather than in a banner.
+                setFieldError("offerAmount", msg || "Could not send offer. Please try again.");
             }
         });
     }
@@ -78,6 +75,8 @@ export function MakeOfferButton({ productId, listedPrice, currency, minOfferPerc
     if (state === "pending") {
         return (_jsxs(Div, { className: `${CLS_PENDING_BOX} ${className}`, children: [_jsx(Span, { size: "lg", children: "\u23F3" }), _jsx(Text, { className: CLS_PENDING_TITLE, children: "Offer Pending" }), _jsx(Text, { className: CLS_PENDING_BODY, children: "You already have an offer on this item. Check My Offers for updates." })] }));
     }
-    const modalOpen = state === "confirm" || state === "loading" || state === "error";
-    return (_jsxs(_Fragment, { children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to make an offer. Please log in or create an account to continue." }), _jsx(Button, { variant: "ghost", size: "md", border: "strong", className: `w-full ${className}`, onClick: handleOpenConfirm, children: "Make Offer" }), _jsx(Modal, { isOpen: modalOpen, onClose: handleCancel, size: "md", title: "Make an offer", actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancel, disabled: isPending, children: "Cancel" }), _jsx(Button, { variant: "primary", size: "sm", onClick: handleSubmit, disabled: isPending || offerAmount < minOffer, children: isPending ? "Sending…" : `Send offer of ${fmt(offerAmount)}` })] }), children: _jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Your offer amount" }), _jsx(Input, { type: "number", value: String(offerAmount), onChange: (e) => handleAmountChange(e.target.value), min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { size: "xs", color: "faint", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Note to seller (optional)" }), _jsx(Input, { type: "text", value: buyerNote, onChange: (e) => setBuyerNote(e.target.value), placeholder: "E.g. Bundle deal, long-time fan\u2026", maxLength: 300, "aria-label": "Note to seller" })] }), _jsx(Text, { size: "xs", color: "muted", children: "The seller will accept, decline, or suggest a counter price." }), state === "error" && (_jsx(Text, { className: "text-error", size: "xs", children: errorMsg }))] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to make an offer. Please log in or create an account to continue." }), _jsx(Button, { variant: "ghost", size: "md", border: "strong", className: `w-full ${className}`, onClick: () => setState("open"), children: "Make Offer" }), _jsx(Modal, { isOpen: state === "open", onClose: () => setState("idle"), size: "md", title: "Make an offer", children: _jsx(Form, { onSubmit: (e) => e.preventDefault(), children: ({ setFieldError, clearErrors }) => (_jsxs(Stack, { gap: "md", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Listed at ", fmt(listedPrice), " \u00B7 Minimum offer: ", fmt(minOffer)] }), _jsx(FieldInput, { name: "offerAmount", type: "number", label: "Your offer amount", required: true, value: offerAmount, onChange: (value) => {
+                                    setOfferAmount(value);
+                                    clearErrors();
+                                }, min: minOffer, max: listedPrice - 1, step: 1, "aria-label": "Offer amount" }), _jsxs(Text, { size: "xs", color: "faint", children: ["Must be between ", fmt(minOffer), " and ", fmt(listedPrice - 1)] }), _jsx(FieldInput, { name: "buyerNote", type: "text", label: "Note to seller (optional)", value: buyerNote, onChange: setBuyerNote, placeholder: "E.g. Bundle deal, long-time fan\u2026", maxLength: 300, "aria-label": "Note to seller" }), _jsx(Text, { size: "xs", color: "muted", children: "The seller will accept, decline, or suggest a counter price." }), _jsx(FormErrorSummary, {}), _jsxs(Stack, { gap: "xs", children: [_jsx(Button, { action: ACTIONS.PRODUCT["make-offer"], variant: "primary", size: "sm", type: "button", isLoading: isPending, disabled: isPending, onClick: () => submit(setFieldError, clearErrors), children: isPending ? "Sending…" : `Send offer of ${fmt(Number(offerAmount) || 0)}` }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setState("idle"), disabled: isPending, children: "Cancel" })] })] })) }) })] }));
 }

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

@@ -1,10 +1,26 @@
 import React from "react";
 import type { PrizeDrawItem } from "../schemas/firestore";
-export interface PrizeDrawCollageProps {
-    items: PrizeDrawItem[];
+/**
+ * The subset of a prize this collage actually renders.
+ *
+ * Declared structurally, and deliberately narrower than `PrizeDrawItem`, so a
+ * lottery slot can be mapped onto it without inventing the fields it does not
+ * have (`condition` is required on `PrizeDrawItem`; a lottery slot has no such
+ * concept, and faking one would be a shape lie). `PrizeDrawItem` already
+ * satisfies this interface, so every existing caller is unaffected.
+ */
+export interface CollagePrizeItem {
+    itemNumber: number;
+    title: string;
+    images?: string[];
+    estimatedValue?: number;
+    isWon?: boolean;
+}
+export interface PrizeDrawCollageProps<T extends CollagePrizeItem = PrizeDrawItem> {
+    items: T[];
     highlightItemNumber?: number;
     /** Custom click handler — overrides the built-in lightbox. */
-    onItemClick?: (item: PrizeDrawItem) => void;
+    onItemClick?: (item: T) => void;
     /** Defaults to "Won". Use for localisation. */
     wonLabel?: string;
     /**
@@ -15,5 +31,5 @@ export interface PrizeDrawCollageProps {
      */
     hideWonState?: boolean;
 }
-export declare function PrizeDrawCollage({ items, highlightItemNumber, onItemClick, wonLabel, hideWonState, }: PrizeDrawCollageProps): React.JSX.Element;
+export declare function PrizeDrawCollage<T extends CollagePrizeItem = PrizeDrawItem>({ items, highlightItemNumber, onItemClick, wonLabel, hideWonState, }: PrizeDrawCollageProps<T>): React.JSX.Element;
 export default PrizeDrawCollage;

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

@@ -55,7 +55,15 @@ export function PrizeDrawCollage({ items, highlightItemNumber, onItemClick, wonL
                     const cover = it.images?.[0];
                     const isHighlight = highlightItemNumber === it.itemNumber;
                     return (_jsxs(Button, { variant: "ghost", type: "button", onClick: makePrizeItemClickHandler(it, idx, onItemClick, setLightboxIndex), rounded: "lg", paddingX: "none", paddingY: "none", className: [
-                            "group relative overflow-hidden border bg-[var(--appkit-color-surface)] text-left transition-transform",
+                            // `flex-col items-stretch` reaches the real children only because
+                            // `.appkit-button__content` declares `flex-direction: inherit` /
+                            // `align-items: inherit`. Without them the square tile and the caption
+                            // become side-by-side row items and the tile shrinks to ~half width.
+                            // `items-stretch` is load-bearing: the span would otherwise inherit
+                            // `center` from `.appkit-button` and the caption would ignore `text-left`.
+                            // Never add a bare `block` / `flex` / `hidden` utility here — see
+                            // Root Cause #68 and scripts/audit-primitive-child-wrappers.mjs.
+                            "group relative flex-col items-stretch overflow-hidden border bg-[var(--appkit-color-surface)] text-left transition-transform",
                             "border-[var(--appkit-color-border)]",
                             isHighlight
                                 ? "ring-2 ring-offset-2 ring-[var(--appkit-color-primary)] scale-[1.02]"

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

@@ -11,7 +11,9 @@ import { MarketplacePrizeDrawCard } from "./MarketplacePrizeDrawCard";
 import { ProductFilters } from "./ProductFilters";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys";
 import { PRIZE_DRAW_SORT_OPTIONS } from "../constants/sieve";
-import { PRODUCT_FIELDS } from "../../../constants/field-names";
+import { AVAILABILITY_VALUES } from "../../../constants/field-names";
+import { AvailabilityTabs } from "./AvailabilityTabs";
+const PRIZE_DRAW_LISTING_TYPES = ["prize-draw"];
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -28,7 +30,8 @@ export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, s
     const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
-    const showClosed = table.get(TABLE_KEYS.SHOW_CLOSED) === "true";
+    const availability = table.get(TABLE_KEYS.AVAILABILITY) ||
+        AVAILABILITY_VALUES.AVAILABLE;
     const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
     const { categories } = useCategoryTree();
     const categoryOptions = categoriesToFacetOptions(categories);
@@ -43,11 +46,11 @@ export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, s
         setFilterOpen(false);
     }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        onResetAll({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" });
+        onResetAll({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.AVAILABILITY]: "" });
         setSearchInput("");
     }, [onResetAll]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
-        showClosed ||
+        availability !== AVAILABILITY_VALUES.AVAILABLE ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         filterActiveCount > 0;
     const revealFilter = (table.get(TABLE_KEYS.PRIZE_REVEAL_STATUS) || undefined);
@@ -64,13 +67,14 @@ export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, s
         page: table.getNumber(TABLE_KEYS.PAGE, 1),
         perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
         listingType: "prize-draw",
+        availability,
     };
     const { products: draws, totalPages, page, isLoading } = useProducts(params, { initialData });
-    // When no explicit reveal-status filter is set, hide closed draws client-side
-    // as a UX default (showClosed toggle). Server handles explicit status filters.
-    const filteredDraws = !revealFilter && !showClosed
-        ? draws.filter((d) => d.prizeRevealStatus !== PRODUCT_FIELDS.PRIZE_REVEAL_STATUS_VALUES.CLOSED)
-        : draws;
+    // Closed draws used to be filtered out of the page HERE, client-side, after
+    // pagination — which silently shrank the grid below the page size and left
+    // `totalPages` counting rows the user could never see. The availability
+    // scope does it in the query instead, where the count is computed.
+    const filteredDraws = draws;
     const commitSearch = useCallback(() => {
         table.set(TABLE_KEYS.QUERY, searchInput.trim());
     }, [searchInput, table]);
@@ -86,9 +90,7 @@ export function PrizeDrawsIndexListing({ initialData, categorySlug, brandName, s
                         return;
                     setView(v);
                     table.set(TABLE_KEYS.VIEW, v);
-                }, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
-                    { label: "Show closed", active: showClosed, onChange: (next) => table.set(TABLE_KEYS.SHOW_CLOSED, 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: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : filteredDraws.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No prize draws found." })) : (_jsx(Div, { className: gridClass, children: filteredDraws.map((product) => (_jsx(MarketplacePrizeDrawCard, { product: product, variant: view }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsxs(Stack, { gap: "md", children: [_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "prizeRevealStatusFilter", size: "xs", weight: "semibold", color: "muted", className: "block mb-1.5", children: "Reveal status" }), _jsx(Select, { id: "prizeRevealStatusFilter", options: [
+                }, onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: PRIZE_DRAW_LISTING_TYPES }) }), 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: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: "overflow-hidden animate-pulse", border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : filteredDraws.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "No prize draws found." })) : (_jsx(Div, { className: gridClass, children: filteredDraws.map((product) => (_jsx(MarketplacePrizeDrawCard, { product: product, variant: view }, product.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsxs(Stack, { gap: "md", children: [_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "prizeRevealStatusFilter", size: "xs", weight: "semibold", color: "muted", className: "block mb-1.5", children: "Reveal status" }), _jsx(Select, { id: "prizeRevealStatusFilter", options: [
                                         { value: "", label: "Any" },
                                         { value: "pending", label: "Reveal pending" },
                                         { value: "open", label: "Reveal open" },

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

@@ -3,7 +3,7 @@ import { Container, Main, Heading, Section, Text } from "../../../ui";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { PRODUCT_FIELDS } from "../../../constants/field-names";
 import { sortBy } from "../../../constants/sort";
-import { listPublicProducts, parsePublicProductParams, defaultTogglesForListingTypes, } from "../../../_internal/server/features/products/list-public";
+import { listPublicProducts, parsePublicProductParams, defaultAvailabilityForListingTypes, } from "../../../_internal/server/features/products/list-public";
 import { PrizeDrawsIndexListing } from "./PrizeDrawsIndexListing";
 const LISTING_TYPES = ["prize-draw"];
 const DEFAULT_PAGE_SIZE = 24;
@@ -29,7 +29,7 @@ export async function PrizeDrawsListingView({ searchParams = {}, }) {
         listingTypes: LISTING_TYPES,
         pageSize: DEFAULT_PAGE_SIZE,
         sorts: DEFAULT_SORT,
-        ...defaultTogglesForListingTypes(LISTING_TYPES),
+        ...defaultAvailabilityForListingTypes(LISTING_TYPES),
     }));
     return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-2", color: "primary", size: "3xl", weight: "semibold", children: "Prize Draws" }), _jsx(Text, { className: "mb-6 text-[var(--appkit-color-text-muted)]", size: "sm", children: "Fair-RNG draws for sealed Pok\u00E9mon, Hot Wheels Super Treasure Hunts, Gundam kits and more. Every winner picked by crypto.randomInt \u2014 proof on GitHub." }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(PrizeDrawsIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

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

@@ -4,6 +4,12 @@ export interface PrizeDrawsSectionProps {
 }
 /**
  * Renders a prize-draws strip on the homepage.
- * W1-38 (2026-05-23): fetches active prize-draw listings from productRepository.
+ *
+ * Until 2026-08-24 this read `config.title` / `config.subtitle` and ignored
+ * every other field it was given — `revealStatus`, `maxItems`, `storeId`,
+ * `showCountdown` and `showEntriesRemaining` were all inert, with the count
+ * hardcoded to 8. `revealStatus` mattering most: the seeded value is `"all"`,
+ * which is why a closed, already-revealed draw sat on the homepage advertising
+ * entries nobody could buy.
  */
 export declare function PrizeDrawsSection({ config, }: PrizeDrawsSectionProps): Promise<import("react").JSX.Element | null>;

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

@@ -1,32 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
-import { sieveFilter, sieveAnd, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import { Container, Div, Heading, Section, Stack, Text, } from "../../../ui";
 import { ROUTES } from "../../../next";
-import { productRepository } from "../repository/products.repository";
+import { listPublicProducts } from "../../../_internal/server/features/products/list-public";
+import { AVAILABILITY_VALUES, PRODUCT_FIELDS } from "../../../constants/field-names";
 import { InteractiveProductCard } from "./InteractiveProductCard";
 /**
  * Renders a prize-draws strip on the homepage.
- * W1-38 (2026-05-23): fetches active prize-draw listings from productRepository.
+ *
+ * Until 2026-08-24 this read `config.title` / `config.subtitle` and ignored
+ * every other field it was given — `revealStatus`, `maxItems`, `storeId`,
+ * `showCountdown` and `showEntriesRemaining` were all inert, with the count
+ * hardcoded to 8. `revealStatus` mattering most: the seeded value is `"all"`,
+ * which is why a closed, already-revealed draw sat on the homepage advertising
+ * entries nobody could buy.
  */
 export async function PrizeDrawsSection({ config, }) {
     const title = config.title ?? "Prize Draws";
     const subtitle = config.subtitle ?? "Enter for a chance to win rare collectibles";
-    const limit = 8;
-    let draws = [];
-    try {
-        const result = await productRepository.list({
-            filters: sieveAnd(sieveFilter("listingType", SIEVE_OP.EQ, "prize-draw"), sieveFilter("status", SIEVE_OP.EQ, "published")),
-            sorts: sortBy("createdAt", "DESC"),
-            pageSize: limit,
-        });
-        draws = (result.items ?? []);
-    }
-    catch (_err) {
-        void normalizeError(_err);
-        draws = [];
-    }
+    const revealStatus = config.revealStatus ?? "open";
+    const showAll = revealStatus === "all";
+    const result = await listPublicProducts({
+        listingTypes: [PRODUCT_FIELDS.LISTING_TYPE_VALUES.PRIZE_DRAW],
+        storeId: config.storeId,
+        // "all" means the admin deliberately wants closed draws too — an archive
+        // strip — so neither the status filter nor the availability scope applies.
+        prizeRevealStatus: showAll ? undefined : revealStatus,
+        availability: showAll ? AVAILABILITY_VALUES.ALL : AVAILABILITY_VALUES.AVAILABLE,
+        sorts: sortBy(PRODUCT_FIELDS.CREATED_AT, "DESC"),
+        page: 1,
+        pageSize: config.maxItems ?? 8,
+    });
+    const draws = (result?.items ?? []);
     if (draws.length === 0)
         return null;
     return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), _jsx(Div, { gap: "3", className: "fluid-grid-card", children: draws.map((draw) => (_jsx(InteractiveProductCard, { product: draw, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(draw.slug ?? draw.id ?? "")) }, draw.id))) })] }) }) }));

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

@@ -10,7 +10,10 @@ export interface ProductDetailPageViewProps {
     initialProduct?: import("../schemas/firestore").ProductDocument | null;
     /**
      * Render prop for offer UI. Receives the resolved product fields.
-     * Only called when product.allowOffers is true and product.type is "simple".
+     *
+     * Called only when all three offer gates pass: the site-wide
+     * `featureFlags.offers`, the listing type's `canMakeOffer` capability, and the
+     * seller's own `product.allowOffers` opt-in.
      */
     renderOfferAction?: (opts: {
         productId: string;

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

@@ -40,6 +40,10 @@ import { RelatedItemsSection } from "./RelatedItemsSection";
 import { computeRelatedItems, getReviewPageForProduct } from "../../../_internal/server/features/products/data";
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
+import { getSiteSettingsGlobal } from "../../admin/utils/getSiteSettingsGlobal";
+import { canMakeOffer } from "../../../_internal/shared/listing-types/capabilities";
+import { normalizeListingType } from "../utils/listing-type";
+import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -145,8 +149,14 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
         ? p.customSections
         : [];
     const allowOffers = p.allowOffers === true;
-    const productType = typeof p.type === "string" ? p.type : "simple";
-    const minOfferPercent = typeof p.minOfferPercent === "number" ? p.minOfferPercent : 70;
+    // Was `p.type === "simple"`. `ProductDocument` has no `type` field at all —
+    // the check passed only because the `?? "simple"` fallback made it vacuously
+    // true, so it was a gate that could never fail and could never be right.
+    // `listingType` is the real discriminator.
+    const offerableType = canMakeOffer(normalizeListingType(p));
+    const minOfferPercent = typeof p.minOfferPercent === "number"
+        ? p.minOfferPercent
+        : DEFAULT_MIN_OFFER_PERCENT;
     const shippingInfo = typeof p.shippingInfo === "string" ? p.shippingInfo : null;
     const returnPolicy = typeof p.returnPolicy === "string" ? p.returnPolicy : null;
     const shippingPaidBy = p.shippingPaidBy;
@@ -166,11 +176,15 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const storeId = typeof p.storeId === "string" ? p.storeId : null;
     // -- Fetch reviews + the shared 4-signal related-items computation + grouped listings in parallel --
     // Only page 1 of reviews is fetched here; <ReviewsListingPanel> pages the rest client-side.
-    const [initialReviews, related, groups] = await Promise.all([
+    const [initialReviews, related, groups, siteSettings] = await Promise.all([
         getReviewPageForProduct(product.id),
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
+        getSiteSettingsGlobal().catch(() => null),
     ]);
+    // Site-wide kill switch. Absent/unreadable settings mean ON — a failed
+    // settings read must not silently remove a working feature.
+    const offersEnabled = siteSettings?.featureFlags?.offers !== false;
     const { relatedItems, relatedByBrand, relatedByTags, relatedByStore } = related;
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: product.id, productType: "product", snapshot: {
                     title: product.title,
@@ -218,7 +232,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                             storeName: typeof p.storeName === "string" ? p.storeName : undefined,
                                             inStock,
                                             variant: "desktop",
-                                        })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: "\u2661 Add to Wishlist" })] })), allowOffers && productType === "simple" && price !== null && renderOfferAction?.({
+                                        })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: "\u2661 Add to Wishlist" })] })), allowOffers && offerableType && offersEnabled && price !== null && renderOfferAction?.({
                                             productId: product.id,
                                             price,
                                             currency,

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

@@ -10,6 +10,7 @@ import { ProductFeaturesSelector } from "./ProductFeaturesSelector";
 import { ImageUpload, MediaUploadField, MediaUploadList, } from "../../media";
 import { useMediaUpload } from "../../media";
 import { resolveDate } from "../../../utils/date.formatter";
+import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { isAuctionListing, isPreOrderListing, isPrizeDrawListing, normalizeListingType, } from "../utils/listing-type";
@@ -141,8 +142,10 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                     ? "Required for live listings — buyers must see the actual animal/plant moving before purchase."
                     : t("formVideoHelper"), onAbort: onMediaAbort })), _jsx(TagInput, { label: t("formTags"), value: product.tags || [], onChange: (tags) => update({ tags }), disabled: isReadonly, placeholder: t("formTagsPlaceholder") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Checkbox, { label: t("formFeatured"), checked: !!product.featured, onChange: (e) => update({ featured: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formIsPromoted"), checked: !!product.isPromoted, onChange: (e) => update({ isPromoted: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formAllowShipBeforeEmiComplete"), checked: !!product.allowShipBeforeEmiComplete, onChange: (e) => update({ allowShipBeforeEmiComplete: e.target.checked }), disabled: isReadonly }), _jsx(Checkbox, { label: t("formAllowOffers"), checked: !!product.allowOffers, onChange: (e) => update({
                             allowOffers: e.target.checked,
-                            minOfferPercent: e.target.checked ? product.minOfferPercent ?? 50 : undefined,
-                        }), disabled: isReadonly })] }), product.allowOffers && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAllowOffersHelp"), children: t("formAllowOffersHelp") }), _jsx(FormField, { name: "minOfferPercent", label: t("formMinOfferPercent"), type: "number", value: String(product.minOfferPercent ?? ""), onChange: (value) => update({ minOfferPercent: Number(value) }), disabled: isReadonly, placeholder: "50" })] })), _jsx(Heading, { level: 4, className: "mt-4", children: t("sectionTaxGst") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "gstRate", label: t("formGstRate"), type: "select", 
+                            minOfferPercent: e.target.checked
+                                ? product.minOfferPercent ?? DEFAULT_MIN_OFFER_PERCENT
+                                : undefined,
+                        }), disabled: isReadonly })] }), product.allowOffers && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAllowOffersHelp"), children: t("formAllowOffersHelp") }), _jsx(FormField, { name: "minOfferPercent", label: t("formMinOfferPercent"), type: "number", value: String(product.minOfferPercent ?? ""), onChange: (value) => update({ minOfferPercent: Number(value) }), disabled: isReadonly, placeholder: String(DEFAULT_MIN_OFFER_PERCENT) })] })), _jsx(Heading, { level: 4, className: "mt-4", children: t("sectionTaxGst") }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "gstRate", label: t("formGstRate"), type: "select", 
                         // Unset is semantically "exempt" (see ProductDocument.gstRate JSDoc),
                         // same as 0% — default the control to 0 so the select stays a fixed
                         // 5-option enum instead of adding a 6th "unset" placeholder entry.

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

@@ -25,6 +25,11 @@ const CLS_BADGE_NEW = "rounded-full bg-error-solid px-[var(--appkit-space-2)] py
 const CLS_BADGE_SALE = "rounded-full bg-success-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-success-on-solid shadow-sm";
 const CLS_BADGE_TRENDING = "rounded-full bg-indigo-600 px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-white shadow-sm";
 const CLS_BADGE_LIMITED = "rounded-full bg-info-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-info-on-solid shadow-sm";
+// Overlay badge sitting on the product photo, so the pairing is `-solid` +
+// `-on-solid` (Root Cause #67) — never `text-white` on a status colour, which
+// inverts with the theme. `warning` because success/info/error are each already
+// taken by a sibling pill in this same stack.
+const CLS_BADGE_OFFERABLE = "rounded-full bg-warning-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[10px] font-bold text-warning-on-solid shadow-sm";
 const CLS_HEART_ACTIVE = "bg-[var(--appkit-color-surface-elevated)]/90 text-error hover:bg-[var(--appkit-color-surface-elevated)]";
 const CLS_HEART_IDLE = "bg-[var(--appkit-color-surface-elevated)]/90 text-[var(--appkit-color-text-muted)] hover:text-error hover:bg-[var(--appkit-color-surface-elevated)]";
 const CLS_STAR = "text-[11px] text-warning";
@@ -68,7 +73,7 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
             .filter(Boolean)
             .join(" "), children: [_jsxs(Div, { className: `relative ${__O.hidden} aspect-square`, surface: "subtle", children: [product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", className: "transition-transform duration-500 group-hover:scale-105" })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", children: "\uD83D\uDECD\uFE0F" }) })), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(product.id); }, label: isSelected ? "Deselect" : "Select", position: "top-2 left-2", className: selectionMode || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Stack, { className: `absolute top-2 ${onSelect ? "left-10" : "left-2"}`, gap: "xs", children: !selectionMode && !isSelected && (_jsxs(_Fragment, { children: [discount && (_jsxs(Span, { weight: "bold", className: CLS_BADGE_NEW, children: ["-", discount, "%"] })), typeBadge && (_jsx(Span, { weight: "bold", className: `text-[10px] ${typeBadge.cls}`, rounded: "full", padding: "pill-xs", shadow: "sm", children: typeBadge.label })), product.partOfBundleIds && product.partOfBundleIds.length > 0 && (_jsx(Span, { className: CLS_BADGE_SALE, title: product.partOfBundleTitles && product.partOfBundleTitles.length > 0
                                         ? `In bundle: ${product.partOfBundleTitles[0]}`
-                                        : "In a bundle", children: "Bundled" })), product.groupId && (_jsx(Span, { className: CLS_BADGE_TRENDING, title: product.groupTitle ? `Part of set: ${product.groupTitle}` : "Part of a set", children: product.isGroupParent ? "Set Parent" : "In Set" })), product.sublistingCategoryId && (_jsx(Span, { className: CLS_BADGE_LIMITED, title: "Has variants or sub-listings", children: "Has Variants" }))] })) }), _jsx(BaseListingCard.IconOverlay, { groupIcon: product.groupIcon, sublistingIcon: product.sublistingIcon, position: "bottom-2 right-2" }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+                                        : "In a bundle", children: "Bundled" })), product.groupId && (_jsx(Span, { className: CLS_BADGE_TRENDING, title: product.groupTitle ? `Part of set: ${product.groupTitle}` : "Part of a set", children: product.isGroupParent ? "Set Parent" : "In Set" })), product.allowOffers && (_jsx(Span, { className: CLS_BADGE_OFFERABLE, title: "The seller accepts offers on this listing", children: "Taking Offers" })), product.sublistingCategoryId && (_jsx(Span, { className: CLS_BADGE_LIMITED, title: "Has variants or sub-listings", children: "Has Variants" }))] })) }), _jsx(BaseListingCard.IconOverlay, { groupIcon: product.groupIcon, sublistingIcon: product.sublistingIcon, position: "bottom-2 right-2" }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
                             onAddToWishlist(product.id);

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

@@ -29,7 +29,9 @@ import { PRODUCT_FIELDS } from "../../../constants/field-names";
 import { useBottomActions } from "../../layout";
 import { GENERIC_PRODUCT_LISTING_TYPES, PRODUCT_TYPE_FILTER_TABS } from "../constants/listing-tabs";
 import { parseSelectedListingTypes } from "../utils/listing-type";
-import { commonSortOptionsFor, hideDefaultsFor } from "../../../_internal/shared/listing-types/_registry";
+import { commonSortOptionsFor } from "../../../_internal/shared/listing-types/_registry";
+import { AVAILABILITY_VALUES } from "../../../constants/field-names";
+import { AvailabilityTabs } from "./AvailabilityTabs";
 import { TextLink } from "../../../ui";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -47,7 +49,6 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
     const [compareIds, setCompareIds] = useState([]);
-    const showSold = table.get(TABLE_KEYS.SHOW_SOLD) === "true";
     const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
     // ── Type filter (multi-select) ───────────────────────────────────────────
     // The URL value is a pipe-joined set; empty means "every type this page
@@ -68,12 +69,11 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     const effectiveSort = sortOptions.some((o) => o.value === sortValue)
         ? sortValue
         : DEFAULT_SORT;
-    // Which "Show X" toggles are meaningful for the current selection. A mixed
-    // set can need both (products sell out, auctions end).
-    const hideDefaults = hideDefaultsFor(effectiveTypes);
-    const showsSoldToggle = hideDefaults.includes("sold");
-    const showsEndedToggle = hideDefaults.includes("ended") || hideDefaults.includes("closed");
-    const showEnded = table.get(TABLE_KEYS.SHOW_ENDED) === "true";
+    // The availability scope. Absent means "available" — the same default
+    // `defaultAvailabilityForListingTypes` resolves server-side, which is what
+    // keeps the SSR paint and the first refetch in agreement (Root Cause #30).
+    const availability = table.get(TABLE_KEYS.AVAILABILITY) ||
+        AVAILABILITY_VALUES.AVAILABLE;
     // "Full <type> filters →" — a single selected type with a dedicated browse
     // page gets a link to it, since that page carries facets this generic one
     // can't (bid range, delivery-date window, reveal status).
@@ -96,15 +96,13 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
         onResetAll({
             [TABLE_KEYS.QUERY]: "",
             [TABLE_KEYS.SORT]: "",
-            [TABLE_KEYS.SHOW_SOLD]: "",
-            [TABLE_KEYS.SHOW_ENDED]: "",
+            [TABLE_KEYS.AVAILABILITY]: "",
             [TABLE_KEYS.LISTING_TYPE]: "",
         });
         setSearchInput("");
     }, [onResetAll]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
-        table.get(TABLE_KEYS.SHOW_SOLD) === "true" ||
-        table.get(TABLE_KEYS.SHOW_ENDED) === "true" ||
+        availability !== AVAILABILITY_VALUES.AVAILABLE ||
         !!typeParam ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
         filterActiveCount > 0;
@@ -136,16 +134,12 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
         // Pipe-joined OR-group — sievejs parses it as a same-field OR and the
         // Firebase adapter upgrades it to a `.where(…, "in", …)` query.
         listingType: effectiveTypes.join("|"),
-        // Hide sold-out items by default, but only when a sold-out-able type is in
-        // play — an auction has no meaningful stock, so applying it to an
-        // auctions-only view would hide every live auction.
-        inStock: showsSoldToggle && !showSold ? true : undefined,
-        // Same shape for time-boxed types. `dateFrom` only takes effect when
-        // exactly one type is selected (there is no single end-date field shared
-        // across types), which `dateFieldFor` already enforces server-side.
-        dateFrom: showsEndedToggle && !showEnded && selectedTypes.length === 1
-            ? new Date().toISOString()
-            : undefined,
+        // One scope for every type. The per-type meaning of "unavailable" — sold
+        // out, ended, closed, depleted — is resolved server-side from the listing
+        // -type registry, which is why this no longer needs the old
+        // "only when exactly one type is selected" caveat that let ended auctions
+        // leak into the default /products view.
+        availability,
     };
     const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
     const selection = useBulkSelection({ items: products, keyExtractor: (p) => p.id });
@@ -259,21 +253,17 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
                 },
             ] } } : {});
     return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: effectiveSort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, toggles: [
-                    // Each toggle appears only when it means something for the selected
-                    // types — "Show ended" against a Products-only view would be noise,
-                    // and "Show sold" against an Auctions-only view is meaningless.
-                    ...(showsSoldToggle
-                        ? [{ label: "Show sold", active: showSold, onChange: (next) => table.set(TABLE_KEYS.SHOW_SOLD, next ? "true" : "") }]
-                        : []),
-                    ...(showsEndedToggle
-                        ? [{ label: "Show ended", active: showEnded, onChange: (next) => table.set(TABLE_KEYS.SHOW_ENDED, next ? "true" : "") }]
-                        : []),
+                    // "Show sold" / "Show ended" used to live here. They WIDENED the
+                    // list rather than scoping it, so live and dead rows arrived mixed
+                    // together and the archive was unbrowsable — replaced by the
+                    // <AvailabilityTabs> scope bar below.
+                    //
                     // Inline quick-filter: the highest-frequency drawer-only facet promoted
                     // to the sticky toolbar so it doesn't require open-drawer → check → Apply
                     // → close for every toggle. The full facet set (category/price/brand/…)
                     // remains in <FilterDrawer> below.
                     { label: "Free shipping", active: table.get(TABLE_KEYS.FREE_SHIPPING) === "true", onChange: (next) => table.set(TABLE_KEYS.FREE_SHIPPING, next ? "true" : "") },
-                ] }), _jsx(Div, { padding: "y-sm", children: _jsxs(Row, { justify: "between", align: "center", wrap: true, gap: "sm", children: [_jsx(FilterChipGroup, { multiple: true, label: "Type", tabs: typeTabs, value: selectedTypes.join("|"), onChange: (next) => {
+                ] }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: effectiveTypes }) }), _jsx(Div, { padding: "y-sm", children: _jsxs(Row, { justify: "between", align: "center", wrap: true, gap: "sm", children: [_jsx(FilterChipGroup, { multiple: true, label: "Type", tabs: typeTabs, value: selectedTypes.join("|"), onChange: (next) => {
                                 // Clear `sort` alongside the type change: a sort valid for the
                                 // old selection (say -auctionEndDate) can be invalid for the new
                                 // one, and useUrlTable's single router.replace means we must set