@mohasinac/appkit 4.71.0 → 4.72.0

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

@@ -21,9 +21,9 @@ import { formatPhysicalLocation } from "../../../utils/physical-location.js";
 import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags.js";
-import { isAuctionListing, isPreOrderListing, isPrizeDrawListing, normalizeListingType, } from "../utils/listing-type.js";
-import { PrizeDrawItemsEditor } from "./PrizeDrawItemsEditor.js";
-import { PRIZE_DRAW_DURATION_DAYS_MIN, PRIZE_DRAW_DURATION_DAYS_MAX, } from "../../../_internal/shared/checkout/rules/_limits.js";
+import { isCollectorDropListing, isPreOrderListing, isClearanceListing, normalizeListingType, } from "../utils/listing-type.js";
+import { ClearanceItemsEditor } from "./ClearanceItemsEditor.js";
+import { CLEARANCE_DURATION_DAYS_MIN, CLEARANCE_DURATION_DAYS_MAX, } from "../../../_internal/shared/checkout/rules/_limits.js";
 const PRIZE_REVEAL_MODE_OPTIONS = [
     { value: "instant", label: "Reveal immediately on purchase" },
     { value: "scheduled", label: "Reveal at expiry or sellout" },
@@ -31,7 +31,7 @@ const PRIZE_REVEAL_MODE_OPTIONS = [
 // ListingType uses the canonical SB1-G spellings ("standard", "pre-order");
 // ProductFeatureProductType predates it with legacy spellings for 2 values.
 // Replaces the old 2-case ternary that silently mapped every other type
-// (classified/digital-code/live/prize-draw/art/stickers) to "product".
+// (classified/digital-code/live/clearance/art/stickers) to "product".
 const LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE = {
     standard: "product",
     /*
@@ -42,14 +42,13 @@ const LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE = {
      * i.e. a brand-new type with no features at all, which reads as a bug.
      */
     spares: "product",
-    auction: "auction",
+    "collector-drop": "collector-drop",
     "pre-order": "preorder",
-    "prize-draw": "prize-draw",
+    "clearance": "clearance",
     classified: "classified",
     "digital-code": "digital-code",
     live: "live",
-    art: "art",
-    stickers: "stickers",
+    "art-and-stickers": "art-and-stickers",
 };
 export const PRODUCT_STATUS_OPTIONS = [
     { value: "draft", label: "Draft" },
@@ -259,29 +258,29 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
                         ] })] }), _jsx(Checkbox, { label: t("formInsurance"), checked: !!product.insurance, onChange: (e) => update({
                     insurance: e.target.checked,
                     insuranceCost: e.target.checked ? product.insuranceCost || 0 : undefined,
-                }), disabled: isReadonly }), product.insurance && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formInsuranceHelp"), children: t("formInsuranceHelp") }), _jsx(FormField, { name: "insuranceCost", label: t("formInsuranceCost"), type: "number", value: String(product.insuranceCost ?? ""), onChange: (value) => update({ insuranceCost: Number(value) }), disabled: isReadonly, placeholder: `${currencyPrefix}0` })] })), listingTypeFlags.auction && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionAuctionSettings") }), _jsx(Checkbox, { label: t("formIsAuction"), checked: isAuctionListing(product), onChange: (e) => update({ listingType: e.target.checked ? "auction" : "standard" }), disabled: isReadonly })] })), isAuctionListing(product) && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: t("formStartingBid"), type: "number", value: String(product.startingBid ?? ""), onChange: (value) => update({ startingBid: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "auctionEndDate", label: t("formAuctionEndDate"), type: "datetime-local", value: (() => {
-                                    const d = resolveDate(product.auctionEndDate);
+                }), disabled: isReadonly }), product.insurance && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formInsuranceHelp"), children: t("formInsuranceHelp") }), _jsx(FormField, { name: "insuranceCost", label: t("formInsuranceCost"), type: "number", value: String(product.insuranceCost ?? ""), onChange: (value) => update({ insuranceCost: Number(value) }), disabled: isReadonly, placeholder: `${currencyPrefix}0` })] })), listingTypeFlags["collector-drop"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionCollectorDropSettings") }), _jsx(Checkbox, { label: t("formIsCollectorDrop"), checked: isCollectorDropListing(product), onChange: (e) => update({ listingType: e.target.checked ? "collector-drop" : "standard" }), disabled: isReadonly })] })), isCollectorDropListing(product) && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: t("formStartingBid"), type: "number", value: String(product.startingBid ?? ""), onChange: (value) => update({ startingBid: Number(value) }), disabled: isReadonly, placeholder: "0" }), _jsx(FormField, { name: "collectorDropEndDate", label: t("formCollectorDropEndDate"), type: "datetime-local", value: (() => {
+                                    const d = resolveDate(product.collectorDropEndDate);
                                     if (!d)
                                         return "";
                                     return d.toISOString().slice(0, 16);
-                                })(), onChange: (value) => update({ auctionEndDate: value }), disabled: isReadonly })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: t("formReservePrice"), type: "number", value: String(product.reservePrice ?? ""), onChange: (value) => update({ reservePrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formReservePriceHelp") }), _jsx(FormField, { name: "buyNowPrice", label: t("formBuyNowPrice"), type: "number", value: String(product.buyNowPrice ?? ""), onChange: (value) => update({ buyNowPrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formBuyNowPriceHelp") })] }), _jsx(FormField, { name: "minBidIncrement", label: t("formMinBidIncrement"), type: "number", value: String(product.minBidIncrement ?? ""), onChange: (value) => update({ minBidIncrement: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formMinBidIncrementHelp") }), _jsx(FormField, { name: "auctionShippingPaidBy", label: t("formAuctionShippingPaidBy"), type: "select", value: product.auctionShippingPaidBy || "winner", onChange: (value) => update({
-                            auctionShippingPaidBy: value,
+                                })(), onChange: (value) => update({ collectorDropEndDate: value }), disabled: isReadonly })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: t("formReservePrice"), type: "number", value: String(product.reservePrice ?? ""), onChange: (value) => update({ reservePrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formReservePriceHelp") }), _jsx(FormField, { name: "buyNowPrice", label: t("formBuyNowPrice"), type: "number", value: String(product.buyNowPrice ?? ""), onChange: (value) => update({ buyNowPrice: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formBuyNowPriceHelp") })] }), _jsx(FormField, { name: "minBidIncrement", label: t("formMinBidIncrement"), type: "number", value: String(product.minBidIncrement ?? ""), onChange: (value) => update({ minBidIncrement: Number(value) || undefined }), disabled: isReadonly, placeholder: "0", helpText: t("formMinBidIncrementHelp") }), _jsx(FormField, { name: "collectorDropShippingPaidBy", label: t("formCollectorDropShippingPaidBy"), type: "select", value: product.collectorDropShippingPaidBy || "winner", onChange: (value) => update({
+                            collectorDropShippingPaidBy: value,
                         }), disabled: isReadonly, options: [
-                            { value: "winner", label: t("formAuctionShippingPaidByWinner") },
-                            { value: "seller", label: t("formAuctionShippingPaidBySeller") },
-                        ] }), _jsx(Text, { variant: "secondary", weight: "semibold", className: "mt-2", children: t("sectionAuctionAdvanced") }), _jsx(Checkbox, { label: t("formAutoExtendable"), checked: !!product.autoExtendable, onChange: (e) => update({ autoExtendable: e.target.checked }), disabled: isReadonly }), product.autoExtendable && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAutoExtendableHelp"), children: t("formAutoExtendableHelp") }), _jsx(FormField, { name: "auctionExtensionMinutes", label: t("formAuctionExtensionMinutes"), type: "number", value: String(product.auctionExtensionMinutes ?? 5), onChange: (value) => update({ auctionExtensionMinutes: Number(value) || 5 }), disabled: isReadonly, placeholder: "5", helpText: t("formAuctionExtensionMinutesHelp") })] }))] })), listingTypeFlags["pre-order"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionPreOrderSettings") }), _jsx(Checkbox, { label: t("formIsPreOrder"), checked: isPreOrderListing(product), onChange: (e) => update({ listingType: e.target.checked ? "pre-order" : "standard" }), disabled: isReadonly })] })), listingTypeFlags["prize-draw"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: "Prize Draw Settings" }), _jsx(Checkbox, { label: "This is a prize-draw listing", checked: isPrizeDrawListing(product), onChange: (e) => update({ listingType: e.target.checked ? "prize-draw" : "standard" }), disabled: isReadonly ||
-                            (product.prizeDrawItems ?? []).some((it) => it.isWon) })] })), isPrizeDrawListing(product) && ((() => {
+                            { value: "winner", label: t("formCollectorDropShippingPaidByWinner") },
+                            { value: "seller", label: t("formCollectorDropShippingPaidBySeller") },
+                        ] }), _jsx(Text, { variant: "secondary", weight: "semibold", className: "mt-2", children: t("sectionCollectorDropAdvanced") }), _jsx(Checkbox, { label: t("formAutoExtendable"), checked: !!product.autoExtendable, onChange: (e) => update({ autoExtendable: e.target.checked }), disabled: isReadonly }), product.autoExtendable && (_jsxs(_Fragment, { children: [_jsx(Alert, { variant: "info", title: t("formAutoExtendableHelp"), children: t("formAutoExtendableHelp") }), _jsx(FormField, { name: "collectorDropExtensionMinutes", label: t("formCollectorDropExtensionMinutes"), type: "number", value: String(product.collectorDropExtensionMinutes ?? 5), onChange: (value) => update({ collectorDropExtensionMinutes: Number(value) || 5 }), disabled: isReadonly, placeholder: "5", helpText: t("formCollectorDropExtensionMinutesHelp") })] }))] })), listingTypeFlags["pre-order"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: t("sectionPreOrderSettings") }), _jsx(Checkbox, { label: t("formIsPreOrder"), checked: isPreOrderListing(product), onChange: (e) => update({ listingType: e.target.checked ? "pre-order" : "standard" }), disabled: isReadonly })] })), listingTypeFlags["clearance"] && (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 4, className: "mt-4", children: "Clearance Settings" }), _jsx(Checkbox, { label: "This is a clearance listing", checked: isClearanceListing(product), onChange: (e) => update({ listingType: e.target.checked ? "clearance" : "standard" }), disabled: isReadonly ||
+                            (product.prizeDrawItems ?? []).some((it) => it.isWon) })] })), isClearanceListing(product) && ((() => {
                 const prizeItems = (product.prizeDrawItems ?? []);
                 const anyWon = prizeItems.some((it) => it.isWon);
                 const lockedForReveal = anyWon;
                 const fieldDisabled = isReadonly || lockedForReveal;
-                return (_jsxs(_Fragment, { children: [lockedForReveal ? (_jsx(Alert, { variant: "error", title: "Listing locked", children: "At least one prize has been revealed for this draw \u2014 the listing and its fields are now frozen. To rerun a similar draw, clone it into a new prize-draw listing." })) : null, _jsx(Alert, { variant: "warning", title: "Non-refundable", children: "Prize-draw entries are non-refundable once purchased. Buyers see and must accept this notice before paying." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "pricePerEntry", label: "Price per entry (\u20B9)", type: "number", value: product.pricePerEntry != null
+                return (_jsxs(_Fragment, { children: [lockedForReveal ? (_jsx(Alert, { variant: "error", title: "Listing locked", children: "At least one prize has been revealed for this draw \u2014 the listing and its fields are now frozen. To rerun a similar draw, clone it into a new clearance listing." })) : null, _jsx(Alert, { variant: "warning", title: "Non-refundable", children: "Clearance entries are non-refundable once purchased. Buyers see and must accept this notice before paying." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "pricePerEntry", label: "Price per entry (\u20B9)", type: "number", value: product.pricePerEntry != null
                                         ? String(product.pricePerEntry)
                                         : "", onChange: (value) => update({
                                         pricePerEntry: Math.round((parseFloat(value) || 0) * 100) / 100,
-                                    }), disabled: fieldDisabled, placeholder: "299" }), _jsx(FormField, { name: "prizeMaxEntries", label: "Max entries (pool size)", type: "number", value: String(product.prizeMaxEntries ?? ""), onChange: (value) => update({ prizeMaxEntries: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "100" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeDrawDurationDays", label: "Draw duration (days)", type: "number", value: String(product.prizeDrawDurationDays ?? ""), onChange: (value) => update({ prizeDrawDurationDays: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "7", helpText: `Draw runs this many days from publish, or until sold out — whichever comes first. ${PRIZE_DRAW_DURATION_DAYS_MIN}–${PRIZE_DRAW_DURATION_DAYS_MAX} days.` }), _jsx(FormField, { name: "prizeRevealMode", label: "Reveal mode", type: "select", value: product.prizeRevealMode ?? "scheduled", onChange: (value) => update({ prizeRevealMode: value }), disabled: fieldDisabled, options: PRIZE_REVEAL_MODE_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "maxPerUser", label: "Max entries per customer (blank = unlimited)", type: "number", value: String(product.maxPerUser ?? ""), onChange: (value) => update({ maxPerUser: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "" }), _jsx(Div, {})] }), product.prizeGithubFileUrl ? (_jsx(FormField, { name: "prizeGithubFileUrl", label: "RNG Source Code URL (read-only)", type: "text", value: product.prizeGithubFileUrl, onChange: () => { }, disabled: true, helpText: "Auto-set on first save. Public proof-of-fairness link." })) : null, _jsx(PrizeDrawItemsEditor, { items: (product.prizeDrawItems ?? []), onChange: (items) => update({ prizeDrawItems: items }), onUploadImage: (file) => 
+                                    }), disabled: fieldDisabled, placeholder: "299" }), _jsx(FormField, { name: "prizeMaxEntries", label: "Max entries (pool size)", type: "number", value: String(product.prizeMaxEntries ?? ""), onChange: (value) => update({ prizeMaxEntries: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "100" })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "prizeDrawDurationDays", label: "Draw duration (days)", type: "number", value: String(product.prizeDrawDurationDays ?? ""), onChange: (value) => update({ prizeDrawDurationDays: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "7", helpText: `Draw runs this many days from publish, or until sold out — whichever comes first. ${CLEARANCE_DURATION_DAYS_MIN}–${CLEARANCE_DURATION_DAYS_MAX} days.` }), _jsx(FormField, { name: "prizeRevealMode", label: "Reveal mode", type: "select", value: product.prizeRevealMode ?? "scheduled", onChange: (value) => update({ prizeRevealMode: value }), disabled: fieldDisabled, options: PRIZE_REVEAL_MODE_OPTIONS })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "maxPerUser", label: "Max entries per customer (blank = unlimited)", type: "number", value: String(product.maxPerUser ?? ""), onChange: (value) => update({ maxPerUser: Number(value) || undefined }), disabled: fieldDisabled, placeholder: "" }), _jsx(Div, {})] }), product.prizeGithubFileUrl ? (_jsx(FormField, { name: "prizeGithubFileUrl", label: "RNG Source Code URL (read-only)", type: "text", value: product.prizeGithubFileUrl, onChange: () => { }, disabled: true, helpText: "Auto-set on first save. Public proof-of-fairness link." })) : null, _jsx(ClearanceItemsEditor, { items: (product.prizeDrawItems ?? []), onChange: (items) => update({ prizeDrawItems: items }), onUploadImage: (file) => 
                             // Caller is expected to wire a real uploader by overriding
-                            // renderPrizeDrawImageUpload — fall back to data URL preview
+                            // renderClearanceImageUpload — fall back to data URL preview
                             // so the editor still functions in unwired admin contexts.
                             readFileAsDataUrl(file) })] }));
             })()), isPreOrderListing(product) && (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "preOrderDeliveryDate", label: t("formPreOrderDeliveryDate"), type: "datetime-local", value: (() => {
@@ -306,12 +305,12 @@ canEditTax = false, renderDescriptionEditor, renderCategorySelector, renderPrice
                     value: product.pickupAddressId || "",
                     onChange: (value) => update({ pickupAddressId: value }),
                     disabled: isReadonly,
-                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(SublistingCategorySelect, { value: product.sublistingCategoryId ?? "", onChange: (id) => update({ sublistingCategoryId: id || undefined }), disabled: isReadonly, allowCreate: true }), !isAuctionListing(product) && renderGroupJoinField?.({
+                }) })) : (_jsx(FormField, { name: "pickupAddressId", label: t("formPickupAddress"), type: "text", value: product.pickupAddressId || "", onChange: (value) => update({ pickupAddressId: value }), disabled: isReadonly })), _jsx(SublistingCategorySelect, { value: product.sublistingCategoryId ?? "", onChange: (id) => update({ sublistingCategoryId: id || undefined }), disabled: isReadonly, allowCreate: true }), !isCollectorDropListing(product) && renderGroupJoinField?.({
                 label: "Group (optional)",
                 value: product.groupId,
                 onChange: (id) => update({ groupId: id || undefined }),
                 disabled: isReadonly,
-            }), !isAuctionListing(product) && renderGroupSettings?.(product), _jsx(ProductFeaturesSelector, { value: product.features ?? [], onChange: (features) => update({ features }), productType: LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE[normalizeListingType(product)], storeId: product.storeId, disabled: isReadonly }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Custom Sections" }), _jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsxs(Div, { children: [_jsx(Toggle, { checked: !isFinalSale(product), onChange: (checked) => update({ finalSale: !checked }), disabled: isReadonly, label: "Accept change-of-mind returns" }), _jsx(Text, { className: "mt-1", size: "xs", color: "muted", children: isFinalSale(product)
+            }), !isCollectorDropListing(product) && renderGroupSettings?.(product), _jsx(ProductFeaturesSelector, { value: product.features ?? [], onChange: (features) => update({ features }), productType: LISTING_TYPE_TO_FEATURE_PRODUCT_TYPE[normalizeListingType(product)], storeId: product.storeId, disabled: isReadonly }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Custom Sections" }), _jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Add up to 3 custom tabs to your product page \u2014 e.g. \"Box Contents\", \"Compatibility\", \"Grading Details\"." }), _jsx(CustomSectionsEditor, { sections: product.customSections ?? [], onChange: (sections) => update({ customSections: sections }) })] }), _jsx(FormField, { name: "shippingInfo", label: t("formShipping"), type: "textarea", value: product.shippingInfo || "", onChange: (value) => update({ shippingInfo: value }), disabled: isReadonly, placeholder: "Shipping information..." }), _jsxs(Div, { children: [_jsx(Toggle, { checked: !isFinalSale(product), onChange: (checked) => update({ finalSale: !checked }), disabled: isReadonly, label: "Accept change-of-mind returns" }), _jsx(Text, { className: "mt-1", size: "xs", color: "muted", children: isFinalSale(product)
                             ? "Final sale (default). Not-received, damaged, wrong-item, not-as-described and counterfeit claims are still accepted."
                             : "Buyers can return this listing within the platform return window for any reason." })] }), _jsx(FormField, { name: "returnPolicy", label: t("formReturnPolicy"), type: "textarea", value: product.returnPolicy || "", onChange: (value) => update({ returnPolicy: value }), disabled: isReadonly, placeholder: "Return policy details..." }), _jsxs(Div, { children: [_jsx(Heading, { level: 3, className: "mb-1", color: "muted", size: "sm", weight: "semibold", children: "Physical Inventory" }), existingLocation ? (_jsxs(Text, { className: "mb-3", color: "muted", size: "xs", children: ["Legacy location on this listing: ", _jsx(Span, { weight: "semibold", children: existingLocation }), ". It is still printed on labels, but it is free text with no box behind it \u2014 place this item in a storage box to replace it."] })) : (_jsx(Text, { className: "mb-3", color: "muted", size: "xs", children: "Where this item is stored is recorded by placing it in a storage box, not typed here \u2014 a placement has a quantity, and one product can sit in two boxes. Use the receive station or the box's own page." }))] }), product.storeName && (_jsx(FormField, { name: "storeName", label: t("formSeller"), type: "text", value: product.storeName, onChange: () => { }, disabled: true }))] }));
 }

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

@@ -7,7 +7,7 @@ import { Button } from "../../../ui/components/Button.js";
 import { Div } from "../../../ui/components/Div.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Text } from "../../../ui/components/Typography.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 const __O = {
     hidden: "overflow-hidden",
     xAuto: "overflow-x-auto",

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

@@ -5,7 +5,7 @@ import { Div } from "../../../ui/components/Div.js";
 import { Heading, Text } from "../../../ui/components/Typography.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Badge } from "../../../ui/components/Badge.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 const __O = {
     hidden: "overflow-hidden",
 };

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

@@ -29,8 +29,25 @@ interface ProductCardProps<T extends ProductItem = ProductItem> {
      * the wrong one.
      */
     renderOwnerActions?: () => React.ReactNode;
+    /**
+     * 3B item 1b, catalogue-cards subsystem (2026-11-04) — admin hide/reorder
+     * of this card's named content blocks (title/brand/notes/storeLine/
+     * rating/priceRow). `ProductGrid` fetches these ONCE per grid via
+     * `useFieldVisibility("product-card")` and passes them down — a
+     * per-CARD fetch would mean one request per card in every grid on the
+     * site. Direct `<ProductCard>` callers outside `ProductGrid` simply omit
+     * these and render exactly as before (unconfigured defaults apply).
+     *
+     * Deliberately hide/reorder of EXISTING blocks only — no admin-defined
+     * new block, same reasoning as toolbars/bottom-bars: each block's
+     * internal guards (the "a review must exist" check, the stock-quantity
+     * gate) stay exactly as coded; only whether the WHOLE block shows, and
+     * where, is admin-controlled.
+     */
+    cardContentFields?: Record<string, boolean>;
+    cardContentOrder?: string[];
 }
-export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className, selectionMode, isSelected, onSelect, renderOwnerActions, }: ProductCardProps<T>): React.JSX.Element;
+export declare function ProductCard<T extends ProductItem = ProductItem>({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className, selectionMode, isSelected, onSelect, renderOwnerActions, cardContentFields, cardContentOrder, }: ProductCardProps<T>): React.JSX.Element;
 export interface ProductCardContext<T extends ProductItem = ProductItem> {
     onClick?: (product: T) => void;
     onWishlistToggle?: (productId: string) => void;

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

@@ -9,7 +9,7 @@ import { GatedPrice, PricesOnly } from "../../../ui/components/GatedPrice.js";
 import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
 import { PriceDisplay } from "../../../ui/components/PriceDisplay.js";
 import { Span, Text } from "../../../ui/components/Typography.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
@@ -23,6 +23,9 @@ import { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { WishlistHeartButton } from "../../wishlist/components/WishlistHeartButton.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
+import { useFieldVisibility } from "../../shell/useFieldVisibility.js";
+import { useEditMode } from "../../../edit-mode/index.js";
+import { sortByFieldOrder } from "../../shell/field-ui-meta.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -35,7 +38,38 @@ const CLS_DISCOUNT_TEXT = "mt-1 text-[11px] font-semibold text-error";
 const CLS_DISCOUNT_TEXT_BARE = "text-[10px] text-error";
 const CLS_STAR_BARE = "text-warning";
 const CLS_BID_TEXT = "text-[11px] text-error";
-export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", selectionMode = false, isSelected = false, onSelect, renderOwnerActions, }) {
+const PRODUCT_CARD_BLOCK_IDS = ["title", "brand", "notes", "storeLine", "rating", "priceRow"];
+/**
+ * The price-row block's content — extracted to a standalone function
+ * (rather than an inline closure inside `ProductCard`) purely to keep
+ * `ProductCard` under this codebase's `max-lines-per-function` lint cap.
+ * No behavior change; every value it reads was already a `ProductCard`
+ * prop or a value derived from one, now passed explicitly.
+ */
+function renderProductCardPriceRow(params) {
+    const { product, listingPlugin, featuresList, onAddToCart, onBuyNow } = params;
+    return (_jsxs(Div, { className: "mt-auto", padding: "t-xs", children: [_jsx(PriceDisplay, { amount: product.price, originalAmount: product.originalPrice, currency: getDefaultCurrency(), variant: "compact" }), (() => {
+                const stock = product.stockCount ?? product.stockQuantity ?? product.availableQuantity;
+                if (stock === undefined || !listingPlugin.showsStockQuantity)
+                    return null;
+                if (stock <= 0) {
+                    return (_jsx(Text, { className: CLS_DISCOUNT_TEXT, children: "Out of stock" }));
+                }
+                const low = stock <= 5;
+                return (_jsx(Text, { className: `mt-1 text-[11px] ${low ? "text-warning" : "text-[var(--appkit-color-text-faint)]"}`, weight: "medium", children: low ? `Only ${stock} left` : `${stock} in stock` }));
+            })(), featuresList && product.features && product.features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: product.features, features: featuresList, maxVisible: PRODUCT_FEATURE_CARD_MAX_VISIBLE, className: "mt-2" })), (onAddToCart || onBuyNow) && (_jsxs(Div, { layout: "grid", gap: "1", className: `mt-2 ${onBuyNow && onAddToCart ? "grid-cols-2" : "grid-cols-1"}`, children: [onBuyNow && (_jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            onBuyNow(product);
+                        }, className: "justify-center text-[length:var(--appkit-text-xs)] btn-glow", children: "Buy Now" })), onAddToCart && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            onAddToCart(product);
+                        }, className: "justify-center text-[length:var(--appkit-text-xs)]", children: "Cart" }))] }))] }));
+}
+export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlisted, onAddToCart, onBuyNow, className = "", selectionMode = false, isSelected = false, onSelect, renderOwnerActions, cardContentFields = {}, cardContentOrder = [], }) {
+    const isBlockVisible = (id) => cardContentFields[id] !== false;
+    const blockOrder = sortByFieldOrder([...PRODUCT_CARD_BLOCK_IDS], cardContentOrder, (id) => id);
     const discount = product.originalPrice && product.originalPrice > product.price
         ? Math.round(((product.originalPrice - product.price) / product.originalPrice) *
             100)
@@ -104,6 +138,7 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
     const handleCardClick = selectionMode
         ? (e) => { e.preventDefault(); e.stopPropagation(); onSelect?.(product.id); }
         : onClick && !href ? () => onClick(product) : undefined;
+    const renderPriceRow = () => renderProductCardPriceRow({ product, listingPlugin, featuresList, onAddToCart, onBuyNow });
     const cardBody = (_jsxs(Div, { role: selectionMode ? "checkbox" : onClick ? "button" : undefined, "aria-checked": selectionMode ? isSelected : undefined, tabIndex: selectionMode || (onClick && !href) ? 0 : undefined, onKeyDown: selectionMode
             ? (e) => (e.key === "Enter" || e.key === "") && onSelect?.(product.id)
             : onClick && !href
@@ -127,24 +162,53 @@ export function ProductCard({ product, href, onClick, onAddToWishlist, isWishlis
                             e.stopPropagation();
                             e.preventDefault();
                             onAddToWishlist(product.id);
-                        } }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3} pt-[0.625rem]`, children: [_jsx(Text, { className: `leading-snug`, truncate: 2, size: "sm", weight: "semibold", color: "primary", children: product.title }), product.brand && (_jsx(Text, { className: "mt-1", size: "xs", color: "muted", truncate: 1, children: product.brand })), cardNotes.length > 0 && (_jsx(Text, { className: "mt-1", size: "xs", color: "muted", truncate: 1, title: cardNotes.join(" · "), children: cardNotes.join(" · ") })), _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }), product.rating !== undefined && (product.reviewCount ?? 0) > 0 && (_jsxs(Row, { className: "mt-1", gap: "xs", children: [_jsx(Span, { className: CLS_STAR, children: "\u2605" }), _jsxs(Span, { className: "text-[11px]", color: "muted", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] })), _jsxs(Div, { className: "mt-auto", padding: "t-xs", children: [_jsx(PriceDisplay, { amount: product.price, originalAmount: product.originalPrice, currency: getDefaultCurrency(), variant: "compact" }), (() => {
-                                const stock = product.stockCount ?? product.stockQuantity ?? product.availableQuantity;
-                                if (stock === undefined || !listingPlugin.showsStockQuantity)
-                                    return null;
-                                if (stock <= 0) {
-                                    return (_jsx(Text, { className: CLS_DISCOUNT_TEXT, children: "Out of stock" }));
-                                }
-                                const low = stock <= 5;
-                                return (_jsx(Text, { className: `mt-1 text-[11px] ${low ? "text-warning" : "text-[var(--appkit-color-text-faint)]"}`, weight: "medium", children: low ? `Only ${stock} left` : `${stock} in stock` }));
-                            })(), featuresList && product.features && product.features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: product.features, features: featuresList, maxVisible: PRODUCT_FEATURE_CARD_MAX_VISIBLE, className: "mt-2" })), (onAddToCart || onBuyNow) && (_jsxs(Div, { layout: "grid", gap: "1", className: `mt-2 ${onBuyNow && onAddToCart ? "grid-cols-2" : "grid-cols-1"}`, children: [onBuyNow && (_jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: (e) => {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            onBuyNow(product);
-                                        }, className: "justify-center text-[length:var(--appkit-text-xs)] btn-glow", children: "Buy Now" })), onAddToCart && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: (e) => {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            onAddToCart(product);
-                                        }, className: "justify-center text-[length:var(--appkit-text-xs)]", children: "Cart" }))] }))] })] })] }));
+                        } }))] }), _jsx(Stack, { className: `flex-1 ${__P.p3} pt-[0.625rem]`, children: blockOrder.filter(isBlockVisible).map((blockId) => {
+                    switch (blockId) {
+                        case "title":
+                            return (_jsx(Text, { className: "leading-snug", truncate: 2, size: "sm", weight: "semibold", color: "primary", children: product.title }, "title"));
+                        case "brand":
+                            /*
+                             * ── Brand only. CATEGORY CHIPS ARE GONE. ─────────────────────
+                             *
+                             * 🛑 This was an IIFE computing up to three category chips plus a
+                             * "+N" overflow chip plus a brand chip, each a pill carrying its own
+                             * inline SVG — five elements and two hand-written icons on every card
+                             * in every grid. The categories were the bulk of it and the least
+                             * useful part: a shopper on a category page is already IN that
+                             * category, so the chip repeats back the page they are standing on,
+                             * and on a search grid three truncated taxonomy names crowd out the
+                             * title.
+                             *
+                             * Brand survives as PLAIN TEXT because it is a real shopping signal
+                             * and the one thing people filter by in this catalogue — but not as a
+                             * pill, and not clickable: the whole card is already a Link, so the
+                             * chip had to fake navigation with preventDefault + stopPropagation +
+                             * router.push to avoid nesting an anchor inside an anchor. A control
+                             * that has to fight its own container is a control in the wrong place;
+                             * the brand page is one click away via the detail page.
+                             */
+                            return product.brand ? (_jsx(Text, { className: "mt-1", size: "xs", color: "muted", truncate: 1, children: product.brand }, "brand")) : null;
+                        case "notes":
+                            // The five badges demoted from the image corner, as words. See the
+                            // `cardNotes` block above for why each one lost its pill.
+                            return cardNotes.length > 0 ? (_jsx(Text, { className: "mt-1", size: "xs", color: "muted", truncate: 1, title: cardNotes.join(" · "), children: cardNotes.join(" · ") }, "notes")) : null;
+                        case "storeLine":
+                            return _jsx(CardStoreLine, { storeName: product.storeName, storeId: product.storeId }, "storeLine");
+                        case "rating":
+                            /*
+                             * 🛑 A REVIEW MUST EXIST. `rating !== undefined` passes for
+                             * `rating: 0` — what a product nobody has reviewed stores — and then
+                             * the card shows a star and "0.0", which reads as a product rated
+                             * zero rather than one with no rating. Zero reviews is not zero stars,
+                             * and on a grid of cards the difference is the whole impression.
+                             */
+                            return product.rating !== undefined && (product.reviewCount ?? 0) > 0 ? (_jsxs(Row, { className: "mt-1", gap: "xs", children: [_jsx(Span, { className: CLS_STAR, children: "\u2605" }), _jsxs(Span, { className: "text-[11px]", color: "muted", children: [product.rating.toFixed(1), product.reviewCount ? ` (${product.reviewCount})` : ""] })] }, "rating")) : null;
+                        case "priceRow":
+                            return _jsx(React.Fragment, { children: renderPriceRow() }, "priceRow");
+                        default:
+                            return null;
+                    }
+                }) })] }));
     const wrapped = href && !selectionMode ? (_jsx(Link, { href: href, className: "block h-full", children: cardBody })) : (cardBody);
     /*
      * 🛑 Default, not opt-in — nothing in either repo ever passed
@@ -245,6 +309,11 @@ function safeHref(href) {
 }
 export function ProductGrid({ products, renderCard, onProductClick, getProductHref, onWishlistToggle, onAddToCart, onBuyNow, wishlistedIds, emptyLabel = "No products found", emptySlot, headerSlot, footerSlot, className = "", slots, total = 0, currentPage = 1, totalPages = 1, view = "card", selectionMode = false, selectedIds, onToggleSelect, }) {
     const isEmpty = products.length === 0;
+    // 3B item 1b, catalogue-cards subsystem — fetched ONCE per grid, not per
+    // card. See `ProductCardProps.cardContentFields`'s own doc comment.
+    const { editMode: cardEditMode } = useEditMode();
+    const { fields: cardContentFields, fieldOrder: cardContentOrder } = useFieldVisibility("product-card");
+    const effectiveCardFields = cardEditMode ? {} : cardContentFields;
     // Slot resolution: explicit props win over `slots` object
     const resolvedHeader = headerSlot ??
         (slots?.renderHeader
@@ -280,7 +349,7 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                     const cardRenderer = renderCard ?? slots?.renderCard;
                     return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                             ? renderCard(p, ctx)
-                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect }, p.id));
+                            : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect, cardContentFields: effectiveCardFields, cardContentOrder: cardContentOrder }, p.id));
                 }) }));
         }
         return (_jsx(Grid, { cols: "cards", gap: "lg", className: className, children: products.map((p, i) => {
@@ -288,7 +357,7 @@ export function ProductGrid({ products, renderCard, onProductClick, getProductHr
                 const cardRenderer = renderCard ?? slots?.renderCard;
                 return cardRenderer ? (_jsx(React.Fragment, { children: cardRenderer === renderCard
                         ? renderCard(p, ctx)
-                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect }, p.id));
+                        : slots.renderCard(p, i) }, p.id)) : (_jsx(ProductCard, { product: p, href: safeHref(getProductHref ? getProductHref(p) : undefined), onClick: onProductClick, onAddToWishlist: onWishlistToggle, onAddToCart: onAddToCart, onBuyNow: onBuyNow, isWishlisted: ctx.isWishlisted, selectionMode: selectionMode, isSelected: selectedIds?.has(p.id) ?? false, onSelect: onToggleSelect, cardContentFields: effectiveCardFields, cardContentOrder: cardContentOrder }, p.id));
             }) }));
     };
     return (_jsxs(Div, { children: [resolvedHeader, isEmpty

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

@@ -3,7 +3,7 @@ export interface ProductsIndexListingProps {
     initialData?: any;
     /** Listing types this page's "All" tab spans. Defaults to the consolidated
      * generic set (standard/classified/digital-code/live). Pass a narrower set
-     * (e.g. `["art", "stickers"]`) to reuse this component for a different
+     * (e.g. `["art-and-stickers"]`) to reuse this component for a different
      * combined browse page. */
     listingTypes?: readonly string[];
     /** Options for the "Listing type" checkbox facet in the filter drawer. `id`

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

@@ -6,10 +6,13 @@ import { useRouter } from "next/navigation.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
 import { useProducts } from "../hooks/useProducts.js";
 import { BulkActionBar } from "../../../ui/components/BulkActionBar.js";
+import { Button } from "../../../ui/components/Button.js";
 import { Div } from "../../../ui/components/Div.js";
 import { FilterDrawer } from "../../../ui/components/FilterDrawer.js";
 import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
-import { ListingToolbar } from "../../../ui/components/ListingToolbar.js";
+import { ListingToolbar, applyToggleVisibility, buildCustomToggles, } from "../../../ui/components/ListingToolbar.js";
+import { useFieldVisibility } from "../../shell/useFieldVisibility.js";
+import { useEditMode } from "../../../edit-mode/index.js";
 import { LoginRequiredModal } from "../../../ui/components/LoginRequiredModal.js";
 import { Pagination } from "../../../ui/components/Pagination.js";
 import { useToast } from "../../../ui/components/toast-context.js";
@@ -36,7 +39,7 @@ import { useProductFeatures } from "./ProductFeaturesContext.js";
 import { TABLE_KEYS, VIEW_MODE } from "../../../constants/table-keys.js";
 import { sortBy } from "../../../constants/sort.js";
 import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
-import { useBottomActions } from "../../layout/hooks/useBottomActions.js";
+import { useBottomActions } from "../../../ui/chrome/useBottomActions.js";
 import { GENERIC_PRODUCT_LISTING_TYPES, PRODUCT_TYPE_FILTER_TABS } from "../constants/listing-tabs.js";
 import { parseSelectedListingTypes } from "../utils/listing-type.js";
 import { useListingTypeFlags } from "../../../react/hooks/useListingTypeFlags.js";
@@ -55,7 +58,15 @@ const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 // drawer, counts toward the filter badge, and is cleared by Reset. It used to
 // be driven by a separate always-visible chip row that wrote the URL directly,
 // which was the one facet bypassing the Apply model everything else uses.
-const FILTER_KEYS = [TABLE_KEYS.LISTING_TYPE, TABLE_KEYS.CATEGORY, TABLE_KEYS.CONDITION, TABLE_KEYS.MIN_PRICE, TABLE_KEYS.MAX_PRICE, TABLE_KEYS.BRAND, TABLE_KEYS.STORE_ID, TABLE_KEYS.FREE_SHIPPING, TABLE_KEYS.TAGS, TABLE_KEYS.FEATURES, TABLE_KEYS.IS_PART_OF_BUNDLE];
+const BASE_FILTER_KEYS = [TABLE_KEYS.LISTING_TYPE, TABLE_KEYS.CATEGORY, TABLE_KEYS.CONDITION, TABLE_KEYS.MIN_PRICE, TABLE_KEYS.MAX_PRICE, TABLE_KEYS.BRAND, TABLE_KEYS.STORE_ID, TABLE_KEYS.FREE_SHIPPING, TABLE_KEYS.TAGS, TABLE_KEYS.FEATURES, TABLE_KEYS.IS_PART_OF_BUNDLE];
+// 3B item 1b, toolbars subsystem (2026-11-05) — the closed vocabulary an
+// admin picks from to add a NEW toolbar toggle. Every key here already has
+// a real, SIEVE_FIELDS-filterable, index-backed facet
+// (`TYPE_FACET_FIELD`/`audit-type-facet-wiring`) — never a freely-typed
+// field name, same trust boundary `AdminFilterFacets.availableFacets` uses.
+const AVAILABLE_TOGGLE_FIELDS = [
+    { key: TABLE_KEYS.IS_ON_SALE, label: "On sale" },
+];
 /**
  * The dedicated per-type browse page for a selection, when there is exactly
  * one type and that type has its own page — which carries facets this generic
@@ -86,6 +97,15 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     const [filterOpen, setFilterOpen] = useState(false);
     const [compareIds, setCompareIds] = useState([]);
     const [view, setView] = useState(table.get(TABLE_KEYS.VIEW) || VIEW_MODE.GRID);
+    /*
+     * 3B item 1b, toolbars subsystem (2026-11-03). This page's toggle row has
+     * exactly one hand-coded toggle today ("Free shipping") — `fields`/
+     * `fieldOrder` are both empty until an admin customizes this surface, so
+     * `applyToggleVisibility` is a no-op and the row renders byte-identical
+     * to before this existed.
+     */
+    const { editMode } = useEditMode();
+    const { fields: toolbarVisibilityFields, fieldOrder: toolbarFieldOrder, customFields: toolbarCustomFields, setCustomFields: setToolbarCustomFields, } = useFieldVisibility("products-index-toolbar");
     /*
      * ── What this page actually spans ────────────────────────────────────────
      *
@@ -106,15 +126,41 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
      * listing is more useful than rendering an empty one. `useListingTypeFlags`
      * already fails open while settings load, so there is no first-paint flash.
      */
+    /*
+     * 🛑 TWO SPANS, because the flag has three states and they answer two
+     * different questions here (see `useListingTypeFlags`' own table).
+     *
+     *   `enabledSpan`     — what this page QUERIES. Reads `isEnabled`, so an
+     *                       `"unlisted"` type stays in it: its listings are
+     *                       still sold and a held URL (`?listingType=clearance`)
+     *                       must keep narrowing correctly rather than silently
+     *                       widening to the full span.
+     *   `listedTypeTabs`  — what this page OFFERS as a filter option. Reads
+     *                       `isListed`, so an `"unlisted"` type is withdrawn.
+     *
+     * They were one value until review found the bug: the hook's indexed form is
+     * `isEnabled`, and `"unlisted" !== false`, so an unlisted type stayed in the
+     * type tabs and the type filter even though the whole point of the state is
+     * "no way to jump to them".
+     */
     const listingTypeFlags = useListingTypeFlags();
     const enabledSpan = useMemo(() => {
-        const kept = listingTypes.filter((t) => listingTypeFlags[t]);
+        const kept = listingTypes.filter((t) => listingTypeFlags.isEnabled(t));
         return (kept.length > 0 ? kept : listingTypes);
     }, [listingTypes, listingTypeFlags]);
-    const enabledTypeTabs = useMemo(() => {
-        const kept = typeTabs.filter((tab) => enabledSpan.includes(tab.id));
-        return kept.length > 0 ? kept : typeTabs;
-    }, [typeTabs, enabledSpan]);
+    /*
+     * 🛑 NO "fall back to every tab when the filter empties it" here, unlike
+     * `enabledSpan` above — and the asymmetry is deliberate. That fallback
+     * exists so an all-off settings document still renders a listing rather
+     * than an empty page; applied to the LISTED span it would re-offer exactly
+     * the types just withdrawn the moment every type on the page is unlisted.
+     * An empty type filter is the correct output there: the listing itself
+     * still renders, it simply offers no way to pivot by type.
+     *
+     * There is no first-paint flash to protect against either —
+     * `isListingTypeListed` treats an absent/unloaded flag as listed.
+     */
+    const listedTypeTabs = useMemo(() => typeTabs.filter((tab) => listingTypeFlags.isListed(tab.id)), [typeTabs, listingTypeFlags]);
     // ── Type filter (multi-select) ───────────────────────────────────────────
     // The URL value is a pipe-joined set; empty means "every type this page
     // spans". Unknown tokens are dropped rather than passed through to a
@@ -122,9 +168,9 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     const typeParam = table.get(TABLE_KEYS.LISTING_TYPE);
     const selectedTypes = parseSelectedListingTypes(typeParam).filter((t) => enabledSpan.includes(t));
     const effectiveTypes = (selectedTypes.length > 0 ? selectedTypes : enabledSpan);
-    // Sorts valid across every selected type. Pick Auctions alone and you get
-    // "Ending Soon"; pick Auctions + Products and you get only what both
-    // support, because a sort on `auctionEndDate` would order the products
+    // Sorts valid across every selected type. Pick Collector Drops alone and you get
+    // "Ending Soon"; pick Collector Drops + Products and you get only what both
+    // support, because a sort on `collectorDropEndDate` would order the products
     // arbitrarily (and needs an index nobody declares for that shape).
     // Price sorts are dropped for signed-out visitors for the same reason the
     // price-range facet is hidden: ordering by price discloses the relative
@@ -143,19 +189,26 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
     // keeps the SSR paint and the first refetch in agreement (Root Cause #30).
     const availability = table.get(TABLE_KEYS.AVAILABILITY) ||
         AVAILABILITY_VALUES.AVAILABLE;
-    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    // Admin-added toggle keys (toolbarCustomFields) MUST be merged in here —
+    // same Root Cause #33/#62 shape AdminFilterFacets's own header warns
+    // about, one layer up: a key absent from this array never counts toward
+    // the filter badge or gets cleared by Reset, even though the toggle
+    // itself keeps working (typeFacets reads the URL directly, not gated by
+    // this list).
+    const filterKeys = useMemo(() => [...BASE_FILTER_KEYS, ...toolbarCustomFields.map((f) => f.key)], [toolbarCustomFields]);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, filterKeys);
     // The drawer's own, uncommitted type selection. The "Full <type> filters →"
     // link tracks THIS rather than the applied URL value, so it appears the
     // moment the user ticks a single type instead of only after Apply.
     const pendingTypes = parseSelectedListingTypes(pendingTable.get(TABLE_KEYS.LISTING_TYPE)).filter((t) => enabledSpan.includes(t));
     const dedicatedPage = dedicatedPageFor(pendingTypes);
-    const listingTypeOptions = enabledTypeTabs.map((t) => ({ value: t.id, label: t.label }));
+    const listingTypeOptions = listedTypeTabs.map((t) => ({ value: t.id, label: t.label }));
     const openFilters = useCallback(() => {
         onFilterReset();
         setFilterOpen(true);
     }, [onFilterReset]);
     const applyFilters = useCallback(() => {
-        // A sort valid for the old type selection (say -auctionEndDate) can be
+        // A sort valid for the old type selection (say -collectorDropEndDate) can be
         // invalid for the new one, so it is blanked in the SAME setMany as the
         // filters — a follow-up table.set would read stale searchParams and
         // overwrite this update (Root Cause #13).
@@ -203,13 +256,20 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
         sort: effectiveSort,
         page: table.getNumber(TABLE_KEYS.PAGE, 1),
         perPage: table.getNumber(TABLE_KEYS.PAGE_SIZE, 24),
+        // Admin-added toggles (toolbarCustomFields) — each one's key is already
+        // in TYPE_FACET_FIELD (AVAILABLE_TOGGLE_FIELDS' own closed vocabulary),
+        // so this is the generic read half of buildCustomToggles' generic write
+        // half: no per-field branch needed here either.
+        typeFacets: Object.fromEntries(toolbarCustomFields
+            .map((f) => [f.key, table.get(f.key)])
+            .filter(([, v]) => v === "true")),
         // Pipe-joined OR-group — sievejs parses it as a same-field OR and the
         // Firebase adapter upgrades it to a `.where(…, "in", …)` query.
         listingType: effectiveTypes.join("|"),
         // One scope for every type. The per-type meaning of "unavailable" — sold
         // out, ended, closed, depleted — is resolved server-side from the listing
         // -type registry, which is why this no longer needs the old
-        // "only when exactly one type is selected" caveat that let ended auctions
+        // "only when exactly one type is selected" caveat that let ended collector drops
         // leak into the default /products view.
         availability,
     };
@@ -324,7 +384,7 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
                     },
                 },
             ] } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: effectiveSort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, toggles: [
+    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: searchPlaceholder, onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: handleSearchKeyDown, sortValue: effectiveSort, sortOptions: sortOptions, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, view: view, onViewChange: handleViewToggle, onResetAll: resetAll, hasActiveState: hasActiveState, bulkMode: selection.isSelecting, bulkSelectedCount: selection.selectedCount, bulkTotalCount: products.length, onBulkSelectAll: selection.toggleAll, onBulkClear: selection.clearSelection, toggles: applyToggleVisibility([
                     // "Show sold" / "Show ended" used to live here. They WIDENED the
                     // list rather than scoping it, so live and dead rows arrived mixed
                     // together and the archive was unbrowsable — replaced by the
@@ -335,7 +395,14 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
                     // → close for every toggle. The full facet set (category/price/brand/…)
                     // remains in <FilterDrawer> below.
                     { label: "Free shipping", active: table.get(TABLE_KEYS.FREE_SHIPPING) === "true", onChange: (next) => table.set(TABLE_KEYS.FREE_SHIPPING, next ? "true" : "") },
-                ] }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: effectiveTypes }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
+                    // Admin-defined NEW toggles (2026-11-05) — built generically from
+                    // whatever the admin has added via the "Add toggle" control below.
+                    ...buildCustomToggles(toolbarCustomFields, table),
+                ], 
+                // Edit mode shows every toggle regardless of stored visibility —
+                // same reasoning build-sections.tsx's own editMode branch uses: an
+                // admin re-enabling a toggle has to be able to see it first.
+                editMode ? {} : toolbarVisibilityFields, toolbarFieldOrder), editMode: editMode, availableToggleFields: AVAILABLE_TOGGLE_FIELDS, onAddToggle: (field) => setToolbarCustomFields([...toolbarCustomFields, { ...field, type: "boolean" }]), onRemoveToggle: (key) => setToolbarCustomFields(toolbarCustomFields.filter((f) => f.key !== key)) }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: effectiveTypes }) }), _jsx(BulkActionBar, { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: [
                     {
                         id: ACTION_ID.ADD_TO_CART,
                         label: ACTION_META[ACTION_ID.ADD_TO_CART].label,
@@ -380,7 +447,7 @@ export function ProductsIndexListing({ initialData, listingTypes = GENERIC_PRODU
                             setCompareIds(ids);
                         },
                     },
-                ] }), 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: () => {
+                ] }), 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) }) }) })), _jsxs(Div, { layout: "grid", gap: "8", className: "lg:grid-cols-12", children: [_jsx(Div, { className: "hidden lg:col-span-4 lg:block xl:col-span-3", children: _jsxs(Div, { rounded: "xl", border: "default", padding: "lg", 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 }), _jsxs(Row, { gap: "sm", className: "mt-4", justify: "end", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onFilterClear, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: applyFilters, children: filterActiveCount > 0 ? `Apply (${filterActiveCount})` : "Apply" })] })] }) }), _jsx(Div, { className: "lg:col-span-8 xl:col-span-9", children: _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)), 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/ProductsIndexPageView.d.ts

@@ -1,7 +1,10 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 type SearchParams = Record<string, string | string[]>;
 export interface ProductsIndexPageViewProps {
     searchParams?: SearchParams;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function ProductsIndexPageView({ searchParams }: ProductsIndexPageViewProps): Promise<React.JSX.Element>;
+export declare function ProductsIndexPageView({ searchParams, pageRegionCards, }: ProductsIndexPageViewProps): Promise<React.JSX.Element>;
 export {};