@mohasinac/appkit 2.7.26 → 2.7.30

package/dist/features/pre-orders/components/PreOrdersIndexListing.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { Columns, Heart, ShoppingCart, SlidersHorizontal, X } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Columns, Heart, ShoppingCart } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { Pagination, useToast, BulkActionBar, ListingToolbar, LoginRequiredModal } from "../../../ui";
+import { BulkActionBar, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
+import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID, ACTION_META, COMPARE_MAX_ITEMS } from "../../products/constants/action-defs";
 import { CompareOverlay } from "../../products/components/CompareOverlay";
@@ -45,60 +46,24 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     const categoryOptions = categoriesToFacetOptions(categories);
     const { brandOptions } = useBrands();
     const wishlistedIds = new Set(localWishlist.items.filter((i) => i.type === "preorder").map((i) => i.itemId));
-    // Pending filter state — buffered until "Apply Filters" clicked
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-    const pendingTable = useMemo(() => ({
-        get: (key) => pendingFilters[key] ?? "",
-        getNumber: (key, fallback = 0) => {
-            const v = pendingFilters[key];
-            if (!v)
-                return fallback;
-            const n = Number(v);
-            return isNaN(n) ? fallback : n;
-        },
-        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
-        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
-        clear: (keys) => {
-            const ks = keys ?? FILTER_KEYS;
-            setPendingFilters((p) => ({
-                ...p,
-                ...Object.fromEntries(ks.map((k) => [k, ""])),
-            }));
-        },
-        setPage: (_) => { },
-        setPageSize: (_) => { },
-        setSort: (_) => { },
-        buildSieveParams: () => "",
-        buildSearchParams: () => "",
-        params: new URLSearchParams(),
-    }), [pendingFilters]);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        onFilterReset();
         setFilterOpen(true);
-    }, [table]);
+    }, [onFilterReset]);
     const applyFilters = useCallback(() => {
-        const updates = { page: "1" };
-        for (const k of FILTER_KEYS)
-            updates[k] = pendingFilters[k] ?? "";
-        table.setMany(updates);
+        onFilterApply();
         setFilterOpen(false);
-    }, [pendingFilters, table]);
-    const clearFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
-    }, []);
+    }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_CLOSED]: "" });
+        onFilterClear();
         setSearchInput("");
-    }, [table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const pendingFilterCount = FILTER_KEYS.filter((k) => !!pendingFilters[k]).length;
+    }, [table, onFilterClear]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SHOW_CLOSED) === "true" ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
-        activeFilterCount > 0;
+        filterActiveCount > 0;
     const params = {
         q: table.get(TABLE_KEYS.QUERY) || undefined,
         category: table.get(TABLE_KEYS.CATEGORY) || undefined,
@@ -162,7 +127,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
     }, [localCart, showToast]);
     const selection = useBulkSelection({ items: preOrders, keyExtractor: (p) => p.id });
     const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: preOrders.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show closed" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showClosed, onClick: () => table.set(TABLE_KEYS.SHOW_CLOSED, showClosed ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showClosed ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showClosed ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search pre-orders...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: PREORDER_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: preOrders.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show closed" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showClosed, onClick: () => table.set(TABLE_KEYS.SHOW_CLOSED, showClosed ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showClosed ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showClosed ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
                         id: ACTION_ID.ADD_TO_CART,
                         label: ACTION_META[ACTION_ID.ADD_TO_CART].label,
@@ -206,8 +171,8 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                             setCompareIds(ids);
                         },
                     },
-                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
+                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx("div", { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx("div", { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
-                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [pendingFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] })), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

package/dist/features/pre-orders/components/PreorderCard.d.ts

@@ -1,15 +1,6 @@
-import type { PreorderItem } from "../types";
 interface PreorderBadgeProps {
     shipDate?: string;
     className?: string;
 }
 export declare function PreorderBadge({ shipDate, className }: PreorderBadgeProps): import("react/jsx-runtime").JSX.Element;
-interface PreorderCardProps {
-    item: PreorderItem;
-    href: string;
-    selectable?: boolean;
-    isSelected?: boolean;
-    onSelect?: (id: string, selected: boolean) => void;
-}
-export declare function PreorderCard({ item, href, selectable, isSelected, onSelect }: PreorderCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/pre-orders/components/PreorderCard.js

@@ -1,10 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { BaseListingCard, Div, Heading, Span, Text } from "../../../ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Span } from "../../../ui";
 import { getPreorderStatus } from "../types";
-import { formatCurrency } from "../../../utils/number.formatter";
-import { getDefaultLocale } from "../../../core/baseline-resolver";
-import { useLongPress } from "../../../react/hooks/useLongPress";
 const STATUS_LABELS = {
     available: "Pre-order now",
     shipping_soon: "Shipping soon",
@@ -19,10 +15,3 @@ export function PreorderBadge({ shipDate, className }) {
     const status = getPreorderStatus(shipDate);
     return (_jsx(Span, { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[status]} ${className ?? ""}`, children: STATUS_LABELS[status] }));
 }
-export function PreorderCard({ item, href, selectable = false, isSelected = false, onSelect }) {
-    const longPress = useLongPress(() => onSelect?.(item.id, !isSelected));
-    return (_jsxs(Div, { className: `group relative block overflow-hidden rounded-xl border bg-white dark:bg-slate-900 transition-shadow hover:shadow-md ${isSelected ? "border-primary outline outline-2 outline-primary" : "border-gray-200 dark:border-slate-700"}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(item.id, !isSelected); }, label: isSelected ? "Deselect pre-order" : "Select pre-order", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsxs(Link, { href: href, className: "block", children: [item.images[0] ? (_jsx(Div, { role: "img", "aria-label": item.name, className: "aspect-square w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${item.images[0]})` } })) : (_jsx(Div, { className: "aspect-square w-full bg-gray-100" })), _jsxs(Div, { className: "p-4", children: [_jsx(PreorderBadge, { shipDate: item.preorderShipDate }), _jsx(Heading, { level: 3, className: "mt-2 font-semibold text-gray-900 dark:text-zinc-100 text-base", children: item.name }), _jsx(Text, { className: "mt-1 text-sm text-gray-500 dark:text-zinc-400", children: item.brand }), _jsxs(Div, { className: "mt-3 flex items-baseline gap-2", children: [_jsx(Span, { className: "text-lg font-bold text-gray-900 dark:text-zinc-100", children: formatCurrency(item.salePrice) }), item.regularPrice > item.salePrice && (_jsx(Span, { className: "text-sm text-gray-400 dark:text-zinc-500 line-through", children: formatCurrency(item.regularPrice) }))] }), item.preorderShipDate && (_jsxs(Text, { className: "mt-1 text-xs text-gray-400 dark:text-zinc-500", children: ["Ships:", " ", new Date(item.preorderShipDate).toLocaleDateString(getDefaultLocale(), {
-                                        month: "short",
-                                        year: "numeric",
-                                    })] }))] })] })] }));
-}

package/dist/features/pre-orders/components/index.d.ts

@@ -1,4 +1,4 @@
-export { PreorderBadge, PreorderCard } from "./PreorderCard";
+export { PreorderBadge } from "./PreorderCard";
 export { PreOrderFilters } from "./PreOrderFilters";
 export type { PreOrderFiltersProps } from "./PreOrderFilters";
 export { MarketplacePreorderCard, type MarketplacePreorderCardData, type MarketplacePreorderCardLabels, type MarketplacePreorderCardProps, } from "./MarketplacePreorderCard";

package/dist/features/pre-orders/components/index.js

@@ -1,4 +1,4 @@
-export { PreorderBadge, PreorderCard } from "./PreorderCard";
+export { PreorderBadge } from "./PreorderCard";
 export { PreOrderFilters } from "./PreOrderFilters";
 export { MarketplacePreorderCard, } from "./MarketplacePreorderCard";
 export { PreOrdersListView } from "./PreOrdersListView";

package/dist/features/pre-orders/schemas/index.d.ts

@@ -24,14 +24,14 @@ export declare const preorderItemSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }, {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
@@ -46,44 +46,44 @@ export declare const preorderItemSchema: z.ZodObject<{
     createdAt: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     id: string;
+    slug: string;
     name: string;
     active: boolean;
     isFeatured: boolean;
-    slug: string;
     salePrice: number;
     regularPrice: number;
     createdAt?: string | undefined;
+    brand?: string | undefined;
+    images?: string[] | undefined;
     media?: {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }[] | undefined;
-    brand?: string | undefined;
-    images?: string[] | undefined;
     franchise?: string | undefined;
     preorderShipDate?: string | undefined;
 }, {
     id: string;
-    name: string;
     slug: string;
+    name: string;
     salePrice: number;
     regularPrice: number;
     createdAt?: string | undefined;
+    brand?: string | undefined;
+    images?: string[] | undefined;
     media?: {
         type: "video" | "image" | "file";
         url: string;
-        source?: "external" | "upload" | "youtube" | undefined;
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
         youtubeId?: string | undefined;
     }[] | undefined;
     active?: boolean | undefined;
-    brand?: string | undefined;
     isFeatured?: boolean | undefined;
-    images?: string[] | undefined;
     franchise?: string | undefined;
     preorderShipDate?: string | undefined;
 }>;

package/dist/features/products/api/[id]/route.js

@@ -18,6 +18,8 @@ import { storeRepository } from "../../../stores/repository/store.repository";
 // SB-UNI-V — bundlesRepository deleted; bundle stock-sync moves to the
 // `onProductStockChange` Firebase Function (see functions/src/bundle-stock-sync.ts).
 import { sanitizeProductForPublic } from "../../utils/sanitize";
+const ERR_DB_NOT_REGISTERED = "Database provider not registered";
+const ERR_PRODUCT_NOT_FOUND = "Product not found";
 const UNAVAILABLE_PRODUCT_STATUSES = new Set([
     "sold",
     "out_of_stock",
@@ -53,7 +55,7 @@ const productUpdateSchema = z
     featured: z.boolean().optional(),
     isPromoted: z.boolean().optional(),
     listingType: z
-        .enum(["standard", "auction", "pre-order", "prize-draw", "bundle"])
+        .enum(["standard", "auction", "pre-order", "prize-draw", "bundle", "classified", "digital-code", "live"])
         .optional(),
     media: z.array(mediaFieldSchema).optional(),
 })
@@ -64,7 +66,7 @@ export async function GET(_request, context) {
         const { id } = await context.params;
         const repo = getRepo();
         if (!repo) {
-            return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_REGISTERED }, { status: 503 });
         }
         // Support both Firestore document ID and URL slug
         let item = await repo.findById(id);
@@ -77,7 +79,7 @@ export async function GET(_request, context) {
             item = slugResult.data[0] ?? null;
         }
         if (!item) {
-            return NextResponse.json({ success: false, error: "Product not found" }, { status: 404 });
+            return NextResponse.json({ success: false, error: ERR_PRODUCT_NOT_FOUND }, { status: 404 });
         }
         const sanitized = sanitizeProductForPublic(item);
         return NextResponse.json({ success: true, data: sanitized });
@@ -96,11 +98,11 @@ export const PATCH = createRouteHandler({
         const { id } = params;
         const repo = getRepo();
         if (!repo) {
-            return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_REGISTERED }, { status: 503 });
         }
         const product = await repo.findById(id);
         if (!product) {
-            return NextResponse.json({ success: false, error: "Product not found" }, { status: 404 });
+            return NextResponse.json({ success: false, error: ERR_PRODUCT_NOT_FOUND }, { status: 404 });
         }
         const ownerStore = product.storeId ? await storeRepository.findByOwnerId(user?.uid ?? "") : null;
         const isOwner = !!ownerStore && ownerStore.id === product.storeId;
@@ -150,11 +152,11 @@ export const DELETE = createRouteHandler({
         const { id } = params;
         const repo = getRepo();
         if (!repo) {
-            return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_REGISTERED }, { status: 503 });
         }
         const product = await repo.findById(id);
         if (!product) {
-            return NextResponse.json({ success: false, error: "Product not found" }, { status: 404 });
+            return NextResponse.json({ success: false, error: ERR_PRODUCT_NOT_FOUND }, { status: 404 });
         }
         const ownerStore = product.storeId ? await storeRepository.findByOwnerId(user?.uid ?? "") : null;
         const isOwner = !!ownerStore && ownerStore.id === product.storeId;

package/dist/features/products/api/route.js

@@ -48,7 +48,7 @@ const productMutateSchema = z
     sellerEmail: z.string().email().optional(),
     slug: z.string().optional(),
     listingType: z
-        .enum(["standard", "auction", "pre-order", "prize-draw", "bundle"])
+        .enum(["standard", "auction", "pre-order", "prize-draw", "bundle", "classified", "digital-code", "live"])
         .optional(),
     media: z.array(mediaFieldSchema).optional(),
 })

package/dist/features/products/columns/productTableColumns.js

@@ -76,10 +76,10 @@ export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode,
             },
         },
     ];
-    const actions = (product) => (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { type: "button", onClick: (e) => {
+    const actions = (product) => (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: (e) => {
                     e.stopPropagation();
                     onEdit(product);
-                }, className: "text-primary hover:text-primary/80", children: labels.edit }), _jsx(Button, { type: "button", onClick: (e) => {
+                }, className: "text-primary hover:text-primary/80", children: labels.edit }), _jsx(Button, { variant: "ghost", type: "button", onClick: (e) => {
                     e.stopPropagation();
                     onDelete(product);
                 }, className: "text-red-600 hover:text-red-800 dark:text-red-400", children: labels.delete })] }));

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

@@ -1,10 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { SlidersHorizontal, X } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../hooks/useProducts";
-import { Pagination, useToast, ListingToolbar, BulkActionBar, LoginRequiredModal } from "../../../ui";
+import { Pagination, useToast, ListingToolbar, BulkActionBar, LoginRequiredModal, FilterDrawer } from "../../../ui";
+import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
 import { AuctionFilters } from "../../auctions/components/AuctionFilters";
@@ -40,60 +40,24 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     const { categories } = useCategoryTree();
     const categoryOptions = categoriesToFacetOptions(categories);
     const { brandOptions } = useBrands();
-    // Pending filter state — buffered until "Apply Filters" clicked
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-    const pendingTable = useMemo(() => ({
-        get: (key) => pendingFilters[key] ?? "",
-        getNumber: (key, fallback = 0) => {
-            const v = pendingFilters[key];
-            if (!v)
-                return fallback;
-            const n = Number(v);
-            return isNaN(n) ? fallback : n;
-        },
-        set: (key, value) => setPendingFilters((p) => ({ ...p, [key]: value })),
-        setMany: (updates) => setPendingFilters((p) => ({ ...p, ...updates })),
-        clear: (keys) => {
-            const ks = keys ?? FILTER_KEYS;
-            setPendingFilters((p) => ({
-                ...p,
-                ...Object.fromEntries(ks.map((k) => [k, ""])),
-            }));
-        },
-        setPage: (_) => { },
-        setPageSize: (_) => { },
-        setSort: (_) => { },
-        buildSieveParams: () => "",
-        buildSearchParams: () => "",
-        params: new URLSearchParams(),
-    }), [pendingFilters]);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onFilterReset } = usePendingTable(table, FILTER_KEYS);
     const openFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        onFilterReset();
         setFilterOpen(true);
-    }, [table]);
+    }, [onFilterReset]);
     const applyFilters = useCallback(() => {
-        const updates = { page: "1" };
-        for (const k of FILTER_KEYS)
-            updates[k] = pendingFilters[k] ?? "";
-        table.setMany(updates);
+        onFilterApply();
         setFilterOpen(false);
-    }, [pendingFilters, table]);
-    const clearFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
-    }, []);
+    }, [onFilterApply]);
     const resetAll = useCallback(() => {
-        const updates = { [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_ENDED]: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
+        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.SHOW_ENDED]: "" });
+        onFilterClear();
         setSearchInput("");
-    }, [table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const pendingFilterCount = FILTER_KEYS.filter((k) => !!pendingFilters[k]).length;
+    }, [table, onFilterClear]);
     const hasActiveState = !!table.get(TABLE_KEYS.QUERY) ||
         table.get(TABLE_KEYS.SHOW_ENDED) === "true" ||
         table.get(TABLE_KEYS.SORT) !== DEFAULT_SORT ||
-        activeFilterCount > 0;
+        filterActiveCount > 0;
     const params = {
         q: table.get(TABLE_KEYS.QUERY) || undefined,
         category: table.get(TABLE_KEYS.CATEGORY) || undefined,
@@ -148,7 +112,7 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
         isWishlisted: (productId) => wishlistedIds.has(productId),
     };
     const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-3 gap-4";
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: auctions.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show ended" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showEnded, onClick: () => table.set(TABLE_KEYS.SHOW_ENDED, showEnded ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showEnded ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showEnded ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: auctions.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, extra: _jsxs("label", { className: "flex items-center gap-1.5 cursor-pointer select-none shrink-0", children: [_jsx("span", { className: "hidden sm:inline text-xs text-zinc-600 dark:text-zinc-300 whitespace-nowrap", children: "Show ended" }), _jsx("button", { type: "button", role: "switch", "aria-checked": showEnded, onClick: () => table.set(TABLE_KEYS.SHOW_ENDED, showEnded ? "" : "true"), className: `relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 ${showEnded ? "bg-primary" : "bg-zinc-300 dark:bg-slate-600"}`, children: _jsx("span", { className: `inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform duration-200 ${showEnded ? "translate-x-[19px]" : "translate-x-[3px]"}` }) })] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
                         id: ACTION_ID.WATCH_AUCTION,
                         label: "Add to Watchlist",
@@ -169,5 +133,5 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
                             selection.clearSelection();
                         },
                     },
-                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [pendingFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", pendingFilterCount > 0 ? ` (${pendingFilterCount})` : ""] }) })] })] })), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx("div", { className: "py-6", children: isLoading ? (_jsx("div", { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-3 space-y-2", children: [_jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Span, Text } from "../../../ui";
+import { Heading, Span, Text } from "../../../ui";
 import { formatCurrency } from "../../../utils/number.formatter";
 function formatBidDate(raw) {
     if (!raw)
@@ -30,5 +30,5 @@ export function BidHistory({ isLoading = false, isEmpty = false, renderList, ren
     }
     if (renderList)
         return _jsx("div", { className: className, "data-section": "bidhistory-div-420", children: renderList() });
-    return (_jsxs("div", { className: className, "data-section": "bidhistory-div-421", children: [labels.title && (_jsx("h3", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: labels.title })), _jsx("div", { className: "space-y-2", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { className: "font-bold text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
+    return (_jsxs("div", { className: className, "data-section": "bidhistory-div-421", children: [labels.title && (_jsx(Heading, { level: 3, className: "mb-3 text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: labels.title })), _jsx("div", { className: "space-y-2", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { className: "font-bold text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
 }

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

@@ -17,6 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * `GET /api/products?ids=<csv>` (BK3 listByIds endpoint).
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const REL_NOOPENER = "noopener noreferrer";
 import Link from "next/link";
 import { X } from "lucide-react";
 import { Button, Div, Heading, Row, Stack, Text } from "../../../ui";
@@ -67,9 +68,9 @@ function FieldRow({ label, children }) {
 function CompareColumn({ item, productType, labels, onRemove, onClose }) {
     const href = detailHref(item, productType);
     const img = item.mainImage ?? item.images?.[0];
-    return (_jsxs(Stack, { gap: "md", className: COLUMN_CARD_CLASS, children: [_jsxs(Row, { justify: "between", align: "start", gap: "sm", children: [_jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 hover:underline line-clamp-2", children: item.title ?? item.id }), onRemove && (_jsx("button", { type: "button", onClick: () => onRemove(item.id), "aria-label": `${labels.remove} ${item.title ?? item.id}`, className: "shrink-0 rounded-full p-1 text-zinc-400 hover:bg-zinc-100 hover:text-rose-500 dark:hover:bg-zinc-800", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsx(FieldRow, { label: labels.field.image, children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", children: _jsx(Div, { className: "relative aspect-square overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800", children: img ? (
+    return (_jsxs(Stack, { gap: "md", className: COLUMN_CARD_CLASS, children: [_jsxs(Row, { justify: "between", align: "start", gap: "sm", children: [_jsx(Link, { href: href, target: "_blank", rel: REL_NOOPENER, className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 hover:underline line-clamp-2", children: item.title ?? item.id }), onRemove && (_jsx("button", { type: "button", onClick: () => onRemove(item.id), "aria-label": `${labels.remove} ${item.title ?? item.id}`, className: "shrink-0 rounded-full p-1 text-zinc-400 hover:bg-zinc-100 hover:text-rose-500 dark:hover:bg-zinc-800", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsx(FieldRow, { label: labels.field.image, children: _jsx(Link, { href: href, target: "_blank", rel: REL_NOOPENER, children: _jsx(Div, { className: "relative aspect-square overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800", children: img ? (
                         // eslint-disable-next-line @next/next/no-img-element
-                        _jsx("img", { src: img, alt: item.title ?? item.id, className: "h-full w-full object-cover" })) : null }) }) }), _jsx(FieldRow, { label: labels.field.price, children: _jsx(Text, { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: priceLabel(item) }) }), _jsx(FieldRow, { label: labels.field.condition, children: _jsx(Text, { children: item.condition ? _jsx("span", { className: CHIP_CLASS, children: item.condition }) : "—" }) }), _jsx(FieldRow, { label: labels.field.brand, children: _jsx(Text, { children: item.brand ? _jsx("span", { className: CHIP_CLASS, children: item.brand }) : "—" }) }), _jsx(FieldRow, { label: labels.field.category, children: _jsx(Text, { children: item.categoryName || item.category ? (_jsx("span", { className: CHIP_CLASS, children: item.categoryName ?? item.category })) : ("—") }) }), _jsx(FieldRow, { label: labels.field.store, children: _jsx(Text, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: item.storeName ?? "—" }) }), _jsx(Button, { asChild: true, variant: "primary", size: "sm", className: "mt-auto", children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", onClick: onClose, children: labels.view }) })] }));
+                        _jsx("img", { src: img, alt: item.title ?? item.id, className: "h-full w-full object-cover" })) : null }) }) }), _jsx(FieldRow, { label: labels.field.price, children: _jsx(Text, { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: priceLabel(item) }) }), _jsx(FieldRow, { label: labels.field.condition, children: _jsx(Text, { children: item.condition ? _jsx("span", { className: CHIP_CLASS, children: item.condition }) : "—" }) }), _jsx(FieldRow, { label: labels.field.brand, children: _jsx(Text, { children: item.brand ? _jsx("span", { className: CHIP_CLASS, children: item.brand }) : "—" }) }), _jsx(FieldRow, { label: labels.field.category, children: _jsx(Text, { children: item.categoryName || item.category ? (_jsx("span", { className: CHIP_CLASS, children: item.categoryName ?? item.category })) : ("—") }) }), _jsx(FieldRow, { label: labels.field.store, children: _jsx(Text, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: item.storeName ?? "—" }) }), _jsx(Button, { asChild: true, variant: "primary", size: "sm", className: "mt-auto", children: _jsx(Link, { href: href, target: "_blank", rel: REL_NOOPENER, onClick: onClose, children: labels.view }) })] }));
 }
 function useFetchedProducts(productIds, passedItems, isOpen) {
     const [fetched, setFetched] = useState([]);

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

@@ -4,6 +4,9 @@ import { useState, useTransition } from "react";
 import { Button, Div, Input, LoginRequiredModal, Span, Text } from "../../../ui";
 import { isAuthError } from "../../../utils/auth-error";
 import { formatCurrency } from "../../../utils/number.formatter";
+function isActiveOfferError(msg) {
+    return msg.includes("active offer") || msg.includes("ACTIVE_OFFER");
+}
 export function MakeOfferButton({ productId, listedPrice, currency, minOfferPercent = 70, onMakeOffer, className = "", }) {
     const [state, setState] = useState("idle");
     const [errorMsg, setErrorMsg] = useState("");
@@ -25,6 +28,22 @@ export function MakeOfferButton({ productId, listedPrice, currency, minOfferPerc
         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)}`);
@@ -43,20 +62,7 @@ export function MakeOfferButton({ productId, listedPrice, currency, minOfferPerc
                 setState("success");
             }
             catch (err) {
-                if (isAuthError(err)) {
-                    setState("idle");
-                    setShowLoginModal(true);
-                }
-                else {
-                    const msg = err instanceof Error ? err.message : String(err);
-                    if (msg.includes("active offer") || msg.includes("ACTIVE_OFFER")) {
-                        setState("pending");
-                    }
-                    else {
-                        setErrorMsg(msg || "Could not send offer. Please try again.");
-                        setState("error");
-                    }
-                }
+                handleOfferError(err);
             }
         });
     }

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

@@ -4,6 +4,7 @@ import { useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { useLongPress } from "../../../react/hooks/useLongPress";
 import { ROUTES } from "../../../next";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { formatCurrency } from "../../../utils";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { BaseListingCard, Button, Div, Row, Span, Text, TextLink, } from "../../../ui";
@@ -15,7 +16,7 @@ const DEFAULT_LABELS = {
     closedBadge: "Draw closed",
     entriesRemainingLabel: (remaining, max) => `${remaining}/${max} entries left`,
     pricePerEntryLabel: "per entry",
-    enterDraw: "Enter draw",
+    enterDraw: ACTIONS.PRIZE_DRAW["enter-draw"].label,
 };
 function statusVariant(status) {
     switch (status) {

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

@@ -1,19 +1,8 @@
-/**
- * PrizeDrawCollage (SB4-B)
- *
- * Read-only display of a prize-draw's full prize pool. Each cell shows the
- * primary image, item-number badge, and title. Items with `isWon === true`
- * are dimmed under a diagonal overlay with a "Won" label so the public
- * collage truthfully reflects what's still up for grabs.
- *
- * Optional `highlightItemNumber` (passed by the reveal modal during animation)
- * adds an emphasis ring to the cell that just won.
- */
 import type { PrizeDrawItem } from "../schemas/firestore";
 export interface PrizeDrawCollageProps {
     items: PrizeDrawItem[];
     highlightItemNumber?: number;
-    /** Custom click handler — e.g. open detail modal for an item. */
+    /** Custom click handler — overrides the built-in lightbox. */
     onItemClick?: (item: PrizeDrawItem) => void;
     /** Defaults to "Won". Use for localisation. */
     wonLabel?: string;
@@ -22,9 +11,6 @@ export interface PrizeDrawCollageProps {
      * renders — otherwise potential buyers would see their favorite prize is
      * already gone and drop out. The seller / admin / winner views leave this
      * `false` (default) to show real pool state.
-     *
-     * The product adapter for public reads should ALSO strip `isWon` before
-     * sending the items array client-side; this prop is the visual fallback.
      */
     hideWonState?: boolean;
 }