@mohasinac/appkit 2.4.10 → 2.5.0

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

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * CompareOverlay — BK3
+ *
+ * Fullscreen comparison overlay triggered by the Compare bulk action on
+ * Products / Auctions / Pre-orders listings.
+ *
+ * Layout:
+ *  - Desktop (md+): up to COMPARE_MAX_ITEMS columns side-by-side. Left rail
+ *    holds field labels, columns hold values.
+ *  - Mobile (< md): single-card swipeable view with dot pagination. The
+ *    `useSwipe` hook detects left/right swipes on the card area.
+ *
+ * Data: parent passes either pre-loaded `items` or a list of `productIds`.
+ * When ids are passed, this component does a single fetch to
+ * `GET /api/products?ids=<csv>` (BK3 listByIds endpoint).
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Link from "next/link";
+import { X } from "lucide-react";
+import { Button, Div, Heading, Row, Stack, Text } from "../../../ui";
+import { useSwipe } from "../../../react/hooks/useSwipe";
+import { ROUTES } from "../../../next";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { COMPARE_MAX_ITEMS } from "../constants/action-defs";
+import { isAuctionListing, isPreOrderListing } from "../utils/listing-type";
+const DEFAULT_LABELS = {
+    title: "Compare items",
+    empty: "Select up to 4 items from the listing to compare.",
+    close: "Close",
+    remove: "Remove",
+    view: "View",
+    field: {
+        image: "Photo",
+        price: "Price",
+        condition: "Condition",
+        brand: "Brand",
+        category: "Category",
+        store: "Store",
+    },
+};
+const OVERLAY_CLASS = "fixed inset-0 flex flex-col bg-white dark:bg-zinc-950 overflow-hidden";
+const OVERLAY_STYLE = { zIndex: "var(--appkit-z-modal, 60)" };
+const HEADER_CLASS = "flex items-center justify-between gap-3 border-b border-zinc-200 dark:border-zinc-800 px-4 py-3";
+const FIELD_LABEL_CLASS = "text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400";
+const CHIP_CLASS = "inline-flex items-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 px-2 py-0.5 text-xs";
+const COLUMN_CARD_CLASS = "flex flex-col gap-3 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-3";
+function detailHref(item, type) {
+    const id = item.slug ?? item.id;
+    if (type === "auction" || isAuctionListing(item)) {
+        return String(ROUTES.PUBLIC.AUCTION_DETAIL(id));
+    }
+    if (type === "preorder" || isPreOrderListing(item)) {
+        return String(ROUTES.PUBLIC.PRE_ORDER_DETAIL(id));
+    }
+    return String(ROUTES.PUBLIC.PRODUCT_DETAIL(id));
+}
+function priceLabel(item) {
+    if (typeof item.price !== "number")
+        return "—";
+    return formatCurrency(item.price, item.currency ?? "INR");
+}
+function FieldRow({ label, children }) {
+    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: FIELD_LABEL_CLASS, children: label }), _jsx(Div, { children: children })] }));
+}
+function CompareColumn({ item, productType, labels, onRemove, onClose }) {
+    const href = detailHref(item, productType);
+    const img = item.mainImage ?? item.images?.[0];
+    return (_jsxs(Stack, { gap: "md", className: COLUMN_CARD_CLASS, children: [_jsxs(Row, { justify: "between", align: "start", gap: "sm", children: [_jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 hover:underline line-clamp-2", children: item.title ?? item.id }), onRemove && (_jsx("button", { type: "button", onClick: () => onRemove(item.id), "aria-label": `${labels.remove} ${item.title ?? item.id}`, className: "shrink-0 rounded-full p-1 text-zinc-400 hover:bg-zinc-100 hover:text-rose-500 dark:hover:bg-zinc-800", children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsx(FieldRow, { label: labels.field.image, children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", children: _jsx(Div, { className: "relative aspect-square overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800", children: img ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        _jsx("img", { src: img, alt: item.title ?? item.id, className: "h-full w-full object-cover" })) : null }) }) }), _jsx(FieldRow, { label: labels.field.price, children: _jsx(Text, { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: priceLabel(item) }) }), _jsx(FieldRow, { label: labels.field.condition, children: _jsx(Text, { children: item.condition ? _jsx("span", { className: CHIP_CLASS, children: item.condition }) : "—" }) }), _jsx(FieldRow, { label: labels.field.brand, children: _jsx(Text, { children: item.brand ? _jsx("span", { className: CHIP_CLASS, children: item.brand }) : "—" }) }), _jsx(FieldRow, { label: labels.field.category, children: _jsx(Text, { children: item.categoryName || item.category ? (_jsx("span", { className: CHIP_CLASS, children: item.categoryName ?? item.category })) : ("—") }) }), _jsx(FieldRow, { label: labels.field.store, children: _jsx(Text, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: item.storeName ?? "—" }) }), _jsx(Button, { asChild: true, variant: "primary", size: "sm", className: "mt-auto", children: _jsx(Link, { href: href, target: "_blank", rel: "noopener noreferrer", onClick: onClose, children: labels.view }) })] }));
+}
+function useFetchedProducts(productIds, passedItems, isOpen) {
+    const [fetched, setFetched] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const lastKey = useRef("");
+    useEffect(() => {
+        if (!isOpen || passedItems)
+            return;
+        const ids = (productIds ?? []).slice(0, COMPARE_MAX_ITEMS);
+        const key = ids.join(",");
+        if (!key || key === lastKey.current)
+            return;
+        lastKey.current = key;
+        let cancelled = false;
+        setIsLoading(true);
+        fetch(`/api/products?ids=${encodeURIComponent(key)}`, { credentials: "include" })
+            .then((r) => r.json())
+            .then((json) => {
+            if (cancelled)
+                return;
+            const items = (json?.data?.items ?? []);
+            setFetched(items);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setFetched([]);
+        })
+            .finally(() => {
+            if (!cancelled)
+                setIsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, productIds, passedItems]);
+    return {
+        items: passedItems ?? fetched,
+        isLoading: !passedItems && isLoading,
+    };
+}
+export function CompareOverlay({ isOpen, items: passedItems, productIds, productType = "product", onClose, onRemove, labels: labelOverrides, }) {
+    const labels = useMemo(() => ({
+        ...DEFAULT_LABELS,
+        ...labelOverrides,
+        field: { ...DEFAULT_LABELS.field, ...(labelOverrides?.field ?? {}) },
+    }), [labelOverrides]);
+    const { items, isLoading } = useFetchedProducts(productIds, passedItems, isOpen);
+    const trimmed = useMemo(() => items.slice(0, COMPARE_MAX_ITEMS), [items]);
+    const [activeIndex, setActiveIndex] = useState(0);
+    // Keep activeIndex in range as items shrink (e.g. user removes a column).
+    useEffect(() => {
+        if (activeIndex >= trimmed.length && trimmed.length > 0) {
+            setActiveIndex(trimmed.length - 1);
+        }
+    }, [trimmed.length, activeIndex]);
+    // Esc closes overlay.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [isOpen, onClose]);
+    const swipeRef = useRef(null);
+    useSwipe(swipeRef, {
+        onSwipeLeft: () => setActiveIndex((i) => Math.min(trimmed.length - 1, i + 1)),
+        onSwipeRight: () => setActiveIndex((i) => Math.max(0, i - 1)),
+    });
+    const handleRemove = useCallback((id) => {
+        onRemove?.(id);
+    }, [onRemove]);
+    if (!isOpen)
+        return null;
+    return (_jsxs(Div, { className: OVERLAY_CLASS, style: OVERLAY_STYLE, role: "dialog", "aria-modal": "true", "aria-label": labels.title, children: [_jsxs(Row, { justify: "between", align: "center", className: HEADER_CLASS, children: [_jsx(Heading, { level: 2, className: "text-base font-semibold", children: labels.title }), _jsx("button", { type: "button", onClick: onClose, "aria-label": labels.close, className: "rounded-full p-2 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx(Div, { className: "flex-1 overflow-auto p-4", children: isLoading ? (_jsx(Text, { variant: "secondary", className: "text-center py-12", children: "Loading\u2026" })) : trimmed.length === 0 ? (_jsx(Text, { variant: "secondary", className: "text-center py-12", children: labels.empty })) : (_jsxs(_Fragment, { children: [_jsx(Div, { className: "hidden md:grid gap-4", style: {
+                                gridTemplateColumns: `repeat(${trimmed.length}, minmax(0, 1fr))`,
+                            }, children: trimmed.map((item) => (_jsx(CompareColumn, { item: item, productType: productType, labels: labels, onRemove: onRemove ? handleRemove : undefined, onClose: onClose }, item.id))) }), _jsxs(Div, { className: "md:hidden", children: [_jsx(Div, { ref: swipeRef, className: "touch-pan-y", children: trimmed[activeIndex] && (_jsx(CompareColumn, { item: trimmed[activeIndex], productType: productType, labels: labels, onRemove: onRemove ? handleRemove : undefined, onClose: onClose })) }), trimmed.length > 1 && (_jsx(Row, { justify: "center", gap: "xs", className: "mt-4", children: trimmed.map((it, idx) => (_jsx("button", { type: "button", "aria-label": `Show item ${idx + 1}`, onClick: () => setActiveIndex(idx), className: `h-2 w-2 rounded-full transition-colors ${idx === activeIndex
+                                            ? "bg-primary"
+                                            : "bg-zinc-300 dark:bg-zinc-700"}` }, it.id))) }))] })] })) })] }));
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { type ProductFeatureDocument } from "../schemas/product-features";
+/**
+ * Stable map of icon-set keys → React components.
+ *
+ * Adding a new platform feature with a new icon key requires:
+ *   1. add the key + lucide component here
+ *   2. reference the key as `icon: "<key>"` in the seed/admin form
+ *
+ * `Tag` is the fallback for unrecognised keys (instead of rendering nothing).
+ */
+export declare const FEATURE_ICON_MAP: Record<string, React.ComponentType<{
+    className?: string;
+}>>;
+export interface FeatureBadgeProps {
+    featureId: string;
+    features: ProductFeatureDocument[];
+}
+export declare function FeatureBadge({ featureId, features }: FeatureBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export interface FeatureBadgeListProps {
+    /** Feature IDs referenced by the product. */
+    productFeatureIds?: string[];
+    features: ProductFeatureDocument[];
+    /** Cap the visible count and render a "+N more" pill. 0 = no cap. */
+    maxVisible?: number;
+    className?: string;
+}
+export declare function FeatureBadgeList({ productFeatureIds, features, maxVisible, className, }: FeatureBadgeListProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BadgeCheck, CalendarCheck, Megaphone, Package, PackageCheck, RefreshCcw, Sparkles, Star, Tag, Trophy, Truck, } from "lucide-react";
+import { Row, Span } from "../../../ui";
+import { isFeatureIconPath, } from "../schemas/product-features";
+/**
+ * Stable map of icon-set keys → React components.
+ *
+ * Adding a new platform feature with a new icon key requires:
+ *   1. add the key + lucide component here
+ *   2. reference the key as `icon: "<key>"` in the seed/admin form
+ *
+ * `Tag` is the fallback for unrecognised keys (instead of rendering nothing).
+ */
+export const FEATURE_ICON_MAP = {
+    truck: Truck,
+    "badge-check": BadgeCheck,
+    "refresh-ccw": RefreshCcw,
+    sparkles: Sparkles,
+    package: Package,
+    star: Star,
+    megaphone: Megaphone,
+    trophy: Trophy,
+    "package-check": PackageCheck,
+    "calendar-check": CalendarCheck,
+    tag: Tag,
+};
+const ICON_SIZE_CLASS = "h-3 w-3";
+const BADGE_BASE_CLASS = "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[var(--appkit-font-size-2xs,11px)] font-medium border-zinc-200 dark:border-zinc-700";
+const MORE_BADGE_CLASS = "inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-700 px-2 py-0.5 text-[var(--appkit-font-size-2xs,11px)] font-medium text-zinc-600 dark:text-zinc-300";
+function FeatureIcon({ icon, className = ICON_SIZE_CLASS, }) {
+    if (isFeatureIconPath(icon)) {
+        return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: _jsx("path", { d: icon }) }));
+    }
+    const Cmp = FEATURE_ICON_MAP[icon] ?? FEATURE_ICON_MAP.tag;
+    return _jsx(Cmp, { className: className });
+}
+function colorStyleFor(iconColor) {
+    if (!iconColor)
+        return undefined;
+    const ref = `var(${iconColor})`;
+    return { color: ref, borderColor: ref };
+}
+export function FeatureBadge({ featureId, features }) {
+    const f = features.find((x) => x.id === featureId);
+    if (!f)
+        return null;
+    return (_jsxs(Span, { title: f.description ?? undefined, className: BADGE_BASE_CLASS, style: colorStyleFor(f.iconColor), children: [_jsx(FeatureIcon, { icon: f.icon }), f.label] }));
+}
+export function FeatureBadgeList({ productFeatureIds, features, maxVisible = 0, className, }) {
+    if (!productFeatureIds || productFeatureIds.length === 0)
+        return null;
+    if (!features || features.length === 0)
+        return null;
+    const resolved = productFeatureIds
+        .map((id) => features.find((f) => f.id === id))
+        .filter((f) => Boolean(f));
+    if (resolved.length === 0)
+        return null;
+    const visible = maxVisible > 0 ? resolved.slice(0, maxVisible) : resolved;
+    const hidden = maxVisible > 0 ? Math.max(0, resolved.length - maxVisible) : 0;
+    return (_jsxs(Row, { wrap: true, gap: "xs", className: className, children: [visible.map((f) => (_jsx(FeatureBadge, { featureId: f.id, features: features }, f.id))), hidden > 0 && (_jsxs(Span, { className: MORE_BADGE_CLASS, "aria-label": `${hidden} more features`, children: ["+", hidden, " more"] }))] }));
+}

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

@@ -172,7 +172,7 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
         const params = new URLSearchParams({ page: String(page), pageSize: "25" });
         if (query)
             params.set("q", query);
-        params.set("filters", "isAuction==false");
+        params.set("filters", "listingType==standard");
         const res = (await apiClient.get(`${storeProductsEndpoint}?${params.toString()}`));
         const items = (res.products ?? res.items ?? []).map((p) => ({ value: p.id, label: p.title }));
         return { items, hasMore: false };

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

@@ -0,0 +1,23 @@
+export type NonRefundableListingType = "bundle" | "prize-draw";
+export interface NonRefundableConsentModalProps {
+    /** Modal visibility — controlled by the parent. */
+    open: boolean;
+    /** Fires when the user dismisses the modal (Cancel button or backdrop). */
+    onCancel: () => void;
+    /**
+     * Fires when the user ticks the consent checkbox AND clicks "Agree & Continue".
+     * The parent should then proceed with checkout / entry submission.
+     */
+    onConfirm: () => void;
+    /** Drives the copy below — bundle wording vs prize-draw wording. */
+    listingType: NonRefundableListingType;
+    /** Marketing label shown above the description (e.g. "Pokémon TCG Starter Pack"). */
+    itemTitle?: string;
+    /**
+     * Display-only price string (e.g. "₹6,499"). Optional — when omitted the
+     * modal omits the price line entirely; this keeps the component reusable
+     * from contexts that don't have a finalised number yet.
+     */
+    priceLabel?: string;
+}
+export declare function NonRefundableConsentModal({ open, onCancel, onConfirm, listingType, itemTitle, priceLabel, }: NonRefundableConsentModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * NonRefundableConsentModal — SB3-C / SB4 (S22 Phase-4-follow-up 2026-05-12)
+ *
+ * Shared confirmation modal shown before a user commits to a non-refundable
+ * purchase. Used by:
+ *   - Bundle detail page → "Buy Bundle" (whole-bundle, all-or-nothing settlement)
+ *   - Prize-draw detail page → "Enter Draw" (entry fee is locked once paid)
+ *
+ * Copy varies by `listingType`. The primary CTA stays disabled until the
+ * consent checkbox is ticked, mirroring the legal flow the support team
+ * agreed to in S5-doc.
+ */
+import { useEffect, useId, useState } from "react";
+import { Button, Checkbox, Modal, Stack, Text, } from "../../../ui";
+const COPY = {
+    bundle: {
+        heading: "This bundle is non-refundable once paid",
+        bullets: [
+            "All items in the bundle ship together. We don't process partial refunds for individual items inside the bundle.",
+            "If the seller cancels the bundle before shipping, your full payment is refunded automatically.",
+            "Once shipped, normal item-level shipping/return guarantees apply — but the bundle price itself is final.",
+        ],
+        cta: "Agree & Buy Bundle",
+        consent: "I understand this purchase is non-refundable once paid. The seller will ship all items together.",
+    },
+    "prize-draw": {
+        heading: "Entry fee is non-refundable",
+        bullets: [
+            "Your entry is locked the moment payment confirms. Prize draws use a public on-chain RNG — no entries can be voided after the reveal window opens.",
+            "If the prize pool is exhausted (every prize already won), your entry is automatically refunded.",
+            "If you miss the reveal deadline after winning, the prize is auto-forfeited and your entry fee is NOT returned.",
+        ],
+        cta: "Agree & Enter Draw",
+        consent: "I understand my entry fee is non-refundable except in the documented pool-exhaustion case.",
+    },
+};
+export function NonRefundableConsentModal({ open, onCancel, onConfirm, listingType, itemTitle, priceLabel, }) {
+    const [consented, setConsented] = useState(false);
+    const consentId = useId();
+    const copy = COPY[listingType];
+    // Reset the consent state every time the modal is opened so a previous
+    // accidental click doesn't carry over to the next attempt.
+    useEffect(() => {
+        if (open)
+            setConsented(false);
+    }, [open]);
+    const handleConfirm = () => {
+        if (!consented)
+            return;
+        onConfirm();
+    };
+    return (_jsx(Modal, { open: open, onClose: onCancel, size: "md", title: copy.heading, actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onCancel, children: "Cancel" }), _jsx(Button, { variant: "primary", disabled: !consented, onClick: handleConfirm, children: copy.cta })] }), children: _jsxs(Stack, { className: "gap-3", children: [itemTitle && (_jsx(Text, { className: "font-semibold", children: itemTitle })), priceLabel && (_jsxs(Text, { className: "text-[var(--appkit-color-text-muted,#6b7280)]", children: ["Total: ", priceLabel] })), _jsx("ul", { className: "list-disc pl-5 space-y-2", children: copy.bullets.map((b, i) => (_jsx("li", { children: _jsx(Text, { children: b }) }, i))) }), _jsx(Checkbox, { id: consentId, label: copy.consent, checked: consented, onChange: (e) => setConsented(e.target.checked) })] }) }));
+}

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

@@ -0,0 +1,12 @@
+import type { PrizeDrawsSectionConfig } from "../../homepage/schemas/firestore";
+export interface PrizeDrawsSectionProps {
+    config: PrizeDrawsSectionConfig;
+}
+/**
+ * Renders a prize-draws strip on the homepage.
+ *
+ * Reads products with `listingType="prize-draw"` and `prizeRevealStatus` in the
+ * configured set. Those fields are added later in the prize-draw block; for now
+ * the component renders an empty state and the section ships disabled in seed.
+ */
+export declare function PrizeDrawsSection({ config, }: PrizeDrawsSectionProps): Promise<import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Container, Heading, Section, Stack, Text, } from "../../../ui";
+import { ROUTES } from "../../../next";
+/**
+ * Renders a prize-draws strip on the homepage.
+ *
+ * Reads products with `listingType="prize-draw"` and `prizeRevealStatus` in the
+ * configured set. Those fields are added later in the prize-draw block; for now
+ * the component renders an empty state and the section ships disabled in seed.
+ */
+export async function PrizeDrawsSection({ config, }) {
+    const title = config.title ?? "Prize Draws";
+    const subtitle = config.subtitle ?? "Enter for a chance to win rare collectibles";
+    const draws = [];
+    return (_jsx(Section, { className: "py-10", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: title }), subtitle ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: subtitle })) : null] }), draws.length === 0 ? (_jsxs(Stack, { align: "center", gap: "sm", className: "rounded-2xl border border-dashed border-zinc-300 px-6 py-12 text-center dark:border-slate-700", children: [_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No active prize draws \u2014 new draws are announced regularly." }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: "text-sm font-medium text-primary hover:underline", children: "Browse live auctions \u2192" })] })) : null] }) }) }));
+}

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

@@ -1,5 +1,13 @@
+import type { ProductFeatureDocument } from "../schemas/product-features";
 export interface ProductDetailPageViewProps {
     slug: string;
+    /**
+     * Pre-fetched product document from the page's server data layer.
+     * When provided, the internal repository call is skipped — deduplicating
+     * the fetch with generateMetadata() via React.cache().
+     * When absent, the component falls back to fetching by slug (backward compat).
+     */
+    initialProduct?: import("../schemas/firestore").ProductDocument | null;
     /**
      * Render prop for offer UI. Receives the resolved product fields.
      * Only called when product.allowOffers is true and product.type is "simple".
@@ -10,5 +18,12 @@ export interface ProductDetailPageViewProps {
         currency: string;
         minOfferPercent: number;
     }) => React.ReactNode;
+    /**
+     * SSR-loaded productFeatures (platform + store-scope). When present, the
+     * product.features[] IDs render as FeatureBadge pills; the legacy text
+     * Highlights list is suppressed to avoid double-render. When absent, the
+     * legacy bullets render unchanged.
+     */
+    productFeatures?: ProductFeatureDocument[];
 }
-export declare function ProductDetailPageView({ slug, renderOfferAction, }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function ProductDetailPageView({ slug, initialProduct, renderOfferAction, productFeatures, }: ProductDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;