@mohasinac/appkit 2.3.0 → 2.3.1

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,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/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))) }));
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+export interface BuyBarProps {
+    children: React.ReactNode;
+    /** Extra classes on the bar wrapper */
+    className?: string;
+}
+/**
+ * BuyBar — sticky mobile purchase action bar.
+ *
+ * Fixed above the bottom navigation (`bottom-16`) on mobile screens.
+ * Hidden on `lg:` and above — desktop uses inline CTAs on the PDP.
+ *
+ * @example
+ * ```tsx
+ * <BuyBar>
+ *   <WishlistButton productId={product.id} />
+ *   <AddToCartButton productId={product.id} className="flex-1" />
+ * </BuyBar>
+ * ```
+ */
+export declare function BuyBar({ children, className }: BuyBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Div } from "../../../ui";
+/**
+ * BuyBar — sticky mobile purchase action bar.
+ *
+ * Fixed above the bottom navigation (`bottom-16`) on mobile screens.
+ * Hidden on `lg:` and above — desktop uses inline CTAs on the PDP.
+ *
+ * @example
+ * ```tsx
+ * <BuyBar>
+ *   <WishlistButton productId={product.id} />
+ *   <AddToCartButton productId={product.id} className="flex-1" />
+ * </BuyBar>
+ * ```
+ */
+export function BuyBar({ children, className }) {
+    return (_jsx(Div, { className: `fixed bottom-16 inset-x-0 z-40 flex items-center gap-2 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-t border-zinc-100 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]${className ? ` ${className}` : ""}`, role: "region", "aria-label": "Purchase actions", children: children }));
+}

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

@@ -0,0 +1,19 @@
+import type { ProductItem } from "../types";
+export interface InteractiveProductCardProps {
+    product: ProductItem;
+    /** Route href — passed from the consumer (e.g. ROUTES.PUBLIC.PRODUCT_DETAIL) */
+    href: string;
+    className?: string;
+    variant?: "grid" | "card" | "fluid" | "list";
+    /** Enables selection mode; prevents navigation and calls onSelect instead */
+    selectable?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string, selected: boolean) => void;
+    /** Whether this product is currently in the user's wishlist */
+    isWishlisted?: boolean;
+    /** Called when the wishlist icon is toggled */
+    onToggleWishlist?: (productId: string) => void;
+    /** Called when the card body is clicked in non-selectable mode */
+    onAddToCart?: (product: ProductItem) => void;
+}
+export declare function InteractiveProductCard({ product, href, className, selectable, isSelected, onSelect, isWishlisted, onToggleWishlist, onAddToCart, }: InteractiveProductCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from "next/link";
+import { ProductCard } from "./ProductGrid";
+export function InteractiveProductCard({ product, href, className, selectable, isSelected, onSelect, isWishlisted = false, onToggleWishlist, onAddToCart, }) {
+    return (_jsx(Link, { href: href, className: [
+            "block",
+            selectable ? "cursor-pointer" : "",
+            isSelected ? "ring-2 ring-primary-600" : "",
+        ]
+            .filter(Boolean)
+            .join(" "), onClick: selectable && onSelect
+            ? (e) => {
+                e.preventDefault();
+                onSelect(product.id, !isSelected);
+            }
+            : undefined, children: _jsx(ProductCard, { product: product, className: className, isWishlisted: isWishlisted, onAddToWishlist: onToggleWishlist, onClick: !selectable && onAddToCart ? () => onAddToCart(product) : undefined }) }));
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+export interface MakeOfferFormProps {
+    listedPrice?: number;
+    isLoading?: boolean;
+    isSubmitted?: boolean;
+    /** Render the offer amount input */
+    renderInput?: () => React.ReactNode;
+    /** Render the create / submit action button */
+    renderAction?: () => React.ReactNode;
+    /** Render terms acceptance checkbox or note */
+    renderTerms?: () => React.ReactNode;
+    /** Render success confirmation after offer is placed */
+    renderSuccess?: () => React.ReactNode;
+    /** Render auth gate when user is not authenticated */
+    renderAuthGate?: () => React.ReactNode;
+    /** Render validation error message */
+    renderError?: () => React.ReactNode;
+    className?: string;
+}
+export declare function MakeOfferForm({ isSubmitted, renderInput, renderAction, renderTerms, renderSuccess, renderAuthGate, renderError, className, }: MakeOfferFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MakeOfferForm({ isSubmitted = false, renderInput, renderAction, renderTerms, renderSuccess, renderAuthGate, renderError, className = "", }) {
+    if (renderAuthGate)
+        return _jsx(_Fragment, { children: renderAuthGate() });
+    if (isSubmitted && renderSuccess)
+        return _jsx(_Fragment, { children: renderSuccess() });
+    return (_jsxs("div", { className: `space-y-4 ${className}`, "data-section": "makeofferform-div-423", children: [renderError?.(), renderInput?.(), renderTerms?.(), renderAction?.()] }));
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+export interface PlaceBidFormProps {
+    currentBid?: number;
+    minBidIncrement?: number;
+    isLoading?: boolean;
+    /** Render the bid amount input field */
+    renderInput?: () => React.ReactNode;
+    /** Render the submit button */
+    renderAction?: () => React.ReactNode;
+    /** Render the current bid / min bid info row */
+    renderBidInfo?: () => React.ReactNode;
+    /** Render an error message */
+    renderError?: () => React.ReactNode;
+    /** Render auth gate when user is not logged in */
+    renderAuthGate?: () => React.ReactNode;
+    /** Render countdown timer for auction end */
+    renderCountdown?: () => React.ReactNode;
+    className?: string;
+}
+export declare function PlaceBidForm({ renderInput, renderAction, renderBidInfo, renderError, renderAuthGate, renderCountdown, className, }: PlaceBidFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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}`, "data-section": "placebidform-div-424", children: [renderCountdown?.(), renderBidInfo?.(), renderError?.(), renderInput?.(), renderAction?.()] }));
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { DetailViewShellProps } from "../../../ui";
+/**
+ * PreOrderDetailView — shell for pre-order product detail pages.
+ * Uses grid-2 layout (gallery | info+buyBar).
+ */
+export interface PreOrderDetailViewProps extends Omit<DetailViewShellProps, "mainSlots" | "belowFold" | "layout"> {
+    renderGallery?: (isLoading: boolean) => React.ReactNode;
+    renderInfo?: (isLoading: boolean) => React.ReactNode;
+    renderBuyBar?: () => React.ReactNode;
+    renderTabs?: () => React.ReactNode;
+    renderRelated?: () => React.ReactNode;
+}
+export declare function PreOrderDetailView({ renderGallery, renderInfo, renderBuyBar, renderTabs, renderRelated, isLoading, ...rest }: PreOrderDetailViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { DetailViewShell } from "../../../ui";
+export function PreOrderDetailView({ renderGallery, renderInfo, renderBuyBar, renderTabs, renderRelated, isLoading = false, ...rest }) {
+    return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: "grid-2", isLoading: isLoading, mainSlots: [
+            renderGallery?.(isLoading),
+            _jsxs(React.Fragment, { children: [renderInfo?.(isLoading), renderBuyBar?.()] }, "info"),
+        ], belowFold: [renderTabs?.(), renderRelated?.()] }));
+}

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

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

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

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

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

@@ -0,0 +1,24 @@
+import React from "react";
+import type { DetailViewShellProps } from "../../../ui";
+export interface ProductDetailViewProps extends Omit<DetailViewShellProps, "mainSlots" | "belowFold" | "layout"> {
+    renderGallery?: (isLoading: boolean) => React.ReactNode;
+    renderInfo?: (isLoading: boolean) => React.ReactNode;
+    /**
+     * 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, stickyActionRail, stickyRailOffset, ...rest }: ProductDetailViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DetailViewShell } from "../../../ui";
+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?.(),
+        ], belowFold: [renderTabs?.(), renderRelated?.()] }));
+}

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

@@ -0,0 +1,32 @@
+interface ProductFeatureBadgeLabels {
+    featured: string;
+    fasterDelivery: string;
+    ratedSeller: string;
+    condition: string;
+    conditionNew: string;
+    conditionUsed: string;
+    conditionBroken: string;
+    conditionRefurbished: string;
+    returnable: string;
+    freeShipping: string;
+    codAvailable: string;
+    wishlistCount: (count: number) => string;
+    categoryProductCount: (count: string, category: string) => string;
+}
+interface ProductFeatureBadgesProps {
+    featured?: boolean;
+    fasterDelivery?: boolean;
+    ratedSeller?: boolean;
+    condition?: string;
+    returnable?: boolean;
+    freeShipping?: boolean;
+    wishlistCount?: number;
+    categoryProductCount?: number;
+    categoryName?: string;
+    codAvailable?: boolean;
+    labels: ProductFeatureBadgeLabels;
+    formatCount?: (value: number) => string;
+    categoryBadgeClassName?: string;
+}
+export declare function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, condition, returnable, freeShipping, wishlistCount, categoryProductCount, categoryName, codAvailable, labels, formatCount, categoryBadgeClassName, }: ProductFeatureBadgesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};