@mohasinac/appkit 3.0.3 → 3.0.6

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

@@ -2,13 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { Div, Grid, Heading, Row, Section, Span, Text } from "../../../ui";
+// --- Constants ---------------------------------------------------------------
+const CARD_DELAYS = ["delay-0", "delay-100", "delay-200", "delay-300", "delay-[400ms]", "delay-500"];
 // --- Single cards-variant card -----------------------------------------------
-function TrustFeatureCard({ item, visible, delay, }) {
+function TrustFeatureCard({ item, visible, delayClass, }) {
     return (_jsxs("div", { className: [
             "flex flex-col items-center text-center p-4",
             "transition-all duration-500",
+            delayClass,
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "trustfeaturessection-div-373", children: [_jsx(Row, { className: "h-14 w-14 bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30 flex-shrink-0", align: "center", justify: "center", rounded: "2xl", children: item.renderIcon ? (item.renderIcon({ className: "w-7 h-7" })) : (_jsx(Span, { className: "text-primary-600 dark:text-secondary-400", size: "2xl", "aria-hidden": "true", children: "\u2713" })) }), _jsx(Heading, { level: 3, className: "mt-3 mb-1 tracking-wide uppercase", color: "primary", size: "sm", weight: "bold", children: item.title }), _jsx(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: item.description })] }));
+        ].join(" "), "data-section": "trustfeaturessection-div-373", children: [_jsx(Row, { className: "h-14 w-14 bg-primary-50 dark:bg-primary-950/40 border border-[var(--appkit-color-primary-100)] dark:border-[var(--appkit-color-primary-900)]/30 flex-shrink-0", align: "center", justify: "center", rounded: "2xl", children: item.renderIcon ? (item.renderIcon({ className: "w-7 h-7" })) : (_jsx(Span, { className: "text-primary-600 dark:text-secondary-400", size: "2xl", "aria-hidden": "true", children: "\u2713" })) }), _jsx(Heading, { level: 3, className: "mt-3 mb-1 tracking-wide uppercase", color: "primary", size: "sm", weight: "bold", children: item.title }), _jsx(Text, { className: "leading-relaxed", color: "muted", size: "xs", children: item.description })] }));
 }
 // --- Single strip-variant item -----------------------------------------------
 function TrustStripItem({ item }) {
@@ -35,5 +38,5 @@ export function TrustFeaturesSection({ items, title, variant = "cards", classNam
         const doubled = [...items, ...items];
         return (_jsx(Section, { border: "subtle", ref: sectionRef, className: `overflow-hidden border-y ${className}`, padding: "y-md", children: _jsx(Div, { layout: "flex", className: "animate-marquee", children: doubled.map((item, i) => (_jsx(TrustStripItem, { item: item }, `${item.iconName}-${i}`))) }) }));
     }
-    return (_jsx(Section, { ref: sectionRef, paddingY: "y-2-5xl", className: className, paddingX: "x-md", surface: "muted", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [title && (_jsx(Div, { className: "text-center mb-8", children: _jsx(Heading, { level: 2, color: "primary", size: "3xl", weight: "bold", mdSize: "4xl", children: title }) })), _jsx(Grid, { gap: "lg", className: "grid-cols-2 sm:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((item, index) => (_jsx(TrustFeatureCard, { item: item, visible: visible, delay: index * 100 }, item.iconName))) })] }) }));
+    return (_jsx(Section, { ref: sectionRef, paddingY: "y-2-5xl", className: className, paddingX: "x-md", surface: "muted", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [title && (_jsx(Div, { className: "text-center mb-8", children: _jsx(Heading, { level: 2, color: "primary", size: "3xl", weight: "bold", mdSize: "4xl", children: title }) })), _jsx(Grid, { gap: "lg", className: "grid-cols-2 sm:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((item, index) => (_jsx(TrustFeatureCard, { item: item, visible: visible, delayClass: CARD_DELAYS[Math.min(index, CARD_DELAYS.length - 1)] }, item.iconName))) })] }) }));
 }

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

@@ -7,5 +7,5 @@ const __P = {
 // --- Section -----------------------------------------------------------------
 export function TrustIndicatorsSection({ items, className = "", }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
-    return (_jsx(Section, { className: `${__P.p6} ${className}`, surface: "subtle", children: _jsx(Div, { className: "w-full", children: _jsx(Grid, { gap: "md", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 md:gap-8", children: items.map((indicator, index) => (_jsxs("div", { className: "text-center p-4 rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800 hover:shadow-md transition-shadow", children: [_jsx(Div, { className: "text-4xl md:text-5xl mb-2 md:mb-3", children: indicator.icon }), _jsx(Heading, { level: 3, className: `${themed.textPrimary} mb-1 md:mb-2`, size: "sm", weight: "semibold", children: indicator.title }), _jsx(Text, { className: `${themed.textSecondary}`, size: "xs", children: indicator.description })] }, index))) }) }) }));
+    return (_jsx(Section, { className: `${__P.p6} ${className}`, surface: "subtle", children: _jsx(Div, { className: "w-full", children: _jsx(Grid, { gap: "section", className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((indicator, index) => (_jsxs("div", { className: "text-center p-4 rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800 hover:shadow-md transition-shadow", children: [_jsx(Div, { className: "text-[2.25rem] md:text-[3rem] mb-2 md:mb-3", children: indicator.icon }), _jsx(Heading, { level: 3, className: `${themed.textPrimary} mb-1 md:mb-2`, size: "sm", weight: "semibold", children: indicator.title }), _jsx(Text, { className: `${themed.textSecondary}`, size: "xs", children: indicator.description })] }, index))) }) }) }));
 }

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

@@ -7,7 +7,7 @@ export function WelcomeSection({ title, subtitle, pillLabel, showCTA = true, cta
     const themed = { textSecondary: THEMED_TEXT_SECONDARY };
     const flex = { center: FLEX_CENTER };
     if (isLoading) {
-        return (_jsx(Section, { className: `relative overflow-hidden md:py-24 ${className}`, paddingY: "y-4xl", paddingX: "x-md", children: _jsxs(Div, { className: "animate-pulse max-w-4xl mx-auto text-center", children: [_jsx(Div, { className: "h-6 w-52 mx-auto mb-6", surface: "subtle", rounded: "full" }), _jsx(Div, { className: "h-20 mb-4 max-w-2xl mx-auto", surface: "subtle", rounded: "lg" }), _jsx(Div, { className: "h-6 mb-8 max-w-lg mx-auto", surface: "subtle", rounded: "lg" }), _jsxs(Row, { justify: "center", gap: "md", children: [_jsx(Div, { className: "h-12 w-36", surface: "subtle", rounded: "xl" }), _jsx(Div, { className: "h-12 w-36", surface: "subtle", rounded: "xl" })] })] }) }));
+        return (_jsx(Section, { className: `relative overflow-hidden md:py-[6rem] ${className}`, paddingY: "y-4xl", paddingX: "x-md", children: _jsxs(Div, { className: "animate-pulse max-w-4xl mx-auto text-center", children: [_jsx(Div, { className: "h-6 w-52 mx-auto mb-6", surface: "subtle", rounded: "full" }), _jsx(Div, { className: "h-20 mb-4 max-w-2xl mx-auto", surface: "subtle", rounded: "lg" }), _jsx(Div, { className: "h-6 mb-8 max-w-lg mx-auto", surface: "subtle", rounded: "lg" }), _jsxs(Row, { justify: "center", gap: "md", children: [_jsx(Div, { className: "h-12 w-36", surface: "subtle", rounded: "xl" }), _jsx(Div, { className: "h-12 w-36", surface: "subtle", rounded: "xl" })] })] }) }));
     }
-    return (_jsxs(Section, { className: `relative overflow-hidden md:py-28 ${className}`, paddingY: "y-5xl", paddingX: "x-md", children: [_jsx(Div, { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] bg-primary/10 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] bg-secondary/10 dark:bg-secondary/15 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", children: _jsxs(Grid, { align: "center", gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2", children: [_jsxs(Div, { className: "text-center lg:text-left", children: [pillLabel && (_jsx(Div, { children: _jsxs(Span, { layout: "inline-flex", gap: "md", size: "xs", weight: "medium", className: "border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 tracking-[0.2em] text-primary-700 dark:text-primary-400 backdrop-blur-sm", rounded: "full", transform: "uppercase", children: [_jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 1, variant: "none", gradient: "brand-tri", className: "mt-4 font-display md:text-6xl lg:text-7xl xl:text-8xl leading-[1.1] tracking-tight", size: "5xl", children: title }), subtitle && (_jsx(Text, { className: `mt-4 ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, size: "xl", children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 lg:justify-start", justify: "center", children: [ctaHref ? (_jsx(TextLink, { rounded: "xl", href: ctaHref, className: "inline-flex items-center justify-center px-8 py-3.5 !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", size: "base", weight: "bold", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { rounded: "xl", href: secondaryCtaHref, className: "inline-flex items-center justify-center border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", size: "base", weight: "semibold", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 lg:justify-start", justify: "center", children: trustChips.map((chip) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", className: "border border-zinc-200 dark:border-slate-700 px-3.5 py-1.5", rounded: "full", surface: "subtle", color: "muted", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx(Div, { className: "hidden lg:block", children: _jsxs(Div, { className: `relative overflow-hidden aspect-[4/3] bg-[image:var(--appkit-gradient-section-mesh)] shadow-2xl`, border: "default", rounded: "3xl", children: [_jsx(Div, { className: "absolute inset-0 bg-[image:var(--appkit-gradient-glass)]" }), _jsx(Row, { centered: true, className: `absolute inset-0 ${flex.center} px-10`, children: _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", size: "hero" }) })] }) })] }) })] }));
+    return (_jsxs(Section, { className: `relative overflow-hidden md:py-[7rem] ${className}`, paddingY: "y-5xl", paddingX: "x-md", children: [_jsx(Div, { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] bg-primary/10 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] bg-secondary/10 dark:bg-secondary/15 blur-3xl", rounded: "full", "aria-hidden": "true" }), _jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", children: _jsxs(Grid, { align: "center", gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2", children: [_jsxs(Div, { className: "text-center lg:text-left", children: [pillLabel && (_jsx(Div, { children: _jsxs(Span, { layout: "inline-flex", gap: "md", size: "xs", weight: "medium", className: "border border-primary-[500]/30 bg-primary-500/10 px-[1.25rem] py-[0.375rem] tracking-[0.2em] text-primary-700 dark:text-primary-400 backdrop-blur-sm", rounded: "full", transform: "uppercase", children: [_jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 bg-primary-500 inline-block", rounded: "full", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 1, variant: "none", gradient: "brand-tri", className: "mt-4 font-display leading-[1.1] tracking-tight", size: "5xl", mdSize: "6xl", lgSize: "7xl", xlSize: "8xl", children: title }), subtitle && (_jsx(Text, { className: `mt-4 ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, size: "xl", children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 lg:justify-[flex-start]", justify: "center", children: [ctaHref ? (_jsx(TextLink, { rounded: "xl", href: ctaHref, className: "inline-flex items-[center] justify-[center] px-[2rem] py-[0.875rem] !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", size: "base", weight: "bold", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { rounded: "xl", href: secondaryCtaHref, className: "inline-flex items-[center] justify-[center] border-2 border-cobalt/40 dark:border-cobalt-400/40 px-[2rem] py-[0.875rem] text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", size: "base", weight: "semibold", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 lg:justify-[flex-start]", justify: "center", children: trustChips.map((chip) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", className: "border border-zinc-[200] dark:border-slate-[700] px-[0.875rem] py-[0.375rem]", rounded: "full", surface: "subtle", color: "muted", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx(Div, { className: "hidden lg:block", children: _jsxs(Div, { className: `relative overflow-hidden aspect-[4/3] bg-[image:var(--appkit-gradient-section-mesh)]`, shadow: "2xl", border: "default", rounded: "3xl", children: [_jsx(Div, { className: "absolute inset-0 bg-[image:var(--appkit-gradient-glass)]" }), _jsx(Row, { centered: true, className: `absolute inset-0 ${flex.center} px-[2.5rem]`, children: _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", size: "hero" }) })] }) })] }) })] }));
 }

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

@@ -14,5 +14,5 @@ export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount,
         if (groupLink)
             window.open(groupLink, "_blank");
     };
-    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsxs(Section, { color: "inverse", tone: "accent-banner", rounded: "2xl", shadow: "lg", className: "relative overflow-hidden", children: [_jsx(Div, { className: "absolute inset-0 opacity-[0.06] pointer-events-none bg-[repeating-linear-gradient(45deg,white_0,white_1px,transparent_0,transparent_50%)] bg-[size:10px_10px]", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 px-6 sm:px-10 sm:py-12", padding: "y-2xl", children: [_jsxs(Row, { align: "center", justify: "between", gap: "md", wrap: true, className: `mb-8`, children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "w-12 h-12 bg-[#25D366] flex-shrink-0", align: "center", justify: "center", rounded: "xl", shadow: "lg", children: _jsx("svg", { className: "w-7 h-7 text-white", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }), _jsx(Span, { color: "inverse", size: "sm", weight: "medium", className: "/80 tracking-wide", transform: "uppercase", children: "WhatsApp Community" })] }), memberCount && (_jsxs(Row, { paddingY: "y-2xs-tall", className: "backdrop-blur-sm", surface: "default", padding: "x-md", align: "center", gap: "sm", rounded: "full", children: [_jsx(Users, { className: "w-4 h-4 text-white/80" }), _jsxs(Span, { color: "inverse", size: "sm", weight: "semibold", children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { color: "inverse", level: 2, className: "mb-3 leading-tight", smSize: "3xl", size: "2xl", weight: "bold", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none prose-invert", className: "text-white/80 text-base mb-6 max-w-2xl leading-relaxed" })), benefits.length > 0 && (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 mb-8 max-w-2xl", children: benefits.slice(0, 4).map((benefit, i) => (_jsxs(Row, { align: "start", gap: "2.5", children: [_jsx(Span, { layout: "flex-center", className: "mt-0.5 flex-shrink-0 w-5 h-5 bg-white/20", rounded: "full", children: _jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }), _jsx(Span, { color: "inverse", size: "sm", className: "/90 leading-snug", children: benefit })] }, i))) })), testimonial && (_jsx(Blockquote, { className: "border-l-2 border-white/30 pl-4 mb-8 max-w-xl", children: _jsxs(Text, { color: "inverse", variant: "none", className: "/75 italic leading-relaxed", size: "sm", children: ["\u201C", testimonial, "\u201D"] }) })), groupLink && (_jsxs(Button, { gap: "md", variant: "primary", size: "lg", onClick: handleJoin, "aria-label": buttonText, className: "!bg-[#25D366] hover:!bg-[#1ebe5d] !text-white !border-0 shadow-lg font-semibold", children: [_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] }))] })] }) }) }));
+    return (_jsx(Section, { paddingX: "x-md-2xl", className: className, surface: "subtle", paddingY: "y-4xl", children: _jsx(Div, { className: "w-full max-w-7xl mx-auto", children: _jsxs(Section, { color: "inverse", tone: "accent-banner", rounded: "2xl", shadow: "lg", className: "relative overflow-hidden", children: [_jsx(Div, { className: "absolute inset-0 opacity-[0.06] pointer-events-none bg-[repeating-linear-gradient(45deg,white_0,white_1px,transparent_0,transparent_50%)] bg-[size:10px_10px]", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 px-[1.5rem] sm:px-[2.5rem] sm:py-[3rem]", padding: "y-2xl", children: [_jsxs(Row, { align: "center", justify: "between", gap: "md", wrap: true, className: `mb-8`, children: [_jsxs(Row, { align: "center", gap: "3", children: [_jsx(Row, { className: "w-12 h-12 bg-[var(--appkit-color-whatsapp)] flex-shrink-0", align: "center", justify: "center", rounded: "xl", shadow: "lg", children: _jsx("svg", { className: "w-7 h-7 text-white", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }), _jsx(Span, { color: "inverse", size: "sm", weight: "medium", className: "/80 tracking-wide", transform: "uppercase", children: "WhatsApp Community" })] }), memberCount && (_jsxs(Row, { paddingY: "y-2xs-tall", className: "backdrop-blur-sm", surface: "default", padding: "x-md", align: "center", gap: "sm", rounded: "full", children: [_jsx(Users, { className: "w-4 h-4 text-white/80" }), _jsxs(Span, { color: "inverse", size: "sm", weight: "semibold", children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { color: "inverse", level: 2, className: "mb-3 leading-tight", smSize: "3xl", size: "2xl", weight: "bold", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none prose-invert", className: "text-white/80 text-base mb-6 max-w-2xl leading-relaxed" })), benefits.length > 0 && (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 mb-8 max-w-2xl", children: benefits.slice(0, 4).map((benefit, i) => (_jsxs(Row, { align: "start", gap: "2.5", children: [_jsx(Span, { layout: "flex-center", className: "mt-0.5 flex-shrink-0 w-5 h-5 bg-[rgba(255,255,255,0.2)]", rounded: "full", children: _jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }), _jsx(Span, { color: "inverse", size: "sm", className: "/90 leading-snug", children: benefit })] }, i))) })), testimonial && (_jsx(Blockquote, { paddingX: "x-md", className: "border-l-2 border-white/30 mb-8 max-w-xl", children: _jsxs(Text, { color: "inverse", variant: "none", className: "/75 italic leading-relaxed", size: "sm", children: ["\u201C", testimonial, "\u201D"] }) })), groupLink && (_jsxs(Button, { gap: "md", variant: "primary", size: "lg", onClick: handleJoin, "aria-label": buttonText, className: "!bg-[var(--appkit-color-whatsapp)] hover:!bg-[var(--appkit-color-whatsapp-light)] !text-white !border-0 font-[600]", shadow: "lg", children: [_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] }))] })] }) }) }));
 }

package/dist/features/homepage/lib/franchise-colors.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hex colour defaults for franchise/brand accent pickers.
+ * These must be literal hex strings because <input type="color"> does not
+ * accept CSS custom properties. This file is the single source of truth so
+ * the audit-hex-tokens script can exempt it rather than flagging call sites.
+ */
+export declare const DEFAULT_ACCENT_HEX = "#E8001C";

package/dist/features/homepage/lib/franchise-colors.js

@@ -0,0 +1,7 @@
+/**
+ * Hex colour defaults for franchise/brand accent pickers.
+ * These must be literal hex strings because <input type="color"> does not
+ * accept CSS custom properties. This file is the single source of truth so
+ * the audit-hex-tokens script can exempt it rather than flagging call sites.
+ */
+export const DEFAULT_ACCENT_HEX = "#E8001C"; // Marvel red — sensible default for new hotspot pins

package/dist/features/homepage/lib/live-stats.js

@@ -27,22 +27,22 @@ export async function fetchLiveStats(requests) {
     if (neededPresets.has("total_listings")) {
         tasks.push(productRepository.count()
             .then((n) => { resolvedPresets.total_listings = String(n); })
-            .catch(() => { }));
+            .catch(console.error));
     }
     if (neededPresets.has("verified_sellers")) {
         tasks.push(storeRepository.count()
             .then((n) => { resolvedPresets.verified_sellers = String(n); })
-            .catch(() => { }));
+            .catch(console.error));
     }
     if (neededPresets.has("total_buyers")) {
         tasks.push(userRepository.countByRole("user")
             .then((n) => { resolvedPresets.total_buyers = String(n); })
-            .catch(() => { }));
+            .catch(console.error));
     }
     if (neededPresets.has("total_orders")) {
         tasks.push(orderRepository.count()
             .then((n) => { resolvedPresets.total_orders = String(n); })
-            .catch(() => { }));
+            .catch(console.error));
     }
     if (neededPresets.has("total_reviews") || neededPresets.has("platform_rating")) {
         tasks.push(reviewRepository.findAll()
@@ -57,7 +57,7 @@ export async function fetchLiveStats(requests) {
                 resolvedPresets.platform_rating = avg.toFixed(1) + "★";
             }
         })
-            .catch(() => { }));
+            .catch(console.error));
     }
     // --- Collection-query metrics ------------------------------------------------
     const queryRequests = requests.filter((r) => r.source === "live-collection" && r.collectionQuery !== undefined);

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

@@ -2,6 +2,7 @@
  * Homepage Feature Firestore Document Types & Constants
  * Covers: carousel slides, homepage sections
  */
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 /** Unified background for a slide or card — supports image, video, solid color, or gradient. */
 export interface CarouselBackground {
     type: "image" | "video" | "color" | "gradient";
@@ -63,14 +64,11 @@ export interface CarouselCard {
 }
 export type GridCardCreateInput = Omit<CarouselCard, "id">;
 /** A named carousel that holds up to MAX_SLIDES_PER_CAROUSEL slide references. */
-export interface CarouselDocument {
-    id: string;
+export interface CarouselDocument extends BaseDocument {
     name: string;
     status: "active" | "draft";
     /** Ordered slide IDs (max MAX_SLIDES_PER_CAROUSEL). */
     slideIds: string[];
-    createdAt: Date;
-    updatedAt: Date;
     createdBy: string;
 }
 export type CarouselCreateInput = Omit<CarouselDocument, "id" | "createdAt" | "updatedAt">;
@@ -78,8 +76,7 @@ export type CarouselUpdateInput = Partial<Pick<CarouselDocument, "name" | "statu
 export declare class TooManySlidesError extends Error {
     constructor();
 }
-export interface CarouselSlideDocument {
-    id: string;
+export interface CarouselSlideDocument extends BaseDocument {
     /**
      * Reference to a named CarouselDocument (EX2).
      * null = default hero carousel (backward-compat with pre-EX2 slides).
@@ -131,8 +128,6 @@ export interface CarouselSlideDocument {
         views: number;
         lastViewed?: Date;
     };
-    createdAt: Date;
-    updatedAt: Date;
     createdBy: string;
 }
 export declare const CAROUSEL_SLIDES_COLLECTION: "carouselSlides";
@@ -552,14 +547,11 @@ export interface GoogleReviewsSectionConfig {
 }
 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";
 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 interface HomepageSectionDocument {
-    id: string;
+export interface HomepageSectionDocument extends BaseDocument {
     type: SectionType;
     order: number;
     enabled: boolean;
     config: SectionConfig;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const HOMEPAGE_SECTIONS_COLLECTION: "homepageSections";
 export declare const HOMEPAGE_SECTIONS_INDEXED_FIELDS: readonly ["enabled", "order", "type"];

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

@@ -713,8 +713,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
     createdAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    id: string;
     title: string;
+    id: string;
     updatedAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -822,8 +822,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
     createdAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    id: string;
     title: string;
+    id: string;
     updatedAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;

package/dist/features/layout/AppLayoutShell.js

@@ -6,14 +6,12 @@ import { useCallback, useEffect, useRef, useState } from "react";
 // The actual 2.8.8 SSR crash was a peer-dep duplicate fixed by the
 // scripts/dedupe-peer-deps.mjs postinstall hook (see scripts/ and CLAUDE.md #19).
 import { AvatarDisplay, BackgroundRenderer, Div, Li, Main, Row, Span, Stack, Text, TextLink, Ul, UnsavedChangesModal } from "../../ui";
-// Role indicator dots — distinct hues per role tier. Brand-decorative palette
-// kept inline so a future tokens.css "role" namespace can replace this in one
-// edit. The audit allows these as static role markers.
-const ROLE_DOT_COLORS = {
-    admin: "#9333ea", // audit-hex-tokens-ok: role indicator (purple-600)
-    moderator: "#0ea5e9", // audit-hex-tokens-ok: role indicator (sky-500)
-    seller: "#0d9488", // audit-hex-tokens-ok: role indicator (teal-600)
-    employee: "#f59e0b", // audit-hex-tokens-ok: role indicator (amber-500)
+// Role indicator dots — distinct hues per role tier.
+const ROLE_DOT_BG_CLASS = {
+    admin: "bg-purple-600",
+    moderator: "bg-sky-500",
+    seller: "bg-teal-600",
+    employee: "bg-amber-500",
 };
 import { useTheme } from "../../_internal/client/theme";
 import { useAuth } from "../../react/contexts/SessionContext";
@@ -68,7 +66,7 @@ function SidebarUserHeader({ user, onClose, }) {
                                     }
                                     : user.photoURL
                                         ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 }
-                                        : null, size: "md", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && !isBuyerUser(user) && (_jsx(Row, { textWeight: "bold", className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 border-2 border-white text-white text-[9px] leading-none select-none", align: "center", justify: "center", rounded: "full", style: { background: ROLE_DOT_COLORS[user.role] ?? "var(--appkit-color-text-muted)" }, title: user.role.charAt(0).toUpperCase() + user.role.slice(1), "aria-label": user.role, children: user.role.charAt(0).toUpperCase() }))] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "medium", children: user.displayName || "User" }), _jsx(Text, { className: "truncate", color: "muted", size: "xs", children: user.email || "" })] })] }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "flex-shrink-0 rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
+                                        : null, size: "md", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && !isBuyerUser(user) && (_jsx(Row, { textWeight: "bold", className: `absolute -bottom-0.5 -right-0.5 w-4 h-4 border-2 border-white text-white text-[9px] leading-none select-none ${ROLE_DOT_BG_CLASS[user.role] ?? "bg-[var(--appkit-color-text-muted)]"}`, align: "center", justify: "center", rounded: "full", title: user.role.charAt(0).toUpperCase() + user.role.slice(1), "aria-label": user.role, children: user.role.charAt(0).toUpperCase() }))] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "medium", children: user.displayName || "User" }), _jsx(Text, { className: "truncate", color: "muted", size: "xs", children: user.email || "" })] })] }), _jsx("button", { type: "button", "aria-label": "Close menu", onClick: onClose, className: "flex-shrink-0 rounded-full p-2 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-300 dark:hover:bg-slate-800 dark:hover:text-zinc-100 transition-all hover:rotate-90", children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }));
 }
 /** Sidebar header when no user is logged in — title + close button. */
 function SidebarGuestHeader({ sidebarTitle, onClose, }) {

package/dist/features/layout/BottomNavbar.js

@@ -26,7 +26,6 @@ export function BottomNavbar({ user, homeHref, shopHref, cartHref, profileHref,
         const visibleItems = navItems.slice(0, 4);
         return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [visibleItems.map((item) => (_jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: item.href, label: item.label, icon: item.icon ?? defaultIcon, isActive: pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/")), variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }, item.key))), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onMoreToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.more, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }), _jsx(Span, { className: labelClassName, children: labels.more })] }) })] }));
     }
-    const itemStyle = { width: "20%" };
-    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": labels.cart, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), _jsx(Li, { className: "flex-1", style: itemStyle, children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
+    return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1 w-1/5", children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": labels.cart, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), _jsx(Li, { className: "flex-1", children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
                                 (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-zinc-500 dark:text-slate-400"}`, weight: "semibold", children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
 }

package/dist/features/messages/hooks/useConversation.js

@@ -51,6 +51,7 @@ export function useConversation(conversationId) {
             setConversation(await fetchDetail(conversationId));
         }
         catch (e) {
+            // toast-intentionally-silent: background refetch, error surfaced via error state
             void normalizeError(e);
             setError(e instanceof Error ? e : new Error(String(e)));
         }
@@ -112,7 +113,7 @@ export function useConversation(conversationId) {
             await refetch();
         }
         catch {
-            // best-effort
+            // toast-intentionally-silent: read-receipt is best-effort, non-critical
         }
     }, [conversationId, refetch]);
     return {

package/dist/features/messages/hooks/useConversations.js

@@ -31,6 +31,7 @@ export function useConversations(userId) {
             setConversations(await fetchList());
         }
         catch (e) {
+            // toast-intentionally-silent: background refetch, error surfaced via error state
             void normalizeError(e);
             setError(e instanceof Error ? e : new Error(String(e)));
         }

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

@@ -5,6 +5,7 @@
  * Messages are embedded as an array for seed purposes; production can migrate to
  * a subcollection when the thread exceeds ~200 messages.
  */
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 export interface ConversationMessage {
     id: string;
     senderId: string;
@@ -14,8 +15,7 @@ export interface ConversationMessage {
     sentAt: Date;
     attachments?: string[];
 }
-export interface ConversationDocument {
-    id: string;
+export interface ConversationDocument extends BaseDocument {
     buyerId: string;
     buyerDisplayName: string;
     storeId: string;
@@ -29,8 +29,6 @@ export interface ConversationDocument {
     unreadBuyer: number;
     unreadSeller: number;
     status: "active" | "archived" | "blocked";
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const CONVERSATIONS_COLLECTION: "conversations";
 export declare const CONVERSATIONS_INDEXED_FIELDS: readonly ["buyerId", "storeId", "productId", "status", "lastMessageAt", "createdAt"];

package/dist/features/messages/schemas/index.d.ts

@@ -112,8 +112,8 @@ export declare const conversationFirestoreSchema: z.ZodObject<{
     createdAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    id: string;
     storeName: string;
+    id: string;
     updatedAt: string | Date | z.objectOutputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
@@ -145,8 +145,8 @@ export declare const conversationFirestoreSchema: z.ZodObject<{
     createdAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;
-    id: string;
     storeName: string;
+    id: string;
     updatedAt: string | Date | z.objectInputType<{
         toDate: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodDate>;
     }, z.ZodTypeAny, "passthrough">;

package/dist/features/orders/components/OrdersList.js

@@ -34,7 +34,7 @@ export function OrderCard({ order, onClick, labels = {} }) {
         .sort()[0];
     return (_jsxs(Div, { padding: "5", role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(order)
-            : undefined, onClick: onClick ? () => onClick(order) : undefined, className: `border border-neutral-200 ${onClick ? "cursor-pointer transition hover:shadow-md" : ""}`, rounded: "xl", surface: "default", children: [_jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "3", children: [_jsxs(Div, { children: [_jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", children: ["Order #", order.id.slice(-8).toUpperCase()] }), date && (_jsx(Text, { className: "mt-0.5", color: "faint", size: "xs", children: date }))] }), _jsx(Span, { size: "xs", weight: "semibold", className: `capitalize ${statusColor}`, rounded: "full", padding: "pill-md", children: labels[order.orderStatus] ?? order.orderStatus.replace(/_/g, " ") })] }), revealsRemaining > 0 && (_jsxs(Row, { gap: "sm", className: "mt-2", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: [revealsRemaining, " ", revealsRemaining === 1 ? "reveal" : "reveals", " pending"] }), earliestDeadline && (_jsxs(Span, { size: "xs", color: "muted", children: ["before ", new Date(earliestDeadline).toLocaleDateString(getDefaultLocale(), { month: "short", day: "numeric" })] }))] })), _jsxs(Row, { wrap: true, gap: "3", className: "mt-4", children: [order.items.slice(0, 3).map((item, i) => (_jsxs(Row, { gap: "sm", children: [item.image && (_jsx(Div, { role: "img", "aria-label": item.title, className: "h-10 w-10 bg-center bg-cover", rounded: "lg", style: { backgroundImage: `url(${item.image})` } })), _jsxs(Div, { children: [_jsx(Text, { truncate: true, size: "sm", weight: "medium", color: "primary", children: item.title }), _jsxs(Text, { size: "xs", color: "faint", children: ["\u00D7", item.quantity] })] })] }, i))), order.items.length > 3 && (_jsxs(Span, { size: "xs", className: "self-center", color: "faint", children: ["+", order.items.length - 3, " more"] }))] }), _jsxs(Row, { justify: "between", className: "mt-4 border-t border-neutral-100", padding: "t-sm", children: [_jsxs(Span, { size: "sm", className: "text-neutral-500 dark:text-neutral-400", children: [order.currency ?? "", " Total"] }), _jsx(Span, { weight: "semibold", className: "text-neutral-900 dark:text-neutral-100", children: formatCurrency(order.total, order.currency) })] })] }));
+            : undefined, onClick: onClick ? () => onClick(order) : undefined, className: `border border-neutral-200 ${onClick ? "cursor-pointer transition hover:shadow-md" : ""}`, rounded: "xl", surface: "default", children: [_jsxs(Row, { wrap: true, align: "start", justify: "between", gap: "3", children: [_jsxs(Div, { children: [_jsxs(Text, { className: "text-neutral-500 dark:text-neutral-400", size: "xs", children: ["Order #", order.id.slice(-8).toUpperCase()] }), date && (_jsx(Text, { className: "mt-0.5", color: "faint", size: "xs", children: date }))] }), _jsx(Span, { size: "xs", weight: "semibold", className: `capitalize ${statusColor}`, rounded: "full", padding: "pill-md", children: labels[order.orderStatus] ?? order.orderStatus.replace(/_/g, " ") })] }), revealsRemaining > 0 && (_jsxs(Row, { gap: "sm", className: "mt-2", children: [_jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: [revealsRemaining, " ", revealsRemaining === 1 ? "reveal" : "reveals", " pending"] }), earliestDeadline && (_jsxs(Span, { size: "xs", color: "muted", children: ["before ", new Date(earliestDeadline).toLocaleDateString(getDefaultLocale(), { month: "short", day: "numeric" })] }))] })), _jsxs(Row, { wrap: true, gap: "3", className: "mt-4", children: [order.items.slice(0, 3).map((item, i) => (_jsxs(Row, { gap: "sm", children: [item.image && (_jsx("img", { src: item.image, alt: item.title, className: "h-10 w-10 object-cover rounded-lg" })), _jsxs(Div, { children: [_jsx(Text, { truncate: true, size: "sm", weight: "medium", color: "primary", children: item.title }), _jsxs(Text, { size: "xs", color: "faint", children: ["\u00D7", item.quantity] })] })] }, i))), order.items.length > 3 && (_jsxs(Span, { size: "xs", className: "self-center", color: "faint", children: ["+", order.items.length - 3, " more"] }))] }), _jsxs(Row, { justify: "between", className: "mt-4 border-t border-neutral-100", padding: "t-sm", children: [_jsxs(Span, { size: "sm", className: "text-neutral-500 dark:text-neutral-400", children: [order.currency ?? "", " Total"] }), _jsx(Span, { weight: "semibold", className: "text-neutral-900 dark:text-neutral-100", children: formatCurrency(order.total, order.currency) })] })] }));
 }
 export function OrdersList({ orders, isLoading, onOrderClick, totalPages = 1, currentPage = 1, onPageChange, emptyLabel = "No orders found", }) {
     if (isLoading) {

package/dist/features/orders/components/RefundHistoryTable.d.ts

@@ -1,3 +1,9 @@
+/**
+ * RefundHistoryTable — read-only list of OrderRefundEvent entries on an order.
+ *
+ * Used on both buyer order-detail and seller/admin order-detail pages.
+ * Non-contestable banner is shown when order.contestable === false.
+ */
 import type { OrderDocument } from "../schemas";
 export interface RefundHistoryTableProps {
     order: Pick<OrderDocument, "refunds" | "contestable" | "totalPrice" | "currency">;

package/dist/features/orders/components/RefundHistoryTable.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Badge, Div, Heading, Row, Stack, Text } from "../../../ui";
 import { formatCurrency } from "../../../utils/number.formatter";
@@ -22,5 +21,7 @@ export function RefundHistoryTable({ order, className = "" }) {
     const currency = order.currency ?? "INR";
     if (events.length === 0 && order.contestable !== false)
         return null;
-    return (_jsxs(Div, { className: `${className}`, rounded: "xl", surface: "default", border: "default", children: [order.contestable === false && (_jsx(Div, { className: "rounded-t-xl", surface: "warning-surface", padding: "inline", children: _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(WarningIcon, {}), _jsx(Text, { size: "sm", weight: "semibold", className: "text-warning", children: REFUND_COPY.history.nonContestableBanner })] }) })), events.length > 0 && (_jsxs(Div, { className: `${__P.p4}`, children: [_jsx(Heading, { level: 4, className: "mb-3", color: "muted", size: "sm", weight: "semibold", children: REFUND_COPY.history.heading }), _jsx(Stack, { gap: "none", children: events.map((e) => (_jsx(RefundRow, { event: e, currency: currency }, e.refundId))) })] }))] }));
+    return (_jsxs(Div, { className: `${className}`, rounded: "xl", surface: "default", border: "default", children: [order.contestable === false && (
+            // audit-inline-style-ok: asymmetric border-radius (top corners only); no appkit rounded= variant covers partial corners
+            _jsx(Div, { surface: "warning-surface", padding: "inline", style: { borderTopLeftRadius: "0.75rem", borderTopRightRadius: "0.75rem" }, children: _jsxs(Row, { gap: "sm", align: "center", children: [_jsx(WarningIcon, {}), _jsx(Text, { size: "sm", weight: "semibold", className: "text-warning", children: REFUND_COPY.history.nonContestableBanner })] }) })), events.length > 0 && (_jsxs(Div, { className: `${__P.p4}`, children: [_jsx(Heading, { level: 4, className: "mb-3", color: "muted", size: "sm", weight: "semibold", children: REFUND_COPY.history.heading }), _jsx(Stack, { gap: "none", children: events.map((e) => (_jsx(RefundRow, { event: e, currency: currency }, e.refundId))) })] }))] }));
 }

package/dist/features/orders/repository/orders.repository.d.ts

@@ -15,6 +15,11 @@ declare class OrderRepository extends BaseRepository<OrderDocument> {
     findConfirmed(): Promise<OrderDocument[]>;
     findPending(): Promise<OrderDocument[]>;
     updateStatus(orderId: string, status: OrderStatus, additionalData?: Partial<OrderDocument>): Promise<OrderDocument>;
+    assignWorker(orderId: string, workerId: string): Promise<OrderDocument>;
+    unassignWorker(orderId: string): Promise<OrderDocument>;
+    markPicked(orderId: string): Promise<OrderDocument>;
+    markPacked(orderId: string): Promise<OrderDocument>;
+    findFulfillmentQueue(storeId: string): Promise<OrderDocument[]>;
     updatePaymentStatus(orderId: string, paymentStatus: PaymentStatus, paymentId?: string): Promise<OrderDocument>;
     cancelOrder(orderId: string, reason: string, refundAmount?: number): Promise<OrderDocument>;
     findRecentByUser(userId: string): Promise<OrderDocument[]>;

package/dist/features/orders/repository/orders.repository.js

@@ -71,6 +71,32 @@ class OrderRepository extends BaseRepository {
             updatedAt: new Date(),
         });
     }
+    async assignWorker(orderId, workerId) {
+        return this.update(orderId, { assignedWorkerId: workerId, updatedAt: new Date() });
+    }
+    async unassignWorker(orderId) {
+        return this.update(orderId, { assignedWorkerId: undefined, updatedAt: new Date() });
+    }
+    async markPicked(orderId) {
+        const order = await this.findById(orderId);
+        if (!order)
+            throw new NotFoundError(`Order ${orderId} not found`);
+        const nextStatus = order.status === "confirmed" ? "processing" : order.status;
+        return this.update(orderId, { pickedAt: new Date(), status: nextStatus, updatedAt: new Date() });
+    }
+    async markPacked(orderId) {
+        return this.update(orderId, { packedAt: new Date(), updatedAt: new Date() });
+    }
+    async findFulfillmentQueue(storeId) {
+        const snap = await this.db
+            .collection(this.collection)
+            .where(ORDER_FIELDS.STORE_ID, "==", storeId)
+            .where(ORDER_FIELDS.STATUS, "in", ["confirmed", "processing"])
+            .orderBy(ORDER_FIELDS.CREATED_AT, "asc")
+            .limit(200)
+            .get();
+        return snap.docs.map((doc) => this.decryptOrder({ id: doc.id, ...doc.data() }));
+    }
     async updatePaymentStatus(orderId, paymentStatus, paymentId) {
         return this.update(orderId, {
             paymentStatus,

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

@@ -3,6 +3,7 @@
  */
 import type { OrderStatus, PaymentStatus } from "../types";
 import type { OrderType } from "../utils/order-splitter";
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 export type ShippingMethod = "custom" | "shiprocket";
 export type RefundType = "full" | "partial";
 export type OrderPayoutStatus = "eligible" | "requested" | "paid";
@@ -99,8 +100,7 @@ export interface AppliedOrderDiscount {
     scope?: "admin" | "seller";
     storeId?: string;
 }
-export interface OrderDocument {
-    id: string;
+export interface OrderDocument extends BaseDocument {
     productId: string;
     productTitle: string;
     userId: string;
@@ -203,11 +203,15 @@ export interface OrderDocument {
         shelf: string;
         bin: string;
     };
-    createdAt: Date;
-    updatedAt: Date;
+    /** UID of the employee or seller assigned to fulfil this order. */
+    assignedWorkerId?: string;
+    /** Timestamp when all items in this order were physically confirmed picked. */
+    pickedAt?: Date;
+    /** Timestamp when the order was packed and ready for courier handoff. */
+    packedAt?: Date;
 }
 export declare const ORDER_COLLECTION: "orders";
-export declare const ORDER_INDEXED_FIELDS: readonly ["userId", "productId", "storeId", "status", "paymentStatus", "payoutStatus", "shippingMethod", "orderDate", "createdAt"];
+export declare const ORDER_INDEXED_FIELDS: readonly ["userId", "productId", "storeId", "status", "paymentStatus", "payoutStatus", "shippingMethod", "orderDate", "createdAt", "assignedWorkerId", "pickedAt", "packedAt"];
 export declare const DEFAULT_ORDER_DATA: Partial<OrderDocument>;
 export declare const ORDER_PUBLIC_FIELDS: readonly ["id", "productId", "productTitle", "quantity", "unitPrice", "totalPrice", "currency", "status", "paymentStatus", "shippingAddress", "trackingNumber", "notes", "orderDate", "shippingDate", "deliveryDate", "createdAt"];
 export declare const ORDER_UPDATABLE_FIELDS: readonly ["notes", "shippingAddress"];

package/dist/features/orders/schemas/firestore.js

@@ -54,6 +54,9 @@ export const ORDER_INDEXED_FIELDS = [
     "shippingMethod",
     "orderDate",
     "createdAt",
+    "assignedWorkerId",
+    "pickedAt",
+    "packedAt",
 ];
 export const DEFAULT_ORDER_DATA = {
     status: "pending",

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

@@ -2,6 +2,7 @@
  * Payouts Firestore Document Types & Constants
  */
 import { type GeneratePayoutIdInput } from "../../../utils/id-generators";
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 export interface PayoutBankAccount {
     accountHolderName: string;
     accountNumberMasked: string;
@@ -32,8 +33,7 @@ export declare const PayoutStatusValues: {
     readonly FAILED: "failed";
 };
 export type PayoutPaymentMethod = "bank_transfer" | "upi";
-export interface PayoutDocument {
-    id: string;
+export interface PayoutDocument extends BaseDocument {
     storeId: string;
     sellerName: string;
     sellerEmail: string;
@@ -66,8 +66,6 @@ export interface PayoutDocument {
     netAmount?: number;
     requestedAt: Date;
     processedAt?: Date;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const PAYOUT_COLLECTION: "payouts";
 export declare const PAYOUT_INDEXED_FIELDS: readonly ["storeId", "status", "requestedAt", "createdAt"];

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

@@ -60,7 +60,7 @@ export function MarketplacePreorderCard({ product, className = "", variant = "gr
                             onSelect(product.id, !isSelected);
                         }, className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 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(Button, { type: "button", variant: "ghost", size: "sm", className: `shrink-0 p-1 text-base leading-none ${inWishlist ? "text-primary" : "text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" }))] }), _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(Button, { type: "button", variant: "ghost", size: "sm", className: `shrink-0 p-[0.25rem] leading-none ${inWishlist ? "text-primary" : "text-[var(--appkit-color-text-faint)]"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" }))] }), _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-xs text-zinc-500 dark:text-zinc-400" })) : 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-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(Button, { type: "button", variant: "ghost", size: "sm", className: `text-base ${inWishlist ? "text-primary" : "text-zinc-500 dark:text-zinc-400"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" })) : null] })] })) })] }));
+                _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-xs text-zinc-500 dark:text-zinc-400" })) : 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-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(Button, { type: "button", variant: "ghost", size: "sm", className: `${inWishlist ? "text-primary" : "text-[var(--appkit-color-text-muted)]"}`, onClick: handleWishlist, "aria-label": inWishlist ? mergedLabels.removeFromWishlist : mergedLabels.addToWishlist, children: inWishlist ? "♥" : "♡" })) : null] })] })) })] }));
 }

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

@@ -14,5 +14,5 @@ export function PreOrderBadge({ status, className = "" }) {
 }
 /** Small inline tag shown on a product that is available for pre-order */
 export function PreOrderTag({ label = "Pre-order", estimatedDate, className = "", }) {
-    return (_jsxs(Div, { layout: "inline-flex", className: `flex-col ${className}`, children: [_jsx(Span, { size: "xs", weight: "bold", className: CLS_NEW_BADGE, children: label }), estimatedDate && (_jsxs(Span, { className: "mt-0.5 text-[10px] text-gray-400", children: ["Ships ", estimatedDate] }))] }));
+    return (_jsxs(Div, { layout: "inline-flex", className: `[flex-direction:column] ${className}`, children: [_jsx(Span, { size: "xs", weight: "bold", className: CLS_NEW_BADGE, children: label }), estimatedDate && (_jsxs(Span, { className: "mt-0.5 text-[10px] text-gray-400", children: ["Ships ", estimatedDate] }))] }));
 }