@mohasinac/appkit 4.71.0 → 4.71.2

package/dist/features/collector-drops/components/CollectorDropFilters.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { FilterFacetSection } from "../../filters/FilterFacetSection.js";
+import { AsyncFacetSection } from "../../filters/AsyncFacetSection.js";
+import { RangeFilter } from "../../filters/RangeFilter.js";
+import { Div } from "../../../ui/components/Div.js";
+export function CollectorDropFilters({ table, categoryOptions = [], brandOptions = [], storeOptions = [], loadCategoryOptions, loadBrandOptions, loadStoreOptions, currencyPrefix = "", }) {
+    const t = useTranslations("filters");
+    const selectedCategories = table.get("category")
+        ? table.get("category").split("|").filter(Boolean)
+        : [];
+    const selectedBrands = table.get("brand") ? [table.get("brand")] : [];
+    const selectedStores = table.get("storeId")
+        ? table.get("storeId").split("|").filter(Boolean)
+        : [];
+    return (_jsxs(Div, { children: [loadCategoryOptions ? (_jsx(AsyncFacetSection, { title: t("category"), loadOptions: loadCategoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), defaultCollapsed: false })) : categoryOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("category"), options: categoryOptions, selected: selectedCategories, onChange: (vals) => table.set("category", vals.join("|")), searchable: true, defaultCollapsed: categoryOptions.length > 6 })) : null, loadBrandOptions ? (_jsx(AsyncFacetSection, { title: t("brand"), loadOptions: loadBrandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), defaultCollapsed: false })) : brandOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("brand"), options: brandOptions, selected: selectedBrands, onChange: (vals) => table.set("brand", vals[0] ?? ""), searchable: brandOptions.length > 4, defaultCollapsed: brandOptions.length > 6 })) : null, _jsx(RangeFilter, { title: t("bidPriceRange"), minValue: table.get("minBid"), maxValue: table.get("maxBid"), onMinChange: (v) => table.set("minBid", v), onMaxChange: (v) => table.set("maxBid", v), prefix: currencyPrefix, showSlider: true, minBound: 0, maxBound: 500000, step: 500, minPlaceholder: t("minBidPrice"), maxPlaceholder: t("maxBidPrice"), defaultCollapsed: false }), loadStoreOptions ? (_jsx(AsyncFacetSection, { title: t("store"), loadOptions: loadStoreOptions, selected: selectedStores, onChange: (vals) => table.set("storeId", vals[0] ?? ""), defaultCollapsed: false })) : storeOptions.length > 0 ? (_jsx(FilterFacetSection, { title: t("store"), options: storeOptions, selected: selectedStores, onChange: (vals) => table.set("storeId", vals[0] ?? ""), searchable: storeOptions.length > 4, defaultCollapsed: storeOptions.length > 6 })) : null, _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: false })] }));
+}

package/dist/features/collector-drops/components/CollectorDropLiveStatusBadge.d.ts

@@ -0,0 +1,20 @@
+export interface CollectorDropLiveStatusBadgeProps {
+    /** The collector drop's end timestamp — the only thing that decides this. */
+    collectorDropEndDate: Date | string | null;
+    /** The server's answer, used as the initial value so SSR and hydration agree. */
+    initialIsEnded: boolean;
+}
+/**
+ * Active / Ended, decided on the client.
+ *
+ * The server-rendered version of this badge sat directly above a countdown that
+ * already flipped itself to "Ended" — so a cached collector drop page could render
+ * `Ends in Ended` beside a green **Active** pill. The countdown was right and the
+ * badge was stale, in the same `<Stack>`.
+ *
+ * Extracted to a client component rather than passing a derived prop down,
+ * because `CollectorDropDetailPageView` is a Server Component and cannot hold the
+ * timer. Colours follow the status-pair rule (Root Cause #67): a theme-relative
+ * surface with its matching theme-relative ink, never a literal `text-white`.
+ */
+export declare function CollectorDropLiveStatusBadge({ collectorDropEndDate, initialIsEnded, }: CollectorDropLiveStatusBadgeProps): import("react").JSX.Element;

package/dist/features/collector-drops/components/CollectorDropLiveStatusBadge.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Span } from "../../../ui/components/Typography.js";
+import { useIsCollectorDropEnded } from "../hooks/useIsCollectorDropEnded.js";
+/**
+ * Active / Ended, decided on the client.
+ *
+ * The server-rendered version of this badge sat directly above a countdown that
+ * already flipped itself to "Ended" — so a cached collector drop page could render
+ * `Ends in Ended` beside a green **Active** pill. The countdown was right and the
+ * badge was stale, in the same `<Stack>`.
+ *
+ * Extracted to a client component rather than passing a derived prop down,
+ * because `CollectorDropDetailPageView` is a Server Component and cannot hold the
+ * timer. Colours follow the status-pair rule (Root Cause #67): a theme-relative
+ * surface with its matching theme-relative ink, never a literal `text-white`.
+ */
+export function CollectorDropLiveStatusBadge({ collectorDropEndDate, initialIsEnded, }) {
+    const isEnded = useIsCollectorDropEnded(collectorDropEndDate, initialIsEnded);
+    return isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }));
+}

package/dist/features/collector-drops/components/CollectorDropsListView.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
+type SearchParams = Record<string, string | string[]>;
+export interface CollectorDropsListViewProps {
+    searchParams?: SearchParams;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+}
+export declare function CollectorDropsListView({ searchParams, pageRegionCards, }: CollectorDropsListViewProps): Promise<import("react").JSX.Element>;
+export {};

package/dist/features/collector-drops/components/CollectorDropsListView.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container } from "../../../ui/components/Layout.js";
+import { Heading } from "../../../ui/components/Typography.js";
+import { Main, Section } from "../../../ui/components/Semantic.js";
+import { AdSlot } from "../../homepage/components/AdSlot.js";
+import { CollectorDropsIndexListing } from "../../products/components/CollectorDropsIndexListing.js";
+import { listPublicProducts, parsePublicProductParams, defaultAvailabilityForListingTypes, } from "../../../_internal/server/features/products/list-public.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+const COLLECTOR_DROP_LISTING_TYPES = ["collector-drop"];
+const DEFAULT_PAGE_SIZE = 24;
+const DEFAULT_SORT = "collectorDropEndDate";
+export async function CollectorDropsListView({ searchParams = {}, pageRegionCards = [], }) {
+    // Shared with /api/products, and derived rather than hardcoded — this view
+    // carried a literal `hideEndedByDefault: true` until 2026-08-24, which is
+    // exactly the mirrored-literal shape Root Cause #30 is written as.
+    const initial = await listPublicProducts(parsePublicProductParams(searchParams, {
+        listingTypes: COLLECTOR_DROP_LISTING_TYPES,
+        pageSize: DEFAULT_PAGE_SIZE,
+        sorts: DEFAULT_SORT,
+        ...defaultAvailabilityForListingTypes(COLLECTOR_DROP_LISTING_TYPES),
+    }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Live Collector Drops" }), _jsx(AdminComposableRegion, { pageId: "collector-drops-index", initialCards: pageRegionCards }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(CollectorDropsIndexListing, { initialData: initial }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}

package/dist/features/collector-drops/components/LiveBidPrice.d.ts

@@ -0,0 +1,19 @@
+export interface LiveBidPriceProps {
+    productId: string;
+    currentBid: number;
+    bidCount: number;
+    currency: string;
+    isEnded: boolean;
+    /** Matches the appkit `<Span size>` scale — pick to match the call site. */
+    priceSize?: "base" | "lg" | "xl" | "2xl";
+    badgeSize?: "xs" | "sm";
+}
+/**
+ * LiveBidPrice — the current-bid + bid-count pill, kept live via the
+ * `/collector-drop-bids/{id}` SSE channel. Replaces 3 near-identical static
+ * SSR-only displays on the collector drop detail page (info panel, desktop and
+ * mobile compact bid-summary cards) so every viewer watching the page sees
+ * a new bid the instant it's placed, not just after their own bid or a
+ * page reload.
+ */
+export declare function LiveBidPrice({ productId, currentBid, bidCount, currency, isEnded, priceSize, badgeSize, }: LiveBidPriceProps): import("react").JSX.Element;

package/dist/features/collector-drops/components/LiveBidPrice.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GatedPrice } from "../../../ui/components/GatedPrice.js";
+import { Row } from "../../../ui/components/Layout.js";
+import { Span } from "../../../ui/components/Typography.js";
+import { formatCurrency } from "../../../utils/number.formatter.js";
+import { useLiveCollectorDropBid } from "../hooks/useLiveCollectorDropBid.js";
+/**
+ * LiveBidPrice — the current-bid + bid-count pill, kept live via the
+ * `/collector-drop-bids/{id}` SSE channel. Replaces 3 near-identical static
+ * SSR-only displays on the collector drop detail page (info panel, desktop and
+ * mobile compact bid-summary cards) so every viewer watching the page sees
+ * a new bid the instant it's placed, not just after their own bid or a
+ * page reload.
+ */
+export function LiveBidPrice({ productId, currentBid, bidCount, currency, isEnded, priceSize = "xl", badgeSize = "xs", }) {
+    const live = useLiveCollectorDropBid(productId, currentBid, bidCount, { enabled: !isEnded });
+    return (_jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { weight: "bold", className: "text-primary-600 dark:text-primary-400", size: priceSize, children: _jsx(GatedPrice, { label: "Sign in to see the current bid", children: formatCurrency(live.currentBid, currency) }) }), _jsxs(Span, { size: badgeSize, weight: "medium", rounded: "full", padding: "pill-md", surface: "subtle", color: "muted", children: [live.bidCount, " ", live.bidCount === 1 ? "bid" : "bids"] })] }));
+}

package/dist/features/collector-drops/components/LiveMinIncrement.d.ts

@@ -0,0 +1,18 @@
+import { type BidIncrementTier } from "../../../_internal/shared/features/collector-drops/config";
+export interface LiveMinIncrementProps {
+    productId: string;
+    currentBid: number;
+    bidCount: number;
+    currency: string;
+    isEnded: boolean;
+    tiers: BidIncrementTier[];
+    minBidIncrementOverride?: number;
+    size?: "xs" | "sm";
+}
+/**
+ * LiveMinIncrement — the "min increment ₹X" text, kept live via the same
+ * `/collector-drop-bids/{id}` SSE channel `LiveBidPrice` uses. The effective
+ * increment depends on the current bid amount (tiered), so it must keep
+ * resolving against the live current bid, not just the SSR snapshot.
+ */
+export declare function LiveMinIncrement({ productId, currentBid, bidCount, currency, isEnded, tiers, minBidIncrementOverride, size, }: LiveMinIncrementProps): import("react").JSX.Element | null;

package/dist/features/collector-drops/components/LiveMinIncrement.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Span } from "../../../ui/components/Typography.js";
+import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices.js";
+import { formatCurrency } from "../../../utils/number.formatter.js";
+import { useLiveCollectorDropBid } from "../hooks/useLiveCollectorDropBid.js";
+import { resolveMinBidIncrement, } from "../../../_internal/shared/features/collector-drops/config.js";
+/**
+ * LiveMinIncrement — the "min increment ₹X" text, kept live via the same
+ * `/collector-drop-bids/{id}` SSE channel `LiveBidPrice` uses. The effective
+ * increment depends on the current bid amount (tiered), so it must keep
+ * resolving against the live current bid, not just the SSR snapshot.
+ */
+export function LiveMinIncrement({ productId, currentBid, bidCount, currency, isEnded, tiers, minBidIncrementOverride, size = "xs", }) {
+    const live = useLiveCollectorDropBid(productId, currentBid, bidCount, { enabled: !isEnded });
+    const increment = resolveMinBidIncrement(live.currentBid, tiers, minBidIncrementOverride);
+    const { canSeePrices } = useCanSeePrices();
+    // The increment is derived from the current bid, so it discloses the bid's
+    // magnitude. This is a SECONDARY hint next to the gated bid itself, so it
+    // hides outright — "min increment Sign in to see price" reads as broken copy,
+    // and the prompt is already on the bid one line up.
+    if (!canSeePrices)
+        return null;
+    return (_jsxs(Span, { size: size, color: "muted", children: ["min increment ", formatCurrency(increment, currency)] }));
+}

package/dist/features/collector-drops/components/MarketplaceCollectorDropCard.d.ts

@@ -0,0 +1,99 @@
+import type { WishlistToggleActions } from "../../wishlist/hooks/useWishlistToggle";
+import type { ListingType } from "../../products/types/index";
+export interface MarketplaceCollectorDropCardData {
+    id: string;
+    title: string;
+    description?: string;
+    price: number;
+    currency?: string;
+    mainImage?: string;
+    images?: string[];
+    video?: {
+        url?: string;
+        thumbnailUrl?: string;
+    };
+    /** Canonical discriminator (SB1-G Phase 4). */
+    listingType?: ListingType;
+    collectorDropEndDate?: string | Date;
+    startingBid?: number;
+    currentBid?: number;
+    bidCount?: number;
+    featured?: boolean;
+    status?: string;
+    slug?: string;
+    buyNowPrice?: number;
+    /**
+     * Feeds `isBuyNowAvailable` alongside `currentBid`/`collectorDropEndDate`. Every
+     * doc→card mapper must copy it: dropping one field a shared predicate reads
+     * is exactly how a card ends up advertising a buyout the detail page refuses
+     * (Root Cause #48).
+     */
+    isSold?: boolean;
+    /**
+     * D53 — the reserve, read by `isBuyNowAvailable` so a card cannot advertise
+     * a buyout the server will refuse.
+     *
+     * 🛑 Declared late: the predicate already read `product.reservePrice` while
+     * this type did not carry it, so the card was a type error AND every
+     * doc→card mapper was free to drop it. That is the exact failure the
+     * `isSold` note directly above warns about — a shared predicate reading a
+     * field the card shape does not guarantee.
+     */
+    reservePrice?: number | null;
+    /**
+     * The seller. Absent from this hand-rolled type entirely until now, so the
+     * collector drop card could not show a seller even where every other card did —
+     * the same dropped-field shape the `isSold` note directly above warns about,
+     * one field over. Every doc→card mapper must copy BOTH: `storeId` says the
+     * listing has a seller at all, `storeName` says who.
+     */
+    storeId?: string;
+    storeName?: string;
+    /** Display name of the collector drop winner — shown masked when the collector drop has ended */
+    winnerDisplayName?: string;
+}
+export interface MarketplaceCollectorDropCardLabels {
+    selectItem?: string;
+    deselectItem?: string;
+    liveBadge?: string;
+    endingSoon?: string;
+    ended?: string;
+    sold?: string;
+    typeBadge?: string;
+    currentBid?: string;
+    startingBid?: string;
+    winningBid?: string;
+    wonBy?: string;
+    totalBids?: (count: number) => string;
+    placeBid?: string;
+    buyout?: string;
+    addToWishlist?: string;
+    removeFromWishlist?: string;
+    videoLabel?: string;
+}
+export interface MarketplaceCollectorDropCardProps {
+    product: MarketplaceCollectorDropCardData;
+    buyoutPrice?: number;
+    className?: string;
+    variant?: "grid" | "card" | "fluid" | "list";
+    selectable?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string, selected: boolean) => void;
+    inWishlist?: boolean;
+    href?: string;
+    hrefBuilder?: (product: MarketplaceCollectorDropCardData) => string;
+    onNavigate?: (href: string) => void;
+    wishlistActions?: WishlistToggleActions;
+    labels?: MarketplaceCollectorDropCardLabels;
+    /**
+     * Owner-only pencil / clone / bin. Pass `<OwnerQuickActions>`; it renders
+     * nothing for a visitor who does not own the record.
+     *
+     * 🛑 Rendered OUTSIDE this card's own anchor, 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 MarketplaceCollectorDropCard({ product, buyoutPrice, className, variant, selectable, isSelected, onSelect, inWishlist: initialInWishlist, href, hrefBuilder, onNavigate, wishlistActions, labels, renderOwnerActions, }: MarketplaceCollectorDropCardProps): import("react").JSX.Element;

package/dist/features/collector-drops/components/MarketplaceCollectorDropCard.js

@@ -0,0 +1,212 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation.js";
+import { Clock, Gavel, Play, ShoppingBag, Star } from "lucide-react";
+import { WishlistHeartButton } from "../../wishlist/components/WishlistHeartButton.js";
+import { useLongPress } from "../../../react/hooks/useLongPress.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
+import { useWishlistToggle } from "../../wishlist/hooks/useWishlistToggle.js";
+import { useCountdown } from "../../../react/index.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { formatCurrency } from "../../../utils/index.js";
+import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
+import { BaseListingCard } from "../../../ui/components/BaseListingCard.js";
+import { Button } from "../../../ui/components/Button.js";
+import { Caption, Span, Text } from "../../../ui/components/Typography.js";
+import { Div } from "../../../ui/components/Div.js";
+import { GatedPrice } from "../../../ui/components/GatedPrice.js";
+import { Row, Stack } from "../../../ui/components/Layout.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
+import { isBuyNowAvailable } from "../../../_internal/shared/features/collector-drops/config.js";
+import { CardStoreLine } from "../../products/components/CardStoreLine.js";
+const CLS_STAR_ICON = "h-5 w-5 fill-warning text-warning";
+const CLS_LIVE_BADGE = "rounded-full bg-error-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-error-on-solid";
+const CLS_ENDING_BADGE = "rounded-full bg-warning-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-warning-on-solid";
+const CLS_RESERVE_BADGE = "inline-flex items-center gap-[var(--appkit-space-1)] rounded-full bg-warning-solid px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-warning-on-solid";
+function renderCollectorDropCardHero(props) {
+    const { product, collectorDropHref, currentSrc, hovered, images, imageIndex, hasVideo, isEnded, isEndingSoon, isSelected, selectable, mergedLabels, onSelect, setHovered, handleSelect } = props;
+    return (_jsxs(BaseListingCard.Hero, { aspect: "square", variant: "grid", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx(TextLink, { href: collectorDropHref ?? "#", className: "absolute inset-0 block", children: _jsx(MediaImage, { src: currentSrc, alt: product.title, size: "card", fallback: "Collector Drop image", className: `transition-transform duration-500 ${hovered && images.length > 1 ? "scale-105" : "scale-100"}` }) }), hasVideo && imageIndex === 0 ? (_jsx(Div, { className: "absolute right-2 top-2", children: _jsx(Span, { surface: "overlay-sm", layout: "flex-center", color: "inverse", className: "h-8 w-8", rounded: "full", children: _jsx(Play, { className: "h-4 w-4", "aria-label": mergedLabels.videoLabel }) }) })) : null, images.length > 1 ? (_jsx(Row, { gap: "xs", className: "pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2", children: images.map((_, index) => (_jsx(Span, { className: `transition-all duration-200 ${index === imageIndex ? "h-1.5 w-3 bg-[white]" : "h-1.5 w-1.5 bg-[white]/60"}`, rounded: "full" }, `${product.id}-image-${index}`))) })) : null, product.featured ? (_jsx(Div, { className: "pointer-events-none absolute left-2 top-2 z-10", children: _jsx(Star, { className: CLS_STAR_ICON }) })) : null, onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: handleSelect, label: isSelected ? mergedLabels.deselectItem : mergedLabels.selectItem, className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsxs(Stack, { className: `absolute left-2 z-10 ${product.featured ? "top-8" : "top-2"}`, gap: "xs", children: [!isEnded ? _jsx(Span, { size: "xs", weight: "bold", className: CLS_LIVE_BADGE, children: mergedLabels.liveBadge }) : null, isEndingSoon ? _jsx(Span, { size: "xs", weight: "bold", className: CLS_ENDING_BADGE, children: mergedLabels.endingSoon }) : null, isEnded ? _jsx(Span, { color: "inverse", size: "xs", weight: "bold", surface: "overlay-lg", rounded: "full", padding: "pill-xs", children: mergedLabels.ended }) : null, product.status === "sold" ? _jsx(Span, { color: "inverse", size: "xs", weight: "bold", surface: "overlay-xl", rounded: "full", padding: "pill-xs", children: mergedLabels.sold }) : null] }), _jsx(Div, { className: "pointer-events-none absolute bottom-2 right-2 z-10", children: _jsxs(Span, { size: "xs", weight: "semibold", className: CLS_RESERVE_BADGE, children: [_jsx(Gavel, { className: "h-3 w-3" }), mergedLabels.typeBadge] }) })] }));
+}
+function renderCollectorDropCardInfoList(props) {
+    const { product, collectorDropHref, displayBid, bidCount, isEnded, remaining, inWishlist, wishlistLoading, wishlistActions, countdownClass, mergedLabels, handleWishlist, handleNavigate } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Row, { className: "min-w-0", align: "start", justify: "between", gap: "sm", children: [_jsx(TextLink, { href: collectorDropHref ?? "#", className: `flex-1 leading-snug transition-colors hover:text-primary`, color: "primary", truncate: 2, size: "sm", weight: "medium", children: product.title }), wishlistActions ? (_jsx(WishlistHeartButton, { size: "inline", inWishlist: inWishlist, isLoading: wishlistLoading, addLabel: mergedLabels.addToWishlist, removeLabel: mergedLabels.removeFromWishlist, onToggle: handleWishlist })) : null] }), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { className: "text-primary", size: "sm", weight: "bold", children: _jsx(GatedPrice, { label: "Sign in to see the bid", children: formatCurrency(displayBid, getDefaultCurrency()) }) }), _jsxs(Div, { layout: "inline-flex", gap: "1", textWeight: "semibold", align: "center", className: `py-[0.125rem] text-[11px] ${countdownClass}`, padding: "x-xs", rounded: "full", children: [_jsx(Clock, { className: "h-2.5 w-2.5" }), _jsx(Span, { children: formatCountdownLabel(remaining, mergedLabels.ended) })] }), bidCount > 0 && _jsx(Caption, { className: "text-[11px]", children: mergedLabels.totalBids(bidCount) })] }), !isEnded && (_jsxs(Button, { gap: "xs", type: "button", variant: "warning", size: "sm", textSize: "xs", className: "self-start px-[0.625rem] mt-0.5", onClick: handleNavigate, children: [_jsx(Gavel, { className: "h-3 w-3" }), _jsx(Span, { children: mergedLabels.placeBid })] }))] }));
+}
+function renderCollectorDropCardInfoGrid(props) {
+    const { product, collectorDropHref, displayBid, bidCount, hasCurrentBid, isEnded, remaining, resolvedBuyoutPrice, inWishlist, wishlistLoading, wishlistActions, countdownClass, mergedLabels, handleWishlist, handleNavigate } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(TextLink, { href: collectorDropHref ?? "#", className: "min-w-0 flex-1 leading-snug transition-colors hover:text-primary", color: "primary", size: "sm", weight: "medium", children: product.title }), wishlistActions ? (_jsx(WishlistHeartButton, { size: "inline", inWishlist: inWishlist, isLoading: wishlistLoading, addLabel: mergedLabels.addToWishlist, removeLabel: mergedLabels.removeFromWishlist, onToggle: handleWishlist })) : null] }), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), _jsxs(Div, { children: [_jsx(Caption, { children: isEnded && hasCurrentBid ? mergedLabels.winningBid : hasCurrentBid ? mergedLabels.currentBid : mergedLabels.startingBid }), _jsx(Text, { className: "leading-none text-primary", size: "base", weight: "bold", children: _jsx(GatedPrice, { label: "Sign in to see the bid", children: formatCurrency(displayBid, getDefaultCurrency()) }) }), isEnded && product.winnerDisplayName && (_jsxs(Caption, { className: "mt-0.5", color: "muted", children: [mergedLabels.wonBy, ": ", maskDisplayName(product.winnerDisplayName)] }))] }), _jsxs(Row, { wrap: true, justify: "between", gap: "sm", className: "gap-x-2 gap-y-1", children: [_jsxs(Div, { layout: "inline-flex", gap: "1", textWeight: "semibold", textSize: "xs", align: "center", className: `${countdownClass}`, paddingY: "y-2xs", paddingX: "x-xs", rounded: "full", children: [_jsx(Clock, { className: "h-3 w-3" }), _jsx(Span, { children: formatCountdownLabel(remaining, mergedLabels.ended) })] }), _jsx(Caption, { children: mergedLabels.totalBids(bidCount) })] }), _jsx(Row, { wrap: true, gap: "xs", className: "mt-auto", children: isEnded ? (_jsx(Button, { gap: "xs", type: "button", variant: "ghost", size: "sm", textSize: "xs", paddingX: "xs", className: "flex-1 cursor-not-allowed opacity-60", disabled: true, children: _jsx(Span, { children: mergedLabels.ended }) })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { gap: "xs", type: "button", variant: "warning", size: "sm", textSize: "xs", paddingX: "xs", className: "flex-1", onClick: handleNavigate, children: [_jsx(Gavel, { className: "h-3 w-3" }), _jsx(Span, { children: mergedLabels.placeBid })] }), resolvedBuyoutPrice ? (
+                        /* `secondary`, not `danger` — this button only navigates to the
+                           PDP, and `danger` is reserved for destructive actions (Rule #7
+                           kinds). ACTIONS.COLLECTOR_DROP["buy-it-now"] is itself `secondary`. */
+                        _jsxs(Button, { gap: "xs", type: "button", variant: "secondary", size: "sm", textSize: "xs", paddingX: "xs", className: "flex-1", onClick: handleNavigate, children: [_jsx(ShoppingBag, { className: "h-3 w-3" }), _jsx(Span, { children: mergedLabels.buyout })] })) : null] })) })] }));
+}
+const DEFAULT_LABELS = {
+    selectItem: "Select item",
+    deselectItem: "Deselect item",
+    liveBadge: "Live",
+    endingSoon: "Ending soon",
+    ended: "Ended",
+    sold: "Sold",
+    typeBadge: "Collector Drop",
+    currentBid: "Current bid",
+    startingBid: "Starting bid",
+    winningBid: "Winning bid",
+    wonBy: "Won by",
+    totalBids: (count) => `${count} bids`,
+    placeBid: "Place bid",
+    buyout: "Buyout",
+    addToWishlist: "Add to wishlist",
+    removeFromWishlist: "Remove from wishlist",
+    videoLabel: "Video available",
+};
+const COUNTDOWN_STATUS_CLASS = {
+    ended: "bg-[var(--appkit-color-surface)] text-[var(--appkit-color-text-muted)]",
+    endingSoon: "bg-warning-surface text-warning",
+    live: "bg-success-surface text-success",
+};
+function maskDisplayName(name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length === 1) {
+        const p = parts[0];
+        return p.length <= 2 ? p : p[0] + "*".repeat(Math.min(p.length - 1, 3));
+    }
+    return parts
+        .map((part, i) => {
+        if (!part)
+            return "";
+        if (i === parts.length - 1)
+            return part[0] + ".";
+        return part[0] + "*".repeat(Math.min(part.length - 1, 3));
+    })
+        .join(" ");
+}
+function resolveHref(product, href, hrefBuilder) {
+    if (href)
+        return href;
+    if (hrefBuilder)
+        return hrefBuilder(product);
+    if (!product.id)
+        return undefined;
+    return ROUTES.PUBLIC.COLLECTOR_DROP_DETAIL(product.slug ?? product.id);
+}
+function formatCountdownLabel(remaining, endedLabel) {
+    if (!remaining)
+        return endedLabel;
+    const { days, hours, minutes, seconds } = remaining;
+    if (days > 0)
+        return `${days}d ${hours}h ${minutes}m`;
+    if (hours > 0)
+        return `${hours}h ${minutes}m ${seconds}s`;
+    return `${minutes}m ${seconds}s`;
+}
+export function MarketplaceCollectorDropCard({ product, buyoutPrice, className = "", variant = "grid", selectable = false, isSelected = false, onSelect, inWishlist: initialInWishlist = false, href, hrefBuilder, onNavigate, wishlistActions, labels, renderOwnerActions, }) {
+    const router = useRouter();
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const baseVariant = variant === "list" ? "list" : "grid";
+    const [hovered, setHovered] = useState(false);
+    const [imageIndex, setImageIndex] = useState(0);
+    const intervalRef = useRef(null);
+    const remaining = useCountdown(product.collectorDropEndDate);
+    const { inWishlist, isLoading: wishlistLoading, toggle, } = useWishlistToggle(product.id, initialInWishlist, wishlistActions);
+    const collectorDropHref = resolveHref(product, href, hrefBuilder);
+    const isEnded = remaining === null;
+    const isEndingSoon = remaining !== null && remaining.days === 0 && remaining.hours < 1;
+    const displayBid = (product.currentBid ?? 0) > 0
+        ? product.currentBid
+        : (product.startingBid ?? product.price);
+    const bidCount = product.bidCount ?? 0;
+    const hasCurrentBid = (product.currentBid ?? 0) > 0;
+    const hasVideo = Boolean(product.video?.url);
+    // Availability is folded in HERE rather than at the render site, so the chip
+    // can never advertise a buyout the detail page will refuse. It used to gate on
+    // the price merely EXISTING, so cards linked through to a PDP with no Buy Now
+    // button at all. `isBuyNowAvailable` is the same predicate that page uses.
+    const rawBuyoutPrice = buyoutPrice ?? product.buyNowPrice;
+    const resolvedBuyoutPrice = isBuyNowAvailable({
+        buyNowPrice: rawBuyoutPrice,
+        currentBid: product.currentBid,
+        isEnded,
+        isSold: product.isSold === true,
+        // D53 — a card must not advertise a buyout price the server refuses.
+        reservePrice: typeof product.reservePrice === "number" ? product.reservePrice : null,
+    })
+        ? rawBuyoutPrice
+        : undefined;
+    const images = [product.mainImage, ...(product.images ?? [])].filter(Boolean);
+    const currentSrc = images[imageIndex] ?? product.mainImage;
+    useEffect(() => {
+        if (hovered && images.length > 1) {
+            intervalRef.current = setInterval(() => {
+                setImageIndex((value) => (value + 1) % images.length);
+            }, 800);
+        }
+        else {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+            setImageIndex(0);
+        }
+        return () => {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+        };
+    }, [hovered, images.length]);
+    const longPress = useLongPress(() => onSelect?.(product.id, !isSelected));
+    const handleNavigate = useCallback(() => {
+        if (!collectorDropHref)
+            return;
+        if (onNavigate) {
+            onNavigate(collectorDropHref);
+            return;
+        }
+        router.push(collectorDropHref);
+    }, [collectorDropHref, onNavigate, router]);
+    const handleSelect = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect?.(product.id, !isSelected);
+    }, [isSelected, onSelect, product.id]);
+    const handleWishlist = useCallback(async (event) => {
+        event.stopPropagation();
+        try {
+            await toggle();
+        }
+        catch (_err) {
+            // useWishlistToggle rolls back its optimistic state and raises its own
+            // toast on failure, so the heart returns to its true value on screen.
+            // Reporting again here would double-notify for one user action.
+            void normalizeError(_err);
+        }
+    }, [toggle]);
+    const countdownClass = isEnded
+        ? COUNTDOWN_STATUS_CLASS.ended
+        : isEndingSoon
+            ? COUNTDOWN_STATUS_CLASS.endingSoon
+            : COUNTDOWN_STATUS_CLASS.live;
+    const cardInfoProps = {
+        product, collectorDropHref, displayBid, bidCount, hasCurrentBid, isEnded, isEndingSoon,
+        remaining, resolvedBuyoutPrice, inWishlist, wishlistLoading, wishlistActions,
+        countdownClass, mergedLabels, handleWishlist, handleNavigate,
+    };
+    const card = (_jsxs(BaseListingCard, { isSelected: isSelected, isDisabled: isEnded, variant: baseVariant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [renderCollectorDropCardHero({ product, collectorDropHref, currentSrc, hovered, images, imageIndex, hasVideo, isEnded, isEndingSoon, isSelected, selectable, mergedLabels, onSelect, setHovered, handleSelect }), _jsx(BaseListingCard.Info, { variant: baseVariant, children: baseVariant === "list" ? renderCollectorDropCardInfoList(cardInfoProps) : renderCollectorDropCardInfoGrid(cardInfoProps) })] }));
+    /*
+     * 🛑 Default, not opt-in. Nothing in either repo ever passed
+     * `renderOwnerActions`, so this toolbar was unreachable on every grid that
+     * mounts this card (Root Cause #8 — a slot shell rendered with zero render
+     * props). A card is resource-specific by construction, so it names its own
+     * resource rather than being threaded one; the prop stays as an override.
+     */
+    const ownerActions = renderOwnerActions
+        ? renderOwnerActions()
+        : product.id
+            ? (_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined, recordLabel: product.title, placement: "card" }))
+            : null;
+    if (!ownerActions)
+        return card;
+    /*
+     * Sibling of the card, never a child — see the prop's docstring. `z-20`
+     * clears this card's own overlays, which all sit at `z-10`.
+     */
+    return (_jsxs(Div, { layout: "flex-col", className: "h-full", children: [card, _jsx(Div, { layout: "flex", justify: "end", className: "px-[var(--appkit-space-3)] pb-[var(--appkit-space-3)]", children: ownerActions })] }));
+}

package/dist/features/collector-drops/components/MarketplaceCollectorDropGrid.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { WishlistToggleActions } from "../../wishlist/hooks/useWishlistToggle";
+import { type MarketplaceCollectorDropCardData, type MarketplaceCollectorDropCardLabels } from "./MarketplaceCollectorDropCard";
+export interface MarketplaceCollectorDropGridLabels {
+    emptyTitle?: string;
+    emptyDescription?: string;
+}
+export interface MarketplaceCollectorDropGridProps {
+    collectorDrops: MarketplaceCollectorDropCardData[];
+    loading?: boolean;
+    skeletonCount?: number;
+    variant?: "grid" | "card" | "fluid" | "list";
+    selectable?: boolean;
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    emptyIcon?: ReactNode;
+    labels?: MarketplaceCollectorDropGridLabels;
+    cardLabels?: MarketplaceCollectorDropCardLabels;
+    wishlistActions?: WishlistToggleActions;
+}
+export declare function MarketplaceCollectorDropGrid({ collectorDrops, loading, skeletonCount, variant, selectable, selectedIds, onSelectionChange, emptyIcon, labels, cardLabels, wishlistActions, }: MarketplaceCollectorDropGridProps): import("react").JSX.Element;

package/dist/features/collector-drops/components/MarketplaceCollectorDropGrid.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gavel } from "lucide-react";
+import { Div } from "../../../ui/components/Div.js";
+import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
+import { Text } from "../../../ui/components/Typography.js";
+import { MarketplaceCollectorDropCard, } from "./MarketplaceCollectorDropCard.js";
+const __P = {
+    p3: "p-[var(--appkit-space-3)]",
+};
+const __O = {
+    hidden: "overflow-hidden",
+};
+const CLS_SKELETON_BTN = "h-8 w-20 rounded bg-zinc-300";
+const DEFAULT_GRID_LABELS = {
+    emptyTitle: "No collector drops found",
+    emptyDescription: "Check back later for live listings.",
+};
+function CollectorDropCardSkeleton({ variant = "grid", }) {
+    if (variant === "list") {
+        return (_jsxs(Row, { className: `min-h-[220px] ${__O.hidden} animate-pulse`, rounded: "xl", surface: "subtle", children: [_jsx(Div, { surface: "skeleton", className: "aspect-square w-40 flex-shrink-0" }), _jsxs(Stack, { className: `flex-1 ${__P.p3}`, gap: "sm", children: [_jsx(Div, { surface: "skeleton", className: "h-4 w-2/3", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-3 w-full", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-3 w-3/4", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-5 w-1/2", rounded: "default" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: CLS_SKELETON_BTN }), _jsx(Div, { className: CLS_SKELETON_BTN })] })] })] }));
+    }
+    return (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, rounded: "xl", surface: "subtle", children: [_jsx(Div, { surface: "skeleton", className: "aspect-square" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { surface: "skeleton", className: "h-4 w-3/4", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-3 w-1/3", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-5 w-1/2", rounded: "default" }), _jsxs(Row, { justify: "between", children: [_jsx(Div, { surface: "skeleton", className: "h-3 w-1/4", rounded: "default" }), _jsx(Div, { surface: "skeleton", className: "h-3 w-1/3", rounded: "default" })] }), _jsx(Row, { gap: "sm", children: _jsx(Div, { className: CLS_SKELETON_BTN }) })] })] }));
+}
+export function MarketplaceCollectorDropGrid({ collectorDrops, loading = false, skeletonCount = 12, variant = "grid", selectable = false, selectedIds = [], onSelectionChange, emptyIcon, labels, cardLabels, wishlistActions, }) {
+    const mergedLabels = { ...DEFAULT_GRID_LABELS, ...labels };
+    const handleSelect = (id, selected) => {
+        if (!onSelectionChange)
+            return;
+        if (selected) {
+            onSelectionChange([...selectedIds, id]);
+            return;
+        }
+        onSelectionChange(selectedIds.filter((selectedId) => selectedId !== id));
+    };
+    /* The container is either the canonical card ladder or a plain stack — the
+       caller no longer supplies a grid className, so a store's collector drops tab and
+       /collector-drops can no longer drift apart in column count. */
+    const Container = ({ children }) => variant === "list" ? (_jsx(Stack, { gap: "md", children: children })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: children }));
+    if (loading) {
+        return (_jsx(Container, { children: Array.from({ length: skeletonCount }).map((_, index) => (_jsx(CollectorDropCardSkeleton, { variant: variant }, `collectordrop-skeleton-${index}`))) }));
+    }
+    if (collectorDrops.length === 0) {
+        return (_jsxs(Stack, { justify: "center", padding: "y-6xl", align: "start", gap: "3", className: "text-left", children: [emptyIcon ?? _jsx(Gavel, { className: "h-16 w-16" }), _jsx(Text, { size: "xl", weight: "medium", color: "primary", children: mergedLabels.emptyTitle }), _jsx(Text, { size: "sm", color: "muted", children: mergedLabels.emptyDescription })] }));
+    }
+    return (_jsx(Container, { children: collectorDrops.map((collectorDrop) => (_jsx(MarketplaceCollectorDropCard, { product: collectorDrop, variant: variant, selectable: selectable, isSelected: selectedIds.includes(collectorDrop.id), onSelect: handleSelect, labels: cardLabels, wishlistActions: wishlistActions }, collectorDrop.id))) }));
+}