@mohasinac/appkit 4.53.0 → 4.53.2

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

@@ -1,8 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useRouter } from "next/navigation.js";
-import { Anchor, Button, GatedPrice, Stack, Text, LoginRequiredModal } from "../../../ui/index.js";
+import { Anchor, Button, GatedPrice, QuantityStepper, Row, Stack, Text, LoginRequiredModal, } from "../../../ui/index.js";
+import { useAddToCart } from "../../cart/hooks/useAddToCart.js";
+import { useToast } from "../../../ui/components/Toast.js";
+import { normalizeError } from "../../../errors/normalize.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { NonRefundableConsentModal } from "./NonRefundableConsentModal.js";
@@ -13,23 +16,82 @@ import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
  * Client buy panel for a prize-draw detail page (SB4-G).
  *
  * - Enter Draw → NonRefundableConsentModal (listingType="prize-draw")
- * - On confirm → add 1 entry to guest cart and route to /user/cart
+ * - On confirm → add the chosen number of entries to the cart, then /user/cart
  * - "View RNG source" link → prizeGithubFileUrl
+ *
+ * 🛑 THIS FLOW DID NOT WORK AT ALL UNTIL 2026-10-19, and the docstring above
+ * described the behaviour it was supposed to have. `handleConfirm` pushed to
+ * `/checkout?directItem=<slug>&type=prize-draw` — and NOTHING anywhere reads
+ * `directItem` (CheckoutRouteClient reads only `coupon` and `lane`), and
+ * nothing added to the cart. A buyer pressing "Enter draw" landed on a
+ * checkout of whatever was already in their basket, with no entry in it.
+ * Buying an entry was impossible.
+ *
+ * 🛑 MULTI-ENTRY NEEDED NO SERVER WORK. `prizeDrawRule.splitMultipleOrders`
+ * already chunks a quantity into batches of PRIZE_DRAW_MAX_REVEALS_PER_ORDER
+ * (7 entries → [3,3,1]), `enforceMaxPerUserForCart` already caps per buyer, and
+ * the rule's preflight already checks `prizeMaxEntries`. The whole server half
+ * was written and unreachable because the client never sent a quantity.
  */
 export function PrizeDrawEntryActions({ productId, productSlug, title, pricePerEntry, currency, remainingEntries, revealStatus, prizeGithubFileUrl, }) {
     const router = useRouter();
     const { requireAuth, isAuthResolving, modalOpen, modalMessage, closeModal } = useAuthGate();
     const [consentOpen, setConsentOpen] = useState(false);
+    const [quantity, setQuantity] = useState(1);
+    const { showToast } = useToast();
+    const { mutate: addToCart, isLoading: adding } = useAddToCart();
     const closed = revealStatus === "closed" || remainingEntries === 0;
+    /*
+     * Capped by what is LEFT, not by maxPerUser.
+     *
+     * `remainingEntries` is a fact about the draw and is already on screen.
+     * `maxPerUser` is an async per-buyer check (`enforceMaxPerUserForCart` counts
+     * their existing orders), so mirroring it here would mean a second, slower
+     * source of truth that disagrees with the server whenever an order is in
+     * flight — and the server's refusal already names the cap.
+     */
+    const maxQuantity = Math.max(1, Math.min(99, remainingEntries || 1));
     const handleEnter = useCallback(() => {
         if (closed)
             return;
         requireAuth(ACTION_ID.ENTER_PRIZE_DRAW, () => setConsentOpen(true));
     }, [closed, requireAuth]);
-    const handleConfirm = useCallback(() => {
+    const handleConfirm = useCallback(async () => {
         setConsentOpen(false);
-        const slug = productSlug ?? productId;
-        router.push(`${String(ROUTES.USER.CHECKOUT)}?directItem=${encodeURIComponent(slug)}&type=prize-draw`);
-    }, [productSlug, productId, router]);
-    return (_jsxs(Stack, { gap: "md", children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsxs(GatedPrice, { label: "Sign in to see the entry price", children: [formatCurrency(pricePerEntry, currency), _jsx(Text, { as: "span", className: "ml-1 text-[var(--appkit-color-text-muted)]", size: "xs", weight: "normal", children: "per entry" })] }) }), _jsx(Button, { action: closed ? undefined : ACTIONS.PRIZE_DRAW["buy-now"], variant: "primary", size: "md", className: "w-full", disabled: closed || isAuthResolving, onClick: handleEnter, children: closed ? "Draw closed" : isAuthResolving ? "Checking…" : undefined }), prizeGithubFileUrl ? (_jsx(Anchor, { href: prizeGithubFileUrl, tone: "none", underline: "hover", size: "xs", weight: "medium", className: "text-left text-primary-600 underline-offset-4 dark:text-primary-400", children: "View RNG source code on GitHub \u2192" })) : null, _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", align: "start", children: "Winners chosen by Node.js crypto.randomInt \u2014 fully auditable. Entries are locked once paid; refunds only if the prize pool is exhausted." }), _jsx(NonRefundableConsentModal, { open: consentOpen, listingType: "prize-draw", itemTitle: title, priceLabel: formatCurrency(pricePerEntry, currency), onCancel: () => setConsentOpen(false), onConfirm: handleConfirm }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+        /*
+         * ADD, then route. The previous version only routed — and to a parameter
+         * nobody reads. `useAddToCart` falls back to the guest cart on a 401, so
+         * this works signed-out too and the entry survives the login merge.
+         */
+        try {
+            await addToCart({
+                productId,
+                quantity,
+                productTitle: title,
+                price: pricePerEntry,
+            });
+        }
+        catch (err) {
+            const n = normalizeError(err);
+            /*
+             * 🛑 Surfaced, and the ROUTE IS SKIPPED. The add can legitimately fail —
+             * the draw sold out between render and confirm, or this buyer is over
+             * `maxPerUser`, which is an async per-buyer check the stepper cannot
+             * mirror. Routing to the cart anyway would show an empty basket and make
+             * a correct refusal look like the same silent nothing this flow did
+             * before it was repaired.
+             */
+            showToast(n.message, "error");
+            return;
+        }
+        router.push(String(ROUTES.USER.CART));
+    }, [addToCart, productId, quantity, title, pricePerEntry, router, showToast]);
+    const totalLabel = useMemo(() => formatCurrency(pricePerEntry * quantity, currency), [pricePerEntry, quantity, currency]);
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsxs(GatedPrice, { label: "Sign in to see the entry price", children: [formatCurrency(pricePerEntry, currency), _jsx(Text, { as: "span", className: "ml-1 text-[var(--appkit-color-text-muted)]", size: "xs", weight: "normal", children: "per entry" })] }) }), !closed ? (_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", color: "muted", children: "Entries" }), _jsx(QuantityStepper, { value: quantity, onChange: setQuantity, min: 1, max: maxQuantity })] })) : null, !closed && quantity > 1 ? (_jsx(Text, { size: "sm", color: "muted", children: _jsxs(GatedPrice, { label: "Sign in to see the total", children: [quantity, " entries \u00B7 ", totalLabel] }) })) : null, _jsx(Button, { action: closed ? undefined : ACTIONS.PRIZE_DRAW["buy-now"], variant: "primary", size: "md", className: "w-full", disabled: closed || isAuthResolving || adding, onClick: handleEnter, children: closed
+                    ? "Draw closed"
+                    : isAuthResolving
+                        ? "Checking…"
+                        : adding
+                            ? "Adding…"
+                            : undefined }), prizeGithubFileUrl ? (_jsx(Anchor, { href: prizeGithubFileUrl, tone: "none", underline: "hover", size: "xs", weight: "medium", className: "text-left text-primary-600 underline-offset-4 dark:text-primary-400", children: "View RNG source code on GitHub \u2192" })) : null, _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", align: "start", children: "Winners chosen by Node.js crypto.randomInt \u2014 fully auditable. Entries are locked once paid; refunds only if the prize pool is exhausted." }), _jsx(NonRefundableConsentModal, { open: consentOpen, listingType: "prize-draw", itemTitle: title, priceLabel: formatCurrency(pricePerEntry, currency), onCancel: () => setConsentOpen(false), onConfirm: () => void handleConfirm() }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -24,11 +24,14 @@ const CLS_BUNDLE_ROW = "flex items-center justify-between gap-[var(--appkit-spac
 const CLS_BUNDLE_LABEL = "text-[length:var(--appkit-text-xs)] text-success dark:text-success font-medium uppercase tracking-wide mb-0.5";
 const CLS_BUNDLE_CTA = "flex-shrink-0 rounded-lg bg-success-solid hover:brightness-110 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-success-on-solid transition-colors";
 import { ROUTES } from "../../../next/routing/route-map.js";
+import { productImageUrls } from "../schemas/firestore.js";
+import { PART_SLOT_LABEL } from "../../parts/schemas/firestore.js";
+import { getModelsUsingPart } from "../../../_internal/server/features/parts/data.js";
 import { ctaAnchorProps } from "../../layout/cta-anchor.js";
 import { ContextualTrail } from "../../categories/components/ContextualTrail.js";
 import { productCrumbs, withTrailHead } from "../../categories/utils/breadcrumb-chain.js";
 import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
-import { Button, Container, Div, Heading, Main, PriceDisplay, RichText, Row, Section, Span, Stack, Text, Ul, Ol, Li, Dl, Dt, Dd, Icon, } from "../../../ui/index.js";
+import { Button, Container, Div, Heading, Main, PriceDisplay, RichText, Row, Section, Span, Stack, Text, Ul, Ol, Li, SpecTable, Icon, } from "../../../ui/index.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { safeDisplayName } from "../../../security/index.js";
 import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel.js";
@@ -39,7 +42,7 @@ import { ProductFeatureBadges } from "./ProductFeatureBadges.js";
 import { isFinalSale } from "../constants/final-sale.js";
 import { FeatureBadgeList } from "./FeatureBadge.js";
 import { ShareButton } from "./ShareButton.js";
-import { CustomSectionTabContent } from "./CustomSectionTabContent.js";
+import { toCustomSectionTabs } from "./CustomSectionTabContent.js";
 import { SublistingCarouselSection } from "./SublistingCarouselSection.js";
 import { ShowGroupSection } from "./ShowGroupSection.js";
 import { HistoryTracker } from "../../history/components/HistoryTracker.js";
@@ -89,12 +92,56 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     }
     const p = product;
     const currency = p.currency || getDefaultCurrency();
+    /*
+     * The REVERSE link: a spare names a glossary entry, so the glossary entry's
+     * page should name it back. Fetched only when both conditions hold — most
+     * listings carry no `partGlossaryId` at all, and this must not become an
+     * extra read on every product page in the catalogue.
+     *
+     * `getModelsUsingPart` does its own `safeRead`-equivalent internally
+     * (catches and logs, returns `[]`), and this wraps it in `safeRead` again
+     * anyway — belt-and-braces costs nothing against a function that is already
+     * `cache()`-wrapped and this page is the only caller that would ever see a
+     * throw from a future change to it.
+     */
+    const partGlossaryId = typeof p.partGlossaryId === "string" ? p.partGlossaryId : undefined;
+    const fitsModels = partGlossaryId
+        ? await safeRead(() => getModelsUsingPart(partGlossaryId), {
+            route: "/products/[slug]",
+            key: "products.fitsModels",
+            fallback: [],
+        })
+        : [];
+    /*
+     * `(slot, tail)` from the id's OWN composition, `${slot}--${tail}` —
+     * mirrors `ModelCompositionPanel`'s private `tailOf`, duplicated rather than
+     * imported because that helper is a component-internal detail, not a public
+     * export, and pulling in the whole panel module for one split would be the
+     * heavier dependency.
+     */
+    const partHref = (() => {
+        if (!partGlossaryId)
+            return undefined;
+        const i = partGlossaryId.indexOf("--");
+        if (i < 0)
+            return undefined;
+        const slot = partGlossaryId.slice(0, i);
+        const tail = partGlossaryId.slice(i + 2);
+        return String(ROUTES.PUBLIC.PART_DETAIL(slot, tail));
+    })();
+    const partSlotLabel = partGlossaryId
+        ? PART_SLOT_LABEL[partGlossaryId.slice(0, partGlossaryId.indexOf("--"))]
+        : undefined;
     // -- Derived values ---------------------------------------------------------
     const title = String(p.title ?? p.name ?? "");
     const price = typeof p.price === "number" ? p.price : null;
     const originalPrice = typeof p.originalPrice === "number" ? p.originalPrice : null;
-    const images = Array.isArray(p.images)
-        ? p.images
+    // `images` is `ProductImage[]` since A6 — `productImageUrls` is the one
+    // normaliser (it also accepts the legacy `string[]`). Casting it to
+    // `string[]` handed the gallery objects and rendered a placeholder.
+    const galleryUrls = productImageUrls(p.images);
+    const images = galleryUrls.length > 0
+        ? galleryUrls
         : typeof p.mainImage === "string"
             ? [p.mainImage]
             : [];
@@ -103,8 +150,24 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const availableQuantity = typeof p.availableQuantity === "number"
         ? p.availableQuantity
         : null;
-    const effectiveStock = availableQuantity ?? stockQuantity;
-    const inStock = effectiveStock !== null ? effectiveStock > 0 : p.status === "published";
+    /*
+     * Made to order — printed or built when ordered, so there is no stock level
+     * to report and no "only N left" to be true.
+     *
+     * 🛑 `effectiveStock` is deliberately forced to `null` rather than left
+     * alone: every scarcity line below is guarded on `effectiveStock !== null`,
+     * and a made-to-order row's stored quantity goes NEGATIVE by design (it is
+     * the production queue). Leaving it would print "only -4 left — order soon!".
+     * One assignment suppresses all four of those branches, which is why this is
+     * done here and not at each of them.
+     */
+    const madeToOrder = p.madeToOrder === true;
+    const effectiveStock = madeToOrder ? null : availableQuantity ?? stockQuantity;
+    const inStock = madeToOrder
+        ? p.status === "published"
+        : effectiveStock !== null
+            ? effectiveStock > 0
+            : p.status === "published";
     const avgRating = typeof p.avgRating === "number" ? p.avgRating : null;
     const reviewCount = typeof p.reviewCount === "number" ? p.reviewCount : null;
     /*
@@ -222,9 +285,6 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
         }))
         : [];
     const allSpecs = [...specs, ...customFields];
-    const customSections = Array.isArray(p.customSections)
-        ? p.customSections
-        : [];
     const allowOffers = p.allowOffers === true;
     // Was `p.type === "simple"`. `ProductDocument` has no `type` field at all —
     // the check passed only because the `?? "simple"` fallback made it vacuously
@@ -298,9 +358,17 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                                         ? "Refurbished"
                                                         : condition === "used"
                                                             ? "Used"
-                                                            : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                            : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
+                                                    ? "✓ Made to order"
+                                                    : inStock
+                                                        ? "✓ In Stock"
+                                                        : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
                                                     ? ` — only ${effectiveStock} left`
-                                                    : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [inStock ? "✓ In Stock" : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                    : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [madeToOrder
+                                            ? "✓ Made to order"
+                                            : inStock
+                                                ? "✓ In Stock"
+                                                : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
                                             ? ` — only ${effectiveStock} left`
                                             : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: !finalSale, finalSale: finalSale, labels: {
                                         featured: "Featured",
@@ -320,7 +388,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                                         categoryProductCount: (n, cat) => `${n} in ${cat}`,
                                     } }), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this product" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller }), typeof p.storeRating === "number" && p.storeRating > 0 && (_jsx(Row, { gap: "xs", align: "center", className: "mt-0.5", children: _jsxs(Text, { size: "xs", color: "muted", children: [_jsx(Span, { className: "text-warning", "aria-hidden": "true", children: "\u2605" }), " ", p.storeRating.toFixed(1), typeof p.storeReviewCount === "number" &&
                                                                     p.storeReviewCount > 0 &&
-                                                                    ` · ${p.storeReviewCount} reviews`] }) }))] }), _jsxs(Row, { gap: "xs", align: "center", className: "shrink-0", children: [storeId && _jsx(MessageSellerButton, { storeId: storeId, productId: product.id }), storeHref && (_jsx(Link, { href: storeHref, className: "rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] })] }) }))] })), renderActions: () => (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [price !== null && (_jsxs(Div, { children: [_jsx(PriceDisplay, { amount: price, originalAmount: originalPrice ?? undefined, currency: currency, variant: "detail" }), _jsx(MarketPriceAnchor, { band: priceBand?.byListingType?.[normalizeListingType(p)] ?? null, windowDays: priceBand?.windowDays ?? null, currency: currency, price: price }), inStock && effectiveStock !== null && effectiveStock <= 3 && (_jsxs(Text, { className: "mt-1 text-warning", size: "xs", children: ["Only ", effectiveStock, " left \u2014 order soon!"] })), inStock && effectiveStock !== null && effectiveStock > 3 && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [effectiveStock, " in stock"] }))] })), _jsxs(Stack, { gap: "sm", ...ctaAnchorProps(), children: [renderPrimaryActions ? (renderPrimaryActions({
+                                                                    ` · ${p.storeReviewCount} reviews`] }) }))] }), _jsxs(Row, { gap: "xs", align: "center", className: "shrink-0", children: [storeId && _jsx(MessageSellerButton, { storeId: storeId, productId: product.id }), storeHref && (_jsx(Link, { href: storeHref, className: "rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] })] }) }))] })), renderActions: () => (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [price !== null && (_jsxs(Div, { children: [_jsx(PriceDisplay, { amount: price, originalAmount: originalPrice ?? undefined, currency: currency, variant: "detail" }), _jsx(MarketPriceAnchor, { band: priceBand?.byListingType?.[normalizeListingType(p)] ?? null, windowDays: priceBand?.windowDays ?? null, currency: currency, price: price }), inStock && effectiveStock !== null && effectiveStock <= 3 && (_jsxs(Text, { className: "mt-1 text-warning", size: "xs", children: ["Only ", effectiveStock, " left \u2014 order soon!"] })), inStock && effectiveStock !== null && effectiveStock > 3 && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [effectiveStock, " in stock"] })), madeToOrder && (_jsx(Text, { className: "mt-1", color: "muted", size: "xs", children: "Made to order \u2014 printed when you order, so it never runs out." })), partHref && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [partSlotLabel ?? "Part", ".", " ", _jsx(Link, { href: partHref, className: "text-primary-600 hover:underline", children: "See what else fits \u2192" }), fitsModels.length > 0 && (_jsxs(_Fragment, { children: [" ", "Fits:", " ", fitsModels.slice(0, 6).map((m, i) => (_jsxs(Text, { as: "span", children: [i > 0 ? ", " : "", m.categoryId ? (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(m.categoryId)), className: "text-primary-600 hover:underline", children: m.name })) : (m.name)] }, m.id)))] }))] }))] })), _jsxs(Stack, { gap: "sm", ...ctaAnchorProps(), children: [renderPrimaryActions ? (renderPrimaryActions({
                                             productId: product.id,
                                             productSlug: product.slug ?? slug,
                                             productTitle: product.title,
@@ -353,11 +421,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
-                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { partsContent: compositionContent, descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: allSpecs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: allSpecs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx(Ul, { spacing: "comfortable", children: ingredients.map((item, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 bg-primary-400", rounded: "full" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx(Ol, { spacing: "loose", children: howToUse.map((step, i) => (_jsxs(Li, { layout: "flex-start", gap: "3", textSize: "sm", color: "muted", children: [_jsx(Span, { layout: "flex-center", size: "xs", weight: "bold", className: "flex-shrink-0 h-6 w-6 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300", rounded: "full", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
-                                id: s.id,
-                                label: s.title,
-                                content: _jsx(CustomSectionTabContent, { section: s }),
-                            })) })), renderBundleSection: bundleMemberships.length > 0
+                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { partsContent: compositionContent, descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: allSpecs.length > 0 ? (_jsx(SpecTable, { rows: allSpecs })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx(Ul, { spacing: "comfortable", children: ingredients.map((item, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 bg-primary-400", rounded: "full" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx(Ol, { spacing: "loose", children: howToUse.map((step, i) => (_jsxs(Li, { layout: "flex-start", gap: "3", textSize: "sm", color: "muted", children: [_jsx(Span, { layout: "flex-center", size: "xs", weight: "bold", className: "flex-shrink-0 h-6 w-6 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300", rounded: "full", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: toCustomSectionTabs(p.customSections) })), 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: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryNames[0] || categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: storeName || undefined })] })) }), renderPrimaryActions
                         ? renderPrimaryActions({

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

@@ -71,6 +71,18 @@ export interface ProductFormProps {
     }) => React.ReactNode;
     /** Render app-specific category selector. */
     renderCategorySelector?: (args: CategorySelectorRenderArgs) => React.ReactNode;
+    /**
+     * Render the seller-facing price hint (`<PriceGuidanceHint categoryId>`)
+     * beside the price field. Omitted when absent — this form has no
+     * data-fetching of its own (every app-specific concern is a render-prop),
+     * and the hint is seller/admin-only, never mounted for a buyer/public
+     * context. The admin path passes nothing here on purpose: pricing an
+     * entire category's catalog from one editor is a different workflow than
+     * a seller pricing their own single listing.
+     */
+    renderPriceGuidance?: (args: {
+        categorySlug: string | undefined;
+    }) => React.ReactNode;
     /**
      * Render app-specific brand selector (select existing or create new).
      * Receives `multi=true` when brandMode is "mixed".
@@ -102,5 +114,5 @@ export interface ProductFormProps {
         disabled: boolean;
     }) => React.ReactNode;
 }
-export declare function ProductForm({ product, onChange, isReadonly, canEditTax, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, renderGroupSettings, renderGroupJoinField, }: ProductFormProps): React.JSX.Element;
+export declare function ProductForm({ product, onChange, isReadonly, canEditTax, renderDescriptionEditor, renderCategorySelector, renderPriceGuidance, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix, renderGroupSettings, renderGroupJoinField, }: ProductFormProps): React.JSX.Element;
 export {};

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

@@ -28,6 +28,14 @@ const PRIZE_REVEAL_MODE_OPTIONS = [
 // (classified/digital-code/live/prize-draw/art/stickers) to "product".
 const LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE = {
     standard: "product",
+    /*
+     * 🛑 "product", not a new `ProductFeatureProductType` member. That union is
+     * the FEATURE-badge vocabulary ("free shipping", "authenticity checked") and
+     * a spare earns the same badges a standard physical item does. Minting a
+     * value here would mean every existing feature row stopped matching spares —
+     * i.e. a brand-new type with no features at all, which reads as a bug.
+     */
+    spares: "product",
     auction: "auction",
     "pre-order": "preorder",
     "prize-draw": "prize-draw",
@@ -52,7 +60,7 @@ function readFileAsDataUrl(file) {
 }
 export function ProductForm({ product, onChange, isReadonly = false, 
 /* Defaults to false — the seller path must not reach it. See the prop's docs. */
-canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", renderGroupSettings, renderGroupJoinField, }) {
+canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPriceGuidance, renderBrandSelector, renderStoreAddressSelector, onMediaAbort, currencyPrefix = "", renderGroupSettings, renderGroupJoinField, }) {
     const t = useTranslations("adminProducts");
     const { upload } = useMediaUpload();
     const galleryIndexRef = useRef(0);
@@ -138,7 +146,13 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderBrand
                             onValueChange: (value) => update({ brand: value }),
                             onValuesChange: (values) => update({ brands: values }),
                             disabled: isReadonly,
-                        })) : product.brandMode === "mixed" ? (_jsx(TagInput, { label: "Brands", value: product.brands || [], onChange: (brands) => update({ brands }), disabled: isReadonly, placeholder: "e.g. Nike, Adidas, Puma" })) : (_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" })) }))] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Div, {}), " ", _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
+                        })) : product.brandMode === "mixed" ? (_jsx(TagInput, { label: "Brands", value: product.brands || [], onChange: (brands) => update({ brands }), disabled: isReadonly, placeholder: "e.g. Nike, Adidas, Puma" })) : (_jsx(FormField, { name: "brand", label: t("formBrand"), type: "text", value: product.brand || "", onChange: (value) => update({ brand: value }), disabled: isReadonly, placeholder: "e.g. Apple" })) }))] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(Div, {}), " ", _jsx(FormField, { name: "status", label: t("formStatus"), type: "select", value: product.status || "draft", onChange: (value) => update({ status: value }), disabled: isReadonly, options: PRODUCT_STATUS_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: t("formPrice"), type: "number", value: String(product.price ?? ""), onChange: (value) => update({ price: Number(value) }), disabled: isReadonly, placeholder: "0" }), product.madeToOrder === true ? null : (_jsx(FormField, { name: "stockQuantity", label: t("formStock"), type: "number", value: String(product.stockQuantity ?? ""), onChange: (value) => update({ stockQuantity: Number(value) }), disabled: isReadonly, placeholder: "0" }))] }), renderPriceGuidance?.({
+                categorySlug: (product.categorySlugs?.[0] ?? product.category) || undefined,
+            }), _jsx(Checkbox, { label: "Made to order", 
+                /* `suffix`, not a `helperText` prop — Checkbox has no such prop, and the
+                 * explanation is load-bearing: a seller needs to know this turns stock
+                 * tracking OFF before they tick it, not after. */
+                suffix: _jsx(Text, { size: "xs", color: "muted", children: "Printed or built when someone orders it. Stock is not tracked and the listing never shows as sold out." }), checked: !!product.madeToOrder, onChange: (e) => update({ madeToOrder: e.target.checked }), disabled: isReadonly }), !isReadonly && (_jsx(ImageUpload, { currentImage: product.mainImage, onUpload: (file) => upload(file, "products", true, {
                     type: "product-image",
                     index: 1,
                     name: product.title || "product",

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

@@ -15,5 +15,20 @@ export interface ProductsIndexListingProps {
         label: string;
     }[];
     searchPlaceholder?: string;
+    /**
+     * Scope every query to one store, for a store-detail tab.
+     *
+     * 🛑 Added so a store tab can REUSE this component. There are six
+     * hand-written `Store<Type>Listing` components — ~140 lines each of the same
+     * toolbar, availability tabs, sticky pagination and card grid — and a seventh
+     * copy for spares would push a Rule-of-Three breach from six to seven while
+     * being the cheapest possible moment not to. Consolidating the existing six
+     * is its own session; not adding to them costs one prop.
+     *
+     * It OVERRIDES the URL's `storeId` rather than merging: on a store tab the
+     * store is the page, so a `?storeId=` from a stale link must not be able to
+     * show another seller's stock under this seller's heading.
+     */
+    storeId?: string;
 }
-export declare function ProductsIndexListing({ initialData, listingTypes, typeTabs, searchPlaceholder, }: ProductsIndexListingProps): React.JSX.Element;
+export declare function ProductsIndexListing({ initialData, listingTypes, typeTabs, searchPlaceholder, storeId: scopedStoreId, }: ProductsIndexListingProps): React.JSX.Element;

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

@@ -67,7 +67,7 @@ function dedicatedPageFor(types) {
         label: `Full ${plugin.pluralLabel} filters →`,
     };
 }
-export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODUCT_LISTING_TYPES, typeTabs = PRODUCT_TYPE_FILTER_TABS, searchPlaceholder = "Search products...", }) {
+export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODUCT_LISTING_TYPES, typeTabs = PRODUCT_TYPE_FILTER_TABS, searchPlaceholder = "Search products...", storeId: scopedStoreId, }) {
     const router = useRouter();
     const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
     const { showToast } = useToast();
@@ -155,7 +155,7 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
         maxPrice: table.get(TABLE_KEYS.MAX_PRICE) ? Number(table.get(TABLE_KEYS.MAX_PRICE)) : undefined,
         condition: table.get(TABLE_KEYS.CONDITION) || undefined,
         brand: table.get(TABLE_KEYS.BRAND) || undefined,
-        storeId: table.get(TABLE_KEYS.STORE_ID) || undefined,
+        storeId: scopedStoreId || table.get(TABLE_KEYS.STORE_ID) || undefined,
         freeShipping: table.get(TABLE_KEYS.FREE_SHIPPING) === "true" ? true : undefined,
         // These three are in FILTER_KEYS (so they count toward the filter badge)
         // but were never put on the wire — the drawer sections were inert.
@@ -345,5 +345,5 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
                 ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: isLoading ? (_jsx(Grid, { cols: "cards", gap: "md", children: Array.from({ length: 10 }).map((_, i) => (_jsxs(Div, { className: `${__O.hidden} animate-pulse`, border: "subtle", rounded: "xl", children: [_jsx(Div, { className: "aspect-square", surface: "subtle" }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", children: [_jsx(Div, { className: "h-3 w-3/4", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-3 w-1/2", surface: "subtle", rounded: "default" }), _jsx(Div, { className: "h-4 w-1/3", surface: "subtle", rounded: "default" })] })] }, i))) })) : (_jsx(ProductGrid, { products: products, getProductHref: (p) => pluginFor(p.listingType ?? "standard").detailRoute(p.slug || p.id), view: view === "grid" ? "card" : "list", onWishlistToggle: handleWishlistToggle, wishlistedIds: wishlistedIds, onAddToCart: handleAddToCart, onBuyNow: handleBuyNow, selectionMode: selection.isSelecting, selectedIds: selection.selectedIdSet, onToggleSelect: selection.toggle })) }), _jsx(CompareOverlay, { isOpen: compareIds.length > 0, productIds: compareIds, productType: "product", onClose: () => {
                     setCompareIds([]);
                     selection.clearSelection();
-                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9", listingTypeOptions: listingTypeOptions, listingTypeFooter: dedicatedPage ? (_jsx(Div, { padding: "x-md", paddingY: "b-sm", children: _jsx(TextLink, { href: dedicatedPage.href, size: "sm", weight: "medium", children: dedicatedPage.label }) })) : null, categoryOptions: categoryOptions, brandOptions: brandOptions, featureOptions: featureOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, onRemove: (id) => setCompareIds((ids) => ids.filter((i) => i !== id)), onAdd: (id) => setCompareIds((ids) => (ids.includes(id) ? ids : [...ids, id])) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9", listingTypeOptions: listingTypeOptions, listingTypeFooter: dedicatedPage ? (_jsx(Div, { padding: "x-md", paddingY: "b-sm", children: _jsx(TextLink, { href: dedicatedPage.href, size: "sm", weight: "medium", children: dedicatedPage.label }) })) : null, categoryOptions: categoryOptions, brandOptions: brandOptions, featureOptions: featureOptions }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -5,6 +5,8 @@ import Link from "next/link.js";
 import { Div, PricesOnly, Row, Span, Text, Modal, SideDrawer, Button } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { GroupMemberPicker } from "./GroupMemberPicker.js";
+import { resolveGroupMemberImage } from "../utils/group-member-image.js";
+import { readGroupRules } from "../../../_internal/shared/features/products/group-rules.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
@@ -18,7 +20,7 @@ function memberHref(m) {
     return pluginFor(normalizeListingType(m)).detailRoute(slug);
 }
 function MemberThumb({ member, isCurrent }) {
-    const image = member.images?.[0] ?? "";
+    const image = resolveGroupMemberImage(member);
     const href = memberHref(member);
     const price = formatCurrency(member.price, member.currency ?? "INR");
     return (_jsxs(Link, { href: href, "aria-label": member.title, className: "flex flex-col items-center gap-[var(--appkit-space-1-5)] flex-shrink-0 w-16 group", children: [_jsxs(Div, { rounded: "full", className: `relative w-14 h-14 overflow-hidden border-2 transition-all ${isCurrent
@@ -48,7 +50,18 @@ export function ShowGroupSection({ groupId, currentSlug, isParent, groupTitle })
     // The overlay is now a PICKER, not a read-only table: pick how many of each
     // member you want and add the whole selection as one cart line. The picker
     // stands itself down (read-only, no CTA) when the group spans sellers.
-    const tableContent = (_jsx(GroupMemberPicker, { groupId: groupId, groupSource: "product-group", members: members, onAdded: () => setShowAll(false), onAuthRequired: () => setShowAll(false) }));
+    const tableContent = (_jsx(GroupMemberPicker, { groupId: groupId, groupSource: "product-group", members: members, 
+        /*
+         * A product group's rules live on the PARENT, and the parent is one of
+         * the members this component already fetched — found by `isGroupParent`
+         * rather than by position, because the endpoint makes no ordering
+         * promise and the parent is not reliably first.
+         *
+         * 🛑 This is why the five rule fields are in `PRODUCT_PUBLIC_FIELDS`: they
+         * reach `toPublicGroupMember` through that allow-list, and without it the
+         * picker would silently see no rules and permit what the server refuses.
+         */
+        rules: readGroupRules(members.find((m) => m.isGroupParent)), onAdded: () => setShowAll(false), onAuthRequired: () => setShowAll(false) }));
     return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: `${__O.hidden}`, surface: "muted", rounded: "xl", border: "default", children: [_jsxs(Row, { role: "button", tabIndex: 0, onClick: () => setOpen((v) => !v), onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             setOpen((v) => !v);

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

@@ -0,0 +1,7 @@
+import React from "react";
+type SearchParams = Record<string, string | string[]>;
+export interface SparesListViewProps {
+    searchParams?: SearchParams;
+}
+export declare function SparesListView({ searchParams }: SparesListViewProps): Promise<React.JSX.Element>;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Container, Heading, Main, Section, Text, TextLink } from "../../../ui/index.js";
+import { AdSlot } from "../../homepage/components/AdSlot.js";
+import { ProductsIndexListing } from "./ProductsIndexListing.js";
+import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
+import { sortBy } from "../../../constants/sort.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
+import { listPublicProducts, parsePublicProductParams, defaultAvailabilityForListingTypes, } from "../../../_internal/server/features/products/list-public.js";
+const DEFAULT_PAGE_SIZE = 24;
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
+/** The one type this page spans. Named so the two call sites cannot disagree. */
+const SPARES_LISTING_TYPES = ["spares"];
+export async function SparesListView({ searchParams = {} }) {
+    /*
+     * Filter semantics live in `listPublicProducts`, shared verbatim with
+     * `/api/products`, so the SSR first paint and the client's refetch cannot
+     * disagree about what the default view means. That matters more here than it
+     * looks: every public listing hook sets `staleTime: Infinity` once given SSR
+     * `initialData`, so a disagreement is FROZEN for that query key and no
+     * refetch ever repairs it (Root Cause #30).
+     */
+    const result = await listPublicProducts(parsePublicProductParams(searchParams, {
+        listingTypes: SPARES_LISTING_TYPES,
+        pageSize: DEFAULT_PAGE_SIZE,
+        sorts: DEFAULT_SORT,
+        // Derived from the plugin's own `hideDefault`, so this page and
+        // `ProductsIndexListing` cannot mirror two different literals.
+        ...defaultAvailabilityForListingTypes(SPARES_LISTING_TYPES),
+    }));
+    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Spares" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Single components off disassembled tops \u2014 attack rings, weight disks, drivers, bits. Sellers list what they have spare; most are one of a kind." }), _jsxs(Text, { className: "mt-2", size: "sm", children: ["Not sure which part you need?", " ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.PARTS), children: "Browse the parts glossary" }), " ", "\u2014 every component, what it does, and which tops use it."] })] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing
+                    // `undefined`, not `null` — React Query treats `null` as defined
+                    // data, so a failed query would freeze an empty grid forever under
+                    // `staleTime: Infinity`. Same reasoning as ProductsIndexPageView.
+                    , { 
+                        // `undefined`, not `null` — React Query treats `null` as defined
+                        // data, so a failed query would freeze an empty grid forever under
+                        // `staleTime: Infinity`. Same reasoning as ProductsIndexPageView.
+                        initialData: result ?? undefined, listingTypes: SPARES_LISTING_TYPES, searchPlaceholder: "Search spares by part, colour or model..." }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
+}

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

@@ -9,6 +9,7 @@ import { formatCurrency } from "../../../utils/number.formatter.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { SUBLISTING_CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { productImageUrls } from "../schemas/firestore.js";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",
@@ -18,7 +19,7 @@ function getHref(listing) {
     return pluginFor(normalizeListingType(listing)).detailRoute(slug);
 }
 function ListingThumb({ listing, isCurrent, }) {
-    const image = listing.images?.[0] ?? listing.mainImage ?? "";
+    const image = productImageUrls(listing.images)[0] || listing.mainImage || "";
     const href = getHref(listing);
     const price = formatCurrency(listing.price, listing.currency ?? "INR");
     return (_jsxs(Link, { href: href, "aria-label": listing.title, className: "flex flex-col items-center gap-[var(--appkit-space-1-5)] flex-shrink-0 w-16 group", children: [_jsx(Div, { rounded: "full", className: `relative w-14 h-14 overflow-hidden border-2 transition-all ${isCurrent

package/dist/features/products/constants/action-defs.d.ts

@@ -411,6 +411,7 @@ export declare const SELLER_BULK_ACTIONS: {
     readonly live: readonly ["row-delete"];
     readonly art: readonly ["row-delete"];
     readonly stickers: readonly ["row-delete"];
+    readonly spares: readonly ["row-delete"];
     readonly auctions: readonly ["row-delete"];
     readonly preOrders: readonly ["row-delete"];
     readonly prizeDraws: readonly ["row-delete"];

package/dist/features/products/constants/action-defs.js

@@ -566,6 +566,7 @@ export const SELLER_BULK_ACTIONS = {
     live: [ROW_ACTION_ID.DELETE],
     art: [ROW_ACTION_ID.DELETE],
     stickers: [ROW_ACTION_ID.DELETE],
+    spares: [ROW_ACTION_ID.DELETE],
     auctions: [ROW_ACTION_ID.DELETE],
     preOrders: [ROW_ACTION_ID.DELETE],
     prizeDraws: [ROW_ACTION_ID.DELETE],