@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -17,7 +17,7 @@ import { z } from "zod";
 import { getProviders } from "../../../contracts";
 import { createRouteHandler } from "../../../next";
 import { mediaFieldSchema } from "../../media/types/index";
-// ─── Mutation schemas ─────────────────────────────────────────────────────────
+// --- Mutation schemas ---------------------------------------------------------
 // Minimal schemas for secured mutations — consumer apps can extend as needed.
 const productMutateSchema = z
     .object({
@@ -54,7 +54,7 @@ const productMutateSchema = z
     media: z.array(mediaFieldSchema).optional(),
 })
     .passthrough();
-// ─── Helpers ──────────────────────────────────────────────────────────────────
+// --- Helpers ------------------------------------------------------------------
 function param(url, key) {
     return url.searchParams.get(key);
 }
@@ -141,7 +141,7 @@ function buildFilters(url) {
     }
     return parts.join(",");
 }
-// ─── GET /api/products ────────────────────────────────────────────────────────
+// --- GET /api/products --------------------------------------------------------
 export async function GET(request) {
     try {
         const url = new URL(request.url);
@@ -178,7 +178,7 @@ export async function GET(request) {
         return NextResponse.json({ success: false, error: "Failed to fetch products" }, { status: 500 });
     }
 }
-// ─── POST /api/products ───────────────────────────────────────────────────────
+// --- POST /api/products -------------------------------------------------------
 // Requires seller, moderator, or admin role.
 export const POST = createRouteHandler({
     auth: true,

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Row, Span } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";

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

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

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useProducts } from "../hooks/useProducts";
+import { Div, Input, Pagination, SortDropdown, SlottedListingView, } from "../../../ui";
+import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
+import { ProductFilters } from "./ProductFilters";
+export function AuctionsIndexListing({ initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "auctionEndDate" } });
+    const params = {
+        q: table.get("q") || undefined,
+        category: table.get("category") || undefined,
+        sort: table.get("sort") || undefined,
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        isAuction: true,
+    };
+    const { products: auctions, total, totalPages, page, isLoading } = useProducts(params, { initialData });
+    return (_jsx(Div, { className: "min-h-screen", children: _jsx(SlottedListingView, { portal: "public", manageSearch: true, manageSort: true, inlineToolbar: true, renderSearch: (search, setSearch) => (_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search auctions...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
+                    { value: "auctionEndDate", label: "Ending Soonest" },
+                    { value: "-createdAt", label: "Newest" },
+                ] })), renderFilters: () => _jsx(ProductFilters, { table: table }), renderTable: () => (_jsx(MarketplaceAuctionGrid, { auctions: auctions })), renderPagination: () => (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }));
+}

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

@@ -5,7 +5,7 @@ export function BidHistory({ isLoading = false, isEmpty = false, renderList, ren
     if (isLoading) {
         if (renderSkeleton)
             return _jsx(_Fragment, { children: renderSkeleton() });
-        return (_jsx("div", { className: "animate-pulse space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx("div", { className: "h-10 rounded-lg bg-neutral-100" }, i))) }));
+        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)
@@ -13,6 +13,6 @@ export function BidHistory({ isLoading = false, isEmpty = false, renderList, ren
         return (_jsx(Text, { variant: "secondary", size: "sm", className: "py-4", children: labels.noHistory ?? "No bids yet." }));
     }
     if (renderList)
-        return _jsx("div", { className: className, children: renderList() });
-    return (_jsx("div", { className: `space-y-2 ${className}`, 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", 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))) }));
+        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))) }));
 }

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Div } from "../../../ui";
 /**

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link";
 import { ProductCard } from "./ProductGrid";

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

@@ -4,5 +4,5 @@ export function MakeOfferForm({ isSubmitted = false, renderInput, renderAction,
         return _jsx(_Fragment, { children: renderAuthGate() });
     if (isSubmitted && renderSuccess)
         return _jsx(_Fragment, { children: renderSuccess() });
-    return (_jsxs("div", { className: `space-y-4 ${className}`, children: [renderError?.(), renderInput?.(), renderTerms?.(), renderAction?.()] }));
+    return (_jsxs("div", { className: `space-y-4 ${className}`, "data-section": "makeofferform-div-423", children: [renderError?.(), renderInput?.(), renderTerms?.(), renderAction?.()] }));
 }

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

@@ -2,5 +2,5 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 export function PlaceBidForm({ renderInput, renderAction, renderBidInfo, renderError, renderAuthGate, renderCountdown, className = "", }) {
     if (renderAuthGate)
         return _jsx(_Fragment, { children: renderAuthGate() });
-    return (_jsxs("div", { className: `space-y-4 ${className}`, children: [renderCountdown?.(), renderBidInfo?.(), renderError?.(), renderInput?.(), renderAction?.()] }));
+    return (_jsxs("div", { className: `space-y-4 ${className}`, "data-section": "placebidform-div-424", children: [renderCountdown?.(), renderBidInfo?.(), renderError?.(), renderInput?.(), renderAction?.()] }));
 }

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

@@ -0,0 +1,4 @@
+export interface ProductDetailPageViewProps {
+    slug: string;
+}
+export declare function ProductDetailPageView({ slug }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import { productRepository, reviewRepository } from "../../../repositories";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { Button, Container, Div, Heading, Main, RichText, Row, Section, Span, Stack, Text, } from "../../../ui";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { ReviewsList } from "../../reviews/components/ReviewsList";
+import { ProductGrid } from "./ProductGrid";
+import { RelatedProducts } from "./RelatedProducts";
+import { BuyBar } from "./BuyBar";
+import { ProductDetailView } from "./ProductDetailView";
+import { ProductGalleryClient } from "./ProductGalleryClient";
+import { ProductTabsShell } from "./ProductTabsShell";
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function mapToProductItem(doc) {
+    return {
+        id: String(doc.id ?? ""),
+        title: String(doc.name ?? doc.title ?? "Product"),
+        price: typeof doc.price === "number" ? doc.price : 0,
+        mainImage: Array.isArray(doc.images)
+            ? doc.images[0]
+            : typeof doc.imageUrl === "string"
+                ? doc.imageUrl
+                : undefined,
+        status: doc.status ?? "published",
+        slug: typeof doc.slug === "string" ? doc.slug : undefined,
+        sellerName: typeof doc.sellerName === "string" ? doc.sellerName : undefined,
+        rating: typeof doc.rating === "number" ? doc.rating : undefined,
+        reviewCount: typeof doc.reviewCount === "number" ? doc.reviewCount : undefined,
+    };
+}
+function mapToReview(doc) {
+    const images = Array.isArray(doc.images)
+        ? doc.images.map((url) => ({ url }))
+        : undefined;
+    const createdAt = doc.createdAt instanceof Date
+        ? doc.createdAt.toISOString()
+        : typeof doc.createdAt === "string"
+            ? doc.createdAt
+            : undefined;
+    const rawRating = typeof doc.rating === "number" ? doc.rating : 3;
+    const rating = Math.min(5, Math.max(1, Math.round(rawRating)));
+    return {
+        id: String(doc.id ?? ""),
+        productId: String(doc.productId ?? ""),
+        userId: String(doc.userId ?? ""),
+        userName: String(doc.userName ?? "Anonymous"),
+        userAvatar: typeof doc.userAvatar === "string" ? doc.userAvatar : undefined,
+        rating,
+        title: typeof doc.title === "string" ? doc.title : undefined,
+        comment: typeof doc.comment === "string" ? doc.comment : undefined,
+        images,
+        status: doc.status ?? "approved",
+        helpfulCount: typeof doc.helpfulCount === "number" ? doc.helpfulCount : undefined,
+        verified: doc.verified === true,
+        featured: doc.featured === true,
+        createdAt,
+    };
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export async function ProductDetailPageView({ slug }) {
+    const product = await productRepository.findByIdOrSlug(slug).catch(() => undefined);
+    if (!product) {
+        return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "center", gap: "md", className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Product Not Found" }), _jsx(Text, { className: "text-zinc-500", children: "The product you are looking for may have been removed or the link is incorrect." }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Products" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const price = typeof p.price === "number"
+        ? new Intl.NumberFormat(undefined, { style: "currency", currency }).format(p.price)
+        : null;
+    const images = Array.isArray(p.images)
+        ? p.images
+        : typeof p.imageUrl === "string"
+            ? [p.imageUrl]
+            : [];
+    const inStock = typeof p.stockQuantity === "number" ? p.stockQuantity > 0 : p.status === "published";
+    const specs = Array.isArray(p.specifications)
+        ? p.specifications
+        : [];
+    // Fetch reviews and related products in parallel
+    const [reviewDocs, relatedDocs] = await Promise.all([
+        reviewRepository.findApprovedByProduct(product.id).catch(() => []),
+        typeof p.category === "string" && p.category
+            ? productRepository.findByCategory(p.category).catch(() => [])
+            : Promise.resolve([]),
+    ]);
+    const reviews = reviewDocs.map((doc) => mapToReview(doc));
+    const relatedItems = relatedDocs
+        .filter((r) => r.id !== product.id)
+        .slice(0, 4)
+        .map(mapToProductItem);
+    return (_jsxs(_Fragment, { children: [_jsx(ProductDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: typeof p.name === "string" ? p.name : undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: typeof p.name === "string" ? p.name : "Product" }), price && (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { className: "text-2xl font-semibold text-primary-600 dark:text-primary-400", children: price }), !inStock && (_jsx(Span, { className: "rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400", children: "Out of stock" }))] })), typeof p.description === "string" && p.description && (_jsx(RichText, { html: normalizeRichTextHtml(p.description), className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400" })), typeof p.sellerName === "string" && p.sellerName && (_jsxs(Row, { align: "center", gap: "xs", children: [_jsx(Span, { className: "text-xs text-zinc-500", children: "Sold by" }), _jsx(Span, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: p.sellerName })] }))] })), renderActions: () => (_jsx(Div, { className: "rounded-xl border border-zinc-100 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900", children: _jsxs(Stack, { gap: "sm", children: [price && (_jsx(Text, { className: "text-xl font-bold text-zinc-900 dark:text-zinc-50", children: price })), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", children: "Add to Wishlist" })] }) })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: typeof p.description === "string" && p.description ? (_jsx(RichText, { html: normalizeRichTextHtml(p.description), className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400" })) : undefined, specsContent: specs.length > 0 ? (_jsx("dl", { className: "divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800 overflow-hidden text-sm", children: specs.map((s, i) => (_jsxs("div", { className: "flex gap-4 px-4 py-3 bg-white dark:bg-zinc-900 even:bg-zinc-50 dark:even:bg-zinc-800/50", children: [_jsx("dt", { className: "w-40 flex-shrink-0 font-medium text-zinc-700 dark:text-zinc-300", children: s.name }), _jsxs("dd", { className: "flex-1 text-zinc-600 dark:text-zinc-400", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsList, { reviews: reviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }) })), renderRelated: () => relatedItems.length > 0 ? (_jsx(RelatedProducts, { labels: { title: "You might also like" }, renderGrid: () => (_jsx(ProductGrid, { products: relatedItems, getProductHref: (item) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(item.slug
+                            ? String(item.slug)
+                            : item.id)) })) })) : null }), _jsxs(BuyBar, { children: [price && (_jsx(Span, { className: "mr-auto text-sm font-bold text-zinc-900 dark:text-zinc-50", children: price })), _jsx(Button, { variant: "primary", size: "sm", className: "flex-1", disabled: !inStock, children: inStock ? "Add to Cart" : "Out of Stock" })] })] }));
+}

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

@@ -3,9 +3,22 @@ import type { DetailViewShellProps } from "../../../ui";
 export interface ProductDetailViewProps extends Omit<DetailViewShellProps, "mainSlots" | "belowFold" | "layout"> {
     renderGallery?: (isLoading: boolean) => React.ReactNode;
     renderInfo?: (isLoading: boolean) => React.ReactNode;
-    /** Sticky actions sidebar (desktop col 3). Also used for mobile BuyBar. */
+    /**
+     * Desktop sticky action rail (col 3). Rendered inline on mobile — use
+     * `useBottomActions` in the consumer to also register mobile bottom actions.
+     */
     renderActions?: () => React.ReactNode;
     renderTabs?: () => React.ReactNode;
     renderRelated?: () => React.ReactNode;
+    /**
+     * When true (default), the action rail (col 3) becomes sticky on desktop so
+     * it stays visible while the user scrolls the gallery and info columns.
+     */
+    stickyActionRail?: boolean;
+    /**
+     * Top offset for the sticky action rail. Defaults to `"top-20"` (below the
+     * title bar on typical letitrip page layout).
+     */
+    stickyRailOffset?: string;
 }
-export declare function ProductDetailView({ renderGallery, renderInfo, renderActions, renderTabs, renderRelated, isLoading, ...rest }: ProductDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductDetailView({ renderGallery, renderInfo, renderActions, renderTabs, renderRelated, isLoading, stickyActionRail, stickyRailOffset, ...rest }: ProductDetailViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DetailViewShell } from "../../../ui";
-export function ProductDetailView({ renderGallery, renderInfo, renderActions, renderTabs, renderRelated, isLoading = false, ...rest }) {
-    return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: "grid-3", isLoading: isLoading, mainSlots: [
+export function ProductDetailView({ renderGallery, renderInfo, renderActions, renderTabs, renderRelated, isLoading = false, stickyActionRail = true, stickyRailOffset = "top-20", ...rest }) {
+    return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: "grid-3", isLoading: isLoading, stickyActionRail: stickyActionRail, stickyRailOffset: stickyRailOffset, mainSlots: [
             renderGallery?.(isLoading),
             renderInfo?.(isLoading),
             renderActions?.(),

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row, Span } from "../../../ui";
 export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, condition, returnable, freeShipping, wishlistCount, categoryProductCount, categoryName, codAvailable, labels, formatCount, categoryBadgeClassName, }) {

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";

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

@@ -2,10 +2,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useTranslations } from "next-intl";
-import { Alert, Checkbox, FormField, FormGroup, Heading, Stack, Text, } from "../../../ui";
+import { Alert, Checkbox, FormField, FormGroup, Heading, RichTextEditor, Stack, Text, } from "../../../ui";
 import { ImageUpload, MediaUploadField, MediaUploadList, } from "../../media";
 import { useMediaUpload } from "../../media";
 import { resolveDate } from "../../../utils/date.formatter";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 export const PRODUCT_STATUS_OPTIONS = [
     { value: "draft", label: "Draft" },
     { value: "published", label: "Published" },
@@ -48,7 +49,7 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                     content: product.description || "",
                     onChange: (value) => update({ description: value }),
                     editable: !isReadonly,
-                }) })) : (_jsx(FormField, { name: "description", label: t("formDescription"), type: "textarea", value: product.description || "", onChange: (value) => update({ description: value }), disabled: isReadonly, placeholder: "Enter product description", rows: 6 })), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsx(_Fragment, { children: renderCategorySelector({
+                }) })) : (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: t("formDescription") }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(product.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, placeholder: "Enter product description" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rich text is supported for product descriptions." })] })), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsx(_Fragment, { children: renderCategorySelector({
                             label: t("formCategory"),
                             value: product.category || "",
                             onChange: (value) => update({ category: value }),

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

@@ -0,0 +1,5 @@
+export interface ProductGalleryClientProps {
+    images: string[];
+    productName?: string;
+}
+export declare function ProductGalleryClient({ images, productName }: ProductGalleryClientProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageLightbox } from "../../../ui/components/ImageLightbox";
+const PlaceholderSvg = () => (_jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }));
+export function ProductGalleryClient({ images, productName }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [lightboxIndex, setLightboxIndex] = useState(null);
+    const lightboxImages = images.map((src, i) => ({
+        src,
+        alt: productName ? `${productName} — image ${i + 1}` : `Product image ${i + 1}`,
+    }));
+    if (images.length === 0) {
+        return (_jsx("div", { className: "overflow-hidden rounded-xl border border-zinc-100 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: _jsx("div", { className: "flex aspect-square items-center justify-center text-zinc-300 dark:text-zinc-700", children: _jsx(PlaceholderSvg, {}) }) }));
+    }
+    const mainImage = images[activeIndex] ?? images[0];
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "overflow-hidden rounded-xl border border-zinc-100 dark:border-zinc-800 cursor-zoom-in", onClick: () => setLightboxIndex(activeIndex), role: "button", tabIndex: 0, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ")
+                        setLightboxIndex(activeIndex);
+                }, "aria-label": `View ${productName ?? "product"} image in full screen`, children: _jsx("img", { src: mainImage, alt: productName ? `${productName} — image ${activeIndex + 1}` : `Product image ${activeIndex + 1}`, className: "aspect-square w-full object-cover transition-transform duration-300 hover:scale-105" }) }), images.length > 1 && (_jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: images.map((src, i) => (_jsx("button", { type: "button", onClick: () => setActiveIndex(i), className: `flex-shrink-0 h-16 w-16 overflow-hidden rounded-lg border-2 transition-all${i === activeIndex
+                        ? " border-primary-500"
+                        : " border-transparent opacity-60 hover:opacity-100"}`, "aria-label": `View image ${i + 1}`, "aria-current": i === activeIndex ? "true" : undefined, children: _jsx("img", { src: src, alt: "", className: "h-full w-full object-cover" }) }, i))) })), images.length > 1 && (_jsxs("p", { className: "text-center text-xs text-zinc-400 dark:text-zinc-500", children: [activeIndex + 1, " / ", images.length] })), _jsx(ImageLightbox, { images: lightboxImages, activeIndex: lightboxIndex, onClose: () => setLightboxIndex(null), onNavigate: (i) => setLightboxIndex(i) })] }));
+}

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

@@ -4,12 +4,14 @@ import type { ViewMode } from "../../../ui";
 import type { ProductItem } from "../types";
 interface ProductCardProps<T extends ProductItem = ProductItem> {
     product: T;
+    /** When provided, wraps the card in a Link for navigation. */
+    href?: string;
     onClick?: (product: T) => void;
     onAddToWishlist?: (productId: string) => void;
     isWishlisted?: boolean;
     className?: string;
 }
-export declare function ProductCard<T extends ProductItem = ProductItem>({ product, onClick, onAddToWishlist, isWishlisted, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, className, }: ProductCardProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface ProductCardContext<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onWishlistToggle?: (productId: string) => void;
@@ -31,6 +33,8 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
      */
     renderCard?: (product: T, ctx: ProductCardContext<T>) => React.ReactNode;
     onProductClick?: (product: T) => void;
+    /** When provided, each card is wrapped in a Link using this href generator. */
+    getProductHref?: (product: T) => string;
     onWishlistToggle?: (productId: string) => void;
     wishlistedIds?: Set<string>;
     /** Text shown when the list is empty and no `emptySlot` is provided. */
@@ -65,5 +69,5 @@ interface ProductGridProps<T extends ProductItem = ProductItem> {
      */
     view?: ViewMode;
 }
-export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, onWishlistToggle, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ProductGrid<T extends ProductItem = ProductItem>({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel, emptySlot, headerSlot, footerSlot, className, slots, total, currentPage, totalPages, view, }: ProductGridProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,21 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Button, Div, Grid, Row, Span, Text } from "../../../ui";
+import Link from "next/link";
+import { Button, Div, Grid, RichText, Row, Span, Text } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
 import { formatCurrency } from "../../../utils/number.formatter";
-import { getDefaultCurrency } from "../../../core/baseline-resolver";
-export function ProductCard({ product, onClick, onAddToWishlist, isWishlisted, className = "", }) {
+import { getDefaultCurrency, getDefaultCurrencySymbol } from "../../../core/baseline-resolver";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { safeDisplayName } from "../../../security";
+export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, className = "", }) {
     const discount = product.originalPrice && product.originalPrice > product.price
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
         : null;
-    return (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
+    const cardBody = (_jsxs(Div, { role: onClick ? "button" : undefined, tabIndex: onClick && !href ? 0 : undefined, onKeyDown: onClick && !href
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(product)
-            : undefined, onClick: onClick ? () => onClick(product) : undefined, className: `group relative flex flex-col h-full overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm transition hover:shadow-md ${onClick ? "cursor-pointer" : ""} ${className}`, children: [_jsxs(Div, { className: "relative aspect-square overflow-hidden bg-neutral-100", children: [product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "h-full w-full bg-neutral-200" })), discount && (_jsxs(Span, { className: "absolute left-2 top-2 rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white", children: ["-", discount, "%"] })), product.isAuction && (_jsx(Span, { className: "absolute right-2 top-2 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-bold text-white", children: "Auction" })), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+            : undefined, onClick: onClick && !href ? () => onClick(product) : undefined, className: `group relative flex h-full flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${onClick || href ? "cursor-pointer" : ""} ${className}`, children: [_jsxs(Div, { className: "relative aspect-square overflow-hidden bg-neutral-100 dark:bg-slate-800", children: [product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "h-full w-full bg-center bg-cover transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "h-full w-full bg-neutral-200 dark:bg-slate-700" })), discount && (_jsxs(Span, { className: "absolute left-2 top-2 rounded-full bg-red-500 px-2 py-0.5 text-xs font-bold text-white", children: ["-", discount, "%"] })), product.isAuction && (_jsx(Span, { className: "absolute right-2 top-2 rounded-full bg-amber-500 px-2 py-0.5 text-xs font-bold text-white", children: "Auction" })), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                             e.stopPropagation();
                             onAddToWishlist(product.id);
-                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-neutral-600 shadow transition hover:bg-white hover:text-red-500", children: isWishlisted ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col p-3", children: [_jsx(Text, { className: "line-clamp-2 text-sm font-medium text-neutral-900", children: product.title }), product.sellerName && (_jsx(Text, { className: "mt-0.5 text-xs text-neutral-400", children: product.sellerName })), _jsxs(Div, { className: "mt-2 flex items-baseline gap-2", children: [_jsx(Span, { className: "font-semibold text-neutral-900", children: formatCurrency(product.price, product.currency ?? getDefaultCurrency()) }), product.originalPrice && (_jsx(Span, { className: "text-xs text-neutral-400 line-through", children: formatCurrency(product.originalPrice, product.currency ?? getDefaultCurrency()) }))] }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1", children: [_jsx(Span, { className: "text-xs text-yellow-500", children: "\u2605" }), _jsxs(Span, { className: "text-xs text-neutral-500", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] }))] })] }));
+                        }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "absolute bottom-2 right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 dark:bg-slate-800/90 text-neutral-600 dark:text-zinc-300 shadow transition hover:bg-white dark:hover:bg-slate-700 hover:text-red-500", children: isWishlisted ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex flex-1 flex-col border-t border-zinc-200/80 bg-zinc-50 p-3 dark:border-slate-700/80 dark:bg-slate-900", children: [_jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-950 dark:text-white`, children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mt-1 ${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-600 dark:text-zinc-400` })), product.sellerName && (_jsx(Text, { className: "mt-0.5 text-xs text-zinc-600 dark:text-zinc-400", children: safeDisplayName(product.sellerName, "Seller") })), _jsxs(Div, { className: "mt-2 flex items-baseline gap-2", children: [_jsx(Span, { className: "font-semibold text-zinc-950 dark:text-white", children: formatCurrency(product.price, getDefaultCurrency()) }), product.originalPrice && (_jsx(Span, { className: "text-xs text-zinc-500 line-through dark:text-zinc-400", children: formatCurrency(product.originalPrice, getDefaultCurrency()) }))] }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1 gap-1", children: [_jsx(Span, { className: "text-xs text-yellow-500", children: "\u2605" }), _jsxs(Span, { className: "text-xs text-neutral-500 dark:text-zinc-400", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] }))] })] }));
+    if (href) {
+        return (_jsx(Link, { href: href, className: "block h-full", children: cardBody }));
+    }
+    return cardBody;
 }
-// ─── Grid class maps ─────────────────────────────────────────────────────────
+// --- Grid class maps ---------------------------------------------------------
 const GRID_CLASSES = {
     card: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4",
 };
@@ -33,12 +41,12 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
             onClick ? "cursor-pointer" : "",
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { className: "flex-shrink-0 w-[72px] h-[72px] rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "w-full h-full bg-center bg-cover", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200 dark:bg-zinc-700" })) }), _jsx(Text, { className: "flex-1 min-w-0 truncate text-sm font-medium text-neutral-900 dark:text-zinc-100", children: product.title }), product.categoryName && (_jsx(Span, { className: "hidden sm:block w-[110px] text-xs text-neutral-400 dark:text-zinc-500 truncate", children: product.categoryName })), product.rating !== undefined && (_jsxs(Span, { className: "hidden sm:flex w-[72px] items-center gap-0.5 text-xs text-neutral-500", children: [_jsx(Span, { className: "text-yellow-500", children: "\u2605" }), product.rating.toFixed(1)] })), _jsxs(Div, { className: "w-[80px] text-right flex-shrink-0", children: [_jsxs(Span, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: [product.currency ?? "₹", product.price.toLocaleString()] }), discount && (_jsxs(Span, { className: "block text-[10px] text-neutral-400 dark:text-zinc-500", children: ["-", discount, "%"] }))] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
+            .join(" "), children: [_jsx(Div, { className: "flex-shrink-0 w-[72px] h-[72px] rounded-lg overflow-hidden bg-neutral-100 dark:bg-zinc-800", children: product.mainImage ? (_jsx(Div, { role: "img", "aria-label": product.title, className: "w-full h-full bg-center bg-cover", style: { backgroundImage: `url(${product.mainImage})` } })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200 dark:bg-zinc-700" })) }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate text-sm font-medium text-neutral-900 dark:text-zinc-100", children: product.title }), product.description && (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp1} text-xs text-neutral-500 dark:text-zinc-400` }))] }), product.categoryName && (_jsx(Span, { className: "hidden sm:block w-[110px] text-xs text-neutral-400 dark:text-zinc-500 truncate", children: product.categoryName })), product.rating !== undefined && (_jsxs(Span, { className: "hidden sm:flex w-[72px] items-center gap-0.5 text-xs text-neutral-500", children: [_jsx(Span, { className: "text-yellow-500", children: "\u2605" }), product.rating.toFixed(1)] })), _jsxs(Div, { className: "w-[80px] text-right flex-shrink-0", children: [_jsxs(Span, { className: "text-sm font-semibold text-neutral-900 dark:text-zinc-100", children: [getDefaultCurrencySymbol(), product.price.toLocaleString()] }), discount && (_jsxs(Span, { className: "block text-[10px] text-neutral-400 dark:text-zinc-500", children: ["-", discount, "%"] }))] }), onAddToWishlist && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: (e) => {
                     e.stopPropagation();
                     onAddToWishlist(product.id);
                 }, "aria-label": isWishlisted ? "Remove from wishlist" : "Add to wishlist", className: "flex-shrink-0 w-[36px] h-[36px] flex items-center justify-center rounded-lg text-neutral-400 hover:text-red-500 transition-colors", children: isWishlisted ? "♥" : "♡" }))] }));
 }
-export function ProductGrid({ products, renderCard, onProductClick, onWishlistToggle, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", }) {
+export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", }) {
     const isEmpty = products.length === 0;
     // Slot resolution: explicit props win over `slots` object
     const resolvedHeader = headerSlot ??
@@ -70,7 +78,7 @@ export function ProductGrid({ products, renderCard, onProductClick, onWishlistTo
                     const cardRenderer = renderCard ?? slots?.renderCard;
                     return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                             ? renderCard(p, ctx)
-                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
+                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
                 }) }));
         }
         const gridClass = GRID_CLASSES.card;
@@ -83,7 +91,7 @@ export function ProductGrid({ products, renderCard, onProductClick, onWishlistTo
                 const cardRenderer = renderCard ?? slots?.renderCard;
                 return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                         ? renderCard(p, ctx)
-                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
+                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: getProductHref ? getProductHref(p) : undefined, onClick: onProductClick, onAddToWishlist: onWishlistToggle, isWishlisted: ctx.isWishlisted }, p.id));
             }) }));
     };
     return (_jsxs(Div, { children: [resolvedHeader, isEmpty

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

@@ -1,4 +1,4 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function ProductInfo({ isLoading = false, renderTitle, renderPrice, renderBadges, renderDescription, renderVariants, renderSeller, renderRating, className = "", }) {
-    return (_jsxs("div", { className: `space-y-4 ${className}`, children: [renderTitle?.(isLoading), renderRating?.(), renderPrice?.(isLoading), renderBadges?.(), renderVariants?.(), renderDescription?.(), renderSeller?.()] }));
+    return (_jsxs("div", { className: `space-y-4 ${className}`, "data-section": "productinfo-div-425", children: [renderTitle?.(isLoading), renderRating?.(), renderPrice?.(isLoading), renderBadges?.(), renderVariants?.(), renderDescription?.(), renderSeller?.()] }));
 }

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 const DEFAULT_TABS = [
@@ -16,7 +17,7 @@ export function ProductTabs({ renderDescription, renderSpecs, renderReviews, ext
         ...extraTabs,
     ];
     const tabs = allTabs.length > 0 ? allTabs : DEFAULT_TABS;
-    return (_jsxs("div", { className: className, children: [renderTabBar ? (renderTabBar(activeTab, setActiveTab, tabs)) : (_jsx("div", { className: "flex gap-4 border-b mb-4", children: tabs.map((t) => (_jsx("button", { onClick: () => setActiveTab(t.value), className: `pb-2 text-sm font-medium border-b-2 transition-colors ${activeTab === t.value
+    return (_jsxs("div", { className: className, "data-section": "producttabs-div-426", children: [renderTabBar ? (renderTabBar(activeTab, setActiveTab, tabs)) : (_jsx("div", { className: "flex gap-4 border-b mb-4", "data-section": "producttabs-div-427", children: tabs.map((t) => (_jsx("button", { onClick: () => setActiveTab(t.value), className: `pb-2 text-sm font-medium border-b-2 transition-colors ${activeTab === t.value
                         ? "border-current text-current"
                         : "border-transparent text-neutral-500"}`, children: t.label }, t.value))) })), activeTab === "description" && renderDescription?.(), activeTab === "specs" && renderSpecs?.(), activeTab === "reviews" && renderReviews?.(), renderExtraTab?.(activeTab)] }));
 }

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

@@ -0,0 +1,18 @@
+import React from "react";
+export interface ProductTabsShellProps {
+    /** Pre-rendered description content (server RSC node) */
+    descriptionContent?: React.ReactNode;
+    /** Pre-rendered specifications content (server RSC node) */
+    specsContent?: React.ReactNode;
+    /** Pre-rendered reviews content (server RSC node) */
+    reviewsContent?: React.ReactNode;
+    className?: string;
+}
+/**
+ * RSC-safe tab shell for product detail pages.
+ *
+ * Accepts pre-rendered ReactNode children instead of render functions so the
+ * component can be used inside a server component tree. (Functions cannot cross
+ * the RSC serialisation boundary to a "use client" component.)
+ */
+export declare function ProductTabsShell({ descriptionContent, specsContent, reviewsContent, className, }: ProductTabsShellProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const TABS = [
+    { id: "description", label: "Description" },
+    { id: "specs", label: "Specifications" },
+    { id: "reviews", label: "Reviews" },
+];
+/**
+ * RSC-safe tab shell for product detail pages.
+ *
+ * Accepts pre-rendered ReactNode children instead of render functions so the
+ * component can be used inside a server component tree. (Functions cannot cross
+ * the RSC serialisation boundary to a "use client" component.)
+ */
+export function ProductTabsShell({ descriptionContent, specsContent, reviewsContent, className = "", }) {
+    const visibleTabs = TABS.filter((t) => (t.id === "description" && descriptionContent != null) ||
+        (t.id === "specs" && specsContent != null) ||
+        (t.id === "reviews" && reviewsContent != null));
+    const [activeTab, setActiveTab] = useState(visibleTabs[0]?.id ?? "description");
+    if (visibleTabs.length === 0)
+        return null;
+    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "mb-6 flex gap-4 border-b border-zinc-200 dark:border-zinc-700", children: visibleTabs.map((t) => (_jsx("button", { type: "button", onClick: () => setActiveTab(t.id), className: `-mb-px pb-2.5 text-sm font-medium border-b-2 transition-colors ${activeTab === t.id
+                        ? "border-primary-500 text-primary-600 dark:text-primary-400"
+                        : "border-transparent text-neutral-500 hover:text-neutral-700 dark:hover:text-zinc-300"}`, children: t.label }, t.id))) }), _jsxs("div", { children: [activeTab === "description" && descriptionContent, activeTab === "specs" && specsContent, activeTab === "reviews" && reviewsContent] })] }));
+}

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

@@ -0,0 +1,4 @@
+export interface ProductsIndexListingProps {
+    initialData?: any;
+}
+export declare function ProductsIndexListing({ initialData }: ProductsIndexListingProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { useProducts } from "../hooks/useProducts";
+import { Div, Input, Pagination, SortDropdown, SlottedListingView, } from "../../../ui";
+import { ROUTES } from "../../../next";
+import { ProductGrid, ProductFilters } from ".";
+export function ProductsIndexListing({ initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: "-createdAt" } });
+    const params = {
+        q: table.get("q") || undefined,
+        category: table.get("category") || undefined,
+        minPrice: table.get("minPrice") ? Number(table.get("minPrice")) : undefined,
+        maxPrice: table.get("maxPrice") ? Number(table.get("maxPrice")) : undefined,
+        condition: table.get("condition") || undefined,
+        sort: table.get("sort") || undefined,
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        isAuction: false,
+    };
+    const { products, total, totalPages, page, isLoading } = useProducts(params, { initialData });
+    return (_jsx(Div, { className: "min-h-screen", children: _jsx(SlottedListingView, { portal: "public", manageSearch: true, manageSort: true, inlineToolbar: true, renderSearch: (search, setSearch) => (_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search products...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: [
+                    { value: "-createdAt", label: "Newest First" },
+                    { value: "-price", label: "Price: High to Low" },
+                    { value: "price", label: "Price: Low to High" },
+                ] })), renderFilters: () => _jsx(ProductFilters, { table: table }), renderTable: () => (_jsx(ProductGrid, { products: products, getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)), view: table.get("view") || "card" })), renderPagination: () => (_jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })), total: total, isLoading: isLoading }) }));
+}

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

@@ -0,0 +1 @@
+export declare function ProductsIndexPageView(): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { productRepository } from "../../../repositories";
+import { Container, Heading, Main, Section } from "../../../ui";
+import { AdSlot } from "../../homepage/components/AdSlot";
+import { ProductsIndexListing } from "./ProductsIndexListing";
+export async function ProductsIndexPageView() {
+    const result = await productRepository
+        .list({
+        filters: "status==published,isAuction==false",
+        sorts: "-createdAt",
+        page: 1,
+        pageSize: 24,
+    })
+        .catch(() => null);
+    const products = result ?? null;
+    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900", children: "Products" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(ProductsIndexListing, { initialData: products }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}