@mohasinac/appkit 2.6.3 → 2.6.4

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

@@ -4,8 +4,9 @@ import React, { useState, useCallback } from "react";
 import { Plus, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { usePanelUrlSync } from "../../../react/hooks/use-panel-url-sync";
-import { Button, ListingToolbar, Pagination, ListingViewShell, SideDrawer } from "../../../ui";
+import { Button, FilterChipGroup, ListingToolbar, Pagination, ListingViewShell, SideDrawer } 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 { AdminEventEditorView } from "./AdminEventEditorView";
@@ -18,8 +19,19 @@ const SORT_OPTIONS = [
     { value: "-createdAt", label: "Newest" },
     { value: "title", label: "Title A–Z" },
 ];
-const STATUS_OPTIONS = ["All", "published", "draft", "active", "ended"];
-const TYPE_OPTIONS = ["All", "contest", "giveaway", "sale", "poll", "survey", "flash-sale"];
+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.
+const TYPE_OPTIONS = [
+    { id: "All", label: "All" },
+    { id: "contest", label: "Contest" },
+    { id: "giveaway", label: "Giveaway" },
+    { id: "sale", label: "Sale" },
+    { id: "poll", label: "Poll" },
+    { id: "survey", label: "Survey" },
+    { id: "flash-sale", label: "Flash Sale" },
+];
 export function AdminEventsView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
@@ -86,5 +98,5 @@ export function AdminEventsView({ children, getRowHref, ...props }) {
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    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); table.setPage(1); }, hideViewToggle: true, 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"] }) }), 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-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No events found", onRowClick: (row) => openEditPanel(row.id) })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: TYPE_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] })] }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] })), _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 })) })] }));
+    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); table.setPage(1); }, hideViewToggle: true, 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"] }) }), 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-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No events found", onRowClick: (row) => openEditPanel(row.id) })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", 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("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] })), _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 })) })] }));
 }

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

@@ -9,6 +9,9 @@ interface EventCardProps {
     };
     onParticipate?: (event: EventItem) => void;
     className?: string;
+    selectable?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string, selected: boolean) => void;
 }
-export declare function EventCard({ event, labels, onParticipate, className, }: EventCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventCard({ event, labels, onParticipate, className, selectable, isSelected, onSelect, }: EventCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,25 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Article, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";
+import { Article, BaseListingCard, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";
 import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { EVENT_FIELDS } from "../schemas";
 import { EventStatusBadge } from "./EventStatusBadge";
 import { ROUTES } from "../../../next";
+import { useLongPress } from "../../../react/hooks/useLongPress";
 const TYPE_ICONS = {
     sale: "🏷️",
     offer: "🎁",
     poll: "📊",
     survey: "📝",
     feedback: "💬",
+    raffle: "🎟️",
+    spin_wheel: "🎡",
 };
-export function EventCard({ event, labels = {}, onParticipate, className = "", }) {
+export function EventCard({ event, labels = {}, onParticipate, className = "", selectable = false, isSelected = false, onSelect, }) {
+    const longPress = useLongPress(() => onSelect?.(event.id, !isSelected));
     const safeTitle = event.title?.trim() || "Untitled event";
     const now = new Date();
     const endsAt = new Date(event.endsAt);
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
     const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
-    return (_jsxs(Article, { className: `group flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [_jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center", children: _jsx("span", { className: "text-5xl opacity-40", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1 group-hover:text-primary transition-colors", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+    return (_jsxs(Article, { className: `group relative flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border bg-white shadow-sm transition-shadow hover:shadow-md dark:bg-slate-900 ${isSelected ? "border-primary outline outline-2 outline-primary" : "border-zinc-200 dark:border-slate-700"} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 group-hover:opacity-100 transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center", children: _jsx("span", { className: "text-5xl opacity-40", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1 group-hover:text-primary transition-colors", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
                                 daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { type: "button", onClick: () => onParticipate(event), className: "w-full rounded-lg bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { href: detailHref, className: "inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
 }

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

@@ -0,0 +1,21 @@
+export interface RaffleWinnerEvent {
+    rafflePrize?: string;
+    raffleWinnerUserId?: string;
+    raffleWinnerDisplayName?: string;
+    raffleEntryCount?: number;
+    raffleTriggeredAt?: string | Date;
+    raffleGithubFunctionUrl?: string;
+}
+export interface EventRaffleWinnerViewProps {
+    event: RaffleWinnerEvent;
+    labels?: {
+        heading?: string;
+        winnerLabel?: string;
+        prizeLabel?: string;
+        poolLabel?: string;
+        fairnessLabel?: string;
+        notDrawnYet?: string;
+        anonymous?: string;
+    };
+}
+export declare function EventRaffleWinnerView({ event, labels }: EventRaffleWinnerViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Article, Div, Heading, Span, Text, TextLink } from "../../../ui";
+const DEFAULT_LABELS = {
+    heading: "Raffle Winner",
+    winnerLabel: "Winner",
+    prizeLabel: "Prize",
+    poolLabel: "Entries in pool",
+    fairnessLabel: "Verifiable randomness",
+    notDrawnYet: "The raffle has not been drawn yet.",
+    anonymous: "Anonymous participant",
+};
+export function EventRaffleWinnerView({ event, labels }) {
+    const l = { ...DEFAULT_LABELS, ...(labels ?? {}) };
+    if (!event.raffleWinnerUserId) {
+        return (_jsx(Div, { className: "rounded-xl border border-dashed border-zinc-300 dark:border-zinc-700 px-6 py-10 text-center", children: _jsx(Text, { className: "text-zinc-500 dark:text-zinc-400", children: l.notDrawnYet }) }));
+    }
+    return (_jsxs(Article, { className: "space-y-4", children: [_jsxs(Heading, { level: 2, className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: ["\uD83C\uDF9F\uFE0F ", l.heading] }), _jsxs(Div, { className: "rounded-2xl border border-amber-200 bg-amber-50/60 dark:border-amber-700 dark:bg-amber-900/20 p-6 space-y-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300", children: l.winnerLabel }), _jsx(Text, { className: "mt-1 text-2xl font-bold text-amber-900 dark:text-amber-100", children: event.raffleWinnerDisplayName?.trim() || l.anonymous })] }), event.rafflePrize ? (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300", children: l.prizeLabel }), _jsx(Text, { className: "mt-1 text-base text-zinc-800 dark:text-zinc-100", children: event.rafflePrize })] })) : null, _jsxs(Div, { className: "flex flex-wrap gap-x-6 gap-y-2 pt-2 text-sm text-zinc-600 dark:text-zinc-300", children: [typeof event.raffleEntryCount === "number" ? (_jsxs(Span, { children: [l.poolLabel, ":", " ", _jsx(Span, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: event.raffleEntryCount })] })) : null, event.raffleTriggeredAt ? (_jsx(Span, { children: new Date(event.raffleTriggeredAt).toLocaleString() })) : null] })] }), event.raffleGithubFunctionUrl ? (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 p-4 text-sm", children: [_jsx(Text, { className: "font-medium text-zinc-700 dark:text-zinc-200", children: l.fairnessLabel }), _jsx(TextLink, { href: event.raffleGithubFunctionUrl, className: "mt-1 block break-all text-primary-600 dark:text-primary-400 hover:underline", children: event.raffleGithubFunctionUrl })] })) : null] }));
+}

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

@@ -0,0 +1,27 @@
+import type { SpinPrize } from "../types";
+export interface SpinWheelViewProps {
+    eventId: string;
+    prizes: SpinPrize[];
+    alreadyUsed?: boolean;
+    initialPrizeId?: string;
+    initialCouponCode?: string;
+    windowStart?: string | Date | null;
+    windowEnd?: string | Date | null;
+    onSpin: (eventId: string) => Promise<{
+        spinPrizeId?: string;
+        spinPrizeTitle?: string;
+        spinPrizeCouponCode?: string;
+        reason?: string;
+    }>;
+    labels?: {
+        heading?: string;
+        spinButton?: string;
+        spinningButton?: string;
+        alreadySpun?: string;
+        outsideWindow?: string;
+        wonHeadline?: string;
+        couponHint?: string;
+        errorFallback?: string;
+    };
+}
+export declare function SpinWheelView({ eventId, prizes, alreadyUsed, initialPrizeId, initialCouponCode, windowStart, windowEnd, onSpin, labels, }: SpinWheelViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { Button, Div, Heading, Span, Text } from "../../../ui";
+const DEFAULT_LABELS = {
+    heading: "Spin the Wheel",
+    spinButton: "Spin",
+    spinningButton: "Spinning…",
+    alreadySpun: "You've already used your spin for this event.",
+    outsideWindow: "The spin window is not open.",
+    wonHeadline: "You won:",
+    couponHint: "Coupon code:",
+    errorFallback: "Spin failed. Please try again.",
+};
+const ANIMATION_MS = 3200;
+export function SpinWheelView({ eventId, prizes, alreadyUsed, initialPrizeId, initialCouponCode, windowStart, windowEnd, onSpin, labels, }) {
+    const l = { ...DEFAULT_LABELS, ...(labels ?? {}) };
+    const activePrizes = useMemo(() => prizes.filter((p) => p.isActive !== false), [prizes]);
+    const [spinning, setSpinning] = useState(false);
+    const [resultPrizeId, setResultPrizeId] = useState(initialPrizeId);
+    const [resultCoupon, setResultCoupon] = useState(initialCouponCode);
+    const [error, setError] = useState(null);
+    const now = Date.now();
+    const startMs = windowStart ? new Date(windowStart).getTime() : null;
+    const endMs = windowEnd ? new Date(windowEnd).getTime() : null;
+    const inWindow = (startMs === null || now >= startMs) && (endMs === null || now <= endMs);
+    const disabled = spinning || alreadyUsed || !inWindow || activePrizes.length === 0;
+    const handleSpin = useCallback(async () => {
+        if (disabled)
+            return;
+        setError(null);
+        setSpinning(true);
+        try {
+            const result = await onSpin(eventId);
+            window.setTimeout(() => {
+                setSpinning(false);
+                if (result.spinPrizeId) {
+                    setResultPrizeId(result.spinPrizeId);
+                    setResultCoupon(result.spinPrizeCouponCode);
+                }
+                else {
+                    setError(l.errorFallback);
+                }
+            }, ANIMATION_MS);
+        }
+        catch {
+            setSpinning(false);
+            setError(l.errorFallback);
+        }
+    }, [disabled, eventId, l.errorFallback, onSpin]);
+    const wonPrize = resultPrizeId
+        ? activePrizes.find((p) => p.id === resultPrizeId)
+        : undefined;
+    return (_jsxs(Div, { className: "space-y-4", children: [_jsxs(Heading, { level: 2, className: "text-xl font-semibold text-zinc-900 dark:text-zinc-100", children: ["\uD83C\uDFA1 ", l.heading] }), _jsxs(Div, { className: "relative mx-auto aspect-square w-64 overflow-hidden rounded-full border-4 border-amber-400 bg-gradient-to-br from-amber-100 via-rose-100 to-violet-100 dark:from-amber-900/40 dark:via-rose-900/40 dark:to-violet-900/40", "aria-label": "Spin wheel", children: [_jsx(Div, { className: "absolute inset-0 flex items-center justify-center", style: {
+                            animation: spinning
+                                ? `lir-spin ${ANIMATION_MS}ms cubic-bezier(0.2, 0.8, 0.2, 1)`
+                                : undefined,
+                        }, children: _jsx(Text, { className: "text-4xl", children: "\uD83C\uDF81" }) }), _jsx("style", { children: `
+          @keyframes lir-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(2160deg); }
+          }
+        ` })] }), wonPrize ? (_jsxs(Div, { className: "rounded-xl border border-emerald-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-900/30 p-4 text-center", children: [_jsx(Text, { className: "text-sm uppercase tracking-wide text-emerald-700 dark:text-emerald-300", children: l.wonHeadline }), _jsx(Text, { className: "mt-1 text-lg font-bold text-emerald-900 dark:text-emerald-100", children: wonPrize.label }), resultCoupon ? (_jsxs(Text, { className: "mt-2 text-sm text-emerald-800 dark:text-emerald-200", children: [l.couponHint, " ", _jsx(Span, { className: "font-mono font-semibold", children: resultCoupon })] })) : null] })) : null, error ? (_jsx(Text, { className: "text-sm text-rose-600 dark:text-rose-400 text-center", children: error })) : null, _jsx(Div, { className: "flex justify-center", children: _jsx(Button, { variant: "primary", size: "lg", onClick: handleSpin, disabled: disabled, children: spinning ? l.spinningButton : l.spinButton }) }), alreadyUsed ? (_jsx(Text, { className: "text-center text-sm text-zinc-500 dark:text-zinc-400", children: l.alreadySpun })) : !inWindow ? (_jsx(Text, { className: "text-center text-sm text-zinc-500 dark:text-zinc-400", children: l.outsideWindow })) : null] }));
+}

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

@@ -25,3 +25,7 @@ export { EventPollWidget } from "./EventPollWidget";
 export type {} from "./EventPollWidget";
 export { EventRafflesSection } from "./EventRafflesSection";
 export type { EventRafflesSectionProps } from "./EventRafflesSection";
+export { EventRaffleWinnerView } from "./EventRaffleWinnerView";
+export type { EventRaffleWinnerViewProps } from "./EventRaffleWinnerView";
+export { SpinWheelView } from "./SpinWheelView";
+export type { SpinWheelViewProps } from "./SpinWheelView";

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

@@ -13,3 +13,5 @@ export { EventFormDrawer } from "./EventFormDrawer";
 export { EventBanner } from "./EventBanner";
 export { EventPollWidget } from "./EventPollWidget";
 export { EventRafflesSection } from "./EventRafflesSection";
+export { EventRaffleWinnerView } from "./EventRaffleWinnerView";
+export { SpinWheelView } from "./SpinWheelView";

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

@@ -2,7 +2,7 @@
  * Events Firestore Document Types & Constants
  */
 import type { MediaField } from "../../media/types";
-import type { EventType, EventStatus, EntryReviewStatus, SaleConfig, OfferConfig, PollConfig, SurveyConfig, FeedbackConfig } from "../types";
+import type { EventType, EventStatus, EntryReviewStatus, SaleConfig, OfferConfig, PollConfig, SurveyConfig, FeedbackConfig, RaffleType, SpinPrize } from "../types";
 export declare const EVENTS_COLLECTION: "events";
 export declare const EVENT_ENTRIES_COLLECTION: "eventEntries";
 export interface EventDocument {
@@ -25,6 +25,21 @@ export interface EventDocument {
     pollConfig?: PollConfig;
     surveyConfig?: SurveyConfig;
     feedbackConfig?: FeedbackConfig;
+    hasRaffle?: boolean;
+    raffleType?: RaffleType;
+    raffleTopN?: number;
+    rafflePrize?: string;
+    rafflePrizeCouponId?: string;
+    raffleGithubFunctionUrl?: string;
+    raffleWinnerUserId?: string;
+    raffleWinnerDisplayName?: string;
+    raffleWinnerEntryId?: string;
+    raffleTriggeredAt?: Date;
+    raffleEntryCount?: number;
+    spinPrizes?: SpinPrize[];
+    spinMaxPerUser?: number;
+    spinWindowStart?: Date;
+    spinWindowEnd?: Date;
     stats: {
         totalEntries: number;
         approvedEntries: number;
@@ -48,6 +63,11 @@ export interface EventEntryDocument {
     reviewedAt?: Date;
     reviewNote?: string;
     points?: number;
+    raffleEligible?: boolean;
+    spinUsed?: boolean;
+    spinPrizeId?: string;
+    spinPrizeCouponCode?: string | null;
+    spinWonAt?: Date;
     ipAddress?: string;
     submittedAt: Date;
 }
@@ -82,6 +102,8 @@ export declare const EVENT_FIELDS: {
         readonly POLL: EventType;
         readonly SURVEY: EventType;
         readonly FEEDBACK: EventType;
+        readonly RAFFLE: EventType;
+        readonly SPIN_WHEEL: EventType;
     };
     readonly STATS: {
         readonly TOTAL_ENTRIES: "stats.totalEntries";
@@ -113,4 +135,8 @@ export declare const eventQueryHelpers: {
     readonly byStatus: (status: EventStatus) => readonly ["status", "==", EventStatus];
     readonly upcoming: (date: Date) => readonly ["startsAt", ">", Date];
     readonly past: (date: Date) => readonly ["endsAt", "<", Date];
+    readonly raffles: () => readonly ["type", "==", EventType];
+    readonly spinWheels: () => readonly ["type", "==", EventType];
+    readonly withRaffle: () => readonly ["hasRaffle", "==", true];
+    readonly raffleNotYetDrawn: () => readonly ["raffleWinnerUserId", "==", null];
 };

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

@@ -46,6 +46,8 @@ export const EVENT_FIELDS = {
         POLL: "poll",
         SURVEY: "survey",
         FEEDBACK: "feedback",
+        RAFFLE: "raffle",
+        SPIN_WHEEL: "spin_wheel",
     },
     STATS: {
         TOTAL_ENTRIES: "stats.totalEntries",
@@ -74,4 +76,9 @@ export const eventQueryHelpers = {
     byStatus: (status) => ["status", "==", status],
     upcoming: (date) => ["startsAt", ">", date],
     past: (date) => ["endsAt", "<", date],
+    // SB9 raffle/spin helpers
+    raffles: () => ["type", "==", "raffle"],
+    spinWheels: () => ["type", "==", "spin_wheel"],
+    withRaffle: () => ["hasRaffle", "==", true],
+    raffleNotYetDrawn: () => ["raffleWinnerUserId", "==", null],
 };

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

@@ -1,5 +1,13 @@
 import type { MediaField } from "../../media/types/index";
-export type EventType = "sale" | "offer" | "poll" | "survey" | "feedback";
+export type EventType = "sale" | "offer" | "poll" | "survey" | "feedback" | "raffle" | "spin_wheel";
+export type RaffleType = "top_n_scorers" | "top_n_participants" | "open_raffle" | "spin_wheel";
+export interface SpinPrize {
+    id: string;
+    label: string;
+    couponId?: string;
+    weight: number;
+    isActive: boolean;
+}
 export type EventStatus = "draft" | "active" | "paused" | "ended";
 export type EntryReviewStatus = "pending" | "approved" | "flagged";
 export type PollResultsVisibility = "always" | "after_vote" | "after_end";
@@ -72,6 +80,20 @@ export interface EventItem {
     pollConfig?: PollConfig;
     surveyConfig?: SurveyConfig;
     feedbackConfig?: FeedbackConfig;
+    hasRaffle?: boolean;
+    raffleType?: RaffleType;
+    raffleTopN?: number;
+    rafflePrize?: string;
+    rafflePrizeCouponId?: string;
+    raffleGithubFunctionUrl?: string;
+    raffleWinnerUserId?: string;
+    raffleWinnerDisplayName?: string;
+    raffleTriggeredAt?: string;
+    raffleEntryCount?: number;
+    spinPrizes?: SpinPrize[];
+    spinMaxPerUser?: number;
+    spinWindowStart?: string;
+    spinWindowEnd?: string;
     stats: {
         totalEntries: number;
         approvedEntries: number;
@@ -95,6 +117,10 @@ export interface EventEntryItem {
     reviewedAt?: string;
     reviewNote?: string;
     points?: number;
+    raffleEligible?: boolean;
+    spinUsed?: boolean;
+    spinPrizeId?: string;
+    spinWonAt?: string;
     submittedAt: string;
 }
 export interface LeaderboardEntry {

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

@@ -0,0 +1,16 @@
+/**
+ * FeaturedBundlesSection — S-SBUNI-3 2026-05-13 rebuild.
+ *
+ * Rebuilt after SB-UNI-V deletion. Renders a horizontal grid of bundle
+ * cards driven by `initialItems` (CategoryDocument with categoryType:"bundle").
+ * Server-friendly — no data fetching here; the renderer passes pre-fetched
+ * items from `MarketplaceHomepageView.sectionData.bundles`.
+ */
+import type { CategoryDocument } from "../../categories/schemas";
+export interface FeaturedBundlesSectionProps {
+    title?: string;
+    description?: string;
+    initialItems?: CategoryDocument[];
+    className?: string;
+}
+export declare function FeaturedBundlesSection({ title, description, initialItems, className, }: FeaturedBundlesSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Badge, Div, Heading, Row, Section, Stack, Text } from "../../../ui";
+import { ROUTES } from "../../../next/routing/route-map";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { BUNDLE_COPY, BUNDLE_STOCK_VARIANT, } from "../../../_internal/shared/features/categories/bundle-copy";
+const PLACEHOLDER_EMOJI = "📦";
+export function FeaturedBundlesSection({ title = BUNDLE_COPY.featuredDefaultTitle, description, initialItems = [], className = "", }) {
+    const items = initialItems.filter((c) => c.categoryType === "bundle");
+    return (_jsx(Section, { className: `py-10 ${className}`, children: _jsxs(Stack, { gap: "md", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", className: "flex-wrap", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-100", children: title }), description && (_jsx(Text, { size: "sm", color: "muted", children: description }))] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLES ?? "/bundles"), className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: BUNDLE_COPY.featured.viewAll })] }), items.length === 0 ? (_jsx(Div, { className: "rounded-xl border border-dashed border-zinc-200 py-12 text-center dark:border-zinc-700", children: _jsx(Text, { color: "muted", children: BUNDLE_COPY.featured.empty }) })) : (_jsx(Div, { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: items.map((bundle) => (_jsx(FeaturedBundleCard, { bundle: bundle }, bundle.id))) }))] }) }));
+}
+function FeaturedBundleCard({ bundle }) {
+    const stock = bundle.bundleStockStatus ?? "in_stock";
+    const memberCount = bundle.bundleProductIds?.length ?? 0;
+    const cover = bundle.display?.coverImage;
+    const href = String(ROUTES.PUBLIC.BUNDLE_DETAIL?.(bundle.slug) ?? "#");
+    return (_jsxs(Link, { href: href, className: "group rounded-xl border border-zinc-200 bg-white p-3 transition-colors hover:border-zinc-300 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700", children: [_jsx(Div, { className: "mb-2 aspect-square overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800", children: cover ? (
+                // eslint-disable-next-line @next/next/no-img-element, lir/no-raw-media-elements
+                _jsx("img", { src: cover, alt: bundle.name, className: "h-full w-full object-cover transition-transform group-hover:scale-105", loading: "lazy" })) : (_jsx(Div, { className: "flex h-full w-full items-center justify-center text-3xl", children: PLACEHOLDER_EMOJI })) }), _jsx(Text, { className: "line-clamp-2 text-sm font-semibold", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", className: "mt-1 flex-wrap", children: [_jsx(Text, { size: "sm", weight: "bold", children: bundle.bundlePriceInPaise
+                            ? formatCurrency(bundle.bundlePriceInPaise / 100, "INR")
+                            : BUNDLE_COPY.featured.priceFallback }), _jsxs(Text, { size: "xs", color: "muted", children: ["\u00B7 ", BUNDLE_COPY.featured.itemCount(memberCount)] }), stock !== "in_stock" && (_jsx(Badge, { variant: BUNDLE_STOCK_VARIANT[stock], children: stock === "partial"
+                            ? BUNDLE_COPY.stockBadge.listVariantPartial
+                            : BUNDLE_COPY.stockBadge.listVariantOutOfStock }))] })] }));
+}

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

@@ -6,6 +6,7 @@ import { renderSection, AnnouncementBar } from "../lib/section-renderer";
 import { homepageSectionsRepository } from "../repository/homepage-sections.repository";
 import { getFeaturedProducts, getFeaturedAuctions, getFeaturedPreOrders } from "../../products/actions/product-actions";
 import { listTopLevelCategories, listBrandCategories } from "../../categories/actions/category-actions";
+import { listFeaturedBundles } from "../../../_internal/server/features/bundles/data";
 import { listStores } from "../../stores/actions/store-query-actions";
 import { getFeaturedBlogPosts } from "../../blog/actions/blog-actions";
 import { listPublicEvents } from "../../events/actions/event-actions";
@@ -70,12 +71,13 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } =
     }));
     // Determine which data-driven section types are active so we only fetch what's needed
     const activeTypes = new Set(orderedSections.map((s) => s.type));
-    const [productsResult, auctionsResult, preOrdersResult, categoriesResult, brandsResult, storesResult, blogResult, eventsResult,] = await Promise.all([
+    const [productsResult, auctionsResult, preOrdersResult, categoriesResult, brandsResult, bundlesResult, storesResult, blogResult, eventsResult,] = await Promise.all([
         activeTypes.has("products") ? getFeaturedProducts(12).catch(() => null) : null,
         activeTypes.has("auctions") ? getFeaturedAuctions(12).catch(() => null) : null,
         activeTypes.has("pre-orders") ? getFeaturedPreOrders(12).catch(() => null) : null,
         activeTypes.has("categories") ? listTopLevelCategories(12).catch(() => null) : null,
         activeTypes.has("brands") ? listBrandCategories(12).catch(() => null) : null,
+        activeTypes.has("featured-bundles") ? listFeaturedBundles(8).catch(() => null) : null,
         activeTypes.has("stores") ? listStores({ pageSize: 8, sorts: "-averageRating" }).catch(() => null) : null,
         activeTypes.has("blog-articles") ? getFeaturedBlogPosts(6).catch(() => null) : null,
         activeTypes.has("events") ? listPublicEvents({ filters: "status==active", pageSize: 6 }).catch(() => null) : null,
@@ -99,6 +101,7 @@ export async function MarketplaceHomepageView({ adSlots, newsletterFormSlot, } =
         brands: brandsResult?.length
             ? brandsResult
             : undefined,
+        bundles: bundlesResult?.length ? bundlesResult : undefined,
         stores: storesResult?.items?.length
             ? storesResult.items
             : undefined,

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

@@ -8,7 +8,7 @@ import { getDefaultLocale } from "../../../core/baseline-resolver";
 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: `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" }) }) }));
+        return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl 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: `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] }))] })] }) }) }));
+    return (_jsx(Section, { className: `py-16 px-4 sm:px-8 ${themed.bgSecondary} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl 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/section-renderer.d.ts

@@ -8,6 +8,7 @@ import type { StoreListItem } from "../../stores/types";
 import type { CategoryItem } from "../../categories/types";
 import type { BlogPost } from "../../blog/types";
 import type { EventItem } from "../../events/types";
+import type { CategoryDocument } from "../../categories/schemas";
 export interface SectionData {
     products?: ProductItem[];
     auctions?: ProductItem[];
@@ -15,6 +16,7 @@ export interface SectionData {
     stores?: StoreListItem[];
     categories?: CategoryItem[];
     brands?: CategoryItem[];
+    bundles?: CategoryDocument[];
     blog?: BlogPost[];
     events?: EventItem[];
 }

package/dist/features/homepage/lib/section-renderer.js

@@ -25,8 +25,9 @@ import { BrandsSection } from "../components/BrandsSection";
 import { SocialFeedSection } from "../components/SocialFeedSection";
 import { CustomCardsSection } from "../components/CustomCardsSection";
 import { GoogleReviewsSection } from "../components/GoogleReviewsSection";
-// SB-UNI-V — FeaturedBundlesSection deleted; bundle homepage section to be
-// rebuilt against categoryType:"bundle" queries in a follow-up cohort.
+// S-SBUNI-3 2026-05-13 — FeaturedBundlesSection rebuilt against
+// categoryType:"bundle" rows on the categories collection.
+import { FeaturedBundlesSection } from "../components/FeaturedBundlesSection";
 import { PrizeDrawsSection } from "../../products/components/PrizeDrawsSection";
 import { EventRafflesSection } from "../../events/components/EventRafflesSection";
 import { CollectionCardsSection } from "../components/CollectionCardsSection";
@@ -175,9 +176,8 @@ function renderSectionElement(section, newsletterFormSlot, faqItems, slides, liv
             return (_jsx(GoogleReviewsSection, { placeId: cfg?.placeId ?? "", maxReviews: cfg?.maxReviews ?? 6, minRating: cfg?.minRating ?? 0, layout: cfg?.layout ?? "grid", showRating: cfg?.showRating ?? true, showDate: cfg?.showDate ?? true, linkToGoogleMaps: cfg?.linkToGoogleMaps ?? true, googleMapsUrl: cfg?.googleMapsUrl }));
         }
         case "featured-bundles": {
-            // SB-UNI-V — FeaturedBundlesSection deleted with features/bundles/. The
-            // category-based replacement lands in a follow-up.
-            return null;
+            const cfg = config;
+            return (_jsx(FeaturedBundlesSection, { title: cleanTitle(cfg?.title) || "Curated Bundles", initialItems: sectionData.bundles }));
         }
         case "prize-draws": {
             const cfg = config;

package/dist/features/layout/NavbarLayout.d.ts

@@ -24,6 +24,8 @@ export interface NavbarLayoutProps {
  * NavbarLayout — generic horizontal navigation bar shell.
  *
  * Zero domain imports. Receives all navigation items and the current
- * active href as props. Hidden on mobile (visible md+).
+ * active href as props. Hidden on mobile (visible lg+).
+ *
+ * When items overflow the container, left/right scroll arrows appear automatically.
  */
 export declare function NavbarLayout({ items, activeHref, id, ariaLabel, inline, renderItem, rightSlot, }: NavbarLayoutProps): import("react/jsx-runtime").JSX.Element;