@mohasinac/appkit 2.7.59 → 2.8.1

package/dist/features/events/components/AdminEventsView.d.ts

@@ -1,7 +1,7 @@
-import type { ListingViewShellProps } from "../../../ui";
-export interface AdminEventsViewProps extends ListingViewShellProps {
+import type { ListingLayoutProps } from "../../../ui";
+export interface AdminEventsViewProps extends ListingLayoutProps {
     getRowHref?: (row: {
         id: string;
     }) => string;
 }
-export declare function AdminEventsView({ children, getRowHref, ...props }: AdminEventsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminEventsView({ children, ...props }: AdminEventsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/events/components/AdminEventsView.js

@@ -1,28 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useCallback } from "react";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { AdminViewCards } from "../../admin/components/AdminViewCards";
-import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { BulkActionBar, Button, FilterChipGroup, ListingFilterDrawer, ListingToolbar, Pagination, ListingViewShell, SideDrawer } from "../../../ui";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { FilterChipGroup, ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_EVENT_STATUS_TABS } from "../../admin/constants/filter-tabs";
-import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../../admin/hooks/useAdminListingData";
-import { DataTable } from "../../admin/components/DataTable";
+import { toRecordArray, toRelativeDate, toStringValue, } from "../../admin/hooks/useAdminListingData";
+import { DataListingView } from "../../admin/components/DataListingView";
 import { AdminEventEditorView } from "./AdminEventEditorView";
-import { useBottomActions } from "../../layout";
-const PAGE_SIZE = 25;
-const FILTER_KEYS = ["status", "type"];
-const DEFAULT_SORT = "-startsAt";
-const SORT_OPTIONS = [
-    { value: "-startsAt", label: "Starting soonest" },
-    { value: "startsAt", label: "Starting latest" },
-    { value: "-createdAt", label: "Newest" },
-    { value: "title", label: "Title A–Z" },
-];
-const STATUS_OPTIONS = ADMIN_EVENT_STATUS_TABS;
 // TODO(events): TYPE_OPTIONS list pre-dates the SB9 EventType union refresh
 // (sale|offer|poll|survey|feedback|raffle|spin_wheel). Keep current values to
 // avoid silently breaking saved-filter URLs — sync in a dedicated follow-up.
@@ -35,78 +19,58 @@ const TYPE_OPTIONS = [
     { id: "survey", label: "Survey" },
     { id: "flash-sale", label: "Flash Sale" },
 ];
-export function AdminEventsView({ children, getRowHref, ...props }) {
-    const hasChildren = React.Children.count(children) > 0;
-    const [view, setView] = useState("table");
-    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
-    const { openCreatePanel, openEditPanel, closePanel, isCreateOpen, isEditOpen, editId } = usePanelUrlSync();
-    const [searchInput, setSearchInput] = useState(table.get("q") || "");
-    const [filterOpen, setFilterOpen] = useState(false);
-    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-    const openFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
-        setFilterOpen(true);
-    }, [table]);
-    const applyFilters = useCallback(() => {
-        const updates = { page: "1" };
-        for (const k of FILTER_KEYS)
-            updates[k] = pendingFilters[k] ?? "";
-        table.setMany(updates);
-        setFilterOpen(false);
-    }, [pendingFilters, table]);
-    const clearFilters = useCallback(() => {
-        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
-    }, []);
-    const resetAll = useCallback(() => {
-        const updates = { q: "", sort: "" };
-        for (const k of FILTER_KEYS)
-            updates[k] = "";
-        table.setMany(updates);
-        setSearchInput("");
-    }, [table]);
-    const commitSearch = useCallback(() => {
-        table.set("q", searchInput.trim());
-    }, [searchInput, table]);
-    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
-    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
-    const filterParts = [];
-    const statusRaw = table.get("status");
-    if (statusRaw && statusRaw !== "All")
-        filterParts.push(`status==${statusRaw}`);
-    const typeRaw = table.get("type");
-    if (typeRaw && typeRaw !== "All")
-        filterParts.push(`type==${typeRaw}`);
-    const filters = filterParts.join(",") || undefined;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+export function AdminEventsView({ children, ...props }) {
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Events",
+        searchPlaceholder: "Search events by title or type",
+        emptyLabel: "No events found",
+        filterKeys: ["status", "type"],
+        defaultSort: "-startsAt",
         queryKey: ["admin", "events", "listing"],
         endpoint: ADMIN_ENDPOINTS.EVENTS,
-        page: table.getNumber("page", 1),
-        pageSize: PAGE_SIZE,
-        sorts: table.get("sort") || DEFAULT_SORT,
-        filters,
-        q: table.get("q") || undefined,
+        sortOptions: [
+            { value: "-startsAt", label: "Starting soonest" },
+            { value: "startsAt", label: "Starting latest" },
+            { value: "-createdAt", label: "Newest" },
+            { value: "title", label: "Title A–Z" },
+        ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `event-${index}`),
             primary: toStringValue(item.title, "Untitled event"),
-            secondary: [
-                toStringValue(item.type, "event"),
-                toStringValue(item.startsAt, ""),
-            ].filter(Boolean).join(" · "),
+            secondary: [toStringValue(item.type, "event"), toStringValue(item.startsAt, "")]
+                .filter(Boolean)
+                .join(" · "),
             status: toStringValue(item.status, "active"),
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    });
-    const currentPage = table.getNumber("page", 1);
-    const totalPages = Math.ceil(total / PAGE_SIZE);
-    const selection = useBulkSelection({ items: rows, keyExtractor: (r) => r.id });
-    if (hasChildren) {
-        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
-    }
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                { id: "delete", label: "Delete Selected", variant: "secondary", onClick: () => { selection.clearSelection(); } },
-            ] } } : {});
-    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search events by title or type", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); }, showTableView: true, view: view, onViewChange: (v) => setView(v), onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { size: "sm", onClick: openCreatePanel, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), "Add Event"] }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
-                    { id: "delete", label: "Delete Selected", variant: "secondary", onClick: () => { selection.clearSelection(); } },
-                ] }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-error-surface px-4 py-3 text-sm text-error dark:border-red-900/60", children: errorMessage })), view === "table" ? (_jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No events found", onRowClick: (row) => openEditPanel(row.id) })) : (_jsx(AdminViewCards, { rows: rows, view: view, isLoading: isLoading, emptyLabel: "No events found", onRowClick: undefined, selectedIdSet: selection.selectedIdSet, onToggleSelect: selection.toggle }))] }), _jsxs(ListingFilterDrawer, { open: filterOpen, onClose: () => setFilterOpen(false), onApply: applyFilters, onClear: clearFilters, activeCount: activeFilterCount, children: [_jsx(FilterChipGroup, { label: "Status", tabs: STATUS_OPTIONS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] }), _jsx(SideDrawer, { isOpen: isCreateOpen || isEditOpen, onClose: closePanel, title: isCreateOpen ? "Add Event" : "Edit Event", mode: isCreateOpen ? "create" : "edit", children: (isCreateOpen || isEditOpen) && (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })) })] }));
+        buildFilters: (state) => {
+            const parts = [];
+            if (state.status && state.status !== "All")
+                parts.push(`status==${state.status}`);
+            if (state.type && state.type !== "All")
+                parts.push(`type==${state.type}`);
+            return parts.join(",") || undefined;
+        },
+        primaryAction: {
+            label: "Add Event",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
+        },
+        buildBulkActions: (selection) => [
+            {
+                id: "delete",
+                label: "Delete Selected",
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_EVENT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { label: "Type", tabs: TYPE_OPTIONS, value: pendingFilters.type ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, type: id })) })] })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminEventEditorView, { eventId: editId ?? undefined, onSaved: closePanel, embedded: true })),
+        resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Event" : "Edit Event"),
+    };
+    return _jsx(DataListingView, { config: config });
 }

package/dist/features/events/components/EventCard.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { Article, BaseListingCard, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";

package/dist/features/events/components/EventOfferCard.d.ts

@@ -0,0 +1,19 @@
+export interface EventOfferCardProps {
+    /** Coupon code to copy. */
+    couponCode: string;
+    /** Description of what the coupon does. */
+    offerDescription?: string;
+    /** Headline. */
+    title?: string;
+    /** Optional filter param for the CTA — e.g. {key: "category", value: "trading-cards"}. */
+    filterParam?: {
+        key: string;
+        value: string;
+    };
+}
+/**
+ * `EventOfferCard` — W1-18 — offer event UI noted as missing in the plan.
+ * Renders a coupon code with copy-to-clipboard + a CTA to the filtered
+ * products page.
+ */
+export declare function EventOfferCard({ couponCode, offerDescription, title, filterParam, }: EventOfferCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/events/components/EventOfferCard.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { Div, Heading, Stack, Text } from "../../../ui";
+import { Button } from "../../../ui/components/Button";
+import { ROUTES } from "../../../next/routing/route-map";
+/**
+ * `EventOfferCard` — W1-18 — offer event UI noted as missing in the plan.
+ * Renders a coupon code with copy-to-clipboard + a CTA to the filtered
+ * products page.
+ */
+export function EventOfferCard({ couponCode, offerDescription, title = "Exclusive offer", filterParam, }) {
+    const [copied, setCopied] = useState(false);
+    const href = filterParam
+        ? `${ROUTES.PUBLIC.PRODUCTS}?${encodeURIComponent(filterParam.key)}=${encodeURIComponent(filterParam.value)}`
+        : String(ROUTES.PUBLIC.PRODUCTS);
+    const copyCode = async () => {
+        try {
+            await navigator.clipboard.writeText(couponCode);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            /* clipboard unavailable — leave button as-is */
+        }
+    };
+    return (_jsx(Div, { className: "rounded-2xl border border-zinc-200 dark:border-zinc-700 p-6", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold", children: title }), offerDescription ? (_jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400", children: offerDescription })) : null] }), _jsxs(Div, { className: "flex items-center gap-3 rounded-lg bg-zinc-50 dark:bg-zinc-900 px-4 py-3", children: [_jsx("code", { className: "flex-1 font-mono text-lg font-bold text-zinc-900 dark:text-zinc-100", children: couponCode }), _jsx(Button, { type: "button", variant: "outline", onClick: copyCode, children: copied ? "Copied!" : "Copy code" })] }), _jsx(Div, { children: _jsx(Link, { href: href, children: _jsx(Button, { variant: "primary", children: "Apply at checkout" }) }) })] }) }));
+}

package/dist/features/events/components/EventRaffleEntryForm.d.ts

@@ -0,0 +1,25 @@
+export interface EventRaffleEntryFormProps {
+    /** Event id used for the entry POST. */
+    eventId: string;
+    /** Raffle prize label rendered prominently above the form. */
+    prizeLabel?: string;
+    /** Raffle type — drives the helper copy. */
+    raffleType?: "open_raffle" | "top_n_scorers" | "top_n_participants" | "spin_wheel";
+    /** Top-N value when raffleType supports it. */
+    topN?: number;
+    /** Max entries this user already has (drives the over-limit message). */
+    userEntryCount?: number;
+    /** Server-enforced max entries per user (defaults to 1). */
+    maxEntriesPerUser?: number;
+    /** When true, the form is in a submitted/locked state. */
+    submitted?: boolean;
+    /** Caller-provided submit handler. Receives the user's optional message. */
+    onSubmit: (message: string) => Promise<void> | void;
+}
+/**
+ * `EventRaffleEntryForm` — W1-18 — fills the gap noted in the plan ("Raffle
+ * entry form (71 LOC stub) — no entry form"). Renders the prize hero,
+ * eligibility status, an optional message field, and a submit button. Server
+ * action wiring stays with the caller via the `onSubmit` prop.
+ */
+export declare function EventRaffleEntryForm({ eventId: _eventId, prizeLabel, raffleType, topN, userEntryCount, maxEntriesPerUser, submitted, onSubmit, }: EventRaffleEntryFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/events/components/EventRaffleEntryForm.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../../../ui/components/Button";
+import { Div, Heading, Stack, Text } from "../../../ui";
+import { Badge } from "../../../ui/components/Badge";
+/**
+ * `EventRaffleEntryForm` — W1-18 — fills the gap noted in the plan ("Raffle
+ * entry form (71 LOC stub) — no entry form"). Renders the prize hero,
+ * eligibility status, an optional message field, and a submit button. Server
+ * action wiring stays with the caller via the `onSubmit` prop.
+ */
+export function EventRaffleEntryForm({ eventId: _eventId, prizeLabel, raffleType = "open_raffle", topN, userEntryCount = 0, maxEntriesPerUser = 1, submitted = false, onSubmit, }) {
+    const [message, setMessage] = useState("");
+    const [busy, setBusy] = useState(false);
+    const overLimit = userEntryCount >= maxEntriesPerUser;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (overLimit || submitted || busy)
+            return;
+        setBusy(true);
+        try {
+            await onSubmit(message.trim());
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const eligibilityCopy = raffleType === "open_raffle"
+        ? "Open to all eligible participants — one entry per user."
+        : raffleType === "top_n_scorers"
+            ? `Top ${topN ?? "N"} highest-scoring entries win.`
+            : raffleType === "top_n_participants"
+                ? `Earliest ${topN ?? "N"} entries qualify.`
+                : "Spin the wheel to claim your prize.";
+    return (_jsxs(Div, { className: "rounded-2xl border border-zinc-200 dark:border-zinc-700 p-6 space-y-4", children: [prizeLabel ? (_jsxs(Stack, { gap: "xs", children: [_jsx(Badge, { variant: "warning", children: "Prize" }), _jsx(Heading, { level: 2, className: "text-2xl font-bold", children: prizeLabel })] })) : null, _jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400", children: eligibilityCopy }), submitted ? (_jsx(Div, { className: "rounded-lg bg-success-surface px-4 py-3 text-sm text-success", children: "You're in. Check the leaderboard for results." })) : overLimit ? (_jsxs(Div, { className: "rounded-lg bg-warning-surface px-4 py-3 text-sm text-warning", children: ["You've used all ", maxEntriesPerUser, " entry slot", maxEntriesPerUser === 1 ? "" : "s", " for this raffle."] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [_jsxs("label", { htmlFor: "raffle-message", className: "block text-sm font-medium", children: ["Message ", _jsx("span", { className: "text-zinc-400", children: "(optional)" })] }), _jsx("textarea", { id: "raffle-message", value: message, onChange: (e) => setMessage(e.target.value), rows: 3, maxLength: 500, className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-sm bg-white dark:bg-zinc-900 focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)]", placeholder: "Share why you'd like to win", disabled: busy }), _jsx(Button, { type: "submit", variant: "primary", disabled: busy, children: busy ? "Submitting…" : "Enter raffle" })] }))] }));
+}

package/dist/features/events/components/EventRafflesSection.d.ts

@@ -4,9 +4,6 @@ export interface EventRafflesSectionProps {
 }
 /**
  * Renders a live-raffle/spin-wheel strip on the homepage.
- *
- * Reads events with `hasRaffle=true` and status in {"active","upcoming"}. The
- * `hasRaffle` flag is added later with the raffle feature; for now the
- * component renders an empty state and the section ships disabled in seed.
+ * W1-38 (2026-05-23): fetches events with hasRaffle=true and renders the EventCard grid.
  */
 export declare function EventRafflesSection({ config, }: EventRafflesSectionProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/events/components/EventRafflesSection.js

@@ -2,16 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
 import { Container, Heading, Section, Stack, Text, } from "../../../ui";
 import { ROUTES } from "../../../next";
+import { eventRepository } from "../repository/events.repository";
+import { EventCard } from "./EventCard";
 /**
  * Renders a live-raffle/spin-wheel strip on the homepage.
- *
- * Reads events with `hasRaffle=true` and status in {"active","upcoming"}. The
- * `hasRaffle` flag is added later with the raffle feature; for now the
- * component renders an empty state and the section ships disabled in seed.
+ * W1-38 (2026-05-23): fetches events with hasRaffle=true and renders the EventCard grid.
  */
 export async function EventRafflesSection({ config, }) {
     const title = config.title ?? "Live Raffles & Spin Wheels";
     const subtitle = config.subtitle ?? "Participate in community events and win prizes";
-    const events = [];
-    return (_jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: title }), subtitle ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: subtitle })) : null] }), events.length === 0 ? (_jsxs(Stack, { align: "center", gap: "sm", className: "rounded-2xl border border-dashed border-zinc-300 px-6 py-12 text-center dark:border-slate-700", children: [_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No upcoming raffles \u2014 keep an eye on the events page." }), _jsx(Link, { href: String(ROUTES.PUBLIC.EVENTS), className: "text-sm font-medium text-primary hover:underline", children: "Browse all events \u2192" })] })) : null] }) }) }));
+    const limit = 6;
+    let events = [];
+    try {
+        const result = await eventRepository.list({
+            filters: "hasRaffle==true,status==active",
+            sorts: "-startsAt",
+            pageSize: limit,
+        });
+        events = (result.items ?? []);
+    }
+    catch {
+        events = [];
+    }
+    return (_jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: title }), subtitle ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: subtitle })) : null] }), events.length === 0 ? (_jsxs(Stack, { align: "center", gap: "sm", className: "rounded-2xl border border-dashed border-zinc-300 px-6 py-12 text-center dark:border-slate-700", children: [_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No upcoming raffles \u2014 keep an eye on the events page." }), _jsx(Link, { href: String(ROUTES.PUBLIC.EVENTS), className: "text-sm font-medium text-primary hover:underline", children: "Browse all events \u2192" })] })) : (_jsx("div", { className: "fluid-grid-card gap-3", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) }))] }) }) }));
 }

package/dist/features/events/components/EventSaleBanner.d.ts

@@ -0,0 +1,21 @@
+export interface EventSaleBannerProps {
+    /** Discount percent (e.g. 20 = 20% off). */
+    discountPercent?: number;
+    /** Coupon code (when the sale is gated by a code). */
+    couponCode?: string;
+    /** Sale headline override. */
+    title?: string;
+    /** Sale subheading override. */
+    subtitle?: string;
+    /** Filter the catalog page to a specific category / tag. */
+    filterParam?: {
+        key: string;
+        value: string;
+    };
+}
+/**
+ * `EventSaleBanner` — W1-18 — sale event UI noted as missing in the plan.
+ * Renders a hero banner with the discount, optional coupon, and a CTA to the
+ * filtered products catalog.
+ */
+export declare function EventSaleBanner({ discountPercent, couponCode, title, subtitle, filterParam, }: EventSaleBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/events/components/EventSaleBanner.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Div, Heading, Stack, Text } from "../../../ui";
+import { Button } from "../../../ui/components/Button";
+import { ROUTES } from "../../../next/routing/route-map";
+/**
+ * `EventSaleBanner` — W1-18 — sale event UI noted as missing in the plan.
+ * Renders a hero banner with the discount, optional coupon, and a CTA to the
+ * filtered products catalog.
+ */
+export function EventSaleBanner({ discountPercent, couponCode, title, subtitle, filterParam, }) {
+    const headline = title ?? (discountPercent ? `${discountPercent}% off, today only` : "Special sale");
+    const href = filterParam
+        ? `${ROUTES.PUBLIC.PRODUCTS}?${encodeURIComponent(filterParam.key)}=${encodeURIComponent(filterParam.value)}`
+        : `${ROUTES.PUBLIC.PRODUCTS}?onSale=true`;
+    return (_jsx(Div, { className: "rounded-2xl bg-gradient-to-br from-[var(--appkit-color-primary)] to-[var(--appkit-color-secondary)] p-6 text-white shadow-lg", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-3xl font-bold", children: headline }), subtitle ? _jsx(Text, { className: "text-base text-white/90", children: subtitle }) : null] }), couponCode ? (_jsxs(Div, { className: "inline-flex items-center gap-3 rounded-lg bg-white/10 px-4 py-2 backdrop-blur", children: [_jsx("span", { className: "text-xs uppercase tracking-wide opacity-80", children: "Code" }), _jsx("span", { className: "font-mono text-lg font-bold", children: couponCode })] })) : null, _jsx(Div, { children: _jsx(Link, { href: href, children: _jsx(Button, { variant: "secondary", children: "Shop the sale" }) }) })] }) }));
+}

package/dist/features/events/components/index.d.ts

@@ -29,3 +29,9 @@ export { EventRaffleWinnerView } from "./EventRaffleWinnerView";
 export type { EventRaffleWinnerViewProps } from "./EventRaffleWinnerView";
 export { SpinWheelView } from "./SpinWheelView";
 export type { SpinWheelViewProps } from "./SpinWheelView";
+export { EventRaffleEntryForm } from "./EventRaffleEntryForm";
+export type { EventRaffleEntryFormProps } from "./EventRaffleEntryForm";
+export { EventSaleBanner } from "./EventSaleBanner";
+export type { EventSaleBannerProps } from "./EventSaleBanner";
+export { EventOfferCard } from "./EventOfferCard";
+export type { EventOfferCardProps } from "./EventOfferCard";

package/dist/features/events/components/index.js

@@ -15,3 +15,7 @@ export { EventPollWidget } from "./EventPollWidget";
 export { EventRafflesSection } from "./EventRafflesSection";
 export { EventRaffleWinnerView } from "./EventRaffleWinnerView";
 export { SpinWheelView } from "./SpinWheelView";
+// W1-18: Event participation flows (raffle entry / sale banner / offer coupon)
+export { EventRaffleEntryForm } from "./EventRaffleEntryForm";
+export { EventSaleBanner } from "./EventSaleBanner";
+export { EventOfferCard } from "./EventOfferCard";

package/dist/features/events/repository/event-entry.repository.d.ts

@@ -7,6 +7,11 @@ declare class EventEntryRepository extends BaseRepository<EventEntryDocument> {
     protected mapDoc<D = EventEntryDocument>(snap: import("../../../providers/db-firebase").DocumentSnapshot): D;
     listForEvent(eventId: string, model: SieveModel): Promise<FirebaseSieveResult<EventEntryDocument>>;
     listForUser(userId: string, model: SieveModel): Promise<FirebaseSieveResult<EventEntryDocument>>;
+    /**
+     * W1-42 — admin-facing list (all events, all users). Filterable on eventId,
+     * userId, reviewStatus, submittedAt; sortable on submittedAt + points.
+     */
+    list(model: SieveModel): Promise<FirebaseSieveResult<EventEntryDocument>>;
     hasUserEntered(eventId: string, userId: string): Promise<boolean>;
     countUserEntries(eventId: string, userId: string): Promise<number>;
     getLeaderboard(eventId: string, limit?: number): Promise<import("../types").LeaderboardEntry[]>;

package/dist/features/events/repository/event-entry.repository.js

@@ -23,6 +23,13 @@ class EventEntryRepository extends BaseRepository {
             baseQuery: this.getCollection().where(EVENT_ENTRY_FIELDS.USER_ID, "==", userId),
         });
     }
+    /**
+     * W1-42 — admin-facing list (all events, all users). Filterable on eventId,
+     * userId, reviewStatus, submittedAt; sortable on submittedAt + points.
+     */
+    async list(model) {
+        return this.sieveQuery(model, EventEntryRepository.SIEVE_FIELDS);
+    }
     async hasUserEntered(eventId, userId) {
         try {
             const snapshot = await this.getCollection()

package/dist/features/faq/components/FAQPageContent.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading, Input, SlottedListingView, Text } from "../../../ui";
 import { FAQCategorySidebar } from "./FAQCategorySidebar";

package/dist/features/filters/AsyncFacetSection.d.ts

@@ -1,5 +1,5 @@
 import type { FacetOption } from "./FilterFacetSection";
-import type { AsyncPage } from "../../ui/components/DynamicSelect";
+import type { AsyncPage } from "../../ui/components/PaginatedSelect";
 export interface AsyncFacetSectionProps {
     title: string;
     selected: string[];

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Heading, Row, Section, Span, Text } from "../../../ui";
+import { Button, Div, Grid, Heading, Row, Section, Span, Stack, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { ArrowRight, Sparkles } from "lucide-react";
 // --- Constants ---------------------------------------------------------------
@@ -9,17 +9,17 @@ const CLS_CONTAINER = "w-full max-w-7xl mx-auto";
 export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", onCtaClick, backgroundImage, backgroundColor, tagLabel, isLoading = false, compact = false, className = "", }) {
     const wrapClass = "bg-gradient-to-br from-amber-50/40 to-orange-50/20 dark:from-amber-950/10 dark:to-orange-950/5";
     if (isLoading) {
-        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: CLS_CONTAINER, "data-section": "advertisementbanner-div-297", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
     }
     // -- Split layout: when a backgroundImage is provided --
     if (backgroundImage) {
-        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: CLS_CONTAINER, "data-section": "advertisementbanner-div-298", children: _jsx("div", { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", "data-section": "advertisementbanner-div-299", children: _jsxs("div", { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-300", children: [_jsxs("div", { className: `relative ${THEME_CONSTANTS.card.aspectBanner} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-301", children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx("div", { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs("div", { className: "relative flex flex-col justify-center px-8 py-10 md:px-12 md:py-14", "data-section": "advertisementbanner-div-302", 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("div", { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", "data-section": "advertisementbanner-div-303", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { 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 gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsx(Div, { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", children: _jsxs(Grid, { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, children: [_jsxs(Div, { className: `relative ${THEME_CONSTANTS.card.aspectBanner} 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(Div, { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs(Stack, { className: "relative justify-center px-8 py-10 md:px-12 md:py-14", 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, { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { 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 gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
     }
     // -- Full-width gradient layout --
-    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: CLS_CONTAINER, "data-section": "advertisementbanner-div-304", children: _jsxs("div", { className: [
-                    "relative overflow-hidden rounded-2xl flex items-center",
+    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx(Div, { className: CLS_CONTAINER, children: _jsxs(Row, { align: "center", className: [
+                    "relative overflow-hidden rounded-2xl",
                     compact
                         ? "h-[clamp(112px,16vh,160px)]"
                         : "min-h-[clamp(240px,34vh,360px)]",
-                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, "data-section": "advertisementbanner-div-305", children: [!backgroundColor && (_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600", "aria-hidden": true })), _jsxs("div", { className: "absolute inset-0 overflow-hidden", "aria-hidden": true, "data-section": "advertisementbanner-div-306", children: [_jsx("div", { className: "absolute -top-16 -left-16 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse" }), _jsx("div", { className: "absolute -bottom-16 right-0 w-80 h-80 rounded-full bg-cobalt/20 blur-3xl animate-pulse" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full px-6 py-4 gap-4 flex-wrap", children: [_jsxs("div", { className: "inline-flex items-center gap-2", "data-section": "advertisementbanner-div-307", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { className: "text-white font-semibold text-sm", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: "bg-white dark:bg-zinc-100 text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold gap-1.5 flex-shrink-0", children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs("div", { className: "relative z-10 w-full max-w-4xl mx-auto px-6 py-12 md:py-16 text-center", "data-section": "advertisementbanner-div-308", children: [tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 bg-white/15 text-white/90 text-xs font-semibold uppercase tracking-widest px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm shadow-sm", "data-section": "advertisementbanner-div-309", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 drop-shadow-lg leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white text-base md:text-xl mb-10 max-w-2xl mx-auto", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "bg-white dark:bg-zinc-100 text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
+                ].join(" "), style: backgroundColor ? { backgroundColor } : undefined, children: [!backgroundColor && (_jsx(Div, { className: "absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600", "aria-hidden": true })), _jsxs(Div, { className: "absolute inset-0 overflow-hidden", "aria-hidden": true, children: [_jsx(Div, { className: "absolute -top-16 -left-16 w-64 h-64 rounded-full bg-primary/20 blur-3xl animate-pulse" }), _jsx(Div, { className: "absolute -bottom-16 right-0 w-80 h-80 rounded-full bg-cobalt/20 blur-3xl animate-pulse" })] }), compact ? (_jsxs(Row, { justify: "between", className: "relative z-10 w-full px-6 py-4 gap-4 flex-wrap", children: [_jsxs(Span, { className: "inline-flex items-center gap-2", children: [_jsx(Sparkles, { className: "w-4 h-4 text-white/80" }), _jsx(Span, { className: "text-white font-semibold text-sm", children: title })] }), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "sm", onClick: onCtaClick, className: "bg-white dark:bg-zinc-100 text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold gap-1.5 flex-shrink-0", children: [ctaLabel, _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] }))] })) : (_jsxs(Div, { className: "relative z-10 w-full max-w-4xl mx-auto px-6 py-12 md:py-16 text-center", children: [tagLabel && (_jsxs(Span, { className: "inline-flex items-center gap-1.5 bg-white/15 text-white/90 text-xs font-semibold uppercase tracking-widest px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm shadow-sm", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-5xl lg:text-6xl font-extrabold text-white mb-4 drop-shadow-lg leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white text-base md:text-xl mb-10 max-w-2xl mx-auto", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "bg-white dark:bg-zinc-100 text-indigo-700 hover:bg-zinc-50 dark:hover:bg-zinc-200 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] }))] }) }) }));
 }

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

@@ -1,4 +1,3 @@
-import React from "react";
 export interface FAQTab {
     value: string;
     label: string;
@@ -26,10 +25,6 @@ export interface FAQSectionProps {
     viewMoreLabel?: string;
     hasMore?: boolean;
     moreCount?: number;
-    /** @deprecated Tabs are now derived internally or from the tabs prop */
-    activeTab?: string;
-    /** @deprecated Use showCategoryTabs + tabs props instead */
-    renderTabs?: () => React.ReactNode;
     className?: string;
 }
 export declare function FAQSection({ title, subtitle, items, tabs: tabsProp, showCategoryTabs, allowMultipleOpen, defaultOpenCount, viewMoreHref, viewMoreLabel, hasMore, moreCount, className, }: FAQSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Section } from "../../../ui";
+import { Div, Grid, Row, Section, Stack } from "../../../ui";
 /** Full-page skeleton shown while homepage data loads. */
 export function HomepageSkeleton() {
     const { skeleton, flex, themed } = THEME_CONSTANTS;
@@ -9,5 +9,5 @@ export function HomepageSkeleton() {
     const trustCardH = "h-[clamp(120px,18vh,170px)]";
     const categoryTileH = "h-[clamp(112px,16vh,160px)]";
     const newsletterH = "h-[clamp(220px,28vh,320px)]";
-    return (_jsxs("div", { className: "w-full overflow-hidden", "data-section": "homepageskeleton-div-328", children: [_jsx("div", { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsx("div", { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgPrimary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, "data-section": "homepageskeleton-div-329", children: [_jsx("div", { className: `${skeleton.heading} w-52` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", "data-section": "homepageskeleton-div-330", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, "data-section": "homepageskeleton-div-331", children: [_jsx("div", { className: `${skeleton.heading} w-56` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", "data-section": "homepageskeleton-div-332", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx("div", { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
+    return (_jsxs(Div, { className: "w-full overflow-hidden", children: [_jsx(Div, { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsx(Div, { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgPrimary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-52` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsxs(Row, { className: `${flex.between} mb-6`, children: [_jsx(Div, { className: `${skeleton.heading} w-56` }), _jsx(Div, { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: `${skeleton.image} w-full pb-[100%]` }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Div, { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
 }

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, SiteLogo, Span, Text, TextLink } from "../../../ui";
+import { Button, Div, 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 (_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", 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(Row, { justify: "center", gap: "md", 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} 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" }) })] }) })] }) })] }));
+    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", 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", children: [pillLabel && (_jsx(Div, { 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", 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`, children: [_jsx(Div, { className: "absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cobalt/5" }), _jsx(Row, { centered: true, className: `absolute inset-0 ${flex.center} px-10`, children: _jsx(SiteLogo, { title: brandLogoText || "LetItRip.in", className: "h-24 xl:h-32 2xl:h-40 max-w-full" }) })] }) })] }) })] }));
 }

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

@@ -70,7 +70,7 @@ export async function fetchLiveStats(requests) {
         tasks.push((async () => {
             try {
                 const db = getAdminDb();
-                let ref = db.collection(collection);
+                const ref = db.collection(collection);
                 const query = filterField !== undefined && filterValue !== undefined
                     ? ref.where(filterField, "==", filterValue)
                     : ref;