@mohasinac/appkit 2.3.0 → 2.3.2

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

@@ -0,0 +1,214 @@
+/**
+ * feat-products — Next.js App Router API handlers (GET /api/products, POST /api/products)
+ *
+ * These handlers are exported so consuming projects can create 2-line stubs:
+ *
+ * ```ts
+ * // app/api/products/route.ts
+ * export { GET, POST } from "@mohasinac/feat-products";
+ * ```
+ *
+ * The db provider must be registered via providers.config.ts before the first
+ * request is handled.  Every read/write goes through the IRepository<ProductItem>
+ * resolved from `getProviders().db.getRepository("products")`.
+ */
+import { NextResponse } from "next/server.js";
+import { z } from "zod";
+import { getProviders } from "../../../contracts";
+import { createRouteHandler } from "../../../next";
+import { mediaFieldSchema } from "../../media/types/index";
+// --- Mutation schemas ---------------------------------------------------------
+// Minimal schemas for secured mutations — consumer apps can extend as needed.
+const productMutateSchema = z
+    .object({
+    title: z.string().min(1).max(200).optional(),
+    description: z.string().max(10000).optional(),
+    price: z.number().positive().optional(),
+    originalPrice: z.number().positive().optional(),
+    currency: z.string().length(3).optional(),
+    category: z.string().optional(),
+    status: z
+        .enum([
+        "draft",
+        "published",
+        "archived",
+        "sold",
+        "discontinued",
+        "out_of_stock",
+    ])
+        .optional(),
+    mainImage: z.string().optional(),
+    images: z.array(z.any()).optional(),
+    tags: z.array(z.string()).optional(),
+    featured: z.boolean().optional(),
+    isPromoted: z.boolean().optional(),
+    isAuction: z.boolean().optional(),
+    isPreOrder: z.boolean().optional(),
+    sellerId: z.string().optional(),
+    sellerName: z.string().optional(),
+    sellerEmail: z.string().email().optional(),
+    slug: z.string().optional(),
+    listingType: z
+        .enum(["fixed", "standard", "auction", "pre-order"])
+        .optional(),
+    media: z.array(mediaFieldSchema).optional(),
+})
+    .passthrough();
+// --- Helpers ------------------------------------------------------------------
+function param(url, key) {
+    return url.searchParams.get(key);
+}
+function numParam(url, key, fallback) {
+    const v = url.searchParams.get(key);
+    const n = v !== null ? Number(v) : NaN;
+    return Number.isFinite(n) ? n : fallback;
+}
+/** Public fields callers may filter on via the ?filters= param. */
+const SAFE_PRODUCT_FILTER_FIELDS = new Set([
+    "status",
+    "category",
+    "brand",
+    "condition",
+    "sellerId",
+    "title",
+    "price",
+    "isAuction",
+    "isPreOrder",
+    "featured",
+    "isPromoted",
+    "stockQuantity",
+    "availableQuantity",
+    "tags",
+]);
+/**
+ * Validates a raw Sieve filter string against an allowlist of safe fields.
+ * Drops any clause whose field name is not in the allowlist.
+ */
+function validateSieveFilters(raw, allowedFields) {
+    return raw
+        .split(",")
+        .map((c) => c.trim())
+        .filter((c) => {
+        const m = c.match(/^([^<>=!@]+)\s*(?:==|!=|<=|>=|<|>|@=\*?)/);
+        return m ? allowedFields.has(m[1].trim()) : false;
+    })
+        .join(",");
+}
+function buildFilters(url) {
+    const parts = [];
+    const status = param(url, "status");
+    if (status)
+        parts.push(`status==${status}`);
+    const category = param(url, "category");
+    if (category)
+        parts.push(`category==${category}`);
+    const brand = param(url, "brand");
+    if (brand)
+        parts.push(`brand==${brand}`);
+    const condition = param(url, "condition");
+    if (condition)
+        parts.push(`condition==${condition}`);
+    const sellerId = param(url, "sellerId");
+    if (sellerId)
+        parts.push(`sellerId==${sellerId}`);
+    const q = param(url, "q");
+    if (q)
+        parts.push(`title@=*${q}`);
+    const minPrice = param(url, "minPrice");
+    if (minPrice !== null && !Number.isNaN(Number(minPrice)))
+        parts.push(`price>=${minPrice}`);
+    const maxPrice = param(url, "maxPrice");
+    if (maxPrice !== null && !Number.isNaN(Number(maxPrice)))
+        parts.push(`price<=${maxPrice}`);
+    const inStock = param(url, "inStock");
+    if (inStock === "true")
+        parts.push("stockQuantity>0");
+    const isAuction = param(url, "isAuction");
+    if (isAuction !== null)
+        parts.push(`isAuction==${isAuction}`);
+    const isPreOrder = param(url, "isPreOrder");
+    if (isPreOrder !== null)
+        parts.push(`isPreOrder==${isPreOrder}`);
+    const featured = param(url, "featured");
+    if (featured === "true")
+        parts.push("featured==true");
+    // Merge validated Sieve filters — only safe public fields allowed
+    const raw = param(url, "filters");
+    if (raw) {
+        const safe = validateSieveFilters(raw, SAFE_PRODUCT_FILTER_FIELDS);
+        if (safe)
+            parts.push(safe);
+    }
+    return parts.join(",");
+}
+// --- GET /api/products --------------------------------------------------------
+export async function GET(request) {
+    try {
+        const url = new URL(request.url);
+        const page = numParam(url, "page", 1);
+        const pageSize = numParam(url, "pageSize", 20);
+        const sort = param(url, "sorts") ?? param(url, "sort") ?? "-createdAt";
+        const filters = buildFilters(url);
+        const { db } = getProviders();
+        if (!db) {
+            return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
+        }
+        const repo = db.getRepository("products");
+        const result = await repo.findAll({
+            filters,
+            sort,
+            page,
+            perPage: pageSize,
+        });
+        const totalPages = Math.max(1, Math.ceil(result.total / pageSize));
+        const body = {
+            items: result.data,
+            total: result.total,
+            page: result.page,
+            pageSize,
+            totalPages,
+            hasMore: result.page < totalPages,
+        };
+        const response = NextResponse.json({ success: true, data: body });
+        response.headers.set("Cache-Control", "public, max-age=60, s-maxage=120, stale-while-revalidate=60");
+        return response;
+    }
+    catch (error) {
+        console.error("[feat-products] GET /api/products failed", error);
+        return NextResponse.json({ success: false, error: "Failed to fetch products" }, { status: 500 });
+    }
+}
+// --- POST /api/products -------------------------------------------------------
+// Requires seller, moderator, or admin role.
+export const POST = createRouteHandler({
+    auth: true,
+    roles: ["seller", "moderator", "admin"],
+    schema: productMutateSchema,
+    handler: async ({ user, body }) => {
+        const payload = body;
+        const userRecord = (user ?? {});
+        const { db } = getProviders();
+        if (!db) {
+            return NextResponse.json({ success: false, error: "Database provider not registered" }, { status: 503 });
+        }
+        const repo = db.getRepository("products");
+        const data = {
+            ...payload,
+            status: "draft",
+            sellerId: typeof payload.sellerId === "string"
+                ? payload.sellerId
+                : typeof userRecord.uid === "string"
+                    ? userRecord.uid
+                    : undefined,
+            sellerName: typeof payload.sellerName === "string"
+                ? payload.sellerName
+                : typeof userRecord.displayName === "string"
+                    ? userRecord.displayName
+                    : undefined,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+        };
+        const created = await repo.create(data);
+        return NextResponse.json({ success: true, data: created }, { status: 201 });
+    },
+});

package/dist/features/products/columns/index.d.ts

@@ -0,0 +1,64 @@
+import type { TableColumn, ColumnExtensionOpts } from "../../../contracts";
+import type { ProductItem } from "../types";
+export { getProductTableColumns } from "./productTableColumns";
+export type { ProductTableColumnLabels, ProductTableColumnsConfig, } from "./productTableColumns";
+export declare const PRODUCT_SORT_VALUES: {
+    readonly NEWEST: "-createdAt";
+    readonly OLDEST: "createdAt";
+    readonly PRICE_LOW: "price";
+    readonly PRICE_HIGH: "-price";
+    readonly RATING_HIGH: "-avgRating";
+    readonly POPULAR: "-viewCount";
+    readonly NAME_AZ: "title";
+    readonly NAME_ZA: "-title";
+};
+export type ProductSortValue = (typeof PRODUCT_SORT_VALUES)[keyof typeof PRODUCT_SORT_VALUES];
+/**
+ * Default admin column definitions for a product table.
+ * These are plain data — no React imports, no JSX.
+ *
+ * Use with `DataTable<T>` from `@mohasinac/feat-admin`.
+ *
+ * @example — consumer app overrides/extends columns
+ * ```ts
+ * import { productAdminColumns } from "@mohasinac/feat-products";
+ * import type { ProductDocument } from "@/db/schema/product.schema";
+ *
+ * const columns: AdminTableColumn<ProductDocument>[] = [
+ *   // keep base columns (cast is safe because ProductDocument extends ProductItem)
+ *   ...(productAdminColumns as AdminTableColumn<ProductDocument>[]),
+ *   // add app-specific column
+ *   {
+ *     key: "brand",
+ *     header: "Brand",
+ *     render: (p) => p.brand ?? "—",
+ *   },
+ * ];
+ * ```
+ *
+ * @example — replace a single column's renderer
+ * ```ts
+ * const columns = productAdminColumns.map((col) =>
+ *   col.key === "title"
+ *     ? { ...col, render: (p: ProductDocument) => <Link href={p.slug}>{p.title}</Link> }
+ *     : col
+ * );
+ * ```
+ */
+export declare const productAdminColumns: TableColumn<ProductItem>[];
+/**
+ * Build a merged column list from the base product columns.
+ * - `overrides`: replace or augment a column by key
+ * - `extras`: append additional columns at the end
+ * - `omit`: remove columns by key
+ *
+ * @example
+ * const cols = buildProductColumns<ProductDocument>({
+ *   overrides: {
+ *     title: { render: (p) => <TitleWithBadge product={p} /> },
+ *   },
+ *   extras: [{ key: "brand", header: "Brand", render: (p) => p.brand }],
+ *   omit: ["condition"],
+ * });
+ */
+export declare function buildProductColumns<T extends ProductItem = ProductItem>(opts?: ColumnExtensionOpts<T>): TableColumn<T>[];

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

@@ -0,0 +1,85 @@
+import { buildColumns, renderBoolean, renderRating, renderCurrencyCompact, } from "../../../ui/columns";
+export { getProductTableColumns } from "./productTableColumns";
+export const PRODUCT_SORT_VALUES = {
+    NEWEST: "-createdAt",
+    OLDEST: "createdAt",
+    PRICE_LOW: "price",
+    PRICE_HIGH: "-price",
+    RATING_HIGH: "-avgRating",
+    POPULAR: "-viewCount",
+    NAME_AZ: "title",
+    NAME_ZA: "-title",
+};
+/**
+ * Default admin column definitions for a product table.
+ * These are plain data — no React imports, no JSX.
+ *
+ * Use with `DataTable<T>` from `@mohasinac/feat-admin`.
+ *
+ * @example — consumer app overrides/extends columns
+ * ```ts
+ * import { productAdminColumns } from "@mohasinac/feat-products";
+ * import type { ProductDocument } from "@/db/schema/product.schema";
+ *
+ * const columns: AdminTableColumn<ProductDocument>[] = [
+ *   // keep base columns (cast is safe because ProductDocument extends ProductItem)
+ *   ...(productAdminColumns as AdminTableColumn<ProductDocument>[]),
+ *   // add app-specific column
+ *   {
+ *     key: "brand",
+ *     header: "Brand",
+ *     render: (p) => p.brand ?? "—",
+ *   },
+ * ];
+ * ```
+ *
+ * @example — replace a single column's renderer
+ * ```ts
+ * const columns = productAdminColumns.map((col) =>
+ *   col.key === "title"
+ *     ? { ...col, render: (p: ProductDocument) => <Link href={p.slug}>{p.title}</Link> }
+ *     : col
+ * );
+ * ```
+ */
+export const productAdminColumns = [
+    { key: "title", header: "Product", sortable: true },
+    {
+        key: "price",
+        header: "Price",
+        sortable: true,
+        render: (p) => renderCurrencyCompact(p.price, p.currency),
+    },
+    { key: "category", header: "Category", sortable: true },
+    { key: "status", header: "Status", sortable: true },
+    { key: "condition", header: "Condition" },
+    {
+        key: "inStock",
+        header: "In Stock",
+        render: (p) => renderBoolean(p.inStock),
+    },
+    {
+        key: "rating",
+        header: "Rating",
+        render: (p) => renderRating(p.rating, p.reviewCount),
+    },
+    { key: "createdAt", header: "Created", sortable: true },
+];
+/**
+ * Build a merged column list from the base product columns.
+ * - `overrides`: replace or augment a column by key
+ * - `extras`: append additional columns at the end
+ * - `omit`: remove columns by key
+ *
+ * @example
+ * const cols = buildProductColumns<ProductDocument>({
+ *   overrides: {
+ *     title: { render: (p) => <TitleWithBadge product={p} /> },
+ *   },
+ *   extras: [{ key: "brand", header: "Brand", render: (p) => p.brand }],
+ *   omit: ["condition"],
+ * });
+ */
+export function buildProductColumns(opts) {
+    return buildColumns(productAdminColumns, opts);
+}

package/dist/features/products/columns/productTableColumns.d.ts

@@ -0,0 +1,27 @@
+import type { DataTableColumn } from "../../../ui/DataTable";
+import type { ProductItem } from "../types";
+export interface ProductTableColumnLabels {
+    title: string;
+    category: string;
+    price: string;
+    stock: string;
+    status: string;
+    seller: string;
+    featured: string;
+    edit: string;
+    delete: string;
+    yes: string;
+    no: string;
+}
+export interface ProductTableColumnsConfig<T extends ProductItem = ProductItem> {
+    labels: ProductTableColumnLabels;
+    onEdit: (product: T) => void;
+    onDelete: (product: T) => void;
+    currencyCode?: string;
+    locale?: string;
+    formatCurrency?: (amount: number, currencyCode?: string, locale?: string) => string;
+}
+export declare function getProductTableColumns<T extends ProductItem = ProductItem>({ labels, onEdit, onDelete, currencyCode, locale, formatCurrency, }: ProductTableColumnsConfig<T>): {
+    columns: DataTableColumn<T>[];
+    actions: (product: T) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Div, Row, Span } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
+import { formatCurrency as defaultFormatCurrency } from "../../../utils/number.formatter";
+const STATUS_STYLES = {
+    published: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
+    draft: "bg-zinc-100 text-zinc-700 dark:bg-slate-700 dark:text-zinc-300",
+    out_of_stock: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300",
+    discontinued: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
+    sold: "bg-primary/10 dark:bg-primary/20 text-primary",
+};
+export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode, locale, formatCurrency = defaultFormatCurrency, }) {
+    const columns = [
+        {
+            key: "title",
+            header: labels.title,
+            sortable: true,
+            width: "25%",
+            render: (product) => (_jsxs(Row, { gap: "sm", children: [product.mainImage ? (_jsx(Div, { className: "relative h-8 w-8 flex-shrink-0 overflow-hidden rounded", children: _jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" }) })) : (_jsx(Div, { className: "h-8 w-8 flex-shrink-0 rounded bg-zinc-200 dark:bg-slate-700" })), _jsx(Span, { className: "max-w-[180px] truncate font-medium", children: product.title })] })),
+        },
+        {
+            key: "category",
+            header: labels.category,
+            sortable: true,
+            width: "12%",
+            render: (product) => _jsx(Span, { children: product.category ?? "-" }),
+        },
+        {
+            key: "price",
+            header: labels.price,
+            sortable: true,
+            width: "10%",
+            render: (product) => (_jsx(Span, { children: formatCurrency(product.price ?? 0, product.currency ?? currencyCode, locale) })),
+        },
+        {
+            key: "stockQuantity",
+            header: labels.stock,
+            sortable: true,
+            width: "10%",
+            render: (product) => (_jsx(Span, { children: product.stockQuantity ?? product.stockCount ?? 0 })),
+        },
+        {
+            key: "status",
+            header: labels.status,
+            sortable: true,
+            width: "12%",
+            render: (product) => {
+                const status = product.status ?? "draft";
+                return (_jsx(Span, { className: [
+                        "rounded px-2 py-1 text-xs font-medium",
+                        STATUS_STYLES[status] ??
+                            "bg-zinc-100 text-zinc-700 dark:bg-slate-700 dark:text-zinc-300",
+                    ].join(" "), children: status.replace("_", " ") }));
+            },
+        },
+        {
+            key: "sellerName",
+            header: labels.seller,
+            sortable: true,
+            width: "15%",
+            render: (product) => (_jsx(Span, { className: "block max-w-[120px] truncate text-sm", children: product.sellerName ?? "-" })),
+        },
+        {
+            key: "featured",
+            header: labels.featured,
+            sortable: true,
+            width: "8%",
+            render: (product) => {
+                const featured = Boolean(product.featured);
+                return (_jsx(Span, { className: [
+                        "rounded px-2 py-1 text-xs font-medium",
+                        featured
+                            ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
+                            : "bg-zinc-100 text-zinc-700 dark:bg-slate-700 dark:text-zinc-300",
+                    ].join(" "), children: featured ? labels.yes : labels.no }));
+            },
+        },
+    ];
+    const actions = (product) => (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onEdit(product);
+                }, className: "text-primary hover:text-primary/80", children: labels.edit }), _jsx(Button, { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete(product);
+                }, className: "text-red-600 hover:text-red-800 dark:text-red-400", children: labels.delete })] }));
+    return { columns, actions };
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { DetailViewShellProps } from "../../../ui";
+export interface AuctionDetailViewProps extends Omit<DetailViewShellProps, "mainSlots" | "belowFold" | "layout" | "afterMain"> {
+    renderGallery?: (isLoading: boolean) => React.ReactNode;
+    renderInfo?: (isLoading: boolean) => React.ReactNode;
+    /** Desktop sticky bid sidebar (hidden on mobile, shown in col 3) */
+    renderBidForm?: () => React.ReactNode;
+    /** Mobile bid form shown below the grid on small screens */
+    renderMobileBidForm?: () => React.ReactNode;
+    renderBidHistory?: () => React.ReactNode;
+    renderRelated?: () => React.ReactNode;
+}
+export declare function AuctionDetailView({ renderGallery, renderInfo, renderBidForm, renderMobileBidForm, renderBidHistory, renderRelated, isLoading, ...rest }: AuctionDetailViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DetailViewShell, Div } from "../../../ui";
+export function AuctionDetailView({ renderGallery, renderInfo, renderBidForm, renderMobileBidForm, renderBidHistory, renderRelated, isLoading = false, ...rest }) {
+    return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: "grid-3", isLoading: isLoading, mainSlots: [
+            renderGallery?.(isLoading),
+            renderInfo?.(isLoading),
+            _jsx(Div, { className: "hidden lg:block", children: renderBidForm?.() }, "bid"),
+        ], afterMain: renderMobileBidForm?.(), belowFold: [renderBidHistory?.(), renderRelated?.()] }));
+}

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

@@ -0,0 +1,5 @@
+export interface AuctionsIndexListingProps {
+    initialData?: any;
+    categorySlug?: string;
+}
+export declare function AuctionsIndexListing({ initialData, categorySlug }: AuctionsIndexListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, LayoutGrid, List, X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useProducts } from "../hooks/useProducts";
+import { Pagination, SortDropdown } from "../../../ui";
+import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
+import { AuctionFilters } from "../../auctions/components/AuctionFilters";
+import { useSession } from "../../../react/contexts/SessionContext";
+import { useWishlistWithGuest } from "../../wishlist/hooks/useWishlistWithGuest";
+import { apiClient } from "../../../http";
+const AUCTION_SORT_OPTIONS = [
+    { value: "auctionEndDate", label: "Ending Soonest" },
+    { value: "-currentBid", label: "Highest Bid" },
+    { value: "-createdAt", label: "Newest" },
+    { value: "price", label: "Price: Low to High" },
+    { value: "-price", label: "Price: High to Low" },
+];
+export function AuctionsIndexListing({ initialData, categorySlug }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [view, setView] = useState(table.get("view") || "grid");
+    const { user } = useSession();
+    const wl = useWishlistWithGuest(user?.uid ?? null);
+    const params = {
+        q: table.get("q") || undefined,
+        category: table.get("category") || undefined,
+        categorySlug: categorySlug || undefined,
+        minBid: table.get("minBid") ? Number(table.get("minBid")) : undefined,
+        maxBid: table.get("maxBid") ? Number(table.get("maxBid")) : undefined,
+        storeId: table.get("storeId") || undefined,
+        dateFrom: table.get("dateFrom") || undefined,
+        dateTo: table.get("dateTo") || undefined,
+        sort: table.get("sort") || "auctionEndDate",
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        isAuction: true,
+    };
+    const { products: auctions, total, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const handleSearchKeyDown = (e) => {
+        if (e.key === "Enter")
+            commitSearch();
+    };
+    const handleViewToggle = (next) => {
+        setView(next);
+        table.set("view", next);
+    };
+    const closeFilters = () => setFilterOpen(false);
+    const wishlistActions = {
+        addToWishlist: async (productId) => {
+            if (wl.isGuest)
+                wl.guestWishlist?.add(productId, "auction");
+            else
+                await apiClient.post("/api/user/wishlist", { productId });
+        },
+        removeFromWishlist: async (productId) => {
+            if (wl.isGuest)
+                wl.guestWishlist?.remove(productId, "auction");
+            else
+                await apiClient.delete(`/api/user/wishlist/${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("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: handleSearchKeyDown, placeholder: "Search auctions...", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "auctionEndDate", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: AUCTION_SORT_OPTIONS })] }), _jsxs("div", { className: "flex shrink-0 items-center rounded-lg border border-zinc-300 dark:border-slate-600 overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => handleViewToggle("grid"), "aria-label": "Grid view", className: `p-2 transition-colors ${view === "grid"
+                                        ? "bg-primary text-white"
+                                        : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleViewToggle("list"), "aria-label": "List view", className: `p-2 transition-colors ${view === "list"
+                                        ? "bg-primary text-white"
+                                        : "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400"}`, children: _jsx(List, { className: "h-4 w-4" }) })] })] }) }), _jsxs("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 })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _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"] }), _jsx("button", { type: "button", onClick: closeFilters, "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: table, currencyPrefix: "\u20B9" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+import type { SlottedListingViewProps } from "../../../ui";
+export interface AuctionsViewProps extends Omit<SlottedListingViewProps, "renderTable"> {
+    renderGrid: (isLoading: boolean) => React.ReactNode;
+}
+export declare function AuctionsView({ renderGrid, ...props }: AuctionsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SlottedListingView } from "../../../ui";
+export function AuctionsView({ renderGrid, ...props }) {
+    return (_jsx(SlottedListingView, { portal: "public", ...props, manageSearch: true, manageSort: true, inlineToolbar: true, renderTable: () => renderGrid(props.isLoading ?? false) }));
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+export interface BidHistoryEntry {
+    id: string;
+    bidderId: string;
+    bidderName?: string;
+    amount: number;
+    placedAt: string;
+}
+export interface BidHistoryProps {
+    isLoading?: boolean;
+    isEmpty?: boolean;
+    /** Render the full list — caller owns layout */
+    renderList?: () => React.ReactNode;
+    /** Render a single bid row */
+    renderBid?: (bid: BidHistoryEntry, index: number) => React.ReactNode;
+    bids?: BidHistoryEntry[];
+    renderEmpty?: () => React.ReactNode;
+    renderSkeleton?: () => React.ReactNode;
+    labels?: {
+        title?: string;
+        noHistory?: string;
+        bidder?: string;
+        amount?: string;
+        time?: string;
+    };
+    className?: string;
+}
+export declare function BidHistory({ isLoading, isEmpty, renderList, renderBid, bids, renderEmpty, renderSkeleton, labels, className, }: BidHistoryProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Span, Text } from "../../../ui";
+export function BidHistory({ isLoading = false, isEmpty = false, renderList, renderBid, bids = [], renderEmpty, renderSkeleton, labels = {}, className = "", }) {
+    if (isLoading) {
+        if (renderSkeleton)
+            return _jsx(_Fragment, { children: renderSkeleton() });
+        return (_jsx("div", { className: "animate-pulse space-y-2", "data-section": "bidhistory-div-419", children: Array.from({ length: 3 }).map((_, i) => (_jsx("div", { className: "h-10 rounded-lg bg-neutral-100" }, i))) }));
+    }
+    if (isEmpty) {
+        if (renderEmpty)
+            return _jsx(_Fragment, { children: renderEmpty() });
+        return (_jsx(Text, { variant: "secondary", size: "sm", className: "py-4", children: labels.noHistory ?? "No bids yet." }));
+    }
+    if (renderList)
+        return _jsx("div", { className: className, "data-section": "bidhistory-div-420", children: renderList() });
+    return (_jsx("div", { className: `space-y-2 ${className}`, "data-section": "bidhistory-div-421", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg border text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { children: bid.bidderName ?? bid.bidderId }), _jsx(Span, { className: "font-medium", children: bid.amount }), _jsx(Span, { className: "text-neutral-500", children: bid.placedAt })] }, bid.id))) }));
+}