@mohasinac/appkit 4.32.5 → 4.33.0

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

@@ -1,7 +1,25 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
+import { Div, Heading, Row, Scrim, Section, Span, Text } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
 import { ROUTES } from "../../../next/routing/route-map";
-export function CTABannerSection({ title = "Thousands of collectibles. One marketplace.", subtitle, primaryLabel = "Shop All Products →", primaryHref = String(ROUTES.PUBLIC.PRODUCTS), secondaryLabel = "Browse Auctions →", secondaryHref = String(ROUTES.PUBLIC.AUCTIONS), className = "", }) {
-    return (_jsx(Section, { tone: "accent-banner", className: `${className}`, paddingY: "y-4xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-3xl text-left", children: [_jsx(Span, { className: "mb-4 inline-block", size: "2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { color: "inverse", level: 2, mdSize: "3xl", lgSize: "4xl", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { color: "inverse", className: "mt-3 /80", size: "base", children: subtitle })), _jsxs(Row, { className: "mt-8", align: "center", justify: "start", gap: "md", wrap: true, children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-primary-700 shadow-sm transition-all hover:bg-surface-hover hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
+import { SECTION_TITLE, SECTION_COPY } from "../constants/section-copy";
+/**
+ * `height` maps onto the existing spacing scale rather than emitting a
+ * `min-h-[300px]`-style utility.
+ *
+ * Two reasons. A class generated only inside appkit and absent from the
+ * consumer's `src/**` is purged from the production CSS (Root Cause #3), and
+ * `BANNER_HEIGHTS`' raw px values would be exactly that. And padding keeps the
+ * banner sized by its content, so a long headline grows the box instead of
+ * overflowing a fixed height.
+ */
+const HEIGHT_PADDING_Y = {
+    sm: "y-2xl",
+    md: "y-4xl",
+    lg: "y-5xl",
+    xl: "y-6xl",
+};
+export function CTABannerSection({ title = SECTION_TITLE.banner, subtitle, description, primaryLabel = SECTION_COPY.bannerPrimaryCta, primaryHref = String(ROUTES.PUBLIC.PRODUCTS), secondaryLabel = SECTION_COPY.bannerSecondaryCta, secondaryHref = String(ROUTES.PUBLIC.AUCTIONS), height = "md", backgroundImage, className = "", }) {
+    return (_jsxs(Section, { tone: "accent-banner", className: `relative ${className}`, overflow: "hidden", paddingY: HEIGHT_PADDING_Y[height], paddingX: "x-md", children: [backgroundImage && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "banner", objectFit: "cover" }) }), _jsx(Scrim, { direction: "left-to-right", intensity: "strong", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative mx-auto max-w-3xl text-left", children: [_jsx(Span, { className: "mb-4 inline-block", size: "2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { color: "inverse", level: 2, mdSize: "3xl", lgSize: "4xl", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { color: "inverse", className: "mt-3 /80", size: "base", children: subtitle })), description && (_jsx(Text, { color: "inverse", className: "mt-2 /70 max-w-2xl", size: "sm", children: description })), _jsxs(Row, { className: "mt-8", align: "center", justify: "start", gap: "md", wrap: true, children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-primary-700 shadow-sm transition-all hover:bg-surface-hover hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-[var(--appkit-space-8)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] })] }));
 }

package/dist/features/homepage/components/CustomerReviewsSection.d.ts

@@ -12,5 +12,11 @@ export interface CustomerReviewsSectionProps<T = unknown> {
     autoScroll?: boolean;
     scrollInterval?: number;
     loop?: boolean;
+    /**
+     * Responsive cards-per-view. Defaults to the shared `reviews` preset; the
+     * homepage section passes an admin-configured override built from its
+     * `itemsPerView` / `mobileItemsPerView` config.
+     */
+    perView?: Record<string, number>;
 }
-export declare function CustomerReviewsSection<T = unknown>({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel, isLoading, keyExtractor, className, autoScroll, scrollInterval, loop, }: CustomerReviewsSectionProps<T>): React.JSX.Element | null;
+export declare function CustomerReviewsSection<T = unknown>({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel, isLoading, keyExtractor, className, autoScroll, scrollInterval, loop, perView, }: CustomerReviewsSectionProps<T>): React.JSX.Element | null;

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

@@ -10,12 +10,12 @@ const __O = {
     hidden: "overflow-hidden",
 };
 // --- Section -----------------------------------------------------------------
-export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", autoScroll = true, scrollInterval = 4500, loop = true, }) {
+export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", autoScroll = true, scrollInterval = 4500, loop = true, perView, }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
     if (isLoading) {
         return (_jsx(Section, { className: `${__P.p8} ${className}`, surface: "muted", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto", children: [_jsx(Div, { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx(Div, { layout: "flex", gap: "6", className: `${__O.hidden}`, children: [...Array(3)].map((_, i) => (_jsx(Div, { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
     }
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-[2rem]", padding: "x-md", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: loop }), viewMoreHref && (_jsx(Div, { className: "text-left mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-primary hover:text-primary/80", size: "sm", weight: "medium", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `${className}`, surface: "muted", padding: "y-3xl", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto md:px-[2rem]", padding: "x-md", children: [_jsxs(Div, { className: "text-left mb-10", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: perView ?? CAROUSEL_PER_VIEW.reviews, gap: 24, autoScroll: autoScroll, autoScrollInterval: scrollInterval, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor, loop: loop }), viewMoreHref && (_jsx(Div, { className: "text-left mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-primary hover:text-primary/80", size: "sm", weight: "medium", children: viewMoreLabel }) }))] }) }));
 }

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

@@ -4,19 +4,10 @@ import { useState, useMemo } from "react";
 import { THEMED_BG_PRIMARY, THEMED_BG_TERTIARY, THEMED_BORDER, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY, FLEX_BETWEEN } from "../../../_internal/shared/styles/themed";
 import { Button, Div, Heading, RichText, Section, Span, Stack, Tabs, TabsList, TabsTrigger, Text, TextLink } from "../../../ui";
 import { ChevronDown } from "lucide-react";
+import { FAQ_CATEGORY_LABELS } from "../constants/faq-category-labels";
 const __O = {
     hidden: "overflow-hidden",
 };
-// --- Constants ----------------------------------------------------------------
-const CATEGORY_LABELS = {
-    general: "General",
-    orders_payment: "Orders & Payment",
-    shipping_delivery: "Shipping",
-    returns_refunds: "Returns & Refunds",
-    product_information: "Products",
-    account_security: "Account",
-    technical_support: "Support",
-};
 // --- Helpers -----------------------------------------------------------------
 function isHtml(s) {
     return /<[a-z][\s\S]*>/i.test(s);
@@ -37,7 +28,7 @@ export function FAQSection({ title, subtitle, items, tabs: tabsProp, showCategor
             const cat = item.category ?? "general";
             if (!seen.has(cat)) {
                 seen.add(cat);
-                result.push({ value: cat, label: CATEGORY_LABELS[cat] ?? cat });
+                result.push({ value: cat, label: FAQ_CATEGORY_LABELS[cat] ?? cat });
             }
         }
         return result;

package/dist/features/homepage/components/FeaturedAuctionsSection.d.ts

@@ -9,8 +9,10 @@ export interface FeaturedAuctionsSectionProps {
     filterByBrand?: string;
     initialItems?: ProductItem[];
     rows?: number;
+    /** Cap the rendered cards, mirroring FeaturedProductsSection. */
+    maxItems?: number;
     autoScroll?: boolean;
     scrollInterval?: number;
     loop?: boolean;
 }
-export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, loop, }: FeaturedAuctionsSectionProps): React.JSX.Element;
+export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, maxItems, autoScroll, scrollInterval, loop, }: FeaturedAuctionsSectionProps): React.JSX.Element;

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

@@ -4,7 +4,9 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
 import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, loop = true, }) {
-    const { data: items = [], isLoading } = useFeaturedAuctions({ filterByBrand, initialData: initialItems });
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+import { SECTION_TITLE, VIEW_MORE_LABEL } from "../constants/section-copy";
+export function FeaturedAuctionsSection({ title = SECTION_TITLE.auctions, description, viewMoreHref, viewMoreLabel = VIEW_MORE_LABEL.auctions, className = "", filterByBrand, initialItems, rows = 1, maxItems, autoScroll = false, scrollInterval = 5000, loop = true, }) {
+    const { data: fetched = [], isLoading } = useFeaturedAuctions({ filterByBrand, initialData: initialItems });
+    const items = maxItems && maxItems > 0 ? fetched.slice(0, maxItems) : fetched;
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: SECTION_TITLE.auctions, headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedBundlesSection.d.ts

@@ -12,9 +12,15 @@ export interface FeaturedBundlesSectionProps {
     title?: string;
     description?: string;
     initialItems?: CategoryDocument[];
+    /** Cap the rendered bundles. Items are supplied pre-fetched, so this slices. */
+    maxItems?: number;
+    /** Show the "N% off" badge on each cover. Defaults to `true`. */
+    showSavingsBadge?: boolean;
+    /** "View all" link label. */
+    viewMoreLabel?: string;
     className?: string;
     onBuyNow?: (input: {
         bundleSlug: string;
     }) => Promise<unknown>;
 }
-export declare function FeaturedBundlesSection({ title, description, initialItems, className, onBuyNow, }: FeaturedBundlesSectionProps): React.JSX.Element | null;
+export declare function FeaturedBundlesSection({ title, description, initialItems, maxItems, showSavingsBadge, viewMoreLabel, className, onBuyNow, }: FeaturedBundlesSectionProps): React.JSX.Element | null;

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

@@ -24,20 +24,21 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const PLACEHOLDER_EMOJI = "📦";
-export function FeaturedBundlesSection({ title = BUNDLE_COPY.featuredDefaultTitle, description, initialItems = [], className = "", onBuyNow, }) {
+export function FeaturedBundlesSection({ title = BUNDLE_COPY.featuredDefaultTitle, description, initialItems = [], maxItems, showSavingsBadge = true, viewMoreLabel = BUNDLE_COPY.featured.viewAll, className = "", onBuyNow, }) {
     const { hand } = useHandMode();
-    const items = initialItems.filter((c) => c.categoryType === "bundle");
+    const bundles = initialItems.filter((c) => c.categoryType === "bundle");
+    const items = maxItems && maxItems > 0 ? bundles.slice(0, maxItems) : bundles;
     if (items.length === 0)
         return null;
-    return (_jsx(Section, { className: `${className}`, padding: "y-2xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, reverse: hand === "left", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES), className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: BUNDLE_COPY.featured.viewAll })] }), _jsx(Grid, { cols: "cards", gap: "3", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle, onBuyNow: onBuyNow }, bundle.id))) })] }) }));
+    return (_jsx(Section, { className: `${className}`, padding: "y-2xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, reverse: hand === "left", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES), className: "text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel })] }), _jsx(Grid, { cols: "cards", gap: "3", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle, showSavingsBadge: showSavingsBadge, onBuyNow: onBuyNow }, bundle.id))) })] }) }));
 }
-function FeaturedBundleCard({ bundle, onBuyNow }) {
+function FeaturedBundleCard({ bundle, showSavingsBadge = true, onBuyNow, }) {
     const stock = bundle.bundleStockStatus ?? "in_stock";
     const memberCount = bundle.bundleProductIds?.length ?? 0;
     const cover = bundle.display?.coverImage;
     const href = String(ROUTES.PUBLIC.BUNDLE_DETAIL?.(bundle.slug) ?? "#");
     const discount = computeBundleDiscount(bundle.bundlePrice, bundle.bundleOriginalTotal);
-    return (_jsxs(Stack, { gap: "none", surface: "default", rounded: "xl", border: "default", children: [_jsxs(Link, { href: href, className: "group block p-[var(--appkit-space-3)] hover:no-underline", children: [_jsxs(Div, { className: `relative mb-2 aspect-square ${__O.hidden}`, rounded: "lg", surface: "subtle", children: [cover ? (_jsx(MediaImage, { src: cover, alt: bundle.name, size: "card", className: "transition-transform group-hover:scale-105" })) : (_jsx(Row, { textSize: "3xl", className: "h-full w-full", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })), discount && (_jsx(Badge, { variant: "success", className: "absolute left-2 top-2", children: BUNDLE_COPY.detail.discountBadge(discount.percent) }))] }), _jsx(Text, { className: "line-clamp-2", size: "sm", weight: "semibold", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", className: "mt-1", wrap: true, children: [_jsx(Text, { size: "sm", weight: "bold", children: bundle.bundlePrice
+    return (_jsxs(Stack, { gap: "none", surface: "default", rounded: "xl", border: "default", children: [_jsxs(Link, { href: href, className: "group block p-[var(--appkit-space-3)] hover:no-underline", children: [_jsxs(Div, { className: `relative mb-2 aspect-square ${__O.hidden}`, rounded: "lg", surface: "subtle", children: [cover ? (_jsx(MediaImage, { src: cover, alt: bundle.name, size: "card", className: "transition-transform group-hover:scale-105" })) : (_jsx(Row, { textSize: "3xl", className: "h-full w-full", align: "center", justify: "center", children: PLACEHOLDER_EMOJI })), showSavingsBadge && discount && (_jsx(Badge, { variant: "success", className: "absolute left-2 top-2", children: BUNDLE_COPY.detail.discountBadge(discount.percent) }))] }), _jsx(Text, { className: "line-clamp-2", size: "sm", weight: "semibold", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", className: "mt-1", wrap: true, children: [_jsx(Text, { size: "sm", weight: "bold", children: bundle.bundlePrice
                                     ? formatCurrency(bundle.bundlePrice, "INR")
                                     : BUNDLE_COPY.featured.priceFallback }), discount && (_jsx(Text, { size: "xs", color: "muted", className: "line-through", children: formatCurrency(discount.originalTotal, "INR") })), _jsxs(Text, { size: "xs", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.featured.itemCount(memberCount)] }), stock !== "in_stock" && (_jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: BUNDLE_COPY.stockBadge.listVariantOutOfStock }))] })] }), onBuyNow && (_jsx(Div, { border: "subtle", className: `border-t ${__P.p3}`, padding: "t-xs", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: stock === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }));
 }

package/dist/features/homepage/components/FeaturedPreOrdersSection.d.ts

@@ -9,8 +9,10 @@ export interface FeaturedPreOrdersSectionProps {
     filterByBrand?: string;
     initialItems?: ProductItem[];
     rows?: number;
+    /** Cap the rendered cards, mirroring FeaturedProductsSection. */
+    maxItems?: number;
     autoScroll?: boolean;
     scrollInterval?: number;
     loop?: boolean;
 }
-export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, loop, }: FeaturedPreOrdersSectionProps): React.JSX.Element;
+export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, maxItems, autoScroll, scrollInterval, loop, }: FeaturedPreOrdersSectionProps): React.JSX.Element;

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

@@ -4,7 +4,9 @@ import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, loop = true, }) {
-    const { data: items = [], isLoading } = useFeaturedPreOrders({ filterByBrand, initialData: initialItems });
+import { SECTION_TITLE, VIEW_MORE_LABEL } from "../constants/section-copy";
+export function FeaturedPreOrdersSection({ title = SECTION_TITLE.preOrders, description, viewMoreHref, viewMoreLabel = VIEW_MORE_LABEL.preOrders, className = "", filterByBrand, initialItems, rows = 1, maxItems, autoScroll = false, scrollInterval = 5000, loop = true, }) {
+    const { data: fetched = [], isLoading } = useFeaturedPreOrders({ filterByBrand, initialData: initialItems });
+    const items = maxItems && maxItems > 0 ? fetched.slice(0, maxItems) : fetched;
     return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedProductsSection.d.ts

@@ -8,9 +8,11 @@ export interface FeaturedProductsSectionProps {
     filterByBrand?: string;
     initialItems?: ProductItem[];
     rows?: number;
+    /** Cap the rendered cards. Was declared but never destructured — so every
+     *  `maxItems` an admin configured was silently ignored. */
     maxItems?: number;
     autoScroll?: boolean;
     scrollInterval?: number;
     loop?: boolean;
 }
-export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, autoScroll, scrollInterval, loop, }: FeaturedProductsSectionProps): import("react").JSX.Element;
+export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, maxItems, autoScroll, scrollInterval, loop, }: FeaturedProductsSectionProps): import("react").JSX.Element;

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

@@ -5,13 +5,15 @@ import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
-export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, autoScroll = false, scrollInterval = 5000, loop = true, }) {
+import { SECTION_TITLE, VIEW_MORE_LABEL } from "../constants/section-copy";
+export function FeaturedProductsSection({ title = SECTION_TITLE.products, description, viewMoreHref, viewMoreLabel = VIEW_MORE_LABEL.products, className = "", filterByBrand, initialItems, rows = 1, maxItems, autoScroll = false, scrollInterval = 5000, loop = true, }) {
     const { data, isLoading } = useFeaturedProducts({
         filterByBrand,
         initialData: initialItems?.length
             ? { items: initialItems, total: initialItems.length, page: 1, pageSize: initialItems.length, totalPages: 1, hasMore: false }
             : undefined,
     });
-    const items = data?.items ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: pluginFor(product.listingType ?? "standard").detailRoute(product.slug ?? product.id ?? "") })), className: className }));
+    const fetched = data?.items ?? [];
+    const items = maxItems && maxItems > 0 ? fetched.slice(0, maxItems) : fetched;
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: SECTION_TITLE.products, headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: CAROUSEL_PER_VIEW.standard, gap: 16, rows: Math.min(Math.max(rows, 1), 4), autoScroll: autoScroll, autoScrollInterval: scrollInterval, loop: loop, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: pluginFor(product.listingType ?? "standard").detailRoute(product.slug ?? product.id ?? "") })), className: className }));
 }

package/dist/features/homepage/components/HeroCarousel.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CarouselSlide } from "../types/index";
+import type { CarouselSlide, CarouselSlideHeight } from "../types/index";
 export interface HeroCarouselProps {
     initialSlides?: CarouselSlide[];
     /**
@@ -8,5 +8,26 @@ export interface HeroCarouselProps {
      * Falls back to `window.location.href` assignment when omitted.
      */
     push?: (href: string) => void;
+    /**
+     * Everything below comes from `CarouselSectionConfig`, which the section
+     * renderer used to drop entirely — it rendered `<HeroCarousel initialSlides />`
+     * and nothing else, so every one of these admin controls was inert.
+     */
+    /** Fallback slide height when a slide carries no `settings.height`. */
+    height?: CarouselSlideHeight;
+    /** Fallback autoplay delay when a slide carries no `settings.autoplayDelayMs`. */
+    defaultAutoplayDelayMs?: number;
+    /** Pause autoplay while the pointer is over the carousel. Defaults to `true`. */
+    pauseOnHover?: boolean;
+    /** Render the slide-position dots. Defaults to `true`. */
+    showDots?: boolean;
+    /** Render the prev/next arrows. Defaults to `true`. */
+    showArrows?: boolean;
+    /**
+     * Accessible name for the carousel region. Deliberately NOT rendered as a
+     * visible heading — the config field is a label for the admin list, and
+     * printing it above the slides would add hero chrome nobody asked for.
+     */
+    title?: string;
 }
-export declare function HeroCarousel({ initialSlides, push }?: HeroCarouselProps): React.JSX.Element;
+export declare function HeroCarousel({ initialSlides, push, height, defaultAutoplayDelayMs, pauseOnHover, showDots, showArrows, title, }?: HeroCarouselProps): React.JSX.Element;

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

@@ -86,7 +86,7 @@ function SlideBackground({ bg, legacy, mobileLegacy, isMobile, priority, }) {
     if (effectiveBg.type === "video") {
         return (_jsxs(_Fragment, { children: [_jsx(MediaVideo, { src: src, thumbnailUrl: effectiveBg.thumbnail ?? legacy?.thumbnail, alt: "", autoPlayMuted: true, loop: true, controls: false }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: POSITION_FILL, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(MediaImage, { src: src, alt: "", size: "hero", priority: priority }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: POSITION_FILL, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(MediaImage, { src: src, alt: "", size: "hero", priority: priority, fetchPriority: priority ? "high" : "low" }), effectiveBg.dimOverlay?.enabled && (_jsx(Div, { className: POSITION_FILL, style: { backgroundColor: `rgba(0,0,0,${(effectiveBg.dimOverlay.opacity ?? 0) / 100})` } }))] }));
 }
 /** Renders the background of a card (image, video, color, gradient). */
 function CardBackground({ bg }) {
@@ -117,14 +117,17 @@ function CarouselCardRenderer({ card, isMobile, push, }) {
             gridRow: String(gridPos.gridRow),
             gridColumn: String(gridPos.gridColumn),
             minHeight: isMobile ? 100 : 140,
-        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: POSITION_FILL }), _jsxs(Stack, { justify: "end", className: `${POSITION_FILL} md:p-[1.5rem] ${textAlignClass}`, padding: "xs", children: [card.content?.eyebrow && (_jsx(Text, { color: "inverse", shadow: "sm", className: "text-[10px] !/70 mb-0.5 tracking-wider", mdSize: "xs", transform: "uppercase", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "hidden md:block !/90 mb-0.5 md:mb-2", mdSize: "sm", size: "xs", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] mb-0.5 md:mb-3`, truncate: 2, weight: "bold", shadow: "md", mdSize: "2xl", lgSize: "3xl", style: { color: card.content.textColor ?? "white" }, children: card.content.title })), card.content?.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: `text-[10px] md:text-[0.875rem] !/80 mb-1 md:mb-4`, truncate: true, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-[var(--appkit-space-2)]", children: (card.buttons ?? []).map((btn, i) => {
+        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: POSITION_FILL }), _jsxs(Stack, { justify: "end", className: `${POSITION_FILL} md:p-[1.5rem] ${textAlignClass}`, padding: "xs", children: [card.content?.eyebrow && (_jsx(Text, { color: "inverse", shadow: "sm", className: "text-[10px] !/70 mb-0.5 tracking-wider", mdSize: "xs", transform: "uppercase", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "hidden md:block !/90 mb-0.5 md:mb-2", mdSize: "sm", size: "xs", children: card.content.subtitle })), card.content?.title && (
+                            // level={3}: a card sits INSIDE a slide, so it is subordinate to
+                            // that slide's own h2 overlay title rather than a sibling of it.
+                            _jsx(Heading, { level: 3, className: `text-[11px] mb-0.5 md:mb-3`, truncate: 2, weight: "bold", shadow: "md", mdSize: "2xl", lgSize: "3xl", style: { color: card.content.textColor ?? "white" }, children: card.content.title })), card.content?.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: `text-[10px] md:text-[0.875rem] !/80 mb-1 md:mb-4`, truncate: true, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-[var(--appkit-space-2)]", children: (card.buttons ?? []).map((btn, i) => {
                                     const variant = btn.variant === "link" || btn.variant === "ghost"
                                         ? "ghost"
                                         : btn.variant;
                                     return (_jsx(Button, { variant: variant, size: "sm", onClick: makeButtonClickHandler(btn.href, btn.openInNewTab, push), children: btn.text }, btn.id ?? i));
                                 }) }))] })] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", rounded: "none", className: `${POSITION_FILL} ${FLEX_CENTER} font-[600] text-white hover:bg-[rgba(0,0,0,0.2)] transition-colors p-[0]`, onClick: makeButtonClickHandler(card.buttons[0].href, card.buttons[0].openInNewTab, push), children: _jsx(Span, { size: "lg", mdSize: "2xl", children: card.buttons[0].text }) }))] }));
 }
-export function HeroCarousel({ initialSlides, push } = {}) {
+export function HeroCarousel({ initialSlides, push, height, defaultAutoplayDelayMs, pauseOnHover = true, showDots = true, showArrows = true, title, } = {}) {
     const { hand } = useHandMode();
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isPaused, setIsPaused] = useState(false);
@@ -139,8 +142,9 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         ?.sort((a, b) => a.order - b.order)
         ?.slice(0, 5) || [];
     const currentSlideData = slides[currentSlide];
-    const autoplayDelay = currentSlideData?.settings?.autoplayDelayMs ?? 4000;
-    const heightClass = getSlideHeightClass(currentSlideData?.settings?.height);
+    // Per-slide setting wins, then the section-level config, then the built-in.
+    const autoplayDelay = currentSlideData?.settings?.autoplayDelayMs ?? defaultAutoplayDelayMs ?? 4000;
+    const heightClass = getSlideHeightClass(currentSlideData?.settings?.height ?? height);
     const goToSlide = useCallback((index) => {
         const el = slidesRef.current;
         if (!el)
@@ -184,16 +188,25 @@ export function HeroCarousel({ initialSlides, push } = {}) {
     if (!slides || slides.length === 0) {
         return (_jsxs(Div, { gap: "4", layout: "flex-col", align: "start", justify: "center", className: "relative w-full min-h-[260px] md:min-h-[60vh] bg-[image:var(--appkit-gradient-section-cool)] px-[var(--appkit-space-6)]", children: [_jsx(Heading, { level: 2, className: "text-primary", size: "2xl", weight: "bold", align: "start", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "max-w-md", align: "start", children: "Amazing deals are on their way. Stay tuned!" })] }));
     }
-    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: POSITION_FILL, children: _jsx(Div, { layout: "flex", ref: slidesRef, onScroll: handleSlidesScroll, className: "h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
+    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": title?.trim() || "Hero carousel", onKeyDown: handleKeyDown, 
+        // Hover-pause is configurable; focus-pause is NOT. WCAG 2.2.2 requires a
+        // mechanism to pause moving content, and keyboard users have no hover.
+        onMouseEnter: pauseOnHover ? () => setIsPaused(true) : undefined, onMouseLeave: pauseOnHover ? () => setIsPaused(false) : undefined, onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: POSITION_FILL, children: _jsx(Div, { layout: "flex", ref: slidesRef, onScroll: handleSlidesScroll, className: "h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
                         const slideHeightClass = getSlideHeightClass(slide.settings?.height);
                         const hasCards = slide.cards && slide.cards.length > 0;
-                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-neutral-900 ${slideHeightClass}`, children: [_jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { layout: "flex-col", align: "start", justify: "center", className: `${POSITION_FILL} text-left md:px-[4rem] lg:px-[8rem]`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 !/80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { color: "inverse", level: 1, className: "stagger-2 font-display ! mb-2 md:mb-4 break-words", size: "4xl", shadow: "2xl", mdSize: "6xl", lgSize: "8xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 !/90 mb-4 md:mb-8 max-w-2xl", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${POSITION_FILL} grid gap-[var(--appkit-space-2)] md:gap-[var(--appkit-space-4)] md:p-[var(--appkit-space-8)]`, padding: "md", style: {
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-neutral-900 ${slideHeightClass}`, children: [_jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { layout: "flex-col", align: "start", justify: "center", className: `${POSITION_FILL} text-left md:px-[4rem] lg:px-[8rem]`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 !/80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
+                                        // level={2}, NOT 1. The welcome section above this
+                                        // carousel owns the page's single <h1>; a carousel that
+                                        // emits one <h1> per slide gives the document as many
+                                        // h1s as it has slides. `size` is independent of `level`,
+                                        // so this changes the outline and not one pixel.
+                                        _jsx(Heading, { color: "inverse", level: 2, className: "stagger-2 font-display ! mb-2 md:mb-4 break-words", size: "4xl", shadow: "2xl", mdSize: "6xl", lgSize: "8xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 !/90 mb-4 md:mb-8 max-w-2xl", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${POSITION_FILL} grid gap-[var(--appkit-space-2)] md:gap-[var(--appkit-space-4)] md:p-[var(--appkit-space-8)]`, padding: "md", style: {
                                         gridTemplateRows: "repeat(2, 1fr)",
                                         gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                                         alignContent: "center",
                                         alignItems: "stretch",
                                     }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));
-                    }) }) }), slides.length > 1 && (_jsx(Row, { gap: "sm", className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-[var(--appkit-space-0)] !min-h-0 ${index === currentSlide
+                    }) }) }), showDots && slides.length > 1 && (_jsx(Row, { gap: "sm", className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-[var(--appkit-space-0)] !min-h-0 ${index === currentSlide
                         ? HERO_CAROUSEL_DOT_ACTIVE
-                        : `${HERO_CAROUSEL_DOT_INACTIVE} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-[rgba(0,0,0,0.2)] animate-[progress-fill_4s_linear_forwards]", rounded: "full", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Row, { gap: "sm", className: `absolute bottom-4 ${hand === "left" ? "left-4" : "right-4"} z-20`, children: [_jsx(Button, { variant: "ghost", className: `p-[0] ${HERO_CAROUSEL_ARROW}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-[0] ${HERO_CAROUSEL_ARROW}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
+                        : `${HERO_CAROUSEL_DOT_INACTIVE} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-[rgba(0,0,0,0.2)] animate-[progress-fill_4s_linear_forwards]", rounded: "full", "aria-hidden": "true" })) }, index))) })), showArrows && slides.length > 1 && (_jsxs(Row, { gap: "sm", className: `absolute bottom-4 ${hand === "left" ? "left-4" : "right-4"} z-20`, children: [_jsx(Button, { variant: "ghost", className: `p-[0] ${HERO_CAROUSEL_ARROW}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-[0] ${HERO_CAROUSEL_ARROW}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }

package/dist/features/homepage/components/HomepageCustomerReviewsSection.d.ts

@@ -4,9 +4,14 @@ export interface HomepageCustomerReviewsSectionProps {
     subtitle?: string;
     viewMoreHref?: string;
     viewMoreLabel?: string;
+    /** Cap the rendered reviews. */
+    maxReviews?: number;
+    /** Cards visible per view on desktop / mobile. */
+    itemsPerView?: number;
+    mobileItemsPerView?: number;
     className?: string;
     autoScroll?: boolean;
     scrollInterval?: number;
     loop?: boolean;
 }
-export declare function HomepageCustomerReviewsSection({ title, subtitle, viewMoreHref, viewMoreLabel, className, autoScroll, scrollInterval, loop, }: HomepageCustomerReviewsSectionProps): React.JSX.Element;
+export declare function HomepageCustomerReviewsSection({ title, subtitle, viewMoreHref, viewMoreLabel, maxReviews, itemsPerView, mobileItemsPerView, className, autoScroll, scrollInterval, loop, }: HomepageCustomerReviewsSectionProps): React.JSX.Element;

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

@@ -3,7 +3,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CustomerReviewsSection } from "./CustomerReviewsSection";
 import { useHomepageReviews } from "../hooks/useHomepageReviews";
 import { ReviewCard } from "../../reviews/components";
-export function HomepageCustomerReviewsSection({ title = "What Our Customers Say", subtitle, viewMoreHref, viewMoreLabel = "See all reviews →", className = "", autoScroll = true, scrollInterval = 4500, loop = true, }) {
-    const { data: reviews = [], isLoading } = useHomepageReviews();
-    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full shadow-sm border-[var(--appkit-color-border)]" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className, autoScroll: autoScroll, scrollInterval: scrollInterval, loop: loop }));
+import { SECTION_TITLE, VIEW_MORE_LABEL } from "../constants/section-copy";
+export function HomepageCustomerReviewsSection({ title = SECTION_TITLE.reviews, subtitle, viewMoreHref, viewMoreLabel = VIEW_MORE_LABEL.reviews, maxReviews, itemsPerView, mobileItemsPerView, className = "", autoScroll = true, scrollInterval = 4500, loop = true, }) {
+    const { data: fetched = [], isLoading } = useHomepageReviews();
+    const reviews = maxReviews && maxReviews > 0 ? fetched.slice(0, maxReviews) : fetched;
+    return (_jsx(CustomerReviewsSection, { title: title, subtitle: subtitle, items: reviews, renderItem: (review) => (_jsx(ReviewCard, { review: review, className: "h-full shadow-sm border-[var(--appkit-color-border)]" })), viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, isLoading: isLoading, keyExtractor: (review) => review.id, className: className, autoScroll: autoScroll, scrollInterval: scrollInterval, loop: loop, 
+        // Only override the shared preset when the admin actually set one of the
+        // two counts — otherwise a partial override would silently flatten the
+        // preset's sm/lg/2xl steps down to two breakpoints.
+        perView: itemsPerView || mobileItemsPerView
+            ? { base: mobileItemsPerView ?? 1, md: itemsPerView ?? 3 }
+            : undefined }));
 }

package/dist/features/homepage/components/MarketplaceHomepageView.d.ts

@@ -5,5 +5,13 @@ export interface MarketplaceHomepageViewProps {
     newsletterFormSlot?: React.ReactNode;
     /** Callback when user dismisses announcement banner — wire to a server action to persist. */
     onBannerDismiss?: (hash: string) => void;
+    /**
+     * Consumer's site identity. Pass this from whatever single source already
+     * owns it (this app uses the same `appkit.config.js` block that backs
+     * `SITE_IDENTITY` in the root layout). Without it the sections fall back to
+     * brand-neutral copy — which is correct for a library, and is why the
+     * renderer no longer hardcodes "LIR" or "LetItRip".
+     */
+    brand?: import("../lib/section-renderer").HomepageBrand;
 }
-export declare function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onBannerDismiss, }?: MarketplaceHomepageViewProps): Promise<React.JSX.Element>;
+export declare function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onBannerDismiss, brand, }?: MarketplaceHomepageViewProps): Promise<React.JSX.Element>;

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

@@ -6,6 +6,7 @@ import { carouselRepository, faqsRepository, siteSettingsRepository } from "../.
 import { safeRead } from "../../../errors/safe-read";
 import { fetchLiveStats } from "../lib/live-stats";
 import { renderSection, AnnouncementBar } from "../lib/section-renderer";
+import { SECTION_COPY } from "../constants/section-copy";
 import { homepageSectionsRepository } from "../repository/homepage-sections.repository";
 import { isListingTypeEnabled } from "../../../_internal/shared/listing-types/feature-flags";
 /**
@@ -38,7 +39,7 @@ function toCarouselSlides(docs) {
         updatedAt: updatedAt instanceof Date ? updatedAt.toISOString() : undefined,
     }));
 }
-export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onBannerDismiss, } = {}) {
+export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onBannerDismiss, brand, } = {}) {
     // Every read on this page is a RAIL: the homepage must still render when one
     // fails, but a failure has to be distinguishable from an empty catalogue —
     // that is exactly Root Cause #59, and safeRead is what records it.
@@ -48,8 +49,10 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
     const siteSettings = await safeRead(() => siteSettingsRepository.getSingleton(), {
         route: "/", key: "homepage.siteSettings", fallback: null,
     });
-    const announcementMessage = siteSettings?.announcementBar?.message?.trim() ||
-        "🎉 Up to 15% Off on Pokémon TCG this week — Use code SAVE15";
+    // The fallback used to be a hardcoded seasonal Pokémon TCG discount, which
+    // any install leaving the bar unconfigured would have published as live
+    // promotional copy for a promotion that does not exist.
+    const announcementMessage = siteSettings?.announcementBar?.message?.trim() || SECTION_COPY.announcementFallback;
     const showAnnouncement = siteSettings?.announcementBar?.enabled ?? true;
     const [allSections, rawFaqItems] = await Promise.all([
         safeRead(() => homepageSectionsRepository.getEnabledSections(), {
@@ -172,5 +175,5 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
             : undefined,
     };
     const carouselSlides = toCarouselSlides(slides);
-    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(AnnouncementBar, { overlay: true, message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData))] }) }));
+    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(AnnouncementBar, { overlay: true, message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData, brand))] }) }));
 }

package/dist/features/homepage/components/StatsCounterSection.d.ts

@@ -9,6 +9,11 @@ export interface StatItem {
 }
 export interface StatsCounterSectionProps {
     stats: StatItem[];
+    /**
+     * Optional heading above the tiles. The section config has always carried a
+     * `title` and this component had nowhere to put it, so it never rendered.
+     */
+    title?: string;
     className?: string;
 }
-export declare function StatsCounterSection({ stats, className, }: StatsCounterSectionProps): import("react").JSX.Element;
+export declare function StatsCounterSection({ stats, title, className, }: StatsCounterSectionProps): import("react").JSX.Element;

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

@@ -12,10 +12,10 @@ function StatCard({ stat, visible, delayClass, isLast, }) {
             delayClass,
             visible ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0",
             !isLast ? "border-r border-[var(--appkit-color-border)]" : "",
-        ].join(" "), children: [stat.renderIcon && (_jsx(Row, { className: "mb-4 h-14 w-14 bg-primary-50 dark:bg-primary-950/40 border border-[var(--appkit-color-primary-100)] dark:border-[var(--appkit-color-primary-900)]/30", align: "center", justify: "center", rounded: "2xl", children: stat.renderIcon({ className: "w-7 h-7" }) })), _jsx(Heading, { level: 2, variant: "none", gradient: "brand", className: "mb-1 font-display font-black", mdSize: "5xl", size: "4xl", children: stat.value }), _jsx(Text, { variant: "none", className: "uppercase tracking-widest", color: "muted", size: "xs", weight: "medium", children: stat.label })] }));
+        ].join(" "), children: [stat.renderIcon && (_jsx(Row, { className: "mb-4 h-14 w-14 bg-primary-50 dark:bg-primary-950/40 border border-[var(--appkit-color-primary-100)] dark:border-[var(--appkit-color-primary-900)]/30", align: "center", justify: "center", rounded: "2xl", children: stat.renderIcon({ className: "w-7 h-7" }) })), _jsx(Heading, { level: 3, variant: "none", gradient: "brand", className: "mb-1 font-display font-black", mdSize: "5xl", size: "4xl", children: stat.value }), _jsx(Text, { variant: "none", className: "uppercase tracking-widest", color: "muted", size: "xs", weight: "medium", children: stat.label })] }));
 }
 // --- Sectmon -----------------------------------------------------------------
-export function StatsCounterSection({ stats, className = "", }) {
+export function StatsCounterSection({ stats, title, className = "", }) {
     const sectionRef = useRef(null);
     const [visible, setVisible] = useState(false);
     useEffect(() => {
@@ -31,5 +31,5 @@ export function StatsCounterSection({ stats, className = "", }) {
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { border: "subtle", paddingY: "y-2-5xl", ref: sectionRef, className: `border-y ${className}`, paddingX: "x-md", surface: "default", children: _jsx(Div, { className: "mx-auto max-w-5xl", children: _jsx(Grid, { cols: "statTiles", gap: "none", children: stats.map((stat, i) => (_jsx(StatCard, { stat: stat, visible: visible, delayClass: STAT_DELAYS[Math.min(i, STAT_DELAYS.length - 1)], isLast: i === stats.length - 1 }, stat.key))) }) }) }));
+    return (_jsx(Section, { border: "subtle", paddingY: "y-2-5xl", ref: sectionRef, className: `border-y ${className}`, paddingX: "x-md", surface: "default", children: _jsxs(Div, { className: "mx-auto max-w-5xl", children: [title && (_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", className: "mb-6 text-left", children: title })), _jsx(Grid, { cols: "statTiles", gap: "none", children: stats.map((stat, i) => (_jsx(StatCard, { stat: stat, visible: visible, delayClass: STAT_DELAYS[Math.min(i, STAT_DELAYS.length - 1)], isLast: i === stats.length - 1 }, stat.key))) })] }) }));
 }

package/dist/features/homepage/constants/faq-category-labels.d.ts

@@ -0,0 +1,15 @@
+/**
+ * FAQ category → display label.
+ *
+ * Single owner. This map previously existed twice, byte-identical: once inline
+ * in `lib/section-renderer.tsx` and once as `CATEGORY_LABELS` in
+ * `components/FAQSection.tsx`. Adding a category meant two commits or a silent
+ * disagreement between the homepage strip's tabs and the section's own — the
+ * Duplication Framework's "bug-fix multiplier" trigger.
+ *
+ * Keyed loosely (`Record<string, string>`) rather than on `FAQCategoryKey`
+ * on purpose: `FAQCategoryKey` (7 values) and `FAQCategory` (8, including
+ * `scam_awareness`) have already drifted apart, and an unknown key here falls
+ * back to rendering the raw key rather than crashing a tab bar.
+ */
+export declare const FAQ_CATEGORY_LABELS: Record<string, string>;

package/dist/features/homepage/constants/faq-category-labels.js

@@ -0,0 +1,23 @@
+/**
+ * FAQ category → display label.
+ *
+ * Single owner. This map previously existed twice, byte-identical: once inline
+ * in `lib/section-renderer.tsx` and once as `CATEGORY_LABELS` in
+ * `components/FAQSection.tsx`. Adding a category meant two commits or a silent
+ * disagreement between the homepage strip's tabs and the section's own — the
+ * Duplication Framework's "bug-fix multiplier" trigger.
+ *
+ * Keyed loosely (`Record<string, string>`) rather than on `FAQCategoryKey`
+ * on purpose: `FAQCategoryKey` (7 values) and `FAQCategory` (8, including
+ * `scam_awareness`) have already drifted apart, and an unknown key here falls
+ * back to rendering the raw key rather than crashing a tab bar.
+ */
+export const FAQ_CATEGORY_LABELS = {
+    general: "General",
+    orders_payment: "Orders & Payment",
+    shipping_delivery: "Shipping",
+    returns_refunds: "Returns & Refunds",
+    product_information: "Products",
+    account_security: "Account",
+    technical_support: "Support",
+};