@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Grid, Heading, Section, Text } from "../../../ui";
+import { THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY } from "../../../_internal/shared/styles/themed";
+import { Button, Div, Grid, Heading, Row, Section, Span, Text } from "../../../ui";
 // --- Constants ---------------------------------------------------------------
 const CLS_VISIBLE = "opacity-100 translate-y-0";
 // --- Single step card ---------------------------------------------------------
@@ -16,11 +16,13 @@ function StepCard({ step, visible, delay, }) {
             visible ? CLS_VISIBLE : "opacity-0 translate-y-8",
         ].join(" "), 
         // audit-inline-style-ok: computed timing
-        style: { transitionDelay: `${delay}ms` }, "data-section": "howitworkssection-div-340", children: [_jsx(Div, { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx(Div, { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, children: step.number }), step.renderIcon && (_jsx(Div, { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
+        style: { transitionDelay: `${delay}ms` }, "data-section": "howitworkssection-div-340", children: [_jsx(Span, { gradient: "brand", size: "7xl", family: "display", className: "absolute top-4 right-5 opacity-10 select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx(Row, { textWeight: "bold", textSize: "sm", className: `relative z-10 w-10 h-10 ${badgeBg} text-white mb-5`, align: "center", justify: "center", rounded: "full", shadow: "md", children: step.number }), step.renderIcon && (
+            // audit-variant-ok: icon container — bespoke white/80 + dark slate border + dynamic iconBg + fixed w-14/h-14 size
+            _jsx(Row, { className: `relative z-10 w-14 h-14 ${iconBg} mb-4 border border-white/80 dark:border-slate-700/50`, align: "center", justify: "center", rounded: "2xl", children: _jsx(Span, { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 ${THEMED_TEXT_PRIMARY} mb-2`, size: "base", weight: "semibold", children: step.title }), _jsx(Text, { className: `relative z-10 ${THEMED_TEXT_SECONDARY} leading-relaxed`, size: "sm", children: step.desc })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className = "", }) {
-    const { themed } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
     const sectionRef = useRef(null);
     const [visible, setVisible] = useState(false);
     useEffect(() => {
@@ -36,5 +38,7 @@ export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaC
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: `text-center mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: [pillLabel && (_jsx(Div, { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx(Div, { className: `text-center transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `${className}`, surface: "muted", padding: "xl", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: `text-center mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: [pillLabel && (
+                        // audit-variant-ok: eyebrow pill — primary-500/30 border + primary-500/10 bg + tracking-[0.2em] + backdrop-blur-sm bespoke composite
+                        _jsx(Div, { layout: "inline-flex", gap: "2", align: "center", textWeight: "medium", textSize: "xs", className: "mb-4 border border-primary-500/30 bg-primary-500/10 py-1.5 tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", padding: "x-md", rounded: "full", children: pillLabel })), _jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary} max-w-xl mx-auto`, size: "base", children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx(Div, { className: `text-center transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
 }

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

@@ -89,28 +89,36 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, onB
     // components only read display fields that are present on both document and item shapes.
     const sectionData = {
         products: productsResult?.items?.length
+            // audit-unknown-ok: TS structural escape — ProductItem
             ? productsResult.items
             : undefined,
         auctions: auctionsResult?.items?.length
+            // audit-unknown-ok: TS structural escape — ProductItem
             ? auctionsResult.items
             : undefined,
         preOrders: preOrdersResult?.items?.length
+            // audit-unknown-ok: TS structural escape — ProductItem
             ? preOrdersResult.items
             : undefined,
         categories: categoriesResult?.length
+            // audit-unknown-ok: TS structural escape — CategoryItem
             ? categoriesResult
             : undefined,
         brands: brandsResult?.length
+            // audit-unknown-ok: TS structural escape — CategoryItem
             ? brandsResult
             : undefined,
         bundles: bundlesResult?.length ? bundlesResult : undefined,
         stores: storesResult?.items?.length
+            // audit-unknown-ok: TS structural escape — StoreListItem
             ? storesResult.items
             : undefined,
         blog: blogResult?.length
+            // audit-unknown-ok: TS structural escape — BlogPost
             ? blogResult
             : undefined,
         events: eventsResult?.items?.length
+            // audit-unknown-ok: TS structural escape — EventItem
             ? eventsResult.items
             : undefined,
     };

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Button, Div, Heading, Input, Section, Span, Text, } from "../../../ui";
-const CLS_ERROR_TEXT = "mt-3 text-sm text-red-300";
+import { Button, Div, Heading, Section, Span, Text, } from "../../../ui";
+import { Form } from "../../../ui/components/Form";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+const CLS_ERROR_TEXT = "mt-3 text-sm text-error";
 export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", heading = "Join Our Newsletter", subheading = "Get exclusive offers, new arrivals and more.", placeholder = "Enter your email", ctaLabel = "Subscribe", successMessage = "You're in! Check your inbox.", errorMessage = "Something went wrong. Please try again.", }) {
     const [email, setEmail] = useState("");
     const [loading, setLoading] = useState(false);
@@ -26,14 +28,18 @@ export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", head
             setLoading(false);
         }
     }
-    return (_jsxs(Section, { className: "relative overflow-hidden py-24", 
+    return (_jsxs(Section, { padding: "y-6xl", className: "relative overflow-hidden", 
         // audit-inline-style-ok: dynamic CSS
         style: {
             background: "var(--newsletter-bg, linear-gradient(135deg, var(--color-primary, #1e40af) 0%, var(--color-secondary, #7c3aed) 100%))",
-        }, children: [_jsx(Div, { className: "pointer-events-none absolute -top-20 -right-20 h-60 w-60 rounded-full border border-white/[0.06]" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full border border-dashed border-white/[0.08]" }), _jsxs(Div, { className: "relative mx-auto max-w-2xl px-4 text-center sm:px-6", children: [_jsx(Span, { size: "xs", weight: "semibold", className: "mb-4 inline-flex rounded-full border border-white/20 px-3 py-1 uppercase tracking-widest text-white/70", children: eyebrow }), _jsx(Heading, { level: 2, className: "text-3xl font-bold text-white sm:text-4xl", children: heading }), _jsx(Text, { className: "mt-4 text-white/60", children: subheading }), success ? (_jsx(Text, { className: "mt-8 rounded-xl border border-white/20 bg-white/10 px-6 py-4 text-sm font-semibold text-white", children: successMessage })) : (_jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex gap-3", children: [_jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, required: true, className: "flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/40" }), _jsx(Button, { type: "submit", disabled: loading, variant: "primary", className: "shrink-0 rounded-xl px-5 py-3 text-sm font-bold transition-opacity disabled:opacity-60", 
+        }, children: [_jsx(Div, { className: "pointer-events-none absolute -top-20 -right-20 h-60 w-60 border border-white/[0.06]", rounded: "full" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 border border-dashed border-white/[0.08]", rounded: "full" }), _jsxs(Div, { className: "relative mx-auto max-w-2xl text-center sm:px-6", padding: "x-md", children: [_jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "mb-4 inline-flex border border-white/20 tracking-widest /70", rounded: "full", padding: "pill-md", transform: "uppercase", children: eyebrow }), _jsx(Heading, { color: "inverse", level: 2, smSize: "4xl", size: "3xl", weight: "bold", children: heading }), _jsx(Text, { color: "inverse", className: "mt-4 /60", children: subheading }), success ? (
+                    // audit-variant-ok: newsletter success message — translucent white/20 border + bg-white/10 over inverse background; Text lacks bg/rounded/border variants on top of color="inverse"
+                    _jsx(Text, { paddingY: "md", color: "inverse", className: "mt-8 rounded-xl border border-white/20 bg-white/10 px-6", size: "sm", weight: "semibold", children: successMessage })) : (
+                    // audit-variant-ok: newsletter form — flex+gap-3 layout; Form lacks layout/gap variants (FormShell is the typed alternative for multi-step)
+                    _jsxs(Form, { onSubmit: handleSubmit, className: "mt-8 flex gap-3", children: [_jsx(FieldInput, { name: "email", type: "email", value: email, onChange: setEmail, placeholder: placeholder, required: true, className: "flex-1" }), _jsx(Button, { rounded: "xl", type: "submit", disabled: loading, variant: "primary", paddingX: "lg", textSize: "sm", className: "shrink-0 py-3 font-bold transition-opacity disabled:opacity-60", 
                                 // audit-inline-style-ok: dynamic CSS
                                 style: {
                                     background: "var(--color-yellow, #FFE500)",
                                     color: "#0D0D0D",
-                                }, children: loading ? "…" : ctaLabel })] })), error && (_jsx(Text, { className: CLS_ERROR_TEXT, children: errorMessage })), _jsx(Text, { className: "mt-4 text-xs text-white/40", children: "No spam, ever. Unsubscribe anytime." })] })] }));
+                                }, children: loading ? "…" : ctaLabel })] })), error && (_jsx(Text, { className: CLS_ERROR_TEXT, children: errorMessage })), _jsx(Text, { color: "inverse", className: "mt-4 /40", size: "xs", children: "No spam, ever. Unsubscribe anytime." })] })] }));
 }

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

@@ -6,5 +6,5 @@ const __O = {
 };
 // --- Section -----------------------------------------------------------------
 export function NewsletterSection({ title, subtitle, privacyLabel, privacyHref, renderForm, className = "", }) {
-    return (_jsxs(Section, { className: `py-16 px-4 relative ${__O.hidden} ${className}`, children: [_jsx(Div, { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none", "aria-hidden": true }), _jsx(Div, { className: "absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none", "aria-hidden": true }), _jsx(Div, { className: "absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 max-w-2xl mx-auto text-center", children: [_jsx(Div, { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3", children: title }), subtitle && (_jsx(Text, { size: "base", className: "text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "text-zinc-400 dark:text-zinc-400 mt-4", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
+    return (_jsxs(Section, { className: `relative ${__O.hidden} ${className}`, paddingY: "y-4xl", paddingX: "x-md", children: [_jsx(Div, { className: "absolute inset-0 bg-[image:var(--appkit-gradient-section-cool)] pointer-events-none", "aria-hidden": true }), _jsx(Div, { className: "absolute -top-20 -right-20 w-80 h-80 bg-primary/5 dark:bg-primary/10 pointer-events-none", rounded: "full", "aria-hidden": true }), _jsx(Div, { className: "absolute -bottom-16 -left-16 w-64 h-64 bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", rounded: "full", "aria-hidden": true }), _jsxs(Div, { className: "relative z-10 max-w-2xl mx-auto text-center", children: [_jsx(Div, { layout: "inline-flex", align: "center", justify: "center", className: " w-14 h-14 bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", rounded: "2xl", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", smSize: "3xl", color: "primary", size: "2xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { size: "base", className: "mb-8 max-w-md mx-auto", color: "muted", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "mt-4", color: "faint", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
 }

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

@@ -8,17 +8,19 @@ const __P = {
 export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DEALS & PROMOS", }) {
     if (banners.length === 0)
         return null;
-    return (_jsx(Section, { className: "py-10 sm:py-16", style: {
+    return (
+    // audit-variant-ok: section — base paddingY=y-2xl + sm:py-16 responsive bump
+    _jsx(Section, { className: "sm:py-16", padding: "y-2xl", style: {
             background: "var(--dark-section-alt)",
             borderTop: "1px solid rgba(255,255,255,0.06)",
             borderBottom: "1px solid rgba(255,255,255,0.06)",
-        }, children: _jsxs(Div, { className: "mx-auto max-w-7xl px-4", children: [_jsx(Row, { wrap: true, align: "end", justify: "between", gap: "sm", className: "mb-7 gap-y-2", children: _jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-black uppercase tracking-widest", style: { color: "var(--color-red)", letterSpacing: "0.18em" }, children: eyebrow }), _jsx(Heading, { level: 2, style: {
+        }, children: _jsxs(Div, { className: "mx-auto max-w-7xl", padding: "x-md", children: [_jsx(Row, { wrap: true, align: "end", justify: "between", gap: "sm", className: "mb-7 gap-y-2", children: _jsxs(Div, { children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-widest", size: "xs", style: { color: "var(--color-red)", letterSpacing: "0.18em" }, children: eyebrow }), _jsx(Heading, { level: 2, style: {
                                     fontFamily: "var(--font-bangers, Bangers, cursive)",
                                     fontSize: "clamp(1.6rem, 4vw, 2.4rem)",
                                     letterSpacing: "0.08em",
                                     color: "#FFFFFF",
                                     lineHeight: 1,
-                                }, children: heading })] }) }), _jsx(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: banners.slice(0, 4).map((banner, i) => (_jsxs(Link, { href: banner.ctaUrl, className: `group relative block overflow-hidden ${i === 0 ? "sm:row-span-2" : ""}`, style: {
+                                }, children: heading })] }) }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", children: banners.slice(0, 4).map((banner, i) => (_jsxs(Link, { href: banner.ctaUrl, className: `group relative block overflow-hidden ${i === 0 ? "sm:row-span-2" : ""}`, style: {
                             minHeight: i === 0
                                 ? "clamp(220px, 32vh, 480px)"
                                 : "clamp(130px, 16vh, 240px)",
@@ -34,5 +36,5 @@ export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DE
                                             fontSize: i === 0 ? "1.35rem" : "1rem",
                                             letterSpacing: "0.06em",
                                             color: "#FFFFFF",
-                                        }, children: banner.title }), _jsxs(Span, { className: "mt-1 inline-flex items-center gap-1 text-xs font-black uppercase", style: { color: "var(--color-yellow)" }, children: [banner.ctaLabel, " \u2192"] })] })] }, banner.id))) })] }) }));
+                                        }, children: banner.title }), _jsxs(Span, { layout: "inline-flex", gap: "xs", className: "mt-1 font-black uppercase", size: "xs", style: { color: "var(--color-yellow)" }, children: [banner.ctaLabel, " \u2192"] })] })] }, banner.id))) })] }) }));
 }

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

@@ -1,26 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, HorizontalScroller, Section, Span, Text, TextLink, } from "../../../ui";
+import { THEMED_BG_SECONDARY, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY } from "../../../_internal/shared/styles/themed";
+import { SKELETON as skeleton } from "../../../_internal/shared/styles/skeleton";
+import { Div, Heading, HorizontalScroller, Row, Section, Span, Stack, Text, TextLink } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 const __O = {
     hidden: "overflow-hidden",
 };
 // --- Skeleton ----------------------------------------------------------------
 function CarouselSkeleton({ count }) {
-    const { skeleton } = THEME_CONSTANTS;
-    return (_jsx(Div, { className: `flex gap-4 ${__O.hidden} px-4`, children: Array.from({ length: count }).map((_, i) => (_jsxs(Div, { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", children: [_jsx(Div, { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) }));
+    const themed = { bgSecondary: THEMED_BG_SECONDARY, textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
+    return (_jsx(Div, { layout: "flex", gap: "4", className: `${__O.hidden}`, padding: "x-md", children: Array.from({ length: count }).map((_, i) => (_jsxs(Stack, { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)]", gap: "sm", children: [_jsx(Div, { className: `aspect-square ${skeleton.image}`, rounded: "xl" }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) }));
 }
 // --- Component ---------------------------------------------------------------
-export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = THEME_CONSTANTS.carousel.perView.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
+export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = CAROUSEL_PER_VIEW.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
     if (!isLoading && items.length === 0)
         return null;
     const hasBg = Boolean(backgroundImage);
     const useLightText = lightText ?? hasBg;
-    const { themed, flex } = THEME_CONSTANTS;
+    const themed = { bgSecondary: THEMED_BG_SECONDARY, textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
+    const headingGradient = !useLightText && headingVariant === "gradient" ? "brand" : "none";
     const headingClass = useLightText
         ? "text-white"
         : headingVariant === "gradient"
-            ? "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent"
+            ? ""
             : themed.textPrimary;
     const descVariant = useLightText ? "text-white/80" : themed.textSecondary;
     const pillClass = "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm";
@@ -33,13 +36,11 @@ export function SectionCarousel({ title, description, headingVariant = "editoria
             className,
         ]
             .filter(Boolean)
-            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx(Div, { className: `absolute inset-0 ${__O.hidden}`, children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx(Div, { className: "absolute inset-0 bg-black/55" })] })), _jsxs(Div, { className: "relative z-10 w-full max-w-7xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-6", children: [headingVariant === "editorial" && pillLabel && (_jsx(Div, { className: "mb-4", children: _jsxs(Span, { className: pillClass, children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 2, variant: "none", className: [
+            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx(Div, { className: `absolute inset-0 ${__O.hidden}`, children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), _jsxs(Div, { className: "relative z-10 w-full max-w-7xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-6", children: [headingVariant === "editorial" && pillLabel && (_jsx(Div, { className: "mb-4", children: _jsxs(Span, { className: pillClass, 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: 2, variant: "none", gradient: headingGradient, className: [
                                     "text-3xl md:text-4xl font-bold mb-2",
                                     headingVariant === "editorial" ? "font-display text-4xl" : "",
                                     headingClass,
                                 ]
                                     .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Div, { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-400 text-xs select-none`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: rows === 1, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 flex justify-center", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-1.5 rounded-lg border px-6 py-2.5 text-sm font-medium transition-colors ${useLightText
-                                ? "border-white/40 text-white hover:bg-white/10"
-                                : "border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"}`, children: viewMoreLabel }) }))] })] }));
+                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs(Row, { align: "center", justify: "center", gap: "sm", textSize: "xs", color: "faint", className: "mt-1 select-none", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `${descVariant} mt-2`, size: "base", children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, loop: rows === 1, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, pauseOnHover: true })), viewMoreHref && !isLoading && (_jsx(Row, { className: "mt-6", justify: "center", children: _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "sm", href: viewMoreHref, className: `inline-flex items-center gap-1.5 border transition-colors ${useLightText ? "border-white/40 text-white hover:bg-white/10" : "border-zinc-200 dark:border-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800"}`, size: "sm", weight: "medium", children: viewMoreLabel }) }))] })] }));
 }

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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Grid, Heading, Section, Span, Text, TextLink } from "../../../ui";
+import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed";
+import { Div, Grid, Heading, Row, Section, Span, Text, TextLink } from "../../../ui";
 // --- Single card -------------------------------------------------------------
 function SecurityCard({ item, visible, delay, }) {
     const colorClass = item.colorClass ??
@@ -14,11 +14,11 @@ function SecurityCard({ item, visible, delay, }) {
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
         ].join(" "), 
         // audit-inline-style-ok: computed timing
-        style: { transitionDelay: `${delay}ms` }, "data-section": "securityhighlightssection-div-357", children: [item.renderIcon && (_jsx(Div, { className: "w-10 h-10 rounded-lg bg-white/60 dark:bg-white/10 flex items-center justify-center mb-3", children: _jsx("span", { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "font-semibold mb-1", children: item.title }), _jsx(Text, { variant: "secondary", className: "text-sm leading-relaxed", children: item.description })] }));
+        style: { transitionDelay: `${delay}ms` }, "data-section": "securityhighlightssection-div-357", children: [item.renderIcon && (_jsx(Row, { className: "w-10 h-10 mb-3", surface: "default", align: "center", justify: "center", rounded: "lg", children: _jsx(Span, { className: iconColorClass, "aria-hidden": "true", children: item.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Text, { className: "mb-1", weight: "semibold", children: item.title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: item.description })] }));
 }
 // --- Section -----------------------------------------------------------------
 export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, learnMoreHref, learnMoreLabel = "Learn more →", className = "", }) {
-    const { themed } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     const sectionRef = useRef(null);
     const [visible, setVisible] = useState(false);
     useEffect(() => {
@@ -34,5 +34,7 @@ export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, l
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `py-14 px-4 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-10", children: [pillLabel && (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `mt-4 text-3xl md:text-4xl font-bold ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-2 max-w-xl mx-auto", children: subtitle }))] }), _jsx(Grid, { gap: "none", className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5", children: items.map((item, index) => (_jsx(SecurityCard, { item: item, visible: visible, delay: index * 100 }, item.key))) }), learnMoreHref && (_jsx(Div, { className: "text-center mt-8", children: _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, paddingY: "y-2-5xl", className: className, surface: "muted", paddingX: "x-md", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: "text-center mb-10", children: [pillLabel && (
+                        // audit-variant-ok: eyebrow pill — primary-500/30 border + primary-500/10 bg + tracking-[0.2em] + backdrop-blur-sm
+                        _jsx(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: pillLabel })), _jsx(Heading, { level: 2, className: `mt-4 ${themed.textPrimary}`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-2 max-w-xl mx-auto", children: subtitle }))] }), _jsx(Grid, { gap: "none", className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5", children: items.map((item, index) => (_jsx(SecurityCard, { item: item, visible: visible, delay: index * 100 }, item.key))) }), learnMoreHref && (_jsx(Div, { className: "text-center mt-8", children: _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel }) }))] }) }));
 }

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

@@ -3,10 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Div, Heading, HorizontalScroller, Section, Span, Text } from "../../../ui";
+import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed";
+import { Div, Heading, HorizontalScroller, Row, Section, Span, Stack, Text } from "../../../ui";
 import { ROUTES } from "../../../next";
 import { useTopCategories } from "../hooks/useTopCategories";
+import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view";
 const __P = {
     p3: "p-3",
 };
@@ -21,7 +22,7 @@ function CategoryChip({ category }) {
     const coverImage = category.display?.coverImage;
     const initial = category.name[0]?.toUpperCase() ?? "?";
     const productCount = category.metrics?.productCount ?? 0;
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full min-h-[180px] sm:min-h-[220px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-600", children: [coverImage && isImageUrl(coverImage) ? (_jsx(Div, { className: `aspect-video w-full ${__O.hidden} bg-zinc-100 dark:bg-slate-800`, children: _jsx(Image, { src: coverImage, alt: category.name, width: 320, height: 180, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { className: "aspect-video w-full bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs(Div, { className: `flex flex-1 flex-col ${__P.p3} text-left`, children: [_jsx(Div, { className: "mb-2 flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100 text-sm font-bold text-primary-700 dark:bg-primary-900 dark:text-primary-300", children: iconSrc && isImageUrl(iconSrc) ? (_jsx(Image, { src: iconSrc, alt: "", width: 24, height: 24, className: "h-6 w-6 rounded object-cover", "aria-hidden": true })) : iconSrc ? (_jsx(Span, { size: "lg", "aria-hidden": "true", className: "leading-none", children: iconSrc })) : (initial) }), _jsx(Text, { className: `${THEME_CONSTANTS.utilities.textClamp2} text-sm font-semibold text-zinc-800 dark:text-zinc-200`, children: category.name }), _jsxs(Text, { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto pt-3 text-xs font-medium text-primary dark:text-primary-400", children: "Browse category \u2192" })] })] }));
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full min-h-[180px] sm:min-h-[220px] flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-900 dark:hover:border-primary-600", children: [coverImage && isImageUrl(coverImage) ? (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, surface: "subtle", children: _jsx(Image, { src: coverImage, alt: category.name, width: 320, height: 180, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { surface: "muted", className: "aspect-video w-full" })), _jsxs(Stack, { className: `flex-1 ${__P.p3} text-left`, children: [_jsx(Row, { textWeight: "bold", textSize: "sm", className: "mb-2 h-9 w-9 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: iconSrc && isImageUrl(iconSrc) ? (_jsx(Image, { src: iconSrc, alt: "", width: 24, height: 24, className: "h-6 w-6 rounded object-cover", "aria-hidden": true })) : iconSrc ? (_jsx(Span, { size: "lg", "aria-hidden": "true", className: "leading-none", children: iconSrc })) : (initial) }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", truncate: 2, children: category.name }), _jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto pt-3 text-primary dark:text-primary-400", size: "xs", weight: "medium", children: "Browse category \u2192" })] })] }));
 }
 const CTA_CLASSES = {
     filled: "rounded-lg bg-[var(--appkit-color-primary)] px-5 py-2 text-sm font-semibold text-white hover:opacity-90",
@@ -37,7 +38,7 @@ function FilterChip({ label, active, onClick, }) {
         ].join(" "), children: label }));
 }
 export function ShopByCategorySection({ title = "Shop by Category", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "View all categories →", className = "", initialItems, cta, filters, }) {
-    const { themed } = THEME_CONSTANTS;
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     const { data: allCategories = [], isLoading } = useTopCategories(limit, { initialData: initialItems });
     const [activeFilter, setActiveFilter] = useState("all");
     // Build client-side filter chip options from root-level parent IDs
@@ -62,10 +63,14 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
     const categories = filtered.length > 0 ? filtered : allCategories;
     if (!isLoading && allCategories.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-10 px-4 md:py-12 ${themed.bgSecondary} ${className}`, children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Div, { className: "mb-6 text-center", children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), hasFilters && !isLoading && (_jsxs(Div, { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(FilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), rootIds.slice(0, 5).map((id) => {
+    return (
+    // audit-variant-ok: section — base paddingY=y-2xl + md:py-12 responsive bump (paddingY ladder lacks responsive md-up form)
+    _jsx(Section, { className: `md:py-12 ${className}`, surface: "subtle", paddingY: "y-2xl", paddingX: "x-md", children: _jsxs(Div, { className: "mx-auto max-w-7xl", children: [_jsxs(Div, { className: "mb-6 text-center", children: [_jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1", size: "sm", children: subtitle }))] }), hasFilters && !isLoading && (_jsxs(Row, { wrap: true, gap: "sm", className: "mb-4", children: [_jsx(FilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), rootIds.slice(0, 5).map((id) => {
                             const cat = allCategories.find((c) => c.id === id);
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx(Div, { className: `flex gap-3 ${__O.hidden} px-1`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: true, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (
+                // audit-variant-ok: loading-row carousel — px-1 nudge spacing; PADDING_MAP x-only lacks px-1
+                _jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-1`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: true, autoScrollInterval: 3500, showArrows: true, snapToItems: true, showFadeEdges: true, showScrollbar: false, loop: true, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-1 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY } from "../../../_internal/shared/styles/themed";
 import { Div, Grid, Heading, Section, Text } from "../../../ui";
 const __P = {
     p8: "p-8",
 };
 // --- Section -----------------------------------------------------------------
 export function SiteFeaturesSection({ title, subtitle, features, className = "", }) {
-    const { themed } = THEME_CONSTANTS;
-    return (_jsx(Section, { className: `${__P.p8} ${themed.bgSecondary} ${className}`, children: _jsxs(Div, { className: "w-full", children: [_jsxs(Div, { className: "text-center mb-12", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-2xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8", children: features.map((feature) => (_jsxs("div", { className: "p-6 text-center hover:shadow-lg transition-all group rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800", children: [_jsx(Div, { className: "text-6xl mb-4 group-hover:scale-110 transition-transform", children: feature.icon }), _jsx(Heading, { level: 3, className: `text-base font-bold ${themed.textPrimary} mb-2`, children: feature.title }), _jsx(Text, { className: `text-base ${themed.textSecondary}`, children: feature.description })] }, feature.id))) })] }) }));
+    const themed = { textPrimary: THEMED_TEXT_PRIMARY, textSecondary: THEMED_TEXT_SECONDARY };
+    return (_jsx(Section, { className: `${__P.p8} ${className}`, surface: "subtle", children: _jsxs(Div, { className: "w-full", children: [_jsxs(Div, { className: "text-center mb-12", children: [_jsx(Heading, { level: 2, className: `${themed.textPrimary} mb-3`, size: "3xl", mdSize: "4xl", weight: "bold", children: title }), subtitle && (_jsx(Text, { className: `${themed.textSecondary} max-w-2xl mx-auto`, size: "base", children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-8", children: features.map((feature) => (_jsxs("div", { className: "p-6 text-center hover:shadow-lg transition-all group rounded-2xl bg-white dark:bg-slate-900 border border-zinc-100 dark:border-slate-800", children: [_jsx(Div, { className: "text-6xl mb-4 group-hover:scale-110 transition-transform", children: feature.icon }), _jsx(Heading, { level: 3, className: `${themed.textPrimary} mb-2`, size: "base", weight: "bold", children: feature.title }), _jsx(Text, { className: `${themed.textSecondary}`, size: "base", children: feature.description })] }, feature.id))) })] }) }));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Div, Heading, Section, Text } from "../../../ui";
-import { THEME_CONSTANTS } from "../../../tokens";
+import { normalizeError } from "../../../errors/normalize";
+import { Div, Heading, Row, Section, Stack, Text } from "../../../ui";
 import { SocialPostCard } from "./SocialPostCard";
 import { fetchInstagramPosts, fetchFacebookPosts, fetchTikTokPosts, fetchDeviantArtPosts, } from "../lib/social-feed-fetcher";
 import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
@@ -23,11 +23,11 @@ function platformProfileUrl(platform, handle) {
 }
 // --- Skeleton ----------------------------------------------------------------
 function SocialFeedSkeleton({ count }) {
-    return (_jsx(Div, { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3", children: Array.from({ length: count }).map((_, i) => (_jsx(Div, { className: "aspect-square rounded-xl bg-zinc-200 dark:bg-zinc-700 animate-pulse" }, i))) }));
+    return (_jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: count }).map((_, i) => (_jsx(Div, { className: "aspect-square animate-pulse", surface: "subtle", rounded: "xl" }, i))) }));
 }
 // --- Empty state -------------------------------------------------------------
 function SocialFeedEmpty({ platform }) {
-    return (_jsxs(Div, { className: "flex flex-col items-center justify-center py-16 text-zinc-400", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }), _jsx("path", { d: "M9 9h6M9 12h6M9 15h4" })] }), _jsxs(Text, { size: "sm", children: ["No posts from ", PLATFORM_LABELS[platform], " yet."] })] }));
+    return (_jsxs(Stack, { justify: "center", color: "faint", padding: "y-4xl", align: "center", children: [_jsxs("svg", { className: "w-10 h-10 mb-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "3" }), _jsx("path", { d: "M9 9h6M9 12h6M9 15h4" })] }), _jsxs(Text, { size: "sm", children: ["No posts from ", PLATFORM_LABELS[platform], " yet."] })] }));
 }
 // --- Server fetch ------------------------------------------------------------
 async function loadPosts(config) {
@@ -82,6 +82,7 @@ async function loadPosts(config) {
         }
     }
     catch (err) {
+        void normalizeError(err);
         const message = err instanceof Error ? err.message : "Unknown error";
         console.error(`[SocialFeedSection] ${platform} fetch failed:`, message);
         return { posts: [], error: `Could not load ${PLATFORM_LABELS[platform]} posts right now.` };
@@ -89,7 +90,6 @@ async function loadPosts(config) {
 }
 export async function SocialFeedSection(config) {
     const { title, subtitle, platform, handle, layout, showCaption, showStats, count } = config;
-    const { themed } = THEME_CONSTANTS;
     const { posts, error } = await loadPosts(config);
     const profileUrl = handle ? platformProfileUrl(platform, handle) : null;
     const gridClass = layout === "carousel"
@@ -98,9 +98,9 @@ export async function SocialFeedSection(config) {
             ? "columns-2 sm:columns-3 lg:columns-4 gap-3 space-y-3"
             : "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3";
     const cardClass = layout === "carousel"
-        ? "flex-shrink-0 w-48 sm:w-56 snap-start"
+        ? "flex-shrink-0 w-[85%] sm:w-56 snap-start"
         : layout === "masonry"
             ? "break-inside-avoid"
             : "";
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs(Div, { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), profileUrl && (_jsxs("a", { href: profileUrl, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] }))] }), error ? (_jsx(Div, { className: "py-12 text-center text-zinc-400 text-sm", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx(Div, { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx(Div, { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
+    return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: "w-full max-w-7xl mx-auto", padding: "x-md", children: [_jsxs(Row, { className: "mb-8", align: "end", justify: "between", gap: "md", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), profileUrl && (_jsxs("a", { href: profileUrl, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] }))] }), error ? (_jsx(Div, { textSize: "sm", className: "text-center", color: "faint", padding: "y-3xl", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx(Div, { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx(Div, { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
 }

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Span, Text } from "../../../ui";
+import { Div, Row, Span, Stack, Text } from "../../../ui";
 const __P = {
     p3: "p-3",
 };
@@ -8,27 +8,27 @@ const __P = {
 const PLATFORM_META = {
     instagram: {
         label: "Instagram",
-        colorClass: "bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400",
+        colorClass: "bg-[image:var(--appkit-gradient-instagram)]",
         icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) })),
     },
     facebook: {
         label: "Facebook",
-        colorClass: "bg-[var(--appkit-color-facebook,#1877F2)]",
+        colorClass: "bg-[var(--appkit-color-facebook)]",
         icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })),
     },
     tiktok: {
         label: "TikTok",
-        colorClass: "bg-[var(--appkit-color-tiktok,#010101)]",
+        colorClass: "bg-[var(--appkit-color-tiktok)]",
         icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" }) })),
     },
     deviantart: {
         label: "DeviantArt",
-        colorClass: "bg-[var(--appkit-color-deviantart,#05CC47)]",
+        colorClass: "bg-[var(--appkit-color-deviantart)]",
         icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M19.207 4.794l.23-.43V0h-4.169l-.321.33-1.445 2.698-.428.33H4.793v5.994l.289.321 1.156 2.168v.065l-1.156 2.168-.289.321V19.8h8.481l.428.33 1.445 2.698.321.329h4.169v-4.364l-.23-.43-1.09-2.044v-.064l1.09-2.044.23-.43V4.794zM14.72 14.058h-4.53v-4.116h4.53v4.116z" }) })),
     },
     youtube: {
         label: "YouTube",
-        colorClass: "bg-[var(--appkit-color-youtube,#FF0000)]",
+        colorClass: "bg-[var(--appkit-color-youtube)]",
         icon: (_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) })),
     },
 };
@@ -47,12 +47,14 @@ function YouTubeCard({ post, showCaption }) {
     const thumbnail = `https://img.youtube.com/vi/${post.videoId}/maxresdefault.jpg`;
     const href = `https://youtu.be/${post.videoId}`;
     const meta = PLATFORM_META.youtube;
-    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-video w-full overflow-hidden rounded-xl bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-youtube,#FF0000)]", "aria-label": post.caption ?? `Watch on YouTube`, children: [_jsx("img", { src: thumbnail, alt: post.caption ?? "YouTube video", className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" }), _jsx(Div, { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Div, { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[var(--appkit-color-youtube,#FF0000)] shadow-lg transition-transform duration-200 group-hover:scale-110", children: _jsx("svg", { className: "ml-1 h-6 w-6 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), _jsxs(Div, { className: `absolute right-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), post.channelName && (_jsx(Div, { className: "absolute bottom-2 left-2 rounded bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm", children: post.channelName })), showCaption && post.caption && (_jsx(Div, { className: `absolute inset-0 flex flex-col justify-end bg-black/60 ${__P.p3} opacity-0 transition-opacity duration-200 group-hover:opacity-100`, children: _jsx(Text, { className: "line-clamp-2 text-xs text-white", children: post.caption }) }))] }));
+    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-video w-full overflow-hidden rounded-xl bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-youtube)]", "aria-label": post.caption ?? `Watch on YouTube`, children: [_jsx("img", { src: thumbnail, alt: post.caption ?? "YouTube video", className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" }), _jsx(Row, { className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Row, { className: "h-14 w-14 bg-[var(--appkit-color-youtube)] transition-transform duration-200 group-hover:scale-110", align: "center", justify: "center", rounded: "full", shadow: "lg", children: _jsx("svg", { className: "ml-1 h-6 w-6 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), _jsxs(Row, { textWeight: "medium", textSize: "xs", className: `absolute right-2 top-2 px-1.5 text-white ${meta.colorClass}`, padding: "y-2xs", align: "center", gap: "xs", rounded: "default", children: [meta.icon, _jsx(Span, { className: "hidden sm:inline", children: meta.label })] }), post.channelName && (
+            // audit-variant-ok: channel badge — absolute-positioned + py-0.5 between-key + backdrop-blur-sm
+            _jsx(Div, { textSize: "xs", surface: "overlay-lg", className: "absolute bottom-2 left-2 py-0.5 text-white backdrop-blur-sm", padding: "x-xs", rounded: "default", children: post.channelName })), showCaption && post.caption && (_jsx(Stack, { justify: "end", surface: "overlay-lg", className: `absolute inset-0 ${__P.p3} opacity-0 transition-opacity duration-200 group-hover:opacity-100`, children: _jsx(Text, { color: "inverse", className: "line-clamp-2", size: "xs", children: post.caption }) }))] }));
 }
 export function SocialPostCard({ post, showCaption = true, showStats = true }) {
     if (post.platform === "youtube") {
         return _jsx(YouTubeCard, { post: post, showCaption: showCaption });
     }
     const meta = PLATFORM_META[post.platform];
-    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-square overflow-hidden rounded-xl bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)] dark:bg-zinc-800", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx(Div, { className: "flex h-full w-full items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx(Span, { size: "sm", className: "text-zinc-400", children: "No preview" }) })), post.mediaType === "video" && (_jsx(Div, { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx(Div, { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm", children: _jsx("svg", { className: "ml-1 h-5 w-5 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx(Div, { className: "pointer-events-none absolute right-2 top-2", children: _jsx(Div, { className: "flex h-6 w-6 items-center justify-center rounded bg-black/50 backdrop-blur-sm", children: _jsxs("svg", { className: "h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs(Div, { className: `absolute left-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs(Div, { className: `pointer-events-none absolute inset-0 flex flex-col justify-end bg-black/70 ${__P.p3} opacity-0 transition-opacity duration-200 group-hover:opacity-100`, children: [showCaption && post.caption && (_jsx(Text, { className: "mb-2 line-clamp-3 text-xs text-white", children: post.caption })), showStats && (_jsxs(Div, { className: "flex items-center gap-3 text-xs text-white/80", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
+    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-square overflow-hidden rounded-xl bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)] dark:bg-zinc-800", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx(Row, { className: "h-full w-full", surface: "subtle", align: "center", justify: "center", children: _jsx(Span, { size: "sm", color: "faint", children: "No preview" }) })), post.mediaType === "video" && (_jsx(Row, { className: "pointer-events-none absolute inset-0", align: "center", justify: "center", children: _jsx(Row, { surface: "overlay-sm", className: "h-12 w-12 backdrop-blur-sm", align: "center", justify: "center", rounded: "full", children: _jsx("svg", { className: "ml-1 h-5 w-5 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx(Div, { className: "pointer-events-none absolute right-2 top-2", children: _jsx(Row, { surface: "overlay-sm", className: "h-6 w-6 backdrop-blur-sm", rounded: "default", align: "center", justify: "center", children: _jsxs("svg", { className: "h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs(Row, { textWeight: "medium", textSize: "xs", className: `absolute left-2 top-2 px-1.5 text-white ${meta.colorClass}`, padding: "y-2xs", align: "center", gap: "xs", rounded: "default", children: [meta.icon, _jsx(Span, { className: "hidden sm:inline", children: meta.label })] }), _jsxs(Stack, { justify: "end", surface: "overlay-xl", className: `pointer-events-none absolute inset-0 ${__P.p3} opacity-0 transition-opacity duration-200 group-hover:opacity-100`, children: [showCaption && post.caption && (_jsx(Text, { color: "inverse", className: "mb-2 line-clamp-3", size: "xs", children: post.caption })), showStats && (_jsxs(Row, { textSize: "xs", className: "text-white/80", align: "center", gap: "3", children: [post.stats.likes != null && (_jsxs(Span, { layout: "flex", gap: "xs", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs(Span, { layout: "flex", gap: "xs", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs(Span, { layout: "flex", gap: "xs", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
 }

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Div, Grid, Heading, Section, Text } from "../../../ui";
+import { Div, Grid, Heading, Row, Section, Text } from "../../../ui";
 // --- Smngle stat mtem ---------------------------------------------------------
 function StatCard({ stat, visible, delay, isLast, }) {
     return (_jsxs(Div, { className: [
@@ -11,7 +11,9 @@ function StatCard({ stat, visible, delay, isLast, }) {
             !isLast ? "border-r border-zinc-200 dark:border-slate-700" : "",
         ].join(" "), 
         // audit-inline-style-ok: computed timing
-        style: { transitionDelay: `${delay}ms` }, children: [stat.renderIcon && (_jsx(Div, { className: "mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30", children: stat.renderIcon({ className: "w-7 h-7" }) })), _jsx(Heading, { level: 2, variant: "none", className: "mb-1 font-display text-4xl font-black bg-gradient-to-r from-primary to-secondary dark:from-primary dark:to-cobalt-400 bg-clip-text text-transparent md:text-5xl", children: stat.value }), _jsx(Text, { variant: "none", className: "text-xs uppercase tracking-widest text-zinc-500 dark:text-zinc-400 font-medium", children: stat.label })] }));
+        style: { transitionDelay: `${delay}ms` }, children: [stat.renderIcon && (
+            // audit-variant-ok: icon container — fixed h-14/w-14 + bg-primary-50 + border-primary-100 themed icon-box
+            _jsx(Row, { className: "mb-4 h-14 w-14 bg-primary-50 dark:bg-primary-950/40 border border-primary-100 dark:border-primary-900/30", align: "center", justify: "center", rounded: "2xl", children: stat.renderIcon({ className: "w-7 h-7" }) })), _jsx(Heading, { level: 2, variant: "none", gradient: "brand", className: "mb-1 font-display font-black", mdSize: "5xl", size: "4xl", children: stat.value }), _jsx(Text, { variant: "none", className: "uppercase tracking-widest", color: "muted", size: "xs", weight: "medium", children: stat.label })] }));
 }
 // --- Sectmon -----------------------------------------------------------------
 export function StatsCounterSection({ stats, className = "", }) {
@@ -30,5 +32,5 @@ export function StatsCounterSection({ stats, className = "", }) {
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `bg-white dark:bg-slate-900 border-y border-zinc-100 dark:border-slate-800 px-4 py-14 ${className}`, children: _jsx(Div, { className: "mx-auto max-w-5xl", children: _jsx(Grid, { gap: "none", className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: stats.map((stat, i) => (_jsx(StatCard, { stat: stat, visible: visible, delay: i * 120, isLast: i === stats.length - 1 }, stat.key))) }) }) }));
+    return (_jsx(Section, { border: "subtle", paddingY: "y-2-5xl", ref: sectionRef, className: `border-y ${className}`, paddingX: "x-md", surface: "default", children: _jsx(Div, { className: "mx-auto max-w-5xl", children: _jsx(Grid, { gap: "none", className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: stats.map((stat, i) => (_jsx(StatCard, { stat: stat, visible: visible, delay: i * 120, isLast: i === stats.length - 1 }, stat.key))) }) }) }));
 }

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Heading, Section, StarRating, Text } from "../../../ui";
+import { Div, Heading, Section, Stack, StarRating, Text } from "../../../ui";
 export function TestimonialsCarousel({ testimonials, eyebrow = "COLLECTOR REVIEWS", heading = "WHAT OUR COLLECTORS SAY", }) {
     if (testimonials.length === 0)
         return null;
@@ -12,18 +12,18 @@ export function TestimonialsCarousel({ testimonials, eyebrow = "COLLECTOR REVIEW
             flexDirection: "column",
             justifyContent: "center",
             paddingBlock: "clamp(3rem, 6vh, 5rem)",
-        }, children: _jsxs(Div, { className: "mx-auto w-full max-w-7xl px-6 sm:px-8 flex flex-col", style: { minHeight: 0 }, children: [_jsxs(Div, { className: "mb-6 text-center", style: { flexShrink: 0 }, children: [_jsx(Text, { className: "mb-1 text-xs font-black uppercase tracking-widest", style: { color: "var(--color-red)", letterSpacing: "0.18em" }, children: eyebrow }), _jsx(Heading, { level: 2, style: {
+        }, children: _jsxs(Stack, { className: "mx-auto w-full max-w-7xl sm:px-8", padding: "x-lg", style: { minHeight: 0 }, children: [_jsxs(Div, { className: "mb-6 text-center", style: { flexShrink: 0 }, children: [_jsx(Text, { className: "mb-1 font-black uppercase tracking-widest", size: "xs", style: { color: "var(--color-red)", letterSpacing: "0.18em" }, children: eyebrow }), _jsx(Heading, { level: 2, style: {
                                 fontFamily: "var(--font-bangers, Bangers, cursive)",
                                 fontSize: "clamp(1.8rem, 4vw, 2.8rem)",
                                 letterSpacing: "0.08em",
                                 color: "var(--section-title-color)",
                                 lineHeight: 1,
-                            }, children: heading })] }), _jsx(Div, { className: "flex flex-col flex-wrap gap-4 overflow-x-auto scrollbar-none", style: { maxHeight: "50svh", alignContent: "flex-start" }, children: testimonials.map((t) => (_jsxs(Div, { className: "flex shrink-0 flex-col gap-3 p-5", style: {
+                            }, children: heading })] }), _jsx(Stack, { className: "flex-wrap overflow-x-auto scrollbar-none", gap: "md", style: { maxHeight: "50svh", alignContent: "flex-start" }, children: testimonials.map((t) => (_jsxs(Stack, { padding: "5", className: "shrink-0", gap: "3", style: {
                             width: "clamp(260px, 28vw, 360px)",
                             background: "var(--card-bg)",
                             border: "var(--card-border)",
                             boxShadow: "var(--card-shadow)",
-                        }, children: [_jsx(StarRating, { value: t.rating, readOnly: true, size: "sm" }), _jsxs(Text, { className: "flex-1 text-sm leading-relaxed", style: { color: "var(--text-secondary)" }, children: ["\u201C", t.text, "\u201D"] }), _jsxs(Text, { className: "text-xs font-black uppercase", style: {
+                        }, children: [_jsx(StarRating, { value: t.rating, readOnly: true, size: "sm" }), _jsxs(Text, { className: "flex-1 leading-relaxed", size: "sm", style: { color: "var(--text-secondary)" }, children: ["\u201C", t.text, "\u201D"] }), _jsxs(Text, { className: "font-black uppercase", size: "xs", style: {
                                     color: "var(--color-yellow)",
                                     letterSpacing: "0.06em",
                                 }, children: ["\u2014 ", t.name] })] }, t.id))) })] }) }));