@mohasinac/appkit 4.53.1 → 4.54.0

package/dist/features/homepage/constants/hero-carousel-styles.d.ts

@@ -1,12 +1,14 @@
 /**
- * HeroCarousel-specific class strings (arrow + active/inactive dots).
+ * HeroCarousel-specific class strings.
  *
- * Extracted from `THEME_CONSTANTS.carousel.{arrow,dotActive,dotInactive}`
- * so the consumer sweep can drop the THEME_CONSTANTS dependency.
+ * 🛑 `HERO_CAROUSEL_ARROW`, `HERO_CAROUSEL_DOT_ACTIVE` and
+ * `HERO_CAROUSEL_DOT_INACTIVE` were DELETED 2026-10-20 along with the markup
+ * that consumed them. They were one of three unrelated carousel-indicator
+ * implementations on the homepage; all three are now
+ * `ui/components/CarouselNav`, whose docstring records what each of them got
+ * wrong. Do not reintroduce a per-surface dot or arrow style here — a second
+ * appearance is how the three diverged in the first place.
  */
-export declare const HERO_CAROUSEL_ARROW = "w-10 h-10 rounded-2xl bg-[color-mix(in_srgb,var(--appkit-color-surface)_85%,transparent)] backdrop-blur-sm shadow-lg border border-[var(--appkit-color-border)] text-[var(--appkit-color-text)] hover:-translate-y-0.5 hover:bg-[var(--appkit-color-surface)] hover:shadow-xl active:scale-95 transition-all duration-200 flex items-center justify-center";
-export declare const HERO_CAROUSEL_DOT_ACTIVE = "w-8 h-2 !min-h-0 rounded-full bg-[var(--appkit-color-surface)] shadow-sm transition-all duration-500";
-export declare const HERO_CAROUSEL_DOT_INACTIVE = "w-2 h-2 !min-h-0 rounded-full bg-white/55 shadow-sm transition-all duration-500";
 /** Absolute fill helper — `position: absolute; inset: 0`. */
 export declare const POSITION_FILL = "absolute inset-0";
 /** Flex centering helper — `flex items-center justify-center`. */

package/dist/features/homepage/constants/hero-carousel-styles.js

@@ -1,12 +1,14 @@
 /**
- * HeroCarousel-specific class strings (arrow + active/inactive dots).
+ * HeroCarousel-specific class strings.
  *
- * Extracted from `THEME_CONSTANTS.carousel.{arrow,dotActive,dotInactive}`
- * so the consumer sweep can drop the THEME_CONSTANTS dependency.
+ * 🛑 `HERO_CAROUSEL_ARROW`, `HERO_CAROUSEL_DOT_ACTIVE` and
+ * `HERO_CAROUSEL_DOT_INACTIVE` were DELETED 2026-10-20 along with the markup
+ * that consumed them. They were one of three unrelated carousel-indicator
+ * implementations on the homepage; all three are now
+ * `ui/components/CarouselNav`, whose docstring records what each of them got
+ * wrong. Do not reintroduce a per-surface dot or arrow style here — a second
+ * appearance is how the three diverged in the first place.
  */
-export const HERO_CAROUSEL_ARROW = "w-10 h-10 rounded-2xl bg-[color-mix(in_srgb,var(--appkit-color-surface)_85%,transparent)] backdrop-blur-sm shadow-lg border border-[var(--appkit-color-border)] text-[var(--appkit-color-text)] hover:-translate-y-0.5 hover:bg-[var(--appkit-color-surface)] hover:shadow-xl active:scale-95 transition-all duration-200 flex items-center justify-center";
-export const HERO_CAROUSEL_DOT_ACTIVE = "w-8 h-2 !min-h-0 rounded-full bg-[var(--appkit-color-surface)] shadow-sm transition-all duration-500";
-export const HERO_CAROUSEL_DOT_INACTIVE = "w-2 h-2 !min-h-0 rounded-full bg-white/55 shadow-sm transition-all duration-500";
 /** Absolute fill helper — `position: absolute; inset: 0`. */
 export const POSITION_FILL = "absolute inset-0";
 /** Flex centering helper — `flex items-center justify-center`. */

package/dist/features/homepage/constants/section-copy.d.ts

@@ -71,8 +71,10 @@ export declare const SECTION_COPY: {
     readonly featuresPill: "Built for trust";
     readonly featuresLearnMore: "Learn about our security →";
     readonly bannerPrimaryCta: "Shop All Products →";
-    readonly bannerSecondaryCta: "Browse Auctions →";
-    readonly whatsappDescription: "Get deal alerts, auction updates, and exclusive drops before anyone else.";
+    readonly bannerSecondaryCta: "Browse Categories →";
+    /** Eyebrow above the CTA banner headline — replaces a decorative ✨. */
+    readonly bannerEyebrow: "Start here";
+    readonly whatsappDescription: "Get deal alerts, new arrivals, and exclusive drops before anyone else.";
     /**
      * Shown only when `siteSettings.announcementBar` has no message. Was a
      * hardcoded seasonal Pokémon TCG discount, which would have gone out as
@@ -90,18 +92,18 @@ export declare const SECTION_COPY: {
  */
 export declare const WELCOME_TRUST_CHIPS: readonly [{
     readonly key: "delivery";
-    readonly emoji: "🚀";
-    readonly label: "Fast Delivery";
+    readonly iconName: "ship";
+    readonly label: "Fast delivery";
 }, {
     readonly key: "secure";
-    readonly emoji: "🔒";
-    readonly label: "Secure Payments";
+    readonly iconName: "lock";
+    readonly label: "Secure payments";
 }, {
     readonly key: "rating";
-    readonly emoji: "⭐";
-    readonly label: "Buyer Rated";
+    readonly iconName: "review";
+    readonly label: "Buyer rated";
 }, {
     readonly key: "returns";
-    readonly emoji: "↩️";
-    readonly label: "Easy Returns";
+    readonly iconName: "restore";
+    readonly label: "Easy returns";
 }];

package/dist/features/homepage/constants/section-copy.js

@@ -71,8 +71,18 @@ export const SECTION_COPY = {
     featuresPill: "Built for trust",
     featuresLearnMore: "Learn about our security →",
     bannerPrimaryCta: "Shop All Products →",
-    bannerSecondaryCta: "Browse Auctions →",
-    whatsappDescription: "Get deal alerts, auction updates, and exclusive drops before anyone else.",
+    /*
+     * 🛑 Not "Browse Auctions →". The CTA banner is NOT in
+     * `HOMEPAGE_SECTION_LISTING_TYPE`, so unlike the auctions rail it is never
+     * gated — it renders whatever this says on a site running
+     * `listings.listingTypes.auction: false`, which is a button on the homepage
+     * leading to a browse page with nothing in it. The `secondaryHref` default in
+     * CTABannerSection.tsx moved with it; they are one control in two files.
+     */
+    bannerSecondaryCta: "Browse Categories →",
+    /** Eyebrow above the CTA banner headline — replaces a decorative ✨. */
+    bannerEyebrow: "Start here",
+    whatsappDescription: "Get deal alerts, new arrivals, and exclusive drops before anyone else.",
     /**
      * Shown only when `siteSettings.announcementBar` has no message. Was a
      * hardcoded seasonal Pokémon TCG discount, which would have gone out as
@@ -89,8 +99,20 @@ export const SECTION_COPY = {
  * Revisit if a consumer needs different ones.
  */
 export const WELCOME_TRUST_CHIPS = [
-    { key: "delivery", emoji: "🚀", label: "Fast Delivery" },
-    { key: "secure", emoji: "🔒", label: "Secure Payments" },
-    { key: "rating", emoji: "⭐", label: "Buyer Rated" },
-    { key: "returns", emoji: "↩️", label: "Easy Returns" },
+    /*
+     * 🛑 Registry icon keys, not emoji.
+     *
+     * An emoji cannot be sized — no width or height utility reaches a text
+     * character, so it renders at whatever the platform font fallback is, next to
+     * a label that IS sized (Root Cause #80). It is also a different glyph on
+     * every OS, which is the opposite of a design system.
+     *
+     * `🚀` was additionally just wrong: a rocket is not delivery. `ship` is a
+     * truck. Labels are sentence case — Title Case On Four Short Chips reads
+     * dated on its own.
+     */
+    { key: "delivery", iconName: "ship", label: "Fast delivery" },
+    { key: "secure", iconName: "lock", label: "Secure payments" },
+    { key: "rating", iconName: "review", label: "Buyer rated" },
+    { key: "returns", iconName: "restore", label: "Easy returns" },
 ];

package/dist/features/homepage/constants/stat-icons.d.ts

@@ -0,0 +1,12 @@
+import type { LiveStatPreset } from "../schemas/firestore";
+import type { IconKey } from "../../../ui/icons/icon-registry";
+/**
+ * `LiveStatPreset` → the glyph that means it.
+ *
+ * A live stat therefore gets a correct icon with ZERO config: the preset is
+ * already a closed 6-member union, so the icon is derivable from what the stat
+ * measures rather than being a second thing an admin has to fill in and keep
+ * consistent. Declared `Record<LiveStatPreset, IconKey>` so a seventh preset
+ * is a compile error here rather than a silently iconless tile.
+ */
+export declare const STAT_PRESET_ICON: Record<LiveStatPreset, IconKey>;

package/dist/features/homepage/constants/stat-icons.js

@@ -0,0 +1,17 @@
+/**
+ * `LiveStatPreset` → the glyph that means it.
+ *
+ * A live stat therefore gets a correct icon with ZERO config: the preset is
+ * already a closed 6-member union, so the icon is derivable from what the stat
+ * measures rather than being a second thing an admin has to fill in and keep
+ * consistent. Declared `Record<LiveStatPreset, IconKey>` so a seventh preset
+ * is a compile error here rather than a silently iconless tile.
+ */
+export const STAT_PRESET_ICON = {
+    total_listings: "order",
+    verified_sellers: "verify",
+    total_buyers: "user",
+    platform_rating: "review",
+    total_orders: "cart",
+    total_reviews: "message",
+};

package/dist/features/homepage/constants/trust-icon-aliases.d.ts

@@ -0,0 +1,8 @@
+import { type IconKey } from "../../../ui/icons/icon-registry";
+/**
+ * Resolve a stored icon string to a registry key.
+ *
+ * Accepts an already-valid `IconKey` unchanged, so a value authored after the
+ * admin editor moved to a key picker needs no alias entry.
+ */
+export declare function resolveTrustIcon(stored: string | undefined | null): IconKey | undefined;

package/dist/features/homepage/constants/trust-icon-aliases.js

@@ -0,0 +1,75 @@
+import { isIconKey } from "../../../ui/icons/icon-registry.js";
+/**
+ * Stored icon strings → `IconKey`s, for the trust / security / stats tiles.
+ *
+ * ## 🛑 Why an alias map and not a retype
+ *
+ * `TrustIndicator.icon` is a `string` and live documents hold TWO unrelated
+ * spellings of it:
+ *
+ *   - kebab lucide names, from the seed — `"shield-check"`, `"rotate-ccw"`,
+ *     `"message-circle"`;
+ *   - intent slugs, from `section-defaults.ts` — `"secure-payments"`,
+ *     `"fast-delivery"`, `"easy-returns"`, `"support"`.
+ *
+ * Neither set is a valid `IconKey` (the registry is intent-named: `verify`,
+ * `restore`, `message`…), so retyping the field would invalidate every stored
+ * document at once. Mapping instead means existing admin-authored values keep
+ * working and the field stays editable.
+ *
+ * ## 🛑 Why the icon was invisible before this existed
+ *
+ * All three components declared `renderIcon?: (props) => ReactNode` and the
+ * section renderer never passed it — a function prop has no representation in a
+ * Firestore document, so it was unreachable by construction. The result was
+ * four trust tiles rendering the same hardcoded `✓` while four *different*
+ * promises sat beside them, and no icon at all on the stats and security
+ * tiles. The admin editor round-tripped `icon` the whole time and the component
+ * used it only as a React key. Root Cause #51.
+ *
+ * An unmapped value resolves to `undefined` and the tile renders text-only,
+ * which is strictly better than one glyph standing in for everything.
+ */
+const TRUST_ICON_ALIASES = {
+    // Lucide kebab names, as written by the seed and the admin editor.
+    "shield-check": "verify",
+    lock: "lock",
+    "rotate-ccw": "restore",
+    "message-circle": "message",
+    truck: "ship",
+    star: "review",
+    package: "order",
+    "trending-up": "analytics",
+    "help-circle": "help",
+    tag: "deals",
+    flag: "report",
+    // Intent slugs, as written by DEFAULT_TRUST_FEATURES.
+    "secure-payments": "lock",
+    "fast-delivery": "ship",
+    "easy-returns": "restore",
+    support: "help",
+    authenticity: "verify",
+    // Intent slugs, as written by the `features` seed config.
+    escrow: "lock",
+    "verified-sellers": "verify",
+    "scam-registry": "report",
+    "encrypted-data": "lock",
+    encryption: "lock",
+    tls: "lock",
+    rbac: "user",
+    "min-priv": "settings",
+};
+/**
+ * Resolve a stored icon string to a registry key.
+ *
+ * Accepts an already-valid `IconKey` unchanged, so a value authored after the
+ * admin editor moved to a key picker needs no alias entry.
+ */
+export function resolveTrustIcon(stored) {
+    if (!stored)
+        return undefined;
+    const aliased = TRUST_ICON_ALIASES[stored];
+    if (aliased)
+        return aliased;
+    return isIconKey(stored) ? stored : undefined;
+}

package/dist/features/homepage/lib/section-defaults.d.ts

@@ -1,11 +1,26 @@
 /** Static default content used when Firestore section config has no override. */
+import type { IconKey } from "../../../ui/icons/icon-registry";
+/**
+ * 🛑 `iconName` holds a real `IconKey`, not a slug.
+ *
+ * These used to carry intent slugs (`"secure-payments"`, `"fast-delivery"`…)
+ * that nothing resolved, because the component's only icon channel was a
+ * `renderIcon` function prop the section renderer never passed. The slugs are
+ * still accepted from STORED documents via `resolveTrustIcon`, but a default
+ * authored here has no reason to go through an alias — so these are typed.
+ *
+ * `id` is separate from `iconName` because the old shape used the icon string
+ * as the React key, which collides as soon as two tiles share a glyph.
+ */
 export declare const DEFAULT_TRUST_FEATURES: {
-    iconName: string;
+    id: string;
     title: string;
     description: string;
+    iconName?: IconKey;
 }[];
 export declare const DEFAULT_SECURITY_ITEMS: {
     key: string;
     title: string;
     description: string;
+    iconName?: IconKey;
 }[];

package/dist/features/homepage/lib/section-defaults.js

@@ -1,22 +1,38 @@
 /** Static default content used when Firestore section config has no override. */
+/**
+ * 🛑 `iconName` holds a real `IconKey`, not a slug.
+ *
+ * These used to carry intent slugs (`"secure-payments"`, `"fast-delivery"`…)
+ * that nothing resolved, because the component's only icon channel was a
+ * `renderIcon` function prop the section renderer never passed. The slugs are
+ * still accepted from STORED documents via `resolveTrustIcon`, but a default
+ * authored here has no reason to go through an alias — so these are typed.
+ *
+ * `id` is separate from `iconName` because the old shape used the icon string
+ * as the React key, which collides as soon as two tiles share a glyph.
+ */
 export const DEFAULT_TRUST_FEATURES = [
     {
-        iconName: "secure-payments",
+        id: "secure-payments",
+        iconName: "lock",
         title: "Secure Payments",
         description: "Protected payments with transparent order tracking.",
     },
     {
-        iconName: "fast-delivery",
+        id: "fast-delivery",
+        iconName: "ship",
         title: "Fast Delivery",
         description: "Fast shipping with reliable nationwide logistics partners.",
     },
     {
-        iconName: "easy-returns",
+        id: "easy-returns",
+        iconName: "restore",
         title: "Easy Returns",
         description: "Hassle-free returns within the policy window.",
     },
     {
-        iconName: "support",
+        id: "support",
+        iconName: "help",
         title: "24/7 Support",
         description: "Real help from our team across pre and post purchase.",
     },
@@ -24,21 +40,25 @@ export const DEFAULT_TRUST_FEATURES = [
 export const DEFAULT_SECURITY_ITEMS = [
     {
         key: "encryption",
+        iconName: "lock",
         title: "End-to-End Encryption",
         description: "All sensitive data is encrypted in transit and at rest.",
     },
     {
         key: "tls",
+        iconName: "verify",
         title: "TLS 1.3 in Transit",
         description: "Every API call and page load is secured with modern TLS.",
     },
     {
         key: "rbac",
+        iconName: "user",
         title: "Role-Based Access",
         description: "Strict role boundaries keep buyer, seller, and admin data separate.",
     },
     {
         key: "min-priv",
+        iconName: "settings",
         title: "Minimum-Privilege Tokens",
         description: "Short-lived, scoped tokens minimise exposure on every request.",
     },

package/dist/features/homepage/lib/section-renderer.js

@@ -5,6 +5,11 @@ import { cleanTitle, parseWelcomeDescription } from "./section-helpers.js";
 import { DEFAULT_TRUST_FEATURES, DEFAULT_SECURITY_ITEMS } from "./section-defaults.js";
 import { SECTION_TITLE, SECTION_COPY, VIEW_MORE_LABEL, WELCOME_TRUST_CHIPS, } from "../constants/section-copy.js";
 import { FAQ_CATEGORY_LABELS } from "../constants/faq-category-labels.js";
+/* Root Cause #51 — the stored `icon` string had no reader. These resolve it to
+   a registry key so the trust / security / stats tiles render a real glyph
+   instead of one hardcoded ✓ (or nothing at all). */
+import { resolveTrustIcon } from "../constants/trust-icon-aliases.js";
+import { STAT_PRESET_ICON } from "../constants/stat-icons.js";
 import { FAQ_HOMEPAGE_READ_CAP } from "../../faq/constants/read-caps.js";
 import { AnnouncementBar, hashBannerMessage } from "../components/AnnouncementBar.js";
 import { HeroCarousel } from "../components/HeroCarousel.js";
@@ -66,9 +71,26 @@ const SECTION_REGISTRY = {
     },
     welcome: {
         surfaces: ["homepage"],
-        render: ({ config, brand }) => {
+        render: ({ config, brand, sectionData }) => {
             const cfg = config;
-            return (_jsx(WelcomeSection, { title: cleanTitle(cfg?.h1) || SECTION_TITLE.welcome, 
+            /*
+             * Hero imagery, taken from the featured categories' own covers.
+             *
+             * Deterministic — the first five in CONFIGURED order, never shuffled, so
+             * the server and client render the same mosaic (ImageMosaic's header is
+             * explicit about why `Math.random()` is wrong here).
+             *
+             * 🛑 `sectionData.categories` is only populated when the page also has a
+             * `categories` section enabled, because MarketplaceHomepageView gates
+             * each fetch on `activeTypes`. `welcome` is registered as a trigger for
+             * that fetch for exactly this reason; without it the mosaic silently
+             * falls back to the brand panel and nothing says why.
+             */
+            const heroImages = (sectionData.categories ?? [])
+                .map((c) => c.display?.coverImage)
+                .filter((src) => Boolean(src))
+                .slice(0, 5);
+            return (_jsx(WelcomeSection, { heroImages: heroImages, title: cleanTitle(cfg?.h1) || SECTION_TITLE.welcome, 
                 // A real `subtitle` wins; `description` is the legacy source and is
                 // still parsed for documents that only carry it.
                 subtitle: cfg?.subtitle?.trim() || parseWelcomeDescription(cfg?.description), pillLabel: cfg?.pillLabel || SECTION_COPY.welcomePill, showCTA: cfg?.showCTA ?? true, ctaLabel: cfg?.ctaText || SECTION_COPY.welcomePrimaryCta, ctaHref: cfg?.ctaLink || ROUTES.PUBLIC.PRODUCTS, secondaryCtaLabel: cfg?.secondaryCtaText || SECTION_COPY.welcomeSecondaryCta, secondaryCtaHref: cfg?.secondaryCtaLink || ROUTES.PUBLIC.PRODUCTS, trustChips: [...WELCOME_TRUST_CHIPS], brandLogoText: brand?.shortName }));
@@ -103,6 +125,11 @@ const SECTION_REGISTRY = {
                             : `stat-${index}`,
                         label: item.label,
                         value: displayValue,
+                        // Derived from the preset, so a live stat gets a correct icon
+                        // with no extra config — the preset already says what the
+                        // number measures. `iconName` on the config entry wins for a
+                        // static stat, which has no metric to derive from.
+                        iconName: resolveTrustIcon(item.iconName) ?? (item.metric ? STAT_PRESET_ICON[item.metric] : undefined),
                     };
                 })
                 : [];
@@ -165,7 +192,7 @@ const SECTION_REGISTRY = {
             // defaults fill in when none are set. Previously both labels and both
             // hrefs were hardcoded here and `buttons[]` was ignored entirely.
             const [primaryBtn, secondaryBtn] = cfg?.buttons ?? [];
-            return (_jsx(CTABannerSection, { title: cfg?.content?.title || SECTION_TITLE.banner, subtitle: cfg?.content?.subtitle, description: cfg?.content?.description, height: cfg?.height, backgroundImage: cfg?.backgroundImage, primaryLabel: primaryBtn?.text, primaryHref: primaryBtn?.link, secondaryLabel: secondaryBtn?.text, secondaryHref: secondaryBtn?.link }));
+            return (_jsx(CTABannerSection, { title: cfg?.content?.title || SECTION_TITLE.banner, eyebrow: cfg?.content?.eyebrow || SECTION_COPY.bannerEyebrow, subtitle: cfg?.content?.subtitle, description: cfg?.content?.description, height: cfg?.height, backgroundImage: cfg?.backgroundImage, primaryLabel: primaryBtn?.text, primaryHref: primaryBtn?.link, secondaryLabel: secondaryBtn?.text, secondaryHref: secondaryBtn?.link }));
         },
     },
     "trust-indicators": {
@@ -175,8 +202,10 @@ const SECTION_REGISTRY = {
             const configured = (cfg?.indicators ?? [])
                 .filter((ind) => ind?.title?.trim())
                 .map((ind) => ({
-                key: ind.id,
-                iconName: ind.icon,
+                // `id` is the React key; `iconName` is the glyph. These were one
+                // field before, so two indicators sharing an icon collided.
+                id: ind.id,
+                iconName: resolveTrustIcon(ind.icon),
                 title: ind.title,
                 description: ind.description,
             }));
@@ -191,7 +220,13 @@ const SECTION_REGISTRY = {
             // `items` is the real shape; `features: string[]` is the legacy one and
             // becomes title-only cards. Neither reached the component before — it
             // always rendered DEFAULT_SECURITY_ITEMS regardless of config.
-            const configured = cfg?.items?.filter((item) => item?.title?.trim()) ??
+            const configured = cfg?.items
+                ?.filter((item) => item?.title?.trim())
+                // The stored `key` doubles as the icon hint — the seeded items carry
+                // intent slugs (`escrow`, `scam-registry`, `encrypted-data`) that the
+                // alias map resolves, so these tiles get real glyphs with no new
+                // config field. An explicit `iconName` wins when present.
+                .map((item) => ({ ...item, iconName: resolveTrustIcon(item.iconName ?? item.key) })) ??
                 cfg?.features
                     ?.filter((label) => label?.trim())
                     .map((label, index) => ({ key: `feature-${index}`, title: label, description: "" })) ??
@@ -206,7 +241,7 @@ const SECTION_REGISTRY = {
             return (_jsx(WhatsAppCommunitySection, { title: cleanTitle(cfg?.title) || SECTION_TITLE.whatsappCommunity, descriptionHtml: cfg?.description || SECTION_COPY.whatsappDescription, 
                 // No `|| 5000` fallback: inventing a member count the site cannot
                 // verify is a fabricated social-proof number.
-                memberCount: cfg?.memberCount, groupLink: cfg?.groupLink || "https://chat.whatsapp.com/", benefits: cfg?.benefits ?? [], testimonial: cfg?.testimonial, buttonText: cfg?.buttonText }));
+                memberCount: cfg?.memberCount, groupLink: cfg?.groupLink || undefined, benefits: cfg?.benefits ?? [], testimonial: cfg?.testimonial, buttonText: cfg?.buttonText }));
         },
     },
     faq: {
@@ -331,7 +366,12 @@ const SECTION_REGISTRY = {
             const cfg = config;
             if (!cfg?.title || !Array.isArray(cfg.steps) || cfg.steps.length === 0)
                 return null;
-            return (_jsx(HowItWorksSection, { title: cfg.title, subtitle: cfg.subtitle, pillLabel: cfg.pillLabel, ctaLabel: cfg.ctaLabel, ctaLink: cfg.ctaLink, steps: cfg.steps }));
+            return (_jsx(HowItWorksSection, { title: cfg.title, subtitle: cfg.subtitle, pillLabel: cfg.pillLabel, ctaLabel: cfg.ctaLabel, ctaLink: cfg.ctaLink, 
+                /* `cfg.steps[].iconKey` is a loose `string` (it is admin data) while
+                   the component's is an `IconKey`. Resolving rather than casting
+                   means an unrecognised stored value renders a step with no icon
+                   instead of handing `<Icon>` a key it will silently drop. */
+                steps: cfg.steps.map((s) => ({ ...s, iconKey: resolveTrustIcon(s.iconKey) })) }));
         },
     },
     testimonials: {

package/dist/features/homepage/schemas/firestore.d.ts

@@ -4,6 +4,7 @@
  */
 import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 import type { FAQCategory } from "../../faq/types";
+import type { IconKey } from "../../../ui/icons/icon-registry";
 /** Unified background for a slide or card — supports image, video, solid color, or gradient. */
 export interface CarouselBackground {
     type: "image" | "video" | "color" | "gradient";
@@ -304,6 +305,12 @@ export interface StatsSectionConfig {
         collectionQuery?: CollectionQueryMetric;
         /** Optional suffix appended after the live value (e.g. "★", "+"). */
         suffix?: string;
+        /**
+         * Registry icon key. Only needed for a `source: "static"` stat — a live
+         * one derives its glyph from `metric` via STAT_PRESET_ICON, because the
+         * preset already says what the number measures.
+         */
+        iconName?: IconKey;
     }>;
 }
 /**
@@ -361,6 +368,13 @@ export interface FeatureItem {
     key: string;
     title: string;
     description: string;
+    /**
+     * Registry icon key. Optional because the renderer falls back to resolving
+     * `key` through `resolveTrustIcon` — the seeded items carry intent slugs
+     * (`escrow`, `scam-registry`, `encrypted-data`) that already map to a glyph,
+     * so existing documents get icons without being rewritten.
+     */
+    iconName?: IconKey;
 }
 /**
  * `features: string[]` could never reach `SecurityHighlightsSection`, which
@@ -562,8 +576,11 @@ export interface PreOrdersSectionConfig {
 export interface BannerSectionConfig {
     height: "sm" | "md" | "lg" | "xl";
     backgroundImage?: string;
+    /** `eyebrow` is the small uppercase label above the headline — it replaced a
+        hardcoded ✨, which was decoration where one word of context is free. */
     content: {
         title: string;
+        eyebrow?: string;
         subtitle?: string;
         description?: string;
     };
@@ -739,7 +756,7 @@ export interface PromoGridSectionConfig {
     banners: PromoBannerConfigEntry[];
 }
 export type SectionType = "welcome" | "carousel" | "stats" | "trust-indicators" | "categories" | "brands" | "products" | "pre-orders" | "auctions" | "banner" | "features" | "reviews" | "whatsapp-community" | "faq" | "blog-articles" | "newsletter" | "stores" | "events" | "social-feed" | "custom-cards" | "google-reviews" | "featured-bundles" | "prize-draws" | "event-raffles" | "collection-cards" | "how-it-works" | "testimonials" | "promo-grid";
-export type SectionConfig = CarouselSectionConfig | WelcomeSectionConfig | StatsSectionConfig | TrustIndicatorsSectionConfig | CategoriesSectionConfig | BrandsSectionConfig | ProductsSectionConfig | PreOrdersSectionConfig | AuctionsSectionConfig | BannerSectionConfig | FeaturesSectionConfig | ReviewsSectionConfig | WhatsAppCommunitySectionConfig | FAQSectionConfig | BlogArticlesSectionConfig | NewsletterSectionConfig | StoresSectionConfig | EventsSectionConfig | SocialFeedSectionConfig | CustomCardsSectionConfig | GoogleReviewsSectionConfig | FeaturedBundlesSectionConfig | PrizeDrawsSectionConfig | EventRafflesSectionConfig | CollectionCardsSectionConfig;
+export type SectionConfig = CarouselSectionConfig | WelcomeSectionConfig | StatsSectionConfig | TrustIndicatorsSectionConfig | CategoriesSectionConfig | BrandsSectionConfig | ProductsSectionConfig | PreOrdersSectionConfig | AuctionsSectionConfig | BannerSectionConfig | FeaturesSectionConfig | ReviewsSectionConfig | WhatsAppCommunitySectionConfig | FAQSectionConfig | BlogArticlesSectionConfig | NewsletterSectionConfig | StoresSectionConfig | EventsSectionConfig | SocialFeedSectionConfig | CustomCardsSectionConfig | GoogleReviewsSectionConfig | FeaturedBundlesSectionConfig | PrizeDrawsSectionConfig | EventRafflesSectionConfig | CollectionCardsSectionConfig | HowItWorksSectionConfig | TestimonialsSectionConfig | PromoGridSectionConfig;
 /**
  * Which page a section row belongs to.
  *

package/dist/features/layout/AppLayoutShell.js

@@ -20,6 +20,7 @@ import { useVisualViewportInset } from "../../react/hooks/useVisualViewportInset
 import { isBuyerUser } from "../auth/role-predicates.js";
 import { NavbarWithSettings } from "./NavbarWithSettings.js";
 import SideActionDock from "./SideActionDock.js";
+import BottomActions from "./BottomActions.js";
 import { BottomChrome } from "./BottomChrome.js";
 import { AutoBreadcrumbs } from "./AutoBreadcrumbs.js";
 import { BottomNavbar } from "./BottomNavbar.js";
@@ -259,5 +260,5 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
                             // is 0 below `lg` and 0 whenever no bar is published, so this
                             // reserves exactly nothing until there is something to reserve —
                             // which is why it can be unconditional rather than route-gated.
-                            className: "w-full flex-1 flex flex-col pt-[var(--top-chrome-height,0px)] transition-[padding-top] duration-300 ease-out", children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomChrome, { children: null }), _jsx(SideActionDock, {}), showBottomNav && (_jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
+                            className: "w-full flex-1 flex flex-col pt-[var(--top-chrome-height,0px)] transition-[padding-top] duration-300 ease-out", children: _jsx(Div, { padding: "y-lg", className: `flex-1 ${contentClassName ?? "mx-auto w-full max-w-screen-xl px-[var(--appkit-space-5)] md:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]"}`, children: children }) })] }), _jsx(BackToTop, {}), _jsx(FooterLayout, { ...footer }), _jsx(BottomChrome, { children: _jsx(BottomActions, {}) }), _jsx(SideActionDock, {}), showBottomNav && (_jsx(BottomNavbar, { user: user, userId: userId, homeHref: homeHref, shopHref: shopHref, cartHref: cartHref, wishlistHref: wishlistHref, profileHref: profileHref, loginHref: loginHref, onSearchToggle: () => setSearchOpen((prev) => !prev), navItems: navItems, onMoreToggle: handleTogglePublicSidebar })), _jsx(UnsavedChangesModal, {})] }) }));
 }

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

@@ -0,0 +1 @@
+export default function BottomActions(): import("react").JSX.Element | null;