@mohasinac/appkit 4.52.5 → 4.53.1

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

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
 import React, { useEffect, useState } from "react";
 import { z } from "zod";
-import { Button, Code, ConfirmDeleteModal, Div, Heading, Modal, Row, SideDrawer, Span, Stack, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast } from "../../../ui/index.js";
+import { Button, Checkbox, Code, ConfirmDeleteModal, Div, Grid, Heading, Input, Modal, Row, SideDrawer, Span, Stack, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast } from "../../../ui/index.js";
 import { FormShellContext, useFormShellState, FormErrorSummary } from "../../../ui/forms/index.js";
+import { FieldInput } from "../../../ui/forms/FieldInput.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { apiClient } from "../../../http/index.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
@@ -50,7 +51,7 @@ const CONDITION_OPTIONS = [
     { value: "graded", label: "Graded" },
     { value: "refurbished", label: "Refurbished" },
 ];
-export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, isAuction, storeProductsEndpoint, onGroupChanged, }) {
+export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, groupRules, isAuction, storeProductsEndpoint, onGroupChanged, }) {
     const { showToast } = useToast();
     const [open, setOpen] = useState(false);
     const [loading, setLoading] = useState(false);
@@ -64,6 +65,21 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
     });
     const [linkTargets, setLinkTargets] = useState([]);
     const [children, setChildren] = useState(null);
+    /*
+     * Rule drafts as STRINGS, not numbers. An empty input has to be
+     * distinguishable from zero — "" means "no limit" and `0` would mean "pick at
+     * most none" — and a numeric state cannot express the empty case without a
+     * separate null, which is the same thing with extra steps.
+     */
+    const [ruleDraft, setRuleDraft] = useState({
+        min: groupRules?.groupMinMembers?.toString() ?? "",
+        max: groupRules?.groupMaxMembers?.toString() ?? "",
+        perMember: groupRules?.groupMaxUnitsPerMember?.toString() ?? "",
+        discount: groupRules?.groupDiscountPercent?.toString() ?? "",
+    });
+    /** Per-member stock edits, keyed by product id. Only touched rows are sent. */
+    const [stockDraft, setStockDraft] = useState({});
+    const [motDraft, setMotDraft] = useState({});
     const [confirmAction, setConfirmAction] = useState(null);
     const titleSections = React.useMemo(() => buildSectionsFromSchema(groupTitleSchema), []);
     const titleNav = useSectionFormNav(titleSections, titleDraft, { scope: "store:group-title" });
@@ -97,6 +113,77 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
             setLoading(false);
         }
     }
+    /**
+     * Save the selection rules.
+     *
+     * 🛑 An empty input sends `null`, not an omitted key — "no limit" has to be
+     * expressible. The route writes only keys PRESENT in the body, so omitting
+     * one means "leave it alone", which is the opposite of what clearing a field
+     * means. Those are two different intents and the body has to carry both.
+     */
+    async function saveRules() {
+        setLoading(true);
+        try {
+            const n = (v) => (v.trim() === "" ? null : Number(v));
+            await apiClient.patch(groupEndpoint, {
+                groupMinMembers: n(ruleDraft.min),
+                groupMaxMembers: n(ruleDraft.max),
+                groupMaxUnitsPerMember: n(ruleDraft.perMember),
+                groupDiscountPercent: n(ruleDraft.discount),
+            });
+            showToast("Group rules saved.", "success");
+            onGroupChanged();
+        }
+        catch (e) {
+            void normalizeError(e);
+            showToast(e?.message ?? "Failed to save group rules.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    /**
+     * Save stock and made-to-order across the group.
+     *
+     * 🛑 Sends ONLY the rows the admin touched. Sending every member would make
+     * an untouched draft child's stock a write on every save — and the route
+     * refuses an entry that names neither field anyway, so a blanket send would
+     * 400 as soon as one row was left alone.
+     */
+    async function saveGroupStock() {
+        const touched = new Set([...Object.keys(stockDraft), ...Object.keys(motDraft)]);
+        if (touched.size === 0) {
+            showToast("Nothing changed.", "info");
+            return;
+        }
+        setLoading(true);
+        try {
+            const res = (await apiClient.patch(`${groupEndpoint}/stock`, {
+                members: [...touched].map((productId) => ({
+                    productId,
+                    ...(stockDraft[productId] !== undefined && stockDraft[productId].trim() !== ""
+                        ? { stockQuantity: Number(stockDraft[productId]) }
+                        : {}),
+                    ...(motDraft[productId] !== undefined ? { madeToOrder: motDraft[productId] } : {}),
+                })),
+            }));
+            const rejected = res.data?.rejected?.length ?? 0;
+            showToast(rejected > 0
+                ? `Saved, but ${rejected} listing${rejected === 1 ? "" : "s"} could not be updated.`
+                : "Group stock saved.", rejected > 0 ? "warning" : "success");
+            setStockDraft({});
+            setMotDraft({});
+            void loadChildren();
+            onGroupChanged();
+        }
+        catch (e) {
+            void normalizeError(e);
+            showToast(e?.message ?? "Failed to save group stock.", "error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }
     async function startGroup() {
         setLoading(true);
         try {
@@ -264,7 +351,8 @@ export function GroupSettingsPanel({ productId, productSlug, groupId, isGroupPar
                     setOpen(next);
                     if (next && isGroupParent && children === null)
                         loadChildren();
-                }, paddingX: "none", paddingY: "xs", justify: "between", className: "w-full text-left group", "aria-expanded": open, children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", color: "muted", children: "Group Settings" }), _jsx(Span, { size: "xs", className: "group-hover:text-[var(--appkit-color-text-muted)] dark:group-hover:text-[var(--appkit-color-text-faint)] transition-colors", color: "faint", children: open ? "▲" : "▼" })] }), open && (_jsxs(Stack, { gap: "sm", className: `mt-3 ${__P.p4}`, surface: "muted", rounded: "lg", border: "default", children: [!groupId && !groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Group related listings together \u2014 e.g. a set, bundle, or multi-part item. Parts can be sold individually but shown together." }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: startGroup, isLoading: loading, children: "Start a group" })] })), isGroupParent && groupId && (_jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: titleShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: titleSections, values: titleDraft, onChange: (partial) => setTitleDraft((d) => ({ ...d, ...partial })), onSubmit: () => void saveTitle(), onValidationChange: () => titleForm.validate(titleDraft), schema: groupTitleSchema, openIds: titleNav.openIds, onOpenChange: titleNav.setOpenIds, submitLabel: "Save title", isLoading: loading })] }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-2", color: "muted", size: "xs", weight: "semibold", children: ["Members (", childSlugsCount + 1, " \u2014 including this listing)"] }), loading && !children ? (_jsx(Text, { size: "xs", color: "faint", children: "Loading\u2026" })) : (_jsxs(Div, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", children: [_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [_jsx(Span, { padding: "pill-2xs", weight: "semibold", className: "bg-[var(--appkit-color-primary)]/10 text-[var(--appkit-color-primary)] text-[10px]", rounded: "default", children: "Parent" }), _jsx(Text, { className: "flex-1", color: "primary", size: "sm", children: productSlug })] }), (children ?? []).filter((c) => c.id !== productId).map((child) => (_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [child.images?.[0] ? (_jsx(Div, { className: "relative w-8 h-8 flex-shrink-0 border border-[var(--appkit-color-border)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: child.images[0], alt: child.title, size: "thumbnail" }) })) : (_jsx(Div, { className: "w-8 h-8", surface: "subtle", rounded: "full" })), _jsx(Text, { className: "flex-1 truncate", color: "primary", size: "sm", children: child.title }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => requestUnlinkChild(child.id), isLoading: loading, className: `${CLS_DELETE_LINK} text-[length:var(--appkit-text-xs)]`, children: "Unlink" })] }, child.id)))] }))] }), _jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setShowAddModal(true), children: "Add child listing" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestDissolveGroup, isLoading: loading, className: CLS_DELETE_LINK, children: "Dissolve group" })] })] })), !isGroupParent && groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Part of:", " ", _jsx(Span, { weight: "medium", color: "primary", children: groupTitle ?? groupParentSlug })] }), _jsxs(Text, { size: "xs", color: "muted", children: ["Parent listing: ", _jsx(Code, { className: "font-mono", children: groupParentSlug })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestLeaveGroup, isLoading: loading, className: `${CLS_DELETE_LINK} w-fit`, children: "Leave group" })] }))] })), (() => {
+                }, paddingX: "none", paddingY: "xs", justify: "between", className: "w-full text-left group", "aria-expanded": open, children: [_jsx(Heading, { level: 3, size: "sm", weight: "semibold", color: "muted", children: "Group Settings" }), _jsx(Span, { size: "xs", className: "group-hover:text-[var(--appkit-color-text-muted)] dark:group-hover:text-[var(--appkit-color-text-faint)] transition-colors", color: "faint", children: open ? "▲" : "▼" })] }), open && (_jsxs(Stack, { gap: "sm", className: `mt-3 ${__P.p4}`, surface: "muted", rounded: "lg", border: "default", children: [!groupId && !groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Group related listings together \u2014 e.g. a set, bundle, or multi-part item. Parts can be sold individually but shown together." }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: startGroup, isLoading: loading, children: "Start a group" })] })), isGroupParent && groupId && (_jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: titleShellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: titleSections, values: titleDraft, onChange: (partial) => setTitleDraft((d) => ({ ...d, ...partial })), onSubmit: () => void saveTitle(), onValidationChange: () => titleForm.validate(titleDraft), schema: groupTitleSchema, openIds: titleNav.openIds, onOpenChange: titleNav.setOpenIds, submitLabel: "Save title", isLoading: loading })] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "semibold", children: "Selection rules" }), _jsxs(Grid, { cols: 2, gap: "sm", children: [_jsx(FieldInput, { name: "groupMinMembers", label: "Min items in a selection", type: "number", value: ruleDraft.min, onChange: (v) => setRuleDraft((d) => ({ ...d, min: v })), hint: "Blank = no minimum" }), _jsx(FieldInput, { name: "groupMaxMembers", label: "Max items in a selection", type: "number", value: ruleDraft.max, onChange: (v) => setRuleDraft((d) => ({ ...d, max: v })), hint: "Blank = no maximum" }), _jsx(FieldInput, { name: "groupMaxUnitsPerMember", label: "Max units of any one item", type: "number", value: ruleDraft.perMember, onChange: (v) => setRuleDraft((d) => ({ ...d, perMember: v })), hint: "Blank = no per-item cap" }), _jsx(FieldInput, { name: "groupDiscountPercent", label: "Group discount (%)", type: "number", value: ruleDraft.discount, onChange: (v) => setRuleDraft((d) => ({ ...d, discount: v })), hint: "Off the selection subtotal. Applies to new cart lines; a line already in a cart keeps the price it was quoted and is re-checked at checkout." })] }), _jsx(Button, { type: "button", variant: "secondary", size: "sm", className: "mt-2", onClick: () => void saveRules(), isLoading: loading, children: "Save rules" })] }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-2", color: "muted", size: "xs", weight: "semibold", children: ["Members (", childSlugsCount + 1, " \u2014 including this listing)"] }), _jsx(Text, { className: "mb-2", color: "faint", size: "xs", children: "Each listing has its own stock. Editing here saves them together \u2014 it does not pool them." }), loading && !children ? (_jsx(Text, { size: "xs", color: "faint", children: "Loading\u2026" })) : (_jsxs(Div, { className: "divide-y divide-zinc-100 divide-[var(--appkit-color-border-subtle)]", children: [_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [_jsx(Span, { padding: "pill-2xs", weight: "semibold", className: "bg-[var(--appkit-color-primary)]/10 text-[var(--appkit-color-primary)] text-[10px]", rounded: "default", children: "Parent" }), _jsx(Text, { className: "flex-1", color: "primary", size: "sm", children: productSlug })] }), (children ?? []).filter((c) => c.id !== productId).map((child) => (_jsxs(Row, { align: "center", gap: "sm", padding: "y-xs", children: [child.images?.[0] ? (_jsx(Div, { className: "relative w-8 h-8 flex-shrink-0 border border-[var(--appkit-color-border)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: child.images[0], alt: child.title, size: "thumbnail" }) })) : (_jsx(Div, { className: "w-8 h-8", surface: "subtle", rounded: "full" })), _jsx(Text, { className: "flex-1 truncate", color: "primary", size: "sm", children: child.title }), child.status && child.status !== "published" ? (_jsx(Span, { size: "xs", surface: "warning-surface", className: "text-warning", padding: "pill-2xs", rounded: "default", children: child.status })) : null, (motDraft[child.id] ?? child.madeToOrder) === true ? (_jsx(Text, { size: "xs", color: "muted", children: "Made to order" })) : (_jsx(Input, { type: "number", "aria-label": `Stock for ${child.title}`, className: "w-20", value: stockDraft[child.id] ??
+                                                            (child.availableQuantity ?? 0).toString(), onChange: (e) => setStockDraft((d) => ({ ...d, [child.id]: e.target.value })) })), _jsx(Checkbox, { label: "MTO", "aria-label": `Made to order for ${child.title}`, checked: motDraft[child.id] ?? child.madeToOrder === true, onChange: (e) => setMotDraft((d) => ({ ...d, [child.id]: e.target.checked })) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => requestUnlinkChild(child.id), isLoading: loading, className: `${CLS_DELETE_LINK} text-[length:var(--appkit-text-xs)]`, children: "Unlink" })] }, child.id)))] })), (children ?? []).length > 0 && (_jsx(Button, { type: "button", variant: "secondary", size: "sm", className: "mt-2", onClick: () => void saveGroupStock(), isLoading: loading, children: "Save group stock" }))] }), _jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => setShowAddModal(true), children: "Add child listing" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestDissolveGroup, isLoading: loading, className: CLS_DELETE_LINK, children: "Dissolve group" })] })] })), !isGroupParent && groupParentSlug && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Part of:", " ", _jsx(Span, { weight: "medium", color: "primary", children: groupTitle ?? groupParentSlug })] }), _jsxs(Text, { size: "xs", color: "muted", children: ["Parent listing: ", _jsx(Code, { className: "font-mono", children: groupParentSlug })] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: requestLeaveGroup, isLoading: loading, className: `${CLS_DELETE_LINK} w-fit`, children: "Leave group" })] }))] })), (() => {
                 const content = (_jsx(AddChildContent, { addTab: addTab, setAddTab: setAddTab, createForm: createForm, setCreateForm: setCreateForm, productSlug: productSlug, storeProductsEndpoint: storeProductsEndpoint, linkTargets: linkTargets, setLinkTargets: setLinkTargets, onAddCreate: addCreateChild, onAddLink: addLinkChild, loading: loading }));
                 const close = () => setShowAddModal(false);
                 return (groupChildSlugs?.length ?? 0) >= 4 ? (_jsx(SideDrawer, { isOpen: showAddModal, onClose: close, title: "Add child listing", children: content })) : (_jsx(Modal, { open: showAddModal, onClose: close, title: "Add child listing", size: "lg", children: content }));

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

@@ -29,6 +29,10 @@ export function ListingBottomActions({ listingType, anchorId, price, currency, u
             })),
             infoLabel,
             desktop: "after-scroll",
+            // The element the CTA scrolls to IS this page's inline buy panel, so
+            // it doubles as the dock's reveal gate — no extra prop at any of the
+            // five listing types that share this registrar.
+            ctaAnchorId: anchorId,
         });
     return null;
 }

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

@@ -131,5 +131,5 @@ export async function PrizeDrawDetailPageView({ id, initialPrizeDraw, currentUse
                     price: pricePerEntry,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRIZE_DRAWS), className: "hover:text-primary-600 transition-colors", children: "Prize Draws" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(PrizeDrawCollage, { items: items, hideWonState: true })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: "Prize Draw" }), _jsx(Span, { size: "xs", weight: "semibold", className: `inline-block ${statusClass(revealStatus)}`, padding: "pill-sm", rounded: "full", children: statusLabel(revealStatus) }), maxPerUser !== null && (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Limit: ", maxPerUser, " entries per customer"] })), maxPerUser !== null && userEntriesUsed !== null && (_jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: ["You have used ", userEntriesUsed, "/", maxPerUser] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsx(Div, { className: `${__P.p4}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Entries" }), _jsxs(Text, { size: "sm", weight: "semibold", children: [current, " / ", max, " (", remaining, " left)"] })] }), revealStart && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window opens" }), _jsx(Text, { size: "sm", weight: "medium", children: revealStart.toLocaleString() })] })), revealEnd && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window closes" }), _jsx(Text, { size: "sm", weight: "medium", children: revealEnd.toLocaleString() })] }))] }) }), 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 })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 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" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { 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 })), renderBuyBar: () => (_jsx(Div, { padding: "5", id: "prize-draw-buy-bar", border: "subtle", surface: "muted", rounded: "xl", children: _jsx(PrizeDrawEntryActions, { productId: String(product.id), productSlug: slug, title: title, pricePerEntry: pricePerEntry, currency: currency, remainingEntries: remaining, revealStatus: revealStatus, prizeGithubFileUrl: githubUrl }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(PrizeDrawBottomActions, { pricePerEntry: pricePerEntry, currency: currency, closed: revealStatus === "closed" || remaining === 0 })] })] }));
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-text-muted)] flex-wrap", children: [_jsx(Link, { href: String(ROUTES.HOME), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.PRIZE_DRAWS), className: "hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Prize Draws" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(PrizeDrawCollage, { items: items, hideWonState: true })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: "Prize Draw" }), _jsx(Span, { size: "xs", weight: "semibold", className: `inline-block ${statusClass(revealStatus)}`, padding: "pill-sm", rounded: "full", children: statusLabel(revealStatus) }), maxPerUser !== null && (_jsxs(Span, { size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", children: ["Limit: ", maxPerUser, " entries per customer"] })), maxPerUser !== null && userEntriesUsed !== null && (_jsxs(Span, { size: "xs", weight: "semibold", className: CLS_PRIZE_BADGE, children: ["You have used ", userEntriesUsed, "/", maxPerUser] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title })] }), _jsx(Div, { className: `${__P.p4}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Entries" }), _jsxs(Text, { size: "sm", weight: "semibold", children: [current, " / ", max, " (", remaining, " left)"] })] }), revealStart && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window opens" }), _jsx(Text, { size: "sm", weight: "medium", children: revealStart.toLocaleString() })] })), revealEnd && (_jsxs(Row, { justify: "between", align: "center", children: [_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Reveal window closes" }), _jsx(Text, { size: "sm", weight: "medium", children: revealEnd.toLocaleString() })] }))] }) }), 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 })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 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" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { 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 })), renderBuyBar: () => (_jsx(Div, { padding: "5", id: "prize-draw-buy-bar", border: "subtle", surface: "muted", rounded: "xl", children: _jsx(PrizeDrawEntryActions, { productId: String(product.id), productSlug: slug, title: title, pricePerEntry: pricePerEntry, currency: currency, remainingEntries: remaining, revealStatus: revealStatus, prizeGithubFileUrl: githubUrl }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(PrizeDrawBottomActions, { pricePerEntry: pricePerEntry, currency: currency, closed: revealStatus === "closed" || remaining === 0 })] })] }));
 }

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

@@ -12,7 +12,21 @@ export interface PrizeDrawEntryActionsProps {
  * 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 declare function PrizeDrawEntryActions({ productId, productSlug, title, pricePerEntry, currency, remainingEntries, revealStatus, prizeGithubFileUrl, }: PrizeDrawEntryActionsProps): import("react").JSX.Element;

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,10 +24,13 @@ 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 { 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";
@@ -38,7 +41,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";
@@ -88,6 +91,46 @@ 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;
@@ -102,8 +145,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;
     /*
@@ -221,9 +280,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
@@ -297,9 +353,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",
@@ -319,7 +383,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 }), 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", 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,
@@ -352,11 +416,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",