@mohasinac/appkit 4.52.5 → 4.53.1

package/dist/features/categories/components/CategoryDetailPageView.js

@@ -3,11 +3,12 @@ import { Row, SIEVE_OP, sieveAnd, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import { categoryCrumbs, withTrailHead } from "../utils/breadcrumb-chain.js";
 import { ownTotalFor, descendantTotalFor } from "../schemas/category-counts.js";
-import Link from "next/link.js";
 import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories/index.js";
 import { Container, Div, Heading, ImageMosaic, Main, MOSAIC_MIN, Section, Span, SplitTile, Stack, Text } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { RichTextRenderer } from "../../../ui/rich-text/RichTextRenderer.js";
+import { resolveTaxonomyVisual } from "../utils/taxonomy-visual.js";
+import { SubcategoryCardRow } from "./SubcategoryCardRow.js";
 import { CategoryDetailTabs } from "./CategoryDetailTabs.js";
 import { CategoryGrid } from "./CategoryGrid.js";
 import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSection.js";
@@ -28,10 +29,97 @@ import { toStoreListItem } from "../../../_internal/server/features/stores/adapt
 import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility.js";
 const __O = {
     hidden: "overflow-hidden",
-    xAuto: "overflow-x-auto",
 };
 /** The page's content width, repeated across every section on this view. */
 const __W = "max-w-7xl mx-auto";
+/**
+ * Direct children → the Subcategories row's items.
+ *
+ * 🛑 THE ROLLUP, not the own count — `totalProductCount`, the same number the
+ * header pill reads and the same one `CategoryGrid` shows.
+ *
+ * These chips used to read `metrics.productCount`, which is items filed
+ * DIRECTLY under that child and excludes its own descendants. So on a parent
+ * whose header said 20, the chips beneath it could sum to 5 — two different
+ * questions answered with the same-looking number, side by side, with nothing
+ * saying which was which. The rule the catalogue is built on: a category's
+ * count is its own items plus every descendant's, and clicking it lists
+ * exactly those items.
+ *
+ * Admin surfaces that genuinely need both still show both —
+ * `CategoryTableColumns` renders "own (total)" explicitly.
+ */
+/*
+ * 🛑 products + auctions, SUMMED.
+ *
+ * `metrics.productCount` EXCLUDES auctions — `Tally` keeps `productIds` and
+ * `auctionIds` as separate arrays and writes `auctionCount` /
+ * `totalAuctionCount` alongside, so the comparable "how much is in here"
+ * figure is the sum of both. Reading only the product half understated every
+ * subcategory holding an auction, and understated it silently: the chip
+ * showed a plausible smaller number rather than anything that looked wrong.
+ *
+ * This page already derives its own header figures correctly that way
+ * (`productCount` and `auctionCount` resolved separately further down); this
+ * was the one place that took the product half for the whole.
+ *
+ * Prefer the rollup (`total*`) over the own-count for both halves, because a
+ * chip is a navigational promise about the whole subtree you are about to
+ * enter, not about what happens to be filed at that exact node. Shared by
+ * `toSubcategoryItems` (the chip's badge count) and the scroller's own
+ * filter below, so the two can't disagree about what "has listings" means.
+ */
+function listingCountFor(child) {
+    const products = child.metrics?.totalProductCount ?? child.metrics?.productCount ?? 0;
+    const auctions = child.metrics?.totalAuctionCount ?? child.metrics?.auctionCount ?? 0;
+    return products + auctions;
+}
+/**
+ * Direct children → the Subcategory card row's items.
+ *
+ * `descendants` is the SAME array the page already fetched, passed in so each
+ * card can carry its own direct children's names for the filter. One level
+ * only — see `SubcategoryCardRow`'s header for why matching the whole subtree
+ * would surface cards for names the visitor never sees.
+ */
+function toSubcategoryItems(children, descendants) {
+    /*
+     * Grandchildren indexed by parent in ONE pass. The alternative — filtering
+     * `descendants` inside the map — is O(children x descendants), and on the
+     * spinning-tops root that is 5 x ~1,200 per render for a list that never
+     * changes.
+     *
+     * 🛑 Keyed on `parentIds[last]`, the IMMEDIATE parent. `parentIds` holds the
+     * full ancestor chain, so testing `.includes(child.id)` would match every
+     * descendant at any depth and quietly turn the one-level rule into a
+     * whole-subtree match.
+     */
+    const childNamesByParent = new Map();
+    for (const d of descendants) {
+        const parent = d.parentIds?.[d.parentIds.length - 1];
+        if (!parent)
+            continue;
+        const list = childNamesByParent.get(parent);
+        if (list)
+            list.push(d.name);
+        else
+            childNamesByParent.set(parent, [d.name]);
+    }
+    return children.map((child) => {
+        const count = listingCountFor(child);
+        return {
+            id: child.id,
+            name: child.name,
+            // Omitted rather than rendered as 0 — `count` is "not counted" when
+            // undefined, and a card reading "0" invites a click that lands on an
+            // empty page.
+            count: count > 0 ? count : undefined,
+            href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)),
+            childNames: childNamesByParent.get(child.id) ?? [],
+            ...resolveTaxonomyVisual(child),
+        };
+    });
+}
 /**
  * Read and display bounds for this page. Every one of these replaced an
  * unbounded read — see the comments at each use site for what each one cost.
@@ -184,9 +272,76 @@ export async function CategoryDetailPageView({ slug }) {
             })
             : Promise.resolve([]),
     ]);
+    // 🛑 SAME TIER ONLY. `rootSiblingCategories` spans the whole root subtree —
+    // siblings AND cousins across every depth — so without a tier check this
+    // rendered deeper descendants (children, grandchildren) as "related",
+    // which reads as a second, redundant Subcategories row rather than a set
+    // of actual peers. A category with no siblings at its own tier correctly
+    // shows nothing here; the tier-grouped descendant tabs above already cover
+    // "what's below this category".
     const relatedCategories = rootSiblingCategories
-        .filter((c) => c.id !== category?.id && (!c.categoryType || c.categoryType === "category"))
+        .filter((c) => c.id !== category?.id &&
+        (!c.categoryType || c.categoryType === "category") &&
+        c.tier === category?.tier)
         .slice(0, RELATED_CATEGORY_LIMIT);
+    // 🛑 ONLY children that actually have something in them. A direct child
+    // with zero listings anywhere in its own subtree is a dead end — clicking
+    // it opens an empty category page — so it's dropped from the chip row
+    // rather than rendered with no count badge. `listingCountFor` reads the
+    // ROLLUP (own + descendants), so a child that merely has no listings of
+    // its OWN but does further down is correctly kept.
+    const directChildrenWithListings = childCategories
+        .filter((c) => c.tier === (category?.tier ?? 0) + 1)
+        .filter((c) => listingCountFor(c) > 0);
+    /*
+     * The ancestor chain as cards, root first.
+     *
+     * 🛑 `ancestor.id` is used as the slug, which is correct HERE and is not a
+     * general licence: categories are one of this codebase's "pure slug"
+     * collections (`id === slug`), so the two are interchangeable for a category
+     * row. `CategoryAncestor` carries only `{id, name, tier}` — no slug field —
+     * so the alternative would be a lookup per ancestor for a value already in
+     * hand.
+     *
+     * `tier` comes from the stored ancestor rather than the array index: the
+     * index is only the depth if the chain is complete, and a chain that skipped
+     * a tier would silently relabel every level below it (the closure-skip case
+     * CLAUDE.md records under the counters invariant).
+     */
+    /*
+     * `CategoryAncestor` is `{id, name, tier}` and carries no display block, so
+     * the artwork is looked up in rows this page ALREADY fetched —
+     * `rootSiblingCategories` spans the whole root subtree, which is where an
+     * ancestor lives. A miss simply yields no visual and the card falls back,
+     * which is why this is a plain lookup and not another read.
+     */
+    const rowsById = new Map();
+    for (const c of [...rootSiblingCategories, ...childCategories]) {
+        if (c?.id)
+            rowsById.set(c.id, c);
+    }
+    /*
+     * 🛑 The IMMEDIATE parent only — one card, never the chain.
+     *
+     * `ancestors` is ordered root-first, so the last entry is the direct parent
+     * and everything before it is a grandparent. Rendering the whole ladder put
+     * four cards on a tier-4 page for a path the breadcrumb at the top of the
+     * page already spells out in full, and the uncles/grandparents are not
+     * places you step to from here — the one move this row needs to afford is
+     * "up one".
+     */
+    const immediateParent = (category?.ancestors ?? []).at(-1);
+    const parentLadder = immediateParent
+        ? [
+            {
+                id: immediateParent.id,
+                name: immediateParent.name,
+                href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(immediateParent.id)),
+                level: immediateParent.tier,
+                ...resolveTaxonomyVisual(rowsById.get(immediateParent.id) ?? null),
+            },
+        ]
+        : [];
     // Stores tab — stores whose storeCategory is this category or ANY descendant.
     //
     // `storeCategory` is a single slug with no ancestor chain (unlike a product's
@@ -250,7 +405,16 @@ export async function CategoryDetailPageView({ slug }) {
          * and it cast `createdAt` through `as unknown as string` where the adapter
          * converts a Timestamp properly.
          */
-        .map((s) => toStoreListItem(s));
+        .map((s) => toStoreListItem(s))
+        // 🛑 `storeCategory` is a one-time "primarily sells this" tag, not proof
+        // of current stock — a store can match the category and still have
+        // nothing listed right now (the exact shape of the empty-store report
+        // this filter closes). Listing it here sends a visitor into a store page
+        // with nothing to buy, so only stores that actually have products are
+        // kept. `totalProducts` is the denormalised `stats.totalProducts`
+        // counter, incremented atomically on create/delete — cheap to read here,
+        // unlike a per-store query.
+        .filter((s) => (s.totalProducts ?? 0) > 0);
     const storeCount = categoryStores.length;
     // `tabCounts` is keyed by tabSlug and already covers every listing type plus
     // bundles; `stores` is added here because this page resolves its store list
@@ -398,7 +562,7 @@ export async function CategoryDetailPageView({ slug }) {
     const ldFaq = category?.faqs && category.faqs.length > 0
         ? faqJsonLd(category.faqs.map((f) => ({ question: f.question, answer: f.answer })))
         : null;
-    return (_jsxs(Main, { children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldBreadcrumb) } }), _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldCollection) } }), ldFaq && (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldFaq) } })), _jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && hasMosaic && (_jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", padding: "x-md", children: _jsx(Div, { padding: "t-lg", children: _jsx(ImageMosaic, { images: mosaicImages, alt: `${category?.name ?? slug} on LetItRip` }) }) })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsx(BreadcrumbTrail, { crumbs: trail, className: "mb-4", tone: hasCover ? "on-media" : "default" }), category?.id && _jsx(LastCategoryBeacon, { categoryId: category.id }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), showCountSplit && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "muted", size: "xs", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [ownHere.toLocaleString(), " here \u00B7 ", inSubcategories.toLocaleString(), " in subcategories"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), contentBody && contentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: contentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), compositions.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "md", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "What it is made of" }), _jsx(ModelCompositionPanel, { compositions: compositions, hrefForPart: (slot, tail) => String(ROUTES.PUBLIC.PART_DETAIL(slot, tail)) })] }) }) })), (() => {
+    return (_jsxs(Main, { children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldBreadcrumb) } }), _jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldCollection) } }), ldFaq && (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(ldFaq) } })), _jsxs(Section, { className: `relative ${__O.hidden} ${hasCover ? "min-h-[220px] md:min-h-[280px]" : "bg-[var(--appkit-color-bg)]"}`, children: [hasCover && (_jsxs(_Fragment, { children: [_jsx(Div, { className: "absolute inset-0", children: _jsx(MediaImage, { src: coverImage, alt: "", size: "banner" }) }), _jsx(Div, { surface: "overlay-md", className: "absolute inset-0" })] })), !hasCover && hasMosaic && (_jsx(Div, { className: "relative z-10 max-w-7xl mx-auto", padding: "x-md", children: _jsx(Div, { padding: "t-lg", children: _jsx(ImageMosaic, { images: mosaicImages, alt: `${category?.name ?? slug} on LetItRip` }) }) })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsx(BreadcrumbTrail, { crumbs: trail, className: "mb-4", tone: hasCover ? "on-media" : "default" }), category?.id && _jsx(LastCategoryBeacon, { categoryId: category.id }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mb-4 ${hasCover ? "/80" : ""}`, size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), showCountSplit && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "muted", size: "xs", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [ownHere.toLocaleString(), " here \u00B7 ", inSubcategories.toLocaleString(), " in subcategories"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), category?.hasbroName && (_jsx(Section, { padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Row, { gap: "md", align: "center", wrap: true, children: [category.hasbroCoverImage && (_jsx(MediaImage, { src: category.hasbroCoverImage, alt: `${category.hasbroName} logo`, size: "thumbnail", className: "h-12 w-auto flex-shrink-0" })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", transform: "uppercase", weight: "medium", children: "Also known as" }), _jsx(Text, { weight: "semibold", children: category.hasbroName }), _jsxs(Text, { size: "xs", color: "muted", children: ["The same wave, named differently outside Japan \u2014 Takara-Tomy releases it as ", category.name, ", Hasbro as ", category.hasbroName, ". Both names find these listings."] })] })] }) }) })), contentBody && contentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: contentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), compositions.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "md", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "What it is made of" }), _jsx(ModelCompositionPanel, { compositions: compositions, hrefForPart: (slot, tail) => String(ROUTES.PUBLIC.PART_DETAIL(slot, tail)) })] }) }) })), (() => {
                 if (category?.tier !== 0)
                     return null;
                 const branches = childCategories.filter((c) => c.tier === 1);
@@ -423,12 +587,5 @@ export async function CategoryDetailPageView({ slug }) {
                                 imageUrl: coverOf(b),
                                 countLabel: countOf(b),
                             } }) }) }));
-            })(), childCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "inline", children: (() => {
-                        const directChildren = childCategories.filter((c) => c.tier === (category?.tier ?? 0) + 1);
-                        if (directChildren.length === 0)
-                            return null;
-                        return (_jsxs(Div, { padding: "b-2xs", children: [_jsx(Text, { size: "xs", color: "muted", weight: "medium", className: "mb-[var(--appkit-space-1-5)]", children: "Subcategories" }), _jsx(Div, { layout: "flex", gap: "2", className: `${__O.xAuto} [scrollbar-width:none]`, padding: "b-2xs", children: directChildren.map((child) => (_jsxs(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(child.slug)), 
-                                        // audit-responsive-wrap-ok: deliberate horizontal-scroll chip row (parent has overflow-x-auto) — each chip staying single-line is the intended design, not hidden content
-                                        className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1-5)] rounded-full border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] px-[var(--appkit-space-4)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:border-primary hover:text-primary transition-colors whitespace-nowrap", children: [child.display?.icon && (_jsx(Span, { className: "leading-none", children: child.display.icon })), child.name, (child.metrics?.totalProductCount ?? child.metrics?.productCount ?? 0) > 0 && (_jsx(Span, { size: "xs", color: "muted", children: (child.metrics?.totalProductCount ?? child.metrics?.productCount ?? 0).toLocaleString() }))] }, child.id))) })] }));
-                    })() }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: counts, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
+            })(), directChildrenWithListings.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "inline", children: _jsxs(Div, { padding: "b-2xs", children: [parentLadder.length > 0 && (_jsx(Div, { padding: "b-2xs", children: _jsx(SubcategoryCardRow, { items: parentLadder, label: "Parent category" }) })), _jsx(SubcategoryCardRow, { items: toSubcategoryItems(directChildrenWithListings, childCategories) })] }) }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: counts, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
 }

package/dist/features/categories/components/CategoryDetailTabs.js

@@ -37,6 +37,18 @@ const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("live").tabSlug]: ["live"],
     // The combined Art & Stickers tab spans both types under the `art` slug.
     [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
+    /*
+     * Spares render generically — there is nothing type-specific to show beyond
+     * a product grid, unlike an auction (countdown, bid history) or a prize draw
+     * (entries remaining).
+     *
+     * 🛑 This map is hand-written and a missing entry is a tab you can CLICK that
+     * renders an empty panel. It is covered — `audit-tab-body-coverage` exists
+     * for precisely this, after `CategoryDetailTabs` showed a blank panel for
+     * four types while `BrandDetailTabs` silently dropped the same four — so the
+     * eleventh type will be caught rather than discovered.
+     */
+    [pluginFor("spares").tabSlug]: ["spares"],
 };
 export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, enabledListingTypes, enabledCategoryTypes, }) {
     const countFor = (id) => counts?.[id];

package/dist/features/categories/components/CategoryGrid.js

@@ -18,7 +18,16 @@ export function CategoryCard({ category, href, onClick, className = "", }) {
     // own-node-only productCount so a parent category's card shows the same
     // "N products" a visitor actually sees once they open the page.
     const productCount = category.metrics?.totalProductCount ?? category.metrics?.productCount ?? category.productCount ?? 0;
-    const inner = (_jsxs(Stack, { className: "h-full", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-[4/3] w-full ${__O.hidden} flex-shrink-0`, children: [(category.display?.mosaicImages?.length ?? 0) >= MOSAIC_MIN ? (_jsx(ImageMosaic, { images: category.display.mosaicImages, alt: category.name, className: "h-full w-full" })) : category.display?.coverImage ? (_jsx(MediaImage, { src: category.display.coverImage, alt: category.name, size: "card", className: "transition-transform duration-300 group-hover:scale-105" })) : category.display?.color ? (_jsx(DynamicBgDiv, { color: category.display.color, className: "h-full w-full opacity-80" })) : null, category.display?.icon && (_jsx(Row, { textSize: "4xl", className: "absolute inset-0", align: "center", justify: "center", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3}.5`, children: [_jsx(Text, { color: "inverse", className: `leading-snug text-[var(--appkit-color-text)] dark:`, truncate: 2, size: "sm", weight: "semibold", children: category.name }), category.description && (_jsx(Text, { className: `mt-1 flex-1`, color: "muted", truncate: 2, size: "xs", children: category.description })), _jsxs(Row, { className: "mt-2", align: "center", justify: "between", gap: "sm", children: [_jsxs(Text, { size: "xs", color: "faint", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", border: "default", className: "group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", rounded: "md", padding: "pill-sm-tall", color: "muted", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
+    /*
+     * Is a real picture going to render in the image area? Drives the emoji
+     * overlay below, which must not paint over artwork. Deliberately mirrors the
+     * first two branches of the chain rather than being derived from it — the
+     * `color` branch is a flat tint, which an emoji on top of is still the
+     * intended look.
+     */
+    const hasArtwork = (category.display?.mosaicImages?.length ?? 0) >= MOSAIC_MIN ||
+        Boolean(category.display?.coverImage);
+    const inner = (_jsxs(Stack, { className: "h-full", children: [_jsxs(Div, { surface: "muted", className: `relative aspect-[4/3] w-full ${__O.hidden} flex-shrink-0`, children: [(category.display?.mosaicImages?.length ?? 0) >= MOSAIC_MIN ? (_jsx(ImageMosaic, { images: category.display.mosaicImages, alt: category.name, className: "h-full w-full" })) : category.display?.coverImage ? (_jsx(MediaImage, { src: category.display.coverImage, alt: category.name, size: "card", className: "transition-transform duration-300 group-hover:scale-105" })) : category.display?.color ? (_jsx(DynamicBgDiv, { color: category.display.color, className: "h-full w-full opacity-80" })) : null, category.display?.icon && !hasArtwork && (_jsx(Row, { textSize: "4xl", className: "absolute inset-0", align: "center", justify: "center", children: category.display.icon })), category.isFeatured && (_jsx(Span, { size: "xs", className: CLS_FEATURED_DOT, children: "\u2605" }))] }), _jsxs(Stack, { className: `flex-1 ${__P.p3}.5`, children: [_jsx(Text, { color: "inverse", className: `leading-snug text-[var(--appkit-color-text)] dark:`, truncate: 2, size: "sm", weight: "semibold", children: category.name }), category.description && (_jsx(Text, { className: `mt-1 flex-1`, color: "muted", truncate: 2, size: "xs", children: category.description })), _jsxs(Row, { className: "mt-2", align: "center", justify: "between", gap: "sm", children: [_jsxs(Text, { size: "xs", color: "faint", children: [productCount.toLocaleString(), " ", productCount === 1 ? "item" : "items"] }), _jsxs(Span, { layout: "inline-flex", gap: "xs", size: "xs", weight: "medium", border: "default", className: "group-hover:bg-primary group-hover:border-primary group-hover:text-white transition-colors", rounded: "md", padding: "pill-sm-tall", color: "muted", children: ["Browse ", _jsx(ArrowRight, { className: "h-3 w-3" })] })] })] })] }));
     const cardClass = `group relative flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-[var(--appkit-color-surface)] border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm transition hover:shadow-md h-full ${className}`;
     if (href) {
         return (_jsx(Link, { href: href, className: cardClass, children: inner }));

package/dist/features/categories/components/CategorySelectorCreate.js

@@ -33,7 +33,6 @@ function CreateCategoryContent({ allCategories, onSuccess, onCancel, labels, sta
     const { shellCtx, validate } = useFormShellState(categoryDraftSchema);
     useEffect(() => {
         validate(draft);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [draft, validate]);
     const { mutate, isPending: isLoading } = useCreateCategory({
         onSuccess: (res) => {

package/dist/features/categories/components/PriceGuidanceHint.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+export interface PriceGuidanceHintProps {
+    /** Leaf category id/slug the listing is filed under. */
+    categoryId: string;
+    currency?: string;
+    className?: string;
+}
+/**
+ * The seller-facing price hint `description-template/route.ts`'s own
+ * docstring names as "C1's job, from a surface that knows who is asking" —
+ * renders the inherited competitor-derived market band beside the price
+ * field, on the SELLER'S own tax basis (the `/price-guidance` endpoint does
+ * that conversion server-side; this component only formats what it returns).
+ *
+ * Mounted via `ProductForm`'s `renderPriceGuidance` slot rather than fetched
+ * unconditionally inside the form — `ProductForm` has no data-fetching of its
+ * own (every app-specific concern is a render-prop), and this component is
+ * seller/admin-only, not something the form itself should assume a caller
+ * wants.
+ *
+ * 🛑 NEVER mount this on a public page (category/brand detail). A
+ * competitor-derived market band is exactly the "a neighbouring surface
+ * publishes the range" leak the guest price gate exists to close (CLAUDE.md
+ * § "Guest price gating"), even though the figure is advisory rather than a
+ * real listing price — which is also why `/price-guidance` itself is
+ * seller/admin/moderator-gated, not a public, edge-cached endpoint like its
+ * `description-template` sibling.
+ */
+export declare function PriceGuidanceHint({ categoryId, currency, className, }: PriceGuidanceHintProps): React.JSX.Element | null;

package/dist/features/categories/components/PriceGuidanceHint.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { PricesOnly, Stack, Text } from "../../../ui/index.js";
+import { apiClient } from "../../../http/index.js";
+import { CATEGORY_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { formatCurrency } from "../../../utils/number.formatter.js";
+function unwrap(res) {
+    const body = res?.data ?? res;
+    return body && typeof body === "object" && "guidance" in body ? body : null;
+}
+/**
+ * The seller-facing price hint `description-template/route.ts`'s own
+ * docstring names as "C1's job, from a surface that knows who is asking" —
+ * renders the inherited competitor-derived market band beside the price
+ * field, on the SELLER'S own tax basis (the `/price-guidance` endpoint does
+ * that conversion server-side; this component only formats what it returns).
+ *
+ * Mounted via `ProductForm`'s `renderPriceGuidance` slot rather than fetched
+ * unconditionally inside the form — `ProductForm` has no data-fetching of its
+ * own (every app-specific concern is a render-prop), and this component is
+ * seller/admin-only, not something the form itself should assume a caller
+ * wants.
+ *
+ * 🛑 NEVER mount this on a public page (category/brand detail). A
+ * competitor-derived market band is exactly the "a neighbouring surface
+ * publishes the range" leak the guest price gate exists to close (CLAUDE.md
+ * § "Guest price gating"), even though the figure is advisory rather than a
+ * real listing price — which is also why `/price-guidance` itself is
+ * seller/admin/moderator-gated, not a public, edge-cached endpoint like its
+ * `description-template` sibling.
+ */
+export function PriceGuidanceHint({ categoryId, currency = "INR", className = "", }) {
+    const query = useQuery({
+        queryKey: ["category-price-guidance", categoryId],
+        enabled: categoryId.length > 0,
+        staleTime: 60 * 60 * 1000,
+        queryFn: async () => unwrap(await apiClient.get(CATEGORY_ENDPOINTS.PRICE_GUIDANCE(categoryId))),
+    });
+    const guidance = query.data?.guidance;
+    const basisNote = query.data?.basisNote;
+    if (!guidance?.market)
+        return null;
+    const { median, p25, p75 } = guidance.market;
+    const fmt = (n) => formatCurrency(n, currency);
+    // p25/p75 are independently optional (see CategoryPriceGuidance's own
+    // docstring) — a range renders only when BOTH are present, never a
+    // half-range that would misreport the band's shape.
+    const range = p25 !== undefined && p75 !== undefined ? ` (${fmt(p25)}–${fmt(p75)})` : "";
+    /*
+     * `<PricesOnly>` rather than `<GatedPrice>`: this is advisory guidance
+     * BESIDE the seller's own price input, not a listing's primary price, so a
+     * viewer who may not see prices should get nothing here — a "Sign in to see
+     * price" prompt inside a seller form would be nonsense. In practice it
+     * never renders for a guest anyway, because the data source
+     * (`/api/categories/[id]/price-guidance`) is seller/admin/moderator-gated
+     * and 403s before there is a number to format; the wrapper makes that
+     * guarantee visible at the render site instead of implied by the route.
+     */
+    return (_jsx(PricesOnly, { children: _jsxs(Stack, { gap: "xs", className: className, children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Market median:", " ", _jsx(Text, { as: "span", weight: "medium", color: "primary", children: fmt(median) }), range, basisNote?.suffix ? ` ${basisNote.suffix}` : ""] }), basisNote?.note && _jsx(Text, { size: "xs", color: "faint", children: basisNote.note })] }) }));
+}

package/dist/features/categories/components/SubcategoryCardRow.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface SubcategoryCardItem {
+    id: string;
+    name: string;
+    href: string;
+    /** Rollup listing count. Omitted when zero — a card reading "0" invites a dead click. */
+    count?: number;
+    /** A real picture, when the row resolved one. */
+    imageUrl?: string;
+    /** An emoji, when that is all the row has. Never passed to an `<img>`. */
+    emoji?: string;
+    /** Direct children's names — searched, never rendered. */
+    childNames?: readonly string[];
+    /**
+     * Depth in the forest: 0 is a root, 1 its child, and so on.
+     *
+     * Rendered as a small "L0 / L1 / L2" marker so a row of ancestors reads as a
+     * LADDER rather than as five unrelated cards. Omitted on the subcategory row
+     * itself, where every card is the same depth by construction and the marker
+     * would be noise repeated N times.
+     */
+    level?: number;
+}
+export declare function SubcategoryCardRow({ items, label, }: {
+    items: readonly SubcategoryCardItem[];
+    label?: string;
+}): React.JSX.Element | null;

package/dist/features/categories/components/SubcategoryCardRow.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * WHY: the Subcategories row was a pill per child in an `<OverflowRow>`, which
+ *      collapses to a searchable dropdown when it does not fit. A pill carries
+ *      only a name and a count, so on a tree this wide every child looked the
+ *      same and the row read as a wall of words.
+ * WHAT: small cards in the shared `<HorizontalScroller>`, with a filter box
+ *       that matches ONE LEVEL DEEPER than the cards themselves.
+ *
+ * EXPORTS: SubcategoryCardRow, SubcategoryCardItem
+ *
+ * ## 🛑 The filter matches grandchildren, and that is the point
+ *
+ * Searching "Dranzer" on Spinning Tops should surface *Beyblade Original* —
+ * the card you must click to get there — not nothing. So each card carries its
+ * own direct children's names (`childNames`) and the match runs over the card
+ * name PLUS that list. One level only: the full subtree of a root is ~1,200
+ * nodes, and matching all of it would surface a card because of a name six
+ * levels down that the visitor will never see on the next page either.
+ *
+ * `childNames` is built from data the page has ALREADY fetched
+ * (`getDescendants` is one array-contains query over `parentIds`), so the
+ * filter costs no request — it is pure in-browser narrowing of a list that is
+ * already in memory.
+ *
+ * ## 🛑 Why this does not reintroduce the bug `OverflowRow` was built for
+ *
+ * CLAUDE.md records a bare `overflow-x-auto` row as an anti-pattern, measured:
+ * "4 of 12 subcategories past the right edge with no scrollbar and no arrow".
+ * The discoverability problem is real and this row answers it twice over —
+ * `<HorizontalScroller showArrows>` renders real scroll affordances, and the
+ * filter box makes an off-screen card reachable by typing rather than by
+ * scrolling to it. What is given up is the collapse-to-dropdown behaviour,
+ * which was the fallback for exactly that problem.
+ *
+ * @tag domain:categories
+ * @tag layer:feature
+ * @tag pattern:none
+ * @tag access:client
+ * @tag sideEffects:none
+ */
+import { useMemo, useState } from "react";
+import { Div, HorizontalScroller, Row, Span, Stack, Text } from "../../../ui/index.js";
+import { FieldInput } from "../../../ui/forms/index.js";
+import { MediaImage } from "../../media/MediaImage.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
+/**
+ * The filter appears once this many NAMES are searchable — cards plus the
+ * grandchildren they match on.
+ *
+ * 🛑 Counting cards alone was wrong, and wrong in the case that prompted this
+ * row. Spinning Tops shows FIVE cards, so a `cards >= 6` rule hid the filter
+ * on exactly the page the request came from — while that page actually has 26
+ * searchable names (5 cards + 21 grandchildren), which is precisely where
+ * typing beats scanning.
+ *
+ * The number of cards is not what the filter searches, so it is not what
+ * should decide whether the filter exists.
+ */
+const FILTER_MIN_NAMES = 12;
+/** Case- and whitespace-insensitive contains. */
+function matches(item, needle) {
+    if (item.name.toLowerCase().includes(needle))
+        return true;
+    /*
+     * 🛑 `?? []`, not a non-null assertion. A card whose children were never
+     * resolved must still match on its OWN name — otherwise a transient fetch
+     * failure upstream silently removes it from every search, which looks like
+     * the category does not exist rather than like a degraded read.
+     */
+    return (item.childNames ?? []).some((n) => n.toLowerCase().includes(needle));
+}
+export function SubcategoryCardRow({ items, label = "Subcategories", }) {
+    const [query, setQuery] = useState("");
+    const needle = query.trim().toLowerCase();
+    const filtered = useMemo(() => (needle ? items.filter((i) => matches(i, needle)) : items), [items, needle]);
+    const searchableNames = useMemo(() => items.reduce((n, i) => n + 1 + (i.childNames?.length ?? 0), 0), [items]);
+    if (items.length === 0)
+        return null;
+    const showFilter = searchableNames >= FILTER_MIN_NAMES;
+    return (_jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", align: "center", gap: "md", wrap: true, children: [_jsx(Text, { size: "xs", color: "muted", weight: "medium", children: label }), showFilter && (_jsx(Div, { className: "w-full sm:w-64", children: _jsx(FieldInput, { name: "subcategory-filter", type: "search", value: query, onChange: setQuery, placeholder: "Filter subcategories\u2026", "aria-label": "Filter subcategories" }) }))] }), filtered.length === 0 ? (
+            /*
+             * A real empty state rather than a blank strip. The row is otherwise
+             * indistinguishable from "this category has no subcategories", which
+             * is a different and much more alarming thing to tell someone.
+             */
+            _jsxs(Text, { size: "sm", color: "muted", children: ["No subcategory matches \u201C", query.trim(), "\u201D."] })) : (_jsx(HorizontalScroller, { showArrows: true, showScrollbar: false, gap: 12, minItemWidth: 150, items: filtered, keyExtractor: (item) => item.id, renderItem: (item) => (_jsx(TextLink, { href: item.href, className: "group block h-full no-underline", "aria-label": item.count !== undefined
+                        ? `${item.name}, ${item.count} listings`
+                        : item.name, children: _jsxs(Stack, { gap: "xs", surface: "card", rounded: "lg", border: "subtle", padding: "sm", className: "h-full transition-colors hover:bg-surface-hover", children: [_jsx(Div, { surface: "muted", rounded: "md", className: `relative aspect-square w-full overflow-hidden flex-shrink-0`, children: item.imageUrl ? (_jsx(MediaImage, { src: item.imageUrl, alt: "", size: "thumbnail", className: "transition-transform duration-300 group-hover:scale-105" })) : (
+                                /*
+                                 * The emoji is the FALLBACK, never an overlay — same rule
+                                 * as `CategoryCard` and `resolveTaxonomyVisual`: an emoji
+                                 * is what you show when there is no picture, not something
+                                 * you paint on top of one.
+                                 */
+                                _jsx(Row, { align: "center", justify: "center", textSize: "2xl", className: "absolute inset-0", children: item.emoji ?? "" })) }), item.level !== undefined && (_jsx(Span, { size: "xs", color: "muted", weight: "medium", children: item.level === 0 ? "L0 · root" : `L${item.level}` })), _jsx(Text, { size: "xs", weight: "medium", className: "line-clamp-2", children: item.name }), item.count !== undefined && (_jsx(Span, { size: "xs", color: "muted", children: item.count.toLocaleString() }))] }) })) }))] }));
+}

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

@@ -10,8 +10,6 @@ export { CategoryFilters, CATEGORY_FILTER_KEYS, CATEGORY_ADMIN_SORT_OPTIONS, CAT
 export type { CategoryFiltersProps, CategoryFilterVariant, } from "./CategoryFilters";
 export { CategorySortSelect } from "./CategorySortSelect";
 export type { CategorySortSelectProps } from "./CategorySortSelect";
-export { CategoryProductsView } from "./CategoryProductsView";
-export type { CategoryProductsViewProps } from "./CategoryProductsView";
 export { CategoryProductsListing } from "./CategoryProductsListing";
 export type { CategoryProductsListingProps } from "./CategoryProductsListing";
 export { CategoryForm } from "./CategoryForm";

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

@@ -5,7 +5,6 @@ export { ConcernCard } from "./ConcernCard.js";
 export { ConcernGrid } from "./ConcernGrid.js";
 export { CategoryFilters, CATEGORY_FILTER_KEYS, CATEGORY_ADMIN_SORT_OPTIONS, CATEGORY_SELLER_SORT_OPTIONS, CATEGORY_PUBLIC_SORT_OPTIONS, getCategoryFilterKeys, getCategorySortOptions, } from "./CategoryFilters.js";
 export { CategorySortSelect } from "./CategorySortSelect.js";
-export { CategoryProductsView } from "./CategoryProductsView.js";
 export { CategoryProductsListing } from "./CategoryProductsListing.js";
 export { CategoryForm } from "./CategoryForm.js";
 export { CategorySelectorCreate } from "./CategorySelectorCreate.js";

package/dist/features/categories/constants/category-tabs.d.ts

@@ -10,29 +10,36 @@
  * this shape is browsed, and what the category detail page already supports
  * (it fetches every descendant and renders them tier-grouped).
  *
- * ## 🛑 Parts cannot be matched on `categoryType`
+ * ## 🛑 There is no Parts tab, and that is deliberate
  *
- * Brands, franchises and bundles each carry a discriminator. Parts deliberately
- * DO NOT — `gen-category-parts.mjs` omits `categoryType` because 92 files read
- * it and a new value opts a row out of every path that works. So a part is
- * identified by its ANCESTRY: a leaf whose chain passes through one of the four
- * `*-parts` nodes. That is a fact about where it lives, not a flag that can
- * drift from it.
+ * It was removed 2026-10-20. Parts have a better home than a flat tab over
+ * 752 leaves: `/parts/[classification]/[code]` is a purpose-built part
+ * catalogue with composition data, and the `spares` listing type sells loose
+ * parts. A fifth tab listing every part leaf duplicated the worse half of
+ * both.
+ *
+ * The part leaves themselves are untouched and still reachable by drilling
+ * down from their `*-parts` node, which is also why no `categoryType` was
+ * involved: a part is identified by ANCESTRY, never by a discriminator
+ * (`gen-category-parts.mjs` omits `categoryType` because 92 files read it and
+ * a new value opts a row out of every path that works).
+ *
+ * 🛑 Do not confuse this with the product-detail **Parts composition tab**
+ * ("What it is made of"), gated by `LISTING_TYPE_HAS_COMPOSITION`. That is a
+ * different feature on a different surface and is unaffected.
  *
  * ## Why the tabs partition ONE payload
  *
- * The listing already fetches `?flat=true` once. Deriving all five tabs from
+ * The listing already fetches `?flat=true` once. Deriving all four tabs from
  * that single cached response costs no extra request — a per-tab query would
- * turn one fetch into five for the same data.
+ * turn one fetch into four for the same data.
  *
  * @tag domain:categories
  * @tag layer:constants
  * @tag pattern:shared-literal
  * @tag sideEffects:none
  */
-/** The tier-2 nodes every part leaf hangs beneath. */
-export declare const PART_PARENT_IDS: readonly string[];
-export type CategoryTabKey = "categories" | "brands" | "franchises" | "parts" | "bundles";
+export type CategoryTabKey = "categories" | "brands" | "franchises" | "bundles";
 export interface CategoryTabDef {
     key: CategoryTabKey;
     label: string;
@@ -40,7 +47,7 @@ export interface CategoryTabDef {
 /**
  * 🛑 No "All" tab. It was the default and it was the problem — it is what
  * rendered 1,185 undifferentiated rows. Every tab here answers a question
- * ("which parts do you have?"); "all" answers none of them.
+ * ("which brands do you carry?"); "all" answers none of them.
  */
 export declare const CATEGORY_TABS: readonly CategoryTabDef[];
 export declare const DEFAULT_CATEGORY_TAB: CategoryTabKey;
@@ -48,19 +55,7 @@ export declare const DEFAULT_CATEGORY_TAB: CategoryTabKey;
 interface TabbableCategory {
     categoryType?: string | null;
     tier?: number | null;
-    parentIds?: readonly string[] | null;
-    isLeaf?: boolean | null;
 }
-/**
- * A LEAF whose ancestry passes through a `*-parts` node.
- *
- * 🛑 `isLeaf` is required, not incidental. Without it the tab also matches the
- * 20 classification NODES — "Attack Rings", "Weight Disks" — because their own
- * `parentIds` include a `*-parts` node too, giving 772 entries that mix groups
- * with the parts inside them. A part is a leaf by itself; the classification is
- * a branch you reach by drilling down.
- */
-export declare function isPartCategory(c: TabbableCategory): boolean;
 /**
  * Does this row belong on the given tab?
  *