@mohasinac/appkit 4.63.4 → 4.64.0

package/dist/features/categories/utils/load-category-options.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `loadOptions` adapters for `<PaginatedSelect>` over the PUBLIC taxonomy
+ * endpoints.
+ *
+ * 🛑 Extracted 2026-10-24 because there were already THREE independent copies
+ * of this function — `AdminCategoryEditorView`, `AdminProductEditorView` and
+ * `CatalogueItemEditorView` — which is the Duplication Framework's Rule of
+ * Three trigger, and a fourth was about to be written for the store-creation
+ * form. The body below is lifted from the catalogue copy, which is the only
+ * one that got both details right (see the two 🛑 notes).
+ *
+ * The three existing copies are deliberately NOT migrated here: each lives in
+ * an editor another session may hold open, and a shared helper with one honest
+ * consumer is a better starting point than a four-way edit. They remain as the
+ * migration backlog.
+ */
+export interface TaxonomyOptionPage {
+    items: {
+        value: string;
+        label: string;
+    }[];
+    hasMore: boolean;
+}
+/**
+ * 🛑 `listingOnly=true` is load-bearing. Without it the picker offers brand
+ * and bundle rows as categories — measured against production: "Takara-Tomy",
+ * "Original Collector's Set", "Metal Fusion Duo". They share the `categories`
+ * collection, and a plain listing category OMITS `categoryType` entirely, so
+ * the test cannot be expressed as a query clause; the route applies it in
+ * memory.
+ */
+export declare const loadCategoryOptions: (q: string, p: number) => Promise<TaxonomyOptionPage>;
+export declare const loadBrandOptions: (q: string, p: number) => Promise<TaxonomyOptionPage>;

package/dist/features/categories/utils/load-category-options.js

@@ -0,0 +1,50 @@
+/**
+ * `loadOptions` adapters for `<PaginatedSelect>` over the PUBLIC taxonomy
+ * endpoints.
+ *
+ * 🛑 Extracted 2026-10-24 because there were already THREE independent copies
+ * of this function — `AdminCategoryEditorView`, `AdminProductEditorView` and
+ * `CatalogueItemEditorView` — which is the Duplication Framework's Rule of
+ * Three trigger, and a fourth was about to be written for the store-creation
+ * form. The body below is lifted from the catalogue copy, which is the only
+ * one that got both details right (see the two 🛑 notes).
+ *
+ * The three existing copies are deliberately NOT migrated here: each lives in
+ * an editor another session may hold open, and a shared helper with one honest
+ * consumer is a better starting point than a four-way edit. They remain as the
+ * migration backlog.
+ */
+import { apiClient } from "../../../http/index.js";
+import { CATEGORY_ENDPOINTS, BRAND_ENDPOINTS } from "../../../constants/api-endpoints.js";
+/**
+ * 🛑 PUBLIC endpoints only. A seller-facing picker that reached
+ * `/api/admin/categories` would 403 for the very users it exists for, and the
+ * failure renders as an empty dropdown rather than an error.
+ */
+async function loadOptionsFrom(endpoint, query, page, 
+/**
+ * Extra query params, passed as an object rather than baked into `endpoint`:
+ * this builds its own `?`, so a pre-existing query string would produce
+ * `...?listingOnly=true?page=1`.
+ */
+extra) {
+    const params = new URLSearchParams({ page: String(page), pageSize: "25", ...extra });
+    if (query)
+        params.set("q", query);
+    const res = await apiClient.get(`${endpoint}?${params.toString()}`);
+    const data = res ?? {};
+    return {
+        items: (data.items ?? []).map((c) => ({ value: c.id, label: c.name })),
+        hasMore: data.hasMore ?? false,
+    };
+}
+/**
+ * 🛑 `listingOnly=true` is load-bearing. Without it the picker offers brand
+ * and bundle rows as categories — measured against production: "Takara-Tomy",
+ * "Original Collector's Set", "Metal Fusion Duo". They share the `categories`
+ * collection, and a plain listing category OMITS `categoryType` entirely, so
+ * the test cannot be expressed as a query clause; the route applies it in
+ * memory.
+ */
+export const loadCategoryOptions = (q, p) => loadOptionsFrom(CATEGORY_ENDPOINTS.LIST, q, p, { listingOnly: "true" });
+export const loadBrandOptions = (q, p) => loadOptionsFrom(BRAND_ENDPOINTS.LIST, q, p);

package/dist/features/checkout/actions/checkout-value-otp-actions.d.ts

@@ -6,17 +6,12 @@
  * purpose from `checkout-actions.ts`'s third-party shipping consent OTP —
  * same crypto primitives, separate Firestore namespace and copy.
  */
+export type CheckoutValueOtpChannel = "email" | "whatsapp";
 /**
- * Email is the only checkout-OTP channel. WhatsApp was the other arm until
- * 2026-10-20, when the Cloud API integration was removed — see
- * `features/orders/utils/payment-proof-message.ts` for why the `wa.me`
- * links survived and the API did not. Kept as a single-member union rather
- * than deleted so the parameter stays self-documenting and a second channel
- * has an obvious seam.
- */
-export type CheckoutValueOtpChannel = "email";
-/**
- * Sends a checkout-value OTP by email.
+ * Sends a checkout-value OTP either by email (default) or WhatsApp
+ * (opt-in — the buyer must explicitly choose it in the UI). WhatsApp phone
+ * is always resolved server-side from the selected shipping address —
+ * never trust a client-supplied phone number.
  *
  * If the chosen channel (and, for email, its skip-worthy fallback) is
  * currently circuit-broken or unconfigured, the OTP gate is treated as

package/dist/features/checkout/actions/checkout-value-otp-actions.js

@@ -9,12 +9,17 @@
 import { timingSafeEqual } from "crypto";
 import { ValidationError } from "../../../errors/index.js";
 import { normalizeError } from "../../../errors/normalize.js";
+import { safeRead } from "../../../errors/safe-read.js";
 import { serverLogger } from "../../../monitoring/index.js";
 import { sendEmail } from "../../contact/email.js";
 import { getAdminDb } from "../../../providers/db-firebase/index.js";
 import { resolveDate } from "../../../utils/index.js";
+import { addressesRepository } from "../../addresses/repository/addresses.repository.js";
+import { siteSettingsRepository } from "../../admin/repository/site-settings.repository.js";
+import { sendWhatsAppBusinessMessage } from "../../whatsapp-bot/helpers/whatsapp.js";
 import { isChannelHealthy, withChannelRetry } from "../../../_internal/server/notifications/channel-health.js";
-import { CHECKOUT_VALUE_OTP_EXPIRY_MS, CHECKOUT_VALUE_OTP_MAX_ATTEMPTS, hashOtp, generateOtpCode, checkoutValueOtpRef, enforceCheckoutValueOtpRateLimit, } from "../../auth/checkout-value-otp.js";
+import { guardSend, logSuppressedSend } from "../../../_internal/server/notifications/send-guard.js";
+import { CHECKOUT_VALUE_OTP_EXPIRY_MS, CHECKOUT_VALUE_OTP_MAX_ATTEMPTS, hashOtp, generateOtpCode, checkoutValueOtpRef, enforceCheckoutValueOtpRateLimit, buildCheckoutValueOtpMessage, } from "../../auth/checkout-value-otp.js";
 function maskEmail(userEmail) {
     const [local, domain] = userEmail.split("@");
     return domain
@@ -22,7 +27,10 @@ function maskEmail(userEmail) {
         : "***";
 }
 /**
- * Sends a checkout-value OTP by email.
+ * Sends a checkout-value OTP either by email (default) or WhatsApp
+ * (opt-in — the buyer must explicitly choose it in the UI). WhatsApp phone
+ * is always resolved server-side from the selected shipping address —
+ * never trust a client-supplied phone number.
  *
  * If the chosen channel (and, for email, its skip-worthy fallback) is
  * currently circuit-broken or unconfigured, the OTP gate is treated as
@@ -37,6 +45,84 @@ export async function sendCheckoutValueOtp(userId, userEmail, channel = "email",
     const codeHash = hashOtp(code);
     const expiresAt = new Date(Date.now() + CHECKOUT_VALUE_OTP_EXPIRY_MS);
     const siteName = process.env.NEXT_PUBLIC_SITE_NAME || "LetItRip";
+    if (channel === "whatsapp") {
+        if (!addressId) {
+            throw new ValidationError("Select a delivery address before sending the code via WhatsApp.");
+        }
+        // A failed settings read makes the WhatsApp channel look deliberately
+        // switched off ("send the code by email instead") — a defensible fallback,
+        // but one an operator has to be able to see, since it is indistinguishable
+        // from an admin having disabled it.
+        const settings = await safeRead(() => siteSettingsRepository.getSingleton(), {
+            route: "checkout/value-otp",
+            key: "checkoutValueOtp.siteSettings",
+            fallback: null,
+        });
+        const creds = settings?.credentials ?? {};
+        const whatsappOtpEnabled = settings?.notificationChannels?.whatsapp?.otpEnabled === true;
+        const phoneNumberId = creds.whatsappPhoneNumberId?.trim() ?? "";
+        const accessToken = creds.whatsappCloudApiToken?.trim() ?? "";
+        const credsReady = phoneNumberId && accessToken && !phoneNumberId.includes("PLACEHOLDER") && !accessToken.includes("PLACEHOLDER");
+        if (!whatsappOtpEnabled || !credsReady) {
+            throw new ValidationError("WhatsApp verification isn't available right now — send the code by email instead.");
+        }
+        const address = await addressesRepository.findById(addressId);
+        /*
+       * REVEALED: this phone receives the high-value checkout OTP, so it has to
+       * be the real number. `addressesRepository` is ciphertext-by-default, and
+       * `.trim()` on the stored value is what the nominal brand caught — the
+       * old intersection form let `Encrypted<string>` call string methods.
+       */
+        const addressPlain = address ? addressesRepository.revealAddress(address) : null;
+        const phone = addressPlain?.phone?.trim();
+        if (!phone) {
+            throw new ValidationError("The selected address has no phone number on file — send the code by email instead.");
+        }
+        if (!(await isChannelHealthy("whatsapp"))) {
+            serverLogger.warn("sendCheckoutValueOtp: WhatsApp channel unhealthy — skipping OTP gate", { uid: userId, channel });
+            return { skipped: true };
+        }
+        await checkoutValueOtpRef(db, userId).set({
+            codeHash,
+            expiresAt,
+            attempts: 0,
+            verified: false,
+            createdAt: new Date(),
+        });
+        const message = buildCheckoutValueOtpMessage(code, siteName);
+        // Same guard as the email branch below, same reasoning: transactional, so
+        // the kill switch does not apply (the buyer cannot check out without the
+        // code), but the daily ceiling does.
+        const waGuard = {
+            channel: "whatsapp",
+            feature: "checkout_value_otp",
+            audience: "user",
+            transactional: true,
+        };
+        const waDecision = await guardSend(waGuard);
+        if (!waDecision.allow) {
+            logSuppressedSend(waGuard, waDecision);
+            throw new ValidationError("We couldn't send the verification code via WhatsApp — please try again, or send it by email instead.");
+        }
+        try {
+            const sent = await withChannelRetry("whatsapp", async () => {
+                const ok = await sendWhatsAppBusinessMessage({ toPhone: phone, message, phoneNumberId, accessToken });
+                if (!ok)
+                    throw new Error("WhatsApp Cloud API returned a non-OK response");
+                return ok;
+            });
+            if (!sent)
+                throw new Error("WhatsApp send failed");
+        }
+        catch (err) {
+            void normalizeError(err);
+            serverLogger.error("Failed to send checkout value OTP via WhatsApp", { uid: userId, err });
+            throw new ValidationError("We couldn't send the verification code via WhatsApp — please try again, or send it by email instead.");
+        }
+        const maskedPhone = phone.length > 4 ? `${"*".repeat(phone.length - 4)}${phone.slice(-4)}` : "***";
+        serverLogger.info(`Checkout value OTP sent via WhatsApp: uid=${userId}`);
+        return { maskedPhone };
+    }
     if (!(await isChannelHealthy("email"))) {
         serverLogger.warn("sendCheckoutValueOtp: email channel unhealthy — skipping OTP gate", { uid: userId, channel });
         return { skipped: true };

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

@@ -6,6 +6,8 @@ import { MediaImage } from "../../media/MediaImage.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { EVENT_FIELDS } from "../schemas/index.js";
 import { EventStatusBadge } from "./EventStatusBadge.js";
+import { EventTypeBadge } from "./EventTypeBadge.js";
+import { eventTypeMeta } from "../constants/event-type-meta.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
@@ -15,16 +17,6 @@ const __P = {
 const __O = {
     hidden: "overflow-hidden",
 };
-const TYPE_ICONS = {
-    sale: "🏷️",
-    offer: "🎁",
-    poll: "📊",
-    survey: "📝",
-    feedback: "💬",
-    raffle: "🎟️",
-    spin_wheel: "🎡",
-    lottery: "🎰",
-};
 export function EventCard({ event, labels = {}, onParticipate, className = "", selectable = false, isSelected = false, onSelect, renderOwnerActions, }) {
     const longPress = useLongPress(() => onSelect?.(event.id, !isSelected));
     const safeTitle = event.title?.trim() || "Untitled event";
@@ -33,8 +25,8 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", s
     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));
-    const card = (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${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, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : 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 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "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: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", 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 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", 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, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
+    const card = (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${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, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : 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 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: eventTypeMeta(event.type).emoji }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(EventTypeBadge, { type: event.type }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", 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 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\u2665 ", event.stats.likeCount ?? 0, " ", (event.stats.likeCount ?? 0) === 1 ? "like" : "likes"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
     /*
      * 🛑 Default, not opt-in. Nothing in either repo ever passed
      * `renderOwnerActions`, so this toolbar was unreachable on every grid that

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

@@ -0,0 +1,27 @@
+/**
+ * The charts on an event page — whichever ones have real data.
+ *
+ * 🛑 THE WHOLE SECTION DISAPPEARS WHEN NOTHING QUALIFIES, and each chart
+ * independently returns `null` from its own builder rather than rendering an
+ * empty frame. A chart says "we measured this"; an axis pair with a flat line
+ * says it too, and says something false. An absent chart says "not yet",
+ * which is both true and the common case for a new event.
+ *
+ * `<Chart>` declares its own `"use client"` internally and loads recharts via
+ * `dynamic(..., { ssr: false })`, so this file needs no client boundary and a
+ * Server Component can mount it directly.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+import type { ChartSpec } from "../../../ui/components/chart-spec";
+import type { SaleProgress } from "../utils/event-charts";
+export interface EventInsightsProps {
+    pollChart?: ChartSpec | null;
+    savingsChart?: ChartSpec | null;
+    likeTrendChart?: ChartSpec | null;
+    saleProgress?: SaleProgress | null;
+    heading?: string;
+}
+export declare function EventInsights({ pollChart, savingsChart, likeTrendChart, saleProgress, heading, }: EventInsightsProps): React.JSX.Element | null;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Chart } from "../../../ui/components/Chart.js";
+import { Grid, Heading, Progress, Row, Stack, Text } from "../../../ui/index.js";
+import { CountdownDisplay } from "../../../ui/components/CountdownDisplay.js";
+export function EventInsights({ pollChart, savingsChart, likeTrendChart, saleProgress, heading = "By the numbers", }) {
+    const charts = [savingsChart, pollChart, likeTrendChart].filter((c) => Boolean(c));
+    if (charts.length === 0 && !saleProgress)
+        return null;
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", color: "primary", children: heading }), saleProgress && (_jsxs(Stack, { gap: "sm", surface: "card", padding: "md", rounded: "xl", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: saleProgress.endsAt ? "Time remaining" : "This has ended" }), saleProgress.endsAt && (_jsx(Text, { size: "sm", color: "muted", children: _jsx(CountdownDisplay, { targetDate: saleProgress.endsAt, format: "auto" }) }))] }), _jsx(Progress, { value: saleProgress.elapsedPercent, variant: saleProgress.elapsedPercent > 85 ? "warning" : "primary", size: "sm", label: "Sale window elapsed" }), saleProgress.claimedPercent !== null && (_jsxs(_Fragment, { children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: "Claimed" }), _jsx(Text, { size: "sm", color: "muted", children: saleProgress.claimedLabel })] }), _jsx(Progress, { value: saleProgress.claimedPercent, variant: saleProgress.claimedPercent > 85 ? "error" : "success", size: "sm", label: "Redemptions against the cap" })] }))] })), charts.length > 0 && (_jsx(Grid, { cols: "cardsWide", gap: "lg", children: charts.map((spec) => (_jsx(Chart, { spec: spec, height: 260 }, spec.title ?? spec.caption))) }))] }));
+}

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

@@ -0,0 +1,21 @@
+/**
+ * The like toggle. Optimistic, signed-in only, and safe to double-click.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+export interface EventLikeButtonProps {
+    eventId: string;
+    /** Server-rendered starting state. */
+    initialLiked: boolean;
+    initialCount: number;
+    /** POSTs the toggle and resolves with the authoritative new state. */
+    onToggle: (eventId: string) => Promise<{
+        liked: boolean;
+        likeCount: number;
+    }>;
+    size?: "sm" | "md";
+    className?: string;
+}
+export declare function EventLikeButton({ eventId, initialLiked, initialCount, onToggle, size, className, }: EventLikeButtonProps): React.JSX.Element;

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The like toggle. Optimistic, signed-in only, and safe to double-click.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import { useCallback, useState, useTransition } from "react";
+import { Button, Row, Span, Icon } from "../../../ui/index.js";
+import { PressScale } from "../../../ui/components/Motion.js";
+import { useOptionalSession } from "../../../react/contexts/SessionContext.js";
+import { LoginRequiredModal } from "../../../ui/components/LoginRequiredModal.js";
+import { normalizeError } from "../../../errors/normalize.js";
+export function EventLikeButton({ eventId, initialLiked, initialCount, onToggle, size = "md", className = "", }) {
+    const session = useOptionalSession();
+    const [liked, setLiked] = useState(initialLiked);
+    const [count, setCount] = useState(initialCount);
+    const [showLogin, setShowLogin] = useState(false);
+    const [pending, startTransition] = useTransition();
+    const handleClick = useCallback(() => {
+        /*
+         * 🛑 THREE STATES, NOT TWO. `SessionProvider` mounts `initialUser={null}`
+         * because the root locale layout must stay static (Root Cause #82), so
+         * `loading` is true on every hard load FOR SIGNED-IN USERS TOO. Testing
+         * only `!user` would open the sign-in modal at a buyer who is already
+         * signed in, on every first click after a page load — the exact defect
+         * Root Cause #79 records for the wishlist heart.
+         */
+        if (session?.loading)
+            return;
+        if (!session?.user?.uid) {
+            setShowLogin(true);
+            return;
+        }
+        // Optimistic: flip now, reconcile from the server response. A like is
+        // cheap to be briefly wrong about and the latency is what people notice.
+        const nextLiked = !liked;
+        setLiked(nextLiked);
+        setCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)));
+        startTransition(() => {
+            void onToggle(eventId)
+                .then((res) => {
+                // The server is authoritative — it holds the real count, which may
+                // have moved for other reasons between paint and click.
+                setLiked(res.liked);
+                setCount(res.likeCount);
+            })
+                .catch((err) => {
+                void normalizeError(err);
+                // Roll back rather than leaving a lie on screen.
+                setLiked(liked);
+                setCount(initialCount);
+            });
+        });
+    }, [session, liked, initialCount, eventId, onToggle]);
+    const label = liked ? "Liked" : "Like";
+    return (_jsxs(_Fragment, { children: [_jsx(PressScale, { children: _jsx(Button, { type: "button", variant: liked ? "primary" : "outline", size: size, onClick: handleClick, isLoading: pending, "aria-pressed": liked, "aria-label": `${label} this event — ${count} ${count === 1 ? "person likes" : "people like"} it`, className: className, children: _jsxs(Row, { align: "center", gap: "xs", children: [_jsx(Icon, { name: "wishlist", filled: liked }), _jsx(Span, { weight: "medium", children: label }), _jsx(Span, { numeric: true, children: count })] }) }) }), _jsx(LoginRequiredModal, { isOpen: showLogin, onClose: () => setShowLogin(false), message: "Sign in to like this event and see who else has." })] }));
+}

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

@@ -0,0 +1,23 @@
+/**
+ * "Liked by" — the last ten faces, then a way to see the rest.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+import type { PublicLiker } from "../schemas/likes";
+export interface EventLikersRailProps {
+    /** The most recent likers, server-rendered. */
+    likers: PublicLiker[];
+    /** The event's total like count — usually larger than `likers.length`. */
+    totalCount: number;
+    /** True when more exist past the preview. */
+    hasMore: boolean;
+    /** Fetches one more page for the modal. */
+    loadMore?: (offset: number) => Promise<{
+        likers: PublicLiker[];
+        hasMore: boolean;
+    }>;
+    className?: string;
+}
+export declare function EventLikersRail({ likers, totalCount, hasMore, loadMore, className, }: EventLikersRailProps): React.JSX.Element | null;

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

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * "Liked by" — the last ten faces, then a way to see the rest.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import { useCallback, useState } from "react";
+import { AvatarGroup, Button, Modal, Row, Stack, Text, Span, Avatar } from "../../../ui/index.js";
+import { LIKERS_PAGE_SIZE } from "../schemas/likes.js";
+import { normalizeError } from "../../../errors/normalize.js";
+/** "Aarav, Riya and 7 others" — names first, count only for the remainder. */
+function summarise(likers, total) {
+    if (likers.length === 0)
+        return "";
+    const shown = likers.slice(0, 2).map((l) => l.displayName);
+    const others = Math.max(0, total - shown.length);
+    if (others === 0)
+        return shown.join(" and ");
+    return `${shown.join(", ")} and ${others} other${others === 1 ? "" : "s"}`;
+}
+export function EventLikersRail({ likers, totalCount, hasMore, loadMore, className = "", }) {
+    const [open, setOpen] = useState(false);
+    const [all, setAll] = useState(likers);
+    const [more, setMore] = useState(hasMore);
+    const [loading, setLoading] = useState(false);
+    const handleLoadMore = useCallback(() => {
+        if (!loadMore || loading)
+            return;
+        setLoading(true);
+        void loadMore(all.length)
+            .then((page) => {
+            setAll((prev) => [...prev, ...page.likers]);
+            setMore(page.hasMore);
+        })
+            .catch((err) => {
+            void normalizeError(err);
+            // Stop offering a button that is not working, rather than letting it
+            // sit there doing nothing on every press.
+            setMore(false);
+        })
+            .finally(() => setLoading(false));
+    }, [loadMore, loading, all.length]);
+    /*
+     * Nothing to show. Deliberately renders null rather than "Be the first to
+     * like this" — an empty social proof row advertises that nobody has, which
+     * is worse for the event than saying nothing at all. The like BUTTON is
+     * still there; this is only the rail beside it.
+     */
+    if (likers.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs(Row, { align: "center", gap: "sm", className: className, children: [_jsx(AvatarGroup, { size: "sm", max: likers.length, avatars: likers.map((l) => ({ src: l.photoURL, name: l.displayName, alt: l.displayName })) }), _jsxs(Text, { size: "sm", color: "muted", children: ["Liked by ", _jsx(Span, { weight: "medium", children: summarise(likers, totalCount) })] }), (hasMore || totalCount > likers.length) && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setOpen(true), children: "View all" }))] }), _jsx(Modal, { isOpen: open, onClose: () => setOpen(false), title: `Liked by ${totalCount}`, children: _jsxs(Stack, { gap: "sm", children: [all.map((l) => (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Avatar, { size: "sm", src: l.photoURL, name: l.displayName, alt: l.displayName }), _jsx(Text, { size: "sm", children: l.displayName })] }, l.uid))), more && loadMore && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleLoadMore, isLoading: loading, children: ["Show ", LIKERS_PAGE_SIZE, " more"] }))] }) })] }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * The event-type chip. Emoji plus a real label, always both.
+ *
+ * 🛑 THE LABEL IS NOT OPTIONAL, and that is the accessibility half of this
+ * component. `EventCard` rendered the type as a bare `aria-hidden` emoji with
+ * no text companion anywhere on the card, so a screen-reader user got no
+ * event type at all; the detail hero rendered the raw enum. Neither surface
+ * could reach the other's map. This is the shared one.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+export interface EventTypeBadgeProps {
+    type: string | undefined;
+    /**
+     * Hide the text and keep only the glyph — for a dense card corner where the
+     * label is already rendered nearby.
+     *
+     * 🛑 Even then an `aria-label` carries the real label, so the type is never
+     * lost to a screen reader. A silent emoji is not a badge.
+     */
+    compact?: boolean;
+    className?: string;
+}
+export declare function EventTypeBadge({ type, compact, className }: EventTypeBadgeProps): React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Span } from "../../../ui/index.js";
+import { eventTypeMeta } from "../constants/event-type-meta.js";
+export function EventTypeBadge({ type, compact = false, className = "" }) {
+    const meta = eventTypeMeta(type);
+    return (_jsxs(Span, { layout: "inline-flex", align: "center", gap: "xs", padding: "pill-sm", rounded: "full", size: "xs", weight: "semibold", className: `${meta.chipClass} ${className}`, "aria-label": compact ? meta.label : undefined, children: [_jsx(Span, { "aria-hidden": "true", children: meta.emoji }), !compact && meta.label] }));
+}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { eventRepository } from "../../../repositories/index.js";
 import { AdSlot } from "../../homepage/components/AdSlot.js";
-import { Container, Heading, Main, Section } from "../../../ui/index.js";
+import { Container, Main, Section, PageHeroHeading } from "../../../ui/index.js";
 import { EventsIndexListing } from "./EventsIndexListing.js";
 import { EVENT_FIELDS } from "../../../constants/field-names.js";
 import { sieveFilter, sieveMultiEq, sieveAnd, SIEVE_OP } from "../../../utils/sieve-builder.js";
@@ -72,5 +72,5 @@ export async function EventsListPageView({ searchParams = {} }) {
     const publicResult = result
         ? { ...result, items: sortPinnedFirst(hidePublicTestData(result.items)) }
         : result;
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Events" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(EventsIndexListing, { initialData: publicResult, facetCounts: facetCounts }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(PageHeroHeading, { className: "mb-8", pill: "Events & Offers", title: "Events", description: "Sales, spin wheels, raffles and polls \u2014 everything running right now, and what is opening next.", meta: publicResult?.total ? `${publicResult.total} running` : undefined }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(EventsIndexListing, { initialData: publicResult, facetCounts: facetCounts }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

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

@@ -0,0 +1,41 @@
+/**
+ * The wheel itself — segments, a pointer, and the settle.
+ *
+ * ## What this replaced
+ *
+ * A CSS circle with one 🎁 emoji rotating 2160deg on a fixed 3.2s timer. No
+ * segments, no pointer, and the prize list was loaded but used ONLY to decide
+ * whether to disable the button — so a visitor could not see what they might
+ * win. `prefers-reduced-motion` was ignored entirely, while every other
+ * primitive in `Motion.tsx` wires it.
+ *
+ * ## 🛑 SEGMENTS ARE EQUAL-SIZED, AND THAT IS NOT A SHORTCUT
+ *
+ * `weight` IS the odds. `toClientSpinPrize` is an allow-list emitting
+ * `{id, label, isActive}` only, and a tester case asserts
+ * `weightsInPublicSource: 0` — the stored shape leaked every wheel's odds into
+ * a client prop once already (Root Cause #70). Sizing a segment by its weight
+ * would publish the same information geometrically instead of as a number.
+ *
+ * So the wheel shows WHAT you could win, never how likely it is. That is also
+ * the honest framing: these are the prizes.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+export interface SpinWheelSegment {
+    id: string;
+    label: string;
+}
+export interface SpinWheelProps {
+    segments: SpinWheelSegment[];
+    /** Index of the winning segment once known, else null. */
+    winningIndex: number | null;
+    /** True from the click until the result is revealed. */
+    spinning: boolean;
+    /** Fired when the wheel has physically stopped. */
+    onSettled?: () => void;
+    size?: number;
+}
+export declare function SpinWheel({ segments, winningIndex, spinning, onSettled, size, }: SpinWheelProps): React.JSX.Element;