@mohasinac/appkit 4.2.0 → 4.3.0

package/dist/features/auctions/components/AuctionDetailPageView.js

@@ -31,6 +31,7 @@ import { MarketplaceAuctionGrid } from "./MarketplaceAuctionGrid";
 import { listReviewsBySeller } from "../../reviews/actions/review-actions";
 import { PlaceBidModalButton } from "./PlaceBidFormClient";
 import { CollapsibleBidHistory } from "./CollapsibleBidHistory";
+import { LiveBidPrice } from "./LiveBidPrice";
 import { SublistingCarouselSection } from "../../products/components/SublistingCarouselSection";
 function toDescriptionHtml(raw) {
     if (!raw)
@@ -39,8 +40,8 @@ function toDescriptionHtml(raw) {
     return normalizeRichTextHtml(s);
 }
 function renderAuctionInfoPanel(props) {
-    const { title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { weight: "bold", className: "text-primary-600 dark:text-primary-400", size: "2xl", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "sm", weight: "medium", rounded: "full", padding: "pill-md", surface: "subtle", color: "muted", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids"] })] }), endDate && _jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: [isEnded ? "Ended" : "Ends", " ", _jsx(Span, { weight: "medium", color: "muted", children: endDate.toLocaleString() })] })] }), buyNowPrice !== null && !isEnded && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, labels: { featured: "Featured", fasterDelivery: "Faster Delivery", ratedSeller: "Rated Seller", condition: "Condition", conditionNew: "New", conditionUsed: "Used", conditionBroken: "For Parts", conditionRefurbished: "Refurbished", returnable: "Returnable", freeShipping: "Free Shipping", codAvailable: "Cash on Delivery", emiAvailable: "EMI Available", wishlistCount: (n) => `${n} wishlisted`, categoryProductCount: (n, cat) => `${n} in ${cat}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), brand && brandSlug && _jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand }), brand && !brandSlug && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand })] })), productFeatures && features.length > 0 && _jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures }), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this item" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => _jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i)) })] })), descriptionHtml && _jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" }), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Listed by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && _jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" })] }) }))] }));
+    const { productId, title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref } = props;
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_BADGE, children: "\uD83C\uDFF7\uFE0F Live Auction" }), isEnded ? (_jsx(Span, { color: "error", surface: "danger-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Ended" })) : (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Active" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-0.5", color: "muted", size: "xs", children: "Current bid" }), _jsx(LiveBidPrice, { productId: productId, currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "2xl", badgeSize: "sm" }), endDate && _jsxs(Text, { className: "mt-1.5", color: "muted", size: "sm", children: [isEnded ? "Ended" : "Ends", " ", _jsx(Span, { weight: "medium", color: "muted", children: endDate.toLocaleString() })] })] }), buyNowPrice !== null && !isEnded && (_jsxs(Row, { align: "center", gap: "sm", className: "border border-[var(--appkit-color-primary-200)] dark:border-[var(--appkit-color-primary-800)] bg-primary-50 dark:bg-primary-900/20", padding: "inlineSm", rounded: "lg", children: [_jsx(Span, { size: "xs", color: "muted", children: "Buy Now:" }), _jsx(Span, { size: "base", weight: "bold", className: "text-primary-700 dark:text-primary-300", children: formatCurrency(buyNowPrice, currency) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, labels: { featured: "Featured", fasterDelivery: "Faster Delivery", ratedSeller: "Rated Seller", condition: "Condition", conditionNew: "New", conditionUsed: "Used", conditionBroken: "For Parts", conditionRefurbished: "Refurbished", returnable: "Returnable", freeShipping: "Free Shipping", codAvailable: "Cash on Delivery", emiAvailable: "EMI Available", wishlistCount: (n) => `${n} wishlisted`, categoryProductCount: (n, cat) => `${n} in ${cat}` } }), (categoryName || category || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [category && _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: categoryName || category }), !category && categoryName && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: categoryName }), brand && brandSlug && _jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:bg-primary-900/20 dark:hover:text-primary-400", children: brand }), brand && !brandSlug && _jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand })] })), productFeatures && features.length > 0 && _jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures }), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this item" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => _jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i)) })] })), descriptionHtml && _jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" }), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Listed by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && _jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" })] }) }))] }));
 }
 function renderAuctionStoreReviews(storeReviews) {
     if (storeReviews.length === 0)
@@ -53,7 +54,7 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
         ? (initialAuction ?? undefined)
         : await productRepository.findByIdOrSlug(id).catch(() => undefined);
     const bidsResult = product
-        ? await listBidsByProduct(String(product.id), { pageSize: 20 }).catch(() => null)
+        ? await listBidsByProduct(String(product.id), { pageSize: 5 }).catch(() => null)
         : null;
     const storeId = product?.storeId;
     const storeReviews = storeId
@@ -83,6 +84,7 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
         : typeof p.mainImage === "string"
             ? [p.mainImage]
             : [];
+    const productVideo = p.video;
     const endDate = p.auctionEndDate ? new Date(p.auctionEndDate) : null;
     const isEnded = endDate ? endDate < new Date() : false;
     const bidCount = typeof p.bidCount === "number" ? p.bidCount : 0;
@@ -125,23 +127,18 @@ export async function AuctionDetailPageView({ id, initialAuction, onPlaceBid, on
                     price: typeof p.price === "number" ? p.price : undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: typeof p.storeName === "string" ? p.storeName : undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: CLS_BREADCRUMB_LINK, children: "Auctions" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AuctionDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title })), renderInfo: () => renderAuctionInfoPanel({ title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref }), renderBidForm: () => onPlaceBid ? (_jsx(Stack, { id: "auction-bid-form", gap: "3", children: _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(Span, { size: "xl", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids", !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(minBidIncrement, currency)] })] })] }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] }) })) : (
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: CLS_BREADCRUMB_LINK, children: "Auctions" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AuctionDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title })), renderInfo: () => renderAuctionInfoPanel({ productId: String(product.id), title, currentBid, currency, bidCount, isEnded, endDate, buyNowPrice, featured, freeShipping, condition, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref }), renderBidForm: () => onPlaceBid ? (_jsx(Stack, { id: "auction-bid-form", gap: "3", children: _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { justify: "between", align: "baseline", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "xl", badgeSize: "xs" }), !isEnded && (_jsxs(Span, { size: "xs", color: "muted", children: ["min increment ", formatCurrency(minBidIncrement, currency)] }))] }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] }) })) : (
                         /* Read-only bid panel — shown when no bid action is wired (preview/demo) */
-                        _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsx(Stack, { gap: "xs", children: _jsxs(Text, { size: "xs", color: "muted", children: ["Starting bid: ", formatCurrency(startingBid, currency), !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(minBidIncrement, currency)] })] }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "number", placeholder: `At least ${formatCurrency(currentBid + minBidIncrement, currency)}`, min: currentBid + minBidIncrement, "aria-label": "Your bid amount", disabled: isEnded }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded, children: isEnded ? "Auction Ended" : "Place Bid" }), buyNowPrice !== null && !isEnded && !bidsHaveStarted && (_jsxs(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, children: ["Buy Now \u2014 ", formatCurrency(buyNowPrice, currency)] }))] }), tags.length > 0 && (_jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: tag }, tag))) }) }))] })), renderMobileBidForm: () => !isEnded && onPlaceBid ? (_jsxs(Stack, { className: `lg:hidden ${__P.p4}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] })) : !isEnded ? (_jsxs(Div, { className: `${__P.p4} lg:hidden`, border: "subtle", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", className: "mb-3", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Place Bid" })] })) : null, renderSublistingSection: sublistingCategoryId
+                        _jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [_jsx(Stack, { gap: "xs", children: _jsxs(Text, { size: "xs", color: "muted", children: ["Starting bid: ", formatCurrency(startingBid, currency), !isEnded && _jsxs(_Fragment, { children: [" \u00B7 min increment ", formatCurrency(minBidIncrement, currency)] })] }) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Input, { type: "number", placeholder: `At least ${formatCurrency(currentBid + minBidIncrement, currency)}`, min: currentBid + minBidIncrement, "aria-label": "Your bid amount", disabled: isEnded }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded, children: isEnded ? "Auction Ended" : "Place Bid" }), buyNowPrice !== null && !isEnded && !bidsHaveStarted && (_jsxs(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, children: ["Buy Now \u2014 ", formatCurrency(buyNowPrice, currency)] }))] }), tags.length > 0 && (_jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: tag }, tag))) }) }))] })), renderMobileBidForm: () => !isEnded && onPlaceBid ? (_jsxs(Stack, { className: `lg:hidden ${__P.p4}`, border: "subtle", gap: "3", rounded: "xl", surface: "muted", children: [_jsx(LiveBidPrice, { productId: String(product.id), currentBid: currentBid, bidCount: bidCount, currency: currency, isEnded: isEnded, priceSize: "base", badgeSize: "xs" }), _jsx(PlaceBidModalButton, { productId: String(product.id), currentBid: currentBid, startingBid: startingBid, minBidIncrement: minBidIncrement, currency: currency, isEnded: isEnded, buyNowPrice: buyNowPrice, bidsHaveStarted: bidsHaveStarted, bidCount: bidCount, tags: tags, onPlaceBid: onPlaceBid, onBuyNow: onBuyNow, triggerClassName: "w-full" })] })) : !isEnded ? (_jsxs(Div, { className: `${__P.p4} lg:hidden`, border: "subtle", rounded: "xl", surface: "muted", children: [_jsxs(Row, { align: "center", gap: "sm", className: "mb-3", children: [_jsx(Span, { size: "base", weight: "bold", className: "text-primary-600 dark:text-primary-400", children: formatCurrency(currentBid, currency) }), _jsxs(Span, { size: "xs", color: "muted", children: [bidCount, " bids"] })] }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Place Bid" })] })) : null, renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),
                             })) })), renderBidHistory: () => {
-                            const bids = (bidsResult?.items ?? []).map((b) => ({
-                                id: String(b.id ?? ""),
-                                bidderId: String(b.userId ?? b.bidderId ?? ""),
-                                bidderName: (b.bidderName ?? b.userName),
-                                amount: (typeof b.bidAmount === "number" ? b.bidAmount : typeof b.amount === "number" ? b.amount : 0),
-                                placedAt: (b.bidDate ?? b.createdAt ?? b.bidAt ?? ""),
-                            }));
-                            return _jsx(CollapsibleBidHistory, { bids: bids, currency: currency });
+                            if (!bidsResult)
+                                return null;
+                            return (_jsx(CollapsibleBidHistory, { productId: String(product.id), initialData: bidsResult, currency: currency }));
                         }, renderRelated: () => {
                             const now = new Date();
                             const related = relatedDocs

package/dist/features/auctions/components/CollapsibleBidHistory.d.ts

@@ -1,8 +1,29 @@
 import React from "react";
 import type { BidHistoryEntry } from "../../products/components/BidHistory";
+import { type BidListResponse } from "../hooks/useBids";
+interface RawBidLike {
+    id?: unknown;
+    userId?: unknown;
+    bidderId?: unknown;
+    userName?: unknown;
+    bidderName?: unknown;
+    bidAmount?: unknown;
+    amount?: unknown;
+    bidDate?: unknown;
+    createdAt?: unknown;
+    bidAt?: unknown;
+}
+/** Shared shape mapper — SSR's raw bid docs and useBids()'s client-fetched
+ *  pages both go through this so every page (SSR page 1, client pages 2+)
+ *  renders identically. */
+export declare function toBidHistoryEntry(b: RawBidLike): BidHistoryEntry;
 interface CollapsibleBidHistoryProps {
-    bids: BidHistoryEntry[];
+    productId: string;
+    /** SSR page-1 result — seeds `useBids()`'s cache so opening the section
+     *  doesn't trigger a redundant fetch for the page already rendered. */
+    initialData: BidListResponse;
     currency: string;
+    pageSize?: number;
 }
-export declare function CollapsibleBidHistory({ bids, currency }: CollapsibleBidHistoryProps): React.JSX.Element;
+export declare function CollapsibleBidHistory({ productId, initialData, currency, pageSize }: CollapsibleBidHistoryProps): React.JSX.Element;
 export {};

package/dist/features/auctions/components/CollapsibleBidHistory.js

@@ -1,12 +1,30 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, Span } from "../../../ui";
+import { Button, Div, Row, Span } from "../../../ui";
+import { Pagination } from "../../../ui/components/Pagination";
 import { BidHistory } from "../../products/components/BidHistory";
+import { useBids } from "../hooks/useBids";
 const __O = {
     hidden: "overflow-hidden",
 };
-export function CollapsibleBidHistory({ bids, currency }) {
+/** Shared shape mapper — SSR's raw bid docs and useBids()'s client-fetched
+ *  pages both go through this so every page (SSR page 1, client pages 2+)
+ *  renders identically. */
+export function toBidHistoryEntry(b) {
+    return {
+        id: String(b.id ?? ""),
+        bidderId: String(b.userId ?? b.bidderId ?? ""),
+        bidderName: (b.bidderName ?? b.userName),
+        amount: typeof b.bidAmount === "number" ? b.bidAmount : typeof b.amount === "number" ? b.amount : 0,
+        placedAt: (b.bidDate ?? b.createdAt ?? b.bidAt ?? ""),
+    };
+}
+export function CollapsibleBidHistory({ productId, initialData, currency, pageSize = 5 }) {
     const [open, setOpen] = useState(false);
-    return (_jsxs(Div, { className: `mt-6 ${__O.hidden}`, border: "subtle", rounded: "xl", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setOpen((v) => !v), paddingX: "md", paddingY: "md", rounded: "none", className: "w-full justify-between bg-[var(--appkit-color-surface)]/60 hover:bg-[var(--appkit-color-surface-elevated)]", "aria-expanded": open, children: [_jsxs(Span, { size: "sm", weight: "semibold", className: "tracking-wide", color: "muted", transform: "uppercase", children: ["Bid History", bids.length > 0 && (_jsx(Span, { size: "xs", weight: "medium", className: "ml-2 normal-case tracking-normal", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: bids.length }))] }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Div, { surface: "default", padding: "md", children: _jsx(BidHistory, { bids: bids, isEmpty: bids.length === 0, currency: currency }) }))] }));
+    const [page, setPage] = useState(1);
+    const { bids: rawBids, totalPages, isLoading } = useBids({ productId, page, pageSize }, { initialData, enabled: open });
+    const bids = rawBids.map(toBidHistoryEntry);
+    const total = initialData.total;
+    return (_jsxs(Div, { className: `mt-6 ${__O.hidden}`, border: "subtle", rounded: "xl", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setOpen((v) => !v), paddingX: "md", paddingY: "md", rounded: "none", className: "w-full justify-between bg-[var(--appkit-color-surface)]/60 hover:bg-[var(--appkit-color-surface-elevated)]", "aria-expanded": open, children: [_jsxs(Span, { size: "sm", weight: "semibold", className: "tracking-wide", color: "muted", transform: "uppercase", children: ["Bid History", total > 0 && (_jsx(Span, { size: "xs", weight: "medium", className: "ml-2 normal-case tracking-normal", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", children: total }))] }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform duration-200 ${open ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsxs(Div, { surface: "default", padding: "md", children: [_jsx(BidHistory, { bids: bids, isLoading: isLoading && bids.length === 0, isEmpty: !isLoading && bids.length === 0, currency: currency }), totalPages > 1 && (_jsx(Row, { justify: "center", className: "mt-4", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: setPage, size: "sm" }) }))] }))] }));
 }

package/dist/features/auctions/components/LiveBidPrice.d.ts

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

package/dist/features/auctions/components/LiveBidPrice.js

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

package/dist/features/auctions/components/PlaceBidFormClient.d.ts

@@ -18,7 +18,7 @@ export interface PlaceBidFormClientProps {
     onPlaceBid: (input: PlaceBidInput) => Promise<unknown>;
     onBuyNow?: () => Promise<unknown>;
 }
-export declare function PlaceBidFormClient({ productId, currentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidsHaveStarted, bidCount, tags, onPlaceBid, onBuyNow, }: PlaceBidFormClientProps): React.JSX.Element;
+export declare function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidsHaveStarted, bidCount: ssrBidCount, tags, onPlaceBid, onBuyNow, }: PlaceBidFormClientProps): React.JSX.Element;
 /**
  * `PlaceBidModalButton` — opens a modal that hosts the same PlaceBidFormClient.
  *

package/dist/features/auctions/components/PlaceBidFormClient.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { isAuthError } from "../../../utils/auth-error";
 import { Button, Div, LoginRequiredModal, Modal, Row, Span, Stack, Text } from "../../../ui";
@@ -8,6 +9,7 @@ import { Form } from "../../../ui/components/Form";
 import { FieldInput } from "../../../ui/forms/FieldInput";
 import { applyZodIssues } from "../../../ui/forms/FormShell";
 import { placeBidSchema } from "../schemas/bid-input";
+import { useLiveAuctionBid } from "../hooks/useLiveAuctionBid";
 import { normalizeError } from "../../../errors/normalize";
 const __P = {
     p5: "p-[var(--appkit-space-5)]",
@@ -19,7 +21,13 @@ const BID_ERROR_DISPLAY = {
     BID_SELF_BID: "You cannot bid on your own listing.",
     BID_USER_BANNED: "Your account is currently restricted from bidding. Contact support.",
 };
-export function PlaceBidFormClient({ productId, currentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidsHaveStarted = false, bidCount, tags = [], onPlaceBid, onBuyNow, }) {
+export function PlaceBidFormClient({ productId, currentBid: ssrCurrentBid, startingBid, minBidIncrement, currency, isEnded, buyNowPrice, bidsHaveStarted = false, bidCount: ssrBidCount, tags = [], onPlaceBid, onBuyNow, }) {
+    const router = useRouter();
+    // Live-updates while the bid card is open — reflects other bidders'
+    // activity on this auction, not just the bidder's own submission.
+    const live = useLiveAuctionBid(productId, ssrCurrentBid, ssrBidCount, { enabled: !isEnded });
+    const currentBid = live.currentBid;
+    const bidCount = live.bidCount;
     const minBid = currentBid + minBidIncrement;
     const [bidAmount, setBidAmount] = useState(String(minBid));
     const [stepMul, setStepMul] = useState(1);
@@ -44,6 +52,12 @@ export function PlaceBidFormClient({ productId, currentBid, startingBid, minBidI
             setSuccess(true);
             setBidAmount(String(amount + minBidIncrement));
             setStepMul(1);
+            // The bid history list and any duplicated static current-bid/bid-count
+            // text elsewhere on this SSR'd page (info panel, page-level summary
+            // cards) are frozen server props — refresh so they reflect this bid
+            // immediately instead of waiting for the page's ISR window to roll
+            // over. The live price shown above already updated via SSE regardless.
+            router.refresh();
         }
         catch (err) {
             void normalizeError(err);
@@ -78,6 +92,7 @@ export function PlaceBidFormClient({ productId, currentBid, startingBid, minBidI
                     return;
                 }
                 setSuccess(true);
+                router.refresh();
             }
             catch (err) {
                 void normalizeError(err);

package/dist/features/auctions/hooks/useBids.d.ts

@@ -0,0 +1,33 @@
+import type { BidDocument } from "../schemas/firestore";
+export interface BidListResponse {
+    items: Omit<BidDocument, "userEmail">[];
+    total: number;
+    page: number;
+    pageSize: number;
+    totalPages: number;
+    hasMore: boolean;
+}
+export interface UseBidsParams {
+    productId: string;
+    page?: number;
+    pageSize?: number;
+}
+export interface UseBidsOptions {
+    initialData?: BidListResponse;
+    enabled?: boolean;
+}
+/**
+ * useBids
+ *
+ * Paginated, newest-first bid history for a single auction — backs the
+ * auction detail page's "Bid History" section. `/api/bids` already sorts
+ * `bidDate DESC` server-side (see `listBidsByProduct`), so no client sort
+ * is needed here.
+ */
+export declare function useBids(params: UseBidsParams, opts?: UseBidsOptions): {
+    bids: Omit<BidDocument, "userEmail">[];
+    total: number;
+    totalPages: number;
+    isLoading: boolean;
+    error: Error | null;
+};

package/dist/features/auctions/hooks/useBids.js

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../../http";
+import { BID_ENDPOINTS } from "../../../constants/api-endpoints";
+/**
+ * useBids
+ *
+ * Paginated, newest-first bid history for a single auction — backs the
+ * auction detail page's "Bid History" section. `/api/bids` already sorts
+ * `bidDate DESC` server-side (see `listBidsByProduct`), so no client sort
+ * is needed here.
+ */
+export function useBids(params, opts) {
+    const { productId, page = 1, pageSize = 5 } = params;
+    const sp = new URLSearchParams();
+    sp.set("productId", productId);
+    sp.set("page", String(page));
+    sp.set("pageSize", String(pageSize));
+    const endpoint = `${BID_ENDPOINTS.LIST}?${sp.toString()}`;
+    const query = useQuery({
+        queryKey: ["bids", productId, page, pageSize],
+        queryFn: () => apiClient.get(endpoint),
+        initialData: page === 1 ? opts?.initialData : undefined,
+        enabled: opts?.enabled !== false && !!productId,
+    });
+    return {
+        bids: query.data?.items ?? [],
+        total: query.data?.total ?? 0,
+        totalPages: query.data?.totalPages ?? 1,
+        isLoading: query.isLoading,
+        error: query.error,
+    };
+}

package/dist/features/auctions/hooks/useLiveAuctionBid.d.ts

@@ -0,0 +1,20 @@
+export interface UseLiveAuctionBidResult {
+    currentBid: number;
+    bidCount: number;
+    /** True once the SSE channel has delivered at least one live update. */
+    isLive: boolean;
+}
+/**
+ * useLiveAuctionBid
+ *
+ * Layers the SSE-driven `useRealtimeBids` channel on top of the auction
+ * detail page's SSR-rendered `currentBid`/`bidCount` (server props, frozen
+ * at request time / the page's ISR window). Falls back to those SSR values
+ * until the live channel connects and pushes its first update — this is
+ * what lets any viewer watching an auction see a new bid the instant
+ * another user places it, mirroring how the cart/wishlist badges layer a
+ * live delta on top of the last known server count.
+ */
+export declare function useLiveAuctionBid(productId: string, ssrCurrentBid: number, ssrBidCount: number, opts?: {
+    enabled?: boolean;
+}): UseLiveAuctionBidResult;

package/dist/features/auctions/hooks/useLiveAuctionBid.js

@@ -0,0 +1,23 @@
+"use client";
+import { useRealtimeBids } from "./useRealtimeBids";
+/**
+ * useLiveAuctionBid
+ *
+ * Layers the SSE-driven `useRealtimeBids` channel on top of the auction
+ * detail page's SSR-rendered `currentBid`/`bidCount` (server props, frozen
+ * at request time / the page's ISR window). Falls back to those SSR values
+ * until the live channel connects and pushes its first update — this is
+ * what lets any viewer watching an auction see a new bid the instant
+ * another user places it, mirroring how the cart/wishlist badges layer a
+ * live delta on top of the last known server count.
+ */
+export function useLiveAuctionBid(productId, ssrCurrentBid, ssrBidCount, opts) {
+    const enabled = opts?.enabled !== false;
+    const live = useRealtimeBids(enabled ? productId : null);
+    const isLive = live.connected && live.currentBid !== null;
+    return {
+        currentBid: isLive ? live.currentBid : ssrCurrentBid,
+        bidCount: isLive && live.bidCount !== null ? live.bidCount : ssrBidCount,
+        isLive,
+    };
+}

package/dist/features/auth/checkout-value-otp.d.ts

@@ -1,17 +1,13 @@
 /**
  * Checkout Value OTP — Tier PP.
  *
- * A distinct OTP purpose from `consent-otp.ts` (which gates third-party
- * shipping consent): this one gates placing a checkout ≥ the site's
- * `payment.otpCheckoutThreshold` (skipped for COD — see
- * `createCheckoutOrderAction`). Deliberately a SEPARATE Firestore namespace
- * (`checkoutValueOtps` vs `consentOtps`) rather than reusing the shipping-
- * consent one — different purpose, different copy, independently tunable
- * rate limits. Reuses `generateOtpCode()`/`hashOtp()` from `consent-otp.ts`
- * rather than duplicating the crypto.
+ * Gates placing a checkout ≥ the site's `payment.otpCheckoutThreshold`
+ * (skipped for COD — see `createCheckoutOrderAction`).
  */
-import { generateOtpCode, hashOtp } from "./consent-otp";
-export { generateOtpCode, hashOtp };
+/** HMAC-SHA256 hash of an OTP code. */
+export declare function hashOtp(code: string): string;
+/** Generate a cryptographically-secure random 6-digit OTP string. */
+export declare function generateOtpCode(): string;
 /** OTP validity window (10 minutes) — matches consent-OTP's window; independently tunable if policy diverges later. */
 export declare const CHECKOUT_VALUE_OTP_EXPIRY_MS: number;
 export declare const CHECKOUT_VALUE_OTP_EXPIRY_MINUTES = 10;
@@ -44,3 +40,4 @@ export interface CheckoutValueOtpDoc {
 export declare function enforceCheckoutValueOtpRateLimit(db: Db, uid: string): Promise<void>;
 /** Build the checkout-value OTP WhatsApp/SMS message body. */
 export declare function buildCheckoutValueOtpMessage(code: string, siteName: string): string;
+export {};

package/dist/features/auth/checkout-value-otp.js

@@ -1,20 +1,24 @@
 /**
  * Checkout Value OTP — Tier PP.
  *
- * A distinct OTP purpose from `consent-otp.ts` (which gates third-party
- * shipping consent): this one gates placing a checkout ≥ the site's
- * `payment.otpCheckoutThreshold` (skipped for COD — see
- * `createCheckoutOrderAction`). Deliberately a SEPARATE Firestore namespace
- * (`checkoutValueOtps` vs `consentOtps`) rather than reusing the shipping-
- * consent one — different purpose, different copy, independently tunable
- * rate limits. Reuses `generateOtpCode()`/`hashOtp()` from `consent-otp.ts`
- * rather than duplicating the crypto.
+ * Gates placing a checkout ≥ the site's `payment.otpCheckoutThreshold`
+ * (skipped for COD — see `createCheckoutOrderAction`).
  */
+import { createHmac, randomInt } from "crypto";
 import { AuthorizationError } from "../../errors";
 import { resolveDate } from "../../utils";
 import { USER_COLLECTION } from "./schemas";
-import { generateOtpCode, hashOtp } from "./consent-otp";
-export { generateOtpCode, hashOtp };
+const HMAC_KEY = process.env.CONSENT_OTP_HMAC_KEY ||
+    process.env.HMAC_SECRET ||
+    "consent-otp-secret";
+/** HMAC-SHA256 hash of an OTP code. */
+export function hashOtp(code) {
+    return createHmac("sha256", HMAC_KEY).update(code).digest("hex");
+}
+/** Generate a cryptographically-secure random 6-digit OTP string. */
+export function generateOtpCode() {
+    return String(randomInt(100000, 1000000));
+}
 /** OTP validity window (10 minutes) — matches consent-OTP's window; independently tunable if policy diverges later. */
 export const CHECKOUT_VALUE_OTP_EXPIRY_MS = 10 * 60 * 1000;
 export const CHECKOUT_VALUE_OTP_EXPIRY_MINUTES = 10;

package/dist/features/auth/server.d.ts

@@ -14,7 +14,6 @@
  * ```
  */
 export * from "./token-store";
-export * from "./consent-otp";
 export * from "./repository";
 export * from "./actions";
 export { authMeGET } from "./api/route";

package/dist/features/auth/server.js

@@ -14,7 +14,6 @@
  * ```
  */
 export * from "./token-store";
-export * from "./consent-otp";
 export * from "./repository";
 export * from "./actions";
 export { authMeGET } from "./api/route";

package/dist/features/blog/api/[slug]/route.d.ts

@@ -17,7 +17,12 @@ type RouteContext = {
 };
 export interface BlogPostDetailResponse {
     post: BlogPost;
+    /** Same category — the original single "related" signal. */
     related: BlogPost[];
+    /** Posts sharing at least one tag. */
+    relatedByTags: BlogPost[];
+    /** Other posts by the same author. */
+    relatedByAuthor: BlogPost[];
 }
 export declare function GET(_request: Request, context: RouteContext): Promise<NextResponse>;
 export {};

package/dist/features/blog/api/[slug]/route.js

@@ -30,9 +30,18 @@ export async function GET(_request, context) {
         }
         // Increment view count fire-and-forget — must not block response
         safeFireAndForget(blogRepository.incrementViews(post.id), "blog: incrementViews");
-        // Related posts: same category, latest 3, excluding current
-        const related = (await blogRepository.findRelated(post.category, post.id, 3)).map(toBlogPost);
-        const body = { post: toBlogPost(post), related };
+        // Related posts: same category / tag overlap / same author — latest 3 each, excluding current
+        const [related, relatedByTags, relatedByAuthor] = await Promise.all([
+            blogRepository.findRelated(post.category, post.id, 3),
+            blogRepository.findByTagsOverlap(post.tags ?? [], post.id, 3),
+            blogRepository.findByAuthor(post.authorId, post.id, 3),
+        ]);
+        const body = {
+            post: toBlogPost(post),
+            related: related.map(toBlogPost),
+            relatedByTags: relatedByTags.map(toBlogPost),
+            relatedByAuthor: relatedByAuthor.map(toBlogPost),
+        };
         return NextResponse.json({ success: true, data: body });
     }
     catch (error) {

package/dist/features/blog/components/BlogPostView.d.ts

@@ -14,6 +14,8 @@ export interface BlogPostViewProps {
         viewsLabel?: string;
         featured?: string;
         relatedTitle?: string;
+        relatedByTagsTitle?: string;
+        relatedByAuthorTitle?: string;
     };
     /** Render the cover image */
     renderImage?: (post: BlogPost) => React.ReactNode;

package/dist/features/blog/components/BlogPostView.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import Link from "next/link";
 import { Div, Heading, RichText, Row, Scrim, Span, Stack, Text } from "../../../ui";
+import { Iframe } from "../../../ui/components/Iframe";
 import { MediaImage } from "../../media/MediaImage";
 import { useBlogPost } from "../hooks/useBlog";
 import { BlogCard } from "./BlogListView";
@@ -27,13 +28,13 @@ const CLS_FEATURED_BADGE = "bg-warning-surface text-warning dark:bg-warning-surf
 function renderBlogPostHeader(post, date, labels) {
     return (_jsxs(Div, { className: "mb-8", children: [_jsxs(Row, { className: "mb-4", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block capitalize ${CATEGORY_BADGE[post.category] ?? ""}`, rounded: "full", padding: "pill-xs", children: post.category }), post.isFeatured && _jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels?.featured ?? "Featured" })] }), _jsx(Heading, { level: 1, className: "mb-4", size: "3xl", weight: "bold", children: post.title }), post.excerpt && _jsx(Text, { className: "mb-6", color: "muted", size: "lg", children: post.excerpt }), _jsxs(Row, { color: "muted", textSize: "sm", wrap: true, gap: "md", children: [post.authorName && _jsxs(Span, { children: [labels?.author ?? "By", " ", _jsx(Span, { weight: "medium", color: "muted", children: post.authorName })] }), post.readTimeMinutes != null && _jsxs(Span, { children: [post.readTimeMinutes, " ", labels?.readTime ?? "min read"] }), date && _jsxs(Span, { children: [labels?.publishedOn ?? "Published", " ", date] }), post.views != null && _jsxs(Span, { children: [post.views, " ", labels?.viewsLabel ?? "views"] })] })] }));
 }
-function renderBlogPostRelated(related, labels, renderRelatedCard) {
+function renderBlogPostRelated(related, title, renderRelatedCard) {
     if (related.length === 0)
         return null;
-    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-6", size: "xl", weight: "semibold", children: labels?.relatedTitle ?? "Related Posts" }), _jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-3", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
+    return (_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-6", size: "xl", weight: "semibold", children: title }), _jsx(Div, { layout: "grid", gap: "6", className: "sm:grid-cols-3", children: related.map((rel, i) => renderRelatedCard ? (_jsx(React.Fragment, { children: renderRelatedCard(rel, i) }, rel.id)) : (_jsx(BlogCard, { post: rel, href: String(ROUTES.BLOG.ARTICLE(rel.slug)) }, rel.id))) })] }));
 }
 export function BlogPostView({ slug, initialData, labels = {}, renderImage, renderContent, renderBackButton, renderLoading, renderError, renderRelatedCard, renderAuthorBio, className = "", }) {
-    const { post, related, isLoading, error } = useBlogPost(slug, {
+    const { post, related, relatedByTags, relatedByAuthor, isLoading, error } = useBlogPost(slug, {
         initialData,
     });
     if (isLoading) {
@@ -54,5 +55,5 @@ export function BlogPostView({ slug, initialData, labels = {}, renderImage, rend
         })
         : "";
     const coverImageUrl = getMediaUrl(post.coverImage);
-    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(MediaImage, { src: coverImageUrl, alt: post.title, size: "hero" })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-0" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [renderBlogPostHeader(post, date, labels), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] hover:bg-primary/10 text-[var(--appkit-color-text-muted)] hover:text-primary text-[length:var(--appkit-text-xs)] font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBlogPostRelated(related, labels, renderRelatedCard), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] })] }));
+    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(MediaImage, { src: coverImageUrl, alt: post.title, size: "hero" })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-0" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [renderBlogPostHeader(post, date, labels), post.youtubeId && /^[A-Za-z0-9_-]{6,20}$/.test(post.youtubeId) && (_jsx(Div, { className: "mb-8", children: _jsx(Iframe, { src: `https://www.youtube-nocookie.com/embed/${post.youtubeId}`, title: `${post.title} — video`, aspect: "video", rounded: "lg" }) })), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.PUBLIC.BLOG)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)] hover:bg-primary/10 text-[var(--appkit-color-text-muted)] hover:text-primary text-[length:var(--appkit-text-xs)] font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), _jsxs(Stack, { gap: "xl", children: [renderBlogPostRelated(related, labels?.relatedTitle ?? "Related Posts", renderRelatedCard), renderBlogPostRelated(relatedByTags, labels?.relatedByTagsTitle ?? "You might also like", renderRelatedCard), renderBlogPostRelated(relatedByAuthor, labels?.relatedByAuthorTitle ?? `More from ${post.authorName}`, renderRelatedCard)] }), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] })] }));
 }

package/dist/features/blog/hooks/useBlog.d.ts

@@ -24,6 +24,8 @@ interface UseBlogPostOptions {
 export declare function useBlogPost(slug: string, opts?: UseBlogPostOptions): {
     post: import("..").BlogPost | null;
     related: import("..").BlogPost[];
+    relatedByTags: import("..").BlogPost[];
+    relatedByAuthor: import("..").BlogPost[];
     isLoading: boolean;
     error: Error | null;
 };

package/dist/features/blog/hooks/useBlog.js

@@ -46,6 +46,8 @@ export function useBlogPost(slug, opts) {
     return {
         post: query.data?.post ?? null,
         related: query.data?.related ?? [],
+        relatedByTags: query.data?.relatedByTags ?? [],
+        relatedByAuthor: query.data?.relatedByAuthor ?? [],
         isLoading: query.isLoading,
         error: query.error,
     };

package/dist/features/blog/repository/blog.repository.d.ts

@@ -10,6 +10,13 @@ declare class BlogRepository extends BaseRepository<BlogPostDocument> {
     delete(id: string): Promise<void>;
     incrementViews(id: string): Promise<void>;
     findRelated(category: BlogPostCategory, excludeId: string, limit?: number): Promise<BlogPostDocument[]>;
+    /**
+     * Published posts sharing at least one tag with the given list.
+     * `array-contains-any` caps at 10 values, so only the first 10 tags are used.
+     */
+    findByTagsOverlap(tags: string[], excludeId: string, limit?: number): Promise<BlogPostDocument[]>;
+    /** Other published posts by the same author. */
+    findByAuthor(authorId: string, excludeId: string, limit?: number): Promise<BlogPostDocument[]>;
     static readonly SIEVE_FIELDS: {
         id: {
             canFilter: boolean;