@mohasinac/appkit 4.71.0 → 4.71.2

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

@@ -4,19 +4,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * PrizeRevealModal (SB4-I, redesigned for fully-automatic reveal)
  *
  * Displays a prize-draw order's reveal state. Reveal is no longer a buyer
- * action — the winner is assigned automatically by assignPrizeDrawWinner(),
+ * action — the winner is assigned automatically by assignClearanceWinner(),
  * either the moment payment is confirmed ("instant" mode) or by a scheduled
  * Firebase Function at draw expiry/sellout ("scheduled" mode). This modal is
  * a pure display: "pending" (no result yet) or "won" (order.prizeWon is set).
  */
+import { useEffect, useState } from "react";
 import { Anchor } from "../../../ui/components/Anchor.js";
 import { Div } from "../../../ui/components/Div.js";
 import { Heading, Span, Text } from "../../../ui/components/Typography.js";
 import { Modal } from "../../../ui/components/Modal.js";
 import { PricesOnly } from "../../../ui/components/GatedPrice.js";
 import { Stack } from "../../../ui/components/Layout.js";
-import { MediaImage } from "../../media/MediaImage.js";
-import { PrizeDrawCollage } from "./PrizeDrawCollage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
+import { AnimatePresence, ScaleIn, FadeIn } from "../../../ui/components/Motion.js";
+import { Disclaimer } from "../../../ui/components/Disclaimer.js";
+import { ClearanceCollage } from "./ClearanceCollage.js";
 import { getBrandName } from "../../../core/brand-resolver.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
@@ -25,13 +28,33 @@ const PENDING_COPY = {
     instant: "Your prize is being assigned now that payment is confirmed — refresh in a moment.",
     scheduled: "This draw reveals automatically once it closes (at its expiry date) or sells out — check back here after.",
 };
+/** How long the "revealing" build-up plays before the winner pops in. */
+const REVEAL_BUILDUP_MS = 1400;
 export function PrizeRevealModal({ open, onClose, items, initialPrizeWon, revealMode = "scheduled", rngSourceUrl, }) {
     const winner = initialPrizeWon;
     const winnerImg = winner?.images?.[0];
-    return (_jsx(Modal, { isOpen: open, onClose: onClose, title: "Prize Reveal", size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(PrizeDrawCollage, { items: items, hideWonState: true }), !winner ? (
-                // audit-content-alignment-ok: informational reveal-status panel, not marketing content
-                _jsxs(Div, { className: `bg-[var(--appkit-color-bg)] ${__P.p4} text-center`, rounded: "default", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Reveal pending" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: PENDING_COPY[revealMode] })] })) : (
-                // audit-content-alignment-ok: theatrical reveal-modal centerpiece, not marketing content
-                _jsxs(Div, { className: `border-2 border-[var(--appkit-color-primary)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center`, rounded: "lg", children: [_jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "You won" }), _jsxs(Heading, { level: 2, className: "my-2", children: ["#", winner.itemNumber, " \u2014 ", winner.title] }), winnerImg ? (_jsx(Div, { className: "relative mx-auto h-64 w-64 max-w-full", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: winnerImg, alt: winner.title, size: "hero", objectFit: "contain" }) })) : null, winner.estimatedValue != null ? (_jsx(PricesOnly, { children: _jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Estimated value: \u20B9", winner.estimatedValue.toLocaleString("en-IN")] }) })) : null] })), _jsxs(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)] text-[var(--appkit-color-text-muted)]", padding: "inlineSm", rounded: "default", children: [_jsx(Span, { weight: "bold", children: "Fairness guarantee:" }), " ", "Winners are picked by ", _jsx("code", { children: "crypto.randomInt" }), " running on", getBrandName(), "'s server the moment your prize is assigned. Neither the store nor ", getBrandName(), " staff can influence the outcome.", " ", rngSourceUrl ? (_jsx(Anchor, { href: rngSourceUrl, tone: "none", underline: "always", children: "View RNG source code \u2192" })) : null] })] }) }));
+    /*
+     * Phase 5A (overhaul brief) — "a proper animated opening experience", not
+     * the abrupt conditional swap this modal shipped with. `revealed` starts
+     * false every time the modal opens WITH a winner already known (a buyer
+     * returning to an already-revealed order should still get the payoff, not
+     * just a static card) and flips true after one short build-up beat.
+     * Deliberately NOT a slot-machine/spin simulation — that would imply the
+     * outcome is still being decided, when `assignClearanceWinner()` already
+     * decided it server-side; this is a reveal of a fact, not a randomizer.
+     */
+    const [revealed, setRevealed] = useState(false);
+    useEffect(() => {
+        if (!open || !winner) {
+            setRevealed(false);
+            return;
+        }
+        const id = window.setTimeout(() => setRevealed(true), REVEAL_BUILDUP_MS);
+        return () => window.clearTimeout(id);
+        // Re-run per `open` cycle, not per winner identity — the point is to
+        // replay the beat each time this modal is opened with a known winner.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, !!winner]);
+    return (_jsx(Modal, { isOpen: open, onClose: onClose, title: "Prize Reveal", size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsx(ClearanceCollage, { items: items, hideWonState: true }), _jsx(AnimatePresence, { mode: "wait", children: !winner ? (_jsx(FadeIn, { children: _jsxs(Div, { className: `bg-[var(--appkit-color-bg)] ${__P.p4} text-center`, rounded: "default", children: [_jsx(Text, { size: "lg", weight: "semibold", children: "Reveal pending" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: PENDING_COPY[revealMode] })] }) }, "pending")) : !revealed ? (_jsx(FadeIn, { children: _jsx(Div, { className: `border-2 border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center animate-pulse`, rounded: "lg", children: _jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "Revealing your prize\u2026" }) }) }, "building")) : (_jsx(ScaleIn, { children: _jsxs(Div, { className: `border-2 border-[var(--appkit-color-primary)] bg-[var(--appkit-color-surface)] ${__P.p4} text-center`, rounded: "lg", children: [_jsx(Text, { className: "tracking-wider text-[var(--appkit-color-text-muted)]", size: "xs", transform: "uppercase", children: "You won" }), _jsxs(Heading, { level: 2, className: "my-2", children: ["#", winner.itemNumber, " \u2014 ", winner.title] }), winnerImg ? (_jsx(Div, { className: "relative mx-auto h-64 w-64 max-w-full", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: winnerImg, alt: winner.title, size: "hero", objectFit: "contain" }) })) : null, winner.estimatedValue != null ? (_jsx(PricesOnly, { children: _jsxs(Text, { className: "mt-2 text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Estimated value: \u20B9", winner.estimatedValue.toLocaleString("en-IN")] }) })) : null] }) }, "revealed")) }), _jsxs(Div, { textSize: "xs", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg)] text-[var(--appkit-color-text-muted)]", padding: "inlineSm", rounded: "default", children: [_jsx(Span, { weight: "bold", children: "Fairness guarantee:" }), " ", "Winners are picked by ", _jsx("code", { children: "crypto.randomInt" }), " running on", getBrandName(), "'s server the moment your prize is assigned. Neither the store nor ", getBrandName(), " staff can influence the outcome.", " ", rngSourceUrl ? (_jsx(Anchor, { href: rngSourceUrl, tone: "none", underline: "always", children: "View RNG source code \u2192" })) : null] }), _jsx(Disclaimer, { id: "clearance", inline: true })] }) }));
 }
 export default PrizeRevealModal;

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

@@ -14,7 +14,7 @@ import { addToGuestWishlist } from "../../wishlist/utils/guest-wishlist.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { useAuthGate } from "../../../react/hooks/useAuthGate.js";
 import { ACTION_ID } from "../constants/action-defs.js";
-import { useBottomActions } from "../../layout/hooks/useBottomActions.js";
+import { useBottomActions } from "../../../ui/chrome/useBottomActions.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { useCanSeePrices } from "../../../react/hooks/useCanSeePrices.js";
 import { normalizeError } from "../../../errors/normalize.js";

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

@@ -1,5 +1,6 @@
 import type { ProductFeatureDocument } from "../schemas/product-features";
 import { type OfferBounds } from "../../../_internal/shared/features/offers/config";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface ProductDetailPageViewProps {
     slug: string;
     /**
@@ -93,5 +94,7 @@ export interface ProductDetailPageViewProps {
      * badge they were correctly showing.
      */
     returnsEnabled?: boolean;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function ProductDetailPageView({ slug, initialProduct, renderOfferAction, renderPrimaryActions, compositionContent, productFeatures, codEnabled, emiEnabled, returnsEnabled, }: ProductDetailPageViewProps): Promise<import("react").JSX.Element>;
+export declare function ProductDetailPageView({ slug, initialProduct, renderOfferAction, renderPrimaryActions, compositionContent, productFeatures, codEnabled, emiEnabled, returnsEnabled, pageRegionCards, }: ProductDetailPageViewProps): Promise<import("react").JSX.Element>;

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

@@ -25,8 +25,6 @@ const CLS_BUNDLE_LABEL = "text-[length:var(--appkit-text-xs)] text-success dark:
 const CLS_BUNDLE_CTA = "flex-shrink-0 rounded-lg bg-success-solid hover:brightness-110 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-success-on-solid transition-colors";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { productImageUrls } from "../schemas/firestore.js";
-import { PART_SLOT_LABEL } from "../../parts/schemas/firestore.js";
-import { getModelsUsingPart } from "../../../_internal/server/features/parts/data.js";
 import { ctaAnchorProps } from "../../layout/cta-anchor.js";
 import { ContextualTrail } from "../../categories/components/ContextualTrail.js";
 import { productCrumbs, withTrailHead } from "../../categories/utils/breadcrumb-chain.js";
@@ -52,6 +50,8 @@ import { ProductFeatureBadges } from "./ProductFeatureBadges.js";
 import { isFinalSale } from "../constants/final-sale.js";
 import { FeatureBadgeList } from "./FeatureBadge.js";
 import { ShareButton } from "./ShareButton.js";
+import { TrustBadgeRow } from "./TrustBadgeRow.js";
+import { PdpSectionJumpNav } from "./PdpSectionJumpNav.js";
 import { toCustomSectionTabs } from "./CustomSectionTabContent.js";
 import { SublistingCarouselSection } from "./SublistingCarouselSection.js";
 import { ShowGroupSection } from "./ShowGroupSection.js";
@@ -61,12 +61,15 @@ import { computeRelatedItems, getReviewPageForProduct } from "../../../_internal
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel.js";
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data.js";
 import { getSiteSettingsGlobal } from "../../admin/utils/getSiteSettingsGlobal.js";
+import { getFieldVisibility } from "../../../_internal/server/features/forms/field-visibility.js";
+import { SectionVisibilityGate } from "../../shell/SectionVisibilityGate.js";
 import { safeRead } from "../../../errors/safe-read.js";
 import { canMakeOffer } from "../../../_internal/shared/listing-types/capabilities.js";
 import { closedSurfaceContext, isClosedHref, } from "../../../_internal/shared/listing-types/route-gating.js";
 import { MessageSellerButton } from "../../messages/components/MessageSellerButton.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { DEFAULT_MIN_OFFER_PERCENT, resolveOfferBounds, } from "../../../_internal/shared/features/offers/config.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -82,7 +85,7 @@ function StarRating({ value }) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export async function ProductDetailPageView({ slug, initialProduct, renderOfferAction, renderPrimaryActions, compositionContent, productFeatures, codEnabled, emiEnabled, returnsEnabled = true, }) {
+export async function ProductDetailPageView({ slug, initialProduct, renderOfferAction, renderPrimaryActions, compositionContent, productFeatures, codEnabled, emiEnabled, returnsEnabled = true, pageRegionCards = [], }) {
     // Use pre-fetched data when available to avoid a redundant repository call.
     // The page layer wraps getProductForDetail in React.cache(), so both
     // generateMetadata() and this component share the same in-flight promise.
@@ -97,26 +100,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     }
     const p = product;
     const currency = p.currency || getDefaultCurrency();
-    /*
-     * The REVERSE link: a spare names a glossary entry, so the glossary entry's
-     * page should name it back. Fetched only when both conditions hold — most
-     * listings carry no `partGlossaryId` at all, and this must not become an
-     * extra read on every product page in the catalogue.
-     *
-     * `getModelsUsingPart` does its own `safeRead`-equivalent internally
-     * (catches and logs, returns `[]`), and this wraps it in `safeRead` again
-     * anyway — belt-and-braces costs nothing against a function that is already
-     * `cache()`-wrapped and this page is the only caller that would ever see a
-     * throw from a future change to it.
-     */
     const partGlossaryId = typeof p.partGlossaryId === "string" ? p.partGlossaryId : undefined;
-    const fitsModels = partGlossaryId
-        ? await safeRead(() => getModelsUsingPart(partGlossaryId), {
-            route: "/products/[slug]",
-            key: "products.fitsModels",
-            fallback: [],
-        })
-        : [];
     /*
      * `(slot, tail)` from the id's OWN composition, `${slot}--${tail}` —
      * mirrors `ModelCompositionPanel`'s private `tailOf`, duplicated rather than
@@ -134,9 +118,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
         const tail = partGlossaryId.slice(i + 2);
         return String(ROUTES.PUBLIC.PART_DETAIL(slot, tail));
     })();
-    const partSlotLabel = partGlossaryId
-        ? PART_SLOT_LABEL[partGlossaryId.slice(0, partGlossaryId.indexOf("--"))]
-        : undefined;
+    const partSlotLabel = undefined;
     // -- Derived values ---------------------------------------------------------
     const title = String(p.title ?? p.name ?? "");
     const price = typeof p.price === "number" ? p.price : null;
@@ -299,6 +281,62 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const minOfferPercent = typeof p.minOfferPercent === "number"
         ? p.minOfferPercent
         : DEFAULT_MIN_OFFER_PERCENT;
+    /*
+     * `functionalSlot` (2026-11-05) — hoisted OUTSIDE both the fixed-position
+     * render below and the `AdminComposableRegion` mount, since an admin can
+     * now compose a `{kind:"functionalSlot", slotId:"pdp-offer-action"}` card
+     * that takes over this position instead. Computed once, consumed twice:
+     * the fixed slot renders it only when NOT overridden (so the control never
+     * doubles up), and the composed region always receives it so a
+     * `functionalSlot` card has something real to resolve to. `pageRegionCards`
+     * is template-wide for this listing type (see `recent-entry.ts`'s
+     * `functionalSlot` doc comment) — this check and this render use the same
+     * eligibility condition the fixed position always has, so an admin cannot
+     * surface an offer control for a product that isn't actually offer-eligible.
+     */
+    const offerActionNode = allowOffers && offerableType && price !== null
+        ? renderOfferAction?.({
+            productId: product.id,
+            price,
+            currency,
+            minOfferPercent,
+            listingStoreId: typeof p.storeId === "string" ? p.storeId : undefined,
+            bounds: resolveOfferBounds({
+                listingType: normalizeListingType(p),
+                listedPrice: price,
+                minOfferPercent,
+                allowOffers,
+            }),
+        })
+        : undefined;
+    const hasOfferSlotOverride = pageRegionCards.some((card) => card.elements.some((el) => el.kind === "functionalSlot" && el.slotId === "pdp-offer-action"));
+    /*
+     * `functionalSlot` (2026-11-05) — same hoisting pattern as `offerActionNode`
+     * above, for the DESKTOP position only. Unlike offer-action, this slot
+     * always renders SOMETHING (real buttons from `renderPrimaryActions`, or
+     * `ACTION_NOT_WIRED`-disabled placeholders when the caller omitted the
+     * prop) — there is no "not eligible" case, since this is the PRIMARY
+     * purchase path. The SECOND `renderPrimaryActions` call site below
+     * (`variant: "mobile"`) is a `useBottomActions()` REGISTRATION side
+     * effect, not a duplicable visible slot — it always fires regardless of
+     * any composed override; suppressing it would break the mobile buy bar
+     * site-wide for what is meant to be a purely additive widget feature.
+     */
+    const primaryActionsNode = renderPrimaryActions
+        ? renderPrimaryActions({
+            productId: product.id,
+            productSlug: product.slug ?? slug,
+            productTitle: product.title,
+            productImage: product.mainImage,
+            price,
+            currency,
+            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
+            storeName: typeof p.storeName === "string" ? p.storeName : undefined,
+            inStock,
+            variant: "desktop",
+        })
+        : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsxs(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: [_jsx(Icon, { name: "wishlist", size: "md" }), "Add to Wishlist"] })] }));
+    const hasPrimaryActionsSlotOverride = pageRegionCards.some((card) => card.elements.some((el) => el.kind === "functionalSlot" && el.slotId === "pdp-primary-actions"));
     const shippingInfo = typeof p.shippingInfo === "string" ? p.shippingInfo : null;
     const returnPolicy = typeof p.returnPolicy === "string" ? p.returnPolicy : null;
     /*
@@ -324,7 +362,7 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
     const storeId = typeof p.storeId === "string" ? p.storeId : null;
     // -- Fetch reviews + the shared 4-signal related-items computation + grouped listings in parallel --
     // Only page 1 of reviews is fetched here; <ReviewsListingPanel> pages the rest client-side.
-    const [initialReviews, related, groups, siteSettings, priceBand] = await Promise.all([
+    const [initialReviews, related, groups, siteSettings, priceBand, pdpSectionVisibility] = await Promise.all([
         getReviewPageForProduct(product.id),
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
@@ -347,6 +385,17 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                 fallback: null,
             })
             : Promise.resolve(null),
+        /*
+         * A sixth parallel read, same reasoning as the price-band comment above
+         * — the admin field-visibility override for this page's own sections
+         * (gallery/info/actions/tabs/related), one SHARED `"pdp-sections"`
+         * surface applying to every product (a site-wide template decision,
+         * not per-product — same granularity the owner's own examples implied:
+         * "if I wish for detail screen cta buttons that is a widget"). Degrades
+         * to `{}` (= show everything) on any failure via `getFieldVisibility`'s
+         * own `safeRead`, so a visibility-store outage never blanks the page.
+         */
+        getFieldVisibility("pdp-sections"),
     ]);
     const { relatedItems, relatedByBrand, relatedByTags, relatedByStore } = related;
     /*
@@ -395,82 +444,63 @@ export async function ProductDetailPageView({ slug, initialProduct, renderOfferA
                     price: product.price,
                     storeId: product.storeId,
                     storeName: product.storeName,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] })), renderGallery: () => (_jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
-                                                ? "Brand New"
-                                                : condition === "like_new"
-                                                    ? "Like New"
-                                                    : condition === "refurbished"
-                                                        ? "Refurbished"
-                                                        : condition === "used"
-                                                            ? "Used"
-                                                            : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null && (reviewCount ?? 0) > 0 ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
-                                                    ? "✓ Made to order"
-                                                    : inStock
-                                                        ? "✓ In Stock"
-                                                        : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
-                                                    ? ` — only ${effectiveStock} left`
-                                                    : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [madeToOrder
-                                            ? "✓ Made to order"
-                                            : inStock
-                                                ? "✓ In Stock"
-                                                : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
-                                            ? ` — only ${effectiveStock} left`
-                                            : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: !finalSale && returnsEnabled, finalSale: finalSale, labels: {
-                                        featured: "Featured",
-                                        fasterDelivery: "Faster Delivery",
-                                        ratedSeller: "Rated Seller",
-                                        condition: "Condition",
-                                        conditionNew: "New",
-                                        conditionUsed: "Used",
-                                        conditionBroken: "For Parts",
-                                        conditionRefurbished: "Refurbished",
-                                        returnable: "Returnable",
-                                        finalSale: "Final Sale",
-                                        freeShipping: "Free Shipping",
-                                        codAvailable: "Cash on Delivery",
-                                        emiAvailable: "EMI Available",
-                                        wishlistCount: (n) => `${n} wishlisted`,
-                                        categoryProductCount: (n, cat) => `${n} in ${cat}`,
-                                    } }), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this product" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), sellerName && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: sellerName }), typeof p.storeRating === "number" && p.storeRating > 0 && (_jsx(Row, { gap: "xs", align: "center", className: "mt-0.5", children: _jsxs(Text, { size: "xs", color: "muted", children: [_jsx(Span, { className: "text-warning", "aria-hidden": "true", children: "\u2605" }), " ", p.storeRating.toFixed(1), typeof p.storeReviewCount === "number" &&
-                                                                    p.storeReviewCount > 0 &&
-                                                                    ` · ${p.storeReviewCount} reviews`] }) }))] }), _jsxs(Row, { gap: "xs", align: "center", className: "shrink-0", children: [sellerName && storeId && (_jsx(MessageSellerButton, { storeId: storeId, productId: product.id })), sellerHref && (_jsx(Link, { href: sellerHref, className: "rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] })] }) }))] })), renderActions: () => (_jsxs(Stack, { className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [price !== null && (_jsxs(Div, { children: [_jsx(PriceDisplay, { amount: price, originalAmount: originalPrice ?? undefined, currency: currency, variant: "detail" }), siteSettings?.gst?.enabled === true &&
-                                            typeof p.gstRate === "number" &&
-                                            p.gstRate > 0 && (_jsxs(Text, { size: "xs", color: "muted", children: ["Incl. ", p.gstRate, "% GST"] })), _jsx(MarketPriceAnchor, { band: priceBand?.byListingType?.[normalizeListingType(p)] ?? null, windowDays: priceBand?.windowDays ?? null, currency: currency, price: price }), inStock && effectiveStock !== null && effectiveStock <= 3 && (_jsxs(Text, { className: "mt-1 text-warning", size: "xs", children: ["Only ", effectiveStock, " left \u2014 order soon!"] })), inStock && effectiveStock !== null && effectiveStock > 3 && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [effectiveStock, " in stock"] })), madeToOrder && (_jsx(Text, { className: "mt-1", color: "muted", size: "xs", children: "Made to order \u2014 printed when you order, so it never runs out." })), partHref && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [partSlotLabel ?? "Part", ".", " ", _jsx(Link, { href: partHref, className: "text-primary-600 hover:underline", children: "See what else fits \u2192" }), fitsModels.length > 0 && (_jsxs(_Fragment, { children: [" ", "Fits:", " ", fitsModels.slice(0, 6).map((m, i) => (_jsxs(Text, { as: "span", children: [i > 0 ? ", " : "", m.categoryId ? (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(m.categoryId)), className: "text-primary-600 hover:underline", children: m.name })) : (m.name)] }, m.id)))] }))] }))] })), _jsxs(Stack, { gap: "sm", ...ctaAnchorProps(), children: [renderPrimaryActions ? (renderPrimaryActions({
-                                            productId: product.id,
-                                            productSlug: product.slug ?? slug,
-                                            productTitle: product.title,
-                                            productImage: product.mainImage,
-                                            price,
-                                            currency,
-                                            storeId: typeof p.storeId === "string" ? p.storeId : undefined,
-                                            storeName: typeof p.storeName === "string" ? p.storeName : undefined,
-                                            inStock,
-                                            variant: "desktop",
-                                        })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Buy Now" : "Out of Stock" }), _jsx(Button, { variant: "secondary", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: inStock ? "Add to Cart" : "Out of Stock" }), _jsxs(Button, { variant: "ghost", size: "md", className: "w-full", disabled: true, title: ACTION_NOT_WIRED, children: [_jsx(Icon, { name: "wishlist", size: "md" }), "Add to Wishlist"] })] })), allowOffers && offerableType && price !== null && renderOfferAction?.({
-                                            productId: product.id,
-                                            price,
-                                            currency,
-                                            minOfferPercent,
-                                            listingStoreId: typeof p.storeId === "string" ? p.storeId : undefined,
-                                            bounds: resolveOfferBounds({
-                                                listingType: normalizeListingType(p),
-                                                listedPrice: price,
-                                                minOfferPercent,
-                                                allowOffers,
-                                            }),
-                                        })] }), (shippingInfo || returnPolicy || freeShipping || finalSale) && (_jsxs(Stack, { gap: "sm", border: "default", className: "border-t", padding: "t-md", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_FREE_SHIPPING_ICON, children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { size: "xs", color: "muted", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCE6" }), _jsx(Text, { size: "xs", color: "muted", children: shippingInfo })] })), _jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\u21BA" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: finalSale ? "warning" : "muted", children: finalSale ? "Final sale — no change-of-mind returns" : "Returns accepted" }), _jsx(Text, { size: "xs", color: "muted", children: finalSale
-                                                                ? "You can still claim if it never arrives, arrives damaged, is the wrong item, is not as described, or is counterfeit."
-                                                                : "Return this item within the platform return window for any reason." })] })] }), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCC4" }), _jsx(Text, { size: "xs", color: "muted", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { border: "default", className: "border-t", padding: "t-md", children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "medium", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", size: "xs", children: tag }, tag))) })] })), _jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(Row, { wrap: true, gap: "sm", justify: "center", className: "text-center", children: [
-                                            { icon: "🔒", label: "Secure\nPayment" },
-                                            { icon: "✓", label: "Verified\nSeller" },
-                                            { icon: "⭐", label: "Quality\nGuarantee" },
-                                        ].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))) }) })] })), renderSublistingSection: sublistingCategoryId
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsx(ProductDetailView, { renderBreadcrumb: () => (_jsxs(_Fragment, { children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(ContextualTrail, { trails: trails, alternates: { ids: categoryIds, names: categoryIdNames } }), _jsx(ShareButton, { title: title || undefined })] }), _jsx(PdpSectionJumpNav, { productId: String(product.id), title: title || "this product" })] })), renderGallery: () => (
+                        // Phase 10 ("widget descriptors") — id anchor for the PDP "jump to
+                        // section" nav + pdpSection RecentEntry href resolution. Mirrors
+                        // PdpSectionId's "gallery" 1:1 (appkit/.../dashboard/recent-entry.ts).
+                        _jsx(Div, { id: "section-gallery", children: _jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "gallery", initialVisible: pdpSectionVisibility.gallery !== false, children: _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title || undefined }) }) })), renderInfo: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "info", initialVisible: pdpSectionVisibility.info !== false, children: _jsxs(Stack, { gap: "md", id: "section-info", children: [_jsx(RecordOwnerQuickActions, { resource: "PRODUCT", recordId: String(product.id), recordLabel: title || String(product.slug ?? product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsxs(Div, { children: [condition && (_jsx(Span, { size: "xs", weight: "medium", className: "mb-2 inline-block", padding: "pill-sm", rounded: "full", surface: "subtle", color: "muted", transform: "capitalize", children: condition === "new"
+                                                    ? "Brand New"
+                                                    : condition === "like_new"
+                                                        ? "Like New"
+                                                        : condition === "refurbished"
+                                                            ? "Refurbished"
+                                                            : condition === "used"
+                                                                ? "Used"
+                                                                : condition })), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title || "Untitled Product" })] }), avgRating !== null && (reviewCount ?? 0) > 0 ? (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(StarRating, { value: avgRating }), _jsxs(Span, { size: "sm", color: "muted", children: [avgRating.toFixed(1), reviewCount ? ` (${reviewCount} reviews)` : ""] }), showViews && (_jsxs(Span, { size: "sm", color: "muted", children: ["\u00B7 ", views7d.toLocaleString(), " viewed this week"] })), _jsxs(Span, { size: "xs", weight: "medium", surface: inStock ? "success-surface" : "danger-surface", className: `ml-auto ${inStock ? "text-success" : "text-error"}`, padding: "pill-sm", rounded: "full", children: [madeToOrder
+                                                        ? "✓ Made to order"
+                                                        : inStock
+                                                            ? "✓ In Stock"
+                                                            : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                        ? ` — only ${effectiveStock} left`
+                                                        : ""] })] })) : (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `w-fit .5 ${inStock ? CLS_STOCK_IN : CLS_STOCK_OUT}`, rounded: "full", padding: "pill-md", size: "xs", weight: "medium", children: [madeToOrder
+                                                ? "✓ Made to order"
+                                                : inStock
+                                                    ? "✓ In Stock"
+                                                    : "✗ Out of Stock", inStock && effectiveStock !== null && effectiveStock <= 10
+                                                ? ` — only ${effectiveStock} left`
+                                                : ""] })), (categorySlugs.length > 0 || subcategory || brand) && (_jsxs(Row, { gap: "sm", wrap: true, children: [categorySlugs.map((slug, i) => (_jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(slug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: categoryNames[i] ?? slug }, slug))), subcategory && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", transform: "capitalize", children: subcategory })), brand && brandSlug && (_jsx(Link, { href: String(ROUTES.PUBLIC.BRAND_DETAIL(brandSlug)), className: "inline-flex items-center rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] px-[var(--appkit-space-2-5)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] font-medium text-[var(--appkit-color-text-muted)] transition-colors hover:border-primary-300 hover:bg-primary-surface hover:text-primary-700 dark:hover:border-primary-700/60 dark:hover:text-primary-400", children: brand })), brand && !brandSlug && (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", border: "subtle", rounded: "full", padding: "pill-sm-tall", surface: "muted", color: "muted", children: brand }))] })), bundleMemberships.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, children: bundleMemberships.map((b) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_PILL, children: [_jsx(Span, { "aria-hidden": "true", children: "\uD83D\uDCE6" }), "In bundle: ", b.title] }, b.id))) })), _jsx(ProductFeatureBadges, { featured: featured, freeShipping: freeShipping, codAvailable: codEnabled === true, codHref: String(ROUTES.PUBLIC.HOW_CHECKOUT_WORKS), emiAvailable: emiEnabled === true, emiHref: String(ROUTES.PUBLIC.HOW_EMI_WORKS), condition: condition ?? undefined, returnable: !finalSale && returnsEnabled, finalSale: finalSale, labels: {
+                                            featured: "Featured",
+                                            fasterDelivery: "Faster Delivery",
+                                            ratedSeller: "Rated Seller",
+                                            condition: "Condition",
+                                            conditionNew: "New",
+                                            conditionUsed: "Used",
+                                            conditionBroken: "For Parts",
+                                            conditionRefurbished: "Refurbished",
+                                            returnable: "Returnable",
+                                            finalSale: "Final Sale",
+                                            freeShipping: "Free Shipping",
+                                            codAvailable: "Cash on Delivery",
+                                            emiAvailable: "EMI Available",
+                                            wishlistCount: (n) => `${n} wishlisted`,
+                                            categoryProductCount: (n, cat) => `${n} in ${cat}`,
+                                        } }), productFeatures && features.length > 0 && (_jsx(FeatureBadgeList, { productFeatureIds: features, features: productFeatures })), !productFeatures && features.length > 0 && (_jsxs(Div, { border: "subtle", surface: "muted", padding: "inline", rounded: "xl", children: [_jsx(Text, { className: "mb-2 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "About this product" }), _jsx(Ul, { spacing: "comfortable", size: "sm", color: "primary", children: features.map((f, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-0.5 flex-shrink-0 text-primary-500", children: "\u2022" }), f] }, i))) })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), sellerName && (_jsx(Div, { className: `${__P.p3}`, border: "subtle", rounded: "xl", surface: "muted", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: sellerName }), typeof p.storeRating === "number" && p.storeRating > 0 && (_jsx(Row, { gap: "xs", align: "center", className: "mt-0.5", children: _jsxs(Text, { size: "xs", color: "muted", children: [_jsx(Span, { className: "text-warning", "aria-hidden": "true", children: "\u2605" }), " ", p.storeRating.toFixed(1), typeof p.storeReviewCount === "number" &&
+                                                                        p.storeReviewCount > 0 &&
+                                                                        ` · ${p.storeReviewCount} reviews`] }) }))] }), _jsxs(Row, { gap: "xs", align: "center", className: "shrink-0", children: [sellerName && storeId && (_jsx(MessageSellerButton, { storeId: storeId, productId: product.id })), sellerHref && (_jsx(Link, { href: sellerHref, className: "rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] })] }) }))] }) })), renderActions: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "actions", initialVisible: pdpSectionVisibility.actions !== false, children: _jsxs(Stack, { id: "section-actions", className: `${__P.p5}`, border: "subtle", gap: "md", rounded: "xl", surface: "muted", children: [price !== null && (_jsxs(Div, { children: [_jsx(PriceDisplay, { amount: price, originalAmount: originalPrice ?? undefined, currency: currency, variant: "detail" }), siteSettings?.gst?.enabled === true &&
+                                                typeof p.gstRate === "number" &&
+                                                p.gstRate > 0 && (_jsxs(Text, { size: "xs", color: "muted", children: ["Incl. ", p.gstRate, "% GST"] })), _jsx(MarketPriceAnchor, { band: priceBand?.byListingType?.[normalizeListingType(p)] ?? null, windowDays: priceBand?.windowDays ?? null, currency: currency, price: price }), inStock && effectiveStock !== null && effectiveStock <= 3 && (_jsxs(Text, { className: "mt-1 text-warning", size: "xs", children: ["Only ", effectiveStock, " left \u2014 order soon!"] })), inStock && effectiveStock !== null && effectiveStock > 3 && effectiveStock <= 10 && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [effectiveStock, " in stock"] })), madeToOrder && (_jsx(Text, { className: "mt-1", color: "muted", size: "xs", children: "Made to order \u2014 printed when you order, so it never runs out." })), partHref && (_jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [partSlotLabel ?? "Part", ".", " ", _jsx(Link, { href: partHref, className: "text-primary-600 hover:underline", children: "See what else fits \u2192" })] }))] })), _jsxs(Stack, { gap: "sm", ...ctaAnchorProps(), children: [!hasPrimaryActionsSlotOverride && primaryActionsNode, !hasOfferSlotOverride && offerActionNode] }), (shippingInfo || returnPolicy || freeShipping || finalSale) && (_jsxs(Stack, { gap: "sm", border: "default", className: "border-t", padding: "t-md", children: [freeShipping && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_FREE_SHIPPING_ICON, children: "\uD83D\uDE9A" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Free Delivery" }), shippingInfo && (_jsx(Text, { size: "xs", color: "muted", children: shippingInfo }))] })] })), !freeShipping && shippingInfo && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCE6" }), _jsx(Text, { size: "xs", color: "muted", children: shippingInfo })] })), _jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\u21BA" }), _jsxs(Div, { children: [_jsx(Text, { size: "xs", weight: "medium", color: finalSale ? "warning" : "muted", children: finalSale ? "Final sale — no change-of-mind returns" : "Returns accepted" }), _jsx(Text, { size: "xs", color: "muted", children: finalSale
+                                                                    ? "You can still claim if it never arrives, arrives damaged, is the wrong item, is not as described, or is counterfeit."
+                                                                    : "Return this item within the platform return window for any reason." })] })] }), returnPolicy && (_jsxs(Row, { align: "start", gap: "sm", children: [_jsx(Span, { className: CLS_POLICY_ROW_ICON, color: "faint", children: "\uD83D\uDCC4" }), _jsx(Text, { size: "xs", color: "muted", children: returnPolicy })] }))] })), tags.length > 0 && (_jsxs(Div, { border: "default", className: "border-t", padding: "t-md", children: [_jsx(Text, { className: "mb-2", color: "muted", size: "xs", weight: "medium", children: "Tags" }), _jsx(Row, { wrap: true, gap: "xs", children: tags.map((tag) => (_jsx(Span, { rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", size: "xs", children: tag }, tag))) })] })), _jsx(Div, { border: "default", className: "border-t", padding: "t-md", children: _jsx(TrustBadgeRow, { badges: [
+                                                { icon: "🔒", label: "Secure\nPayment" },
+                                                { icon: "✓", label: "Verified\nSeller" },
+                                                { icon: "⭐", label: "Quality\nGuarantee" },
+                                            ] }) })] }) })), renderSublistingSection: sublistingCategoryId
                             ? () => (_jsx(SublistingCarouselSection, { sublistingCategoryId: sublistingCategoryId, currentListingId: String(product.id) }))
                             : undefined, renderGroupSection: groupId
                             ? () => (_jsx(ShowGroupSection, { groupId: groupId, currentSlug: String(p.slug ?? product.id), isParent: isGroupParent, groupTitle: groupTitle }))
-                            : undefined, renderTabs: () => (_jsx(ProductTabsShell, { partsContent: compositionContent, descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: allSpecs.length > 0 ? (_jsx(SpecTable, { rows: allSpecs })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx(Ul, { spacing: "comfortable", children: ingredients.map((item, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 bg-primary-400", rounded: "full" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx(Ol, { spacing: "loose", children: howToUse.map((step, i) => (_jsxs(Li, { layout: "flex-start", gap: "3", textSize: "sm", color: "muted", children: [_jsx(Span, { layout: "flex-center", size: "xs", weight: "bold", className: "flex-shrink-0 h-6 w-6 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300", rounded: "full", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsxs(Stack, { gap: "md", children: [_jsx(PurchaseReviewAffordance, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." })] }), customTabs: toCustomSectionTabs(p.customSections) })), renderBundleSection: bundleMemberships.length > 0
+                            : undefined, renderTabs: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "tabs", initialVisible: pdpSectionVisibility.tabs !== false, children: _jsx(Div, { id: "section-tabs", children: _jsx(ProductTabsShell, { partsContent: compositionContent, descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: allSpecs.length > 0 ? (_jsx(SpecTable, { rows: allSpecs })) : undefined, ingredientsContent: ingredients.length > 0 ? (_jsx(Ul, { spacing: "comfortable", children: ingredients.map((item, i) => (_jsxs(Li, { layout: "flex-start", gap: "2", children: [_jsx(Span, { className: "mt-1 flex-shrink-0 h-1.5 w-1.5 bg-primary-400", rounded: "full" }), item] }, i))) })) : undefined, howToUseContent: howToUse.length > 0 ? (_jsx(Ol, { spacing: "loose", children: howToUse.map((step, i) => (_jsxs(Li, { layout: "flex-start", gap: "3", textSize: "sm", color: "muted", children: [_jsx(Span, { layout: "flex-center", size: "xs", weight: "bold", className: "flex-shrink-0 h-6 w-6 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300", rounded: "full", children: i + 1 }), step] }, i))) })) : undefined, reviewsContent: _jsxs(Stack, { gap: "md", children: [_jsx(PurchaseReviewAffordance, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." })] }), customTabs: toCustomSectionTabs(p.customSections) }) }) })), renderBundleSection: bundleMemberships.length > 0
                             ? () => (_jsxs(Div, { className: CLS_BUNDLE_BOX, children: [_jsxs(Row, { className: "mb-3", align: "center", gap: "sm", children: [_jsx(Span, { size: "base", className: CLS_BUNDLE_ICON, "aria-hidden": "true", children: "\uD83D\uDCE6" }), _jsxs(Text, { className: CLS_BUNDLE_TITLE, children: ["Part of ", bundleMemberships.length === 1 ? "a bundle" : `${bundleMemberships.length} bundles`] })] }), _jsx(Stack, { gap: "3", children: bundleMemberships.map((b) => (_jsxs(Div, { className: CLS_BUNDLE_ROW, children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_BUNDLE_LABEL, children: "Included in bundle" }), _jsx(Text, { className: "truncate", color: "primary", size: "sm", weight: "semibold", children: b.title })] }), _jsx(Link, { href: String(ROUTES.PUBLIC.BUNDLE_DETAIL(b.id)), className: CLS_BUNDLE_CTA, children: "View Bundle \u2192" })] }, b.id))) })] }))
-                            : undefined, renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryNames[0] || categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: sellerName ? storeName || undefined : undefined })] })) }), renderPrimaryActions
+                            : undefined, renderRelated: () => (_jsxs(Stack, { gap: "xl", id: "section-related", children: [_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "grouped-listings", initialVisible: pdpSectionVisibility["grouped-listings"] !== false, children: _jsx(GroupedListingsCarousel, { groups: groups }) }), _jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "related", initialVisible: pdpSectionVisibility.related !== false, children: _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryNames[0] || categoryName || category || undefined, brandLabel: brand || undefined, storeLabel: sellerName ? storeName || undefined : undefined }) })] })) }), _jsx(AdminComposableRegion, { pageId: "products-slug", initialCards: pageRegionCards, functionalSlots: { "pdp-offer-action": offerActionNode, "pdp-primary-actions": primaryActionsNode } }), renderPrimaryActions
                         ? renderPrimaryActions({
                             productId: product.id,
                             productSlug: product.slug ?? slug,

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

@@ -90,8 +90,11 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
             key: "cod",
             icon: _jsx(Span, { size: "xs", children: "\u20B9" }),
             label: labels.codAvailable,
-            colorClass: "text-purple-700 dark:text-purple-300",
-            bgClass: "bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-800",
+            // Generic accent token (2A/Phase 11), not a status color — COD/EMI/
+            // wishlist exist purely to differentiate from each other, same
+            // convention the success/warning/error/info badges above use.
+            colorClass: "text-accent-c dark:text-accent-c",
+            bgClass: "bg-accent-c-surface dark:bg-accent-c-surface border-accent-c dark:border-accent-c",
             href: codHref,
         });
     }
@@ -100,8 +103,8 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
             key: "emi",
             icon: _jsx(Span, { size: "xs", children: "\uD83D\uDCC5" }),
             label: labels.emiAvailable,
-            colorClass: "text-indigo-700 dark:text-indigo-300",
-            bgClass: "bg-indigo-50 dark:bg-indigo-900/30 border-indigo-200 dark:border-indigo-800",
+            colorClass: "text-accent-a dark:text-accent-a",
+            bgClass: "bg-accent-a-surface dark:bg-accent-a-surface border-accent-a dark:border-accent-a",
             href: emiHref,
         });
     }
@@ -110,8 +113,8 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
             key: "wishlist",
             icon: _jsx(Icon, { name: "wishlist", size: "xs", filled: true }),
             label: labels.wishlistCount(wishlistCount),
-            colorClass: "text-pink-700 dark:text-pink-300",
-            bgClass: "bg-pink-50 dark:bg-pink-900/30 border-pink-200 dark:border-pink-800",
+            colorClass: "text-accent-b dark:text-accent-b",
+            bgClass: "bg-accent-b-surface dark:bg-accent-b-surface border-accent-b dark:border-accent-b",
         });
     }
     if (categoryProductCount && categoryProductCount > 0 && categoryName) {
@@ -129,6 +132,6 @@ export function ProductFeatureBadges({ featured, fasterDelivery, ratedSeller, co
     }
     if (badges.length === 0)
         return null;
-    const renderPill = (badge) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `.5 border py-[0.375rem] ${badge.bgClass} ${badge.colorClass}`, rounded: "lg", padding: "x-sm", size: "xs", weight: "medium", children: [_jsx(Span, { "aria-hidden": "true", children: badge.icon }), badge.label] }));
+    const renderPill = (badge) => (_jsxs(Span, { layout: "inline-flex", gap: "xs", className: `border py-[0.375rem] ${badge.bgClass} ${badge.colorClass}`, rounded: "lg", padding: "x-sm", size: "xs", weight: "medium", children: [_jsx(Span, { "aria-hidden": "true", children: badge.icon }), badge.label] }));
     return (_jsx(Row, { wrap: true, gap: "sm", children: badges.map((badge) => badge.href ? (_jsx(TextLink, { href: badge.href, className: "no-underline", children: renderPill(badge) }, badge.key)) : (_jsx(Fragment, { children: renderPill(badge) }, badge.key))) }));
 }

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

@@ -103,7 +103,7 @@ export function ProductFilters({ table, categoryOptions = [], brandOptions = [],
     const selectedListingTypes = splitPipe(TABLE_KEYS.LISTING_TYPE);
     return (_jsxs(Div, { children: [listingTypeOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx(FilterFacetSection, { title: "Listing type", options: listingTypeOptions, selected: selectedListingTypes, onChange: (vals) => 
                         // Serialise in the OPTIONS' order, not the order the boxes were
-                        // ticked — `auction|art` and `art|auction` are the same result
+                        // ticked — `collector drop|art` and `art|collector drop` are the same result
                         // set but two different React Query keys and two different URLs.
                         table.set(TABLE_KEYS.LISTING_TYPE, listingTypeOptions
                             .filter((o) => vals.includes(o.value))

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

@@ -100,7 +100,7 @@ export interface ProductFormProps {
     currencyPrefix?: string;
     /**
      * Render a Group Settings panel (GP2). Only passed when editing an existing
-     * non-auction product. Returns null/undefined to omit.
+     * non-collectorDrop product. Returns null/undefined to omit.
      */
     renderGroupSettings?: (product: ProductFormValue) => React.ReactNode;
     /**