@mohasinac/appkit 4.2.0 → 4.3.0

package/dist/features/products/components/MarketplaceBundleCard.js

@@ -12,6 +12,8 @@ const CLS_STOCK_OK = "bg-success-surface text-white";
 const CLS_VIEW_BTN = "mt-2 w-full cursor-pointer rounded-md bg-violet-600 py-[var(--appkit-space-1-5)] text-center text-[length:var(--appkit-text-xs)] font-semibold text-white transition-colors hover:bg-violet-700 active:scale-[0.98]";
 import { BaseListingCard, Div, Row, Span, Stack, Text, TextLink } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
+import { computeBundleDiscount } from "../../../_internal/shared/features/categories/bundle-pricing";
+import { BUNDLE_COPY } from "../../../_internal/shared/features/categories/bundle-copy";
 const DEFAULT_LABELS = {
     bundleBadge: "Bundle",
     inStockBadge: "In stock",
@@ -34,6 +36,7 @@ export function MarketplaceBundleCard({ bundle, className = "", variant = "grid"
     const stock = bundle.bundleStockStatus ?? "in_stock";
     const cover = bundle.display?.coverImage;
     const price = bundle.bundlePrice;
+    const discount = computeBundleDiscount(bundle.bundlePrice, bundle.bundleOriginalTotal);
     const collageTiles = (bundle.bundleItemDetails ?? [])
         .filter((d) => Boolean(d.imageURL))
         .slice(0, 4);
@@ -46,13 +49,13 @@ export function MarketplaceBundleCard({ bundle, className = "", variant = "grid"
         }
         router.push(String(detailHref));
     }, [detailHref, onNavigate, router]);
-    return (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: String(detailHref), className: "absolute inset-0 block", children: showCollage ? (_jsx(Div, { layout: "grid", className: `h-full w-full gap-[0.125rem] bg-[var(--appkit-color-surface-muted)] ${collageTiles.length === 2 ? "grid-cols-2 grid-rows-1" : "grid-cols-2 grid-rows-2"}`, children: collageTiles.map((tile, i) => (_jsxs(Div, { className: "relative overflow-hidden bg-[var(--appkit-color-surface-muted)]", children: [_jsx(MediaImage, { src: tile.imageURL, alt: tile.title ?? `${bundle.name} item ${i + 1}`, size: "card" }), i === collageTiles.length - 1 && overflow > 0 && (_jsxs(Row, { textWeight: "semibold", textSize: "sm", surface: "overlay-md", className: "absolute inset-0 text-white", align: "center", justify: "center", children: ["+", overflow] }))] }, `${tile.productId}-${i}`))) })) : cover ? (_jsx(Div, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "card" }) })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No image" }) })) }), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { size: "xs", weight: "medium", className: CLS_BUNDLE_PILL, children: mergedLabels.bundleBadge }), _jsx(Span, { layout: "inline-flex", color: "inverse", className: `${stock === "out_of_stock" ? "bg-neutral-500 " : CLS_STOCK_OK}`, rounded: "full", padding: "pill-xs", size: "xs", weight: "medium", children: stock === "out_of_stock" ? mergedLabels.outOfStockBadge : mergedLabels.inStockBadge })] }), stock === "out_of_stock" && (_jsx(Row, { surface: "overlay-xs", className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { color: "inverse", size: "xs", weight: "bold", className: "bg-neutral-900/80 tracking-wider", rounded: "default", padding: "pill-md", transform: "uppercase", children: mergedLabels.outOfStockBadge }) })), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
+    return (_jsxs(BaseListingCard, { isSelected: isSelected, variant: variant, className: className, onMouseDown: !isSelected ? longPress.onMouseDown : undefined, onMouseUp: !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: !isSelected ? longPress.onTouchCancel : undefined, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: variant, children: [_jsx(TextLink, { href: String(detailHref), className: "absolute inset-0 block", children: showCollage ? (_jsx(Div, { layout: "grid", className: `h-full w-full gap-[0.125rem] bg-[var(--appkit-color-surface-muted)] ${collageTiles.length === 2 ? "grid-cols-2 grid-rows-1" : "grid-cols-2 grid-rows-2"}`, children: collageTiles.map((tile, i) => (_jsxs(Div, { className: "relative overflow-hidden bg-[var(--appkit-color-surface-muted)]", children: [_jsx(MediaImage, { src: tile.imageURL, alt: tile.title ?? `${bundle.name} item ${i + 1}`, size: "card" }), i === collageTiles.length - 1 && overflow > 0 && (_jsxs(Row, { textWeight: "semibold", textSize: "sm", surface: "overlay-md", className: "absolute inset-0 text-white", align: "center", justify: "center", children: ["+", overflow] }))] }, `${tile.productId}-${i}`))) })) : cover ? (_jsx(Div, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "card" }) })) : (_jsx(Row, { className: "absolute inset-0 bg-[var(--appkit-color-surface-muted)]", align: "center", justify: "center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: "No image" }) })) }), discount && (_jsx(Span, { size: "xs", weight: "bold", color: "inverse", className: "absolute left-2 top-2 bg-success-surface", rounded: "full", padding: "pill-xs", children: BUNDLE_COPY.detail.discountBadge(discount.percent) })), _jsxs(Stack, { className: "absolute right-2 top-2", align: "end", gap: "xs", children: [_jsx(Span, { size: "xs", weight: "medium", className: CLS_BUNDLE_PILL, children: mergedLabels.bundleBadge }), _jsx(Span, { layout: "inline-flex", color: "inverse", className: `${stock === "out_of_stock" ? "bg-neutral-500 " : CLS_STOCK_OK}`, rounded: "full", padding: "pill-xs", size: "xs", weight: "medium", children: stock === "out_of_stock" ? mergedLabels.outOfStockBadge : mergedLabels.inStockBadge })] }), stock === "out_of_stock" && (_jsx(Row, { surface: "overlay-xs", className: "absolute inset-0", align: "center", justify: "center", children: _jsx(Span, { color: "inverse", size: "xs", weight: "bold", className: "bg-neutral-900/80 tracking-wider", rounded: "default", padding: "pill-md", transform: "uppercase", children: mergedLabels.outOfStockBadge }) })), onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (event) => {
                             event.stopPropagation();
                             onSelect(bundle.id, !isSelected);
                         }, className: selectable || isSelected
                             ? "opacity-100"
-                            : "opacity-0 group-hover:opacity-100 transition-opacity" }))] }), _jsxs(BaseListingCard.Info, { variant: variant, children: [_jsx(TextLink, { href: String(detailHref), children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: bundle.name }) }), _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: price
-                                    ? formatCurrency(price, getDefaultCurrency())
-                                    : "—" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: mergedLabels.itemsLabel(memberCount) })] }), _jsx(Div, { className: CLS_VIEW_BTN, role: "button", tabIndex: 0, onClick: handleNavigate, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ")
+                            : "opacity-0 group-hover:opacity-100 transition-opacity" }))] }), _jsxs(BaseListingCard.Info, { variant: variant, children: [_jsx(TextLink, { href: String(detailHref), children: _jsx(Text, { size: "sm", weight: "medium", color: "primary", truncate: 2, children: bundle.name }) }), _jsxs(Row, { justify: "between", className: "mt-1", gap: "sm", wrap: true, children: [_jsxs(Row, { gap: "xs", align: "center", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: price
+                                            ? formatCurrency(price, getDefaultCurrency())
+                                            : "—" }), discount && (_jsx(Text, { size: "xs", color: "muted", className: "line-through", children: formatCurrency(discount.originalTotal, getDefaultCurrency()) }))] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: mergedLabels.itemsLabel(memberCount) })] }), _jsx(Div, { className: CLS_VIEW_BTN, role: "button", tabIndex: 0, onClick: handleNavigate, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ")
                             handleNavigate(); }, children: "View Bundle" })] })] }));
 }

package/dist/features/products/components/PrizeDrawDetailPageView.js

@@ -112,7 +112,7 @@ export async function PrizeDrawDetailPageView({ id, initialPrizeDraw, currentUse
         ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug))
         : null;
     const descriptionHtml = toDescriptionHtml(p.description);
-    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
+    return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "prize-draw", snapshot: {
                     title,
                     thumb,
                     price: pricePerEntry,

package/dist/features/products/components/PrizeDrawItemsEditor.js

@@ -8,14 +8,14 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * estimatedValue, 1–2 images per item, optional video, and a locked-overlay
  * for items already won during a previous reveal.
  *
- * Min 3 items, max 16 (mirrors PrizeDrawItem schema constraints).
+ * Min 2 items, max 16 (mirrors PrizeDrawItem schema constraints).
  */
 import { useCallback } from "react";
 import { Button, Div, FormField, Heading, Input, Row, Span, Stack, Text } from "../../../ui";
 const CLS_WARN_BOX = "rounded border border-warning/40 bg-warning-surface px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-warning dark:bg-warning-surface dark:text-warning";
 const CLS_WON_BADGE = "rounded bg-error-surface px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-semibold uppercase tracking-wide text-white";
 import { ImageUpload } from "../../media";
-const MIN_ITEMS = 3;
+const MIN_ITEMS = 2;
 const MAX_ITEMS = 16;
 const MAX_IMAGES_PER_ITEM = 2;
 const CONDITION_OPTIONS = [

package/dist/features/products/components/PrizeDrawWinnerMappingView.d.ts

@@ -0,0 +1,14 @@
+export interface PrizeDrawWinnerMappingRow {
+    itemNumber: number;
+    title: string;
+    image?: string;
+    isWon: boolean;
+    wonByOrderId?: string;
+}
+export interface PrizeDrawWinnerMappingViewProps {
+    title?: string;
+    items: PrizeDrawWinnerMappingRow[];
+    isAdmin: boolean;
+}
+export declare function PrizeDrawWinnerMappingView({ title, items, isAdmin, }: PrizeDrawWinnerMappingViewProps): import("react").JSX.Element;
+export default PrizeDrawWinnerMappingView;

package/dist/features/products/components/PrizeDrawWinnerMappingView.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PrizeDrawWinnerMappingView
+ *
+ * Read-only item→order mapping for a classic reveal-mode prize draw. Shown
+ * only to admin and the owning seller (never publicly) so they know which
+ * physical item to ship for which order. Mirrors LotteryEntriesView's choice
+ * of a small bounded DataTable (≤16 rows per draw) rather than a paginated
+ * DataListingView.
+ */
+import { Badge, Container, DataTable, Div, Heading, Row, Section, Stack, Text, TextLink } from "../../../ui";
+import { MediaImage } from "../../media/MediaImage";
+import { ROUTES } from "../../../next";
+export function PrizeDrawWinnerMappingView({ title = "Prize Draw — Winner Mapping", items, isAdmin, }) {
+    const columns = [
+        {
+            key: "itemNumber",
+            header: "Item",
+            render: (row) => (_jsxs(Row, { gap: "xs", align: "center", children: [row.image ? (_jsx(Div, { className: "relative h-10 w-10 shrink-0", overflow: "hidden", rounded: "default", children: _jsx(MediaImage, { src: row.image, alt: row.title, size: "thumbnail" }) })) : null, _jsxs(Text, { size: "sm", weight: "medium", children: ["#", row.itemNumber, " \u2014 ", row.title] })] })),
+        },
+        {
+            key: "isWon",
+            header: "Status",
+            render: (row) => row.isWon ? (_jsx(Badge, { variant: "success", size: "sm", children: "Won" })) : (_jsx(Badge, { variant: "secondary", size: "sm", children: "Unclaimed" })),
+        },
+        {
+            key: "wonByOrderId",
+            header: "Order",
+            render: (row) => row.wonByOrderId ? (_jsx(TextLink, { href: String(isAdmin
+                    ? ROUTES.ADMIN.ORDER_DETAIL(row.wonByOrderId)
+                    : ROUTES.STORE.ORDER_DETAIL(row.wonByOrderId)), children: row.wonByOrderId })) : (_jsx(Text, { size: "sm", color: "muted", children: "\u2014" })),
+        },
+    ];
+    return (_jsx(Container, { children: _jsx(Section, { children: _jsxs(Stack, { gap: "lg", children: [_jsx(Heading, { level: 1, size: "2xl", weight: "bold", children: title }), _jsx(Text, { color: "muted", children: "Visible only to you \u2014 buyers never see which item went to which order. Use this to ship the correct physical item to the correct order." }), _jsx(DataTable, { data: items, columns: columns, keyExtractor: (row) => String(row.itemNumber), emptyMessage: "No prize items." })] }) }) }));
+}
+export default PrizeDrawWinnerMappingView;

package/dist/features/products/components/PrizeRevealModal.d.ts

@@ -1,34 +1,21 @@
 import type { PrizeDrawItem } from "../schemas/firestore";
-export interface PrizeRevealResponse {
-    prizeWon?: {
-        itemNumber: number;
-        title: string;
-        images: string[];
-        estimatedValue?: number;
-    };
-    alreadyRevealed?: boolean;
-    rngSourceUrl?: string;
-    refunded?: true;
-    reason?: string;
+export interface PrizeRevealResult {
+    itemNumber: number;
+    title: string;
+    images: string[];
+    estimatedValue?: number;
 }
 export interface PrizeRevealModalProps {
     open: boolean;
     onClose: () => void;
     /** Items to render in the collage (won state hidden — buyers don't see prior wins). */
     items: PrizeDrawItem[];
-    /** Order id used by the reveal endpoint. */
-    orderId: string;
-    /** Product id used in the reveal URL. */
-    productId: string;
-    /** Override the default `/api/prize-draws/[id]/reveal` POST call. */
-    onReveal?: (args: {
-        orderId: string;
-        productId: string;
-    }) => Promise<PrizeRevealResponse>;
-    /** Already-revealed prize, passed in if the order has `prizeWon` populated. */
-    initialPrizeWon?: PrizeRevealResponse["prizeWon"];
+    /** Already-assigned prize, from `order.prizeWon`. Undefined while still pending. */
+    initialPrizeWon?: PrizeRevealResult;
+    /** Drives the pending-state copy — "instant" vs "scheduled" draws explain differently. */
+    revealMode?: "instant" | "scheduled";
     /** Public proof-of-fairness URL — shown in the disclaimer. */
     rngSourceUrl?: string;
 }
-export declare function PrizeRevealModal({ open, onClose, items, orderId, productId, onReveal, initialPrizeWon, rngSourceUrl, }: PrizeRevealModalProps): import("react").JSX.Element;
+export declare function PrizeRevealModal({ open, onClose, items, initialPrizeWon, revealMode, rngSourceUrl, }: PrizeRevealModalProps): import("react").JSX.Element;
 export default PrizeRevealModal;

package/dist/features/products/components/PrizeRevealModal.js

@@ -1,160 +1,31 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * PrizeRevealModal (SB4-I)
+ * PrizeRevealModal (SB4-I, redesigned for fully-automatic reveal)
  *
- * Theatrical reveal UI for prize-draw orders. When the buyer clicks "Reveal
- * my prize" we call the reveal API (which has already picked the winner via
- * crypto.randomInt server-side) and then run a 3-second highlight-cycling
- * animation across the collage — fast at first, decelerating, finally
- * landing on the winning tile. This is pure showmanship: the winner was
- * locked in by the server before the first frame rendered.
- *
- * A permanent disclaimer below the collage explains exactly that — the RNG
- * is `crypto.randomInt`, the source code is on GitHub, and neither the store
- * nor LetItRip admins can influence the outcome.
+ * Displays a prize-draw order's reveal state. Reveal is no longer a buyer
+ * action — the winner is assigned automatically by assignPrizeDrawWinner(),
+ * either the moment payment is confirmed ("instant" mode) or by a scheduled
+ * Firebase Function at draw expiry/sellout ("scheduled" mode). This modal is
+ * a pure display: "pending" (no result yet) or "won" (order.prizeWon is set).
  */
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Anchor, Button, Div, Heading, LoginRequiredModal, Modal, Span, Stack, Text, useToast } from "../../../ui";
+import { Anchor, Div, Heading, Modal, Span, Stack, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
-import { isAuthError } from "../../../utils/auth-error";
 import { PrizeDrawCollage } from "./PrizeDrawCollage";
-import { PRIZE_DRAW_ENDPOINTS } from "../../../constants/api-endpoints";
-import { normalizeError } from "../../../errors/normalize";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
-const CLS_REFUND_NOTE = "rounded border border-warning/40 bg-warning-surface px-[var(--appkit-space-4)] py-[var(--appkit-space-3)] text-warning dark:bg-warning-surface dark:text-warning";
-const REVEAL_DURATION_MS = 3200; // total animation length
-const CYCLE_INTERVAL_FAST = 80;
-const CYCLE_INTERVAL_SLOW = 360;
-function isUnauthenticatedResponse(status) {
-    return status === 401 || status === 403;
-}
-async function fetchPrizeReveal(productId, orderId) {
-    const res = await fetch(PRIZE_DRAW_ENDPOINTS.REVEAL(productId), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ orderId }),
-    });
-    const json = (await res.json());
-    if (!res.ok) {
-        if (isUnauthenticatedResponse(res.status)) {
-            return { response: null, unauthenticated: true };
-        }
-        throw new Error("Reveal request failed");
-    }
-    return { response: json.data ?? {}, unauthenticated: false };
-}
-export function PrizeRevealModal({ open, onClose, items, orderId, productId, onReveal, initialPrizeWon, rngSourceUrl, }) {
-    const [phase, setPhase] = useState(initialPrizeWon ? "won" : "idle");
-    const [highlight, setHighlight] = useState(undefined);
-    const [winner, setWinner] = useState(initialPrizeWon);
-    const [errorMessage, setErrorMessage] = useState("");
-    const [effectiveRngUrl, setEffectiveRngUrl] = useState(rngSourceUrl);
-    const [showLoginModal, setShowLoginModal] = useState(false);
-    const { showToast } = useToast();
-    const cycleTimerRef = useRef(null);
-    const endTimerRef = useRef(null);
-    // Clean up timers on close/unmount so we don't leak between sessions.
-    useEffect(() => {
-        if (!open) {
-            if (cycleTimerRef.current)
-                clearTimeout(cycleTimerRef.current);
-            if (endTimerRef.current)
-                clearTimeout(endTimerRef.current);
-            cycleTimerRef.current = null;
-            endTimerRef.current = null;
-        }
-        return () => {
-            if (cycleTimerRef.current)
-                clearTimeout(cycleTimerRef.current);
-            if (endTimerRef.current)
-                clearTimeout(endTimerRef.current);
-        };
-    }, [open]);
-    const startAnimation = useCallback((winningItemNumber) => {
-        const startedAt = Date.now();
-        const tile = (n) => items[n % items.length]?.itemNumber ?? winningItemNumber;
-        let step = 0;
-        const tick = () => {
-            const elapsed = Date.now() - startedAt;
-            const remaining = REVEAL_DURATION_MS - elapsed;
-            if (remaining <= 0) {
-                setHighlight(winningItemNumber);
-                return;
-            }
-            // Decelerate: as we approach the end, the interval stretches.
-            const progress = elapsed / REVEAL_DURATION_MS;
-            const interval = CYCLE_INTERVAL_FAST +
-                (CYCLE_INTERVAL_SLOW - CYCLE_INTERVAL_FAST) * progress;
-            step += 1;
-            setHighlight(tile(step));
-            cycleTimerRef.current = setTimeout(tick, interval);
-        };
-        tick();
-    }, [items]);
-    const handleRevealClick = useCallback(async () => {
-        if (phase !== "idle")
-            return;
-        setPhase("revealing");
-        setErrorMessage("");
-        let response;
-        try {
-            if (onReveal) {
-                response = await onReveal({ orderId, productId });
-            }
-            else {
-                const result = await fetchPrizeReveal(productId, orderId);
-                if (result.unauthenticated) {
-                    setPhase("idle");
-                    setShowLoginModal(true);
-                    return;
-                }
-                response = result.response ?? {};
-            }
-        }
-        catch (err) {
-            void normalizeError(err);
-            if (isAuthError(err)) {
-                setPhase("idle");
-                setShowLoginModal(true);
-                return;
-            }
-            setPhase("error");
-            const msg = err instanceof Error ? err.message : "Reveal request failed";
-            setErrorMessage(msg);
-            showToast(msg, "error");
-            return;
-        }
-        if (response.refunded) {
-            setPhase("refunded");
-            return;
-        }
-        if (!response.prizeWon) {
-            setPhase("error");
-            setErrorMessage("Unexpected reveal response");
-            return;
-        }
-        if (response.rngSourceUrl)
-            setEffectiveRngUrl(response.rngSourceUrl);
-        setWinner(response.prizeWon);
-        if (response.alreadyRevealed) {
-            // No theatrics for re-opens — just show the prize.
-            setHighlight(response.prizeWon.itemNumber);
-            setPhase("won");
-            return;
-        }
-        startAnimation(response.prizeWon.itemNumber);
-        endTimerRef.current = setTimeout(() => {
-            setPhase("won");
-        }, REVEAL_DURATION_MS);
-    }, [onReveal, orderId, phase, productId, startAnimation]);
+const PENDING_COPY = {
+    instant: "Your prize is being assigned now that payment is confirmed — refresh in a moment.",
+    scheduled: "This draw reveals automatically once it closes (at its expiry date) or sells out — check back here after.",
+};
+export function PrizeRevealModal({ open, onClose, items, initialPrizeWon, revealMode = "scheduled", rngSourceUrl, }) {
+    const winner = initialPrizeWon;
     const winnerImg = winner?.images?.[0];
-    return (_jsxs(Modal, { isOpen: open, onClose: onClose, title: "Prize Reveal", size: "lg", children: [_jsx(LoginRequiredModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), message: "You need to be signed in to reveal your prize. Please log in or create an account to continue." }), _jsxs(Stack, { gap: "md", children: [phase === "refunded" ? (_jsxs(Div, { className: CLS_REFUND_NOTE, children: [_jsx(Heading, { level: 3, className: "mb-1", children: "Pool exhausted \u2014 you've been refunded" }), _jsx(Text, { size: "sm", children: "Every prize in this draw was already claimed by the time your entry rolled. Your order has been marked refunded automatically." })] })) : null, phase === "error" ? (_jsxs(Div, { className: "border border-error/40", color: "error", surface: "danger-surface", padding: "inline", rounded: "default", children: [_jsx(Text, { size: "sm", weight: "semibold", children: "Something went wrong" }), _jsx(Text, { size: "sm", children: errorMessage })] })) : null, _jsx(PrizeDrawCollage, { items: items, hideWonState: true, highlightItemNumber: highlight }), phase === "idle" ? (_jsx(Button, { type: "button", variant: "primary", size: "lg", onClick: handleRevealClick, children: "\u2728 Reveal my prize" })) : null, phase === "revealing" ? (
-                    // audit-content-alignment-ok: theatrical reveal-modal centerpiece, not marketing content
-                    _jsxs(Div, { className: `bg-[var(--appkit-color-surface-muted)] ${__P.p4} text-center`, rounded: "default", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Rolling\u2026" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "The winner was locked by the server before this animation started. Hang tight \u2014 we're just making it look pretty." })] })) : null, phase === "won" && winner ? (
-                    // audit-content-alignment-ok: theatrical reveal-modal centerpiece, not marketing content
-                    _jsxs(Div, { className: `border-2 border-[var(--appkit-color-primary)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center`, rounded: "lg", children: [_jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "You won" }), _jsxs(Heading, { level: 2, className: "my-2", children: ["#", winner.itemNumber, " \u2014 ", winner.title] }), winnerImg ? (_jsx(Div, { className: "relative mx-auto h-64 w-64 max-w-full", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: winnerImg, alt: winner.title, size: "hero", objectFit: "contain" }) })) : null, winner.estimatedValue != null ? (_jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Estimated value: \u20B9", winner.estimatedValue.toLocaleString("en-IN")] })) : null] })) : null, _jsxs(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-muted)] text-[var(--appkit-color-text-muted)]", padding: "inlineSm", rounded: "default", children: [_jsx(Span, { weight: "bold", children: "Fairness guarantee:" }), " ", "Winners are picked by ", _jsx("code", { children: "crypto.randomInt" }), " running on LetItRip's server before the animation starts. The animation is theatrical \u2014 neither the store nor LetItRip staff can influence the outcome.", " ", effectiveRngUrl ? (_jsx(Anchor, { href: effectiveRngUrl, tone: "none", underline: "always", children: "View RNG source code \u2192" })) : null] })] })] }));
+    return (_jsx(Modal, { isOpen: open, onClose: onClose, title: "Prize Reveal", size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(PrizeDrawCollage, { items: items, hideWonState: true }), !winner ? (
+                // audit-content-alignment-ok: informational reveal-status panel, not marketing content
+                _jsxs(Div, { className: `bg-[var(--appkit-color-surface-muted)] ${__P.p4} text-center`, rounded: "default", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Reveal pending" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: PENDING_COPY[revealMode] })] })) : (
+                // audit-content-alignment-ok: theatrical reveal-modal centerpiece, not marketing content
+                _jsxs(Div, { className: `border-2 border-[var(--appkit-color-primary)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center`, rounded: "lg", children: [_jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "You won" }), _jsxs(Heading, { level: 2, className: "my-2", children: ["#", winner.itemNumber, " \u2014 ", winner.title] }), winnerImg ? (_jsx(Div, { className: "relative mx-auto h-64 w-64 max-w-full", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: winnerImg, alt: winner.title, size: "hero", objectFit: "contain" }) })) : null, winner.estimatedValue != null ? (_jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Estimated value: \u20B9", winner.estimatedValue.toLocaleString("en-IN")] })) : null] })), _jsxs(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-muted)] text-[var(--appkit-color-text-muted)]", padding: "inlineSm", rounded: "default", children: [_jsx(Span, { weight: "bold", children: "Fairness guarantee:" }), " ", "Winners are picked by ", _jsx("code", { children: "crypto.randomInt" }), " running on LetItRip's server the moment your prize is assigned. Neither the store nor LetItRip staff can influence the outcome.", " ", rngSourceUrl ? (_jsx(Anchor, { href: rngSourceUrl, tone: "none", underline: "always", children: "View RNG source code \u2192" })) : null] })] }) }));
 }
 export default PrizeRevealModal;

package/dist/features/products/components/ProductDetailPageView.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link";
+import { SIEVE_OP, sieveAnd, sieveFilter, sortBy } from "@mohasinac/appkit";
 import { productRepository, reviewRepository } from "../../../repositories";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
@@ -125,6 +126,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
         : typeof p.mainImage === "string"
             ? [p.mainImage]
             : [];
+    const productVideo = p.video;
     const stockQuantity = typeof p.stockQuantity === "number" ? p.stockQuantity : null;
     const availableQuantity = typeof p.availableQuantity === "number"
         ? p.availableQuantity
@@ -139,6 +141,10 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const categorySlugs = Array.isArray(p.categorySlugs)
         ? p.categorySlugs
         : category ? [category] : [];
+    // The real category FK — `category` above is only the deprecated display-name
+    // cache (SB-UNI drift, Root Cause #24-class bug: don't route links/queries
+    // through it as if it were a slug).
+    const primaryCategorySlug = categorySlugs[0] ?? null;
     const categoryNames = Array.isArray(p.categoryNames)
         ? p.categoryNames
         : categoryName ? [categoryName] : [];
@@ -201,49 +207,82 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const groupId = typeof p.groupId === "string" ? p.groupId : null;
     const isGroupParent = p.isGroupParent === true;
     const groupTitle = typeof p.groupTitle === "string" ? p.groupTitle : undefined;
-    // -- Fetch reviews + related in parallel ------------------------------------
-    const [reviewDocs, relatedDocs] = await Promise.all([
+    const storeId = typeof p.storeId === "string" ? p.storeId : null;
+    // -- Fetch reviews + 4 related-listing signals in parallel ------------------
+    const [reviewDocs, sameCategoryDocs, sameBrandDocs, tagOverlapDocs, sameStoreDocs] = await Promise.all([
         reviewRepository
             .findApprovedByProduct(product.id)
             .catch(() => []),
-        category
-            ? productRepository.findByCategory(category).catch(() => [])
+        primaryCategorySlug
+            ? productRepository.findByCategory(primaryCategorySlug).catch(() => [])
+            : Promise.resolve([]),
+        brand
+            ? productRepository
+                .list({
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("brand", SIEVE_OP.EQ, brand)),
+                sorts: sortBy("createdAt", "DESC"),
+                page: 1,
+                pageSize: 9,
+            })
+                .then((r) => r.items)
+                .catch(() => [])
+            : Promise.resolve([]),
+        tags.length > 0
+            ? productRepository.findByTagsOverlap(tags, 9).catch(() => [])
+            : Promise.resolve([]),
+        storeId
+            ? productRepository
+                .list({
+                filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("storeId", SIEVE_OP.EQ, storeId)),
+                sorts: sortBy("createdAt", "DESC"),
+                page: 1,
+                pageSize: 9,
+            })
+                .then((r) => r.items)
+                .catch(() => [])
             : Promise.resolve([]),
     ]);
     const reviews = reviewDocs.map(toReview);
     const _now = new Date();
-    const relatedItems = relatedDocs
-        .filter((r) => {
-        if (r.id === product.id)
-            return false;
-        const s = r.status;
-        if (s && ["sold", "out_of_stock", "archived", "discontinued", "draft"].includes(s))
-            return false;
-        if (r.isSold === true)
-            return false;
-        if (r.availableQuantity === 0)
-            return false;
-        if (r.listingType === "auction" && r.auctionEndDate) {
-            const end = r.auctionEndDate;
-            const endDate = typeof end.toDate === "function"
-                ? end.toDate()
-                : end instanceof Date ? end : new Date(String(end));
-            if (endDate <= _now)
+    const currentProductId = product.id;
+    function toRelatedItems(docs) {
+        return docs
+            .filter((r) => {
+            if (r.id === currentProductId)
+                return false;
+            const s = r.status;
+            if (s && ["sold", "out_of_stock", "archived", "discontinued", "draft"].includes(s))
                 return false;
-        }
-        if (r.listingType === "prize-draw" && r.prizeRevealStatus === "closed")
-            return false;
-        return true;
-    })
-        .slice(0, 8)
-        .map(toProductItem);
+            if (r.isSold === true)
+                return false;
+            if (r.availableQuantity === 0)
+                return false;
+            if (r.listingType === "auction" && r.auctionEndDate) {
+                const end = r.auctionEndDate;
+                const endDate = typeof end.toDate === "function"
+                    ? end.toDate()
+                    : end instanceof Date ? end : new Date(String(end));
+                if (endDate <= _now)
+                    return false;
+            }
+            if (r.listingType === "prize-draw" && r.prizeRevealStatus === "closed")
+                return false;
+            return true;
+        })
+            .slice(0, 8)
+            .map(toProductItem);
+    }
+    const relatedItems = toRelatedItems(sameCategoryDocs);
+    const relatedByBrand = toRelatedItems(sameBrandDocs);
+    const relatedByTags = toRelatedItems(tagOverlapDocs);
+    const relatedByStore = toRelatedItems(sameStoreDocs);
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: product.id, productType: "product", snapshot: {
                     title: product.title,
                     thumb: product.mainImage ?? product.images?.[0],
                     price: product.price,
                     storeId: product.storeId,
                     storeName: product.storeName,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: CLS_BREADCRUMB_LINK, children: "Products" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), subcategory && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { transform: "capitalize", children: subcategory })] }))] }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRODUCTS), className: CLS_BREADCRUMB_LINK, children: "Products" }), (primaryCategorySlug || category) && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(primaryCategorySlug ?? category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), subcategory && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { transform: "capitalize", children: subcategory })] }))] }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
                                                 ? "Brand New"
                                                 : condition === "like_new"
                                                     ? "Like New"
@@ -302,7 +341,10 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                 content: _jsx(CustomSectionTabContent, { section: s }),
                             })) })), renderBundleSection: bundleMemberships.length > 0
                             ? () => (_jsxs(Div, { className: CLS_BUNDLE_BOX, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "sm", children: [_jsx(Span, { size: "base", className: CLS_BUNDLE_ICON, "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsxs(Text, { className: CLS_BUNDLE_TITLE, children: ["Part of ", bundleMemberships.length === 1 ? "a bundle" : `${bundleMemberships.length} bundles`] })] }), _jsx(Stack, { gap: "3", children: bundleMemberships.map((b) => (_jsxs(Div, { className: CLS_BUNDLE_ROW, children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_BUNDLE_LABEL, children: "Included in bundle" }), _jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: b.title })] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_CTA, children: "View Bundle \u2192" })] }, b.id))) })] }))
-                            : undefined, renderRelated: () => relatedItems.length > 0 ? (_jsx(RelatedProductsCarousel, { items: relatedItems })) : null }), renderPrimaryActions
+                            : undefined, renderRelated: () => relatedItems.length > 0 ||
+                            relatedByBrand.length > 0 ||
+                            relatedByTags.length > 0 ||
+                            relatedByStore.length > 0 ? (_jsxs(Stack, { gap: "xl", children: [relatedItems.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedItems, title: categoryName || category ? `More in ${categoryName || category}` : "More in this category" })), relatedByBrand.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByBrand, title: brand ? `More by ${brand}` : "More by this brand" })), relatedByTags.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByTags, title: "You might also like" })), relatedByStore.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByStore, title: storeName ? `More from ${storeName}` : "More from this seller" }))] })) : null }), renderPrimaryActions
                         ? renderPrimaryActions({
                             productId: product.id,
                             productSlug: product.slug ?? slug,

package/dist/features/products/components/ProductForm.js

@@ -14,6 +14,11 @@ import { normalizeRichTextHtml } from "../../../utils/string.formatter";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags";
 import { isAuctionListing, isPreOrderListing, isPrizeDrawListing, normalizeListingType, } from "../utils/listing-type";
 import { PrizeDrawItemsEditor } from "./PrizeDrawItemsEditor";
+import { PRIZE_DRAW_DURATION_DAYS_MIN, PRIZE_DRAW_DURATION_DAYS_MAX, } from "../../../_internal/shared/checkout/rules/_limits";
+const PRIZE_REVEAL_MODE_OPTIONS = [
+    { value: "instant", label: "Reveal immediately on purchase" },
+    { value: "scheduled", label: "Reveal at expiry or sellout" },
+];
 // ListingType uses the canonical SB1-G spellings ("standard", "pre-order");
 // ProductFeatureProductType predates it with legacy spellings for 2 values.
 // Replaces the old 2-case ternary that silently mapped every other type
@@ -174,23 +179,11 @@ export function ProductForm({ product, onChange, isReadonly = false, renderDescr
                 const anyWon = prizeItems.some((it) => it.isWon);
                 const lockedForReveal = anyWon;
                 const fieldDisabled = isReadonly || lockedForReveal;
-                return (_jsxs(_Fragment, { children: [lockedForReveal ? (_jsx(Alert, { variant: "error", title: "Listing locked", children: "At least one prize has been revealed for this draw \u2014 the listing and its fields are now frozen. To rerun a similar draw, clone it into a new prize-draw listing." })) : null, _jsx(Alert, { variant: "warning", title: "Non-refundable", children: "Prize-draw entries are non-refundable once the reveal window opens. Buyers see and must accept this notice before paying." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "pricePerEntry", label: "Price per entry (\u20B9)", type: "number", value: product.pricePerEntry != null
+                return (_jsxs(_Fragment, { children: [lockedForReveal ? (_jsx(Alert, { variant: "error", title: "Listing locked", children: "At least one prize has been revealed for this draw \u2014 the listing and its fields are now frozen. To rerun a similar draw, clone it into a new prize-draw listing." })) : null, _jsx(Alert, { variant: "warning", title: "Non-refundable", children: "Prize-draw entries are non-refundable once purchased. Buyers see and must accept this notice before paying." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "pricePerEntry", label: "Price per entry (\u20B9)", type: "number", value: product.pricePerEntry != null
                                         ? String(product.pricePerEntry)
                                         : "", onChange: (value) => update({
                                         pricePerEntry: Math.round((parseFloat(value) || 0) * 100) / 100,
-                                    }), disabled: fieldDisabled, placeholder: "299" }), _jsx(FormField, { name: "prizeMaxEntries", label: "Max entries (pool size)", type: "number", value: String(product.prizeMaxEntries ?? ""), onChange: (value) => update({ prizeMaxEntries: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "100" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeRevealWindowStart", label: "Reveal window start", type: "datetime-local", value: (() => {
-                                        const d = resolveDate(product.prizeRevealWindowStart);
-                                        if (!d)
-                                            return "";
-                                        return d.toISOString().slice(0, 16);
-                                    })(), onChange: (value) => update({ prizeRevealWindowStart: value }), disabled: fieldDisabled }), _jsx(FormField, { name: "prizeRevealWindowEnd", label: "Reveal window end", type: "datetime-local", value: (() => {
-                                        const d = resolveDate(product.prizeRevealWindowEnd);
-                                        if (!d)
-                                            return "";
-                                        return d.toISOString().slice(0, 16);
-                                    })(), onChange: (value) => update({ prizeRevealWindowEnd: value }), disabled: fieldDisabled })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeRevealDeadlineDays", label: "Reveal deadline (days)", type: "number", value: String(product.prizeRevealDeadlineDays ?? 3), onChange: (value) => update({
-                                        prizeRevealDeadlineDays: Number(value) || 3,
-                                    }), disabled: fieldDisabled, placeholder: "3", helpText: "After window opens, buyers have this many days to claim." }), _jsx(FormField, { name: "maxPerUser", label: "Max entries per customer (blank = unlimited)", type: "number", value: String(product.maxPerUser ?? ""), onChange: (value) => update({ maxPerUser: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "" })] }), product.prizeGithubFileUrl ? (_jsx(FormField, { name: "prizeGithubFileUrl", label: "RNG Source Code URL (read-only)", type: "text", value: product.prizeGithubFileUrl, onChange: () => { }, disabled: true, helpText: "Auto-set on first save. Public proof-of-fairness link." })) : null, _jsx(PrizeDrawItemsEditor, { items: (product.prizeDrawItems ?? []), onChange: (items) => update({ prizeDrawItems: items }), onUploadImage: (file) => 
+                                    }), disabled: fieldDisabled, placeholder: "299" }), _jsx(FormField, { name: "prizeMaxEntries", label: "Max entries (pool size)", type: "number", value: String(product.prizeMaxEntries ?? ""), onChange: (value) => update({ prizeMaxEntries: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "100" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeDrawDurationDays", label: "Draw duration (days)", type: "number", value: String(product.prizeDrawDurationDays ?? ""), onChange: (value) => update({ prizeDrawDurationDays: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "7", helpText: `Draw runs this many days from publish, or until sold out — whichever comes first. ${PRIZE_DRAW_DURATION_DAYS_MIN}–${PRIZE_DRAW_DURATION_DAYS_MAX} days.` }), _jsx(FormField, { name: "prizeRevealMode", label: "Reveal mode", type: "select", value: product.prizeRevealMode ?? "scheduled", onChange: (value) => update({ prizeRevealMode: value }), disabled: fieldDisabled, options: PRIZE_REVEAL_MODE_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "maxPerUser", label: "Max entries per customer (blank = unlimited)", type: "number", value: String(product.maxPerUser ?? ""), onChange: (value) => update({ maxPerUser: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "" }), _jsx(Div, {})] }), product.prizeGithubFileUrl ? (_jsx(FormField, { name: "prizeGithubFileUrl", label: "RNG Source Code URL (read-only)", type: "text", value: product.prizeGithubFileUrl, onChange: () => { }, disabled: true, helpText: "Auto-set on first save. Public proof-of-fairness link." })) : null, _jsx(PrizeDrawItemsEditor, { items: (product.prizeDrawItems ?? []), onChange: (items) => update({ prizeDrawItems: items }), onUploadImage: (file) => 
                             // Caller is expected to wire a real uploader by overriding
                             // renderPrizeDrawImageUpload — fall back to data URL preview
                             // so the editor still functions in unwired admin contexts.

package/dist/features/products/components/ProductGalleryClient.d.ts

@@ -1,6 +1,15 @@
 import React from "react";
+/** Product video field shape — mirrors `ProductVideoField` from the products schema. */
+export interface ProductGalleryVideo {
+    /** Raw, unwrapped playable video URL — never routed through the (image-only) media proxy. */
+    url: string;
+    /** Poster frame — a normal image, already resolved/proxied by the caller (e.g. via seedExtMedia). */
+    thumbnailUrl?: string;
+}
 export interface ProductGalleryClientProps {
     images: string[];
+    /** Optional product video — rendered as a trailing slide/thumbnail; opens in theater mode (lightbox) on click. */
+    video?: ProductGalleryVideo;
     productName?: string;
 }
-export declare function ProductGalleryClient({ images, productName }: ProductGalleryClientProps): React.JSX.Element;
+export declare function ProductGalleryClient({ images, video, productName }: ProductGalleryClientProps): React.JSX.Element;