@mohasinac/appkit 4.71.0 → 4.71.2

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

@@ -17,9 +17,10 @@ import { parseSelectedListingTypes } from "../utils/listing-type.js";
 import { isListingTypeEnabled } from "../../../_internal/shared/listing-types/feature-flags.js";
 import { siteSettingsRepository } from "../../admin/repository/site-settings.repository.js";
 import { safeRead } from "../../../errors/safe-read.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const DEFAULT_PAGE_SIZE = 24;
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
-export async function ProductsIndexPageView({ searchParams = {} }) {
+export async function ProductsIndexPageView({ searchParams = {}, pageRegionCards = [], }) {
     // The availability scope is derived from the same helper the client reads
     // its default from — a hardcoded default here would disagree with the
     // client, and `staleTime: Infinity` would freeze that disagreement
@@ -30,12 +31,12 @@ export async function ProductsIndexPageView({ searchParams = {} }) {
     // an inbound link from before /products was narrowed) must be sent to the
     // dedicated page that owns them. Without this, `narrowed = selected ∩ span`
     // is empty and listPublicProducts falls back to the FULL span — so
-    // /products?listingType=auction would silently render the general catalogue
-    // and look like the auctions had vanished.
+    // /products?listingType=collector-drop would silently render the general catalogue
+    // and look like the collector drops had vanished.
     //
     // Only redirect when the out-of-span types agree on one destination: `art`
     // and `stickers` both point at /art, so that pair still resolves, whereas
-    // auction+pre-order genuinely has no single home and is better served by
+    // collector drop+pre-order genuinely has no single home and is better served by
     // dropping the filter.
     const outOfSpan = selectedTypes.filter((t) => !GENERIC_PRODUCT_LISTING_TYPES.includes(t));
     if (outOfSpan.length > 0 && outOfSpan.length === selectedTypes.length) {
@@ -43,7 +44,7 @@ export async function ProductsIndexPageView({ searchParams = {} }) {
         if (destinations.size === 1) {
             const [destination] = [...destinations];
             // Carry the search term only. Sort keys are per-type (Root Cause #63) —
-            // forwarding a /products sort to /auctions would name a field that page's
+            // forwarding a /products sort to /collector-drops would name a field that page's
             // config never offers, which drops the sort silently rather than loudly.
             const q = searchParams[TABLE_KEYS.QUERY];
             const term = (Array.isArray(q) ? q[0] : q)?.trim();
@@ -67,7 +68,7 @@ export async function ProductsIndexPageView({ searchParams = {} }) {
          * query would spend a round trip against Rule #6's budget for one link.
          *
          * 🛑 `safeRead`, so a settings failure hides the banner rather than
-         * failing the catalogue. Auctions have their own nav entry and their own
+         * failing the catalogue. Collector Drops have their own nav entry and their own
          * page; the banner is a shortcut, and a shortcut is the correct thing to
          * lose when its gate cannot be evaluated.
          */
@@ -78,17 +79,17 @@ export async function ProductsIndexPageView({ searchParams = {} }) {
         }),
     ]);
     /*
-     * 🛑 Auctions are a LISTING TYPE an admin can switch off, and this banner
+     * 🛑 Collector Drops are a LISTING TYPE an admin can switch off, and this banner
      * advertised them unconditionally.
      *
-     * Every other auction entry point already respects the flag — the navbar
+     * Every other collector drop entry point already respects the flag — the navbar
      * child (filtered by key in `LayoutShellClient`), the footer link
      * (`FOOTER_LINK_LISTING_TYPES`), the store tabs (`tabs.ts`), the
      * category/brand tabs, and the homepage section (`gatedListing`). This was
      * the one surface left promoting a page that renders nothing on a site with
-     * auctions disabled, which is Root Cause #37's dead-link shape reached from
+     * collector drops disabled, which is Root Cause #37's dead-link shape reached from
      * the other direction.
      */
-    const showAuctionsBanner = isListingTypeEnabled("auction", settings);
-    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Products" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Discover amazing products and deals" }), showAuctionsBanner && (_jsx(Div, { className: "mt-3", children: _jsx(TextLink, { variant: "bare", href: String(ROUTES.PUBLIC.AUCTIONS), rounded: "full", paddingX: "sm", paddingY: "2xs", size: "xs", weight: "medium", layout: "inline-flex", align: "center", gap: "sm", className: "border border-primary/30 bg-primary/10 text-primary-700 dark:text-primary-400 hover:bg-primary/15 transition-colors", children: "\uD83C\uDFF7\uFE0F Looking for unique deals? Browse Auctions \u2192" }) }))] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing, { initialData: products ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
+    const showCollectorDropsBanner = isListingTypeEnabled("collector-drop", settings);
+    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Products" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Discover amazing products and deals" }), showCollectorDropsBanner && (_jsx(Div, { className: "mt-3", children: _jsx(TextLink, { variant: "bare", href: String(ROUTES.PUBLIC.COLLECTOR_DROPS), rounded: "full", paddingX: "sm", paddingY: "2xs", size: "xs", weight: "medium", layout: "inline-flex", align: "center", gap: "sm", className: "border border-primary/30 bg-primary/10 text-primary-700 dark:text-primary-400 hover:bg-primary/15 transition-colors", children: "\uD83C\uDFF7\uFE0F Looking for unique deals? Browse Collector Drops \u2192" }) }))] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdminComposableRegion, { pageId: "products-index", initialCards: pageRegionCards }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing, { initialData: products ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] })] }));
 }

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

@@ -1,3 +1,4 @@
+import { type WidgetInstance } from "../../../ui/widgets";
 import type { ProductItem } from "../types";
 export interface RelatedItemsSectionProps {
     relatedItems: ProductItem[];
@@ -7,10 +8,89 @@ export interface RelatedItemsSectionProps {
     categoryLabel?: string;
     brandLabel?: string;
     storeLabel?: string;
+    /**
+     * Stored widget instances for the `products-slug:related` region.
+     *
+     * Omitted → this component reads them itself via `getWidgetInstances` and
+     * merges them onto `RELATED_DEFAULT_INSTANCES`. Supply it only to bypass
+     * that read (a caller that already has them, or a test).
+     *
+     * 🛑 Absent STORED rows still mean the template default, which reproduces
+     * the four carousels this component used to hardcode. That is the
+     * sparse-by-absence guarantee the cost model rests on
+     * (docs/overhaul/widget-architecture.md §12.4): a page with nothing
+     * configured renders byte-identically to before the widget system existed.
+     */
+    instances?: readonly WidgetInstance[];
 }
 /**
  * The same-shape "More in category / More by brand / You might also like /
  * More from store" carousel stack, shared by every listing-type detail page
- * that surfaces computeRelatedItems() results.
+ * that surfaces `computeRelatedItems()` results.
+ *
+ * ---------------------------------------------------------------------------
+ * 🛑 WHAT CHANGED, AND WHY IT IS NOT A SECOND MECHANISM
+ * ---------------------------------------------------------------------------
+ *
+ * This file used to be four JSX branches that differed ONLY in which array
+ * they read and what heading they printed:
+ *
+ *   {relatedItems.length   > 0 && <RelatedProductsCarousel items={relatedItems}   title={`More in ${categoryLabel}`} />}
+ *   {relatedByBrand.length > 0 && <RelatedProductsCarousel items={relatedByBrand} title={`More by ${brandLabel}`} />}
+ *   {relatedByTags.length  > 0 && <RelatedProductsCarousel items={relatedByTags}  title="You might also like" />}
+ *   {relatedByStore.length > 0 && <RelatedProductsCarousel items={relatedByStore} title={`More from ${storeLabel}`} />}
+ *
+ * i.e. four hardcoded instances of one widget, where the difference was pure
+ * configuration. The owner named all four of them as widgets by name
+ * ("horizontal scrollers, related items, recommendations, sellers other
+ * items"), so they are now ONE registered type (`row.horizontalScroller`) with
+ * four config instances resolved through `resolveWidgetTree`.
+ *
+ * ## This reuses the `functionalSlot` pattern rather than competing with it
+ *
+ * `functionalSlot` (`recent-entry.ts`, piloted on this very page's offer and
+ * buy actions) already answers the hard half of config-driven rendering:
+ * **config decides placement, the PAGE supplies the live content**, threaded
+ * down as a `Partial<Record<SlotId, ReactNode>>` map, with an honest
+ * "not available on this page" fallback for an id the page cannot serve.
+ *
+ * The four `ProductItem[]` props here are exactly that map, one level earlier:
+ * the page has already fetched them server-side, and config picks WHICH of
+ * them a given scroller reads via its closed `source` vocabulary. So this is
+ * the same mechanism applied to data instead of to nodes — deliberately not a
+ * second way of getting page state into a configured widget. A widget whose
+ * `source` resolves to an empty array renders nothing, which is the same
+ * behaviour the `.length > 0` guards gave.
+ *
+ * ## What is NOT duplicated
+ *
+ * The whole-block on/off switch stays where it already is — the
+ * `SectionVisibilityGate surfaceId="pdp-sections" sectionKey="related"` that
+ * wraps this component in `ProductDetailPageView`. That is a different GRAIN
+ * (the entire related block) from a widget instance's `state` (one carousel),
+ * so they are one switch each, not two switches for one thing. 🚩 When the
+ * `widgetInstances` collection lands, the region instance should carry
+ * `aliases: ["pdp-sections:related"]` so the existing admin toggle keeps
+ * resolving — the §4.4 rule, because re-deriving that key is precisely the
+ * nav-badge trap.
+ *
+ * ## One region id is SHARED by all seven detail-page views, deliberately
+ *
+ * This component is rendered by seven views — product, clearance, classified,
+ * collector-drop, digital-code, live and pre-order — and they all resolve the
+ * single `products-slug:related` region, so configuring the related rail
+ * changes it on all seven at once.
+ *
+ * That is the EXISTING convention here, not a new compromise: all seven of
+ * those views already call `getFieldVisibility("pdp-sections")` with the same
+ * literal surface id (verified: 7 call sites, one id), so the related block's
+ * on/off switch is already shared across them. Giving each view its own region
+ * id would introduce a divergence from a convention the admin UI already
+ * exposes, which is the opposite of what this work is for.
+ *
+ * 🚩 Flagged as an owner decision rather than assumed to be settled: if the
+ * related rail should be configurable PER listing type, that is a region id
+ * per view plus seven default instance lists — real work, and a change to how
+ * `pdp-sections` already behaves. Not done unilaterally.
  */
-export declare function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, }: RelatedItemsSectionProps): import("react").JSX.Element | null;
+export declare function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, instances, }: RelatedItemsSectionProps): Promise<import("react").JSX.Element | null>;

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

@@ -1,17 +1,160 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from "../../../ui/components/Layout.js";
+import { PILOT_REGIONS, PILOT_WIDGET_DEFS, RELATED_DEFAULT_INSTANCES, asRelatedScrollerConfig, mergedInstances, resolveScrollerTitle, resolveWidgetTree, } from "../../../ui/widgets/index.js";
+import { getWidgetInstances } from "../../../_internal/server/features/widgets/widget-instances.js";
 import { RelatedProductsCarousel } from "./RelatedProductsCarousel.js";
+import { EditableWidget } from "../../dashboard/components/EditableWidget.js";
+/** The region every listing-type detail view resolves for its related rail. See the note on sharing below. */
+const RELATED_REGION_ID = "products-slug:related";
 /**
  * The same-shape "More in category / More by brand / You might also like /
  * More from store" carousel stack, shared by every listing-type detail page
- * that surfaces computeRelatedItems() results.
+ * that surfaces `computeRelatedItems()` results.
+ *
+ * ---------------------------------------------------------------------------
+ * 🛑 WHAT CHANGED, AND WHY IT IS NOT A SECOND MECHANISM
+ * ---------------------------------------------------------------------------
+ *
+ * This file used to be four JSX branches that differed ONLY in which array
+ * they read and what heading they printed:
+ *
+ *   {relatedItems.length   > 0 && <RelatedProductsCarousel items={relatedItems}   title={`More in ${categoryLabel}`} />}
+ *   {relatedByBrand.length > 0 && <RelatedProductsCarousel items={relatedByBrand} title={`More by ${brandLabel}`} />}
+ *   {relatedByTags.length  > 0 && <RelatedProductsCarousel items={relatedByTags}  title="You might also like" />}
+ *   {relatedByStore.length > 0 && <RelatedProductsCarousel items={relatedByStore} title={`More from ${storeLabel}`} />}
+ *
+ * i.e. four hardcoded instances of one widget, where the difference was pure
+ * configuration. The owner named all four of them as widgets by name
+ * ("horizontal scrollers, related items, recommendations, sellers other
+ * items"), so they are now ONE registered type (`row.horizontalScroller`) with
+ * four config instances resolved through `resolveWidgetTree`.
+ *
+ * ## This reuses the `functionalSlot` pattern rather than competing with it
+ *
+ * `functionalSlot` (`recent-entry.ts`, piloted on this very page's offer and
+ * buy actions) already answers the hard half of config-driven rendering:
+ * **config decides placement, the PAGE supplies the live content**, threaded
+ * down as a `Partial<Record<SlotId, ReactNode>>` map, with an honest
+ * "not available on this page" fallback for an id the page cannot serve.
+ *
+ * The four `ProductItem[]` props here are exactly that map, one level earlier:
+ * the page has already fetched them server-side, and config picks WHICH of
+ * them a given scroller reads via its closed `source` vocabulary. So this is
+ * the same mechanism applied to data instead of to nodes — deliberately not a
+ * second way of getting page state into a configured widget. A widget whose
+ * `source` resolves to an empty array renders nothing, which is the same
+ * behaviour the `.length > 0` guards gave.
+ *
+ * ## What is NOT duplicated
+ *
+ * The whole-block on/off switch stays where it already is — the
+ * `SectionVisibilityGate surfaceId="pdp-sections" sectionKey="related"` that
+ * wraps this component in `ProductDetailPageView`. That is a different GRAIN
+ * (the entire related block) from a widget instance's `state` (one carousel),
+ * so they are one switch each, not two switches for one thing. 🚩 When the
+ * `widgetInstances` collection lands, the region instance should carry
+ * `aliases: ["pdp-sections:related"]` so the existing admin toggle keeps
+ * resolving — the §4.4 rule, because re-deriving that key is precisely the
+ * nav-badge trap.
+ *
+ * ## One region id is SHARED by all seven detail-page views, deliberately
+ *
+ * This component is rendered by seven views — product, clearance, classified,
+ * collector-drop, digital-code, live and pre-order — and they all resolve the
+ * single `products-slug:related` region, so configuring the related rail
+ * changes it on all seven at once.
+ *
+ * That is the EXISTING convention here, not a new compromise: all seven of
+ * those views already call `getFieldVisibility("pdp-sections")` with the same
+ * literal surface id (verified: 7 call sites, one id), so the related block's
+ * on/off switch is already shared across them. Giving each view its own region
+ * id would introduce a divergence from a convention the admin UI already
+ * exposes, which is the opposite of what this work is for.
+ *
+ * 🚩 Flagged as an owner decision rather than assumed to be settled: if the
+ * related rail should be configurable PER listing type, that is a region id
+ * per view plus seven default instance lists — real work, and a change to how
+ * `pdp-sections` already behaves. Not done unilaterally.
  */
-export function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, }) {
-    if (relatedItems.length === 0 &&
-        relatedByBrand.length === 0 &&
-        relatedByTags.length === 0 &&
-        relatedByStore.length === 0) {
+export async function RelatedItemsSection({ relatedItems, relatedByBrand, relatedByTags, relatedByStore, categoryLabel, brandLabel, storeLabel, instances, }) {
+    /*
+     * 🛑 Read HERE rather than threaded down from each page, deliberately, and
+     * with direct precedent: `SectionVisibilityGate` calls `useFieldVisibility`
+     * itself per mount for exactly this reason — its own doc comment says "a
+     * page's sections aren't threaded through one shared options object the way
+     * a form's fields are".
+     *
+     * Three reasons it is right here specifically:
+     *  - SEVEN views render this component and all seven resolve the SAME
+     *    region. Threading would mean seven call sites that must agree forever,
+     *    and the first one that forgot would render a different rail from the
+     *    other six while returning 200 — invisible.
+     *  - `getWidgetInstances` is `React.cache`-wrapped on `regionId`, so seven
+     *    callers cost ONE read per request, not seven.
+     *  - It keeps the change inside this lane's territory. Threading would mean
+     *    editing six other views plus their pages.
+     *
+     * Degrades to `[]` on any read failure (`safeRead`), so a config outage
+     * falls back to the template default — i.e. to today's behaviour — never to
+     * a blank rail.
+     */
+    const stored = instances ?? (await getWidgetInstances(RELATED_REGION_ID));
+    const effective = mergedInstances(RELATED_DEFAULT_INSTANCES, stored);
+    const itemsBySource = {
+        category: relatedItems,
+        brand: relatedByBrand,
+        tags: relatedByTags,
+        store: relatedByStore,
+    };
+    const labelBySource = {
+        category: categoryLabel,
+        brand: brandLabel,
+        tags: undefined,
+        store: storeLabel,
+    };
+    const resolved = resolveWidgetTree(PILOT_WIDGET_DEFS, PILOT_REGIONS, effective, {
+        surface: "product",
+    });
+    /*
+     * In EDIT mode an admin must also see the rails that are switched OFF, or
+     * they can never turn one back on — the same "an admin can always reach what
+     * they just turned off" rule `AdminComposableRegion` already states. So the
+     * region's own nodes are kept here regardless of `visible`, and
+     * `WidgetInstanceEditor` is what renders an off one dimmed with its reason.
+     * A visitor never reaches this branch: `editMode` is false for them, so the
+     * `visible` filter below is the only thing that applies.
+     */
+    const regionNodes = resolved.roots.filter((node) => node.instance.regionId === RELATED_REGION_ID);
+    const rows = regionNodes
+        .filter((node) => node.visible)
+        .map((node) => {
+        const cfg = asRelatedScrollerConfig(node.instance.config);
+        if (!cfg)
+            return null;
+        const items = itemsBySource[cfg.source];
+        if (!items || items.length === 0)
+            return null;
+        return {
+            id: node.instance.id,
+            node,
+            title: resolveScrollerTitle(cfg, labelBySource[cfg.source]),
+            items: cfg.maxItems ? items.slice(0, cfg.maxItems) : items,
+        };
+    })
+        .filter((row) => row !== null);
+    // Identical to the original's combined emptiness guard: nothing to show
+    // means no heading, no empty frame and no grid space taken.
+    if (rows.length === 0)
         return null;
-    }
-    return (_jsxs(Stack, { gap: "xl", children: [relatedItems.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedItems, title: categoryLabel ? `More in ${categoryLabel}` : "More in this category" })), relatedByBrand.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByBrand, title: brandLabel ? `More by ${brandLabel}` : "More by this brand" })), relatedByTags.length > 0 && _jsx(RelatedProductsCarousel, { items: relatedByTags, title: "You might also like" }), relatedByStore.length > 0 && (_jsx(RelatedProductsCarousel, { items: relatedByStore, title: storeLabel ? `More from ${storeLabel}` : "More from this seller" }))] }));
+    return (_jsx(Stack, { gap: "xl", children: rows.map((row) => (_jsx(EditableWidget, { node: row.node, instances: effective, regionId: RELATED_REGION_ID, 
+            /*
+             * 🛑 The blast radius, stated on screen. This region is resolved by
+             * ALL SEVEN listing-type detail views, so an edit here is not "this
+             * product" — it is every product of every enabled type. The
+             * per-TEMPLATE invariant is what keeps the config table bounded by
+             * code (~5,210) instead of by data (~60,000 for one template), and
+             * an editor that does not say so invites exactly the per-product
+             * expectation that breaks it.
+             */
+            scopeLabel: "every product detail page", children: _jsx(RelatedProductsCarousel, { items: row.items, title: row.title }) }, row.id))) }));
 }

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

@@ -9,7 +9,7 @@ import { Span, Text } from "../../../ui/components/Typography.js";
 import { Modal } from "../../../ui/components/Modal.js";
 import { SideDrawer } from "../../../ui/components/SideDrawer.js";
 import { Button } from "../../../ui/components/Button.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { GroupMemberPicker } from "./GroupMemberPicker.js";
 import { resolveGroupMemberImage } from "../utils/group-member-image.js";
 import { readGroupRules } from "../../../_internal/shared/features/products/group-rules.js";
@@ -56,13 +56,41 @@ export function ShowGroupSection({ groupId, currentSlug, isParent, groupTitle })
     // The overlay is now a PICKER, not a read-only table: pick how many of each
     // member you want and add the whole selection as one cart line. The picker
     // stands itself down (read-only, no CTA) when the group spans sellers.
-    const tableContent = (_jsx(GroupMemberPicker, { groupId: groupId, groupSource: "product-group", members: members, 
+    const tableContent = (_jsx(GroupMemberPicker, { groupId: groupId, groupSource: "product-group", 
+        /*
+         * 🛑 THE PARENT IS NOT ONE OF THE PICKABLE ITEMS.
+         *
+         * `/api/products/group/{id}` returns the parent among the members — it
+         * carries the same `groupId` — and this component used to hand the whole
+         * array to the picker, which maps every row into a selectable stepper. So
+         * the BX-53 box appeared as an item inside its own contents, and a buyer
+         * could add the sealed box AND loose copies of what is in it as ONE cart
+         * line. Measured live 2026-11-08: the group endpoint answered 7 items, the
+         * box among them, labelled "Parent" and fully selectable.
+         *
+         * Filtered HERE and not in the endpoint, because the two consumers want
+         * different sets: the thumbnail row below deliberately keeps the parent
+         * (sorted first, badged "Set") so a child's page can navigate up to the
+         * box. Only the PICKER — the surface that writes a cart line — must
+         * exclude it.
+         *
+         * A composite is bought as itself, on its own listing, at its own price;
+         * that is what `componentStockPolicy` and `components[]` describe. It is
+         * never an item in a self-assembled selection.
+         */
+        members: members.filter((m) => !m.isGroupParent), 
         /*
          * A product group's rules live on the PARENT, and the parent is one of
          * the members this component already fetched — found by `isGroupParent`
          * rather than by position, because the endpoint makes no ordering
          * promise and the parent is not reliably first.
          *
+         * 🛑 Read from the UNFILTERED `members` on purpose. The parent is no
+         * longer pickable (above) but it is still where the rules are stored, so
+         * filtering first would silently drop every group rule — min/max members,
+         * per-member cap, required members and the group discount — and the
+         * picker would permit exactly what the server refuses.
+         *
          * 🛑 This is why the five rule fields are in `PRODUCT_PUBLIC_FIELDS`: they
          * reach `toPublicGroupMember` through that allow-list, and without it the
          * picker would silently see no rules and permit what the server refuses.

package/dist/features/products/components/SparesListView.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 SparesListViewProps {
     searchParams?: SearchParams;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function SparesListView({ searchParams }: SparesListViewProps): Promise<React.JSX.Element>;
+export declare function SparesListView({ searchParams, pageRegionCards, }: SparesListViewProps): Promise<React.JSX.Element>;
 export {};

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

@@ -9,11 +9,12 @@ import { PRODUCT_FIELDS } from "../../../constants/field-names.js";
 import { sortBy } from "../../../constants/sort.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { listPublicProducts, parsePublicProductParams, defaultAvailabilityForListingTypes, } from "../../../_internal/server/features/products/list-public.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const DEFAULT_PAGE_SIZE = 24;
 const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
 /** The one type this page spans. Named so the two call sites cannot disagree. */
 const SPARES_LISTING_TYPES = ["spares"];
-export async function SparesListView({ searchParams = {} }) {
+export async function SparesListView({ searchParams = {}, pageRegionCards = [], }) {
     /*
      * Filter semantics live in `listPublicProducts`, shared verbatim with
      * `/api/products`, so the SSR first paint and the client's refetch cannot
@@ -30,7 +31,7 @@ export async function SparesListView({ searchParams = {} }) {
         // `ProductsIndexListing` cannot mirror two different literals.
         ...defaultAvailabilityForListingTypes(SPARES_LISTING_TYPES),
     }));
-    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Spares" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Single components off disassembled tops \u2014 attack rings, weight disks, drivers, bits. Sellers list what they have spare; most are one of a kind." }), _jsxs(Text, { className: "mt-2", size: "sm", children: ["Not sure which part you need?", " ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.PARTS), children: "Browse the parts glossary" }), " ", "\u2014 every component, what it does, and which tops use it."] })] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing
+    return (_jsxs(Main, { children: [_jsx(Section, { border: "bottom-subtle", paddingY: "b-md", padding: "t-xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "bold", color: "primary", children: "Spares" }), _jsx(Text, { className: "mt-1", color: "muted", size: "sm", children: "Single components off disassembled tops \u2014 attack rings, weight disks, drivers, bits. Sellers list what they have spare; most are one of a kind." }), _jsxs(Text, { className: "mt-2", size: "sm", children: ["Not sure which part you need?", " ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.PARTS), children: "Browse the parts glossary" }), " ", "\u2014 every component, what it does, and which tops use it."] })] }) }), _jsxs(Container, { size: "xl", padding: "x-md", children: [_jsx(AdminComposableRegion, { pageId: "spares-index", initialCards: pageRegionCards }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-4 mt-4" }), _jsx(ProductsIndexListing
                     // `undefined`, not `null` — React Query treats `null` as defined
                     // data, so a failed query would freeze an empty grid forever under
                     // `staleTime: Infinity`. Same reasoning as ProductsIndexPageView.

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

@@ -7,7 +7,7 @@ import { Div } from "../../../ui/components/Div.js";
 import { PricesOnly } from "../../../ui/components/GatedPrice.js";
 import { Row } from "../../../ui/components/Layout.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 { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";

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

@@ -0,0 +1,15 @@
+export interface TrustBadgeRowItem {
+    icon: string;
+    label: string;
+}
+export interface TrustBadgeRowProps {
+    badges: TrustBadgeRowItem[];
+}
+/**
+ * The "🔒 Secure Payment / …" badge cluster at the foot of a PDP buy panel.
+ * Was byte-identical markup in `PreOrderActionsClient`, `PreOrderDetailPageView`
+ * and `ProductDetailPageView` (Duplication Decision Framework Rule-of-Three) —
+ * each with its own `badges` array, since a pre-order's trust claims differ
+ * from a standard product's.
+ */
+export declare function TrustBadgeRow({ badges }: TrustBadgeRowProps): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, Stack } from "../../../ui/components/Layout.js";
+import { Span } from "../../../ui/components/Typography.js";
+/**
+ * The "🔒 Secure Payment / …" badge cluster at the foot of a PDP buy panel.
+ * Was byte-identical markup in `PreOrderActionsClient`, `PreOrderDetailPageView`
+ * and `ProductDetailPageView` (Duplication Decision Framework Rule-of-Three) —
+ * each with its own `badges` array, since a pre-order's trust claims differ
+ * from a standard product's.
+ */
+export function TrustBadgeRow({ badges }) {
+    return (_jsx(Row, { justify: "center", gap: "md", wrap: true, children: badges.map(({ icon, label }) => (_jsxs(Stack, { color: "muted", textSize: "xs", className: "min-w-[60px]", align: "center", gap: "xs", children: [_jsx(Span, { size: "base", children: icon }), _jsx(Span, { className: "whitespace-pre-line leading-tight", children: label })] }, label))) }));
+}

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

@@ -7,24 +7,24 @@ export { ProductForm, PRODUCT_STATUS_OPTIONS } from "./ProductForm";
 export type { ProductFormProps, ProductFormValue } from "./ProductForm";
 export { NonRefundableConsentModal } from "./NonRefundableConsentModal";
 export type { NonRefundableConsentModalProps, NonRefundableListingType, } from "./NonRefundableConsentModal";
-export { PrizeDrawItemsEditor } from "./PrizeDrawItemsEditor";
-export type { PrizeDrawItemsEditorProps } from "./PrizeDrawItemsEditor";
-export { PrizeDrawCollage } from "./PrizeDrawCollage";
-export type { PrizeDrawCollageProps } from "./PrizeDrawCollage";
+export { ClearanceItemsEditor } from "./ClearanceItemsEditor";
+export type { ClearanceItemsEditorProps } from "./ClearanceItemsEditor";
+export { ClearanceCollage } from "./ClearanceCollage";
+export type { ClearanceCollageProps } from "./ClearanceCollage";
 export { PrizeRevealModal } from "./PrizeRevealModal";
 export type { PrizeRevealModalProps, PrizeRevealResult, } from "./PrizeRevealModal";
-export { PrizeDrawWinnerMappingView } from "./PrizeDrawWinnerMappingView";
-export type { PrizeDrawWinnerMappingViewProps, PrizeDrawWinnerMappingRow, } from "./PrizeDrawWinnerMappingView";
-export { MarketplacePrizeDrawCard } from "./MarketplacePrizeDrawCard";
-export type { MarketplacePrizeDrawCardProps, MarketplacePrizeDrawCardData, MarketplacePrizeDrawCardLabels, } from "./MarketplacePrizeDrawCard";
+export { ClearanceWinnerMappingView } from "./ClearanceWinnerMappingView";
+export type { ClearanceWinnerMappingViewProps, ClearanceWinnerMappingRow, } from "./ClearanceWinnerMappingView";
+export { MarketplaceClearanceCard } from "./MarketplaceClearanceCard";
+export type { MarketplaceClearanceCardProps, MarketplaceClearanceCardData, MarketplaceClearanceCardLabels, } from "./MarketplaceClearanceCard";
 export { MarketplaceBundleCard } from "./MarketplaceBundleCard";
 export type { MarketplaceBundleCardProps, MarketplaceBundleCardData, MarketplaceBundleCardLabels, } from "./MarketplaceBundleCard";
-export { PrizeDrawsIndexListing } from "./PrizeDrawsIndexListing";
-export type { PrizeDrawsIndexListingProps } from "./PrizeDrawsIndexListing";
+export { ClearanceIndexListing } from "./ClearanceIndexListing";
+export type { ClearanceIndexListingProps } from "./ClearanceIndexListing";
 export { AvailabilityTabs } from "./AvailabilityTabs";
 export type { AvailabilityTabsProps } from "./AvailabilityTabs";
-export { PrizeDrawEntryActions } from "./PrizeDrawEntryActions";
-export type { PrizeDrawEntryActionsProps } from "./PrizeDrawEntryActions";
+export { ClearanceEntryActions } from "./ClearanceEntryActions";
+export type { ClearanceEntryActionsProps } from "./ClearanceEntryActions";
 export { ProductFeaturesSelector } from "./ProductFeaturesSelector";
 export type { ProductFeaturesSelectorProps } from "./ProductFeaturesSelector";
 export { ProductFeatureBadges } from "./ProductFeatureBadges";
@@ -34,8 +34,8 @@ export { ProductFeaturesProvider, useProductFeatures, } from "./ProductFeaturesC
 export type { ProductFeaturesProviderProps } from "./ProductFeaturesContext";
 export { ProductDetailView } from "./ProductDetailView";
 export type { ProductDetailViewProps } from "./ProductDetailView";
-export { AuctionDetailView } from "./AuctionDetailView";
-export type { AuctionDetailViewProps } from "./AuctionDetailView";
+export { CollectorDropDetailView } from "./CollectorDropDetailView";
+export type { CollectorDropDetailViewProps } from "./CollectorDropDetailView";
 export { PreOrderDetailView } from "./PreOrderDetailView";
 export type { PreOrderDetailViewProps } from "./PreOrderDetailView";
 export { ProductInfo } from "./ProductInfo";
@@ -69,7 +69,7 @@ export { SublistingCarouselSection } from "./SublistingCarouselSection";
 export { ShowGroupSection } from "./ShowGroupSection";
 export { GroupSettingsPanel } from "./GroupSettingsPanel";
 export type { GroupSettingsPanelProps } from "./GroupSettingsPanel";
-export { PrizeDrawsSection } from "./PrizeDrawsSection";
-export type { PrizeDrawsSectionProps } from "./PrizeDrawsSection";
+export { ClearanceSection } from "./ClearanceSection";
+export type { ClearanceSectionProps } from "./ClearanceSection";
 export { CompareOverlay } from "./CompareOverlay";
 export type { CompareOverlayProps, CompareOverlayLabels, CompareProductLike, } from "./CompareOverlay";

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

@@ -3,26 +3,26 @@ export { ProductFilters, PRODUCT_FILTER_KEYS, PRODUCT_ADMIN_SORT_OPTIONS, PRODUC
 export { InteractiveProductCard } from "./InteractiveProductCard.js";
 export { ProductForm, PRODUCT_STATUS_OPTIONS } from "./ProductForm.js";
 export { NonRefundableConsentModal } from "./NonRefundableConsentModal.js";
-export { PrizeDrawItemsEditor } from "./PrizeDrawItemsEditor.js";
-export { PrizeDrawCollage } from "./PrizeDrawCollage.js";
+export { ClearanceItemsEditor } from "./ClearanceItemsEditor.js";
+export { ClearanceCollage } from "./ClearanceCollage.js";
 export { PrizeRevealModal } from "./PrizeRevealModal.js";
-export { PrizeDrawWinnerMappingView } from "./PrizeDrawWinnerMappingView.js";
-export { MarketplacePrizeDrawCard } from "./MarketplacePrizeDrawCard.js";
+export { ClearanceWinnerMappingView } from "./ClearanceWinnerMappingView.js";
+export { MarketplaceClearanceCard } from "./MarketplaceClearanceCard.js";
 export { MarketplaceBundleCard } from "./MarketplaceBundleCard.js";
-export { PrizeDrawsIndexListing } from "./PrizeDrawsIndexListing.js";
+export { ClearanceIndexListing } from "./ClearanceIndexListing.js";
 export { AvailabilityTabs } from "./AvailabilityTabs.js";
-// PrizeDrawsListingView + PrizeDrawDetailPageView are server components that
+// ClearanceListingView + ClearanceDetailPageView are server components that
 // import productRepository (→ firebase-admin). Re-exporting them from this
 // client-mixed barrel pulls firebase-admin into client bundles via webpack/
 // Turbopack tree-shaking gaps (see CLAUDE.md "appkit Export Rules"). Consume
 // them directly from their file paths via the appkit main index instead.
-export { PrizeDrawEntryActions } from "./PrizeDrawEntryActions.js";
+export { ClearanceEntryActions } from "./ClearanceEntryActions.js";
 export { ProductFeaturesSelector } from "./ProductFeaturesSelector.js";
 export { ProductFeatureBadges } from "./ProductFeatureBadges.js";
 export { FeatureBadge, FeatureBadgeList } from "./FeatureBadge.js";
 export { ProductFeaturesProvider, useProductFeatures, } from "./ProductFeaturesContext.js";
 export { ProductDetailView } from "./ProductDetailView.js";
-export { AuctionDetailView } from "./AuctionDetailView.js";
+export { CollectorDropDetailView } from "./CollectorDropDetailView.js";
 export { PreOrderDetailView } from "./PreOrderDetailView.js";
 export { ProductInfo } from "./ProductInfo.js";
 export { ProductTabs } from "./ProductTabs.js";
@@ -43,5 +43,5 @@ export { SublistingCategorySelect } from "./SublistingCategorySelect.js";
 export { SublistingCarouselSection } from "./SublistingCarouselSection.js";
 export { ShowGroupSection } from "./ShowGroupSection.js";
 export { GroupSettingsPanel } from "./GroupSettingsPanel.js";
-export { PrizeDrawsSection } from "./PrizeDrawsSection.js";
+export { ClearanceSection } from "./ClearanceSection.js";
 export { CompareOverlay } from "./CompareOverlay.js";

package/dist/features/products/config/listing-type-listing-config.js

@@ -19,7 +19,7 @@
  * @tag layer:config
  * @tag pattern:factory
  * @tag access:client
- * @tag consumers:AdminArtView,AdminStickersView,AdminClassifiedView,AdminDigitalCodesView,AdminLiveView
+ * @tag consumers:AdminArtAndStickersView,AdminClassifiedView,AdminDigitalCodesView,AdminLiveView
  * @tag sideEffects:none
  */
 import { SIEVE_OP, sieveAnd, sieveFilter } from "../../../utils/sieve-builder.js";