@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -9,13 +9,12 @@ import { ROUTES } from "../../../next";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { formatCurrency } from "../../../utils";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
-const CLS_PREORDER_BADGE = "inline-flex items-center rounded-full bg-amber-500 px-2 py-0.5 text-white";
-const CLS_SALE_BADGE = "rounded-full bg-teal-600 px-2 py-0.5 text-xs font-bold text-white";
+const CLS_PREORDER_BADGE = "inline-flex items-center rounded-full bg-warning-surface px-2 py-0.5 text-white";
+const CLS_SALE_BADGE = "rounded-full bg-success-surface px-2 py-0.5 text-xs font-bold text-white";
 const CLS_TRENDING_BADGE = "rounded-full bg-indigo-600 px-2 py-0.5 text-xs font-bold text-white";
-const CLS_LIMITED_BADGE = "rounded-full bg-sky-600 px-2 py-0.5 text-xs font-bold text-white";
-import { BaseListingCard, Button, Div, RichText, Row, Span, Text, TextLink, } from "../../../ui";
+const CLS_LIMITED_BADGE = "rounded-full bg-info-surface px-2 py-0.5 text-xs font-bold text-white";
+import { BaseListingCard, Button, RichText, Row, Span, Stack, Text, TextLink } from "../../../ui";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
-import { THEME_CONSTANTS } from "../../../tokens";
 import { PreorderBadge } from "./PreorderCard";
 const DEFAULT_LABELS = {
     preOrderBadge: "Pre-order",
@@ -56,12 +55,16 @@ export function MarketplacePreorderCard({ product, className = "", variant = "gr
             // The hook rolls back optimistic state when the mutation fails.
         }
     }, [toggle]);
-    return (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: detailHref, className: "absolute inset-0 block", children: _jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", fallback: "Product image" }) }), _jsxs(Div, { className: "absolute right-2 top-2 flex flex-col items-end gap-1", children: [_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex items-center rounded-full bg-cobalt px-2 py-0.5 text-white", children: mergedLabels.preOrderBadge }), product.featured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_PREORDER_BADGE, children: mergedLabels.featuredBadge }))] }), _jsxs(Div, { className: "absolute left-2 top-2 flex flex-col gap-1 pointer-events-none", children: [product.partOfBundleIds && product.partOfBundleIds.length > 0 && (_jsx(Span, { className: CLS_SALE_BADGE, title: product.partOfBundleTitles?.[0] ? `In bundle: ${product.partOfBundleTitles[0]}` : "In a bundle", children: "Bundled" })), product.groupId && (_jsx(Span, { className: CLS_TRENDING_BADGE, title: product.groupTitle ? `Part of set: ${product.groupTitle}` : "Part of a set", children: product.isGroupParent ? "Set Parent" : "In Set" })), product.sublistingCategoryId && (_jsx(Span, { className: CLS_LIMITED_BADGE, title: "Has variants or sub-listings", children: "Has Variants" }))] }), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
+    return (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: detailHref, className: "absolute inset-0 block", children: _jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "card", fallback: "Product image" }) }), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { layout: "inline-flex", color: "inverse", size: "xs", weight: "medium", className: "bg-cobalt", rounded: "full", padding: "pill-xs", children: mergedLabels.preOrderBadge }), product.featured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_PREORDER_BADGE, children: mergedLabels.featuredBadge }))] }), _jsxs(Stack, { className: "absolute left-2 top-2 pointer-events-none", gap: "xs", children: [product.partOfBundleIds && product.partOfBundleIds.length > 0 && (_jsx(Span, { className: CLS_SALE_BADGE, title: product.partOfBundleTitles?.[0] ? `In bundle: ${product.partOfBundleTitles[0]}` : "In a bundle", children: "Bundled" })), product.groupId && (_jsx(Span, { className: CLS_TRENDING_BADGE, title: product.groupTitle ? `Part of set: ${product.groupTitle}` : "Part of a set", children: product.isGroupParent ? "Set Parent" : "In Set" })), product.sublistingCategoryId && (_jsx(Span, { className: CLS_LIMITED_BADGE, title: "Has variants or sub-listings", children: "Has Variants" }))] }), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
                             event.stopPropagation();
                             onSelect(product.id, !isSelected);
                         }, className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" }))] }), _jsx(BaseListingCard.Info, { variant: variant, children: variant === "list" ? (
                 /* ── Compact list layout ── */
-                _jsxs(_Fragment, { children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 min-w-0", children: [_jsx(TextLink, { href: detailHref, className: "min-w-0 flex-1", children: _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900 dark:text-zinc-100`, children: product.title }) }), wishlistActions && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `shrink-0 p-1 text-base leading-none ${inWishlist ? "text-primary" : "text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" }))] }), _jsxs(Div, { className: "flex items-center gap-2 flex-wrap", children: [_jsx(Text, { className: "text-sm font-bold text-primary", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsx(Button, { type: "button", variant: "primary", size: "sm", className: "self-start text-xs mt-0.5", onClick: handleNavigate, children: mergedLabels.reserveNow })] })) : (
+                _jsxs(_Fragment, { children: [_jsxs(Row, { className: "min-w-0", align: "start", justify: "between", gap: "sm", children: [_jsx(TextLink, { href: detailHref, className: "min-w-0 flex-1", children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), wishlistActions && (
+                                // audit-variant-ok: wishlist toggle Button — conditional text-primary (in-wishlist) vs text-zinc-400 + leading-none icon-only
+                                _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `shrink-0 p-1 text-base leading-none ${inWishlist ? "text-primary" : "text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" }))] }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { className: "text-primary", size: "sm", weight: "bold", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "self-start mt-0.5", onClick: handleNavigate, children: mergedLabels.reserveNow })] })) : (
                 /* ── Full grid layout ── */
-                _jsxs(_Fragment, { children: [_jsx(TextLink, { href: detailHref, children: _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-medium text-zinc-900 dark:text-zinc-100`, children: product.title }) }), product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500 dark:text-zinc-400` })) : null, _jsxs(Row, { justify: "between", className: "mt-1 gap-2", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsxs(Row, { justify: "between", className: "mt-2 gap-2", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", className: "flex-1 text-xs", onClick: handleNavigate, children: mergedLabels.reserveNow }), onAddToCart ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "flex-1 text-xs", onClick: (e) => { e.stopPropagation(); onAddToCart(product); }, children: mergedLabels.addToCart })) : null, wishlistActions ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `text-base ${inWishlist ? "text-primary" : "text-zinc-500 dark:text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" })) : null] })] })) })] }));
+                _jsxs(_Fragment, { children: [_jsx(TextLink, { href: detailHref, children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "line-clamp-2 text-xs text-zinc-500 dark:text-zinc-400" })) : null, _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsxs(Row, { justify: "between", className: "mt-2", gap: "sm", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "flex-1", onClick: handleNavigate, children: mergedLabels.reserveNow }), onAddToCart ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", textSize: "xs", className: "flex-1", onClick: (e) => { e.stopPropagation(); onAddToCart(product); }, children: mergedLabels.addToCart })) : null, wishlistActions ? (
+                                // audit-variant-ok: wishlist Button — conditional text-primary (in-wishlist) vs text-zinc-500; text-base icon
+                                _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: `text-base ${inWishlist ? "text-primary" : "text-zinc-500 dark:text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" })) : null] })] })) })] }));
 }

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
-import { Button, Div, LoginRequiredModal, Span, Stack, Text } from "../../../ui";
+import { Button, Div, LoginRequiredModal, Row, Span, Stack, Text } from "../../../ui";
 import { isAuthError } from "../../../utils/auth-error";
 import { formatCurrency } from "../../../utils/number.formatter";
+import { normalizeError } from "../../../errors/normalize";
 export function PreOrderActionsClient({ productId, price, currency, depositAmount, depositPercent, isCancellable, tags = [], onReserveNow, }) {
     const [isPending, startTransition] = useTransition();
     const [error, setError] = useState(null);
@@ -16,8 +17,10 @@ export function PreOrderActionsClient({ productId, price, currency, depositAmoun
             try {
                 await onReserveNow(productId);
                 setSuccess(true);
+                // audit-unknown-ok: error-handler entry point — accepts thrown values of any shape
             }
             catch (err) {
+                void normalizeError(err);
                 if (isAuthError(err)) {
                     setShowLoginModal(true);
                 }
@@ -27,9 +30,9 @@ export function PreOrderActionsClient({ productId, price, currency, depositAmoun
             }
         });
     }
-    return (_jsxs(Div, { className: "space-y-4", children: [price !== null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) }), depositAmount !== null && (_jsxs(Text, { className: "mt-0.5 text-xs text-zinc-500 dark:text-zinc-400", children: ["Reserve with ", formatCurrency(depositAmount, currency), depositPercent !== null ? ` (${depositPercent}% deposit)` : ""] }))] })), error && (_jsx(Text, { className: "text-xs text-error", children: error })), success && (_jsx(Text, { className: "text-xs text-success", children: "\u2713 Reserved! Redirecting to checkout\u2026" })), _jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to reserve this pre-order. Please log in or create an account to continue." }), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isPending, onClick: handleReserve, children: isPending ? "Processing…" : "Reserve Now" }), isCancellable && (_jsx(Text, { className: "text-center text-xs text-zinc-500 dark:text-zinc-400", children: "\u2713 Free cancellation before production" }))] }), tags.length > 0 && (_jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Div, { className: "flex flex-wrap gap-1.5", children: tags.map((tag) => (_jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-zinc-600 dark:text-zinc-300", children: tag }, tag))) }) })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Div, { className: "flex flex-wrap gap-4 justify-center text-center", children: [
+    return (_jsxs(Stack, { gap: "md", children: [price !== null && (_jsxs(Div, { children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) }), depositAmount !== null && (_jsxs(Text, { className: "mt-0.5", color: "muted", size: "xs", children: ["Reserve with ", formatCurrency(depositAmount, currency), depositPercent !== null ? ` (${depositPercent}% deposit)` : ""] }))] })), error && (_jsx(Text, { className: "text-error", size: "xs", children: error })), success && (_jsx(Text, { className: "text-success", size: "xs", children: "\u2713 Reserved! Redirecting to checkout\u2026" })), _jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to reserve this pre-order. Please log in or create an account to continue." }), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isPending, onClick: handleReserve, children: isPending ? "Processing…" : "Reserve Now" }), isCancellable && (_jsx(Text, { size: "xs", align: "center", color: "muted", children: "\u2713 Free cancellation before production" }))] }), tags.length > 0 && (_jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "xs", className: "", children: tags.map((tag) => (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: tag }, tag))) }) })), _jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { className: "text-center", justify: "center", gap: "md", wrap: true, children: [
                         { icon: "🔒", label: "Secure\nPayment" },
                         { icon: "📅", label: "Guaranteed\nDelivery" },
                         { icon: "↩", label: "Free\nCancellation" },
-                    ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { size: "base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] }));
+                    ].map(({ icon, label }) => (_jsxs(Stack, { color: "muted", textSize: "xs", className: "min-w-[60px]", align: "center", gap: "xs", children: [_jsx(Span, { size: "base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] }));
 }

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

@@ -10,9 +10,11 @@ const STATUS_MAP = {
 };
 export function PreOrderBadge({ status, className = "" }) {
     const { label, color } = STATUS_MAP[status] ?? STATUS_MAP.pending;
-    return (_jsx(Span, { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${color} ${className}`, children: label }));
+    return (_jsx(Span, { layout: "inline-flex", className: `${color} ${className}`, padding: "pill-sm", rounded: "full", size: "xs", weight: "medium", children: label }));
 }
 /** Small inline tag shown on a product that is available for pre-order */
 export function PreOrderTag({ label = "Pre-order", estimatedDate, className = "", }) {
-    return (_jsxs(Div, { className: `inline-flex flex-col ${className}`, children: [_jsx(Span, { size: "xs", weight: "bold", className: CLS_NEW_BADGE, children: label }), estimatedDate && (_jsxs(Span, { className: "mt-0.5 text-[10px] text-gray-400", children: ["Ships ", estimatedDate] }))] }));
+    return (
+    // audit-variant-ok: inline-flex-col Div — inline-flex with column direction; Div.layout=inline-flex defaults to row
+    _jsxs(Div, { layout: "inline-flex", className: `flex-col ${className}`, children: [_jsx(Span, { size: "xs", weight: "bold", className: CLS_NEW_BADGE, children: label }), estimatedDate && (_jsxs(Span, { className: "mt-0.5 text-[10px] text-gray-400", children: ["Ships ", estimatedDate] }))] }));
 }

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

@@ -10,7 +10,7 @@ const __O = {
 };
 const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
 const CLS_PREORDER_BADGE = "inline-block rounded-full bg-indigo-100 dark:bg-indigo-900/30 px-2.5 py-0.5 text-indigo-700 dark:text-indigo-300";
-const CLS_STATUS_BADGE = "inline-block rounded-full bg-amber-100 dark:bg-amber-900/30 px-2.5 py-0.5 text-amber-800 dark:text-amber-200";
+const CLS_STATUS_BADGE = "inline-block rounded-full bg-warning-surface dark:bg-warning-surface px-2.5 py-0.5 text-warning dark:text-warning";
 import { ROUTES } from "../../../next";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
 import { formatCurrency } from "../../../utils/number.formatter";
@@ -29,6 +29,7 @@ import { ShareButton } from "../../products/components/ShareButton";
 import { SublistingCarouselSection } from "../../products/components/SublistingCarouselSection";
 import { HistoryTracker } from "../../history/components/HistoryTracker";
 import { ShowGroupSection } from "../../products/components/ShowGroupSection";
+// audit-unknown-ok: type-narrowing entry point — accepts any value, narrows by typeof/Array.isArray
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -41,7 +42,7 @@ const PRODUCTION_STATUS_LABELS = {
     ready_to_ship: "Ready to Ship",
 };
 function PreOrderInfoSection({ title, productionStatus, maxPerUser, deliveryDate, featured, freeShipping, condition, isCancellable, category, categoryName, brand, brandSlug, productFeatures, features, descriptionHtml, safeSeller, storeHref, }) {
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", className: "mb-2 flex-wrap", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_PREORDER_BADGE, children: "Pre-Order" }), productionStatus && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-0.5 text-zinc-600 dark:text-zinc-300", children: PRODUCTION_STATUS_LABELS[productionStatus] ?? productionStatus })), maxPerUser !== null && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_STATUS_BADGE, children: ["Limit: ", maxPerUser, " per customer"] }))] }), _jsx(Heading, { level: 1, className: "text-xl font-bold leading-snug text-zinc-900 dark:text-zinc-50 sm:text-2xl", children: title })] }), deliveryDate && (_jsxs(Row, { align: "center", gap: "xs", className: "text-sm text-zinc-600 dark:text-zinc-400", children: [_jsx(Span, { children: "\uD83D\uDCC5" }), _jsx(Span, { children: "Estimated delivery:" }), _jsx(Span, { weight: "medium", children: deliveryDate.toLocaleDateString(undefined, { year: "numeric", month: "long" }) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: isCancellable, labels: {
+    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_PREORDER_BADGE, children: "Pre-Order" }), productionStatus && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: PRODUCTION_STATUS_LABELS[productionStatus] ?? productionStatus })), maxPerUser !== null && (_jsxs(Span, { size: "xs", weight: "medium", className: CLS_STATUS_BADGE, children: ["Limit: ", maxPerUser, " per customer"] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), deliveryDate && (_jsxs(Row, { color: "muted", textSize: "sm", align: "center", gap: "xs", children: [_jsx(Span, { children: "\uD83D\uDCC5" }), _jsx(Span, { children: "Estimated delivery:" }), _jsx(Span, { weight: "medium", children: deliveryDate.toLocaleDateString(undefined, { year: "numeric", month: "long" }) })] })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, condition: condition ?? undefined, returnable: isCancellable, labels: {
                     featured: "Featured",
                     fasterDelivery: "Faster Delivery",
                     ratedSeller: "Rated Seller",
@@ -55,24 +56,25 @@ function PreOrderInfoSection({ title, productionStatus, maxPerUser, deliveryDate
                     codAvailable: "Cash on Delivery",
                     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-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 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, { size: "xs", weight: "medium", className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-zinc-500 dark:text-zinc-400", children: categoryName })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 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, { size: "xs", weight: "medium", className: "inline-flex items-center rounded-full border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-zinc-500 dark:text-zinc-400", children: brand }))] })), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { className: "rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-4 py-3", children: [_jsx(Text, { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "About this product" }), _jsx(Ul, { className: "space-y-1.5", children: features.map((f, i) => (_jsxs(Li, { className: "flex items-start gap-2 text-sm text-zinc-700 dark:text-zinc-300", 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-sm leading-relaxed text-zinc-600 dark:text-zinc-400 line-clamp-4" })), safeSeller && (_jsx(Div, { className: `rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 ${__P.p3}`, children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] uppercase tracking-wide text-zinc-400 dark:text-zinc-400 mb-0.5", children: "Sold by" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-3 py-1.5 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" }))] }) }))] }));
+                } }), (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-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 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-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-300 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 product" }), _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-sm leading-relaxed text-zinc-600 dark:text-zinc-400 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: "Sold 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-3 py-1.5 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 PreOrderBuyBarPanel({ reserveTarget, reservedCount, progressPct, productId, price, currency, depositAmount, depositPercent, isCancellable, tags, onReserveNow, }) {
-    return (_jsxs(Div, { id: "pre-order-buy-bar", className: `rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 ${__P.p5} space-y-4`, children: [reserveTarget > 0 && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [reservedCount, " of ", reserveTarget, " reserved"] }), _jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary-600 dark:text-primary-400", children: [progressPct, "%"] })] }), _jsx(Div, { className: `h-2 w-full ${__O.hidden} rounded-full bg-zinc-200 dark:bg-zinc-700`, children: _jsx(Div, { className: "h-full rounded-full bg-primary transition-all", 
+    return (_jsxs(Stack, { id: "pre-order-buy-bar", className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [reserveTarget > 0 && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Text, { size: "xs", color: "muted", children: [reservedCount, " of ", reserveTarget, " reserved"] }), _jsxs(Span, { size: "xs", weight: "semibold", className: "text-primary-600 dark:text-primary-400", children: [progressPct, "%"] })] }), _jsx(Div, { className: `h-2 w-full ${__O.hidden}`, rounded: "full", surface: "subtle", children: _jsx(Div, { className: "h-full bg-primary transition-all", rounded: "full", 
                             // audit-inline-style-ok: computed percentage
-                            style: { width: `${progressPct}%` } }) })] })), onReserveNow ? (_jsx(PreOrderActionsClient, { productId: productId, price: price, currency: currency, depositAmount: depositAmount, depositPercent: depositPercent, isCancellable: isCancellable, tags: tags, onReserveNow: onReserveNow })) : (_jsxs(_Fragment, { children: [price !== null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: formatCurrency(price, currency) }), depositAmount !== null && (_jsxs(Text, { className: "mt-0.5 text-xs text-zinc-500 dark:text-zinc-400", children: ["Reserve with ", formatCurrency(depositAmount, currency), depositPercent !== null ? ` (${depositPercent}% deposit)` : ""] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Reserve Now" }), isCancellable && (_jsx(Text, { className: "text-center text-xs text-zinc-500 dark:text-zinc-400", children: "\u2713 Free cancellation before production" }))] }), tags.length > 0 && (_jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 dark:bg-zinc-800 px-2.5 py-1 text-zinc-600 dark:text-zinc-300", children: tag }, tag))) }) })), _jsx(Div, { className: "border-t border-zinc-200 dark:border-zinc-700 pt-4", children: _jsx(Row, { wrap: true, gap: "sm", justify: "center", className: "text-center", children: [
+                            style: { width: `${progressPct}%` } }) })] })), onReserveNow ? (_jsx(PreOrderActionsClient, { productId: productId, price: price, currency: currency, depositAmount: depositAmount, depositPercent: depositPercent, isCancellable: isCancellable, tags: tags, onReserveNow: onReserveNow })) : (_jsxs(_Fragment, { children: [price !== null && (_jsxs(Div, { children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) }), depositAmount !== null && (_jsxs(Text, { className: "mt-0.5", color: "muted", size: "xs", children: ["Reserve with ", formatCurrency(depositAmount, currency), depositPercent !== null ? ` (${depositPercent}% deposit)` : ""] }))] })), _jsxs(Stack, { gap: "sm", children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Reserve Now" }), isCancellable && (_jsx(Text, { size: "xs", align: "center", color: "muted", children: "\u2713 Free cancellation before production" }))] }), 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))) }) })), _jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "sm", justify: "center", className: "text-center", children: [
                                 { icon: "🔒", label: "Secure\nPayment" },
                                 { icon: "📅", label: "Guaranteed\nDelivery" },
                                 { icon: "↩", label: "Free\nCancellation" },
-                            ].map(({ icon, label }) => (_jsxs(Div, { className: "flex flex-col items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400 min-w-[60px]", children: [_jsx(Span, { size: "base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] }))] }));
+                            ].map(({ icon, label }) => (_jsxs(Stack, { color: "muted", textSize: "xs", className: "min-w-[60px]", align: "center", gap: "xs", children: [_jsx(Span, { size: "base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }) })] }))] }));
 }
 export async function PreOrderDetailPageView({ id, initialPreOrder, onReserveNow, productFeatures }) {
     const product = initialPreOrder !== undefined
         ? (initialPreOrder ?? undefined)
         : await productRepository.findByIdOrSlug(id).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: "Pre-Order Not Found" }), _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400", children: "The pre-order item you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRE_ORDERS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Pre-Orders" })] }) }) }) }));
+        return (_jsx(Main, { children: _jsx(Section, { padding: "y-5xl", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "center", gap: "md", className: "text-center", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "semibold", color: "primary", children: "Pre-Order Not Found" }), _jsx(Text, { color: "muted", children: "The pre-order item you are looking for may have been removed." }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRE_ORDERS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Pre-Orders" })] }) }) }) }));
     }
+    // audit-unknown-ok: TS structural escape — domain document type lacks index signature
     const p = product;
     const currency = p.currency || getDefaultCurrency();
     const title = String(p.title ?? p.name ?? "Pre-Order Item");
@@ -150,11 +152,11 @@ export async function PreOrderDetailPageView({ id, initialPreOrder, onReserveNow
                     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", className: "px-4 py-6", children: [_jsxs(Div, { className: "mb-4 flex items-center justify-between flex-wrap gap-2", children: [_jsxs(Nav, { "aria-label": "Breadcrumb", className: "flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400 flex-wrap", 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.PRE_ORDERS), className: CLS_BREADCRUMB_LINK, children: "Pre-Orders" }), 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: "text-zinc-700 dark:text-zinc-300 truncate max-w-[200px]", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title })), renderInfo: () => (_jsx(PreOrderInfoSection, { title: title, productionStatus: productionStatus, maxPerUser: maxPerUser, deliveryDate: deliveryDate, featured: featured, freeShipping: freeShipping, condition: condition, isCancellable: isCancellable, category: category, categoryName: categoryName, brand: brand, brandSlug: brandSlug, productFeatures: productFeatures, features: features, descriptionHtml: descriptionHtml, safeSeller: safeSeller, storeHref: storeHref })), renderSublistingSection: sublistingCategoryId
+                } }), _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.PRE_ORDERS), className: CLS_BREADCRUMB_LINK, children: "Pre-Orders" }), 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(PreOrderDetailView, { renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title })), renderInfo: () => (_jsx(PreOrderInfoSection, { title: title, productionStatus: productionStatus, maxPerUser: maxPerUser, deliveryDate: deliveryDate, featured: featured, freeShipping: freeShipping, condition: condition, isCancellable: isCancellable, category: category, categoryName: categoryName, brand: brand, brandSlug: brandSlug, productFeatures: productFeatures, features: features, descriptionHtml: descriptionHtml, safeSeller: safeSeller, storeHref: storeHref })), renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
-                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : 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-36 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, customTabs: customSections.map((s) => ({
+                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-zinc-700 dark:text-zinc-300" })) : 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 }),

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

@@ -4,7 +4,7 @@ import { useState, useCallback } from "react";
 import { Columns, Heart, ShoppingCart } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../../products/hooks/useProducts";
-import { BulkActionBar, Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Text, useToast } from "../../../ui";
+import { BulkActionBar, Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, Text, useToast } from "../../../ui";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useAuthGate } from "../../../react/hooks/useAuthGate";
 import { ACTION_ID, ACTION_META, COMPARE_MAX_ITEMS } from "../../products/constants/action-defs";
@@ -222,7 +222,7 @@ export function PreOrdersIndexListing({ initialData, categorySlug, brandName })
                             setCompareIds(ids);
                         },
                     },
-                ] }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3} space-y-2`, children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/3" }), _jsx(Div, { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No pre-orders found." })) : view === "list" ? (_jsx(Div, { className: "flex flex-col divide-y divide-zinc-100 dark:divide-zinc-800 rounded-xl border border-zinc-100 dark:border-zinc-800", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
+                ] }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : preOrders.length === 0 ? (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "center", children: "No pre-orders found." })) : view === "list" ? (_jsx(Stack, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", border: "subtle", rounded: "xl", children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "list", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) : (_jsx(Div, { className: gridClass, children: preOrders.map((product) => (_jsx(MarketplacePreorderCard, { product: product, variant: "grid", hrefBuilder: (p) => String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(p.id)), onAddToCart: handleAddToCart, wishlistActions: wishlistActions, selectable: selection.isSelecting, isSelected: selection.isSelected(product.id), onSelect: (id) => selection.toggle(id) }, product.id))) })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "preorder", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
                 }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(PreOrderFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));

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

@@ -37,5 +37,5 @@ export async function PreOrdersListView({ searchParams = {} }) {
     const result = await productRepository
         .list({ filters, sorts: sort, page, pageSize })
         .catch(() => null);
-    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Pre-Orders" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(PreOrdersIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Pre-Orders" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(PreOrdersIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

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

@@ -13,5 +13,5 @@ const STATUS_COLORS = {
 };
 export function PreorderBadge({ shipDate, className }) {
     const status = getPreorderStatus(shipDate);
-    return (_jsx(Span, { className: `inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[status]} ${className ?? ""}`, children: STATUS_LABELS[status] }));
+    return (_jsx(Span, { layout: "inline-flex", className: `${STATUS_COLORS[status]} ${className ?? ""}`, padding: "pill-sm", rounded: "full", size: "xs", weight: "medium", children: STATUS_LABELS[status] }));
 }

package/dist/features/pre-orders/hooks/usePreOrders.d.ts

@@ -1,7 +1,7 @@
 import type { PreorderItem } from "../types";
 export declare function usePreorders(opts?: {
     endpoint?: string;
-}): import("@tanstack/react-query").UseQueryResult<PreorderItem[], Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<PreorderItem[]>, Error>;
 export declare function usePreorder(slug: string | undefined, opts?: {
     endpoint?: string;
-}): import("@tanstack/react-query").UseQueryResult<PreorderItem | null, Error>;
+}): import("@tanstack/react-query").UseQueryResult<NoInfer<PreorderItem | null>, Error>;

package/dist/features/products/api/[id]/route.d.ts

@@ -6,7 +6,7 @@
  * ```ts
  * // app/api/products/[id]/route.ts
  * export { productItemGET as GET, productItemPATCH as PATCH, productItemDELETE as DELETE }
- *   from "@mohasinac/feat-products";
+ * from "@mohasinac/feat-products";
  * ```
  */
 import { NextResponse } from "next/server.js";

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

@@ -6,7 +6,7 @@
  * ```ts
  * // app/api/products/[id]/route.ts
  * export { productItemGET as GET, productItemPATCH as PATCH, productItemDELETE as DELETE }
- *   from "@mohasinac/feat-products";
+ * from "@mohasinac/feat-products";
  * ```
  */
 import { NextResponse } from "next/server.js";
@@ -18,6 +18,8 @@ import { storeRepository } from "../../../stores/repository/store.repository";
 // SB-UNI-V — bundlesRepository deleted; bundle stock-sync moves to the
 // `onProductStockChange` Firebase Function (see functions/src/bundle-stock-sync.ts).
 import { sanitizeProductForPublic } from "../../utils/sanitize";
+import { isAdminUser, isModeratorUser } from "../../../auth/role-predicates";
+import { normalizeError } from "../../../../errors/normalize";
 const ERR_DB_NOT_REGISTERED = "Database provider not registered";
 const ERR_PRODUCT_NOT_FOUND = "Product not found";
 const UNAVAILABLE_PRODUCT_STATUSES = new Set([
@@ -46,7 +48,7 @@ const productUpdateSchema = z
     ])
         .optional(),
     mainImage: z.string().optional(),
-    images: z.array(z.any()).optional(),
+    images: z.array(z.any()).optional(), // audit-z-any-ok: extending-apps pass MediaField | string | their own image shape
     tags: z.array(z.string()).optional(),
     featured: z.boolean().optional(),
     isPromoted: z.boolean().optional(),
@@ -81,6 +83,7 @@ export async function GET(_request, context) {
         return NextResponse.json({ success: true, data: sanitized });
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-products] GET /api/products/[id] failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch product" }, { status: 500 });
     }
@@ -102,8 +105,8 @@ export const PATCH = createRouteHandler({
         }
         const ownerStore = product.storeId ? await storeRepository.findByOwnerId(user?.uid ?? "") : null;
         const isOwner = !!ownerStore && ownerStore.id === product.storeId;
-        const isModerator = user?.role === "moderator";
-        const isAdmin = user?.role === "admin";
+        const isModerator = isModeratorUser(user);
+        const isAdmin = isAdminUser(user);
         if (!isOwner && !isModerator && !isAdmin) {
             return NextResponse.json({ success: false, error: "Not authorized to update this product" }, { status: 403 });
         }
@@ -156,8 +159,8 @@ export const DELETE = createRouteHandler({
         }
         const ownerStore = product.storeId ? await storeRepository.findByOwnerId(user?.uid ?? "") : null;
         const isOwner = !!ownerStore && ownerStore.id === product.storeId;
-        const isModerator = user?.role === "moderator";
-        const isAdmin = user?.role === "admin";
+        const isModerator = isModeratorUser(user);
+        const isAdmin = isAdminUser(user);
         if (!isOwner && !isModerator && !isAdmin) {
             return NextResponse.json({ success: false, error: "Not authorized to delete this product" }, { status: 403 });
         }

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

@@ -18,6 +18,7 @@ import { getProviders } from "../../../contracts";
 import { createRouteHandler } from "../../../next";
 import { mediaFieldSchema } from "../../media/types/index";
 import { sanitizeProductsForPublic } from "../utils/sanitize";
+import { normalizeError } from "../../../errors/normalize";
 // --- Mutation schemas ---------------------------------------------------------
 // Minimal schemas for secured mutations — consumer apps can extend as needed.
 const productMutateSchema = z
@@ -37,7 +38,7 @@ const productMutateSchema = z
     ])
         .optional(),
     mainImage: z.string().optional(),
-    images: z.array(z.any()).optional(),
+    images: z.array(z.any()).optional(), // audit-z-any-ok: extending-apps pass MediaField | string | their own image shape
     tags: z.array(z.string()).optional(),
     featured: z.boolean().optional(),
     isPromoted: z.boolean().optional(),
@@ -157,7 +158,9 @@ export async function GET(request) {
         });
         const totalPages = Math.max(1, Math.ceil(result.total / pageSize));
         const body = {
-            items: sanitizeProductsForPublic(result.data),
+            items: sanitizeProductsForPublic(
+            // audit-unknown-ok: TS structural escape — Array
+            result.data),
             total: result.total,
             page: result.page,
             pageSize,
@@ -169,6 +172,7 @@ export async function GET(request) {
         return response;
     }
     catch (error) {
+        void normalizeError(error);
         console.error("[feat-products] GET /api/products failed", error);
         return NextResponse.json({ success: false, error: "Failed to fetch products" }, { status: 500 });
     }

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

@@ -25,23 +25,23 @@ export type ProductSortValue = (typeof PRODUCT_SORT_VALUES)[keyof typeof PRODUCT
  * import type { ProductDocument } from "@/db/schema/product.schema";
  *
  * const columns: AdminTableColumn<ProductDocument>[] = [
- *   // keep base columns (cast is safe because ProductDocument extends ProductItem)
- *   ...(productAdminColumns as AdminTableColumn<ProductDocument>[]),
- *   // add app-specific column
- *   {
- *     key: "brand",
- *     header: "Brand",
- *     render: (p) => p.brand ?? "—",
- *   },
+ * // keep base columns (cast is safe because ProductDocument extends ProductItem)
+ * ...(productAdminColumns as AdminTableColumn<ProductDocument>[]),
+ * // add app-specific column
+ * {
+ * key: "brand",
+ * header: "Brand",
+ * render: (p) => p.brand ?? "—",
+ * },
  * ];
  * ```
  *
  * @example — replace a single column's renderer
  * ```ts
  * const columns = productAdminColumns.map((col) =>
- *   col.key === "title"
- *     ? { ...col, render: (p: ProductDocument) => <Link href={p.slug}>{p.title}</Link> }
- *     : col
+ * col.key === "title"
+ * ? { ...col, render: (p: ProductDocument) => <Link href={p.slug}>{p.title}</Link> }
+ * : col
  * );
  * ```
  */

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

@@ -22,23 +22,23 @@ export const PRODUCT_SORT_VALUES = {
  * import type { ProductDocument } from "@/db/schema/product.schema";
  *
  * const columns: AdminTableColumn<ProductDocument>[] = [
- *   // keep base columns (cast is safe because ProductDocument extends ProductItem)
- *   ...(productAdminColumns as AdminTableColumn<ProductDocument>[]),
- *   // add app-specific column
- *   {
- *     key: "brand",
- *     header: "Brand",
- *     render: (p) => p.brand ?? "—",
- *   },
+ * // keep base columns (cast is safe because ProductDocument extends ProductItem)
+ * ...(productAdminColumns as AdminTableColumn<ProductDocument>[]),
+ * // add app-specific column
+ * {
+ * key: "brand",
+ * header: "Brand",
+ * render: (p) => p.brand ?? "—",
+ * },
  * ];
  * ```
  *
  * @example — replace a single column's renderer
  * ```ts
  * const columns = productAdminColumns.map((col) =>
- *   col.key === "title"
- *     ? { ...col, render: (p: ProductDocument) => <Link href={p.slug}>{p.title}</Link> }
- *     : col
+ * col.key === "title"
+ * ? { ...col, render: (p: ProductDocument) => <Link href={p.slug}>{p.title}</Link> }
+ * : col
  * );
  * ```
  */

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

@@ -6,14 +6,14 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const STATUS_STYLES = {
-    published: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
+    published: "bg-success-surface text-success dark:bg-success-surface dark:text-success",
     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",
+    out_of_stock: "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
+    discontinued: "bg-error-surface text-error dark:bg-error-surface dark:text-error",
     sold: "bg-primary/10 dark:bg-primary/20 text-primary",
 };
-const CLS_LOW_STOCK = "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200";
-const CLS_DELETE = "text-red-600 hover:text-red-800 dark:text-red-400";
+const CLS_LOW_STOCK = "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning";
+const CLS_DELETE = "text-error hover:text-error dark:text-error";
 export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode, locale, formatCurrency = defaultFormatCurrency, }) {
     const columns = [
         {
@@ -21,7 +21,7 @@ export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode,
             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 ${__O.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, { weight: "medium", className: "max-w-[180px] truncate", children: product.title })] })),
+            render: (product) => (_jsxs(Row, { gap: "sm", children: [product.mainImage ? (_jsx(Div, { className: `relative h-8 w-8 flex-shrink-0 ${__O.hidden}`, rounded: "default", children: _jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" }) })) : (_jsx(Div, { className: "h-8 w-8 flex-shrink-0", surface: "subtle", rounded: "default" })), _jsx(Span, { weight: "medium", className: "max-w-[180px] truncate", children: product.title })] })),
         },
         {
             key: "category",
@@ -81,7 +81,7 @@ export function getProductTableColumns({ labels, onEdit, onDelete, currencyCode,
             },
         },
     ];
-    const actions = (product) => (_jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: (e) => {
+    const actions = (product) => (_jsxs(Row, { gap: "sm", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: (e) => {
                     e.stopPropagation();
                     onEdit(product);
                 }, className: "text-primary hover:text-primary/80", children: labels.edit }), _jsx(Button, { variant: "ghost", type: "button", onClick: (e) => {

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useProducts } from "../hooks/useProducts";
-import { Div, Pagination, useToast, ListingToolbar, BulkActionBar, LoginRequiredModal, FilterDrawer } from "../../../ui";
+import { BulkActionBar, Div, FilterDrawer, ListingToolbar, LoginRequiredModal, Pagination, Row, Stack, useToast } from "../../../ui";
 import { usePendingTable } from "../../../react/hooks/usePendingTable";
 import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
 import { MarketplaceAuctionGrid } from "../../auctions/components/MarketplaceAuctionGrid";
@@ -155,5 +155,5 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
                             selection.clearSelection();
                         },
                     },
-                ] }), totalPages > 1 && (_jsx(Div, { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { className: "py-6", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `rounded-xl border border-zinc-100 dark:border-slate-700 ${__O.hidden} animate-pulse`, children: [_jsx(Div, { className: "aspect-square bg-zinc-200 dark:bg-slate-700" }), _jsxs(Div, { className: `${__P.p3} space-y-2`, children: [_jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx(Div, { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-1/2" }), _jsx(Div, { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx(Div, { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                ] }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Div, { className: gridClass, children: Array.from({ length: 8 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-full", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-8", surface: "subtle", rounded: "default" })] })] }, i))) })) : (_jsx(MarketplaceAuctionGrid, { auctions: auctions, variant: view === "list" ? "list" : "grid", gridClassName: view === "list" ? "flex flex-col gap-4" : gridClass, wishlistActions: wishlistActions })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(AuctionFilters, { table: pendingTable, currencyPrefix: "\u20B9", categoryOptions: categoryOptions, brandOptions: brandOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Heading, Span, Text } from "../../../ui";
+import { Div, Heading, Span, Stack, Text } from "../../../ui";
 import { formatCurrency } from "../../../utils/number.formatter";
 function formatBidDate(raw) {
     if (!raw)
@@ -21,14 +21,14 @@ export function BidHistory({ isLoading = false, isEmpty = false, renderList, ren
     if (isLoading) {
         if (renderSkeleton)
             return _jsx(_Fragment, { children: renderSkeleton() });
-        return (_jsx(Div, { className: "animate-pulse space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-10 rounded-lg bg-zinc-100 dark:bg-zinc-800" }, i))) }));
+        return (_jsx(Stack, { className: "animate-pulse", gap: "sm", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Div, { className: "h-10", surface: "subtle", rounded: "lg" }, 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." }));
+        return (_jsx(Text, { paddingY: "md", variant: "secondary", size: "sm", children: labels.noHistory ?? "No bids yet." }));
     }
     if (renderList)
         return _jsx(Div, { className: className, children: renderList() });
-    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 3, className: "mb-3 text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: labels.title })), _jsx(Div, { className: "space-y-2", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { weight: "bold", className: "text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { size: "xs", className: "text-zinc-400 dark:text-zinc-400", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
+    return (_jsxs(Div, { className: className, children: [labels.title && (_jsx(Heading, { level: 3, className: "mb-3 tracking-wide", color: "muted", size: "sm", weight: "semibold", transform: "uppercase", children: labels.title })), _jsx(Stack, { gap: "sm", children: bids.map((bid, i) => renderBid ? (_jsx(React.Fragment, { children: renderBid(bid, i) }, bid.id)) : (_jsxs("div", { className: "flex items-center justify-between rounded-lg border border-zinc-100 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3 text-sm", "data-section": "bidhistory-div-422", children: [_jsx(Span, { weight: "bold", className: "text-primary-600 dark:text-primary-400", children: currency ? formatCurrency(bid.amount, currency) : bid.amount.toLocaleString() }), _jsx(Span, { size: "xs", color: "muted", children: formatBidDate(bid.placedAt) })] }, bid.id))) })] }));
 }