@mohasinac/appkit 4.11.2 → 4.11.3

package/dist/features/digital-codes/components/DigitalCodeDetailPageView.js

@@ -16,10 +16,11 @@ import { CustomSectionTabContent } from "../../products/components/CustomSection
 import { ShareButton } from "../../products/components/ShareButton";
 import { HistoryTracker } from "../../history/components/HistoryTracker";
 import { RelatedItemsSection } from "../../products/components/RelatedItemsSection";
-import { computeRelatedItems, getReviewItemsForProduct } from "../../../_internal/server/features/products/data";
+import { computeRelatedItems, getReviewPageForProduct } from "../../../_internal/server/features/products/data";
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
-import { ReviewsList } from "../../reviews/components/ReviewsList";
+import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel";
+import { ListingBottomActions } from "../../products/components/ListingBottomActions";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -50,10 +51,10 @@ export async function DigitalCodeDetailPageView({ slug, initialProduct, renderPr
     const specs = Array.isArray(p.specifications) ? p.specifications : [];
     const customSections = Array.isArray(p.customSections) ? p.customSections : [];
     const descriptionHtml = toDescriptionHtml(p.description);
-    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, reviews] = await Promise.all([
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, initialReviews] = await Promise.all([
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
-        getReviewItemsForProduct(product.id),
+        getReviewPageForProduct(product.id),
     ]);
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
                     title,
@@ -61,19 +62,19 @@ export async function DigitalCodeDetailPageView({ slug, initialProduct, renderPr
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: 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.DIGITAL_CODES), className: CLS_BREADCRUMB_LINK, children: "Digital Codes" }), 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: () => (_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_DIGITALCODE_BADGE, children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: [codesLeft, " available"] })) : (_jsx(Span, { size: "xs", weight: "semibold", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "danger-surface", color: "error", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), meta?.redemptionInstructions && (_jsx(Text, { size: "xs", color: "muted", children: meta.redemptionInstructions })), 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, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", 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-[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" }))] }) }))] })), 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, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                } }), _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.DIGITAL_CODES), className: CLS_BREADCRUMB_LINK, children: "Digital Codes" }), 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: () => (_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_DIGITALCODE_BADGE, children: "Digital Code" }), codesLeft > 0 ? (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: [codesLeft, " available"] })) : (_jsx(Span, { size: "xs", weight: "semibold", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "danger-surface", color: "error", children: "Sold out" }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), meta?.redemptionInstructions && (_jsx(Text, { size: "xs", color: "muted", children: meta.redemptionInstructions })), 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, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", 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-[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" }))] }) }))] })), 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, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),
-                            })) })), renderBuyBar: () => renderPrimaryActions?.({
-                            productId: String(product.id),
-                            productSlug: String(p.slug ?? product.id),
-                            productTitle: title,
-                            productImage: images[0],
-                            price,
-                            currency,
-                            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
-                            storeName: storeName ?? undefined,
-                            inStock: codesLeft > 0,
-                        }), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) })] })] }));
+                            })) })), renderBuyBar: () => (_jsx(Div, { id: "digital-code-buy-bar", children: renderPrimaryActions?.({
+                                productId: String(product.id),
+                                productSlug: String(p.slug ?? product.id),
+                                productTitle: title,
+                                productImage: images[0],
+                                price,
+                                currency,
+                                storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+                                storeName: storeName ?? undefined,
+                                inStock: codesLeft > 0,
+                            }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "digital-code", anchorId: "digital-code-buy-bar", price: price, currency: currency, unavailable: codesLeft <= 0 })] })] }));
 }

package/dist/features/homepage/components/FeaturedResultsSection.js

@@ -13,5 +13,5 @@ export function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLab
                                 afterImage: item.afterImage,
                                 caption: item.caption ?? "",
                                 sortOrder: item.sortOrder ?? i,
-                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: CAROUSEL_PER_VIEW.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true, loop: true }) })] }));
+                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: CAROUSEL_PER_VIEW.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, loop: true }) })] }));
 }

package/dist/features/homepage/components/SectionCarousel.js

@@ -48,5 +48,5 @@ export function SectionCarousel({ title, description, headingVariant = "editoria
                         // Double-row grids (e.g. the homepage Auctions section's
                         // rows:2 config) get the full-height sliver arrows — much
                         // easier to hit than a small circle when the track is tall.
-                        arrowStyle: rows > 1 ? "full-height" : "circle", snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Row, { className: "mt-6", justify: hand === "left" ? "end" : "start", children: _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "sm", href: viewMoreHref, shadow: useLightText ? "lg" : "none", className: "inline-flex items-[center] gap-[0.375rem] transition-colors bg-primary text-white hover:bg-primary-600", size: "sm", weight: "semibold", children: viewMoreLabel }) }))] })] }));
+                        arrowStyle: rows > 1 ? "full-height" : "circle", snapToItems: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Row, { className: "mt-6", justify: hand === "left" ? "end" : "start", children: _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "sm", href: viewMoreHref, shadow: useLightText ? "lg" : "none", className: "inline-flex items-[center] gap-[0.375rem] transition-colors bg-primary text-white hover:bg-primary-600", size: "sm", weight: "semibold", children: viewMoreLabel }) }))] })] }));
 }

package/dist/features/homepage/components/ShopByCategorySection.js

@@ -69,5 +69,5 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/layout/AppLayoutShell.js

@@ -170,9 +170,16 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
     const handleBeforeDashboardNavToggle = useCallback(() => {
         setSidebarOpen(false);
     }, []);
+    // Must stay in sync with BottomActions' own `isVisible` — `secondaryLabel` was missing
+    // here, so an auction bar shown by its countdown alone got no bottom clearance.
     const hasBottomActions = bottomActionsState.actions.length > 0 ||
         !!(bottomActionsState.bulk && bottomActionsState.bulk.selectedCount > 0) ||
-        !!bottomActionsState.infoLabel;
+        !!bottomActionsState.infoLabel ||
+        !!bottomActionsState.secondaryLabel;
+    /** The bar overlays desktop content too once a page opts in, so reserve space there. */
+    const hasDesktopBottomActions = hasBottomActions &&
+        (bottomActionsState.desktop === "always" ||
+            bottomActionsState.desktop === "after-scroll");
     const sidebarContent = (_jsx(SidebarContent, { sidebarItems: sidebarItems, sidebarSections: sidebarSections, sidebarPrimaryActions: sidebarPrimaryActions, user: user, activeHref: pathname ?? "", profileHref: profileHref, userOrdersHref: userOrdersHref, userWishlistHref: userWishlistHref, userSettingsHref: userSettingsHref, adminHref: adminHref, storeHref: storeHref, sellerHref: sellerHref, sidebarLocaleSlot: sidebarLocaleSlot, showThemeToggleInSidebar: showThemeToggleInSidebar, sidebarProfileLabels: sidebarProfileLabels, theme: theme, activeThemeName: activeTheme.name, toggleTheme: toggleTheme, onLogout: onLogout, onAfterLogout: () => setSidebarOpen(false) }));
     const normalizedLightBackground = {
         type: lightBackground.type,
@@ -192,5 +199,5 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onTourStart: onTourStart, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", className: `w-full flex-1 flex flex-col ${hasBottomActions ? "mb-28" : "mb-16"} lg:mb-0`, children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomActions, {}), _jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar }), _jsx(UnsavedChangesModal, {})] }) }));
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onTourStart: onTourStart, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", className: `w-full flex-1 flex flex-col ${hasBottomActions ? "mb-28" : "mb-16"} ${hasDesktopBottomActions ? "lg:mb-24" : "lg:mb-0"}`, children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomActions, {}), _jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: hasDashboardNav ? toggleDashboardNav : handleTogglePublicSidebar }), _jsx(UnsavedChangesModal, {})] }) }));
 }

package/dist/features/layout/BottomActions.js

@@ -18,7 +18,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *        styled with the selected action's variant (danger = red, etc.).
  *
  * Layout rules:
- *  - Hidden on lg+ screens (`lg:hidden`) — desktop shows inline action panels.
+ *  - Hidden on lg+ screens by default — desktop shows inline action panels. A page can
+ *    opt in by passing `desktop: "after-scroll" | "always"` to `useBottomActions`;
+ *    "after-scroll" brings the bar back once the primary CTA has scrolled out of view.
  *  - The bar slides up with a 300 ms ease-out transition; `pointer-events-none`
  *    while off-screen.
  *
@@ -38,6 +40,8 @@ const Z_BOTTOM_ACTIONS = "z-[var(--appkit-z-bottom-nav)]";
 const BOTTOM_NAV_HEIGHT = "h-14";
 const FLEX_CENTER = "flex items-center justify-center";
 const CLS_COUNT_BADGE = "bg-error-surface text-white";
+/** How far the user must scroll before the desktop bar reveals itself. */
+const DESKTOP_REVEAL_SCROLL_PX = 400;
 // ─── Sub-components ───────────────────────────────────────────────────────────
 function BulkPickerPanel({ bulkActions, selectedActionId, pickerOpen, onSelect, }) {
     return (_jsx(Div, { role: "listbox", "aria-label": "Bulk actions", className: [
@@ -85,7 +89,23 @@ export default function BottomActions() {
     const [selectedActionId, setSelectedActionId] = useState(null);
     const containerRef = useRef(null);
     useClickOutside(containerRef, () => setPickerOpen(false));
-    const { actions, bulk, infoLabel, secondaryLabel } = state;
+    const { actions, bulk, infoLabel, secondaryLabel, desktop } = state;
+    // Desktop reveal-on-scroll. Kept as a plain passive listener to match BackToTop —
+    // there is no shared scroll-position hook in the codebase and one consumer doesn't
+    // justify inventing one. Only armed when a page actually opts into "after-scroll".
+    const [scrolledPastFold, setScrolledPastFold] = useState(false);
+    const wantsScrollGate = desktop === "after-scroll";
+    useEffect(() => {
+        if (!wantsScrollGate) {
+            setScrolledPastFold(false);
+            return;
+        }
+        const onScroll = () => setScrolledPastFold(window.scrollY > DESKTOP_REVEAL_SCROLL_PX);
+        onScroll();
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, [wantsScrollGate]);
+    const showOnDesktop = desktop === "always" || (wantsScrollGate && scrolledPastFold);
     const isBulkMode = !!(bulk && bulk.selectedCount > 0);
     const bulkActions = bulk?.actions ?? [];
     const pageActions = actions;
@@ -120,7 +140,10 @@ export default function BottomActions() {
         setPickerOpen(false);
     };
     return (_jsxs(Div, { ref: containerRef, role: "toolbar", "aria-label": isBulkMode ? "Bulk actions" : "Page actions", "aria-hidden": !isVisible, className: [
-            "fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))] left-0 right-0 lg:hidden",
+            "fixed bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem))] left-0 right-0",
+            // `--bottom-nav-height` resolves to 0px above lg, so the same offset lands the
+            // bar on the viewport bottom on desktop with no extra positioning.
+            showOnDesktop ? "" : "lg:hidden",
             Z_BOTTOM_ACTIONS,
             BOTTOM_NAV_BG,
             "shadow-[0_-4px_20px_rgba(0,0,0,0.08)] dark:shadow-[0_-4px_20px_rgba(0,0,0,0.30)]",

package/dist/features/layout/BottomActionsContext.d.ts

@@ -69,9 +69,21 @@ export interface BottomBulkConfig {
     /** Bulk action buttons, rendered right of the selection pill. */
     actions: BottomAction[];
 }
+/**
+ * Whether the bar is allowed to show on desktop (>= lg), where it has always been
+ * `lg:hidden`.
+ *
+ * - `"hidden"` (default) — mobile/tablet only, the historical behaviour.
+ * - `"after-scroll"` — appears once the user has scrolled past the top of the page,
+ *   so a detail page's primary CTA comes back after the hero scrolls away.
+ * - `"always"` — pinned on desktop from first paint.
+ */
+export type BottomActionsDesktopMode = "hidden" | "after-scroll" | "always";
 export interface BottomActionsState {
     /** Page-level primary actions. */
     actions: BottomAction[];
+    /** Desktop visibility policy. Defaults to "hidden" — opt in per page. */
+    desktop?: BottomActionsDesktopMode;
     /** Bulk-selection config. Bulk mode activates when selectedCount > 0. */
     bulk?: BottomBulkConfig;
     /**
@@ -107,6 +119,8 @@ interface BottomActionsContextValue {
     setInfoLabel: (label: string | undefined) => void;
     /** Set or clear the secondary label (rendered above infoLabel). */
     setSecondaryLabel: (label: string | undefined) => void;
+    /** Set the desktop visibility policy. */
+    setDesktopMode: (mode: BottomActionsDesktopMode | undefined) => void;
     /** Clear all state (called on feature unmount). */
     clearAll: () => void;
 }

package/dist/features/layout/BottomActionsContext.js

@@ -87,6 +87,9 @@ export function BottomActionsProvider({ children, }) {
     const setSecondaryLabel = useCallback((secondaryLabel) => {
         setState((prev) => ({ ...prev, secondaryLabel }));
     }, []);
+    const setDesktopMode = useCallback((desktop) => {
+        setState((prev) => (prev.desktop === desktop ? prev : { ...prev, desktop }));
+    }, []);
     const clearAll = useCallback(() => {
         actionCallbacksRef.current = new Map();
         bulkCallbacksRef.current = new Map();
@@ -102,8 +105,17 @@ export function BottomActionsProvider({ children, }) {
         bulkClearRef,
         setInfoLabel,
         setSecondaryLabel,
+        setDesktopMode,
+        clearAll,
+    }), [
+        state,
+        setActions,
+        setBulkConfig,
+        setInfoLabel,
+        setSecondaryLabel,
+        setDesktopMode,
         clearAll,
-    }), [state, setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, clearAll]);
+    ]);
     return (_jsx(BottomActionsContext.Provider, { value: value, children: children }));
 }
 // --- Hook ---------------------------------------------------------------------

package/dist/features/layout/hooks/useBottomActions.d.ts

@@ -1,9 +1,14 @@
-import { type BottomAction, type BottomBulkConfig } from "../BottomActionsContext";
+import { type BottomAction, type BottomActionsDesktopMode, type BottomBulkConfig } from "../BottomActionsContext";
 export interface UseBottomActionsOptions {
     actions?: BottomAction[];
     bulk?: BottomBulkConfig;
     infoLabel?: string;
     /** Rendered as its own row above infoLabel. See BottomActionsState.secondaryLabel. */
     secondaryLabel?: string;
+    /**
+     * Whether the bar may also show on desktop. Defaults to "hidden" (mobile/tablet only),
+     * so pages that don't opt in behave exactly as before.
+     */
+    desktop?: BottomActionsDesktopMode;
 }
 export declare function useBottomActions(options?: UseBottomActionsOptions): void;

package/dist/features/layout/hooks/useBottomActions.js

@@ -2,7 +2,7 @@
 import { useEffect, useRef } from "react";
 import { useBottomActionsContext, } from "../BottomActionsContext";
 export function useBottomActions(options = {}) {
-    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, clearAll } = useBottomActionsContext();
+    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, setDesktopMode, clearAll, } = useBottomActionsContext();
     const actionsRef = useRef(options.actions ?? []);
     actionsRef.current = options.actions ?? [];
     const bulkRef = useRef(options.bulk);
@@ -25,6 +25,9 @@ export function useBottomActions(options = {}) {
     useEffect(() => {
         setSecondaryLabel(options.secondaryLabel);
     }, [setSecondaryLabel, options.secondaryLabel]);
+    useEffect(() => {
+        setDesktopMode(options.desktop);
+    }, [setDesktopMode, options.desktop]);
     useEffect(() => {
         return () => clearAll();
     }, [clearAll]);

package/dist/features/layout/index.d.ts

@@ -27,7 +27,7 @@ export type { LayoutClientProps, LayoutProvider } from "./LayoutClient";
 export { AppLayoutShell } from "./AppLayoutShell";
 export type { AppLayoutShellProps, AppLayoutShellSidebarLink, AppLayoutShellSidebarSection } from "./AppLayoutShell";
 export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
-export type { BottomAction, BottomBulkConfig, BottomActionsState, } from "./BottomActionsContext";
+export type { BottomAction, BottomBulkConfig, BottomActionsState, BottomActionsDesktopMode, } from "./BottomActionsContext";
 export { useBottomActions } from "./hooks/useBottomActions";
 export type { UseBottomActionsOptions } from "./hooks/useBottomActions";
 export { default as BottomActions } from "./BottomActions";

package/dist/features/live/components/LiveItemDetailPageView.js

@@ -19,10 +19,11 @@ import { CustomSectionTabContent } from "../../products/components/CustomSection
 import { ShareButton } from "../../products/components/ShareButton";
 import { HistoryTracker } from "../../history/components/HistoryTracker";
 import { RelatedItemsSection } from "../../products/components/RelatedItemsSection";
-import { computeRelatedItems, getReviewItemsForProduct } from "../../../_internal/server/features/products/data";
+import { computeRelatedItems, getReviewPageForProduct } from "../../../_internal/server/features/products/data";
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data";
-import { ReviewsList } from "../../reviews/components/ReviewsList";
+import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel";
+import { ListingBottomActions } from "../../products/components/ListingBottomActions";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -55,10 +56,10 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
     const specs = Array.isArray(p.specifications) ? p.specifications : [];
     const customSections = Array.isArray(p.customSections) ? p.customSections : [];
     const descriptionHtml = toDescriptionHtml(p.description);
-    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, reviews] = await Promise.all([
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, initialReviews] = await Promise.all([
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
-        getReviewItemsForProduct(product.id),
+        getReviewPageForProduct(product.id),
     ]);
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
                     title,
@@ -66,9 +67,9 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: 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.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), 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, video: productVideo, productName: title }), renderInfo: () => (_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_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFee !== undefined && ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), 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, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", 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-[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" }))] }) }))] })), 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, reviewsContent: _jsx(ReviewsList, { reviews: reviews, context: "listing", emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                } }), _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.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), 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, video: productVideo, productName: title }), renderInfo: () => (_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_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: formatCurrency(price, currency) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFee !== undefined && ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}`, transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), 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, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", 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-[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" }))] }) }))] })), 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, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),
-                            })) })), renderBuyBar: () => renderActions?.(product), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) })] })] }));
+                            })) })), renderBuyBar: () => _jsx(Div, { id: "live-item-buy-bar", children: renderActions?.(product) }), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "live", anchorId: "live-item-buy-bar", price: price, currency: currency })] })] }));
 }

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

@@ -175,6 +175,10 @@ declare class OrderRepository extends BaseRepository<OrderDocument> {
             canFilter: boolean;
             canSort: boolean;
         };
+        orderType: {
+            canFilter: boolean;
+            canSort: boolean;
+        };
     };
     listAll(model: SieveModel): Promise<FirebaseSieveResult<OrderDocument>>;
     /**

package/dist/features/orders/repository/orders.repository.js

@@ -516,6 +516,10 @@ OrderRepository.ADMIN_SIEVE_FIELDS = {
     // S-SBUNI-RULES 2026-05-13 — refund + batch fields
     paymentBatchId: { canFilter: true, canSort: false },
     contestable: { canFilter: true, canSort: false },
+    // Lane segregation on /user/orders — "standard"/"auction"/"offer" etc.
+    // Never filtered as "standard" via Firestore == (see listForUser callers):
+    // orders written before this field existed have no value to match.
+    orderType: { canFilter: true, canSort: false },
 };
 const orderRepository = new OrderRepository();
 export { OrderRepository, orderRepository };

package/dist/features/orders/types/index.d.ts

@@ -1,6 +1,8 @@
 import { type PaymentGateway, PaymentGatewayValues } from "../../payments/schemas";
 export { type PaymentGateway, PaymentGatewayValues };
 import type { ListingType } from "../../products/types/index";
+import type { OrderType } from "../utils/order-splitter";
+import type { AppliedOrderDiscount } from "../schemas/firestore";
 export type PaymentStatus = "pending" | "processing" | "paid" | "failed" | "refunded" | "partial_refund";
 export interface UserAddress {
     id: string;
@@ -57,6 +59,13 @@ export interface Order {
     address: UserAddress;
     orderStatus: OrderStatus;
     paymentStatus: PaymentStatus;
+    /**
+     * Which checkout lane produced this order. Absent on orders written before
+     * the field existed — treat missing as `"standard"`, never filter it out.
+     */
+    orderType?: OrderType;
+    /** Set when this order settled an accepted Make-an-Offer. */
+    offerId?: string;
     paymentGateway?: PaymentGateway;
     subtotal: number;
     shippingCost?: number;
@@ -64,7 +73,14 @@ export interface Order {
     tax?: number;
     total: number;
     currency: string;
+    /**
+     * First applied coupon's code only. Kept for back-compat; prefer
+     * `appliedDiscounts` when rendering, since a cart may stack one coupon per
+     * store plus one platform-wide coupon and this scalar shows only one of them.
+     */
     couponCode?: string;
+    /** Every discount applied to this order — the full stack, not just the first. */
+    appliedDiscounts?: AppliedOrderDiscount[];
     trackingNumber?: string;
     shippingCarrier?: string;
     /** Carrier tracking page URL — rendered as an external link that opens in a new tab. No live-tracking API integration; this is just the passthrough URL a seller/admin entered. */

package/dist/features/pre-orders/components/PreOrderBottomActions.d.ts

@@ -2,4 +2,4 @@ export interface PreOrderBottomActionsProps {
     price: number | null;
     currency: string;
 }
-export declare function PreOrderBottomActions({ price, currency, }: PreOrderBottomActionsProps): null;
+export declare function PreOrderBottomActions({ price, currency, }: PreOrderBottomActionsProps): import("react").JSX.Element;

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

@@ -1,22 +1,6 @@
 "use client";
-import { useBottomActions } from "../../layout/hooks/useBottomActions";
-import { formatCurrency } from "../../../utils/number.formatter";
-import { ACTION_ID } from "../../products/constants/action-defs";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListingBottomActions } from "../../products/components/ListingBottomActions";
 export function PreOrderBottomActions({ price, currency, }) {
-    useBottomActions({
-        actions: [
-            {
-                id: ACTION_ID.RESERVE_NOW,
-                label: "Reserve Now",
-                variant: "primary",
-                onClick: () => {
-                    document
-                        .getElementById("pre-order-buy-bar")
-                        ?.scrollIntoView({ behavior: "smooth" });
-                },
-            },
-        ],
-        infoLabel: price !== null ? formatCurrency(price, currency) : undefined,
-    });
-    return null;
+    return (_jsx(ListingBottomActions, { listingType: "preorder", anchorId: "pre-order-buy-bar", price: price, currency: currency }));
 }

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

@@ -24,7 +24,6 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const DEFAULT_SORT = AUCTION_PUBLIC_SORT_OPTIONS[0].value;
-const AUCTION_SORT_OPTIONS = AUCTION_PUBLIC_SORT_OPTIONS;
 const FILTER_KEYS = [TABLE_KEYS.CATEGORY, TABLE_KEYS.BRAND, TABLE_KEYS.MIN_BID, TABLE_KEYS.MAX_BID, TABLE_KEYS.STORE_ID, TABLE_KEYS.DATE_FROM, TABLE_KEYS.DATE_TO];
 export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
     const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
@@ -132,7 +131,7 @@ export function AuctionsIndexListing({ initialData, categorySlug, brandName }) {
                     },
                 },
             ] } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: AUCTION_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: auctions.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, toggles: [
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search auctions...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: table.get(TABLE_KEYS.SORT) || DEFAULT_SORT, sortOptions: AUCTION_PUBLIC_SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: auctions.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, toggles: [
                     { label: "Show ended", active: showEnded, onChange: (next) => table.set(TABLE_KEYS.SHOW_ENDED, next ? "true" : "") },
                 ] }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {

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

@@ -0,0 +1,28 @@
+import { MOBILE_PRIMARY_ACTIONS } from "../constants/action-defs";
+/**
+ * The sticky-CTA registrar shared by every listing type whose bottom bar is just
+ * "primary CTA that scrolls to the buy/contact panel, plus a price label".
+ *
+ * Pre-order, prize-draw, classified, digital-code and live all fit that shape, which put
+ * it well past the Rule of Three for a per-type copy. Auction and standard product keep
+ * their own registrars — the auction ticks a live countdown into `secondaryLabel`, and
+ * the product bar carries three buttons whose labels track cart/wishlist state.
+ *
+ * Renders nothing; it exists purely to register into `BottomActionsContext`.
+ */
+export interface ListingBottomActionsProps {
+    /** Selects the CTA set from the ACTIONS registry (Rule #7 — never inline actions). */
+    listingType: keyof typeof MOBILE_PRIMARY_ACTIONS;
+    /** `id` of the element the CTA scrolls to. */
+    anchorId: string;
+    price: number | null;
+    currency: string;
+    /**
+     * Register nothing at all — for ended/closed/sold-out listings, matching how the
+     * auction and prize-draw registrars bail out.
+     */
+    unavailable?: boolean;
+    /** Appended after the formatted price, e.g. "per entry". */
+    infoSuffix?: string;
+}
+export declare function ListingBottomActions({ listingType, anchorId, price, currency, unavailable, infoSuffix, }: ListingBottomActionsProps): null;

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

@@ -0,0 +1,25 @@
+"use client";
+import { useBottomActions } from "../../layout/hooks/useBottomActions";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { ACTION_META, MOBILE_PRIMARY_ACTIONS } from "../constants/action-defs";
+export function ListingBottomActions({ listingType, anchorId, price, currency, unavailable = false, infoSuffix, }) {
+    const actionIds = MOBILE_PRIMARY_ACTIONS[listingType] ?? [];
+    const infoLabel = price !== null
+        ? `${formatCurrency(price, currency)}${infoSuffix ? ` ${infoSuffix}` : ""}`
+        : undefined;
+    useBottomActions(unavailable
+        ? {}
+        : {
+            actions: actionIds.map((id) => ({
+                ...ACTION_META[id],
+                onClick: () => {
+                    document
+                        .getElementById(anchorId)
+                        ?.scrollIntoView({ behavior: "smooth" });
+                },
+            })),
+            infoLabel,
+            desktop: "after-scroll",
+        });
+    return null;
+}

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

@@ -3,4 +3,4 @@ export interface PrizeDrawBottomActionsProps {
     currency: string;
     closed: boolean;
 }
-export declare function PrizeDrawBottomActions({ pricePerEntry, currency, closed, }: PrizeDrawBottomActionsProps): null;
+export declare function PrizeDrawBottomActions({ pricePerEntry, currency, closed, }: PrizeDrawBottomActionsProps): import("react").JSX.Element;

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

@@ -1,24 +1,6 @@
 "use client";
-import { useBottomActions } from "../../layout/hooks/useBottomActions";
-import { formatCurrency } from "../../../utils/number.formatter";
-import { ACTION_ID } from "../constants/action-defs";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListingBottomActions } from "./ListingBottomActions";
 export function PrizeDrawBottomActions({ pricePerEntry, currency, closed, }) {
-    useBottomActions(closed
-        ? {}
-        : {
-            actions: [
-                {
-                    id: ACTION_ID.BUY_NOW,
-                    label: "Buy Now",
-                    variant: "primary",
-                    onClick: () => {
-                        document
-                            .getElementById("prize-draw-buy-bar")
-                            ?.scrollIntoView({ behavior: "smooth" });
-                    },
-                },
-            ],
-            infoLabel: `${formatCurrency(pricePerEntry, currency)} per entry`,
-        });
-    return null;
+    return (_jsx(ListingBottomActions, { listingType: "prize-draw", anchorId: "prize-draw-buy-bar", price: pricePerEntry, currency: currency, unavailable: closed, infoSuffix: "per entry" }));
 }

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

@@ -122,6 +122,10 @@ export function ProductDetailActions({ productId, productTitle, productImage, pr
             infoLabel: price != null && currency
                 ? formatCurrency(price, currency)
                 : undefined,
+            // The bar itself owns responsive visibility now, so this one registrar serves
+            // both breakpoints. The desktop branch below must NOT also register —
+            // useBottomActions is last-mounted-wins and the two would clobber each other.
+            desktop: "after-scroll",
         }
         : {});
     const authModal = (_jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage }));