@mohasinac/appkit 4.52.5 → 4.53.1

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

@@ -38,7 +38,7 @@ function saveLocalDismissal(message) {
         void normalizeError(_err); /* quota exceeded — ignore */
     }
 }
-export function AnnouncementBar({ message, link, className = "", onDismiss, overlay = false }) {
+export function AnnouncementBar({ message, link, className = "", onDismiss }) {
     const { user } = useAuth();
     const bannerHash = hashBannerMessage(message);
     const userAlreadyDismissed = !!user?.dismissedBannerHash && user.dismissedBannerHash === bannerHash;
@@ -56,32 +56,26 @@ export function AnnouncementBar({ message, link, className = "", onDismiss, over
     if (dismissed)
         return null;
     /*
-     * 🛑 THE OVERLAY IS md AND UP ONLY — IT PAINTED OVER THE HERO HEADING ON
-     * EVERY PHONE WIDTH.
+     * 🛑 THE `overlay` PROP IS GONE — DO NOT REINTRODUCE IT.
      *
-     * `absolute` reserves no space, which is the whole point of the overlay: the
-     * hero's own top padding is sized to sit a ONE-LINE banner over it. A real
-     * announcement wraps on a narrow screen, grows downward, and there is
-     * nothing to stop it.
-     *
-     * Measured on production against the live announcement, against the <h1>:
+     * It rendered this bar `absolute inset-x-0 top-0` over the homepage's first
+     * section, which reserves no space by design. A banner that reserves no space
+     * paints on whatever is beneath it the moment it is taller than the padding
+     * someone sized for it. Measured on production against the hero <h1>:
      *
      *   320px → 30px overlap      768px → 10px clear
      *   390px → 10px overlap     1280px → 10px clear
      *   430px → 10px overlap
      *
-     * So it was every phone width and no tablet or desktop width — which is why
-     * it survived: the breakpoints people check it at are the ones where the
-     * message still fits on one line.
+     * That was patched once by making the overlay `md:` and up, which fixed the
+     * phone widths and left the mechanism in place — a one-line message at a
+     * width nobody checks is one long announcement away from the same bug.
      *
-     * Below `md` it is an ordinary in-flow bar that pushes the hero down, with a
-     * SOLID background (the translucent + blur treatment only reads as
-     * deliberate when there is artwork behind it). From `md` up, the designed
-     * overlay is unchanged.
+     * The bar now renders in normal flow, portalled above the sticky header via
+     * `TopBannerPortal`. It pushes the page down by exactly its own height at
+     * every width, so there is nothing to overlap and no breakpoint to tune.
      */
-    const positionCls = overlay
-        ? "relative md:absolute inset-x-0 top-0 z-20 bg-primary-700 md:bg-primary-700/85 md:backdrop-blur-sm"
-        : "relative left-1/2 right-1/2 w-screen -translate-x-1/2 bg-primary-700";
+    const positionCls = "relative w-full bg-primary-700";
     return (_jsx(Div, { className: `${positionCls} transition-opacity duration-200 ${mounted ? "opacity-100" : "opacity-0"} ${className}`, role: "banner", children: _jsx(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: _jsxs(Row, { textWeight: "medium", textSize: "sm", className: "relative text-left text-white", padding: "y-xs", align: "center", justify: "start", children: [link ? (_jsx(TextLink, { href: link, className: "text-white underline", children: message })) : (_jsx(Span, { children: message })), _jsx(IconButton, { type: "button", onClick: () => {
                             saveLocalDismissal(message);
                             onDismiss?.(bannerHash);

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

@@ -1,13 +1,35 @@
 import type { CollectionCardsSectionConfig } from "../schemas/firestore";
+import type { CategoryItem } from "../../categories/types";
+import type { StoreListItem } from "../../stores/types";
 export interface CollectionCardsSectionProps {
     config: CollectionCardsSectionConfig;
+    /**
+     * Pre-fetched items for the entry types that are actually wired — see the
+     * module docstring below for which ones and why those three specifically.
+     */
+    sectionData?: {
+        categories?: CategoryItem[];
+        brands?: CategoryItem[];
+        stores?: StoreListItem[];
+    };
 }
 /**
- * Renders a single homepage strip that mixes multiple resource types (products,
- * stores, blog, etc.) — driven entirely from config.
+ * Renders a single homepage strip that mixes multiple resource types
+ * (products, stores, blog, etc.), driven entirely from config.
  *
- * Each entry's data fetch wires into the existing per-resource repositories.
- * Until the data wiring lands the section renders the configured collection
- * tabs + a placeholder, exercising the schema/admin plumbing end-to-end.
+ * 🛑 `categories` / `brands` / `stores` entries render REAL data as of
+ * 2026-10-19 — reusing `sectionData` that `MarketplaceHomepageView` already
+ * fetches for the dedicated `categories`/`brands`/`stores` sections, so this
+ * costs zero extra round-trips (Rule #6). Those three were chosen first
+ * because they are the PERMANENT axes: populated independently of the
+ * product catalogue's size, so a `collection-cards` section built from them
+ * can never go empty the way a `"products"`/`"auctions"` entry could.
+ *
+ * Every other entry type (`products`, `auctions`, `pre-orders`, `events`,
+ * `blog-posts`, `reviews`) still renders the honest placeholder — a real
+ * "not wired yet" state is correct here, not a bug to paper over with
+ * fabricated data, and the earlier revision's "data wiring lands with the
+ * bundle/raffle work" message survives per-entry rather than as a blanket
+ * claim about the whole section.
  */
-export declare function CollectionCardsSection({ config, }: CollectionCardsSectionProps): Promise<import("react").JSX.Element | null>;
+export declare function CollectionCardsSection({ config, sectionData, }: CollectionCardsSectionProps): Promise<import("react").JSX.Element | null>;

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

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link.js";
-import { Container, Heading, Row, Section, Span, Stack, Text, } from "../../../ui/index.js";
+import { Container, Div, Grid, Heading, Row, Section, Span, Stack, Text, } from "../../../ui/index.js";
+import { MediaImage } from "../../media/MediaImage.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
 const DEFAULT_ITEMS_PER_ROW = 4;
 const DEFAULT_MAX_ITEMS = 12;
 function entryLabel(entry) {
@@ -19,14 +21,25 @@ function entryLabel(entry) {
     }
 }
 /**
- * Renders a single homepage strip that mixes multiple resource types (products,
- * stores, blog, etc.) — driven entirely from config.
+ * Renders a single homepage strip that mixes multiple resource types
+ * (products, stores, blog, etc.), driven entirely from config.
  *
- * Each entry's data fetch wires into the existing per-resource repositories.
- * Until the data wiring lands the section renders the configured collection
- * tabs + a placeholder, exercising the schema/admin plumbing end-to-end.
+ * 🛑 `categories` / `brands` / `stores` entries render REAL data as of
+ * 2026-10-19 — reusing `sectionData` that `MarketplaceHomepageView` already
+ * fetches for the dedicated `categories`/`brands`/`stores` sections, so this
+ * costs zero extra round-trips (Rule #6). Those three were chosen first
+ * because they are the PERMANENT axes: populated independently of the
+ * product catalogue's size, so a `collection-cards` section built from them
+ * can never go empty the way a `"products"`/`"auctions"` entry could.
+ *
+ * Every other entry type (`products`, `auctions`, `pre-orders`, `events`,
+ * `blog-posts`, `reviews`) still renders the honest placeholder — a real
+ * "not wired yet" state is correct here, not a bug to paper over with
+ * fabricated data, and the earlier revision's "data wiring lands with the
+ * bundle/raffle work" message survives per-entry rather than as a blanket
+ * claim about the whole section.
  */
-export async function CollectionCardsSection({ config, }) {
+export async function CollectionCardsSection({ config, sectionData, }) {
     const title = config.title ?? "Featured Collections";
     const subtitle = config.subtitle;
     const collections = Array.isArray(config.collections) ? config.collections : [];
@@ -37,5 +50,27 @@ export async function CollectionCardsSection({ config, }) {
     if (collections.length === 0) {
         return null;
     }
-    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), showTabs ? (_jsx(Row, { gap: "sm", wrap: true, children: collections.slice(0, 3).map((entry, idx) => (_jsx(Span, { border: "default", padding: "x-sm", className: "py-[0.25rem]", rounded: "full", color: "muted", size: "xs", weight: "medium", children: entryLabel(entry) }, `${entry.type}-${idx}`))) })) : null, _jsxs(Stack, { align: "start", gap: "sm", className: "border-dashed text-left", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Mixed collection rendering (", collections.length, "/3 collection", collections.length === 1 ? "" : "s", ", up to ", maxItems, " items,", " ", itemsPerRow, " per row) \u2014 data wiring lands with the bundle/raffle work."] }), cta ? (_jsxs(Link, { href: cta.href, className: "text-[length:var(--appkit-text-sm)] font-medium text-primary hover:underline", children: [cta.label, " \u2192"] })) : null] })] }) }) }));
+    const wiredEntries = collections.filter((e) => e.type === "categories" || e.type === "brands" || e.type === "stores");
+    const unwiredEntries = collections.filter((e) => e.type !== "categories" && e.type !== "brands" && e.type !== "stores");
+    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), showTabs ? (_jsx(Row, { gap: "sm", wrap: true, children: collections.slice(0, 3).map((entry, idx) => (_jsx(Span, { border: "default", padding: "x-sm", className: "py-[0.25rem]", rounded: "full", color: "muted", size: "xs", weight: "medium", children: entryLabel(entry) }, `${entry.type}-${idx}`))) })) : null, wiredEntries.map((entry, idx) => {
+                        const rows = entry.type === "categories"
+                            ? (sectionData?.categories ?? [])
+                                .slice(0, entry.limit ?? maxItems)
+                                .map((c) => ({ slug: c.slug, name: c.name, image: c.display?.coverImage }))
+                            : entry.type === "brands"
+                                ? (sectionData?.brands ?? [])
+                                    .slice(0, entry.limit ?? maxItems)
+                                    .map((b) => ({ slug: b.slug, name: b.name, image: b.display?.coverImage }))
+                                : (sectionData?.stores ?? [])
+                                    .slice(0, entry.limit ?? maxItems)
+                                    .map((s) => ({ slug: s.storeSlug, name: s.storeName, image: s.storeLogoURL }));
+                        if (rows.length === 0)
+                            return null;
+                        const hrefFor = (slug) => entry.type === "categories"
+                            ? String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug))
+                            : entry.type === "brands"
+                                ? String(ROUTES.PUBLIC.BRAND_DETAIL(slug))
+                                : String(ROUTES.PUBLIC.STORE_DETAIL(slug));
+                        return (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: entryLabel(entry) }), _jsx(Grid, { cols: "categoryCards", gap: "md", children: rows.map((row) => (_jsx(Link, { href: hrefFor(row.slug), className: "group rounded-xl border border-[var(--appkit-color-border)] transition-all hover:border-primary-300 hover:shadow-sm dark:hover:border-primary-600", children: _jsxs(Stack, { align: "center", gap: "xs", padding: "sm", children: [_jsx(Div, { className: "h-16 w-16", rounded: "lg", overflow: "hidden", children: _jsx(MediaImage, { src: row.image, alt: row.name, size: "thumbnail" }) }), _jsx(Text, { size: "xs", weight: "medium", className: "line-clamp-2", children: row.name })] }) }, row.slug))) })] }, `${entry.type}-${idx}`));
+                    }), unwiredEntries.length > 0 && (_jsx(Stack, { align: "start", gap: "sm", className: "border-dashed text-left", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: _jsxs(Text, { size: "sm", color: "muted", children: [unwiredEntries.map(entryLabel).join(", "), " \u2014 up to ", maxItems, " ", "items, ", itemsPerRow, " per row when wired \u2014 data wiring lands with the bundle/raffle work."] }) })), cta ? (_jsxs(Link, { href: cta.href, className: "text-[length:var(--appkit-text-sm)] font-medium text-primary hover:underline", children: [cta.label, " \u2192"] })) : null] }) }) }));
 }

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

@@ -1,12 +1,23 @@
 import React from "react";
+import type { IconKey } from "../../../ui";
+/**
+ * Promoted to a registered `SectionType` ("how-it-works") 2026-10-19 — see
+ * `HowItWorksSectionConfig` in `schemas/firestore.ts`, which this prop shape
+ * mirrors exactly (Firestore config must be JSON-serialisable; a function
+ * value cannot round-trip through a document write).
+ *
+ * `renderIcon?: (props) => ReactNode` was the blocker: a function prop has no
+ * representation in a Firestore document. Replaced with `iconKey?: IconKey`,
+ * rendered through the shared `<Icon>` registry primitive (Root Cause #80) —
+ * the same indirection `TrustBadge.iconKey` already uses for this exact
+ * problem. `accentFrom` is dropped: declared on the old type, never read
+ * anywhere in this component.
+ */
 export interface HowItWorksStep {
     number: number;
     title: string;
     desc: string;
-    renderIcon?: (props: {
-        className?: string;
-    }) => React.ReactNode;
-    accentFrom?: string;
+    iconKey?: IconKey;
     iconColor?: string;
     iconBg?: string;
     badgeBg?: string;
@@ -16,8 +27,14 @@ export interface HowItWorksSectionProps {
     subtitle?: string;
     pillLabel?: string;
     ctaLabel?: string;
-    onCtaClick?: () => void;
+    /**
+     * A link, not a handler — `onCtaClick?: () => void` could not survive a
+     * Firestore round-trip either. Renders as an `<Anchor>`, matching how every
+     * other promoted section's CTA resolves (`EventRafflesSectionConfig`'s
+     * `cta`, `FeaturedBundlesSectionConfig`'s `viewMoreLabel` pattern, etc.).
+     */
+    ctaLink?: string;
     steps: HowItWorksStep[];
     className?: string;
 }
-export declare function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className, }: HowItWorksSectionProps): React.JSX.Element;
+export declare function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, ctaLink, steps, className, }: HowItWorksSectionProps): React.JSX.Element;

package/dist/features/homepage/components/HowItWorksSection.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, THEMED_TEXT_SECONDARY } from "../../../_internal/shared/styles/themed.js";
-import { Button, Div, Grid, Heading, Row, Section, Span, Text } from "../../../ui/index.js";
+import { Anchor, Button, Div, Grid, Heading, Icon, Row, Section, Span, Text } from "../../../ui/index.js";
 // --- Constants ---------------------------------------------------------------
 const CLS_VISIBLE = "opacity-100 translate-y-0";
 const STEP_DELAYS = ["delay-0", "delay-150", "delay-300", "delay-[450ms]"];
@@ -16,10 +16,10 @@ function StepCard({ step, visible, delayClass, }) {
             "transition-all duration-300",
             delayClass,
             visible ? CLS_VISIBLE : "opacity-0 translate-y-8",
-        ].join(" "), "data-section": "howitworkssection-div-340", children: [_jsx(Span, { gradient: "brand", size: "7xl", family: "display", className: "absolute top-4 right-5 opacity-10 select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx(Row, { textWeight: "bold", textSize: "sm", className: `relative z-10 w-10 h-10 ${badgeBg} text-white mb-5`, align: "center", justify: "center", rounded: "full", shadow: "md", children: step.number }), step.renderIcon && (_jsx(Row, { className: `relative z-10 w-14 h-14 ${iconBg} mb-4 border border-white/80 dark:border-[var(--appkit-color-border)]`, align: "center", justify: "center", rounded: "2xl", children: _jsx(Span, { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 ${THEMED_TEXT_PRIMARY} mb-2`, size: "base", weight: "semibold", children: step.title }), _jsx(Text, { className: `relative z-10 ${THEMED_TEXT_SECONDARY} leading-relaxed`, size: "sm", children: step.desc })] }));
+        ].join(" "), "data-section": "howitworkssection-div-340", children: [_jsx(Span, { gradient: "brand", size: "7xl", family: "display", className: "absolute top-4 right-5 opacity-10 select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx(Row, { textWeight: "bold", textSize: "sm", className: `relative z-10 w-10 h-10 ${badgeBg} text-white mb-5`, align: "center", justify: "center", rounded: "full", shadow: "md", children: step.number }), step.iconKey && (_jsx(Row, { className: `relative z-10 w-14 h-14 ${iconBg} mb-4 border border-white/80 dark:border-[var(--appkit-color-border)]`, align: "center", justify: "center", rounded: "2xl", children: _jsx(Span, { className: `${iconColor}`, "aria-hidden": "true", children: _jsx(Icon, { name: step.iconKey, size: "lg" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 ${THEMED_TEXT_PRIMARY} mb-2`, size: "base", weight: "semibold", children: step.title }), _jsx(Text, { className: `relative z-10 ${THEMED_TEXT_SECONDARY} leading-relaxed`, size: "sm", children: step.desc })] }));
 }
 // --- Section -----------------------------------------------------------------
-export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className = "", }) {
+export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, ctaLink, steps, className = "", }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
     const sectionRef = useRef(null);
     const [visible, setVisible] = useState(false);
@@ -36,5 +36,5 @@ export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaC
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `${className}`, surface: "muted", padding: "xl", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: `text-left mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: [pillLabel && (_jsx(Div, { layout: "inline-flex", gap: "2", align: "center", textWeight: "medium", textSize: "xs", className: /* audit-variant-ok: colour+alpha border (primary-500/30); the `border` variant takes a token name, not an rgba step */ "mb-4 border border-primary-500/30 bg-primary-500/10 py-[0.375rem] tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", padding: "x-md", rounded: "full", children: pillLabel })), _jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary} max-w-xl`, size: "base", children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delayClass: STEP_DELAYS[Math.min(i, STEP_DELAYS.length - 1)] }, step.number))) }), ctaLabel && onCtaClick && (_jsx(Div, { className: `text-left transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `${className}`, surface: "muted", padding: "xl", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: `text-left mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: [pillLabel && (_jsx(Div, { layout: "inline-flex", gap: "2", align: "center", textWeight: "medium", textSize: "xs", className: /* audit-variant-ok: colour+alpha border (primary-500/30); the `border` variant takes a token name, not an rgba step */ "mb-4 border border-primary-500/30 bg-primary-500/10 py-[0.375rem] tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", padding: "x-md", rounded: "full", children: pillLabel })), _jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary} max-w-xl`, size: "base", children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delayClass: STEP_DELAYS[Math.min(i, STEP_DELAYS.length - 1)] }, step.number))) }), ctaLabel && ctaLink && (_jsx(Div, { className: `text-left transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", asChild: true, children: _jsx(Anchor, { href: ctaLink, tone: "none", children: ctaLabel }) }) }))] }) }));
 }

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

@@ -2,6 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import { Div, Main } from "../../../ui/index.js";
+// Deep import, not the `ui` barrel and not `@mohasinac/appkit/client`: this is a
+// Server Component, so a runtime value from the client entry would arrive as a
+// client-reference proxy (Root Cause #76). Rendering it as JSX is the supported
+// boundary; importing it from its defining module is Root Cause #18.
+import { TopBannerPortal } from "../../../ui/components/TopBannerPortal.js";
 import { carouselRepository } from "../../../repositories/index.js";
 // Both are React.cache wrappers around a single repository call, shared with
 // other readers in the same request tree (the locale layout for settings,
@@ -185,5 +190,5 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
             : undefined,
     };
     const carouselSlides = toCarouselSlides(slides);
-    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(AnnouncementBar, { overlay: true, message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData, brand))] }) }));
+    return (_jsx(Main, { children: _jsxs(Div, { className: "relative", children: [showAnnouncement ? (_jsx(TopBannerPortal, { children: _jsx(AnnouncementBar, { message: announcementMessage, link: siteSettings?.announcementBar?.link, onDismiss: onBannerDismiss }) })) : null, orderedSections.map((section) => renderSection(section, adSlots, newsletterFormSlot ?? null, faqItems, carouselSlides, liveStats, sectionData, brand))] }) }));
 }

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

@@ -1,6 +1,35 @@
-import type { PromoBanner } from "../types";
+/** Hard cap — this layout only has slots for 4 (one hero tile + three). */
+export declare const PROMO_GRID_MAX_BANNERS: 4;
+/**
+ * Promoted to a registered `SectionType` ("promo-grid") 2026-10-19 — see
+ * `PromoGridSectionConfig` in `schemas/firestore.ts`.
+ *
+ * Two fixes made in the same pass:
+ * 1. `resolveMediaUrl(banner.image)!` was a non-null assertion on a function
+ *    that genuinely returns `undefined` for an empty slug — an admin saving a
+ *    banner with no image picked would crash `next/image`. The image slot now
+ *    simply renders nothing: the `<Link>` already carries its own dark
+ *    background and the gradient + caption paint on top regardless, so a
+ *    placeholder tile would have been a second element doing what the card
+ *    behind it already does.
+ * 2. `--dark-section-alt` / `--dark-section-card` / `--color-red` /
+ *    `--font-bangers` were undefined anywhere in the codebase — this
+ *    component would have rendered on a transparent background with no
+ *    borders. The section now uses the `media-dark` SURFACE TOKEN (the real
+ *    theme-invariant dark preset), plus `text-error` / `family="display"`.
+ *    It is dark in every theme by design — see `PromoGridSectionConfig`'s
+ *    docstring for why no admin background field was added (Root Cause #67).
+ */
+export interface PromoBannerConfig {
+    id: string;
+    title: string;
+    ctaLabel: string;
+    ctaUrl: string;
+    /** A media slug (`/media/<id>`), not a raw URL — resolved via `resolveMediaUrl`. */
+    image: string;
+}
 export interface PromoGridProps {
-    banners: PromoBanner[];
+    banners: PromoBannerConfig[];
     /** Eyebrow label above the section heading. Default: "LIMITED TIME". */
     eyebrow?: string;
     /** Section heading. Default: "HOT DEALS & PROMOS". */

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

@@ -6,10 +6,19 @@ import { resolveMediaUrl } from "../../../utils/media-url.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
+/** Hard cap — this layout only has slots for 4 (one hero tile + three). */
+export const PROMO_GRID_MAX_BANNERS = 4;
 export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DEALS & PROMOS", }) {
     if (banners.length === 0)
         return null;
-    return (_jsx(Section, { paddingY: "y-4xl", className: "bg-[var(--dark-section-alt)] [border-top:1px_solid_rgba(255,255,255,0.06)] [border-bottom:1px_solid_rgba(255,255,255,0.06)]", children: _jsxs(Div, { className: "mx-auto max-w-7xl", padding: "x-md", children: [_jsx(Row, { wrap: true, align: "end", justify: "between", gap: "sm", className: "mb-7 gap-y-2", children: _jsxs(Div, { children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-widest text-[var(--color-red)] tracking-[0.18em]", size: "xs", children: eyebrow }), _jsx(Heading, { level: 2, className: "[font-family:var(--font-bangers,Bangers,cursive)] text-[clamp(1.6rem,4vw,2.4rem)] tracking-[0.08em] text-white leading-none", children: heading })] }) }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: banners.slice(0, 4).map((banner, i) => (_jsxs(Link, { href: banner.ctaUrl, className: `group relative block overflow-hidden bg-[var(--dark-section-card)] ${i === 0 ? "sm:row-span-2 min-h-[clamp(220px,32vh,480px)]" : "min-h-[clamp(130px,16vh,240px)]"}`, children: [_jsx(Image, { src: resolveMediaUrl(banner.image), alt: banner.title, fill: true, className: "object-cover transition-transform duration-500 group-hover:scale-105", sizes: i === 0
-                                    ? "(max-width: 640px) 100vw, 40vw"
-                                    : "(max-width: 640px) 50vw, 30vw" }), _jsx(Div, { className: `absolute inset-0 ${i === 0 ? "[background:linear-gradient(to_top,rgba(0,0,0,0.9)_0%,rgba(0,0,0,0.3)_50%,transparent_100%)]" : "[background:linear-gradient(to_top,rgba(0,0,0,0.85)_0%,rgba(0,0,0,0.15)_100%)]"}` }), _jsx(Div, { className: "absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-300 group-hover:opacity-100 ring-2 ring-[var(--color-yellow)] ring-inset" }), _jsxs(Div, { className: `absolute bottom-0 left-0 right-0 ${__P.p4}`, children: [_jsx(Text, { className: `leading-tight [font-family:var(--font-bangers,Bangers,cursive)] tracking-[0.06em] text-white ${i === 0 ? "text-[1.35rem]" : "text-[1rem]"}`, children: banner.title }), _jsxs(Span, { layout: "inline-flex", gap: "xs", className: "mt-1 font-black uppercase text-[var(--color-yellow)]", size: "xs", children: [banner.ctaLabel, " \u2192"] })] })] }, banner.id))) })] }) }));
+    return (_jsx(Section, { paddingY: "y-4xl", 
+        // `media-dark` IS the theme-invariant dark surface token (bg-zinc-900)
+        // — exactly what this always-dark section needs, so no raw className
+        // colour and no suppression marker.
+        surface: "media-dark", className: "border-t border-b border-white/[0.06]", children: _jsxs(Div, { className: "mx-auto max-w-7xl", padding: "x-md", children: [_jsx(Row, { wrap: true, align: "end", justify: "between", gap: "sm", className: "mb-7 gap-y-2", children: _jsxs(Div, { 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 text-white", size: "xl", mdSize: "2xl", weight: "bold", children: heading })] }) }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: banners.slice(0, PROMO_GRID_MAX_BANNERS).map((banner, i) => {
+                        const resolvedSrc = resolveMediaUrl(banner.image);
+                        return (_jsxs(Link, { href: banner.ctaUrl, className: `group relative block overflow-hidden bg-zinc-900 ${i === 0 ? "sm:row-span-2 min-h-[clamp(220px,32vh,480px)]" : "min-h-[clamp(130px,16vh,240px)]"}`, children: [resolvedSrc ? (_jsx(Image, { src: resolvedSrc, alt: banner.title, fill: true, className: "object-cover transition-transform duration-500 group-hover:scale-105", sizes: i === 0
+                                        ? "(max-width: 640px) 100vw, 40vw"
+                                        : "(max-width: 640px) 50vw, 30vw" })) : null, _jsx(Div, { className: `absolute inset-0 ${i === 0 ? "[background:linear-gradient(to_top,rgba(0,0,0,0.9)_0%,rgba(0,0,0,0.3)_50%,transparent_100%)]" : "[background:linear-gradient(to_top,rgba(0,0,0,0.85)_0%,rgba(0,0,0,0.15)_100%)]"}` }), _jsx(Div, { className: "absolute inset-0 pointer-events-none opacity-0 transition-opacity duration-300 group-hover:opacity-100 ring-2 ring-[var(--color-yellow)] ring-inset" }), _jsxs(Div, { className: `absolute bottom-0 left-0 right-0 ${__P.p4}`, children: [_jsx(Text, { family: "display", className: `leading-tight tracking-[0.06em] text-white ${i === 0 ? "text-[1.35rem]" : "text-[1rem]"}`, children: banner.title }), _jsxs(Span, { layout: "inline-flex", gap: "xs", className: "mt-1 font-black uppercase text-[var(--color-yellow)]", size: "xs", children: [banner.ctaLabel, " \u2192"] })] })] }, banner.id));
+                    }) })] }) }));
 }

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

@@ -1,6 +1,38 @@
-import type { Testimonial } from "../types";
+/**
+ * Promoted to a registered `SectionType` ("testimonials") 2026-10-19 — see
+ * `TestimonialsSectionConfig` in `schemas/firestore.ts`, which this prop shape
+ * mirrors (Firestore config must be a plain serialisable object).
+ *
+ * Three things fixed in the same pass, all required before this could render
+ * correctly on a real page rather than just compile:
+ *
+ * 1. **Testimonials are now INLINE in config**, not a read from the
+ *    `testimonials` collection shape (`Testimonial` in `types/index.ts`, with
+ *    `featured`/`sortOrder`/`active`). Those three fields are collection-row
+ *    housekeeping with no meaning inside an ordered config array — the config
+ *    IS the order, and every entry in it is already "featured" by virtue of
+ *    being configured. `avatarUrl` is dropped too: declared on the old type,
+ *    never rendered by this component.
+ * 2. **It is not a carousel** — no autoplay, no arrows, no dots, just a
+ *    horizontally-scrolling wrapped row. So the config carries no
+ *    `autoScroll`/`scrollInterval`/`loop` fields; adding them would be
+ *    `NO-RENDERER` dead weight from day one.
+ * 3. **Every colour/font var below was undefined anywhere in the codebase**
+ *    (`--section-bg`, `--card-bg`, `--card-border`, `--section-border`,
+ *    `--section-title-color`, `--text-secondary`, `--color-red`,
+ *    `--font-bangers`) — this component would have rendered with a
+ *    transparent background, no borders and the browser's default font had
+ *    it ever shipped. Migrated to the real `--appkit-*` token set (Root Cause
+ *    #21); `--color-yellow` was the one survivor (a real token, `tokens.css`).
+ */
+export interface TestimonialConfigItem {
+    id: string;
+    name: string;
+    rating: 1 | 2 | 3 | 4 | 5;
+    text: string;
+}
 export interface TestimonialsCarouselProps {
-    testimonials: Testimonial[];
+    testimonials: TestimonialConfigItem[];
     /** Eyebrow label. Default: "COLLECTOR REVIEWS". */
     eyebrow?: string;
     /** Section heading. Default: "WHAT OUR COLLECTORS SAY". */

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", className: "bg-[var(--section-bg)] [border-top:var(--section-border)] [border-bottom:var(--section-border)] 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-[var(--color-red)] tracking-[0.18em]", size: "xs", children: eyebrow }), _jsx(Heading, { level: 2, className: "[font-family:var(--font-bangers,Bangers,cursive)] text-[clamp(1.8rem,4vw,2.8rem)] tracking-[0.08em] text-[var(--section-title-color)] leading-none", 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", className: "shrink-0 w-[clamp(260px,28vw,360px)] bg-[var(--card-bg)] [border:var(--card-border)]", shadow: "card", gap: "3", children: [_jsx(StarRating, { value: t.rating, readOnly: true, size: "sm" }), _jsxs(Text, { className: "flex-1 leading-relaxed text-[var(--text-secondary)]", size: "sm", 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 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))) })] }) }));
 }

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

@@ -1,24 +1,13 @@
-export { HeroSection } from "./HeroSection";
 export type { CharacterHotspotProps } from "./CharacterHotspot";
 export { CharacterHotspot } from "./CharacterHotspot";
 export type { CharacterHotspotFormProps } from "./CharacterHotspotForm";
 export { CharacterHotspotForm } from "./CharacterHotspotForm";
-export type { HeroBannerProps } from "./HeroBanner";
-export { HeroBanner } from "./HeroBanner";
 export type { HeroCarouselProps } from "./HeroCarousel";
 export { HeroCarousel } from "./HeroCarousel";
 export type { PromoGridProps } from "./PromoGrid";
 export { PromoGrid } from "./PromoGrid";
-export type { TrustBadgesProps } from "./TrustBadges";
-export { TrustBadges } from "./TrustBadges";
 export type { TestimonialsCarouselProps } from "./TestimonialsCarousel";
 export { TestimonialsCarousel } from "./TestimonialsCarousel";
-export type { BeforeAfterCardProps } from "./BeforeAfterCard";
-export { BeforeAfterCard } from "./BeforeAfterCard";
-export type { NewsletterBannerProps } from "./NewsletterBanner";
-export { NewsletterBanner } from "./NewsletterBanner";
-export { HomepageView } from "./HomepageView";
-export type { HomepageViewProps } from "./HomepageView";
 export { MarketplaceHomepageView } from "./MarketplaceHomepageView";
 export type { MarketplaceHomepageViewProps, MarketplaceHomepageViewAdSlots, } from "./MarketplaceHomepageView";
 export type { SectionCarouselProps } from "./SectionCarousel";
@@ -37,21 +26,10 @@ export type { FAQItem, FAQTab, FAQSectionProps } from "./FAQSection";
 export { FAQSection } from "./FAQSection";
 export type { NewsletterSectionProps } from "./NewsletterSection";
 export { NewsletterSection } from "./NewsletterSection";
-export type { AdvertisementBannerProps } from "./AdvertisementBanner";
-export { AdvertisementBanner } from "./AdvertisementBanner";
 export type { SecurityHighlightItem, SecurityHighlightsSectionProps, } from "./SecurityHighlightsSection";
 export { SecurityHighlightsSection } from "./SecurityHighlightsSection";
-export type { SiteFeatureItem, SiteFeaturesSectionProps, } from "./SiteFeaturesSection";
-export { SiteFeaturesSection } from "./SiteFeaturesSection";
-export type { TrustIndicatorItem, TrustIndicatorsSectionProps, } from "./TrustIndicatorsSection";
-export { TrustIndicatorsSection } from "./TrustIndicatorsSection";
 export type { WhatsAppCommunitySectionProps } from "./WhatsAppCommunitySection";
 export { WhatsAppCommunitySection } from "./WhatsAppCommunitySection";
-export { HomepageSkeleton } from "./HomepageSkeleton";
-export type { FeaturedResultItem, FeaturedResultsSectionProps, } from "./FeaturedResultsSection";
-export { FeaturedResultsSection } from "./FeaturedResultsSection";
-export type { HowItWorksInfoStep, HowItWorksInfoDetail, HowItWorksInfoViewProps, } from "./HowItWorksInfoView";
-export { HowItWorksInfoView } from "./HowItWorksInfoView";
 export type { AnnouncementBarProps } from "./AnnouncementBar";
 export { AnnouncementBar, hashBannerMessage } from "./AnnouncementBar";
 export type { ShopByCategorySectionProps } from "./ShopByCategorySection";

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

@@ -1,14 +1,8 @@
-export { HeroSection } from "./HeroSection.js";
 export { CharacterHotspot } from "./CharacterHotspot.js";
 export { CharacterHotspotForm } from "./CharacterHotspotForm.js";
-export { HeroBanner } from "./HeroBanner.js";
 export { HeroCarousel } from "./HeroCarousel.js";
 export { PromoGrid } from "./PromoGrid.js";
-export { TrustBadges } from "./TrustBadges.js";
 export { TestimonialsCarousel } from "./TestimonialsCarousel.js";
-export { BeforeAfterCard } from "./BeforeAfterCard.js";
-export { NewsletterBanner } from "./NewsletterBanner.js";
-export { HomepageView } from "./HomepageView.js";
 export { MarketplaceHomepageView } from "./MarketplaceHomepageView.js";
 export { SectionCarousel } from "./SectionCarousel.js";
 export { WelcomeSection } from "./WelcomeSection.js";
@@ -18,14 +12,8 @@ export { HowItWorksSection } from "./HowItWorksSection.js";
 export { CustomerReviewsSection } from "./CustomerReviewsSection.js";
 export { FAQSection } from "./FAQSection.js";
 export { NewsletterSection } from "./NewsletterSection.js";
-export { AdvertisementBanner } from "./AdvertisementBanner.js";
 export { SecurityHighlightsSection } from "./SecurityHighlightsSection.js";
-export { SiteFeaturesSection } from "./SiteFeaturesSection.js";
-export { TrustIndicatorsSection } from "./TrustIndicatorsSection.js";
 export { WhatsAppCommunitySection } from "./WhatsAppCommunitySection.js";
-export { HomepageSkeleton } from "./HomepageSkeleton.js";
-export { FeaturedResultsSection } from "./FeaturedResultsSection.js";
-export { HowItWorksInfoView } from "./HowItWorksInfoView.js";
 export { AnnouncementBar, hashBannerMessage } from "./AnnouncementBar.js";
 export { ShopByCategorySection } from "./ShopByCategorySection.js";
 export { FeaturedProductsSection } from "./FeaturedProductsSection.js";

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

@@ -1,6 +1,4 @@
 export * from "./types";
-export * from "./hooks/useHomepage";
-export * from "./hooks/useHomepageSections";
 export * from "./hooks/useHeroCarousel";
 export * from "./hooks/useFeaturedProducts";
 export * from "./hooks/useFeaturedAuctions";

package/dist/features/homepage/index.js

@@ -1,6 +1,4 @@
 export * from "./types/index.js";
-export * from "./hooks/useHomepage.js";
-export * from "./hooks/useHomepageSections.js";
 export * from "./hooks/useHeroCarousel.js";
 export * from "./hooks/useFeaturedProducts.js";
 export * from "./hooks/useFeaturedAuctions.js";

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

@@ -47,5 +47,14 @@ export interface HomepageBrand {
     /** Short mark shown in the hero panel, e.g. "LT". */
     shortName?: string;
 }
+/**
+ * Every surface a `SectionDef` may be mounted on.
+ *
+ * `"homepage"` is the only one any renderer currently receives data for — see
+ * the note on `SectionDef.surfaces` below. The others are declared now so a
+ * reuse decision has somewhere reviewable to live, ahead of the data-loading
+ * work that would make them real.
+ */
+export type SectionSurface = "homepage" | "category" | "brand" | "product" | "store";
 export declare function renderSection(section: HomepageSectionDocument, adSlots: MarketplaceHomepageViewAdSlots | undefined, newsletterFormSlot: React.ReactNode, faqItems: FaqItem[], slides: CarouselSlide[], liveStats: LiveStatsMap, sectionData?: SectionData, brand?: HomepageBrand): React.ReactNode;
 export { AnnouncementBar, hashBannerMessage };