@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/features/categories/api/[id]/description-template/route.js

@@ -51,7 +51,46 @@ import { serverLogger } from "../../../../../monitoring/index.js";
 import { categoriesRepository } from "../../../repository/categories.repository.js";
 import { usedPlaceholders } from "../../../../../_internal/shared/templating/placeholders.js";
 import { getCompositionsForCategory } from "../../../../../_internal/server/features/parts/data.js";
+import { getBeysForCategory } from "../../../../../_internal/server/features/beys/data.js";
 import { PART_BREAKDOWN_SLOT, formatPartBreakdown, stripSlotLine, } from "../../../../parts/utils/part-breakdown.js";
+/**
+ * ── The TAXONOMY slots ────────────────────────────────────────────────────
+ *
+ * Measured across the seeded bodies: 45 `{{title}}` · 21 `{{siteName}}` ·
+ * 18 `{{series}}` · 17 `{{category}}` · 13 `{{condition}}` · 6 `{{brand}}` ·
+ * 5 `{{partBreakdown}}` · 3 `{{categoryPath}}`. The seller form supplies four
+ * of those from the draft it is holding (title, brand, condition, siteName)
+ * and this route supplied exactly one (`partBreakdown`) — so
+ * **`{{category}}`, `{{categoryPath}}`, `{{series}}` and `{{system}}` could
+ * never resolve on any listing**, and the picker reported "4 of 9 slots could
+ * not be filled" on every single category, forever.
+ *
+ * All four are facts about the CATEGORY, not the draft, so the form cannot
+ * compute them and this is the only place that can. They ride the existing
+ * response exactly as `partBreakdown` does.
+ *
+ * 🛑 `series` and `system` are REAL FIELDS, not invented from the tree.
+ * `BeyDocument.series` is "the retail series" (`Beyblade Burst QuadStrike`)
+ * and `BeyDocument.system` is "the hardware generation" (`4D System`,
+ * `Hybrid Wheel System`) — which is why the seeded body renders them as two
+ * separate rows. A leaf pairs with a bey through `BeyDocument.categoryId`,
+ * and `getBeysForCategory` is the inverse of exactly that.
+ *
+ * 🛑 Resolved against the LEAF, never an ancestor — a bey describes one
+ * model, so inheriting a line's would tell every listing on that line it is
+ * the model that happened to join to the line node.
+ */
+const TAXONOMY_SLOTS = ["category", "categoryPath", "series", "system"];
+/** Slots that need the bey read. Checked before paying for it. */
+const BEY_SLOTS = ["series", "system"];
+/**
+ * `Spinning Tops › Beyblade X › Attack Types › Dran Sword`.
+ *
+ * A chevron rather than a slash: the body renders it inside
+ * `<li><strong>Category:</strong> …</li>` next to prose, and a slash there
+ * reads as a URL.
+ */
+const CATEGORY_PATH_SEPARATOR = " › ";
 /**
  * The variants a caller may ask for.
  *
@@ -172,6 +211,10 @@ async function resolveInherited(parentIds, variant, seed) {
      * that it came from the line.
      */
     const byId = new Map(ancestors.map((a) => [a.id, a]));
+    // See `Inherited.ancestorNames` — before the loop, which may break early.
+    out.ancestorNames = nearestFirst
+        .map((pid) => byId.get(pid)?.name?.trim())
+        .filter((n) => Boolean(n));
     for (const pid of nearestFirst) {
         const d = byId.get(pid);
         if (!d)
@@ -208,11 +251,12 @@ export async function GET(request, context) {
          * referenced, so the per-field merge below cannot mutate the document the
          * repository cached.
          */
-        const { template, inheritedFrom, inheritedFromName, defaults } = await resolveInherited(parentIds, variant, {
+        const { template, inheritedFrom, inheritedFromName, defaults, ancestorNames } = await resolveInherited(parentIds, variant, {
             template: pickTemplate(leaf, variant),
             inheritedFrom: null,
             inheritedFromName: null,
             defaults: { ...(leaf.productDefaults ?? {}) },
+            ancestorNames: [],
         });
         /*
          * 🛑 `placeholders` is RE-DERIVED here and not trusted from the stored
@@ -256,6 +300,68 @@ export async function GET(request, context) {
             else
                 body = stripSlotLine(body, PART_BREAKDOWN_SLOT);
         }
+        /*
+         * ── The taxonomy slots ────────────────────────────────────────────────
+         *
+         * See TAXONOMY_SLOTS. `category` and `categoryPath` are free — the leaf
+         * and its ancestors are already in hand — so they are built
+         * unconditionally and the `placeholders` check below decides whether they
+         * are sent.
+         *
+         * The bey read is gated on the body actually asking, the same way the
+         * composition read is: nothing outside the Beyblade lines carries
+         * `{{series}}`/`{{system}}`, so a TCG set or a Hot Wheels casting pays
+         * nothing for a concept it does not have.
+         */
+        if (template) {
+            const taxonomy = {
+                category: (leaf.name ?? "").trim(),
+                // Root-first: `ancestorNames` is nearest-first, so reverse it and put
+                // the leaf on the end. This is the order a breadcrumb reads in.
+                categoryPath: [...ancestorNames]
+                    .reverse()
+                    .concat((leaf.name ?? "").trim())
+                    .filter(Boolean)
+                    .join(CATEGORY_PATH_SEPARATOR),
+            };
+            if (BEY_SLOTS.some((s) => placeholders.includes(s))) {
+                const beys = await getBeysForCategory(id);
+                /*
+                 * The first pairing only, matching `formatPartBreakdown`'s rule and
+                 * for the same reason: 22 leaves pair with more than one bey (a
+                 * remake shares a model's name), and concatenating two retail series
+                 * would describe a release that does not exist.
+                 */
+                const bey = beys[0];
+                taxonomy.series = (bey?.series ?? "").trim();
+                taxonomy.system = (bey?.system ?? "").trim();
+            }
+            for (const slot of TAXONOMY_SLOTS) {
+                if (!placeholders.includes(slot))
+                    continue;
+                const value = taxonomy[slot] ?? "";
+                if (value) {
+                    slots[slot] = value;
+                    continue;
+                }
+                /*
+                 * 🛑 ABSENCE REMOVES THE LINE — `partBreakdown`'s contract, applied
+                 * here for the same reason: `interpolate` resolves an unfilled slot
+                 * to an empty string, so `<li><strong>System:</strong> {{system}}</li>`
+                 * would render an empty bullet that reads as broken data.
+                 *
+                 * 🛑 KNOWN CONSEQUENCE, stated rather than guarded against (as the
+                 * strip helper's own header does): `{{series}}` appears both as a
+                 * standalone row AND mid-sentence ("from the {{series}} line"), so a
+                 * leaf with no paired bey loses that whole sentence instead of
+                 * printing "from the  line". Losing a sentence is the better of the
+                 * two, and the seller sees the picker's note either way — but a
+                 * template author adding an inline slot should know the line goes
+                 * with it.
+                 */
+                body = stripSlotLine(body, slot);
+            }
+        }
         return NextResponse.json({
             success: true,
             data: {

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

@@ -177,7 +177,7 @@ export async function BrandDetailPageView({ slug, initialBrand }) {
     const ldFaq = brand?.faqs && brand.faqs.length > 0
         ? faqJsonLd(brand.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 && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(_Fragment, { children: [brand?.id && (_jsx(RecordOwnerQuickActions, { resource: "BRAND", recordId: brand.id, placement: "detail", 
+    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 && (_jsx(DynamicBgDiv, { color: brandColor, className: "absolute inset-0 opacity-10" })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsxs(Nav, { layout: "flex", gap: "2xs", textSize: "sm", className: "mb-4", "aria-label": "Breadcrumb", children: [_jsx(Link, { href: String(ROUTES.HOME), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Home" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.BRANDS), className: hasCover ? "text-white/70 hover:text-white transition-colors" : "text-[var(--appkit-color-text-muted)] hover:text-primary-600 dark:hover:text-primary-400 transition-colors", children: "Brands" }), _jsx(Span, { className: hasCover ? "text-white/40" : "text-zinc-400", children: "/" }), _jsx(Span, { weight: "medium", className: hasCover ? "text-white" : "text-[var(--appkit-color-text)]", children: brand?.name ?? slug })] }), _jsxs(Row, { className: "mb-3", align: "center", gap: "md", children: [brand?.display?.icon && (_jsx(Span, { className: "leading-none", size: "5xl", children: brand.display.icon })), _jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.id && (_jsx(RecordOwnerQuickActions, { resource: "BRAND", recordId: brand.id, placement: "detail", 
                                                 /* See CategoryDetailPageView — ghost ink is invisible on the cover hero. */
-                                                onMedia: hasCover, className: "mb-2", recordLabel: brand.name ?? slug })), _jsx(Heading, { color: "inverse", level: 1, className: `${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: brand?.name ?? slug }), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: `max-w-2xl mt-1 ${hasCover ? "/80" : ""}`, size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [(counts.products ?? 0) > 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: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), (counts.auctions ?? 0) > 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: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), (counts["pre-orders"] ?? 0) > 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: [counts["pre-orders"].toLocaleString(), " ", counts["pre-orders"] === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), (brand?.brandWebsite || brand?.brandCountry || brand?.brandFounded) && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "sm", weight: "semibold", color: "muted", transform: "uppercase", children: "About this brand" }), _jsxs(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden max-w-lg", children: [brand?.brandWebsite && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Website" }), _jsx(Dd, { className: "flex-1", children: _jsx(Anchor, { href: brand.brandWebsite, tone: "brand", underline: "hover", children: brand.brandWebsite }) })] })), brand?.brandCountry && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Country" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandCountry })] })), brand?.brandFounded && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Founded" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandFounded })] }))] })] }) }) })), brandContentBody && brandContentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: brandContentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: brand?.highlights, faqs: brand?.faqs }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts, totals: totals, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "Brand not found." })) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedBrands.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 Brands" }), _jsx(CategoryGrid, { categories: relatedBrands, getHref: (b) => String(ROUTES.PUBLIC.BRAND_DETAIL(b.slug)) })] }) }))] }));
+                                                onMedia: hasCover, className: "mb-2", recordLabel: brand.name ?? slug })), brand?.description && typeof brand.description === "string" && !brand.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: "max-w-2xl mt-1", size: "base", children: brand.description }))] })] }), _jsxs(Row, { gap: "sm", wrap: true, className: "mt-3", children: [(counts.products ?? 0) > 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: [counts.products.toLocaleString(), " ", counts.products === 1 ? "product" : "products"] })), (counts.auctions ?? 0) > 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: [counts.auctions.toLocaleString(), " ", counts.auctions === 1 ? "auction" : "auctions"] })), (counts["pre-orders"] ?? 0) > 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: [counts["pre-orders"].toLocaleString(), " ", counts["pre-orders"] === 1 ? "pre-order" : "pre-orders"] })), totalItems === 0 && (_jsx(Span, { size: "sm", className: hasCover ? "text-white/60" : "text-zinc-400", children: "No items listed yet" }))] })] })] }), (brand?.brandWebsite || brand?.brandCountry || brand?.brandFounded) && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "sm", weight: "semibold", color: "muted", transform: "uppercase", children: "About this brand" }), _jsxs(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden max-w-lg", children: [brand?.brandWebsite && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Website" }), _jsx(Dd, { className: "flex-1", children: _jsx(Anchor, { href: brand.brandWebsite, tone: "brand", underline: "hover", children: brand.brandWebsite }) })] })), brand?.brandCountry && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Country" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandCountry })] })), brand?.brandFounded && (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-32 flex-shrink-0", color: "primary", weight: "medium", children: "Founded" }), _jsx(Dd, { className: "flex-1", color: "muted", children: brand.brandFounded })] }))] })] }) }) })), brandContentBody && brandContentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: brandContentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: brand?.highlights, faqs: brand?.faqs }), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: brandName ? (_jsx(BrandDetailTabs, { brandName: brandName, initialProductsData: productsResult ?? undefined, initialBundles: brandBundles, counts: counts, totals: totals, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) })) : (_jsx(Text, { paddingY: "3xl", color: "muted", size: "sm", align: "start", children: "Brand not found." })) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedBrands.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 Brands" }), _jsx(CategoryGrid, { categories: relatedBrands, getHref: (b) => String(ROUTES.PUBLIC.BRAND_DETAIL(b.slug)) })] }) }))] }));
 }

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

@@ -66,7 +66,13 @@ export function BreadcrumbTrail({ crumbs, category, rootLabel = "All Categories"
      * missing and gave them no way to reach it.
      */
     const leadCount = hasCollapsed ? split.lead.length : 0;
-    return (_jsxs(Div, { className: className, children: [_jsxs(Row, { align: "center", gap: "xs", wrap: true, children: [_jsx(Breadcrumb, { items: visible.slice(0, leadCount), tone: tone }), hasCollapsed && (_jsxs(Details, { tone: "card", padding: "sm", rounded: "lg", children: [_jsx(Summary, { size: "xs", color: "muted", ariaLabel: `Show ${split.collapsed.length} hidden category levels`, children: `… ${split.collapsed.length} more` }), _jsx(Div, { padding: "t-xs", children: _jsx(Stack, { align: "start", gap: "xs", children: split.collapsed.map((c) => (_jsx(TextLink, { href: c.url ?? rootHref, size: "xs", children: c.name }, c.url ?? c.name))) }) })] })), _jsx(Breadcrumb, { items: hasCollapsed ? visible.slice(leadCount) : visible, tone: tone })] }), alt.mode === "inline" && (_jsxs(Span, { size: "xs", color: "muted", children: ["Also in", " ", alt.items.map((a, i) => (_jsxs(React.Fragment, { children: [i > 0 && " · ", _jsx(TextLink, { href: a.url ?? rootHref, size: "xs", children: a.name })] }, a.url ?? a.name)))] })), alt.mode === "dropdown" && (_jsxs(Details, { tone: "card", padding: "sm", rounded: "lg", children: [_jsx(Summary, { size: "xs", color: "muted", ariaLabel: "Other categories this listing is filed under", children: `Also in ${alt.items.length} more` }), _jsx(Div, { padding: "t-xs", children: _jsx(Stack, { align: "start", gap: "xs", children: alt.items.map((a) => (_jsx(TextLink, { href: a.url ?? rootHref, size: "xs", children: a.name }, a.url ?? a.name))) }) })] }))] }));
+    return (
+    /*
+     * No marker class here — it lives on the `<Breadcrumb>` primitive this
+     * renders below, which is also what the scam registry's pages use
+     * directly. One owner; see `Breadcrumb.tsx`.
+     */
+    _jsxs(Div, { className: className, children: [_jsxs(Row, { align: "center", gap: "xs", wrap: true, children: [_jsx(Breadcrumb, { items: visible.slice(0, leadCount), tone: tone }), hasCollapsed && (_jsxs(Details, { tone: "card", padding: "sm", rounded: "lg", children: [_jsx(Summary, { size: "xs", color: "muted", ariaLabel: `Show ${split.collapsed.length} hidden category levels`, children: `… ${split.collapsed.length} more` }), _jsx(Div, { padding: "t-xs", children: _jsx(Stack, { align: "start", gap: "xs", children: split.collapsed.map((c) => (_jsx(TextLink, { href: c.url ?? rootHref, size: "xs", children: c.name }, c.url ?? c.name))) }) })] })), _jsx(Breadcrumb, { items: hasCollapsed ? visible.slice(leadCount) : visible, tone: tone })] }), alt.mode === "inline" && (_jsxs(Span, { size: "xs", color: "muted", children: ["Also in", " ", alt.items.map((a, i) => (_jsxs(React.Fragment, { children: [i > 0 && " · ", _jsx(TextLink, { href: a.url ?? rootHref, size: "xs", children: a.name })] }, a.url ?? a.name)))] })), alt.mode === "dropdown" && (_jsxs(Details, { tone: "card", padding: "sm", rounded: "lg", children: [_jsx(Summary, { size: "xs", color: "muted", ariaLabel: "Other categories this listing is filed under", children: `Also in ${alt.items.length} more` }), _jsx(Div, { padding: "t-xs", children: _jsx(Stack, { align: "start", gap: "xs", children: alt.items.map((a) => (_jsx(TextLink, { href: a.url ?? rootHref, size: "xs", children: a.name }, a.url ?? a.name))) }) })] }))] }));
 }
 function fromCrumb(c) {
     return c.url ? { label: c.name, href: c.url } : { label: c.name };

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

@@ -26,7 +26,7 @@ export function BundleDetailView({ bundle, members = [], onBuyNow, onAddToCart,
         ? formatCurrency(bundle.bundlePrice, "INR")
         : BUNDLE_COPY.detail.priceFallback;
     const discount = computeBundleDiscount(bundle.bundlePrice, bundle.bundleOriginalTotal);
-    return (_jsxs(Main, { children: [_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "lg", direction: "md-row", align: "start", children: [_jsx(Div, { className: "w-full md:w-2/5", children: members.length > 0 ? (_jsx(BundleCollage, { members: members })) : (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, rounded: "2xl", surface: "subtle", children: _jsx(Div, { className: "h-full w-full", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "hero", fallback: PLACEHOLDER_EMOJI }) }) })) }), _jsxs(Stack, { gap: "md", className: "flex-1", children: [_jsx(RecordOwnerQuickActions, { resource: "BUNDLE", recordId: String(bundle.id), placement: "detail", recordLabel: String(bundle.name) }), _jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: bundle.name }), _jsxs(Row, { gap: "sm", align: "center", wrap: true, children: [_jsx(Text, { size: "lg", weight: "bold", children: _jsx(GatedPrice, { label: "Sign in to see the bundle price", children: priceLabel }) }), discount && (
+    return (_jsxs(Main, { children: [_jsx(Section, { padding: "y-2xl", children: _jsx(Container, { size: "xl", children: _jsxs(Stack, { gap: "lg", children: [_jsxs(Stack, { gap: "lg", direction: "md-row", align: "start", children: [_jsx(Div, { className: "w-full md:w-2/5", children: members.length > 0 ? (_jsx(BundleCollage, { members: members })) : (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, rounded: "2xl", surface: "subtle", children: _jsx(Div, { className: "h-full w-full", children: _jsx(MediaImage, { src: cover, alt: bundle.name, size: "hero", fallback: PLACEHOLDER_EMOJI }) }) })) }), _jsxs(Stack, { gap: "md", className: "flex-1", children: [_jsx(Heading, { level: 1, size: "3xl", weight: "semibold", color: "primary", children: bundle.name }), _jsx(RecordOwnerQuickActions, { resource: "BUNDLE", recordId: String(bundle.id), placement: "detail", recordLabel: String(bundle.name) }), _jsxs(Row, { gap: "sm", align: "center", wrap: true, children: [_jsx(Text, { size: "lg", weight: "bold", children: _jsx(GatedPrice, { label: "Sign in to see the bundle price", children: priceLabel }) }), discount && (
                                                     // Both the struck-through total and the "N% off" badge are
                                                     // derived from the bundle price, so they disclose it even
                                                     // though the badge carries no currency symbol.

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

@@ -598,13 +598,13 @@ 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 }), category?.id && (_jsx(RecordOwnerQuickActions, { resource: "CATEGORY", recordId: category.id, placement: "detail", 
+    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?.id && (_jsx(RecordOwnerQuickActions, { resource: "CATEGORY", recordId: category.id, placement: "detail", 
                                 /*
                                  * Same flag the rest of this hero branches on. Without it the
                                  * pencil renders `ghost` (zinc-600) on the dark cover and is
                                  * invisible — see Root Cause #67 and `OwnerQuickActions.onMedia`.
                                  */
-                                onMedia: hasCover, className: "mb-3", recordLabel: category.name ?? slug })), _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 }), pairedBeys.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: pairedBeys.length === 1 ? "Specifications" : "Releases" }), _jsx(Stack, { gap: "xs", className: "min-w-0", children: pairedBeys.map((bey) => (_jsxs(Row, { gap: "sm", align: "center", wrap: true, className: "min-w-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.BEY_DETAIL(bey.slug)), children: bey.name }), [bey.system, bey.productCodes?.[0]]
+                                onMedia: hasCover, className: "mb-3", recordLabel: category.name ?? slug })), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: "max-w-2xl mb-4", 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 }), pairedBeys.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: pairedBeys.length === 1 ? "Specifications" : "Releases" }), _jsx(Stack, { gap: "xs", className: "min-w-0", children: pairedBeys.map((bey) => (_jsxs(Row, { gap: "sm", align: "center", wrap: true, className: "min-w-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.BEY_DETAIL(bey.slug)), children: bey.name }), [bey.system, bey.productCodes?.[0]]
                                             .filter(Boolean)
                                             .map((bit) => (_jsx(Text, { size: "sm", color: "muted", children: String(bit) }, String(bit))))] }, bey.id))) })] }) }) })), 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)

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

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { Div, FormGroup } from "../../../ui/index.js";
 import { Label, Checkbox, RichTextEditor, Text } from "../../../ui/index.js";
+import { FieldLabel } from "../../../ui/forms/index.js";
 import { ImageUpload, MediaImage, useMediaUpload } from "../../media/index.js";
 import { FormField } from "../../../ui/index.js";
 import { flattenCategories } from "../types/index.js";
@@ -25,6 +27,15 @@ const DEFAULT_LABELS = {
 export function CategoryForm({ category, allCategories, onChange, isReadonly = false, labels = {}, stackClassName = "space-y-4", }) {
     const { upload } = useMediaUpload();
     const L = { ...DEFAULT_LABELS, ...labels };
+    /*
+     * Unique per instance via `useId`, not a literal. Two CategoryForms on one
+     * page would otherwise both emit the same label id, and `aria-labelledby`
+     * resolves the FIRST match — so the second editor would be named by the
+     * first form’s label. The same defect FieldInput’s own note records
+     * fixing for `htmlFor`.
+     */
+    const reactId = useId();
+    const descriptionLabelId = `category-description-label-${reactId}`;
     const update = (partial) => {
         onChange({ ...category, ...partial });
     };
@@ -35,7 +46,7 @@ export function CategoryForm({ category, allCategories, onChange, isReadonly = f
     const handleNameChange = (value) => {
         update({ name: value, slug: makeSlug(value, category.isBrand ?? false) });
     };
-    return (_jsxs(Div, { className: stackClassName, children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "name", label: L.name, type: "text", value: category.name || "", onChange: handleNameChange, disabled: isReadonly }), _jsx(FormField, { name: "slug", label: L.slug, type: "text", value: category.slug || "", onChange: (value) => update({ slug: value }), disabled: isReadonly })] }), _jsxs(Div, { className: "appkit-form-field", children: [_jsx(Label, { className: "appkit-form-field__label", children: L.description }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(category.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, minHeightClassName: "min-h-[140px]", placeholder: "Enter category description" }), _jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: "Rich text is supported for category descriptions." })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
+    return (_jsxs(Div, { className: stackClassName, children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "name", label: L.name, type: "text", value: category.name || "", onChange: handleNameChange, disabled: isReadonly }), _jsx(FormField, { name: "slug", label: L.slug, type: "text", value: category.slug || "", onChange: (value) => update({ slug: value }), disabled: isReadonly })] }), _jsxs(Div, { className: "appkit-form-field", children: [_jsx(FieldLabel, { id: descriptionLabelId, children: L.description }), _jsx(RichTextEditor, { value: normalizeRichTextHtml(category.description || ""), onChange: (value) => update({ description: value }), disabled: isReadonly, minHeightClassName: "min-h-[140px]", placeholder: "Enter category description", ariaLabelledBy: descriptionLabelId }), _jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: "Rich text is supported for category descriptions." })] }), !isReadonly && (_jsx(ImageUpload, { currentImage: category.display?.coverImage, onUpload: (file) => upload(file, "categories", true, {
                     type: "category-image",
                     name: category.name || "category",
                 }), onChange: (url) => update({ display: { ...category.display, coverImage: url } }), label: L.categoryImage, helperText: L.imageRecommended })), category.display?.coverImage && isReadonly && (_jsxs(Div, { children: [_jsx(Label, { className: "block mb-2", size: "sm", weight: "medium", children: L.categoryImage }), _jsx(Div, { className: `relative h-32 w-40 ${__O.hidden}`, rounded: "default", children: _jsx(MediaImage, { src: category.display.coverImage, alt: category.name || "", size: "card" }) })] })), _jsx(FormField, { name: "parentId", label: L.parentCategory, type: "select", value: category.parentId || "", onChange: (value) => update({ parentId: value || null }), disabled: isReadonly, options: [

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

@@ -70,12 +70,45 @@ function unwrap(res) {
     const body = res?.data ?? res;
     return body && typeof body === "object" && "template" in body ? body : null;
 }
-/** "2 of 9 slots could not be filled: {{year}}, {{type}}" */
-function unresolvedNote(unresolved, total) {
+/**
+ * `camelCase` / `snake_case` slot name -> words a seller reads.
+ *
+ * `categoryPath` -> "category path", `partBreakdown` -> "part breakdown".
+ * Lower-cased throughout because the note reads these mid-sentence.
+ */
+function humaniseSlot(name) {
+    return name
+        .replace(/[_-]+/g, " ")
+        .replace(/([a-z\d])([A-Z])/g, "$1 $2")
+        .trim()
+        .toLowerCase();
+}
+/**
+ * "2 details were left blank and are highlighted below: year, type"
+ *
+ * 🛑 NO `{{…}}` IN USER-FACING COPY. This printed the slot names back wrapped
+ * in braces — `2 of 9 slots could not be filled: {{year}}, {{type}}` — which
+ * is where the reported "raw {{slot}} syntax" came from. It was not a failed
+ * interpolation leaking through; the note RE-MANUFACTURED the template syntax
+ * to describe it, so the seller saw the same thing either way and no amount of
+ * fixing the templating would have removed it.
+ *
+ * "slots" went with the braces. It is the word this codebase uses for a
+ * placeholder; a seller filling in a listing has no reason to know it, and
+ * "could not be filled" reads as a system failure rather than as the three
+ * boxes they need to type in. The count stays — it is the actionable part —
+ * but it counts what is MISSING rather than reporting it as a fraction, since
+ * "2 of 9" invites the reader to wonder what the other seven were — and the
+ * denominator is why the `total` argument is gone.
+ */
+function unresolvedNote(unresolved) {
     if (unresolved.length === 0)
         return null;
-    const named = unresolved.map((n) => `{{${n}}}`).join(", ");
-    return `${unresolved.length} of ${total} slots could not be filled: ${named}`;
+    const named = unresolved.map(humaniseSlot).join(", ");
+    const count = unresolved.length;
+    return count === 1
+        ? `One detail was left blank — add the ${named} before publishing.`
+        : `${count} details were left blank — add the ${named} before publishing.`;
 }
 /** "adds 2 specification rows · sets condition to Used" */
 function describeDefaults(defaults) {
@@ -165,7 +198,7 @@ export function CategoryTemplatePicker({ categoryId, condition, context, isDescr
     if (!data || !template || !filled) {
         return (_jsx(Div, { className: PANEL_CLASS, children: _jsx(Text, { size: "xs", color: "muted", children: "No description template for this category yet \u2014 write your own, and an admin can add one so the next listing starts from it." }) }));
     }
-    const note = unresolvedNote(filled.unresolved, template.placeholders?.length ?? filled.unresolved.length);
+    const note = unresolvedNote(filled.unresolved);
     const extras = describeDefaults(data.defaults);
     const source = data.inheritedFromName
         ? `Inherited from ${data.inheritedFromName}`

package/dist/features/categories/repository/market-price-index.repository.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Market Price Index — the COMPUTED asking-price band for one leaf.
+ *
+ * The third collection in a deliberate trio, and the three are not
+ * interchangeable:
+ *
+ *   `priceObservations`  one dated sighting          (raw, append-only)
+ *   `marketPriceIndex`   what asks cluster on        (derived, this file)
+ *   `priceIndex`         what SOLD here              (derived, our own orders)
+ *
+ * 🛑 The second and third are never blended, and the rule predates this file:
+ * *"They are rendered side by side and never averaged. The gap between them is
+ * the most useful thing we can tell a seller."* An ask is not a sale — 76–93%
+ * of crawled competitor listings are sold out without ever converting — so a
+ * blended figure would describe neither event and could not be unpicked later.
+ *
+ * ## 🛑 Why this is not written onto `categories`
+ *
+ * Same reason as its two siblings, and it is a measured one rather than a
+ * stylistic preference: `onCategoryWrite` is a `documentWritten` trigger on
+ * `categories`, and Root Cause #92 is a trigger that wrote back to the
+ * collection it watched producing **1,017,548 invocations in 24 hours**.
+ * `notifyRevalidate` also fires on every category write, so a nightly band
+ * write would drop each category page's ISR entry on a project that has
+ * already been paused once for ISR-write overage.
+ *
+ * ## 🛑 It does NOT replace the seeded band — it OUTRANKS it
+ *
+ * `CategoryPriceGuidance.market` stays exactly as seeded. A computed band wins
+ * where one exists, and where one does not the seeded generation band still
+ * shows, clearly labelled as the generation's. Overwriting the seed would mean
+ * a single bad import could erase the only evidence ~60 leaves have, with no
+ * way back — the same trap as `priceIndexRollup` being forbidden from touching
+ * `market`.
+ *
+ * @tag domain:price-index
+ * @tag layer:repository
+ * @tag pattern:repository
+ * @tag access:server-only
+ * @tag consumers:marketPriceRollup,price-guidance-resolve,price-index/market
+ * @tag sideEffects:writes marketPriceIndex
+ */
+import { BaseRepository } from "../../../providers/db-firebase";
+import type { PriceObservationKind } from "./price-observation.repository";
+/** One computed band. Mirrors `MarketStats` plus its provenance. */
+export interface MarketPriceBand {
+    /**
+     * The price sightings cluster on — the headline.
+     *
+     * 🛑 Optional, and the renderer must branch. Absent means no bucket held two
+     * or more sightings, i.e. every observed price was different, so there is no
+     * "most common" to report and `median` is shown under a different label. A
+     * mode synthesised from a single sighting would be that sighting wearing a
+     * word that implies consensus.
+     */
+    mode?: number;
+    modeCount?: number;
+    median: number;
+    low: number;
+    high: number;
+    sampleSize: number;
+    /**
+     * 🛑 FALSE means low/high/mode describe ALL TIME, not the last six months —
+     * the window held too little to stand alone. The renderer must relabel. A
+     * figure drawn from a two-year-old crawl is indistinguishable from a current
+     * one once printed, which is why this travels with the band rather than being
+     * inferred from `computedAt`.
+     */
+    basedOnRecent: boolean;
+    windowDays: number;
+    /** Newest sighting in the set the band came from. Not the rollup time. */
+    lastSeenAt: Date;
+}
+export interface MarketPriceIndexDocument {
+    /** The leaf id — model, era, part group, whatever was observed. */
+    id: string;
+    currency: "INR";
+    /**
+     * Bands kept APART by event kind, never merged.
+     *
+     * Keyed by `PriceObservationKind`. `ask` is what shops list at; `sale` is
+     * what we have evidence changed hands at elsewhere. Most leaves will only
+     * ever have `ask`, and that is an honest state rather than a gap.
+     */
+    byKind: Partial<Record<PriceObservationKind, MarketPriceBand>>;
+    computedAt: Date;
+}
+export declare const MARKET_PRICE_INDEX_COLLECTION = "marketPriceIndex";
+export declare class MarketPriceIndexRepository extends BaseRepository<MarketPriceIndexDocument> {
+    constructor();
+    /**
+     * Bands for several leaves in ONE round trip.
+     *
+     * 🛑 `db.getAll`, not N `findById` calls — the same decision, for the same
+     * reason, as `PriceIndexRepository.getManyForLeaves`: the tool resolves up to
+     * `PRICE_INDEX_SEARCH_LIMIT` leaves per lookup and N sequential reads is N
+     * round trips against Rule #6's ~3-per-request budget.
+     *
+     * A missing document is OMITTED, never returned as an empty band — "no
+     * computed band here" and "this leaf does not exist" are different answers,
+     * and a zeroed band renders as a confident ₹0.
+     */
+    getManyForLeaves(leafIds: readonly string[]): Promise<Map<string, MarketPriceIndexDocument>>;
+    /**
+     * Write one leaf's bands.
+     *
+     * `byKind` is replaced WHOLESALE rather than merged: `update` merges, so a
+     * kind whose observations were all retracted would keep its stale band
+     * forever — the same reason `PriceIndexRepository.setForLeaf` passes the full
+     * map rather than a patch.
+     */
+    setForLeaf(leafId: string, byKind: MarketPriceIndexDocument["byKind"]): Promise<void>;
+    /**
+     * Drop a leaf's bands entirely.
+     *
+     * Reachable state, not defensive coding: a leaf whose observations are all
+     * retracted, or all fall below `MIN_BAND_OBSERVATIONS` after a retraction,
+     * must stop publishing a band. Leaving the last computed one in place would
+     * publish a figure derived from evidence that no longer exists.
+     */
+    clearForLeaf(leafId: string): Promise<void>;
+}
+export declare const marketPriceIndexRepository: MarketPriceIndexRepository;

package/dist/features/categories/repository/market-price-index.repository.js

@@ -0,0 +1,105 @@
+/**
+ * Market Price Index — the COMPUTED asking-price band for one leaf.
+ *
+ * The third collection in a deliberate trio, and the three are not
+ * interchangeable:
+ *
+ *   `priceObservations`  one dated sighting          (raw, append-only)
+ *   `marketPriceIndex`   what asks cluster on        (derived, this file)
+ *   `priceIndex`         what SOLD here              (derived, our own orders)
+ *
+ * 🛑 The second and third are never blended, and the rule predates this file:
+ * *"They are rendered side by side and never averaged. The gap between them is
+ * the most useful thing we can tell a seller."* An ask is not a sale — 76–93%
+ * of crawled competitor listings are sold out without ever converting — so a
+ * blended figure would describe neither event and could not be unpicked later.
+ *
+ * ## 🛑 Why this is not written onto `categories`
+ *
+ * Same reason as its two siblings, and it is a measured one rather than a
+ * stylistic preference: `onCategoryWrite` is a `documentWritten` trigger on
+ * `categories`, and Root Cause #92 is a trigger that wrote back to the
+ * collection it watched producing **1,017,548 invocations in 24 hours**.
+ * `notifyRevalidate` also fires on every category write, so a nightly band
+ * write would drop each category page's ISR entry on a project that has
+ * already been paused once for ISR-write overage.
+ *
+ * ## 🛑 It does NOT replace the seeded band — it OUTRANKS it
+ *
+ * `CategoryPriceGuidance.market` stays exactly as seeded. A computed band wins
+ * where one exists, and where one does not the seeded generation band still
+ * shows, clearly labelled as the generation's. Overwriting the seed would mean
+ * a single bad import could erase the only evidence ~60 leaves have, with no
+ * way back — the same trap as `priceIndexRollup` being forbidden from touching
+ * `market`.
+ *
+ * @tag domain:price-index
+ * @tag layer:repository
+ * @tag pattern:repository
+ * @tag access:server-only
+ * @tag consumers:marketPriceRollup,price-guidance-resolve,price-index/market
+ * @tag sideEffects:writes marketPriceIndex
+ */
+import { BaseRepository } from "../../../providers/db-firebase/index.js";
+export const MARKET_PRICE_INDEX_COLLECTION = "marketPriceIndex";
+export class MarketPriceIndexRepository extends BaseRepository {
+    constructor() {
+        super(MARKET_PRICE_INDEX_COLLECTION);
+    }
+    /**
+     * Bands for several leaves in ONE round trip.
+     *
+     * 🛑 `db.getAll`, not N `findById` calls — the same decision, for the same
+     * reason, as `PriceIndexRepository.getManyForLeaves`: the tool resolves up to
+     * `PRICE_INDEX_SEARCH_LIMIT` leaves per lookup and N sequential reads is N
+     * round trips against Rule #6's ~3-per-request budget.
+     *
+     * A missing document is OMITTED, never returned as an empty band — "no
+     * computed band here" and "this leaf does not exist" are different answers,
+     * and a zeroed band renders as a confident ₹0.
+     */
+    async getManyForLeaves(leafIds) {
+        const ids = [...new Set(leafIds.filter(Boolean))];
+        const out = new Map();
+        if (ids.length === 0)
+            return out;
+        const refs = ids.map((id) => this.db.collection(MARKET_PRICE_INDEX_COLLECTION).doc(id));
+        const snaps = await this.db.getAll(...refs);
+        for (const snap of snaps) {
+            if (!snap.exists)
+                continue;
+            out.set(snap.id, { ...snap.data(), id: snap.id });
+        }
+        return out;
+    }
+    /**
+     * Write one leaf's bands.
+     *
+     * `byKind` is replaced WHOLESALE rather than merged: `update` merges, so a
+     * kind whose observations were all retracted would keep its stale band
+     * forever — the same reason `PriceIndexRepository.setForLeaf` passes the full
+     * map rather than a patch.
+     */
+    async setForLeaf(leafId, byKind) {
+        const payload = { currency: "INR", byKind, computedAt: new Date() };
+        const existing = await this.findById(leafId);
+        if (existing)
+            await this.update(leafId, payload);
+        else
+            await this.createWithId(leafId, payload);
+    }
+    /**
+     * Drop a leaf's bands entirely.
+     *
+     * Reachable state, not defensive coding: a leaf whose observations are all
+     * retracted, or all fall below `MIN_BAND_OBSERVATIONS` after a retraction,
+     * must stop publishing a band. Leaving the last computed one in place would
+     * publish a figure derived from evidence that no longer exists.
+     */
+    async clearForLeaf(leafId) {
+        const existing = await this.findById(leafId);
+        if (existing)
+            await this.delete(leafId);
+    }
+}
+export const marketPriceIndexRepository = new MarketPriceIndexRepository();