@mohasinac/appkit 4.53.0 → 4.53.2

package/dist/features/layout/BottomNavItem.js

@@ -23,5 +23,5 @@ export function BottomNavItem({ href, label, icon, badge, isActive = false, clas
     // Consumer projects may swap for next/link if preferred.
     return (_jsx(Li, { className: "flex-1", children: _jsxs("a", { href: href, "aria-label": label, "aria-current": isActive ? "page" : undefined, className: `relative flex flex-col items-center justify-center gap-[var(--appkit-space-0-5)] h-full w-full min-h-[44px] transition-colors ${isActive
                 ? "text-primary-600 dark:text-secondary-400"
-                : "text-[var(--appkit-color-text-muted)] hover:text-zinc-700 hover:text-[var(--appkit-color-text-muted)]"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { layout: "flex-center", color: "inverse", "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-[var(--appkit-space-1)] text-[10px] bg-secondary-500 leading-none", rounded: "full", weight: "bold", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { weight: "medium", className: "text-[10px] leading-none", children: label })] }) }));
+                : "text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)]"}${className ? ` ${className}` : ""}`, children: [_jsxs(Span, { className: "relative", children: [icon, badge != null && badge > 0 && (_jsx(Span, { layout: "flex-center", color: "inverse", "aria-label": `${badge} items`, className: "absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-[var(--appkit-space-1)] text-[10px] bg-secondary-500 leading-none", rounded: "full", weight: "bold", children: badge > 99 ? "99+" : badge }))] }), _jsx(Span, { weight: "medium", className: "text-[10px] leading-none", children: label })] }) }));
 }

package/dist/features/layout/BottomSheet.js

@@ -38,5 +38,5 @@ export function BottomSheet({ open, onClose, title, children, className, maxHeig
     }, [open, handleEscape]);
     if (!open)
         return null;
-    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { surface: "overlay-sm", className: "absolute inset-0 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Stack, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 rounded-t-2xl border-t border-[var(--appkit-color-border-subtle)] shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, surface: "default", children: [_jsxs(Row, { border: "subtle", justify: "between", className: "border-b shrink-0", padding: "inline", children: [_jsx(Div, { surface: "skeleton", className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-[var(--appkit-color-border)]", rounded: "full" }), title && (_jsx(Span, { size: "sm", weight: "semibold", className: "mt-2", color: "primary", children: title })), _jsx(Button, { rounded: "lg", type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-[var(--appkit-space-1-5)] text-[var(--appkit-color-text-muted)] hover:text-zinc-700 text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text-muted)] hover:bg-surface-hover transition-colors min-h-[44px] min-w-[44px] justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto} overscroll-contain pb-[env(safe-area-inset-bottom)]`, children: children })] })] }));
+    return (_jsxs(Div, { className: "fixed inset-0 z-50 lg:hidden", role: "presentation", children: [_jsx(Div, { surface: "overlay-sm", className: "absolute inset-0 backdrop-blur-sm", "aria-hidden": "true", onClick: onClose }), _jsxs(Stack, { role: "dialog", "aria-modal": "true", "aria-label": title, className: `absolute bottom-0 inset-x-0 rounded-t-2xl border-t border-[var(--appkit-color-border-subtle)] shadow-2xl ${maxHeight} animate-slide-up${className ? ` ${className}` : ""}`, surface: "default", children: [_jsxs(Row, { border: "subtle", justify: "between", className: "border-b shrink-0", padding: "inline", children: [_jsx(Div, { surface: "skeleton", className: "absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-[var(--appkit-color-border)]", rounded: "full" }), title && (_jsx(Span, { size: "sm", weight: "semibold", className: "mt-2", color: "primary", children: title })), _jsx(Button, { rounded: "lg", type: "button", onClick: onClose, "aria-label": "Close", className: "ml-auto mt-2 p-[var(--appkit-space-1-5)] text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] hover:bg-surface-hover transition-colors min-h-[44px] min-w-[44px] justify-center", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx(Div, { className: `flex-1 ${__O.yAuto} overscroll-contain pb-[env(safe-area-inset-bottom)]`, children: children })] })] }));
 }

package/dist/features/layout/TitleBarLayout.js

@@ -64,7 +64,7 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     _jsxs(Row, { gap: "xs", reverse: "hand", className: "hidden lg:flex", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-surface", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
     const hasTb2 = !!(notificationsEl || messagesEl || wishlistEl || cartEl || profileEl);
     // ── Render ───────────────────────────────────────────────────────────────────
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", reverse: "hand", className: "flex-1", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex flex-none", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", justify: "end", className: "flex-1", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), messagesEl && _jsx(Div, { className: "hidden lg:flex", children: messagesEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", reverse: "hand", className: "flex-1", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: _jsx(SiteLogo, { title: brandName, size: "md" }) }) }), _jsx(Row, { className: "flex flex-none", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandShortName ?? brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", justify: "end", className: "flex-1", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), messagesEl && _jsx(Div, { className: "hidden lg:flex", children: messagesEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
                                         ? profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })
                                         : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, _jsx(Div, { className: "hidden sm:flex", children: promotionsEl }), themeBtn, hamburgerBtn] })] }), hasTb2 && (
                     // `justify="end"` is CORRECT alongside `reverse="hand"` — do not

package/dist/features/live/components/LiveItemDetailPageView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Link from "next/link.js";
 import { getLiveItemForDetail } from "../../../_internal/server/features/live/data.js";
-const CLS_BREADCRUMB_LINK = "hover:text-primary-600 transition-colors";
+const CLS_BREADCRUMB_LINK = "hover:text-primary-600 dark:hover:text-primary-400 transition-colors";
 const CLS_LIVE_ITEM_BADGE = "inline-block rounded-full bg-lime-100 dark:bg-lime-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-lime-700 dark:text-lime-300";
 const CLS_WARN_BOX = "rounded-lg border border-warning bg-warning-surface p-[var(--appkit-space-4)] text-[length:var(--appkit-text-sm)]";
 const CLS_WARN_TITLE = "font-medium text-warning";
@@ -11,11 +11,11 @@ import { getDefaultCurrency } from "../../../core/baseline-resolver.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { safeDisplayName } from "../../../security/index.js";
-import { Div, Container, GatedPrice, PricesOnly, Heading, Main, Nav, RichText, Row, Section, Span, Stack, Text, Dl, Dt, Dd, } from "../../../ui/index.js";
+import { Div, Container, GatedPrice, PricesOnly, Heading, Main, Nav, RichText, Row, Section, Span, Stack, Text, SpecTable, } from "../../../ui/index.js";
 import { PreOrderDetailView } from "../../products/components/PreOrderDetailView.js";
 import { ProductGalleryClient } from "../../products/components/ProductGalleryClient.js";
 import { ProductTabsShell } from "../../products/components/ProductTabsShell.js";
-import { CustomSectionTabContent } from "../../products/components/CustomSectionTabContent.js";
+import { toCustomSectionTabs } from "../../products/components/CustomSectionTabContent.js";
 import { ShareButton } from "../../products/components/ShareButton.js";
 import { HistoryTracker } from "../../history/components/HistoryTracker.js";
 import { RelatedItemsSection } from "../../products/components/RelatedItemsSection.js";
@@ -24,6 +24,7 @@ import { GroupedListingsCarousel } from "../../grouped/components/GroupedListing
 import { getGroupsWithItemsForProduct } from "../../../_internal/server/features/grouped/data.js";
 import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPanel.js";
 import { ListingBottomActions } from "../../products/components/ListingBottomActions.js";
+import { productImageUrls } from "../../products/schemas/firestore.js";
 function toDescriptionHtml(raw) {
     if (!raw)
         return "";
@@ -44,7 +45,15 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
     const currency = p.currency || getDefaultCurrency();
     const title = String(p.title ?? p.name ?? "Live Listing");
     const price = typeof p.price === "number" ? p.price : null;
-    const images = Array.isArray(p.images) ? p.images : typeof p.mainImage === "string" ? [p.mainImage] : [];
+    // `images` is `ProductImage[]` since A6 — `productImageUrls` is the one
+    // normaliser (it also accepts the legacy `string[]`). Casting it to
+    // `string[]` handed the gallery objects and rendered a placeholder.
+    const galleryUrls = productImageUrls(p.images);
+    const images = galleryUrls.length > 0
+        ? galleryUrls
+        : typeof p.mainImage === "string"
+            ? [p.mainImage]
+            : [];
     const productVideo = p.video;
     const meta = product.liveItem;
     const jurisdictions = meta?.jurisdictionAllowed ?? [];
@@ -57,7 +66,6 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
     const storeSlug = (typeof p.storeSlug === "string" ? p.storeSlug : null) || (typeof p.storeId === "string" ? p.storeId : null);
     const storeHref = storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null;
     const specs = Array.isArray(p.specifications) ? p.specifications : [];
-    const customSections = Array.isArray(p.customSections) ? p.customSections : [];
     const descriptionHtml = toDescriptionHtml(p.description);
     const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, initialReviews] = await Promise.all([
         computeRelatedItems(product),
@@ -70,9 +78,5 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
-                                id: s.id,
-                                label: s.title,
-                                content: _jsx(CustomSectionTabContent, { section: s }),
-                            })) })), renderBuyBar: () => _jsx(Div, { id: "live-item-buy-bar", children: renderActions?.(product) }), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "live", anchorId: "live-item-buy-bar", price: price, currency: currency })] })] }));
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: toCustomSectionTabs(p.customSections) })), renderBuyBar: () => _jsx(Div, { id: "live-item-buy-bar", children: renderActions?.(product) }), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "live", anchorId: "live-item-buy-bar", price: price, currency: currency })] })] }));
 }

package/dist/features/media/hooks/useMedia.js

@@ -58,6 +58,23 @@ export function useMediaUpload(endpoints = {}) {
             return apiClient.post(finalizeEndpoint, {
                 storagePath: signResponse.storagePath,
                 isPublic,
+                /*
+                 * A7 — the ORIGINAL client filename, for the provenance heuristics.
+                 *
+                 * 🛑 It cannot be derived server-side. Our own `storagePath` is a
+                 * content-derived SEO slug minted at sign time (§ Media Filename Slug
+                 * Patterns), so by the time the server sees the upload the only name
+                 * left is one we invented — and the signals A7 looks for (Amazon's
+                 * `_AC_SL1500_`, a generator's `ChatGPT-Image-…`) live exclusively in
+                 * the name the file arrived with.
+                 *
+                 * Advisory and client-supplied, therefore trivially spoofable. That is
+                 * acceptable because nothing gates on it: it raises a flag for a human,
+                 * and a seller who renames a file to avoid one has merely declined to
+                 * volunteer information. Never treat it as evidence of anything but
+                 * itself.
+                 */
+                originalFilename: file.name,
             });
         },
     });

package/dist/features/media/repository/media-assets.repository.d.ts

@@ -40,12 +40,58 @@ export interface MediaAssetDocument {
      * unwatermarked image, or double-watermark it the other way round.
      */
     watermarkedAt?: Date;
+    /**
+     * A7 — provenance concerns recorded for human review. See
+     * `features/media/trust-signals.ts` for the vocabulary and, more
+     * importantly, for what is deliberately NOT flagged.
+     *
+     * 🛑 ADVISORY. Nothing reads this to block an upload, hide a listing or
+     * refuse a seller; it exists so a moderator can look. A heuristic that
+     * auto-rejects refuses honest sellers on a filename.
+     *
+     * Absent means "not evaluated" (every row predating A7, and every non-image
+     * asset), which is NOT the same as "clean" — a reader must not treat the
+     * absence as a pass.
+     */
+    trustFlags?: string[];
+    /**
+     * A7 — 16-char hex dHash of the image, for near-duplicate detection.
+     *
+     * Perceptual, not cryptographic: stable across re-encoding and resizing, so
+     * it answers "is this the same photograph" rather than "is this the same
+     * file". Images only; absent when the hash could not be computed, which is
+     * deliberately non-fatal.
+     */
+    dHash?: string;
     createdAt: Date;
 }
 export type MediaAssetCreateInput = Omit<MediaAssetDocument, "id" | "createdAt">;
 export declare class MediaAssetsRepository extends BaseRepository<MediaAssetDocument> {
     constructor();
     findByStoragePath(storagePath: string): Promise<MediaAssetDocument | null>;
+    /**
+     * A7 — assets sharing a dHash, for the cross-seller duplicate check.
+     *
+     * 🛑 BOUNDED, and exact-match only. An equality on `dHash` is served by
+     * Firestore's automatic single-field index, so this needs no composite —
+     * whereas a true nearest-neighbour search over 64-bit hashes would need
+     * either a full scan or a BK-tree, and a full collection scan on every
+     * upload is precisely the unbounded-read shape Rule #6 exists to prevent.
+     *
+     * 🛑 The trade is narrower than it first looks, and it was MEASURED rather
+     * than assumed. Against the same source image:
+     *
+     *     resized to 220px wide     -> distance 0   (exact match CATCHES it)
+     *     re-encoded jpeg q55       -> distance 3   (exact match MISSES it)
+     *     a different bey entirely  -> distance 9
+     *
+     * So this online check reliably catches a RESIZE and will miss a re-encode.
+     * An earlier revision of this comment claimed both produce an identical
+     * hash; that was wrong. `dHashDistance` and `DHASH_DUPLICATE_MAX_DISTANCE`
+     * are exported for an offline sweep that can afford the pairwise
+     * comparison, which is where the distance-3 case gets caught.
+     */
+    findByDHash(dHash: string, limit?: number): Promise<MediaAssetDocument[]>;
     /**
      * Create a new mediaAssets document with a collision-safe shortId.
      * Tries `preferredShortId` first, then appends a random 4-char suffix up to

package/dist/features/media/repository/media-assets.repository.js

@@ -12,6 +12,37 @@ export class MediaAssetsRepository extends BaseRepository {
     async findByStoragePath(storagePath) {
         return this.findOneBy("storagePath", storagePath);
     }
+    /**
+     * A7 — assets sharing a dHash, for the cross-seller duplicate check.
+     *
+     * 🛑 BOUNDED, and exact-match only. An equality on `dHash` is served by
+     * Firestore's automatic single-field index, so this needs no composite —
+     * whereas a true nearest-neighbour search over 64-bit hashes would need
+     * either a full scan or a BK-tree, and a full collection scan on every
+     * upload is precisely the unbounded-read shape Rule #6 exists to prevent.
+     *
+     * 🛑 The trade is narrower than it first looks, and it was MEASURED rather
+     * than assumed. Against the same source image:
+     *
+     *     resized to 220px wide     -> distance 0   (exact match CATCHES it)
+     *     re-encoded jpeg q55       -> distance 3   (exact match MISSES it)
+     *     a different bey entirely  -> distance 9
+     *
+     * So this online check reliably catches a RESIZE and will miss a re-encode.
+     * An earlier revision of this comment claimed both produce an identical
+     * hash; that was wrong. `dHashDistance` and `DHASH_DUPLICATE_MAX_DISTANCE`
+     * are exported for an offline sweep that can afford the pairwise
+     * comparison, which is where the distance-3 case gets caught.
+     */
+    async findByDHash(dHash, limit = 5) {
+        if (!dHash)
+            return [];
+        const snapshot = await this.getCollection()
+            .where("dHash", "==", dHash)
+            .limit(limit)
+            .get();
+        return snapshot.docs.map((d) => this.mapDoc(d));
+    }
     /**
      * Create a new mediaAssets document with a collision-safe shortId.
      * Tries `preferredShortId` first, then appends a random 4-char suffix up to

package/dist/features/media/trust-signals.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Provenance signals on uploaded imagery — plan A7.
+ *
+ * ## 🛑 A FLAG, never a rejection
+ *
+ * Nothing here blocks an upload or hides a listing. Every signal is recorded
+ * on the `mediaAssets` row for a human to look at, because every one of them
+ * has a legitimate explanation: a seller may genuinely own the Amazon listing
+ * the photo came from, and an AI-generated image is a reasonable choice for an
+ * art listing's mock-up. Auto-rejecting on a heuristic means refusing honest
+ * sellers on a filename.
+ *
+ * ## What is grounded in measurement
+ *
+ * From the fifteen-site competitor crawl
+ * (`docs/research/competitor-crawl-2026-10/images.md`):
+ *
+ *   bladekingbeys — **138 images named with Amazon's CDN pattern**
+ *                   (`..._AC_SL1500_.jpg`) plus `ChatGPT-Image-*.png` files.
+ *                   A storefront built from other people's product shots.
+ *
+ * ## 🛑 What is deliberately NOT a signal
+ *
+ * `rn-image_picker_lib_temp_*` (React Native's image picker) and
+ * `WhatsApp-Image-*` are what REAL sellers' uploads look like — measured,
+ * toycollectorsindia and beyyuniverse upload exactly that way, and
+ * beyyuniverse's entire catalogue is `WhatsApp-Image-*.jpeg`. Flagging them
+ * would put a flag on nearly every honest phone upload, which trains
+ * moderators to dismiss the queue — and a queue nobody reads is worse than no
+ * queue, because it looks like oversight.
+ *
+ * That asymmetry is the whole design: flag the patterns that indicate the
+ * image came from someone ELSE'S listing, never the ones that merely indicate
+ * it came from a phone.
+ */
+/** One recorded provenance concern. Stable strings — they are persisted. */
+export declare const MEDIA_TRUST_FLAG: {
+    /** Filename carries Amazon's CDN size suffix, e.g. `..._AC_SL1500_.jpg`. */
+    readonly AMAZON_CDN_FILENAME: "amazon-cdn-filename";
+    /** Filename is an AI image generator's default output name. */
+    readonly AI_GENERATED_FILENAME: "ai-generated-filename";
+    /**
+     * Byte-level near-duplicate of an image a DIFFERENT uploader already has.
+     *
+     * Same-uploader duplicates are normal and are NOT flagged — a seller
+     * reusing one photo across their own variants is ordinary behaviour.
+     */
+    readonly CROSS_SELLER_DUPLICATE: "cross-seller-duplicate";
+};
+export type MediaTrustFlag = (typeof MEDIA_TRUST_FLAG)[keyof typeof MEDIA_TRUST_FLAG];
+/**
+ * Provenance flags derivable from the filename alone.
+ *
+ * Takes the ORIGINAL client filename, not the storage path — our own paths are
+ * content-derived slugs (§ Media Filename Slug Patterns) and carry none of
+ * this.
+ */
+export declare function filenameTrustFlags(originalFilename: string | undefined | null): MediaTrustFlag[];
+/**
+ * Hamming distance between two hex dHashes — the number of differing bits.
+ *
+ * 0 is byte-identical-after-downscale; under ~5 is "the same photograph,
+ * re-encoded or lightly cropped". Returns `null` when the two cannot be
+ * compared (different lengths, non-hex), because a fabricated distance would
+ * feed a flag.
+ */
+export declare function dHashDistance(a: string | undefined, b: string | undefined): number | null;
+/**
+ * How close two dHashes must be to count as the same photograph.
+ *
+ * 🛑 Deliberately TIGHT, and the number comes from measurement rather than
+ * from the usual "distance < 10" folklore. Against one real catalogue image:
+ *
+ *     resized to 220px wide    -> 0
+ *     re-encoded jpeg q55      -> 3
+ *     a DIFFERENT bey          -> 9
+ *
+ * So the usable gap is 3-vs-9, which is real but not generous: product
+ * photography is self-similar (same item class, same white background, same
+ * angle), so a loose threshold here is a flag GENERATOR rather than a signal,
+ * and a queue full of false flags is worse than no queue because it looks like
+ * oversight. 5 sits above the re-encode and well below the different-item
+ * case.
+ */
+export declare const DHASH_DUPLICATE_MAX_DISTANCE = 5;

package/dist/features/media/trust-signals.js

@@ -0,0 +1,126 @@
+/**
+ * Provenance signals on uploaded imagery — plan A7.
+ *
+ * ## 🛑 A FLAG, never a rejection
+ *
+ * Nothing here blocks an upload or hides a listing. Every signal is recorded
+ * on the `mediaAssets` row for a human to look at, because every one of them
+ * has a legitimate explanation: a seller may genuinely own the Amazon listing
+ * the photo came from, and an AI-generated image is a reasonable choice for an
+ * art listing's mock-up. Auto-rejecting on a heuristic means refusing honest
+ * sellers on a filename.
+ *
+ * ## What is grounded in measurement
+ *
+ * From the fifteen-site competitor crawl
+ * (`docs/research/competitor-crawl-2026-10/images.md`):
+ *
+ *   bladekingbeys — **138 images named with Amazon's CDN pattern**
+ *                   (`..._AC_SL1500_.jpg`) plus `ChatGPT-Image-*.png` files.
+ *                   A storefront built from other people's product shots.
+ *
+ * ## 🛑 What is deliberately NOT a signal
+ *
+ * `rn-image_picker_lib_temp_*` (React Native's image picker) and
+ * `WhatsApp-Image-*` are what REAL sellers' uploads look like — measured,
+ * toycollectorsindia and beyyuniverse upload exactly that way, and
+ * beyyuniverse's entire catalogue is `WhatsApp-Image-*.jpeg`. Flagging them
+ * would put a flag on nearly every honest phone upload, which trains
+ * moderators to dismiss the queue — and a queue nobody reads is worse than no
+ * queue, because it looks like oversight.
+ *
+ * That asymmetry is the whole design: flag the patterns that indicate the
+ * image came from someone ELSE'S listing, never the ones that merely indicate
+ * it came from a phone.
+ */
+/** One recorded provenance concern. Stable strings — they are persisted. */
+export const MEDIA_TRUST_FLAG = {
+    /** Filename carries Amazon's CDN size suffix, e.g. `..._AC_SL1500_.jpg`. */
+    AMAZON_CDN_FILENAME: "amazon-cdn-filename",
+    /** Filename is an AI image generator's default output name. */
+    AI_GENERATED_FILENAME: "ai-generated-filename",
+    /**
+     * Byte-level near-duplicate of an image a DIFFERENT uploader already has.
+     *
+     * Same-uploader duplicates are normal and are NOT flagged — a seller
+     * reusing one photo across their own variants is ordinary behaviour.
+     */
+    CROSS_SELLER_DUPLICATE: "cross-seller-duplicate",
+};
+/*
+ * `_AC_` is Amazon's image-transform marker and `_SL<digits>_` its size
+ * directive; together they are unmistakable and do not occur in ordinary
+ * filenames. Matching `_AC_` alone would false-positive on anything with those
+ * letters between underscores.
+ */
+const AMAZON_CDN_RX = /_AC_[A-Z]{0,4}\d*_|_SL\d{3,4}_/;
+/*
+ * Default output names from the common generators. Anchored to the START so a
+ * seller who writes "chatgpt-image-of-my-bey.jpg" by hand is not caught by a
+ * substring — the signal is "this is the tool's untouched default", not "the
+ * word appears".
+ */
+const AI_FILENAME_RX = /^(?:chatgpt-image-|dall[·e-]*e-|midjourney_|stable-?diffusion-|gemini-generated-image)/i;
+/**
+ * Provenance flags derivable from the filename alone.
+ *
+ * Takes the ORIGINAL client filename, not the storage path — our own paths are
+ * content-derived slugs (§ Media Filename Slug Patterns) and carry none of
+ * this.
+ */
+export function filenameTrustFlags(originalFilename) {
+    if (!originalFilename)
+        return [];
+    const name = originalFilename.trim();
+    if (!name)
+        return [];
+    const flags = [];
+    if (AMAZON_CDN_RX.test(name))
+        flags.push(MEDIA_TRUST_FLAG.AMAZON_CDN_FILENAME);
+    if (AI_FILENAME_RX.test(name))
+        flags.push(MEDIA_TRUST_FLAG.AI_GENERATED_FILENAME);
+    return flags;
+}
+/**
+ * Hamming distance between two hex dHashes — the number of differing bits.
+ *
+ * 0 is byte-identical-after-downscale; under ~5 is "the same photograph,
+ * re-encoded or lightly cropped". Returns `null` when the two cannot be
+ * compared (different lengths, non-hex), because a fabricated distance would
+ * feed a flag.
+ */
+export function dHashDistance(a, b) {
+    if (!a || !b || a.length !== b.length)
+        return null;
+    let distance = 0;
+    for (let i = 0; i < a.length; i += 1) {
+        const x = Number.parseInt(a[i], 16);
+        const y = Number.parseInt(b[i], 16);
+        if (Number.isNaN(x) || Number.isNaN(y))
+            return null;
+        let diff = x ^ y;
+        while (diff) {
+            distance += diff & 1;
+            diff >>= 1;
+        }
+    }
+    return distance;
+}
+/**
+ * How close two dHashes must be to count as the same photograph.
+ *
+ * 🛑 Deliberately TIGHT, and the number comes from measurement rather than
+ * from the usual "distance < 10" folklore. Against one real catalogue image:
+ *
+ *     resized to 220px wide    -> 0
+ *     re-encoded jpeg q55      -> 3
+ *     a DIFFERENT bey          -> 9
+ *
+ * So the usable gap is 3-vs-9, which is real but not generous: product
+ * photography is self-similar (same item class, same white background, same
+ * angle), so a loose threshold here is a flag GENERATOR rather than a signal,
+ * and a queue full of false flags is worse than no queue because it looks like
+ * oversight. 5 sits above the re-encode and well below the different-item
+ * case.
+ */
+export const DHASH_DUPLICATE_MAX_DISTANCE = 5;

package/dist/features/parts/components/PartDetailPageView.d.ts

@@ -41,8 +41,21 @@ export interface PartDetailPageViewProps {
     listingsTruncated?: boolean;
     /** Where "see all listings" goes — a real search, not a fabricated filter. */
     allListingsHref: string;
+    /**
+     * Listings naming THIS exact glossary entry, via `partGlossaryId` — spares
+     * and any other individually-sold component carrying it.
+     *
+     * 🛑 A SEPARATE section from `listings` above, not a narrower version of it.
+     * `listings` is a fuzzy name search across the GENERAL catalogue
+     * (`GENERIC_PRODUCT_LISTING_TYPES`), which `spares` is deliberately excluded
+     * from (`inGeneralCatalogue: false`) — so a spare of this exact part could
+     * never appear there no matter how precisely it was titled. This section is
+     * the one place that gap is closed.
+     */
+    exactListings?: readonly PartListingRow[];
+    exactListingsTruncated?: boolean;
     /** A model's own page, when the composition resolved to a category. */
     hrefForModel: (categoryId: string) => string;
     hrefForClassification: (slot: string) => string;
 }
-export declare function PartDetailPageView({ part, usedBy, listings, listingsTruncated, allListingsHref, hrefForModel, hrefForClassification, }: PartDetailPageViewProps): React.JSX.Element;
+export declare function PartDetailPageView({ part, usedBy, listings, listingsTruncated, allListingsHref, exactListings, exactListingsTruncated, hrefForModel, hrefForClassification, }: PartDetailPageViewProps): React.JSX.Element;

package/dist/features/parts/components/PartDetailPageView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Section, Container, Stack, Row, Div, Heading, Text, Span, TextLink, Badge, } from "../../../ui/index.js";
 import { PART_SLOT_LABEL, } from "../schemas/firestore.js";
-export function PartDetailPageView({ part, usedBy, listings, listingsTruncated, allListingsHref, hrefForModel, hrefForClassification, }) {
+export function PartDetailPageView({ part, usedBy, listings, listingsTruncated, allListingsHref, exactListings = [], exactListingsTruncated, hrefForModel, hrefForClassification, }) {
     const classification = PART_SLOT_LABEL[part.slot] ?? part.classification ?? part.slot;
     /*
      * 🛑 Only 23 of 753 parts carry a code, and that is a fact about the sources
@@ -16,5 +16,5 @@ export function PartDetailPageView({ part, usedBy, listings, listingsTruncated,
                                                 /* 49 of 259 compositions did not join to a category.
                                                    A link to a page that does not exist is worse than
                                                    plain text, so the name renders unlinked. */
-                                                _jsx(Text, { color: "primary", children: m.name })), m.system && (_jsxs(Span, { size: "xs", color: "muted", children: [" ", "\u00B7 ", m.system] }))] }), m.productCode && (_jsx(Text, { size: "xs", color: "faint", className: "flex-shrink-0", children: m.productCode }))] }, m.id))) }))] }), _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsxs(Row, { justify: "between", align: "center", wrap: true, gap: "sm", className: "min-w-0", children: [_jsxs(Heading, { level: 2, size: "lg", children: ["Listings", listingsTruncated && (_jsxs(Span, { size: "sm", color: "muted", children: [" ", "(", listings.length, "+)"] }))] }), listings.length > 0 && (_jsx(TextLink, { href: allListingsHref, children: "See all listings \u2192" }))] }), listings.length === 0 ? (_jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsx(Text, { color: "muted", size: "sm", children: "Nobody is selling this part right now." }), _jsx(TextLink, { href: allListingsHref, children: "Search the catalogue \u2192" })] })) : (_jsx(Stack, { gap: "xs", className: "min-w-0", children: listings.map((l) => (_jsxs(Div, { surface: "card", padding: "sm", rounded: "md", border: "subtle", className: "min-w-0", children: [_jsx(TextLink, { href: l.href, children: l.title }), l.condition && (_jsx(Text, { size: "xs", color: "muted", children: l.condition }))] }, l.id))) }))] }), part.source && (_jsxs(Text, { size: "xs", color: "faint", children: ["Source: ", part.source] }))] }) }) }));
+                                                _jsx(Text, { color: "primary", children: m.name })), m.system && (_jsxs(Span, { size: "xs", color: "muted", children: [" ", "\u00B7 ", m.system] }))] }), m.productCode && (_jsx(Text, { size: "xs", color: "faint", className: "flex-shrink-0", children: m.productCode }))] }, m.id))) }))] }), exactListings.length > 0 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsxs(Heading, { level: 2, size: "lg", children: ["Buy this part", exactListingsTruncated && (_jsxs(Span, { size: "sm", color: "muted", children: [" ", "(", exactListings.length, "+)"] }))] }), _jsx(Stack, { gap: "xs", className: "min-w-0", children: exactListings.map((l) => (_jsxs(Div, { surface: "card", padding: "sm", rounded: "md", border: "subtle", className: "min-w-0", children: [_jsx(TextLink, { href: l.href, children: l.title }), l.condition && (_jsx(Text, { size: "xs", color: "muted", children: l.condition }))] }, l.id))) })] })), _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsxs(Row, { justify: "between", align: "center", wrap: true, gap: "sm", className: "min-w-0", children: [_jsxs(Heading, { level: 2, size: "lg", children: ["Listings", listingsTruncated && (_jsxs(Span, { size: "sm", color: "muted", children: [" ", "(", listings.length, "+)"] }))] }), listings.length > 0 && (_jsx(TextLink, { href: allListingsHref, children: "See all listings \u2192" }))] }), listings.length === 0 ? (_jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsx(Text, { color: "muted", size: "sm", children: "Nobody is selling this part right now." }), _jsx(TextLink, { href: allListingsHref, children: "Search the catalogue \u2192" })] })) : (_jsx(Stack, { gap: "xs", className: "min-w-0", children: listings.map((l) => (_jsxs(Div, { surface: "card", padding: "sm", rounded: "md", border: "subtle", className: "min-w-0", children: [_jsx(TextLink, { href: l.href, children: l.title }), l.condition && (_jsx(Text, { size: "xs", color: "muted", children: l.condition }))] }, l.id))) }))] }), part.source && (_jsxs(Text, { size: "xs", color: "faint", children: ["Source: ", part.source] }))] }) }) }));
 }

package/dist/features/parts/components/PartsIndexPageView.d.ts

@@ -1,5 +1,5 @@
 /**
- * D12 — the parts database index, and one classification's listing.
+ * D12 — the Beyblade parts gallery index, and one classification's listing.
  *
  * ── 🛑 THE INDEX COSTS ZERO FIRESTORE READS ────────────────────────────────
  *
@@ -20,8 +20,17 @@ import React from "react";
 import { type PartGlossaryDocument, type PartSlot } from "../schemas/firestore";
 export interface PartsIndexPageViewProps {
     hrefForClassification: (slot: string) => string;
+    /**
+     * The search box, as a SLOT.
+     *
+     * 🛑 Not rendered directly, because this view is a Server Component and
+     * the box is a Client Component that fetches. Keeping it a slot also keeps
+     * the page's "ZERO Firestore reads" property literally true — the box
+     * reads a CDN object, never Firestore, and the index page stays static.
+     */
+    renderSearch?: () => React.ReactNode;
 }
-export declare function PartsIndexPageView({ hrefForClassification }: PartsIndexPageViewProps): React.JSX.Element;
+export declare function PartsIndexPageView({ hrefForClassification, renderSearch, }: PartsIndexPageViewProps): React.JSX.Element;
 export interface PartClassificationPageViewProps {
     slot: PartSlot;
     parts: readonly PartGlossaryDocument[];

package/dist/features/parts/components/PartsIndexPageView.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Section, Container, Stack, Row, Div, Grid, Heading, Text, Span, TextLink, Badge, } from "../../../ui/index.js";
 import { ALL_PART_SLOTS, PART_SLOT_LABEL, } from "../schemas/firestore.js";
-export function PartsIndexPageView({ hrefForClassification }) {
-    return (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", className: "min-w-0", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 1, children: "Parts database" }), _jsxs(Text, { color: "muted", children: ["Every component we have a record of, by what it is. A code like", " ", _jsx(Span, { weight: "semibold", children: "RF" }), " or ", _jsx(Span, { weight: "semibold", children: "105" }), " means different things in different generations, so parts are grouped by their classification rather than by code."] })] }), _jsx(Grid, { cols: "navTiles", gap: "sm", className: "min-w-0", children: ALL_PART_SLOTS.map((slot) => (_jsx(Div, { surface: "card", padding: "sm", rounded: "md", border: "subtle", className: "min-w-0", children: _jsx(TextLink, { href: hrefForClassification(slot), children: PART_SLOT_LABEL[slot] }) }, slot))) })] }) }) }));
+export function PartsIndexPageView({ hrefForClassification, renderSearch, }) {
+    return (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", className: "min-w-0", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 1, children: "Beyblade parts gallery" }), _jsxs(Text, { color: "muted", children: ["Every component we have a record of, by what it is. A code like", " ", _jsx(Span, { weight: "semibold", children: "RF" }), " or ", _jsx(Span, { weight: "semibold", children: "105" }), " means different things in different generations, so parts are grouped by their classification rather than by code."] })] }), renderSearch?.(), _jsx(Grid, { cols: "navTiles", gap: "sm", className: "min-w-0", children: ALL_PART_SLOTS.map((slot) => (_jsx(Div, { surface: "card", padding: "sm", rounded: "md", border: "subtle", className: "min-w-0", children: _jsx(TextLink, { href: hrefForClassification(slot), children: PART_SLOT_LABEL[slot] }) }, slot))) })] }) }) }));
 }
 /** `performance-tip--rf` → `rf`. The id's tail IS the URL segment. */
 function tailOf(partId) {

package/dist/features/parts/components/PartsSearchBox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface PartsSearchBoxProps {
+    /** `siteSettings.search?.indexEnabled`. Read as `!== false`. */
+    indexEnabled?: boolean;
+    placeholder?: string;
+    /** Rows shown. A part search is a lookup, not a browse. */
+    limit?: number;
+}
+export declare function PartsSearchBox({ indexEnabled, placeholder, limit, }: PartsSearchBoxProps): React.JSX.Element;