@mohasinac/appkit 3.0.0 → 3.0.2

package/dist/features/homepage/api/route.js

@@ -132,7 +132,6 @@ export const POST = createRouteHandler({
             enabled: body.enabled ?? true,
             createdAt: now,
             updatedAt: now,
-            // audit-unknown-ok: TS structural escape — HomepageSection
         });
         return NextResponse.json({ success: true, data: created }, { status: 201 });
     },

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

@@ -19,15 +19,11 @@ function AdsenseAd({ config }) {
             // AdSense not loaded yet — no-op
         }
     }, []);
-    return (_jsx(Div, { ref: ref, children: _jsx("ins", { className: "adsbygoogle", 
-            // audit-inline-style-ok: dynamic CSS
-            style: { display: "block" }, "data-ad-client": config.adsenseClient ?? "", "data-ad-slot": config.adsenseSlot ?? "", "data-ad-format": config.adsenseFormat ?? "auto", "data-full-width-responsive": "true" }) }));
+    return (_jsx(Div, { ref: ref, children: _jsx("ins", { className: "adsbygoogle", style: { display: "block" }, "data-ad-client": config.adsenseClient ?? "", "data-ad-slot": config.adsenseSlot ?? "", "data-ad-format": config.adsenseFormat ?? "auto", "data-full-width-responsive": "true" }) }));
 }
 function ThirdPartyAd({ config }) {
     if (config.thirdPartyUrl) {
-        return (_jsx("iframe", { src: config.thirdPartyUrl, width: config.thirdPartyWidth ?? "100%", height: config.thirdPartyHeight ?? "90", scrolling: "no", frameBorder: "0", title: "Advertisement", 
-            // audit-inline-style-ok: dynamic CSS
-            style: { border: 0, overflow: "hidden" }, loading: "lazy" }));
+        return (_jsx("iframe", { src: config.thirdPartyUrl, width: config.thirdPartyWidth ?? "100%", height: config.thirdPartyHeight ?? "90", scrolling: "no", frameBorder: "0", title: "Advertisement", style: { border: 0, overflow: "hidden" }, loading: "lazy" }));
     }
     return null;
 }
@@ -35,9 +31,7 @@ function ManualAdBanner({ ad }) {
     const { creative } = ad;
     if (!creative)
         return null;
-    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs(Div, { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "truncate", color: "muted", size: "xs", children: creative.body })) : null] }), creative.ctaLabel ? (
-            // audit-variant-ok: CTA pill — bg-primary + py-1.5 (between Span padding map keys)
-            _jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "flex-shrink-0 bg-primary py-1.5", rounded: "md", padding: "x-sm", children: creative.ctaLabel })) : null] }));
+    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs(Div, { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "truncate", color: "muted", size: "xs", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx(Span, { color: "inverse", size: "xs", weight: "semibold", className: "flex-shrink-0 bg-primary py-1.5", rounded: "md", padding: "x-sm", children: creative.ctaLabel })) : null] }));
 }
 // ---------------------------------------------------------------------------
 // Primary component

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

@@ -22,11 +22,7 @@ export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", on
     }
     // -- Split layout: when a backgroundImage is provided --
     if (backgroundImage) {
-        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: `relative ${__O.hidden} bg-zinc-900`, rounded: "2xl", shadow: "xl", children: _jsxs(Grid, { className: `${GRID_COLS_2_MD} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${CARD_ASPECT_BANNER} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx(Scrim, { direction: "right-to-left", intensity: "medium", className: "hidden md:block absolute inset-y-0 right-0 w-24" })] }), _jsxs(Stack, { justify: "center", className: "relative px-8 md:px-12 md:py-14", padding: "y-2xl", children: [_jsx(Div, { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (
-                                    // audit-variant-ok: translucent-white tag pill over dark ad — no white-overlay surface variant + wide tracking + backdrop-blur
-                                    _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "self-start bg-white/10 /80 tracking-widest mb-5 backdrop-blur-sm", rounded: "full", padding: "pill-md", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "font-extrabold mb-4 leading-tight", mdSize: "4xl", lgSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/75 mb-8 leading-relaxed", mdSize: "lg", size: "base", children: subtitle })), ctaLabel && onCtaClick && (
-                                    // audit-variant-ok: white CTA pill over dark ad — bg-white + dark-mode preserved zinc tones override Button.variant secondary
-                                    _jsxs(Button, { gap: "md", variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 font-semibold shadow-lg", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+        return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: `relative ${__O.hidden} bg-zinc-900`, rounded: "2xl", shadow: "xl", children: _jsxs(Grid, { className: `${GRID_COLS_2_MD} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${CARD_ASPECT_BANNER} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx(Scrim, { direction: "right-to-left", intensity: "medium", className: "hidden md:block absolute inset-y-0 right-0 w-24" })] }), _jsxs(Stack, { justify: "center", className: "relative px-8 md:px-12 md:py-14", padding: "y-2xl", children: [_jsx(Div, { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "self-start bg-white/10 /80 tracking-widest mb-5 backdrop-blur-sm", rounded: "full", padding: "pill-md", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "font-extrabold mb-4 leading-tight", mdSize: "4xl", lgSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "/75 mb-8 leading-relaxed", mdSize: "lg", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { gap: "md", variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 font-semibold shadow-lg", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
     }
     // -- Full-width gradient layout --
     return (_jsx(Section, { className: `${__P.p8} ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsxs(Row, { align: "center", className: [
@@ -34,11 +30,5 @@ export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", on
                     compact
                         ? "h-[clamp(112px,16vh,160px)]"
                         : "min-h-[clamp(240px,34vh,360px)]",
-                ].join(" "), 
-                // audit-inline-style-ok: optional inline color
-                style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx(Div, { className: CLS_GRADIENT_BG, "aria-hidden": true })), _jsxs(Div, { className: `absolute inset-0 ${__O.hidden}`, "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 bg-primary/20 blur-3xl animate-pulse", rounded: "full" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 bg-cobalt/20 blur-3xl animate-pulse", rounded: "full" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full", gap: "md", padding: "inlineLg", children: [_jsxs(Span, { layout: "inline-flex", gap: "md", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { color: "inverse", size: "sm", weight: "semibold", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: CLS_CTA_BTN_SM, children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (
-                    // audit-variant-ok: gradient banner content — responsive md:py-16 ladder beyond y-3xl base
-                    _jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto md:py-16 text-center", paddingY: "y-3xl", paddingX: "x-lg", children: [tagLabel && (
-                            // audit-variant-ok: translucent-white tag pill over gradient ad — no white-overlay surface variant + shadow-sm + backdrop-blur
-                            _jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "bg-white/15 /90 tracking-widest mb-5 backdrop-blur-sm shadow-sm", rounded: "full", padding: "pill-lg", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "lg:text-6xl font-extrabold mb-4 drop-shadow-lg leading-tight", mdSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "mb-10 max-w-2xl mx-auto", mdSize: "xl", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: CLS_CTA_BTN_LG, children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
+                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx(Div, { className: CLS_GRADIENT_BG, "aria-hidden": true })), _jsxs(Div, { className: `absolute inset-0 ${__O.hidden}`, "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 bg-primary/20 blur-3xl animate-pulse", rounded: "full" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 bg-cobalt/20 blur-3xl animate-pulse", rounded: "full" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full", gap: "md", padding: "inlineLg", children: [_jsxs(Span, { layout: "inline-flex", gap: "md", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { color: "inverse", size: "sm", weight: "semibold", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: CLS_CTA_BTN_SM, children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto md:py-16 text-center", paddingY: "y-3xl", paddingX: "x-lg", children: [tagLabel && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "semibold", className: "bg-white/15 /90 tracking-widest mb-5 backdrop-blur-sm shadow-sm", rounded: "full", padding: "pill-lg", transform: "uppercase", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "lg:text-6xl font-extrabold mb-4 drop-shadow-lg leading-tight", mdSize: "5xl", size: "3xl", children: title }), subtitle && (_jsx(Text, { color: "inverse", variant: "none", className: "mb-10 max-w-2xl mx-auto", mdSize: "xl", size: "base", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: CLS_CTA_BTN_LG, children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
 }

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

@@ -55,9 +55,5 @@ export function BeforeAfterCard({ item, beforeLabel = "Before", afterLabel = "Af
                         setPosition((p) => Math.max(0, p - 2));
                     if (e.key === "ArrowRight")
                         setPosition((p) => Math.min(100, p + 2));
-                }, children: [_jsx(Image, { src: item.afterImage, alt: afterLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }), _jsx(Div, { className: "absolute inset-0 overflow-hidden", 
-                        // audit-inline-style-ok: computed percentage
-                        style: { width: `${position}%` }, children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx(Div, { className: "absolute top-0 bottom-0 z-10 w-0.5 bg-card", shadow: "md", 
-                        // audit-inline-style-ok: computed percentage
-                        style: { left: `${position}%` }, children: _jsx(Row, { className: "absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 bg-card", align: "center", justify: "center", rounded: "full", shadow: "lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 left-3 z-10", padding: "pill-sm", rounded: "full", children: beforeLabel }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 right-3 z-10", padding: "pill-sm", rounded: "full", children: afterLabel })] }), _jsx(Div, { className: `${__P.p4}`, children: _jsx(Text, { className: "text-foreground", size: "sm", weight: "medium", children: item.caption }) })] }));
+                }, children: [_jsx(Image, { src: item.afterImage, alt: afterLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }), _jsx(Div, { className: "absolute inset-0 overflow-hidden", style: { width: `${position}%` }, children: _jsx(Image, { src: item.beforeImage, alt: beforeLabel, fill: true, sizes: "(max-width: 640px) 100vw, 50vw", className: "object-cover" }) }), _jsx(Div, { className: "absolute top-0 bottom-0 z-10 w-0.5 bg-card", shadow: "md", style: { left: `${position}%` }, children: _jsx(Row, { className: "absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 bg-card", align: "center", justify: "center", rounded: "full", shadow: "lg", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 8L1 5M4 8L1 11M4 8H12M12 8L15 5M12 8L15 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 left-3 z-10", padding: "pill-sm", rounded: "full", children: beforeLabel }), _jsx(Span, { surface: "overlay-sm", color: "inverse", size: "xs", weight: "medium", className: "absolute top-3 right-3 z-10", padding: "pill-sm", rounded: "full", children: afterLabel })] }), _jsx(Div, { className: `${__P.p4}`, children: _jsx(Text, { className: "text-foreground", size: "sm", weight: "medium", children: item.caption }) })] }));
 }

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

@@ -165,9 +165,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                             background: pin.accent || "#E8001C",
                                             border: "2px solid white",
                                             boxShadow: "0 1px 4px rgba(0,0,0,0.5)",
-                                        }, children: "+" }), pin.name && (
-                                    // audit-variant-ok: absolute-positioned pin tooltip — px-1.5 py-0.5 outside PADDING_MAP scale + arbitrary text-[9px]
-                                    _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap px-1.5 py-0.5 text-[9px] text-white", rounded: "default", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
+                                        }, children: "+" }), pin.name && (_jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap px-1.5 py-0.5 text-[9px] text-white", rounded: "default", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
                                     left: `${draftPos.xPct}%`,
                                     top: `${draftPos.yPct}%`,
                                     transform: STY_CENTERED,
@@ -299,13 +297,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                             background: pin.accent || "#E8001C",
                                             border: "2px solid white",
                                             boxShadow: "0 2px 6px rgba(0,0,0,0.55)",
-                                        }, children: "+" }), pin.name && (
-                                    // audit-variant-ok: absolute-positioned pin tooltip — px-1.5 py-0.5 outside PADDING_MAP scale + arbitrary text-[9px]
-                                    _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap px-1.5 py-0.5 text-[9px] text-white", rounded: "default", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (
-                    // audit-variant-ok: bordered list with divide-y between rows; Ul lacks divide variant
-                    _jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (
-                        // audit-variant-ok: list-row padding px-4 py-3 outside PADDING_MAP scale
-                        _jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { layout: "flex-center", color: "inverse", className: "h-6 w-6 shrink-0", rounded: "full", size: "xs", weight: "bold", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: CLS_DELETE_PIN, title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { textSize: "sm", className: "border-2 border-dashed text-center", rounded: "lg", padding: "xl", style: {
+                                        }, children: "+" }), pin.name && (_jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap px-1.5 py-0.5 text-[9px] text-white", rounded: "default", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { layout: "flex-center", color: "inverse", className: "h-6 w-6 shrink-0", rounded: "full", size: "xs", weight: "bold", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: CLS_DELETE_PIN, title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { textSize: "sm", className: "border-2 border-dashed text-center", rounded: "lg", padding: "xl", style: {
                             borderColor: "var(--border-ink)",
                             color: "var(--color-muted)",
                         }, children: "No pins yet \u2014 add some using the button below." })), _jsxs(Details, { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Summary, { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Stack, { className: "mt-3", gap: "3", children: [_jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer rounded border-2 border-dashed px-3 py-1.5 transition-colors hover:opacity-80", size: "sm", weight: "medium", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: CLS_INPUT, style: {

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

@@ -37,7 +37,5 @@ export async function CollectionCardsSection({ config, }) {
     if (collections.length === 0) {
         return null;
     }
-    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), showTabs ? (_jsx(Row, { gap: "sm", wrap: true, children: collections.slice(0, 3).map((entry, idx) => (
-                        // audit-variant-ok: filter tab Text — pill chip with border-zinc-300 + px-3/py-1 micro padding
-                        _jsx(Text, { className: "rounded-full border border-zinc-300 px-3 py-1 dark:border-slate-600", color: "muted", size: "xs", weight: "medium", children: entryLabel(entry) }, `${entry.type}-${idx}`))) })) : null, _jsxs(Stack, { align: "center", gap: "sm", className: "border-dashed text-center", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Mixed collection rendering (", collections.length, "/3 collection", collections.length === 1 ? "" : "s", ", up to ", maxItems, " items,", " ", itemsPerRow, " per row) \u2014 data wiring lands with the bundle/raffle work."] }), cta ? (_jsxs(Link, { href: cta.href, className: "text-sm font-medium text-primary hover:underline", children: [cta.label, " \u2192"] })) : null] })] }) }) }));
+    return (_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, size: "2xl", weight: "semibold", color: "primary", children: title }), subtitle ? (_jsx(Text, { size: "sm", color: "muted", children: subtitle })) : null] }), showTabs ? (_jsx(Row, { gap: "sm", wrap: true, children: collections.slice(0, 3).map((entry, idx) => (_jsx(Text, { className: "rounded-full border border-zinc-300 px-3 py-1 dark:border-slate-600", color: "muted", size: "xs", weight: "medium", children: entryLabel(entry) }, `${entry.type}-${idx}`))) })) : null, _jsxs(Stack, { align: "center", gap: "sm", className: "border-dashed text-center", border: "strong", paddingY: "y-3xl", paddingX: "x-lg", rounded: "2xl", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Mixed collection rendering (", collections.length, "/3 collection", collections.length === 1 ? "" : "s", ", up to ", maxItems, " items,", " ", itemsPerRow, " per row) \u2014 data wiring lands with the bundle/raffle work."] }), cta ? (_jsxs(Link, { href: cta.href, className: "text-sm font-medium text-primary hover:underline", children: [cta.label, " \u2192"] })) : null] })] }) }) }));
 }

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

@@ -48,11 +48,7 @@ function CardItem({ card }) {
         cardStyle.backgroundColor = card.backgroundColor;
     if (card.textColor)
         cardStyle.color = card.textColor;
-    return (_jsxs(Stack, { className: `overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, 
-        // audit-inline-style-ok: pass-through style prop
-        style: cardStyle, children: [card.image && (_jsx(Div, { className: `relative w-full aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs(Stack, { className: `${__P.p4} flex-1`, gap: "sm", children: [card.eyebrow && (_jsx(Text, { className: "tracking-widest opacity-70", size: "xs", weight: "semibold", transform: "uppercase", children: card.eyebrow })), card.title && (_jsx(Text, { className: "leading-snug", size: "base", weight: "bold", children: card.title })), card.body && (_jsx(Text, { className: "opacity-80 leading-relaxed flex-1", size: "sm", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", 
-                        // audit-inline-style-ok: dynamic CSS
-                        style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
+    return (_jsxs(Stack, { className: `overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx(Div, { className: `relative w-full aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs(Stack, { className: `${__P.p4} flex-1`, gap: "sm", children: [card.eyebrow && (_jsx(Text, { className: "tracking-widest opacity-70", size: "xs", weight: "semibold", transform: "uppercase", children: card.eyebrow })), card.title && (_jsx(Text, { className: "leading-snug", size: "base", weight: "bold", children: card.title })), card.body && (_jsx(Text, { className: "opacity-80 leading-relaxed flex-1", size: "sm", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
 }
 // --- Section Header ----------------------------------------------------------
 function SectionHeader({ title }) {

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

@@ -7,9 +7,7 @@ export function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLab
     const pillCls = "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 uppercase tracking-[0.2em] text-primary-700 backdrop-blur-sm dark:text-primary-400";
     if (!items.length)
         return null;
-    return (
-    // audit-variant-ok: section — base paddingY=y-4xl + md:py-20 responsive bump (PADDING_MAP lacks responsive md-up ladder)
-    _jsxs(Section, { className: `md:py-20 ${className}`, paddingY: "y-4xl", paddingX: "x-md", children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 bg-primary-500", rounded: "full", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display", color: "primary", size: "4xl", children: title }), _jsxs(Row, { align: "center", justify: "center", gap: "sm", color: "faint", className: "mt-3", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md", color: "muted", size: "sm", children: subtitle }))] }), _jsx(Div, { className: "mx-auto max-w-7xl", children: _jsx(HorizontalScroller, { items: items, renderItem: (item, i) => (_jsx(Div, { className: "w-full sm:w-auto", children: _jsx(BeforeAfterCard, { item: {
+    return (_jsxs(Section, { className: `md:py-20 ${className}`, paddingY: "y-4xl", paddingX: "x-md", children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 bg-primary-500", rounded: "full", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display", color: "primary", size: "4xl", children: title }), _jsxs(Row, { align: "center", justify: "center", gap: "sm", color: "faint", className: "mt-3", "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { size: "xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md", color: "muted", size: "sm", children: subtitle }))] }), _jsx(Div, { className: "mx-auto max-w-7xl", children: _jsx(HorizontalScroller, { items: items, renderItem: (item, i) => (_jsx(Div, { className: "w-full sm:w-auto", children: _jsx(BeforeAfterCard, { item: {
                                 id: item.id ?? `result-${i}`,
                                 beforeImage: item.beforeImage,
                                 afterImage: item.afterImage,

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

@@ -10,9 +10,7 @@ const CLS_STAR_OFF = "text-zinc-300 dark:text-zinc-600";
 const CLS_GMAPS_LINK = "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline";
 // --- Star Rating -------------------------------------------------------------
 function StarRating({ rating }) {
-    return (
-    // audit-variant-ok: star rating Row — gap-0.5 between stars; Row.gap lacks 0.5 key
-    _jsx(Row, { className: "gap-0.5", align: "center", "aria-label": `${rating} out of 5 stars`, children: [1, 2, 3, 4, 5].map((star) => (_jsx("svg", { className: `w-4 h-4 ${star <= rating ? CLS_STAR_ON : CLS_STAR_OFF}`, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }));
+    return (_jsx(Row, { className: "gap-0.5", align: "center", "aria-label": `${rating} out of 5 stars`, children: [1, 2, 3, 4, 5].map((star) => (_jsx("svg", { className: `w-4 h-4 ${star <= rating ? CLS_STAR_ON : CLS_STAR_OFF}`, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }));
 }
 // --- Google Logo Badge -------------------------------------------------------
 function GoogleBadge() {

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

@@ -70,7 +70,6 @@ function SlideBackground({ bg, legacy, mobileLegacy, isMobile, priority, }) {
     const mobileUrl = effectiveBg?.mobileUrl ?? (isMobile && mobileLegacy ? mobileLegacy.url : undefined);
     const src = mobileUrl ?? effectiveBg?.url ?? "";
     if (!effectiveBg) {
-        // audit-variant-ok: slide placeholder — bg-zinc-900 over POSITION_FILL; brand placeholder when no slide image
         return _jsx(Div, { className: `${POSITION_FILL} bg-zinc-900` });
     }
     if (effectiveBg.type === "color") {
@@ -116,20 +115,12 @@ function CarouselCardRenderer({ card, isMobile, push, }) {
             gridRow: String(gridPos.gridRow),
             gridColumn: String(gridPos.gridColumn),
             minHeight: isMobile ? 100 : 140,
-        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: POSITION_FILL }), _jsxs(Stack, { justify: "end", className: `${POSITION_FILL} md:p-6 ${textAlignClass}`, padding: "xs", children: [card.content?.eyebrow && (_jsx(Text, { color: "inverse", shadow: "sm", className: "text-[10px] !/70 mb-0.5 tracking-wider", mdSize: "xs", transform: "uppercase", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "hidden md:block !/90 mb-0.5 md:mb-2", mdSize: "sm", size: "xs", children: card.content.subtitle })), card.content?.title && (
-                            // audit-variant-ok: card title — arbitrary text-[11px] base + md:text-2xl lg:text-3xl ladder + drop-shadow-md
-                            _jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl mb-0.5 md:mb-3 drop-shadow-md`, truncate: 2, weight: "bold", style: { color: card.content.textColor ?? "#ffffff" }, children: card.content.title })), card.content?.description && (
-                            // audit-variant-ok: card description — arbitrary text-[10px] base + md:text-sm responsive bump
-                            _jsx(Text, { color: "inverse", shadow: "sm", className: `text-[10px] md:text-sm !/80 mb-1 md:mb-4`, truncate: true, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (
-                            // audit-variant-ok: button row — md:gap-2 responsive gap bump (Row.gap is single-axis)
-                            _jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn, i) => {
+        }, children: [_jsx(CardBackground, { bg: card.background }), !card.isButtonOnly && (_jsxs(_Fragment, { children: [_jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: POSITION_FILL }), _jsxs(Stack, { justify: "end", className: `${POSITION_FILL} md:p-6 ${textAlignClass}`, padding: "xs", children: [card.content?.eyebrow && (_jsx(Text, { color: "inverse", shadow: "sm", className: "text-[10px] !/70 mb-0.5 tracking-wider", mdSize: "xs", transform: "uppercase", children: card.content.eyebrow })), card.content?.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "hidden md:block !/90 mb-0.5 md:mb-2", mdSize: "sm", size: "xs", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: `text-[11px] md:text-2xl lg:text-3xl mb-0.5 md:mb-3 drop-shadow-md`, truncate: 2, weight: "bold", style: { color: card.content.textColor ?? "#ffffff" }, children: card.content.title })), card.content?.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: `text-[10px] md:text-sm !/80 mb-1 md:mb-4`, truncate: true, children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn, i) => {
                                     const variant = btn.variant === "link" || btn.variant === "ghost"
                                         ? "ghost"
                                         : btn.variant;
                                     return (_jsx(Button, { variant: variant, size: "sm", onClick: makeButtonClickHandler(btn.href, btn.openInNewTab, push), children: btn.text }, btn.id ?? i));
-                                }) }))] })] })), card.isButtonOnly && card.buttons?.[0] && (
-            // audit-variant-ok: button-only card overlay — POSITION_FILL + FLEX_CENTER + hover black/20 overlay
-            _jsx(Button, { variant: "ghost", className: `${POSITION_FILL} ${FLEX_CENTER} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: makeButtonClickHandler(card.buttons[0].href, card.buttons[0].openInNewTab, push), children: _jsx(Span, { size: "lg", mdSize: "2xl", children: card.buttons[0].text }) }))] }));
+                                }) }))] })] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${POSITION_FILL} ${FLEX_CENTER} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: makeButtonClickHandler(card.buttons[0].href, card.buttons[0].openInNewTab, push), children: _jsx(Span, { size: "lg", mdSize: "2xl", children: card.buttons[0].text }) }))] }));
 }
 export function HeroCarousel({ initialSlides, push } = {}) {
     const [currentSlide, setCurrentSlide] = useState(0);
@@ -188,22 +179,12 @@ export function HeroCarousel({ initialSlides, push } = {}) {
         return (_jsx(Div, { className: `relative w-full ${heightClass} ${HERO_PLACEHOLDER_BG} animate-pulse`, children: _jsx(Div, { className: `${POSITION_FILL} ${FLEX_CENTER}`, children: _jsx(Text, { variant: "secondary", children: "Loading..." }) }) }));
     }
     if (!slides || slides.length === 0) {
-        return (
-        // audit-variant-ok: empty-state hero — min-h responsive + gradient bg + FLEX_CENTER + flex-col
-        _jsxs(Div, { gap: "4", className: `relative w-full min-h-[260px] md:min-h-[60vh] bg-[image:var(--appkit-gradient-section-cool)] ${FLEX_CENTER} flex-col`, children: [_jsx(Heading, { level: 2, className: "text-primary", size: "2xl", weight: "bold", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "max-w-md px-4", align: "center", children: "Amazing deals are on their way. Stay tuned!" })] }));
+        return (_jsxs(Div, { gap: "4", className: `relative w-full min-h-[260px] md:min-h-[60vh] bg-[image:var(--appkit-gradient-section-cool)] ${FLEX_CENTER} flex-col`, children: [_jsx(Heading, { level: 2, className: "text-primary", size: "2xl", weight: "bold", children: "Coming Soon" }), _jsx(Text, { variant: "secondary", className: "max-w-md px-4", align: "center", children: "Amazing deals are on their way. Stay tuned!" })] }));
     }
     return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: POSITION_FILL, children: _jsx(Div, { layout: "flex", ref: slidesRef, onScroll: handleSlidesScroll, className: "h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
                         const slideHeightClass = getSlideHeightClass(slide.settings?.height);
                         const hasCards = slide.cards && slide.cards.length > 0;
-                        return (
-                        // audit-variant-ok: slide container — bg-zinc-900 brand placeholder + snap/flex layout
-                        _jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (
-                                // audit-variant-ok: overlay container — POSITION_FILL + FLEX_CENTER + responsive px-lg/16/32 ladder
-                                _jsxs(Div, { className: `${POSITION_FILL} ${FLEX_CENTER} flex-col text-center md:px-16 lg:px-32`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 !/80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
-                                        // audit-variant-ok: hero title — responsive md:text-6xl lg:text-8xl + drop-shadow-2xl over Heading size="4xl" base
-                                        _jsx(Heading, { color: "inverse", level: 1, className: "stagger-2 font-display md:text-6xl lg:text-8xl ! drop-shadow-2xl mb-2 md:mb-4", size: "4xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 !/90 mb-4 md:mb-8 max-w-2xl mx-auto", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (
-                                // audit-variant-ok: cards grid — POSITION_FILL + base padding=md + responsive gap-2 md:gap-4 + md:p-8
-                                _jsx(Div, { className: `${POSITION_FILL} grid gap-2 md:gap-4 md:p-8`, padding: "md", style: {
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { className: `${POSITION_FILL} ${FLEX_CENTER} flex-col text-center md:px-16 lg:px-32`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 !/80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { color: "inverse", level: 1, className: "stagger-2 font-display md:text-6xl lg:text-8xl ! drop-shadow-2xl mb-2 md:mb-4", size: "4xl", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-3 !/90 mb-4 md:mb-8 max-w-2xl mx-auto", mdSize: "lg", lgSize: "xl", size: "sm", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${POSITION_FILL} grid gap-2 md:gap-4 md:p-8`, padding: "md", style: {
                                         gridTemplateRows: "repeat(2, 1fr)",
                                         gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                                         alignContent: "center",
@@ -211,7 +192,5 @@ export function HeroCarousel({ initialSlides, push } = {}) {
                                     }, children: slide.cards.slice(0, 6).map((card) => (_jsx(CarouselCardRenderer, { card: card, isMobile: isMobile, push: push }, card.id))) }))] }, slide.id));
                     }) }) }), slides.length > 1 && (_jsx(Row, { gap: "sm", className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
                         ? HERO_CAROUSEL_DOT_ACTIVE
-                        : `${HERO_CAROUSEL_DOT_INACTIVE} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (
-                    // audit-variant-ok: progress-fill bar — absolute positioned bg-black/20 progress animation
-                    _jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 animate-[progress-fill_4s_linear_forwards]", rounded: "full", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Row, { gap: "sm", className: "absolute bottom-4 right-4 z-20", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${HERO_CAROUSEL_ARROW}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${HERO_CAROUSEL_ARROW}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
+                        : `${HERO_CAROUSEL_DOT_INACTIVE} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 animate-[progress-fill_4s_linear_forwards]", rounded: "full", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Row, { gap: "sm", className: "absolute bottom-4 right-4 z-20", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${HERO_CAROUSEL_ARROW}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${HERO_CAROUSEL_ARROW}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }

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

@@ -2,15 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Div, Heading, Section, Text } from "../../../ui";
 export function HeroSection({ section, onCtaClick }) {
     const { content } = section;
-    return (
-    // audit-variant-ok: hero section — min-h-[60vh] custom + bg-neutral-900 dark surface (Section.tone lacks hero-dark variant); flex+items-center handled by layout/align
-    _jsxs(Section, { layout: "flex", align: "center", className: "relative min-h-[60vh] overflow-hidden bg-neutral-900", style: content?.imageUrl
+    return (_jsxs(Section, { layout: "flex", align: "center", className: "relative min-h-[60vh] overflow-hidden bg-neutral-900", style: content?.imageUrl
             ? {
                 backgroundImage: `url(${content.imageUrl})`,
                 backgroundSize: "cover",
                 backgroundPosition: "center",
             }
-            : undefined, children: [_jsx(Div, { surface: "overlay-xs", className: "absolute inset-0" }), _jsxs(Div, { paddingX: "x-page", className: "relative mx-auto max-w-7xl text-center text-white", padding: "y-4xl", children: [content?.title && (_jsx(Heading, { level: 1, className: "leading-tight", smSize: "5xl", size: "4xl", lgSize: "6xl", weight: "bold", children: content.title })), content?.subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-2xl opacity-90", size: "lg", children: content.subtitle })), content?.ctaLabel && (
-                    // audit-variant-ok: hero CTA Button — bespoke white-on-dark CTA + zinc-900 text + hover-neutral; Button.variant lacks light-tone-on-dark
-                    _jsx(Button, { rounded: "full", onClick: onCtaClick, paddingX: "xl", paddingY: "md", textSize: "sm", weight: "semibold", className: "mt-8 inline-block bg-white text-zinc-900 dark:text-zinc-100 transition hover:bg-neutral-100 dark:bg-neutral-800", children: content.ctaLabel }))] })] }));
+            : undefined, children: [_jsx(Div, { surface: "overlay-xs", className: "absolute inset-0" }), _jsxs(Div, { paddingX: "x-page", className: "relative mx-auto max-w-7xl text-center text-white", padding: "y-4xl", children: [content?.title && (_jsx(Heading, { level: 1, className: "leading-tight", smSize: "5xl", size: "4xl", lgSize: "6xl", weight: "bold", children: content.title })), content?.subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-2xl opacity-90", size: "lg", children: content.subtitle })), content?.ctaLabel && (_jsx(Button, { rounded: "full", onClick: onCtaClick, paddingX: "xl", paddingY: "md", textSize: "sm", weight: "semibold", className: "mt-8 inline-block bg-white text-zinc-900 dark:text-zinc-100 transition hover:bg-neutral-100 dark:bg-neutral-800", children: content.ctaLabel }))] })] }));
 }

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

@@ -14,11 +14,7 @@ function StepCard({ step, visible, delay, }) {
             "shadow-md group hover:-translate-y-2 hover:shadow-xl",
             "transition-all duration-300",
             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(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 })] }));
+        ].join(" "), 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 && (_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 = "", }) {
@@ -38,7 +34,5 @@ export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaC
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `${className}`, surface: "muted", padding: "xl", children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs(Div, { className: `text-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 }) }))] }) }));
+    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 && (_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,36 +89,28 @@ 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

@@ -28,17 +28,9 @@ export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", head
             setLoading(false);
         }
     }
-    return (_jsxs(Section, { padding: "y-6xl", className: "relative overflow-hidden", 
-        // audit-inline-style-ok: dynamic CSS
-        style: {
+    return (_jsxs(Section, { padding: "y-6xl", className: "relative overflow-hidden", 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 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: {
+        }, 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 ? (_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 })) : (_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", style: {
                                     background: "var(--color-yellow, #FFE500)",
                                     color: "#0D0D0D",
                                 }, 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/PromoGrid.js

@@ -8,9 +8,7 @@ const __P = {
 export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DEALS & PROMOS", }) {
     if (banners.length === 0)
         return null;
-    return (
-    // audit-variant-ok: section — base paddingY=y-2xl + sm:py-16 responsive bump
-    _jsx(Section, { className: "sm:py-16", padding: "y-2xl", style: {
+    return (_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)",

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

@@ -12,9 +12,7 @@ function SecurityCard({ item, visible, delay, }) {
             "rounded-xl border p-5 transition-all duration-500",
             colorClass,
             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(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 })] }));
+        ].join(" "), 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 = "", }) {
@@ -34,7 +32,5 @@ export function SecurityHighlightsSection({ title, subtitle, pillLabel, items, l
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    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 }) }))] }) }));
+    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 && (_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

@@ -63,14 +63,10 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
     const categories = filtered.length > 0 ? filtered : allCategories;
     if (!isLoading && allCategories.length === 0)
         return null;
-    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) => {
+    return (_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 ? (
-                // 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 }) }))] }) }));
+                        })] })), isLoading ? (_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/SocialPostCard.js

@@ -47,9 +47,7 @@ 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)]", "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 }) }))] }));
+    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 && (_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") {

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

@@ -9,11 +9,7 @@ function StatCard({ stat, visible, delay, isLast, }) {
             "transition-all duration-700",
             visible ? "translate-y-0 opacity-100" : "translate-y-6 opacity-0",
             !isLast ? "border-r border-zinc-200 dark:border-slate-700" : "",
-        ].join(" "), 
-        // audit-inline-style-ok: computed timing
-        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 })] }));
+        ].join(" "), style: { transitionDelay: `${delay}ms` }, children: [stat.renderIcon && (_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 = "", }) {

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

@@ -46,9 +46,7 @@ export function TrustBadges({ badges }) {
             background: "var(--section-bg)",
             borderTop: "var(--section-border)",
             borderBottom: "var(--section-border)",
-        }, children: _jsx(Div, { className: "mx-auto max-w-7xl sm:py-10", paddingY: "y-lg", paddingX: "x-md", children: _jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-2 sm:grid-cols-4", children: items.map((badge) => (
-                // audit-variant-ok: badge Stack — base flex-col + sm:flex-row + sm:gap-4 responsive direction + text-align flip
-                _jsxs(Stack, { className: "text-center sm:flex-row sm:items-center sm:text-left sm:gap-4", align: "center", gap: "sm", children: [_jsx(Row, { className: "h-12 w-12 shrink-0", align: "center", justify: "center", rounded: "full", style: {
+        }, children: _jsx(Div, { className: "mx-auto max-w-7xl sm:py-10", paddingY: "y-lg", paddingX: "x-md", children: _jsx(Div, { layout: "grid", gap: "6", className: "grid-cols-2 sm:grid-cols-4", children: items.map((badge) => (_jsxs(Stack, { className: "text-center sm:flex-row sm:items-center sm:text-left sm:gap-4", align: "center", gap: "sm", children: [_jsx(Row, { className: "h-12 w-12 shrink-0", align: "center", justify: "center", rounded: "full", style: {
                                 background: "rgba(240,196,23,0.12)",
                                 color: "var(--color-red)",
                                 border: "2px solid var(--border-ink)",

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

@@ -8,9 +8,7 @@ function TrustFeatureCard({ item, visible, delay, }) {
             "flex flex-col items-center text-center p-4",
             "transition-all duration-500",
             visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
-        ].join(" "), 
-        // audit-inline-style-ok: computed timing
-        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(" "), 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 })] }));
 }
 // --- Single strip-variant item -----------------------------------------------
 function TrustStripItem({ item }) {