@mohasinac/appkit 4.53.1 → 4.54.0

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

@@ -2,6 +2,8 @@ import React from "react";
 export type CTABannerHeight = "sm" | "md" | "lg" | "xl";
 export interface CTABannerSectionProps {
     title?: string;
+    /** Small uppercase label above the headline. Defaults to a generic one. */
+    eyebrow?: string;
     subtitle?: string;
     /** Longer supporting paragraph below the subtitle. */
     description?: string;
@@ -25,4 +27,4 @@ export interface CTABannerSectionProps {
     backgroundImage?: string;
     className?: string;
 }
-export declare function CTABannerSection({ title, subtitle, description, primaryLabel, primaryHref, secondaryLabel, secondaryHref, height, backgroundImage, className, }: CTABannerSectionProps): React.JSX.Element;
+export declare function CTABannerSection({ title, eyebrow, subtitle, description, primaryLabel, primaryHref, secondaryLabel, secondaryHref, height, backgroundImage, className, }: CTABannerSectionProps): React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link.js";
-import { Div, Heading, Row, Scrim, Section, Span, Text } from "../../../ui/index.js";
+import { Div, Heading, Icon, Row, Scrim, Section, Span, Text } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { SECTION_TITLE, SECTION_COPY } from "../constants/section-copy.js";
@@ -20,6 +20,9 @@ const HEIGHT_PADDING_Y = {
     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 }))] })] })] }));
+export function CTABannerSection({ title = SECTION_TITLE.banner, eyebrow = SECTION_COPY.bannerEyebrow, subtitle, description, primaryLabel = SECTION_COPY.bannerPrimaryCta, primaryHref = String(ROUTES.PUBLIC.PRODUCTS), secondaryLabel = SECTION_COPY.bannerSecondaryCta, 
+// Pairs with SECTION_COPY.bannerSecondaryCta — see the note there for why
+// this banner must not default to /auctions.
+secondaryHref = String(ROUTES.PUBLIC.CATEGORIES), 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: [_jsxs(Div, { layout: "inline-flex", align: "center", gap: "2", surface: "frost", rounded: "full", padding: "x-sm", className: "mb-4 py-[var(--appkit-space-1-5)] backdrop-blur-sm", children: [_jsx(Icon, { name: "deals", size: "sm", tone: "on-solid" }), _jsx(Span, { color: "inverse", size: "xs", weight: "semibold", transform: "uppercase", className: "tracking-[0.18em]", children: eyebrow })] }), _jsx(Heading, { color: "inverse", level: 2, mdSize: "3xl", lgSize: "4xl", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { color: "inverse-muted", className: "mt-3", size: "base", children: subtitle })), description && (_jsx(Text, { color: "inverse-muted", className: "mt-2 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/HeroCarousel.js

@@ -6,8 +6,10 @@ import { Button, Div, Heading, Row, Scrim, Section, Span, Stack, Text } from "..
 import { MediaImage } from "../../media/MediaImage.js";
 import { MediaVideo } from "../../media/MediaVideo.js";
 import { useHeroCarousel } from "../hooks/useHeroCarousel.js";
-import { HERO_CAROUSEL_ARROW, HERO_CAROUSEL_DOT_ACTIVE, HERO_CAROUSEL_DOT_INACTIVE, POSITION_FILL, FLEX_CENTER, HERO_PLACEHOLDER_BG } from "../constants/hero-carousel-styles.js";
-import { useHandMode } from "../../../_internal/client/hand-mode/index.js";
+import { POSITION_FILL, FLEX_CENTER, HERO_PLACEHOLDER_BG } from "../constants/hero-carousel-styles.js";
+/* The one carousel position/navigation control. The dot and arrow class
+   strings this file used to import are deleted — see CarouselNav.style.css. */
+import { CarouselNav } from "../../../ui/components/CarouselNav.js";
 function makeButtonClickHandler(href, openInNewTab, push) {
     return () => {
         if (openInNewTab) {
@@ -128,7 +130,9 @@ function CarouselCardRenderer({ card, isMobile, push, }) {
                                 }) }))] })] })), 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, height, defaultAutoplayDelayMs, pauseOnHover = true, showDots = true, showArrows = true, title, } = {}) {
-    const { hand } = useHandMode();
+    /* `useHandMode()` was read only to pick which bottom corner the arrow pair
+       sat in. The nav is centred and symmetrical now, so there is no corner to
+       choose and no reason for this surface to know about handedness. */
     const [currentSlide, setCurrentSlide] = useState(0);
     const [isPaused, setIsPaused] = useState(false);
     const sectionRef = useRef(null);
@@ -206,7 +210,5 @@ export function HeroCarousel({ initialSlides, push, height, defaultAutoplayDelay
                                         alignContent: "center",
                                         alignItems: "stretch",
                                     }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));
-                    }) }) }), 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))) })), 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" }) }) })] }))] }));
+                    }) }) }), (showDots || showArrows) && slides.length > 1 && (_jsx(Row, { justify: "center", className: "absolute bottom-4 inset-x-0 z-20 px-[var(--appkit-space-4)]", children: _jsx(CarouselNav, { count: slides.length, index: currentSlide, onSelect: showDots ? goToSlide : undefined, onPrev: showArrows ? goPrev : undefined, onNext: showArrows ? goNext : undefined, tone: "on-media", progressMs: prefersReducedMotion ? 0 : autoplayDelay, paused: isPaused, loop: true, ariaLabel: "Featured promotions" }) }))] }));
 }

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

@@ -19,7 +19,7 @@ import { fetchLiveStats } from "../lib/live-stats.js";
 import { renderSection, AnnouncementBar } from "../lib/section-renderer.js";
 import { SECTION_COPY } from "../constants/section-copy.js";
 import { homepageSectionsRepository } from "../repository/homepage-sections.repository.js";
-import { isListingTypeEnabled } from "../../../_internal/shared/listing-types/feature-flags.js";
+import { isListingTypeEnabled, isCategoryTypeEnabled, } from "../../../_internal/shared/listing-types/feature-flags.js";
 /**
  * Homepage sections that advertise a specific listing type, and must therefore
  * disappear when the site stops offering it. A section type absent from this
@@ -30,6 +30,18 @@ const HOMEPAGE_SECTION_LISTING_TYPE = {
     "pre-orders": "pre-order",
     "prize-draws": "prize-draw",
 };
+/**
+ * The same idea for the CATEGORY types, added 2026-10-20.
+ *
+ * 🛑 Bundles are not a `ListingType`, so `featured-bundles` sat outside the
+ * map above and rendered unconditionally — the one merchandise rail on the
+ * homepage with no off switch at all, while every neighbouring rail had one.
+ * `listings.categoryTypes.bundle` is the control that already exists for
+ * exactly this, and the admin Site Settings screen already shows it.
+ */
+const HOMEPAGE_SECTION_CATEGORY_TYPE = {
+    "featured-bundles": "bundle",
+};
 import { getFeaturedProducts, getFeaturedAuctions, getFeaturedPreOrders } from "../../products/actions/product-actions.js";
 import { listTopLevelCategories, listBrandCategories } from "../../categories/actions/category-actions.js";
 import { listFeaturedBundles } from "../../../_internal/server/features/bundles/data.js";
@@ -83,12 +95,21 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
     // half of it had a real successor (`settings.listings.listingTypes`).
     //
     // So auctions / pre-orders / prize-draws are gated by the same control that
-    // hides them on every other surface, and the `events` / `blog` sections are
-    // now unconditional — there is no product control for "we don't run events",
-    // and there never was one that anything but this line read.
+    // hides them on every other surface, `featured-bundles` joined them on
+    // 2026-10-20 via the category-type half of the same setting, and the
+    // `events` / `blog` / `event-raffles` sections stay unconditional — there is
+    // no product control for "we don't run events", and there never was one that
+    // anything but this line read. Those are switched off per-document instead
+    // (`enabled: false`), which is the only lever they have.
     const enabledSections = allSections.filter((section) => {
-        const gated = HOMEPAGE_SECTION_LISTING_TYPE[section.type];
-        return !gated || isListingTypeEnabled(gated, siteSettings);
+        const type = section.type;
+        const gatedListing = HOMEPAGE_SECTION_LISTING_TYPE[type];
+        if (gatedListing && !isListingTypeEnabled(gatedListing, siteSettings))
+            return false;
+        const gatedCategory = HOMEPAGE_SECTION_CATEGORY_TYPE[type];
+        if (gatedCategory && !isCategoryTypeEnabled(gatedCategory, siteSettings))
+            return false;
+        return true;
     });
     // Collect live metric requests from all enabled stats sections
     const liveStatRequests = [];
@@ -136,7 +157,12 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
         activeTypes.has("products") ? getFeaturedProducts(12) : null,
         activeTypes.has("auctions") ? getFeaturedAuctions(12) : null,
         activeTypes.has("pre-orders") ? getFeaturedPreOrders(12) : null,
-        activeTypes.has("categories")
+        // `welcome` is a second trigger, not a typo: its hero mosaic is built from
+        // these categories' cover images. Gating the fetch on `categories` alone
+        // meant a homepage without a categories section rendered the hero's
+        // brand-mark fallback with nothing anywhere saying the imagery had simply
+        // not been fetched.
+        activeTypes.has("categories") || activeTypes.has("welcome")
             ? safeRead(() => listTopLevelCategories(12), { route: "/", key: "homepage.categories", fallback: null })
             : null,
         activeTypes.has("brands")

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

@@ -44,9 +44,17 @@ export function SectionCarousel({ title, description, headingVariant = "editoria
                                     headingClass,
                                 ]
                                     .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", textSize: "xs", color: "faint", className: "mt-1 select-none", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `${descVariant} mt-2`, size: "base", children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: loop, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, 
-                        // 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, 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", layout: "inline-flex", align: "center", className: "gap-[0.375rem] transition-colors bg-primary text-white hover:bg-primary-600", size: "sm", weight: "semibold", children: viewMoreLabel }) }))] })] }));
+                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", textSize: "xs", color: "faint", className: "mt-1 select-none", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `${descVariant} mt-2`, size: "base", children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: loop, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, 
+                        /*
+                         * One in-flow control instead of two absolute arrows.
+                         *
+                         * The arrows were `display:none` below 640px, so on a phone every
+                         * rail on the homepage had no affordance at all — only a hidden
+                         * scrollbar and the hope that a visitor would try swiping. They
+                         * also cost the rail 2 × 44px of wrapper gutter at EVERY width to
+                         * reserve space for themselves. `showNav` carries arrows AND a
+                         * position indicator in flow, so the control exists on a phone and
+                         * the gutter goes back to the cards.
+                         */
+                        showArrows: false, showNav: true, navAriaLabel: title, 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", layout: "inline-flex", align: "center", className: "gap-[0.375rem] transition-colors bg-primary text-white hover:bg-primary-600", size: "sm", weight: "semibold", children: viewMoreLabel }) }))] })] }));
 }

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

@@ -1,11 +1,16 @@
 import React from "react";
+import type { IconKey } from "../../../ui/icons/icon-registry";
 export interface SecurityHighlightItem {
     key: string;
     title: string;
     description: string;
-    renderIcon?: (props: {
-        className?: string;
-    }) => React.ReactNode;
+    /**
+     * 🛑 Replaces `renderIcon?: (props) => ReactNode`, which was unreachable: the
+     * items come from a Firestore section config and a function cannot round-trip
+     * through a document, so the renderer never passed one and the icon row below
+     * never rendered at all. See constants/trust-icon-aliases.ts.
+     */
+    iconName?: IconKey;
     colorClass?: string;
     iconColorClass?: string;
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed.js";
-import { Div, Grid, Heading, Row, Section, Span, Text, TextLink } from "../../../ui/index.js";
+import { Div, Grid, Heading, Icon, Row, Section, Span, Text, TextLink } from "../../../ui/index.js";
 // --- Constants ---------------------------------------------------------------
 const CARD_DELAYS = ["delay-0", "delay-100", "delay-200", "delay-300", "delay-[400ms]", "delay-500"];
 // --- Single card -------------------------------------------------------------
@@ -15,7 +15,7 @@ function SecurityCard({ item, visible, delayClass, }) {
             colorClass,
             delayClass,
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), "data-section": "securityhighlightssection-div-357", children: [item.renderIcon && (_jsx(Row, { className: "w-10 h-10 mb-3", surface: "default", align: "center", justify: "center", rounded: "lg", children: _jsx(Span, { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "mb-1", weight: "semibold", children: item.title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: item.description })] }));
+        ].join(" "), "data-section": "securityhighlightssection-div-357", children: [item.iconName && (_jsx(Row, { className: "w-10 h-10 mb-3", surface: "default", align: "center", justify: "center", rounded: "lg", children: _jsx(Icon, { name: item.iconName, size: "xl", className: iconColorClass }) })), _jsx(Text, { className: "mb-1", weight: "semibold", children: item.title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: item.description })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, learnMoreHref, learnMoreLabel = "Learn more →", className = "", }) {

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

@@ -1,11 +1,16 @@
-import type { ReactNode } from "react";
+import type { IconKey } from "../../../ui/icons/icon-registry";
 export interface StatItem {
     key: string;
     value: string;
     label: string;
-    renderIcon?: (props: {
-        className?: string;
-    }) => ReactNode;
+    /**
+     * 🛑 Replaces `renderIcon?: (props) => ReactNode`, which was unreachable — a
+     * function has no representation in the Firestore section config these stats
+     * come from, so the icon box below never rendered once. For a LIVE stat the
+     * renderer derives this from `metric` via STAT_PRESET_ICON, so a correct icon
+     * needs no extra config at all.
+     */
+    iconName?: IconKey;
 }
 export interface StatsCounterSectionProps {
     stats: StatItem[];

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Div, Grid, Heading, Row, Section, Text } from "../../../ui/index.js";
+import { Div, Grid, Heading, Icon, Row, Section, Text } from "../../../ui/index.js";
 // --- Constants ---------------------------------------------------------------
 const STAT_DELAYS = ["delay-0", "delay-[120ms]", "delay-[240ms]", "delay-[360ms]"];
 // --- Smngle stat mtem ---------------------------------------------------------
@@ -12,7 +12,7 @@ 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: 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 })] }));
+        ].join(" "), children: [stat.iconName && (_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: _jsx(Icon, { name: stat.iconName, size: "xl", tone: "primary" }) })), _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, title, className = "", }) {

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

@@ -3,5 +3,5 @@ import { Div, Heading, Stack, StarRating, Text } from "../../../ui/index.js";
 export function TestimonialsCarousel({ testimonials, eyebrow = "COLLECTOR REVIEWS", heading = "WHAT OUR COLLECTORS SAY", }) {
     if (testimonials.length === 0)
         return null;
-    return (_jsx(Stack, { as: "section", justify: "center", surface: "muted", border: "subtle", className: "min-h-[calc(100svh-var(--header-height,4rem))] [padding-block:clamp(3rem,6vh,5rem)]", children: _jsxs(Stack, { className: "mx-auto w-full max-w-7xl sm:px-[2rem] min-h-0", padding: "x-lg", children: [_jsxs(Div, { className: "mb-6 text-left shrink-0", children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-widest text-error tracking-[0.18em]", size: "xs", children: eyebrow }), _jsx(Heading, { level: 2, family: "display", className: "tracking-[0.08em] leading-none", size: "2xl", mdSize: "3xl", weight: "bold", color: "primary", children: heading })] }), _jsx(Stack, { wrap: true, className: "overflow-x-auto scrollbar-none max-h-[50svh] content-start", gap: "md", children: testimonials.map((t) => (_jsxs(Stack, { padding: "5", surface: "card", border: "subtle", className: "shrink-0 w-[clamp(260px,28vw,360px)]", shadow: "card", gap: "3", children: [_jsx(StarRating, { value: t.rating, readOnly: true, size: "sm" }), _jsxs(Text, { className: "flex-1 leading-relaxed", size: "sm", color: "muted", children: ["\u201C", t.text, "\u201D"] }), _jsxs(Text, { className: "font-black uppercase text-[var(--color-yellow)] tracking-[0.06em]", size: "xs", children: ["\u2014 ", t.name] })] }, t.id))) })] }) }));
+    return (_jsx(Stack, { as: "section", justify: "center", surface: "muted", border: "subtle", className: "min-h-[calc(100svh-var(--header-height,4rem))] [padding-block:clamp(3rem,6vh,5rem)]", children: _jsxs(Stack, { className: "mx-auto w-full max-w-7xl sm:px-[2rem] min-h-0", padding: "x-lg", children: [_jsxs(Div, { className: "mb-6 text-left shrink-0", children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-widest text-error tracking-[0.18em]", size: "xs", children: eyebrow }), _jsx(Heading, { level: 2, family: "display", className: "tracking-[0.08em] leading-none", size: "2xl", mdSize: "3xl", weight: "bold", color: "primary", children: heading })] }), _jsx(Stack, { wrap: true, className: "overflow-x-auto max-h-[50svh] content-start", gap: "md", children: testimonials.map((t) => (_jsxs(Stack, { padding: "5", surface: "card", border: "subtle", className: "shrink-0 w-[clamp(260px,28vw,360px)]", shadow: "card", gap: "3", children: [_jsx(StarRating, { value: t.rating, readOnly: true, size: "sm" }), _jsxs(Text, { className: "flex-1 leading-relaxed", size: "sm", color: "muted", children: ["\u201C", t.text, "\u201D"] }), _jsxs(Text, { className: "font-black uppercase text-[var(--color-yellow)] tracking-[0.06em]", size: "xs", children: ["\u2014 ", t.name] })] }, t.id))) })] }) }));
 }

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

@@ -1,11 +1,25 @@
 import React from "react";
+import type { IconKey } from "../../../ui/icons/icon-registry";
+/**
+ * 🛑 `renderIcon?: (props) => ReactNode` was removed, not renamed.
+ *
+ * It was unreachable by construction: every item here comes from a Firestore
+ * section config, and a function has no representation in a document — so the
+ * section renderer never passed one, and all four tiles fell through to a
+ * hardcoded `✓`. Four different promises ("Authenticity checked", "Escrow-backed
+ * payments", "Straightforward returns", "Real human support") rendered the same
+ * glyph. `iconName` is data, so it survives the document round-trip.
+ *
+ * `id` is now a separate field because `iconName` used to serve as BOTH the
+ * icon and the React key — two indicators sharing an icon produced duplicate
+ * keys, and giving the icon a correct default would have made that collision
+ * likely rather than rare.
+ */
 export interface TrustFeatureItem {
-    iconName: string;
+    id: string;
     title: string;
     description: string;
-    renderIcon?: (props: {
-        className?: string;
-    }) => React.ReactNode;
+    iconName?: IconKey;
 }
 export interface TrustFeaturesSectionProps {
     items: TrustFeatureItem[];

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Div, Grid, Heading, Row, Section, Span, Text } from "../../../ui/index.js";
+import { Div, Grid, Heading, Icon, Row, Section, Text } from "../../../ui/index.js";
 // --- Constants ---------------------------------------------------------------
 const CARD_DELAYS = ["delay-0", "delay-100", "delay-200", "delay-300", "delay-[400ms]", "delay-500"];
 // --- Single cards-variant card -----------------------------------------------
@@ -11,11 +11,11 @@ function TrustFeatureCard({ item, visible, delayClass, }) {
             "transition-all duration-500",
             delayClass,
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), "data-section": "trustfeaturessection-div-373", children: [_jsx(Row, { className: "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 flex-shrink-0", align: "center", justify: "center", rounded: "2xl", children: item.renderIcon ? (item.renderIcon({ className: "w-7 h-7" })) : (_jsx(Span, { className: "text-primary-600 dark:text-secondary-400", size: "2xl", "aria-hidden": "true", children: "\u2713" })) }), _jsx(Heading, { level: 3, className: "mt-3 mb-1 tracking-wide uppercase", color: "primary", size: "sm", weight: "bold", children: item.title }), _jsx(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: item.description })] }));
+        ].join(" "), "data-section": "trustfeaturessection-div-373", children: [item.iconName && (_jsx(Row, { className: "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 flex-shrink-0", align: "center", justify: "center", rounded: "2xl", children: _jsx(Icon, { name: item.iconName, size: "xl", tone: "primary" }) })), _jsx(Heading, { level: 3, className: "mt-3 mb-1 tracking-wide uppercase", color: "primary", size: "sm", weight: "bold", children: item.title }), _jsx(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: item.description })] }));
 }
 // --- Single strip-variant item -----------------------------------------------
 function TrustStripItem({ item }) {
-    return (_jsxs(Div, { layout: "inline-flex", gap: "2", align: "center", className: "flex-shrink-0", padding: "x-lg", children: [item.renderIcon ? (item.renderIcon({ className: "w-5 h-5" })) : (_jsx(Span, { className: "text-primary-600 dark:text-primary-400", size: "lg", "aria-hidden": "true", children: "\u2713" })), _jsx(Text, { className: "whitespace-nowrap", color: "muted", size: "sm", weight: "medium", children: item.title })] }));
+    return (_jsxs(Div, { layout: "inline-flex", gap: "2", align: "center", className: "flex-shrink-0", padding: "x-lg", children: [item.iconName && _jsx(Icon, { name: item.iconName, size: "lg", tone: "primary" }), _jsx(Text, { className: "whitespace-nowrap", color: "muted", size: "sm", weight: "medium", children: item.title })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function TrustFeaturesSection({ items, title, variant = "cards", className = "", }) {
@@ -36,7 +36,7 @@ export function TrustFeaturesSection({ items, title, variant = "cards", classNam
     }, []);
     if (variant === "strip") {
         const doubled = [...items, ...items];
-        return (_jsx(Section, { border: "subtle", ref: sectionRef, className: `overflow-hidden border-y ${className}`, padding: "y-md", children: _jsx(Div, { layout: "flex", className: "animate-marquee", children: doubled.map((item, i) => (_jsx(TrustStripItem, { item: item }, `${item.iconName}-${i}`))) }) }));
+        return (_jsx(Section, { border: "subtle", ref: sectionRef, className: `overflow-hidden border-y ${className}`, padding: "y-md", children: _jsx(Div, { layout: "flex", className: "animate-marquee", children: doubled.map((item, i) => (_jsx(TrustStripItem, { item: item }, `${item.id}-${i}`))) }) }));
     }
-    return (_jsx(Section, { ref: sectionRef, paddingY: "y-2-5xl", className: className, paddingX: "x-md", surface: "muted", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [title && (_jsx(Div, { className: "text-left mb-8", children: _jsx(Heading, { level: 2, color: "primary", size: "3xl", weight: "bold", mdSize: "4xl", children: title }) })), _jsx(Grid, { cols: "statTiles", gap: "lg", children: items.map((item, index) => (_jsx(TrustFeatureCard, { item: item, visible: visible, delayClass: CARD_DELAYS[Math.min(index, CARD_DELAYS.length - 1)] }, item.iconName))) })] }) }));
+    return (_jsx(Section, { ref: sectionRef, paddingY: "y-2-5xl", className: className, paddingX: "x-md", surface: "muted", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [title && (_jsx(Div, { className: "text-left mb-8", children: _jsx(Heading, { level: 2, color: "primary", size: "3xl", weight: "bold", mdSize: "4xl", children: title }) })), _jsx(Grid, { cols: "statTiles", gap: "lg", children: items.map((item, index) => (_jsx(TrustFeatureCard, { item: item, visible: visible, delayClass: CARD_DELAYS[Math.min(index, CARD_DELAYS.length - 1)] }, item.id))) })] }) }));
 }

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

@@ -1,7 +1,9 @@
 import React from "react";
+import type { IconKey } from "../../../ui/icons/icon-registry";
 export interface WelcomeSectionChip {
     key: string;
-    emoji: string;
+    /** Registry icon key. Replaces `emoji`, which no utility could size. */
+    iconName: IconKey;
     label: string;
 }
 export interface WelcomeSectionProps {
@@ -16,8 +18,17 @@ export interface WelcomeSectionProps {
     secondaryCtaHref?: string;
     onSecondaryCtaClick?: () => void;
     trustChips?: WelcomeSectionChip[];
+    /**
+     * Decorative hero imagery, MOST IMPORTANT FIRST — the first takes the large
+     * mosaic cell. Below `MOSAIC_MIN` (3) the brand-mark panel is used instead.
+     *
+     * Must be deterministic: `ImageMosaic` is explicit that `Math.random()` here
+     * would break SSR/hydration agreement, so the caller passes a stable
+     * configured order rather than a shuffle.
+     */
+    heroImages?: readonly string[];
     isLoading?: boolean;
     brandLogoText?: string;
     className?: string;
 }
-export declare function WelcomeSection({ title, subtitle, pillLabel, showCTA, ctaLabel, ctaHref, onCtaClick, secondaryCtaLabel, secondaryCtaHref, onSecondaryCtaClick, trustChips, isLoading, brandLogoText, className, }: WelcomeSectionProps): React.JSX.Element;
+export declare function WelcomeSection({ title, subtitle, pillLabel, showCTA, ctaLabel, ctaHref, onCtaClick, secondaryCtaLabel, secondaryCtaHref, onSecondaryCtaClick, trustChips, heroImages, isLoading, brandLogoText, className, }: WelcomeSectionProps): React.JSX.Element;

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEMED_TEXT_SECONDARY, FLEX_CENTER } from "../../../_internal/shared/styles/themed.js";
-import { Button, Div, Grid, Heading, Row, Section, SiteLogo, SiteMark, Span, Stack, Text, TextLink } from "../../../ui/index.js";
+import { Button, Div, Grid, Heading, Icon, ImageMosaic, MOSAIC_MIN, Row, Section, SiteLogo, SiteMark, Span, Stack, Text, TextLink } from "../../../ui/index.js";
 // --- Component ---------------------------------------------------------------
-export function WelcomeSection({ title, subtitle, pillLabel, showCTA = true, ctaLabel = "Shop now", ctaHref, onCtaClick, secondaryCtaLabel = "Browse products", secondaryCtaHref, onSecondaryCtaClick, trustChips = [], isLoading = false, brandLogoText = "", className = "", }) {
+export function WelcomeSection({ title, subtitle, pillLabel, showCTA = true, ctaLabel = "Shop now", ctaHref, onCtaClick, secondaryCtaLabel = "Browse products", secondaryCtaHref, onSecondaryCtaClick, trustChips = [], heroImages, isLoading = false, brandLogoText = "", className = "", }) {
     const themed = { textSecondary: THEMED_TEXT_SECONDARY };
     const flex = { center: FLEX_CENTER };
     if (isLoading) {
         return (_jsx(Section, { className: `relative overflow-hidden pt-[0px] pb-[var(--appkit-space-16)] md:pt-[0px] md:pb-[6rem] ${className}`, paddingX: "x-md", children: _jsxs(Div, { className: "animate-pulse max-w-4xl mx-auto text-left", children: [_jsx(Div, { className: "h-6 w-52 mb-6", surface: "subtle", rounded: "full" }), _jsx(Div, { className: "h-20 mb-4 max-w-2xl", surface: "subtle", rounded: "lg" }), _jsx(Div, { className: "h-6 mb-8 max-w-lg", surface: "subtle", rounded: "lg" }), _jsxs(Row, { justify: "start", gap: "md", children: [_jsx(Div, { className: "h-12 w-36", surface: "subtle", rounded: "xl" }), _jsx(Div, { className: "h-12 w-36", surface: "subtle", rounded: "xl" })] })] }) }));
     }
-    return (_jsxs(Section, { className: `relative overflow-hidden pt-[0px] pb-[var(--appkit-space-20)] md:pt-[0px] md:pb-[7rem] ${className}`, paddingX: "x-md", children: [_jsx(Div, { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] bg-primary/10 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] bg-secondary/10 dark:bg-secondary/15 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", children: _jsxs(Grid, { align: "center", gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2", children: [_jsxs(Div, { className: "text-left", children: [pillLabel && (_jsx(Div, { children: _jsxs(Span, { layout: "inline-flex", gap: "md", size: "xs", weight: "medium", className: /* audit-variant-ok: colour+alpha border (primary-500/30); the `border` variant takes a token name, not an rgba step */ "border border-primary-500/30 bg-primary-500/10 px-[1.25rem] py-[0.375rem] tracking-[0.2em] text-primary-700 dark:text-primary-400 backdrop-blur-sm", rounded: "full", transform: "uppercase", children: [_jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 1, variant: "none", gradient: "brand-tri", className: "mt-4 font-display leading-[1.1] tracking-tight break-words", size: "5xl", mdSize: "6xl", lgSize: "7xl", xlSize: "7xl", children: title }), subtitle && (_jsx(Text, { className: `mt-4 ${themed.textSecondary} max-w-xl leading-relaxed`, size: "xl", children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8", justify: "start", children: [ctaHref ? (_jsx(TextLink, { rounded: "xl", href: ctaHref, layout: "inline-flex", align: "center", justify: "center", className: "px-[2rem] py-[0.875rem] !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", size: "base", weight: "bold", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { rounded: "xl", href: secondaryCtaHref, layout: "inline-flex", align: "center", justify: "center", className: "border-2 border-cobalt/40 dark:border-cobalt-400/40 px-[2rem] py-[0.875rem] text-cobalt-700 dark:text-cobalt-300 hover:bg-primary-surface transition-all hover:scale-[1.02]", size: "base", weight: "semibold", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6", justify: "start", children: trustChips.map((chip) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", className: "border border-[var(--appkit-color-border)] px-[0.875rem] py-[0.375rem]", rounded: "full", surface: "subtle", color: "muted", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx(Div, { className: "hidden lg:block", children: _jsxs(Div, { className: `relative overflow-hidden aspect-[4/3] bg-[image:var(--appkit-gradient-section-mesh)]`, shadow: "2xl", border: "default", rounded: "3xl", children: [_jsx(Div, { className: "absolute inset-0 bg-[image:var(--appkit-gradient-glass)]" }), _jsxs(Stack, { centered: true, gap: "sm", className: `absolute inset-0 ${flex.center} p-[2.5rem]`, children: [_jsx(SiteMark, { title: brandLogoText || "LetItRip.in", size: "xl" }), _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", size: "xl" })] })] }) })] }) })] }));
+    return (_jsxs(Section, { className: `relative overflow-hidden pt-[0px] pb-[var(--appkit-space-20)] md:pt-[0px] md:pb-[7rem] ${className}`, paddingX: "x-md", children: [_jsx(Div, { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] bg-primary/10 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] bg-secondary/10 dark:bg-secondary/15 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", children: _jsxs(Grid, { align: "center", gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2", children: [_jsxs(Div, { className: "text-left", children: [pillLabel && (_jsx(Div, { children: _jsxs(Span, { layout: "inline-flex", gap: "md", size: "xs", weight: "medium", className: /* audit-variant-ok: colour+alpha border (primary-500/30); the `border` variant takes a token name, not an rgba step */ "border border-primary-500/30 bg-primary-500/10 px-[1.25rem] py-[0.375rem] tracking-[0.2em] text-primary-700 dark:text-primary-400 backdrop-blur-sm", rounded: "full", transform: "uppercase", children: [_jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 1, variant: "none", gradient: "brand-tri", className: "mt-4 font-display leading-[1.1] tracking-tight break-words", size: "5xl", mdSize: "6xl", lgSize: "7xl", xlSize: "7xl", children: title }), subtitle && (_jsx(Text, { className: `mt-4 ${themed.textSecondary} max-w-xl leading-relaxed`, size: "xl", children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8", justify: "start", children: [ctaHref ? (_jsx(TextLink, { rounded: "xl", href: ctaHref, layout: "inline-flex", align: "center", justify: "center", className: "px-[2rem] py-[0.875rem] !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", size: "base", weight: "bold", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { rounded: "xl", href: secondaryCtaHref, layout: "inline-flex", align: "center", justify: "center", className: "border-2 border-cobalt/40 dark:border-cobalt-400/40 px-[2rem] py-[0.875rem] text-cobalt-700 dark:text-cobalt-300 hover:bg-primary-surface transition-all hover:scale-[1.02]", size: "base", weight: "semibold", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6", justify: "start", children: trustChips.map((chip) => (_jsxs(Row, { align: "center", gap: "xs", surface: "default", border: "subtle", rounded: "full", shadow: "sm", className: "px-[0.875rem] py-[0.375rem]", children: [_jsx(Icon, { name: chip.iconName, size: "sm", tone: "success" }), _jsx(Span, { size: "xs", weight: "medium", color: "muted", children: chip.label })] }, chip.key))) }))] }), _jsx(Div, { className: "hidden lg:block", children: heroImages && heroImages.length >= MOSAIC_MIN ? (_jsx(ImageMosaic, { size: "hero", images: heroImages, alt: `${brandLogoText || "Marketplace"} collection highlights` })) : (_jsxs(Div, { className: `relative overflow-hidden aspect-[4/3] bg-[image:var(--appkit-gradient-section-mesh)]`, shadow: "2xl", border: "default", rounded: "3xl", children: [_jsx(Div, { className: "absolute inset-0 bg-[image:var(--appkit-gradient-glass)]" }), _jsxs(Stack, { centered: true, gap: "sm", className: `absolute inset-0 ${flex.center} p-[2.5rem]`, children: [_jsx(SiteMark, { title: brandLogoText || "LetItRip.in", size: "xl" }), _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", size: "xl" })] })] })) })] }) })] }));
 }

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

@@ -11,4 +11,32 @@ export interface WhatsAppCommunitySectionProps {
     isLoading?: boolean;
     className?: string;
 }
+/**
+ * The community invite.
+ *
+ * ## 🛑 It looks like a chat because it IS a chat invite
+ *
+ * This was a single flat card: icon row → heading → description → a 2-column
+ * grid of four identical `✓` circles → an italic blockquote → a button, all
+ * left-aligned in one top-down stack. Two of those blocks (the `✓` grid and the
+ * blockquote) spent a lot of vertical space *telling* you the group is useful.
+ * As bubbles on WhatsApp's own wallpaper they *show* it, in less room.
+ *
+ * Everything needed already existed and had no consumer: `Card`'s
+ * `chat-bubble-mine` / `chat-bubble-theirs` variants (with the correct corner
+ * notches and an auto-margin for right alignment) and the
+ * `--appkit-color-whatsapp-bg` beige token.
+ *
+ * ## 🛑 Three things that are deliberate
+ *
+ * 1. **No fabricated timestamps and no `✓✓` read receipts.** Tempting, and the
+ *    same category of claim as a made-up member count — which this feature
+ *    already refuses to invent. The bubble shape carries the motif on its own.
+ * 2. **`align="start"` on the thread is load-bearing.** `chat-bubble-*` is
+ *    `display:inline-block; max-width:80%`, and a stretched flex item defeats
+ *    both, so the bubbles would become full-width boxes.
+ * 3. **`tone="whatsapp"`, not `tone="accent-banner"`.** The old tone is brand
+ *    primary→secondary — the SAME gradient as `CTABannerSection` a couple of
+ *    sections below, which is a real part of why the page read monotonous.
+ */
 export declare function WhatsAppCommunitySection({ title, descriptionHtml, memberCount, memberCountLabel, testimonial, benefits, buttonText, groupLink, isLoading, className, }: WhatsAppCommunitySectionProps): React.JSX.Element | null;

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

@@ -1,12 +1,38 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Blockquote, Button, Div, Heading, RichText, Row, Section, Span, Text } from "../../../ui/index.js";
-import { Users } from "lucide-react";
+import { Button, Card, Div, Grid, Heading, Icon, RichText, Row, Section, Span, Stack, Text } from "../../../ui/index.js";
 import { getDefaultLocale } from "../../../core/baseline-resolver.js";
-import { useHandMode } from "../../../_internal/client/hand-mode/index.js";
+import { WhatsAppGlyph } from "./WhatsAppGlyph.js";
 // --- Section -----------------------------------------------------------------
+/**
+ * The community invite.
+ *
+ * ## 🛑 It looks like a chat because it IS a chat invite
+ *
+ * This was a single flat card: icon row → heading → description → a 2-column
+ * grid of four identical `✓` circles → an italic blockquote → a button, all
+ * left-aligned in one top-down stack. Two of those blocks (the `✓` grid and the
+ * blockquote) spent a lot of vertical space *telling* you the group is useful.
+ * As bubbles on WhatsApp's own wallpaper they *show* it, in less room.
+ *
+ * Everything needed already existed and had no consumer: `Card`'s
+ * `chat-bubble-mine` / `chat-bubble-theirs` variants (with the correct corner
+ * notches and an auto-margin for right alignment) and the
+ * `--appkit-color-whatsapp-bg` beige token.
+ *
+ * ## 🛑 Three things that are deliberate
+ *
+ * 1. **No fabricated timestamps and no `✓✓` read receipts.** Tempting, and the
+ *    same category of claim as a made-up member count — which this feature
+ *    already refuses to invent. The bubble shape carries the motif on its own.
+ * 2. **`align="start"` on the thread is load-bearing.** `chat-bubble-*` is
+ *    `display:inline-block; max-width:80%`, and a stretched flex item defeats
+ *    both, so the bubbles would become full-width boxes.
+ * 3. **`tone="whatsapp"`, not `tone="accent-banner"`.** The old tone is brand
+ *    primary→secondary — the SAME gradient as `CTABannerSection` a couple of
+ *    sections below, which is a real part of why the page read monotonous.
+ */
 export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount, memberCountLabel = "members", testimonial, benefits = [], buttonText = "Join our WhatsApp community", groupLink, isLoading = false, className = "", }) {
-    const { hand } = useHandMode();
     if (isLoading) {
         return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsx(Div, { className: "h-72 animate-pulse", surface: "subtle", rounded: "2xl" }) }) }));
     }
@@ -14,7 +40,17 @@ export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount,
         return null;
     const handleJoin = () => {
         if (groupLink)
-            window.open(groupLink, "_blank");
+            window.open(groupLink, "_blank", "noopener,noreferrer");
     };
-    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsxs(Section, { color: "inverse", tone: "accent-banner", rounded: "2xl", shadow: "lg", className: "relative overflow-hidden", children: [_jsx(Div, { className: "absolute inset-0 opacity-[0.06] pointer-events-none bg-[repeating-linear-gradient(45deg,white_0,white_1px,transparent_0,transparent_50%)] bg-[size:10px_10px]", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 px-[1.5rem] sm:px-[2.5rem] sm:py-[3rem]", padding: "y-2xl", children: [_jsxs(Row, { align: "center", justify: "between", gap: "md", wrap: true, className: "mb-8", reverse: hand === "left", children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "w-12 h-12 bg-[var(--appkit-color-whatsapp)] flex-shrink-0", align: "center", justify: "center", rounded: "xl", shadow: "lg", children: _jsx("svg", { className: "w-7 h-7 text-white", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }), _jsx(Span, { color: "inverse", size: "sm", weight: "medium", className: "/80 tracking-wide", transform: "uppercase", children: "WhatsApp Community" })] }), memberCount && (_jsxs(Row, { paddingY: "y-2xs-tall", className: "backdrop-blur-sm", surface: "frost", padding: "x-md", align: "center", gap: "sm", rounded: "full", children: [_jsx(Users, { className: "w-4 h-4 text-white/80" }), _jsxs(Span, { color: "inverse", size: "sm", weight: "semibold", children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { color: "inverse", level: 2, className: "mb-3 leading-tight", smSize: "3xl", size: "2xl", weight: "bold", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none prose-invert", className: "text-white/80 text-[length:var(--appkit-text-base)] mb-6 max-w-2xl leading-relaxed" })), benefits.length > 0 && (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 mb-8 max-w-2xl", children: benefits.slice(0, 4).map((benefit, i) => (_jsxs(Row, { align: "start", gap: "2.5", children: [_jsx(Span, { layout: "flex-center", className: "mt-0.5 flex-shrink-0 w-5 h-5 bg-[rgba(255,255,255,0.2)]", rounded: "full", children: _jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }), _jsx(Span, { color: "inverse", size: "sm", className: "/90 leading-snug", children: benefit })] }, i))) })), testimonial && (_jsx(Blockquote, { paddingX: "x-md", className: "border-l-2 border-white/30 mb-8 max-w-xl", children: _jsxs(Text, { color: "inverse", variant: "none", className: "/75 italic leading-relaxed", size: "sm", children: ["\u201C", testimonial, "\u201D"] }) })), groupLink && (_jsxs(Button, { gap: "md", variant: "primary", size: "lg", onClick: handleJoin, "aria-label": buttonText, className: "!bg-[var(--appkit-color-whatsapp)] hover:!bg-[var(--appkit-color-whatsapp-light)] !text-white !border-0 font-[600]", shadow: "lg", children: [_jsx("svg", { className: "w-5 h-5 shrink-0", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] }))] })] }) }) }));
+    /* The thread. Benefits read as incoming messages; the testimonial closes it.
+       Below two there is no conversation to show, so the panel stands down and
+       the pitch column takes the full width rather than sitting beside an
+       almost-empty box. */
+    const thread = [...benefits.slice(0, 4), ...(testimonial ? [`“${testimonial}”`] : [])];
+    const showThread = thread.length >= 2;
+    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsxs(Section, { color: "inverse", tone: "whatsapp", rounded: "3xl", shadow: "xl", className: "relative overflow-hidden", children: [_jsx(Div, { className: "absolute inset-0 opacity-[0.10] pointer-events-none bg-[radial-gradient(circle_at_1px_1px,white_1px,transparent_0)] bg-[size:18px_18px]", "aria-hidden": true }), _jsxs(Grid, { cols: showThread ? "halves" : "autoLg", gap: "hero", align: "center", className: "relative z-10 px-[1.5rem] py-[2.5rem] sm:px-[2.5rem] sm:py-[3rem]", children: [_jsxs(Stack, { gap: "lg", children: [_jsxs(Row, { align: "center", gap: "md", wrap: true, children: [_jsxs(Row, { surface: "frost", rounded: "full", padding: "x-sm", paddingY: "y-2xs-tall", align: "center", gap: "xs", className: "backdrop-blur-sm", children: [_jsx(WhatsAppGlyph, { className: "h-4 w-4" }), _jsx(Span, { color: "inverse", size: "xs", weight: "semibold", transform: "uppercase", className: "tracking-[0.18em]", children: "WhatsApp Community" })] }), memberCount && (_jsxs(Row, { align: "center", gap: "xs", children: [_jsxs(Span, { layout: "flex", className: "relative h-2 w-2", "aria-hidden": true, children: [_jsx(Span, { rounded: "full", className: "absolute inline-flex h-full w-full animate-ping bg-[var(--appkit-color-surface)] opacity-75" }), _jsx(Span, { rounded: "full", className: "relative inline-flex h-2 w-2 bg-[var(--appkit-color-surface)]" })] }), _jsxs(Span, { color: "inverse-muted", size: "xs", weight: "medium", numeric: true, children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { color: "inverse", level: 2, size: "3xl", mdSize: "4xl", weight: "bold", className: "leading-[1.1] tracking-tight", children: title }), descriptionHtml && (
+                                    /* No colour class here. `prose-invert` sets `--tw-prose-body`
+                                       itself, so ANY wrapper colour loses to it — the previous
+                                       `text-white/80` on this element did nothing. */
+                                    _jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm prose-invert max-w-none", className: "max-w-md text-[length:var(--appkit-text-base)] leading-relaxed" })), groupLink && (_jsx(Row, { children: _jsxs(Button, { variant: "inverse", size: "lg", shadow: "lg", gap: "md", onClick: handleJoin, "aria-label": buttonText, children: [_jsx(WhatsAppGlyph, { className: "h-5 w-5" }), buttonText] }) }))] }), showThread && (_jsxs(Stack, { gap: "sm", align: "start", rounded: "2xl", padding: "md", shadow: "2xl", className: "bg-[var(--appkit-color-whatsapp-bg)]", role: "img", "aria-label": "Example messages from the community group", children: [thread.map((line, i) => (_jsx(Card, { padding: "none", variant: i % 2 === 1 ? "chat-bubble-mine" : "chat-bubble-theirs", children: _jsx(Text, { size: "sm", className: "leading-snug", children: line }) }, i))), _jsxs(Row, { align: "center", gap: "xs", className: "self-end pt-[var(--appkit-space-1)]", children: [_jsx(Icon, { name: "lock", size: "xs", tone: "muted" }), _jsx(Span, { size: "xs", color: "muted", children: "End-to-end encrypted by WhatsApp" })] })] }))] })] }) }) }));
 }

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

@@ -0,0 +1,20 @@
+import React from "react";
+/**
+ * The WhatsApp brand mark.
+ *
+ * ## 🛑 Why this is NOT in `icon-registry.ts`
+ *
+ * That registry's keys are INTENT names (`verify`, `restore`, `ship`) resolving
+ * to lucide glyphs, and its header is explicit that it is deliberately small
+ * and not a re-export of an icon set. A third-party brand mark is neither an
+ * intent nor a lucide glyph — registering it would make "which icon set is this
+ * key from?" a question with two answers.
+ *
+ * It lives here because it was inlined TWICE in `WhatsAppCommunitySection`
+ * (~1.2KB of identical path data in one file), and the second copy had no
+ * `shrink-0`, so inside a padded flex control it could shrink below its stated
+ * size — Root Cause #80's `UNSHRINKABLE_GLYPH`.
+ */
+export declare function WhatsAppGlyph({ className }: {
+    className?: string;
+}): React.JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The WhatsApp brand mark.
+ *
+ * ## 🛑 Why this is NOT in `icon-registry.ts`
+ *
+ * That registry's keys are INTENT names (`verify`, `restore`, `ship`) resolving
+ * to lucide glyphs, and its header is explicit that it is deliberately small
+ * and not a re-export of an icon set. A third-party brand mark is neither an
+ * intent nor a lucide glyph — registering it would make "which icon set is this
+ * key from?" a question with two answers.
+ *
+ * It lives here because it was inlined TWICE in `WhatsAppCommunitySection`
+ * (~1.2KB of identical path data in one file), and the second copy had no
+ * `shrink-0`, so inside a padded flex control it could shrink below its stated
+ * size — Root Cause #80's `UNSHRINKABLE_GLYPH`.
+ */
+export function WhatsAppGlyph({ className = "" }) {
+    return (_jsx("svg", { className: `shrink-0 ${className}`, fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }));
+}