@mohasinac/appkit 4.32.6 → 4.33.0

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

@@ -152,19 +152,27 @@ export declare const carouselSlideQueryHelpers: {
 export declare function createCarouselId(title: string): string;
 export declare function isValidGridPosition(gridRow: number, gridCol: number): boolean;
 export declare function canActivateSlide(currentActiveCount: number): boolean;
-/** Config for the hero carousel section — references the carouselSlides collection. */
+/**
+ * Config for the hero carousel section — references the carouselSlides collection.
+ *
+ * Every field here reaches `HeroCarousel` as a prop. It did not used to: the
+ * section renderer emitted `<HeroCarousel initialSlides={slides} />` and dropped
+ * the whole config, so all six controls were inert in the admin UI.
+ *
+ * `carouselId` was REMOVED. Nothing ever read it — SSR calls
+ * `carouselRepository.getActiveSlides()` (all active, capped at 5) and the
+ * client refetch goes through `useHeroCarousel`, and neither accepts an id.
+ * Honouring it means changing the repository, `GET /api/homepage/carousel` and
+ * the hook; leaving it in the schema advertised a capability that did not exist.
+ */
 export interface CarouselSectionConfig {
+    /** Accessible name for the carousel region. Not rendered as visible copy. */
     title?: string;
     height?: CarouselSlideHeight;
     defaultAutoplayDelayMs?: number;
     pauseOnHover?: boolean;
     showDots?: boolean;
     showArrows?: boolean;
-    /**
-     * ID of a named CarouselDocument (EX2).
-     * When absent, the section loads all active slides (pre-EX2 default hero behavior).
-     */
-    carouselId?: string;
 }
 export interface WelcomeSectionConfig {
     h1: string;
@@ -173,8 +181,11 @@ export interface WelcomeSectionConfig {
     showCTA: boolean;
     ctaText?: string;
     ctaLink?: string;
-    /** Optional section background — reuses the carousel's background schema for consistency. Video is ignored at this scope (color/gradient/image only); see Section's `background` prop. */
-    background?: CarouselBackground;
+    /** Small eyebrow pill above the headline. Defaults to a generic label. */
+    pillLabel?: string;
+    /** Secondary CTA beside the primary one. */
+    secondaryCtaText?: string;
+    secondaryCtaLink?: string;
 }
 export type TrustIndicator = {
     id: string;
@@ -193,11 +204,14 @@ export interface SectionCTA {
 }
 export interface CategoriesSectionConfig {
     title: string;
-    maxCategories: 4;
+    /** Cards to render. Was pinned to the literal `4`; widened so the cap is real. */
+    maxCategories?: number;
     autoScroll: boolean;
     scrollInterval: number;
     /** Circular auto-rotate at the carousel edges. Default: true. */
     loop?: boolean;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     /** Optional CTA button rendered below the scroller. */
     cta?: SectionCTA;
     /** Optional client-side filter chips above the scroller. */
@@ -206,8 +220,6 @@ export interface CategoriesSectionConfig {
         rootOnly?: boolean;
         rootCategoryId?: string;
     };
-    /** Optional section background — reuses the carousel's background schema for consistency. */
-    background?: CarouselBackground;
 }
 export interface BrandsSectionConfig {
     title: string;
@@ -217,6 +229,8 @@ export interface BrandsSectionConfig {
     scrollInterval: number;
     /** Circular auto-rotate at the carousel edges. Default: true. */
     loop?: boolean;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     /** Optional CTA button rendered below the scroller. */
     cta?: SectionCTA;
     /** Optional client-side filter chips above the scroller. */
@@ -229,6 +243,7 @@ export type SectionPagination = "load-more" | "arrows" | "auto-scroll";
 export interface ProductsSectionConfig {
     title: string;
     subtitle?: string;
+    /** @deprecated Legacy name the admin builder writes; prefer `maxItems`. */
     maxProducts?: number;
     /** Number of display rows (1–4). Each row shows itemsPerRow cards. Default: 1. */
     rows?: number;
@@ -240,6 +255,8 @@ export interface ProductsSectionConfig {
     pagination?: SectionPagination;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     filterByBrand?: string;
     sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
     filterByCategory?: string;
@@ -288,32 +305,47 @@ export interface StatsSectionConfig {
         suffix?: string;
     }>;
 }
+/**
+ * The count fields here were declared as LITERAL types (`maxAuctions: 18`,
+ * `rows: 2`, …), which made them unconfigurable by construction — an admin
+ * setting 12 was a type error, and the pre-order config already contradicted
+ * its own literals in the seed. They are plain optional numbers now that the
+ * renderer actually forwards them.
+ */
 export interface AuctionsSectionConfig {
     title: string;
     subtitle?: string;
-    maxAuctions: 18;
-    rows: 2;
-    itemsPerRow: 3;
-    mobileItemsPerRow: 1;
+    maxAuctions?: number;
+    rows?: number;
+    itemsPerRow?: number;
+    mobileItemsPerRow?: number;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     filterByBrand?: string;
     sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
     filterByCategory?: string;
     maxCount?: 5 | 10 | 20;
     loop?: boolean;
 }
+/**
+ * `source` and `placeId` were REMOVED. They implied this section could render
+ * Google reviews, which it never could — `HomepageCustomerReviewsSection` only
+ * ever calls `useHomepageReviews()`. The `google-reviews` section type is the
+ * real surface for that, and it has its own config with a required `placeId`.
+ */
 export interface ReviewsSectionConfig {
     title: string;
-    maxReviews: 18;
-    itemsPerView: 3;
-    mobileItemsPerView: 1;
+    maxReviews?: number;
+    itemsPerView?: number;
+    mobileItemsPerView?: number;
     autoScroll: boolean;
     scrollInterval: number;
     /** Circular auto-rotate at the carousel edges. Default: true. */
     loop?: boolean;
-    source?: "platform" | "google";
-    placeId?: string;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
 }
 export interface WhatsAppCommunitySectionConfig {
     title: string;
@@ -324,9 +356,30 @@ export interface WhatsAppCommunitySectionConfig {
     buttonText: string;
     testimonial?: string;
 }
+export interface FeatureItem {
+    key: string;
+    title: string;
+    description: string;
+}
+/**
+ * `features: string[]` could never reach `SecurityHighlightsSection`, which
+ * needs `{key, title, description}` cards — so the renderer silently fell back
+ * to `DEFAULT_SECURITY_ITEMS` and the configured list was dead.
+ *
+ * `items` is the real shape. `features` is kept readable for back-compat with
+ * documents written before this change; when only `features` is present each
+ * string becomes a title-only card.
+ */
 export interface FeaturesSectionConfig {
     title: string;
-    features: string[];
+    items?: FeatureItem[];
+    /** @deprecated Use `items`. Title-only cards. */
+    features?: string[];
+    /** Small eyebrow pill above the heading. */
+    pillLabel?: string;
+    /** "Learn more" link below the cards. */
+    learnMoreLabel?: string;
+    learnMoreLink?: string;
 }
 export type FAQCategoryKey = "general" | "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support";
 export interface FAQSectionConfig {
@@ -345,19 +398,28 @@ export interface FAQSectionConfig {
     linkToFullPage: boolean;
     /** Which FAQ categories to pull items from for this section. */
     categories: FAQCategoryKey[];
+    /** Label for the "view all FAQs" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
 }
 export interface BlogArticlesSectionConfig {
     title: string;
-    maxArticles: 4;
-    showReadTime: boolean;
-    showAuthor: boolean;
-    showThumbnails: boolean;
+    /** Was the literal `4`, so the cap could not be changed. */
+    maxArticles?: number;
+    showReadTime?: boolean;
+    showAuthor?: boolean;
+    showThumbnails?: boolean;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
 }
+/**
+ * `placeholder` and `buttonText` were REMOVED. The form itself is supplied by
+ * the consumer through `MarketplaceHomepageViewProps.newsletterFormSlot` — the
+ * section only renders the surrounding band — so appkit has no element to apply
+ * them to. They were controls that could never affect anything.
+ */
 export interface NewsletterSectionConfig {
     title: string;
     description: string;
-    placeholder: string;
-    buttonText: string;
     privacyText: string;
     privacyLink: string;
 }
@@ -367,12 +429,12 @@ export interface StoresSectionConfig {
     maxStores: number;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
     filterByCategory?: string;
     maxCount?: 5 | 10 | 20;
     loop?: boolean;
-    /** Optional section background — reuses the carousel's background schema for consistency. */
-    background?: CarouselBackground;
 }
 export interface EventsSectionConfig {
     title: string;
@@ -380,12 +442,12 @@ export interface EventsSectionConfig {
     maxEvents: number;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
     filterByCategory?: string;
     maxCount?: 5 | 10 | 20;
     loop?: boolean;
-    /** Optional section background — reuses the carousel's background schema for consistency. */
-    background?: CarouselBackground;
 }
 export type SocialPlatform = "instagram" | "facebook" | "tiktok" | "deviantart" | "youtube";
 export type SocialPostType = "all" | "images" | "videos" | "reels";
@@ -446,23 +508,35 @@ export type SocialPost = {
 export interface PreOrdersSectionConfig {
     title: string;
     subtitle?: string;
-    maxItems: number;
-    rows: 2;
-    itemsPerRow: 3;
-    mobileItemsPerRow: 1;
+    maxItems?: number;
+    rows?: number;
+    itemsPerRow?: number;
+    mobileItemsPerRow?: number;
     autoScroll: boolean;
     scrollInterval: number;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
     filterByBrand?: string;
     sortBy?: "latest" | "oldest" | "priceLow" | "priceHigh" | "featured" | "onSale" | "popular";
     filterByCategory?: string;
     maxCount?: 5 | 10 | 20;
     loop?: boolean;
 }
+/**
+ * Four fields were REMOVED here:
+ *
+ * - `backgroundColor` / `gradient`. The band's copy is fixed inverse (white)
+ *   ink, so an arbitrary admin-chosen fill has no safe outcome — that is
+ *   Root Cause #67 exactly. `backgroundImage` survives because it renders
+ *   under a scrim, which guarantees the contrast. The themed `accent-banner`
+ *   tone already gives a brand gradient that follows the active theme.
+ * - `clickable` / `clickLink`. A link wrapping the whole banner would nest the
+ *   two CTA buttons inside an anchor, which is an a11y violation and
+ *   ambiguous besides. The buttons are the click target.
+ */
 export interface BannerSectionConfig {
     height: "sm" | "md" | "lg" | "xl";
     backgroundImage?: string;
-    backgroundColor?: string;
-    gradient?: string;
     content: {
         title: string;
         subtitle?: string;
@@ -473,8 +547,6 @@ export interface BannerSectionConfig {
         link: string;
         variant: "primary" | "secondary" | "outline";
     }>;
-    clickable: boolean;
-    clickLink?: string;
 }
 export type CustomCardsCard = {
     id: string;
@@ -524,18 +596,22 @@ export interface CollectionCardsSectionConfig {
     maxItems?: number;
     showCollectionTabs?: boolean;
     cta?: SectionCTA;
-    /** Optional section background — reuses the carousel's background schema for consistency. */
-    background?: CarouselBackground;
 }
 export declare const COLLECTION_CARDS_MAX_ENTRIES: 3;
+/**
+ * `storeId`, `categorySlug` and `sortBy` were REMOVED. Bundles arrive
+ * pre-fetched from `listFeaturedBundles(8)` in `MarketplaceHomepageView`, which
+ * takes no scope or sort argument — honouring them means changing that fetch,
+ * and a per-section fetch would breach the SSR round-trip budget (Rule #6).
+ * `maxItems` survives because slicing an already-fetched list is real.
+ */
 export interface FeaturedBundlesSectionConfig {
     title?: string;
     subtitle?: string;
     maxItems?: number;
-    storeId?: string;
-    categorySlug?: string;
-    sortBy?: "newest" | "savings-desc" | "price-asc";
     showSavingsBadge?: boolean;
+    /** Label for the "view all" link. Defaults to a generic one. */
+    viewMoreLabel?: string;
 }
 export interface PrizeDrawsSectionConfig {
     title?: string;

package/dist/features/media/MediaImage.d.ts

@@ -15,6 +15,15 @@ export interface MediaImageProps {
     priority?: boolean;
     /** Override browser loading strategy when needed (`eager` for LCP images). */
     loading?: "lazy" | "eager";
+    /**
+     * Explicit `fetchpriority` hint. Defaults to what `priority` implies.
+     *
+     * Set `"low"` on eagerly-loaded images that are NOT the LCP candidate — a
+     * carousel's off-screen slides are the motivating case. All five hero banners
+     * otherwise race each other at the browser's default priority and delay the
+     * one slide the visitor can actually see.
+     */
+    fetchPriority?: "high" | "low" | "auto";
     /** CSS object-fit applied to the underlying img element. Defaults to `'cover'`. */
     objectFit?: "cover" | "contain";
     /**
@@ -66,5 +75,5 @@ export interface MediaImageProps {
         media?: string;
     }>;
 }
-export declare function MediaImage({ src, alt, size, priority, loading, objectFit, fallback, className, rounded, shadow, style, sources, onError, }: MediaImageProps): import("react").JSX.Element;
+export declare function MediaImage({ src, alt, size, priority, loading, fetchPriority, objectFit, fallback, className, rounded, shadow, style, sources, onError, }: MediaImageProps): import("react").JSX.Element;
 export default MediaImage;

package/dist/features/media/MediaImage.js

@@ -48,7 +48,7 @@ function resolveSrcSet(input) {
         .filter(Boolean)
         .join(", ");
 }
-export function MediaImage({ src, alt, size = "card", priority = false, loading, objectFit = "cover", fallback, className, rounded, shadow, style, sources, onError, }) {
+export function MediaImage({ src, alt, size = "card", priority = false, loading, fetchPriority, objectFit = "cover", fallback, className, rounded, shadow, style, sources, onError, }) {
     const [hasError, setHasError] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
     const [retryCount, setRetryCount] = useState(0);
@@ -98,15 +98,18 @@ export function MediaImage({ src, alt, size = "card", priority = false, loading,
     const requestSrc = retryCount > 0
         ? `${resolvedSrc}${resolvedSrc.includes("?") ? "&" : "?"}retry=${retryCount}`
         : resolvedSrc;
+    // An explicit hint always wins; otherwise mirror what `priority` already
+    // implies, so existing call sites keep their current behaviour exactly.
+    const resolvedFetchPriority = fetchPriority ?? (priority ? "high" : undefined);
     // Art-directed `<picture>` path — bypasses Next.js `<Image>` because the
     // browser must pick the matching `<source>` itself. Loading + decoding hints
     // come from the consumer's preset.
     if (sources && sources.length > 0) {
-        return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsxs("picture", { children: [sources.map((source, index) => (_jsx("source", { srcSet: resolveSrcSet(source.srcSet), type: source.type, media: source.media }, `${source.media ?? ""}-${source.type ?? ""}-${index}`))), _jsx("img", { src: requestSrc, alt: alt, loading: loading ?? (priority ? "eager" : "lazy"), decoding: "async", 
+        return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsxs("picture", { children: [sources.map((source, index) => (_jsx("source", { srcSet: resolveSrcSet(source.srcSet), type: source.type, media: source.media }, `${source.media ?? ""}-${source.type ?? ""}-${index}`))), _jsx("img", { src: requestSrc, alt: alt, loading: loading ?? (priority ? "eager" : "lazy"), fetchPriority: resolvedFetchPriority, decoding: "async", 
                             // catalogued primitive for media (variant catalogue allows the inner
                             // <img> here). Object-fit + className come from typed props.
                             className: `absolute inset-0 w-full h-full ${fitClass}`, onLoad: () => setIsLoaded(true), onError: handleError })] })] }));
     }
-    return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsx(Image, { src: requestSrc, alt: alt, fill: true, priority: priority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: handleError, unoptimized: isSvg })] }));
+    return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsx(Image, { src: requestSrc, alt: alt, fill: true, priority: priority, fetchPriority: resolvedFetchPriority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: handleError, unoptimized: isSvg })] }));
 }
 export default MediaImage;

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

@@ -18,6 +18,7 @@ import { BaseListingCard, Button, RichText, Row, Span, Stack, Text, TextLink } f
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { PreorderBadge } from "./PreorderCard";
 import { WishlistHeartButton } from "../../wishlist/components/WishlistHeartButton";
+import { CardStoreLine } from "../../products/components/CardStoreLine";
 const DEFAULT_LABELS = {
     preOrderBadge: "Pre-order",
     featuredBadge: "Featured",
@@ -65,7 +66,7 @@ export function MarketplacePreorderCard({ product, className = "", variant = "gr
                             onSelect(product.id, !isSelected);
                         }, className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" }))] }), _jsx(BaseListingCard.Info, { variant: variant, children: variant === "list" ? (
                 /* ── Compact list layout ── */
-                _jsxs(_Fragment, { children: [_jsxs(Row, { className: "min-w-0", align: "start", justify: "between", gap: "sm", children: [_jsx(TextLink, { href: detailHref, className: "min-w-0 flex-1", children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), wishlistActions && (_jsx(WishlistHeartButton, { size: "inline", inWishlist: inWishlist, addLabel: mergedLabels.addToWishlist, removeLabel: mergedLabels.removeFromWishlist, onToggle: handleWishlist }))] }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { className: "text-primary", size: "sm", weight: "bold", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "self-start mt-0.5", onClick: handleNavigate, children: mergedLabels.reserveNow })] })) : (
+                _jsxs(_Fragment, { children: [_jsxs(Row, { className: "min-w-0", align: "start", justify: "between", gap: "sm", children: [_jsx(TextLink, { href: detailHref, className: "min-w-0 flex-1", children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), wishlistActions && (_jsx(WishlistHeartButton, { size: "inline", inWishlist: inWishlist, addLabel: mergedLabels.addToWishlist, removeLabel: mergedLabels.removeFromWishlist, onToggle: handleWishlist }))] }), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Text, { className: "text-primary", size: "sm", weight: "bold", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "self-start mt-0.5", onClick: handleNavigate, children: mergedLabels.reserveNow })] })) : (
                 /* ── Full grid layout ── */
-                _jsxs(_Fragment, { children: [_jsx(TextLink, { href: detailHref, children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)]" })) : null, _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsxs(Row, { justify: "between", className: "mt-auto pt-[var(--appkit-space-2)]", gap: "sm", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "flex-1", onClick: handleNavigate, children: mergedLabels.reserveNow }), onAddToCart ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", textSize: "xs", className: "flex-1", onClick: (e) => { e.stopPropagation(); onAddToCart(product); }, children: mergedLabels.addToCart })) : null, wishlistActions ? (_jsx(WishlistHeartButton, { size: "inline", inWishlist: inWishlist, addLabel: mergedLabels.addToWishlist, removeLabel: mergedLabels.removeFromWishlist, onToggle: handleWishlist })) : null] })] })) })] }));
+                _jsxs(_Fragment, { children: [_jsx(TextLink, { href: detailHref, children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "line-clamp-2 text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)]" })) : null, _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: formatCurrency(product.price, getDefaultCurrency()) }), shipDate && _jsx(PreorderBadge, { shipDate: shipDate })] }), _jsxs(Row, { justify: "between", className: "mt-auto pt-[var(--appkit-space-2)]", gap: "sm", children: [_jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "flex-1", onClick: handleNavigate, children: mergedLabels.reserveNow }), onAddToCart ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", textSize: "xs", className: "flex-1", onClick: (e) => { e.stopPropagation(); onAddToCart(product); }, children: mergedLabels.addToCart })) : null, wishlistActions ? (_jsx(WishlistHeartButton, { size: "inline", inWishlist: inWishlist, addLabel: mergedLabels.addToWishlist, removeLabel: mergedLabels.removeFromWishlist, onToggle: handleWishlist })) : null] })] })) })] }));
 }

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

@@ -0,0 +1,32 @@
+/**
+ * CardStoreLine — the "by <seller>" line on a listing card.
+ *
+ * One implementation because there are six card variants that need it and only
+ * ONE of them rendered it: `ProductCard` had this block inline while
+ * `ProductListRow`, `MarketplacePreorderCard`, `MarketplacePrizeDrawCard`,
+ * `PreorderCard` and `MarketplaceAuctionCard` showed no seller at all, even
+ * when the data was right there on the item. Six copies of a three-line block
+ * is six chances for the fallback rule and the muted tone to drift.
+ *
+ * Deliberately NOT a link. A listing card is itself wrapped in a `<Link>` to the
+ * product, and nesting an anchor inside an anchor is invalid HTML that browsers
+ * resolve by splitting the outer link — which is how a card loses its own click
+ * target (the shape of Root Cause #43). The seller is reachable from the product
+ * detail page, which does link it.
+ */
+import React from "react";
+export interface CardStoreLineProps {
+    storeName?: string;
+    /**
+     * Present when the listing has a seller at all, whether or not its display
+     * name was denormalized onto the document.
+     *
+     * This is the distinction the old inline block could not make: it called
+     * `safeDisplayName(storeName, "")`, so a missing name produced `""` and the
+     * line rendered nothing — indistinguishable from "this listing has no store".
+     * With the id in hand, a listing that HAS a seller says so.
+     */
+    storeId?: string;
+    className?: string;
+}
+export declare function CardStoreLine({ storeName, storeId, className }: CardStoreLineProps): React.JSX.Element | null;

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

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "../../../ui/components/Typography";
+import { safeDisplayName } from "../../../security/pii-redact";
+export function CardStoreLine({ storeName, storeId, className }) {
+    if (!storeId && !storeName)
+        return null;
+    // `safeDisplayName` also guards the encrypted-value case: a PII-ciphertext
+    // string reaching a card must render as a label, never as `enc:v1:…`.
+    // `storeId` IS the store slug in this codebase, so it is a readable last
+    // resort rather than an opaque key.
+    const seller = safeDisplayName(storeName, storeId ?? "Seller");
+    return (_jsxs(Text, { className: className ?? "mt-0.5 text-[11px]", color: "faint", children: ["by ", seller] }));
+}

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

@@ -10,6 +10,7 @@ import { getDefaultCurrency } from "../../../core/baseline-resolver";
 const CLS_PRIZE_PILL = "inline-flex items-center rounded-full bg-fuchsia-600 px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-white";
 import { BaseListingCard, Button, Div, Row, Span, Stack, Text, TextLink } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
+import { CardStoreLine } from "./CardStoreLine";
 const DEFAULT_LABELS = {
     prizeDrawBadge: "Prize draw",
     pendingBadge: "Reveal pending",
@@ -98,5 +99,5 @@ export function MarketplacePrizeDrawCard({ product, className = "", variant = "g
                             onSelect(product.id, !isSelected);
                         }, className: selectable || isSelected
                             ? "opacity-100"
-                            : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" }))] }), _jsxs(BaseListingCard.Info, { variant: variant, children: [_jsx(TextLink, { href: String(detailHref), children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", children: [_jsxs(Text, { size: "sm", weight: "semibold", color: "primary", children: [formatCurrency(pricePerEntry, getDefaultCurrency()), " ", _jsx(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: mergedLabels.pricePerEntryLabel })] }), max > 0 ? (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: mergedLabels.entriesRemainingLabel(remaining, max) })) : null] }), countdown ? (_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [status === "pending" ? "Opens in" : "Closes in", " ", countdown] })) : null, _jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "mt-2 w-full", onClick: handleNavigate, disabled: status === "closed" || remaining === 0, children: mergedLabels.enterDraw })] })] }));
+                            : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" }))] }), _jsxs(BaseListingCard.Info, { variant: variant, children: [_jsx(TextLink, { href: String(detailHref), children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }) }), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", children: [_jsxs(Text, { size: "sm", weight: "semibold", color: "primary", children: [formatCurrency(pricePerEntry, getDefaultCurrency()), " ", _jsx(Span, { size: "xs", weight: "normal", className: "text-[var(--appkit-color-text-muted)]", children: mergedLabels.pricePerEntryLabel })] }), max > 0 ? (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: mergedLabels.entriesRemainingLabel(remaining, max) })) : null] }), countdown ? (_jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: [status === "pending" ? "Opens in" : "Closes in", " ", countdown] })) : null, _jsx(Button, { type: "button", variant: "primary", size: "sm", textSize: "xs", className: "mt-2 w-full", onClick: handleNavigate, disabled: status === "closed" || remaining === 0, children: mergedLabels.enterDraw })] })] }));
 }

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

@@ -8,8 +8,8 @@ import { BaseListingCard, Button, Div, Grid, PriceDisplay, Row, Span, Stack, Tex
 import { MediaImage } from "../../media/MediaImage";
 import { formatCurrency } from "../../../utils/number.formatter";
 import { getDefaultCurrency } from "../../../core/baseline-resolver";
-import { safeDisplayName } from "../../../security";
 import { useLongPress } from "../../../react/hooks/useLongPress";
+import { CardStoreLine } from "./CardStoreLine";
 import { FeatureBadgeList } from "./FeatureBadge";
 import { useProductFeatures } from "./ProductFeaturesContext";
 import { PRODUCT_FEATURE_CARD_MAX_VISIBLE } from "../constants/product-features.constants";
@@ -97,10 +97,7 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
                                             },
                                         }
                                         : {}), children: [_jsx("svg", { className: "h-2.5 w-2.5 flex-shrink-0", fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" }) }), product.brand] }))] }));
-                    })(), (() => {
-                        const seller = safeDisplayName(product.storeName, "");
-                        return seller ? (_jsxs(Text, { className: "mt-0.5 text-[11px]", color: "faint", children: ["by ", seller] })) : null;
-                    })(), product.rating !== undefined && (_jsxs(Row, { className: "mt-1", gap: "xs", children: [_jsx(Span, { className: CLS_STAR, children: "\u2605" }), _jsxs(Span, { className: "text-[11px]", color: "muted", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto", padding: "t-xs", children: [_jsx(PriceDisplay, { amount: product.price, originalAmount: product.originalPrice, currency: getDefaultCurrency(), variant: "compact" }), (() => {
+                    })(), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), product.rating !== undefined && (_jsxs(Row, { className: "mt-1", gap: "xs", children: [_jsx(Span, { className: CLS_STAR, children: "\u2605" }), _jsxs(Span, { className: "text-[11px]", color: "muted", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto", padding: "t-xs", children: [_jsx(PriceDisplay, { amount: product.price, originalAmount: product.originalPrice, currency: getDefaultCurrency(), variant: "compact" }), (() => {
                                 const stock = product.stockCount ?? product.stockQuantity ?? product.availableQuantity;
                                 if (stock === undefined || !listingPlugin.showsStockQuantity)
                                     return null;
@@ -136,7 +133,7 @@ function ProductListRow({ product, onClick, onAddToWishlist, isWishlisted, }) {
             onClick ? "cursor-pointer" : "",
         ]
             .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { className: `flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 ${__O.hidden} bg-[var(--appkit-color-surface)]`, rounded: "lg", children: product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200" })) }), _jsxs(Stack, { className: "flex-1 min-w-0 gap-[2px]", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }), (product.categoryName || product.brand) && (_jsx(Span, { className: "text-[11px] truncate", color: "faint", children: [product.categoryName, product.brand].filter(Boolean).join(" · ") })), _jsxs(Row, { className: "mt-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { size: "sm", weight: "semibold", className: "text-primary", children: formatCurrency(product.price, getDefaultCurrency()) }), discount && (_jsxs(Span, { weight: "bold", className: CLS_DISCOUNT_TEXT_BARE, children: ["-", discount, "%"] })), product.rating !== undefined && (_jsxs(Span, { layout: "flex", gap: "2xs", className: "text-[11px]", color: "faint", children: [_jsx(Span, { className: CLS_STAR_BARE, children: "\u2605" }), product.rating.toFixed(1)] })), (() => {
+            .join(" "), children: [_jsx(Div, { className: `flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 ${__O.hidden} bg-[var(--appkit-color-surface)]`, rounded: "lg", children: product.mainImage ? (_jsx(MediaImage, { src: product.mainImage, alt: product.title, size: "thumbnail" })) : (_jsx(Div, { className: "w-full h-full bg-neutral-200" })) }), _jsxs(Stack, { className: "flex-1 min-w-0 gap-[2px]", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: product.title }), (product.categoryName || product.brand) && (_jsx(Span, { className: "text-[11px] truncate", color: "faint", children: [product.categoryName, product.brand].filter(Boolean).join(" · ") })), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId, className: "text-[11px]" }), _jsxs(Row, { className: "mt-0.5", align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { size: "sm", weight: "semibold", className: "text-primary", children: formatCurrency(product.price, getDefaultCurrency()) }), discount && (_jsxs(Span, { weight: "bold", className: CLS_DISCOUNT_TEXT_BARE, children: ["-", discount, "%"] })), product.rating !== undefined && (_jsxs(Span, { layout: "flex", gap: "2xs", className: "text-[11px]", color: "faint", children: [_jsx(Span, { className: CLS_STAR_BARE, children: "\u2605" }), product.rating.toFixed(1)] })), (() => {
                                 const stock = product.stockCount ?? product.stockQuantity ?? product.availableQuantity;
                                 if (stock === undefined)
                                     return null;

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

@@ -155,7 +155,24 @@ export interface ProductDocument extends BaseDocument {
     video?: ProductVideoField;
     status: ProductStatus;
     storeId: string;
+    /**
+     * Denormalized seller display name — what every listing card renders as
+     * "by …", and the only place a card can get it: the public browse query
+     * never touches `storeRepository`.
+     *
+     * Optional for back-compat with documents written before the create paths
+     * populated it, NOT because it is optional in practice. `resolveStoreFields`
+     * fills it on every create, and a store rename re-syncs it through the
+     * `storeNameBackfill` job — that job is the mirror-guard, and removing it
+     * turns this into a field that silently goes stale (Root Cause #42).
+     */
     storeName?: string;
+    /**
+     * Denormalized `storeSlug`, so a card or a detail page can build a
+     * `/stores/{slug}` link without a second read. Written alongside `storeName`
+     * and re-synced by the same job.
+     */
+    storeSlug?: string;
     /** W1-34 — denormalized seller rating (0–5) shown on product detail store card. */
     storeRating?: number;
     /** W1-34 — denormalized seller total review count shown alongside the rating. */

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

@@ -98,6 +98,8 @@ export interface ProductItem {
     brands?: string[];
     storeId?: string;
     storeName?: string;
+    /** Denormalized store slug — lets a card name its seller with no second read. */
+    storeSlug?: string;
     specifications?: {
         name: string;
         value: string;

package/dist/features/seller/actions/seller-actions.d.ts

@@ -113,6 +113,23 @@ export declare function updatePayoutSettings(userId: string, input: UpdatePayout
 }>;
 export declare function requestPayout(userId: string, userName: string, userEmail: string, input: RequestPayoutInput): Promise<unknown>;
 export declare function bulkSellerOrder(userId: string, userRole: string, userDisplayName: string, userEmail: string, orderIds: string[]): Promise<BulkSellerOrderResult>;
+/**
+ * The real "create a listing" path — every seller `new` page under `/store`
+ * routes here.
+ *
+ * The store fields are resolved from the OWNER, never taken from the draft.
+ * `SellerProductDraft` has no `storeId`, `storeName` or `storeSlug` field at
+ * all, so this used to write `sellerId`/`sellerName`/`sellerEmail` and nothing
+ * else about the store — leaving every seller-created listing with no `storeId`
+ * whatsoever. That is not just a blank "by …" line on the card: `storeId` is
+ * what the store page queries on, what `splitCartIntoOrderGroups` groups on,
+ * and what a payout hangs off. Seed data set all three by hand, so a seeded
+ * environment looked entirely correct.
+ *
+ * Resolving server-side rather than accepting them from the client is also the
+ * only safe shape — a caller-supplied `storeId` would let a seller file a
+ * listing under someone else's store.
+ */
 export declare function createSellerProduct(userId: string, userName: string, userEmail: string, input: Record<string, JsonValue>): Promise<void>;
 export declare function getSellerStore(userId: string): Promise<StoreDocument | null>;
 export declare function getSellerShipping(userId: string): Promise<import("../../auth").SellerShippingConfig | null>;