@mohasinac/appkit 2.4.11 → 2.5.0

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

@@ -1,20 +1,70 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Heading, Section, Span, Text, TextLink } from "../../../ui";
+import { Button, Heading, RichText, Section, Span, Text, TextLink } from "../../../ui";
 import { ChevronDown } from "lucide-react";
+// --- Constants ----------------------------------------------------------------
+const CATEGORY_LABELS = {
+    general: "General",
+    orders_payment: "Orders & Payment",
+    shipping_delivery: "Shipping",
+    returns_refunds: "Returns & Refunds",
+    product_information: "Products",
+    account_security: "Account",
+    technical_support: "Support",
+};
+// --- Helpers -----------------------------------------------------------------
+function isHtml(s) {
+    return /<[a-z][\s\S]*>/i.test(s);
+}
 // --- Section -----------------------------------------------------------------
-export function FAQSection({ title, subtitle, items, viewMoreHref, viewMoreLabel = "View all →", hasMore = false, moreCount = 0, renderTabs, className = "", }) {
-    const { themed, spacing, flex } = THEME_CONSTANTS;
-    const [openFaqId, setOpenFaqId] = useState(null);
-    const toggleFaq = (faqId) => {
-        setOpenFaqId(openFaqId === faqId ? null : faqId);
+export function FAQSection({ title, subtitle, items, tabs: tabsProp, showCategoryTabs = false, allowMultipleOpen = false, defaultOpenCount = 0, viewMoreHref, viewMoreLabel = "View all FAQs →", hasMore = false, moreCount = 0, className = "", }) {
+    const { themed, flex } = THEME_CONSTANTS;
+    // Derive tabs from items when not explicitly provided
+    const derivedTabs = useMemo(() => {
+        if (!showCategoryTabs)
+            return [];
+        if (tabsProp && tabsProp.length > 0)
+            return tabsProp;
+        const seen = new Set();
+        const result = [];
+        for (const item of items) {
+            const cat = item.category ?? "general";
+            if (!seen.has(cat)) {
+                seen.add(cat);
+                result.push({ value: cat, label: CATEGORY_LABELS[cat] ?? cat });
+            }
+        }
+        return result;
+    }, [showCategoryTabs, tabsProp, items]);
+    const showTabs = showCategoryTabs && derivedTabs.length > 1;
+    const [activeTab, setActiveTab] = useState("all");
+    // Pre-open the first N items
+    const defaultOpen = useMemo(() => new Set(items.slice(0, defaultOpenCount).map((i) => i.id)), [items, defaultOpenCount]);
+    const [openIds, setOpenIds] = useState(defaultOpen);
+    const toggle = (id) => {
+        setOpenIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                if (!allowMultipleOpen)
+                    next.clear();
+                next.add(id);
+            }
+            return next;
+        });
     };
-    return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", "data-section": "faqsection-div-320", children: [_jsxs("div", { className: "text-center mb-8", "data-section": "faqsection-div-321", children: [_jsx(Heading, { level: 2, variant: "none", className: "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent text-3xl md:text-4xl font-bold mb-3", children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), renderTabs && _jsx("div", { className: "mb-8 -mx-8", "data-section": "faqsection-div-322", children: renderTabs() }), _jsxs("div", { className: `${spacing.stack} max-w-5xl mx-auto`, "data-section": "faqsection-div-323", children: [items.length === 0 && (_jsx(Text, { className: `text-center py-8 ${themed.textSecondary}`, children: "No FAQs found." })), items.map((faq) => {
-                            const isOpen = openFaqId === faq.id;
-                            return (_jsxs("div", { className: `${themed.bgPrimary} rounded-2xl overflow-hidden transition-all border-l-4 ${isOpen
-                                    ? "border-primary bg-primary/5 dark:bg-primary/10"
-                                    : "border-transparent"}`, "data-section": "faqsection-div-324", children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left p-6 ${flex.between} gap-4 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors`, onClick: () => toggleFaq(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { className: `text-base ${themed.textPrimary} font-medium flex-1`, children: faq.question }), _jsx(ChevronDown, { className: `w-5 h-5 flex-shrink-0 ${themed.textSecondary} transition-transform duration-300 ${isOpen ? "rotate-180" : ""}` })] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-out ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`, "data-section": "faqsection-div-325", children: _jsx("div", { className: "p-6 pt-0", "data-section": "faqsection-div-326", children: _jsx(Text, { className: `text-base ${themed.textSecondary} rounded-md ${themed.bgTertiary} p-4`, children: faq.answer }) }) })] }, faq.id));
-                        })] }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "faqsection-div-327", children: _jsxs(TextLink, { href: viewMoreHref, className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400 transition-colors", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { className: "bg-primary dark:bg-primary/80 text-white text-xs px-2 py-0.5 rounded-full", children: ["+", moreCount] }))] }) }))] }) }));
+    // Filter by selected tab
+    const visibleItems = useMemo(() => {
+        if (!showTabs || activeTab === "all")
+            return items;
+        return items.filter((i) => (i.category ?? "general") === activeTab);
+    }, [items, showTabs, activeTab]);
+    return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "w-full max-w-4xl mx-auto", "data-section": "faqsection-div-320", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "faqsection-div-321", children: [_jsx(Heading, { level: 2, variant: "none", className: "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent text-3xl md:text-4xl font-bold mb-3", children: title }), subtitle && (_jsx(Text, { className: `text-base max-w-xl mx-auto ${themed.textSecondary}`, children: subtitle }))] }), showTabs && (_jsxs("div", { className: `${flex.center} flex-wrap gap-2 mb-8`, "data-section": "faqsection-div-322", children: [_jsx(Button, { variant: activeTab === "all" ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab("all"), className: "rounded-full", children: "All" }), derivedTabs.map((tab) => (_jsx(Button, { variant: activeTab === tab.value ? "primary" : "ghost", size: "sm", onClick: () => setActiveTab(tab.value), className: "rounded-full", children: tab.label }, tab.value)))] })), _jsxs("div", { className: "space-y-2", "data-section": "faqsection-div-323", children: [visibleItems.length === 0 && (_jsx(Text, { className: `text-center py-12 ${themed.textSecondary}`, children: "No FAQs in this category yet." })), visibleItems.map((faq) => {
+                            const isOpen = openIds.has(faq.id);
+                            return (_jsxs("div", { className: `${themed.bgPrimary} rounded-xl overflow-hidden border transition-all duration-200 ${isOpen ? "border-primary/40 shadow-sm" : `${themed.border}`}`, "data-section": "faqsection-div-324", children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left px-5 py-4 ${flex.between} gap-4 hover:${themed.bgTertiary} transition-colors rounded-none`, onClick: () => toggle(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { className: `text-sm font-medium flex-1 leading-snug ${isOpen ? "text-primary" : themed.textPrimary}`, children: faq.question }), _jsx(ChevronDown, { className: `w-4 h-4 flex-shrink-0 transition-transform duration-250 ${isOpen ? "rotate-180 text-primary" : themed.textSecondary}` })] }), _jsx("div", { className: `grid transition-all duration-300 ease-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`, "data-section": "faqsection-div-325", children: _jsx("div", { className: "overflow-hidden", "data-section": "faqsection-div-326", children: _jsx("div", { className: "px-5 pb-5 pt-0", children: isHtml(faq.answer) ? (_jsx(RichText, { html: faq.answer, proseClass: "prose prose-sm max-w-none dark:prose-invert", className: themed.textSecondary })) : (_jsx(Text, { className: `text-sm leading-relaxed ${themed.textSecondary}`, children: faq.answer })) }) }) })] }, faq.id));
+                        })] }), viewMoreHref && (_jsx("div", { className: "text-center mt-10", "data-section": "faqsection-div-327", children: _jsxs(TextLink, { href: viewMoreHref, className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 transition-colors", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { className: "bg-primary text-white text-xs px-2 py-0.5 rounded-full", children: ["+", moreCount] }))] }) }))] }) }));
 }

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

@@ -1,4 +1,5 @@
 import type { ProductItem } from "../../products/types";
+import type { SectionPagination } from "../schemas/firestore";
 export interface FeaturedProductsSectionProps {
     title?: string;
     description?: string;
@@ -7,5 +8,11 @@ export interface FeaturedProductsSectionProps {
     className?: string;
     filterByBrand?: string;
     initialItems?: ProductItem[];
+    /** Number of grid rows (1–4). When 1 (default), renders the existing horizontal carousel. */
+    rows?: number;
+    /** Maximum items to show. Clamped to 5–20. */
+    maxItems?: number;
+    /** Pagination strategy for rows > 1. */
+    pagination?: SectionPagination;
 }
-export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, filterByBrand, initialItems, rows, maxItems, pagination, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,10 +1,43 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import Link from "next/link";
 import { SectionCarousel } from "./SectionCarousel";
 import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
 import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
 import { ROUTES } from "../../../next";
-export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, }) {
+import { Section, Heading, Text } from "../../../ui";
+import { THEME_CONSTANTS } from "../../../tokens";
+// --- Multi-row grid + pagination -----------------------------------------------
+function ProductGrid({ items, rows, maxItems, pagination, viewMoreHref, viewMoreLabel, title, description, }) {
+    const { themed } = THEME_CONSTANTS;
+    const pageSize = Math.min(rows * 5, maxItems);
+    const [offset, setOffset] = useState(0);
+    const timerRef = useRef(null);
+    const totalItems = Math.min(items.length, maxItems);
+    const visible = items.slice(offset, Math.min(offset + pageSize, totalItems));
+    const canNext = offset + pageSize < totalItems;
+    const canPrev = offset > 0;
+    const next = () => setOffset((o) => Math.min(o + pageSize, totalItems - pageSize));
+    const prev = () => setOffset((o) => Math.max(o - pageSize, 0));
+    useEffect(() => {
+        if (pagination !== "auto-scroll")
+            return;
+        timerRef.current = setInterval(() => {
+            setOffset((o) => {
+                const nextOffset = o + pageSize;
+                return nextOffset >= totalItems ? 0 : nextOffset;
+            });
+        }, 5000);
+        return () => { if (timerRef.current)
+            clearInterval(timerRef.current); };
+    }, [pagination, pageSize, totalItems]);
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgPrimary}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), description && (_jsx(Text, { variant: "muted", className: "mt-1 text-sm", children: description }))] }), pagination === "arrows" && (_jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx("button", { type: "button", onClick: prev, disabled: !canPrev, "aria-label": "Previous", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u2039" }), _jsx("button", { type: "button", onClick: next, disabled: !canNext, "aria-label": "Next", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u203A" })] }))] }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: visible.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) }, product.id))) }), pagination === "load-more" && canNext && (_jsx("div", { className: "mt-8 text-center", children: _jsx("button", { type: "button", onClick: next, className: "rounded-lg border border-zinc-300 bg-white px-6 py-2 text-sm font-medium text-zinc-700 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] dark:border-slate-600 dark:bg-slate-900 dark:text-zinc-300", children: "Load more" }) })), viewMoreHref && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+}
+// --- Main component -----------------------------------------------------------
+export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, maxItems, pagination = "load-more", }) {
+    const effectiveRows = Math.min(Math.max(rows, 1), 4);
+    const effectiveMaxItems = Math.min(Math.max(maxItems ?? effectiveRows * 5, 5), 20);
     const { data, isLoading } = useFeaturedProducts({
         filterByBrand,
         initialData: initialItems?.length
@@ -12,5 +45,12 @@ export function FeaturedProductsSection({ title = "Featured Products", descripti
             : undefined,
     });
     const items = data?.items ?? [];
+    // Multi-row mode — render grid with pagination
+    if (effectiveRows > 1) {
+        if (isLoading)
+            return null;
+        return (_jsx(ProductGrid, { items: items, rows: effectiveRows, maxItems: effectiveMaxItems, pagination: pagination, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, title: title, description: description }));
+    }
+    // Single-row mode — original horizontal carousel (backward-compat)
     return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) })), className: className }));
 }

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

@@ -32,19 +32,27 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } =
         homepageSectionsRepository.getEnabledSections().catch(() => []),
         faqsRepository.getHomepageFAQs().catch(() => []),
     ]);
-    // Collect only the live metric keys that are actually configured in this deployment
-    const liveMetricsNeeded = new Set();
+    // Collect live metric requests from all enabled stats sections
+    const liveStatRequests = [];
     for (const section of enabledSections) {
-        if (section.type === "stats") {
-            const cfg = section.config;
-            for (const stat of cfg?.stats ?? []) {
-                if (stat.source === "live" && stat.metric) {
-                    liveMetricsNeeded.add(stat.metric);
+        if (section.type !== "stats")
+            continue;
+        const cfg = section.config;
+        for (const stat of cfg?.stats ?? []) {
+            const src = stat.source;
+            if (src === "live" || src === "live-preset") {
+                if (stat.metric) {
+                    liveStatRequests.push({ key: stat.key, source: src, preset: stat.metric });
+                }
+            }
+            else if (src === "live-collection") {
+                if (stat.collectionQuery) {
+                    liveStatRequests.push({ key: stat.key, source: src, collectionQuery: stat.collectionQuery });
                 }
             }
         }
     }
-    const liveStats = liveMetricsNeeded.size > 0 ? await fetchLiveStats([...liveMetricsNeeded]) : {};
+    const liveStats = liveStatRequests.length > 0 ? await fetchLiveStats(liveStatRequests) : {};
     const orderedSections = [...enabledSections].sort((a, b) => {
         if (a.order !== b.order)
             return a.order - b.order;
@@ -58,6 +66,7 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } =
         id: faq.id,
         question: faq.question,
         answer: typeof faq.answer === "string" ? faq.answer : faq.answer.text,
+        category: faq.category ?? "general",
     }));
     // Determine which data-driven section types are active so we only fetch what's needed
     const activeTypes = new Set(orderedSections.map((s) => s.type));

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

@@ -1,4 +1,5 @@
 import type { CategoryItem } from "../../categories/types";
+import type { SectionCTA } from "../schemas/firestore";
 export interface ShopByCategorySectionProps {
     title?: string;
     subtitle?: string;
@@ -7,5 +8,11 @@ export interface ShopByCategorySectionProps {
     viewMoreLabel?: string;
     className?: string;
     initialItems?: CategoryItem[];
+    cta?: SectionCTA;
+    filters?: {
+        featuredOnly?: boolean;
+        rootOnly?: boolean;
+        rootCategoryId?: string;
+    };
 }
-export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, }: ShopByCategorySectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShopByCategorySection({ title, subtitle, limit, viewMoreHref, viewMoreLabel, className, initialItems, cta, filters, }: ShopByCategorySectionProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,5 +1,6 @@
 "use client";
 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";
@@ -16,10 +17,49 @@ function CategoryChip({ category }) {
     const productCount = category.metrics?.productCount ?? 0;
     return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full 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 overflow-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-3 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", { "aria-hidden": "true", className: "text-lg 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" })] })] }));
 }
-export function ShopByCategorySection({ title = "Shop by Category", subtitle, limit = 12, viewMoreHref, viewMoreLabel = "View all categories →", className = "", initialItems, }) {
+const CTA_CLASSES = {
+    filled: "rounded-lg bg-[var(--appkit-color-primary)] px-5 py-2 text-sm font-semibold text-white hover:opacity-90",
+    outline: "rounded-lg border border-[var(--appkit-color-primary)] px-5 py-2 text-sm font-semibold text-[var(--appkit-color-primary)] hover:bg-[var(--appkit-color-primary)]/10",
+    text: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline",
+};
+function FilterChip({ label, active, onClick, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, className: [
+            "whitespace-nowrap rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+            active
+                ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"
+                : "border-zinc-300 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] dark:border-slate-600 dark:bg-slate-800 dark:text-zinc-300",
+        ].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 { data: categories = [], isLoading } = useTopCategories(limit, { initialData: initialItems });
-    if (!isLoading && categories.length === 0)
+    const { data: allCategories = [], isLoading } = useTopCategories(limit, { initialData: initialItems });
+    const [activeFilter, setActiveFilter] = useState("all");
+    // Build client-side filter chip options from root-level parent IDs
+    const rootIds = filters?.rootCategoryId
+        ? [filters.rootCategoryId]
+        : Array.from(new Set(allCategories.flatMap((c) => c.parentIds ?? [c.id]).filter(Boolean)));
+    const hasFilters = !!(filters?.featuredOnly !== undefined ||
+        filters?.rootCategoryId ||
+        rootIds.length > 1);
+    const filtered = allCategories.filter((cat) => {
+        if (activeFilter !== "all") {
+            const inParents = cat.parentIds?.includes(activeFilter) ?? false;
+            if (!inParents && cat.id !== activeFilter)
+                return false;
+        }
+        if (filters?.featuredOnly && !cat.isFeatured)
+            return false;
+        if (filters?.rootOnly && (cat.parentIds?.length ?? 0) > 0)
+            return false;
+        return true;
+    });
+    const categories = filtered.length > 0 ? filtered : allCategories;
+    if (!isLoading && allCategories.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 px-4 ${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 }))] }), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-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, pauseOnHover: true })), 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-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 px-4 ${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) => {
+                            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 overflow-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, 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/SocialFeedSection.js

@@ -10,6 +10,7 @@ const PLATFORM_LABELS = {
     facebook: "Facebook",
     tiktok: "TikTok",
     deviantart: "DeviantArt",
+    youtube: "YouTube",
 };
 function platformProfileUrl(platform, handle) {
     switch (platform) {
@@ -17,6 +18,7 @@ function platformProfileUrl(platform, handle) {
         case "facebook": return `https://www.facebook.com/${handle}`;
         case "tiktok": return `https://www.tiktok.com/@${handle}`;
         case "deviantart": return `https://www.deviantart.com/${handle}`;
+        case "youtube": return `https://www.youtube.com/@${handle}`;
     }
 }
 // --- Skeleton ----------------------------------------------------------------
@@ -29,7 +31,24 @@ function SocialFeedEmpty({ platform }) {
 }
 // --- Server fetch ------------------------------------------------------------
 async function loadPosts(config) {
-    const { platform, handle, postType, count } = config;
+    const { platform, handle, postType, count, posts: staticPosts } = config;
+    // YouTube: no API token needed — render from static posts in config
+    if (platform === "youtube") {
+        const posts = (staticPosts ?? []).map((p) => ({
+            id: p.id,
+            platform: "youtube",
+            permalink: `https://youtu.be/${p.videoId ?? ""}`,
+            videoId: p.videoId,
+            channelName: p.channelName,
+            caption: p.caption,
+            mediaType: "video",
+            imageUrl: p.videoId ? `https://img.youtube.com/vi/${p.videoId}/maxresdefault.jpg` : undefined,
+            stats: {},
+        }));
+        return { posts };
+    }
+    if (!handle)
+        return { posts: [], error: `A handle is required for ${PLATFORM_LABELS[platform]}.` };
     try {
         const credentials = await siteSettingsRepository.getDecryptedCredentials().catch(() => null);
         switch (platform) {
@@ -72,6 +91,7 @@ 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"
         ? "flex gap-3 overflow-x-auto pb-2 snap-x snap-mandatory"
         : layout === "masonry"
@@ -82,5 +102,5 @@ export async function SocialFeedSection(config) {
         : 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("div", { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), _jsxs("a", { href: platformProfileUrl(platform, handle), target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline", 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, { 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("div", { 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))) }))] }) }));
 }

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

@@ -4,24 +4,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PLATFORM_META = {
     instagram: {
         label: "Instagram",
-        color: "bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400",
+        colorClass: "bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400",
         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",
-        color: "bg-blue-600",
+        colorClass: "bg-[var(--appkit-color-facebook,#1877F2)]",
         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",
-        color: "bg-black",
+        colorClass: "bg-[var(--appkit-color-tiktok,#010101)]",
         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",
-        color: "bg-green-600",
+        colorClass: "bg-[var(--appkit-color-deviantart,#05CC47)]",
         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)]",
+        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" }) })),
+    },
 };
 // --- Stats formatter ---------------------------------------------------------
 function formatCount(n) {
@@ -33,7 +38,17 @@ function formatCount(n) {
         return `${(n / 1000).toFixed(1)}K`;
     return String(n);
 }
+// --- YouTube card (16:9 aspect, play overlay, channel chip) ------------------
+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-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: _jsx("p", { className: "line-clamp-2 text-xs text-white", 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 rounded-xl overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-square focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx("span", { className: "text-zinc-400 text-sm", children: "No preview" }) })), post.mediaType === "video" && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: _jsx("div", { className: "w-12 h-12 rounded-full bg-black/50 backdrop-blur-sm flex items-center justify-center", children: _jsx("svg", { className: "w-5 h-5 text-white ml-1", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx("div", { className: "absolute top-2 right-2 pointer-events-none", children: _jsx("div", { className: "w-6 h-6 rounded bg-black/50 backdrop-blur-sm flex items-center justify-center", children: _jsxs("svg", { className: "w-3.5 h-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 top-2 left-2 flex items-center gap-1 px-1.5 py-1 rounded text-white text-xs font-medium ${meta.color}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs("div", { className: "absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3 pointer-events-none", children: [showCaption && post.caption && (_jsx("p", { className: "text-white text-xs line-clamp-3 mb-2", children: post.caption })), showStats && (_jsxs("div", { className: "flex items-center gap-3 text-white/80 text-xs", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "w-3 h-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: "w-3 h-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: "w-3 h-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("div", { className: "flex h-full w-full items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx("span", { className: "text-sm 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-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [showCaption && post.caption && (_jsx("p", { 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)] }))] }))] })] }));
 }

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Grid, Heading, Row, Section, Span, Text, TextLink } from "../../../ui";
+import { Button, Grid, Heading, Row, Section, SiteLogo, Span, Text, TextLink } from "../../../ui";
 // --- Component ---------------------------------------------------------------
 export function WelcomeSection({ title, subtitle, pillLabel, showCTA = true, ctaLabel = "Shop now", ctaHref, onCtaClick, secondaryCtaLabel = "Browse products", secondaryCtaHref, onSecondaryCtaClick, trustChips = [], isLoading = false, brandLogoText = "", className = "", }) {
     const { themed, flex } = THEME_CONSTANTS;
     if (isLoading) {
         return (_jsx(Section, { className: `relative overflow-hidden py-16 md:py-24 px-4 ${className}`, children: _jsxs("div", { className: "animate-pulse max-w-4xl mx-auto text-center", "data-section": "welcomesection-div-382", children: [_jsx("div", { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded-full w-52 mx-auto mb-6" }), _jsx("div", { className: "h-20 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-4 max-w-2xl mx-auto" }), _jsx("div", { className: "h-6 bg-zinc-200 dark:bg-slate-700 rounded-lg mb-8 max-w-lg mx-auto" }), _jsxs("div", { className: "flex justify-center gap-4", "data-section": "welcomesection-div-383", children: [_jsx("div", { className: "h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" }), _jsx("div", { className: "h-12 bg-zinc-200 dark:bg-slate-700 rounded-xl w-36" })] })] }) }));
     }
-    return (_jsxs(Section, { className: `relative overflow-hidden py-20 md:py-28 px-4 ${className}`, children: [_jsx("div", { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] rounded-full bg-primary/10 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] rounded-full bg-secondary/10 dark:bg-secondary/15 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "relative z-10 max-w-7xl mx-auto", "data-section": "welcomesection-div-384", children: _jsxs(Grid, { gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center", children: [_jsxs("div", { className: "text-center lg:text-left", "data-section": "welcomesection-div-385", children: [pillLabel && (_jsx("div", { "data-section": "welcomesection-div-386", children: _jsxs(Span, { className: "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: [_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: 1, variant: "none", className: "mt-4 font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl bg-gradient-to-r from-primary-700 via-cobalt to-secondary-400 dark:from-primary dark:via-cobalt-400 dark:to-primary-300 bg-clip-text text-transparent leading-[1.1] tracking-tight", children: title }), subtitle && (_jsx(Text, { className: `mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 justify-center lg:justify-start", children: [ctaHref ? (_jsx(TextLink, { href: ctaHref, className: "inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { href: secondaryCtaHref, className: "inline-flex items-center justify-center rounded-xl border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-base font-semibold text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 justify-center lg:justify-start", children: trustChips.map((chip) => (_jsxs(Span, { className: "inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 rounded-full px-3.5 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx("div", { className: "hidden lg:block", "data-section": "welcomesection-div-387", children: _jsxs("div", { className: `relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary-100 via-cobalt-100/60 to-secondary-100 dark:from-primary-950/60 dark:via-cobalt-950/40 dark:to-secondary-950/60 border ${themed.border} shadow-2xl`, "data-section": "welcomesection-div-388", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx("div", { className: `absolute inset-0 ${flex.center}`, "data-section": "welcomesection-div-389", children: _jsx(Span, { className: "font-display text-9xl font-black text-primary-400/30 dark:text-secondary-400/30 select-none", children: brandLogoText }) })] }) })] }) })] }));
+    return (_jsxs(Section, { className: `relative overflow-hidden py-20 md:py-28 px-4 ${className}`, children: [_jsx("div", { className: "pointer-events-none absolute -top-32 -left-32 w-[28rem] h-[28rem] rounded-full bg-primary/10 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "pointer-events-none absolute -bottom-40 -right-40 w-[36rem] h-[36rem] rounded-full bg-secondary/10 dark:bg-secondary/15 blur-3xl", "aria-hidden": "true" }), _jsx("div", { className: "relative z-10 max-w-7xl mx-auto", "data-section": "welcomesection-div-384", children: _jsxs(Grid, { gap: "2xl", className: "grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 items-center", children: [_jsxs("div", { className: "text-center lg:text-left", "data-section": "welcomesection-div-385", children: [pillLabel && (_jsx("div", { "data-section": "welcomesection-div-386", children: _jsxs(Span, { className: "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: [_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: 1, variant: "none", className: "mt-4 font-display text-5xl md:text-6xl lg:text-7xl xl:text-8xl bg-gradient-to-r from-primary-700 via-cobalt to-secondary-400 dark:from-primary dark:via-cobalt-400 dark:to-primary-300 bg-clip-text text-transparent leading-[1.1] tracking-tight", children: title }), subtitle && (_jsx(Text, { className: `mt-4 text-xl ${themed.textSecondary} max-w-xl leading-relaxed mx-auto lg:mx-0`, children: subtitle })), showCTA && (_jsxs(Row, { wrap: true, gap: "md", className: "mt-8 justify-center lg:justify-start", children: [ctaHref ? (_jsx(TextLink, { href: ctaHref, className: "inline-flex items-center justify-center rounded-xl px-8 py-3.5 text-base font-bold !bg-primary hover:!bg-primary-600 text-white dark:!bg-primary dark:hover:!bg-primary-600 dark:text-white btn-glow transition-all hover:scale-[1.02]", children: ctaLabel })) : (_jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel })), secondaryCtaHref ? (_jsx(TextLink, { href: secondaryCtaHref, className: "inline-flex items-center justify-center rounded-xl border-2 border-cobalt/40 dark:border-cobalt-400/40 px-8 py-3.5 text-base font-semibold text-cobalt-700 dark:text-cobalt-300 hover:bg-cobalt-50 dark:hover:bg-cobalt-900/20 transition-all hover:scale-[1.02]", children: secondaryCtaLabel })) : (_jsx(Button, { variant: "outline", size: "lg", onClick: onSecondaryCtaClick, children: secondaryCtaLabel }))] })), trustChips.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mt-6 justify-center lg:justify-start", children: trustChips.map((chip) => (_jsxs(Span, { className: "inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-slate-800 border border-zinc-200 dark:border-slate-700 rounded-full px-3.5 py-1.5 text-xs font-medium text-zinc-700 dark:text-zinc-300", children: [chip.emoji, " ", chip.label] }, chip.key))) }))] }), _jsx("div", { className: "hidden lg:block", "data-section": "welcomesection-div-387", children: _jsxs("div", { className: `relative rounded-3xl overflow-hidden aspect-[4/3] bg-gradient-to-br from-primary-100 via-cobalt-100/60 to-secondary-100 dark:from-primary-950/60 dark:via-cobalt-950/40 dark:to-secondary-950/60 border ${themed.border} shadow-2xl`, "data-section": "welcomesection-div-388", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx("div", { className: `absolute inset-0 ${flex.center} px-10`, "data-section": "welcomesection-div-389", children: _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", className: "h-24 xl:h-32 2xl:h-40 max-w-full" }) })] }) })] }) })] }));
 }

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

@@ -1,6 +1,5 @@
 export interface WhatsAppCommunitySectionProps {
     title: string;
-    /** HTML string for the description (safe server-rendered HTML). */
     descriptionHtml?: string;
     memberCount?: number;
     memberCountLabel?: string;

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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Grid, Heading, RichText, Section, Span, Text } from "../../../ui";
-import { MessageCircle } from "lucide-react";
+import { Button, Heading, RichText, Section, Span, Text } from "../../../ui";
+import { Users } from "lucide-react";
 import { getDefaultLocale } from "../../../core/baseline-resolver";
 // --- Section -----------------------------------------------------------------
 export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount, memberCountLabel = "members", testimonial, benefits = [], buttonText = "Join our WhatsApp community", groupLink, isLoading = false, className = "", }) {
     const { themed, flex } = THEME_CONSTANTS;
     if (isLoading) {
-        return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "whatsappcommunitysection-div-390", children: _jsx("div", { className: "h-80 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+        return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-4xl mx-auto", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
     }
     if (!title && !groupLink)
         return null;
@@ -16,5 +16,5 @@ export function WhatsAppCommunitySection({ title, descriptionHtml, memberCount,
         if (groupLink)
             window.open(groupLink, "_blank");
     };
-    return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "whatsappcommunitysection-div-391", children: _jsxs("div", { className: "bg-gradient-to-br from-green-700 to-green-800 dark:from-emerald-800 dark:to-emerald-900 rounded-2xl p-8 text-white overflow-hidden relative", "data-section": "whatsappcommunitysection-div-392", children: [_jsx("div", { className: "absolute inset-0 opacity-10", "aria-hidden": true, "data-section": "whatsappcommunitysection-div-393", children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsx("pattern", { id: "wa-dots", x: "0", y: "0", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: _jsx("circle", { cx: "20", cy: "20", r: "2", fill: "white" }) }) }), _jsx("rect", { width: "100%", height: "100%", fill: "url(#wa-dots)" })] }) }), _jsxs("div", { className: "relative z-10 text-center", "data-section": "whatsappcommunitysection-div-394", children: [_jsx("div", { className: `inline-flex items-center justify-center w-20 h-20 rounded-full bg-white/20 backdrop-blur-sm mb-6 mx-auto`, "data-section": "whatsappcommunitysection-div-395", children: _jsx(MessageCircle, { className: "w-10 h-10 text-white" }) }), _jsx(Heading, { level: 2, className: "mb-3 text-white", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose max-w-none prose-invert prose-sm", className: "text-lg md:text-xl mb-2 opacity-90" })), memberCount && (_jsxs("div", { className: `${flex.center} gap-3 mb-4`, "data-section": "whatsappcommunitysection-div-396", children: [_jsx("div", { className: "flex -space-x-2", "data-section": "whatsappcommunitysection-div-397", children: ["A", "R", "S", "M", "P"].map((initial, i) => (_jsx("div", { className: `w-8 h-8 rounded-full border-2 border-white bg-green-700 ${flex.center} text-white text-xs font-bold`, "data-section": "whatsappcommunitysection-div-398", children: initial }, i))) }), _jsxs(Text, { variant: "none", className: "text-white font-bold", children: [_jsx(Span, { className: "text-xl font-extrabold", children: memberCount.toLocaleString(getDefaultLocale()) }), " ", memberCountLabel] })] })), testimonial && (_jsxs(Text, { size: "sm", variant: "none", className: "italic text-white/90 max-w-sm mx-auto mb-6", children: ["\u201C", testimonial, "\u201D"] })), benefits.length > 0 && (_jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4 max-w-2xl mx-auto my-8", children: benefits.slice(0, 4).map((benefit, index) => (_jsxs("div", { className: "flex items-start gap-3 text-left bg-white/10 backdrop-blur-sm p-4 rounded-lg", "data-section": "whatsappcommunitysection-div-399", children: [_jsx("svg", { className: "w-6 h-6 mt-0.5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }), _jsx(Span, { className: "text-sm md:text-base", children: benefit })] }, index))) })), groupLink && (_jsxs("div", { className: "relative inline-block", "data-section": "whatsappcommunitysection-div-400", children: [_jsx("div", { className: "absolute inset-0 rounded-full bg-lime-400/30 animate-pulse blur-md scale-110", "aria-hidden": true }), _jsxs(Button, { variant: "primary", size: "lg", "aria-label": buttonText, onClick: handleJoin, className: "relative !bg-white !text-green-700 hover:!bg-zinc-100 shadow-xl hover:shadow-2xl", children: [_jsx("svg", { className: "w-6 h-6 mr-2", fill: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] })] }))] })] }) }) }));
+    return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-4xl mx-auto", "data-section": "whatsappcommunitysection-div-391", children: _jsxs("div", { className: "relative rounded-2xl overflow-hidden bg-gradient-to-br from-primary via-cobalt to-primary/80 dark:from-primary/90 dark:via-cobalt/90 dark:to-primary/70 text-white shadow-xl", "data-section": "whatsappcommunitysection-div-392", children: [_jsx("div", { className: "absolute inset-0 opacity-[0.06] pointer-events-none bg-[repeating-linear-gradient(45deg,white_0,white_1px,transparent_0,transparent_50%)] bg-[size:10px_10px]", "aria-hidden": true }), _jsxs("div", { className: "relative z-10 px-6 py-10 sm:px-10 sm:py-12", "data-section": "whatsappcommunitysection-div-394", children: [_jsxs("div", { className: `${flex.between} flex-wrap gap-4 mb-8`, "data-section": "whatsappcommunitysection-div-top", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-12 h-12 rounded-xl bg-[#25D366] flex items-center justify-center shadow-lg flex-shrink-0", children: _jsx("svg", { className: "w-7 h-7 text-white", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }) }), _jsx(Span, { className: "text-white/80 text-sm font-medium tracking-wide uppercase", children: "WhatsApp Community" })] }), memberCount && (_jsxs("div", { className: "flex items-center gap-2 bg-white/15 backdrop-blur-sm rounded-full px-4 py-1.5", children: [_jsx(Users, { className: "w-4 h-4 text-white/80" }), _jsxs(Span, { className: "text-white text-sm font-semibold", children: [memberCount.toLocaleString(getDefaultLocale()), "+ ", memberCountLabel] })] }))] }), _jsx(Heading, { level: 2, className: "text-white text-2xl sm:text-3xl font-bold mb-3 leading-tight", children: title }), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none prose-invert", className: "text-white/80 text-base mb-6 max-w-2xl leading-relaxed" })), benefits.length > 0 && (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8 max-w-2xl", "data-section": "whatsappcommunitysection-div-benefits", children: benefits.slice(0, 4).map((benefit, i) => (_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex-shrink-0 w-5 h-5 rounded-full bg-white/20 flex items-center justify-center", children: _jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }), _jsx(Span, { className: "text-white/90 text-sm leading-snug", children: benefit })] }, i))) })), testimonial && (_jsx("blockquote", { className: "border-l-2 border-white/30 pl-4 mb-8 max-w-xl", children: _jsxs(Text, { variant: "none", className: "text-white/75 text-sm italic leading-relaxed", children: ["\u201C", testimonial, "\u201D"] }) })), groupLink && (_jsxs(Button, { variant: "primary", size: "lg", onClick: handleJoin, "aria-label": buttonText, className: "!bg-[#25D366] hover:!bg-[#1ebe5d] !text-white !border-0 shadow-lg font-semibold gap-2.5", children: [_jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }), buttonText] }))] })] }) }) }));
 }

package/dist/features/homepage/lib/live-stats.d.ts

@@ -5,10 +5,23 @@
  * individual metric are silently swallowed — the section falls back to the
  * static `value` from the Firestore section config.
  */
-import type { LiveStatMetric } from "../schemas/firestore";
-export type LiveStatsMap = Partial<Record<LiveStatMetric, string>>;
+import type { LiveStatPreset, CollectionQueryMetric } from "../schemas/firestore";
+export interface LiveStatRequest {
+    /** The stat's unique key in StatsSectionConfig — used as the result map key. */
+    key: string;
+    source: "live" | "live-preset" | "live-collection";
+    /** Set when source is "live" or "live-preset". */
+    preset?: LiveStatPreset;
+    /** Set when source is "live-collection". */
+    collectionQuery?: CollectionQueryMetric;
+}
+/** Result map keyed by stat.key from StatsSectionConfig. Raw values, no suffix. */
+export type LiveStatsMap = Record<string, string>;
 /**
- * Fetch live stats for the requested metrics only.
- * Pass the exact metric keys needed so unused Firestore queries are skipped.
+ * Fetch live stats for all requested metrics.
+ * Preset metrics are deduped so each Firestore query runs at most once.
+ * Collection-query metrics run their own queries; unknown collections are
+ * blocked by the ALLOWED_LIVE_COLLECTIONS allowlist.
+ * Returns raw count strings — suffix is applied by the caller (section-renderer).
  */
-export declare function fetchLiveStats(metrics: LiveStatMetric[]): Promise<LiveStatsMap>;
+export declare function fetchLiveStats(requests: LiveStatRequest[]): Promise<LiveStatsMap>;