@mohasinac/appkit 4.57.0 → 4.58.0

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

@@ -5,7 +5,8 @@ import { categoryCrumbs, withTrailHead } from "../utils/breadcrumb-chain.js";
 import { ownTotalFor, descendantTotalFor } from "../schemas/category-counts.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 { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
+import { TextLink } from "../../../ui/components/TextLink.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { RichTextRenderer } from "../../../ui/rich-text/RichTextRenderer.js";
 import { resolveTaxonomyVisual } from "../utils/taxonomy-visual.js";
@@ -18,6 +19,7 @@ import { LastCategoryBeacon } from "./LastCategoryBeacon.js";
 import { GroupedListingsCarousel } from "../../grouped/components/GroupedListingsCarousel.js";
 import { ModelCompositionPanel } from "../../parts/components/ModelCompositionPanel.js";
 import { getCompositionsForCategory } from "../../../_internal/server/features/parts/data.js";
+import { getBeysForCategory } from "../../../_internal/server/features/beys/data.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { getGroupsForCategory } from "../../../_internal/server/features/grouped/data.js";
 import { listingTabCounts, } from "../../../_internal/server/features/products/listing-tab-counts.js";
@@ -158,7 +160,7 @@ export async function CategoryDetailPageView({ slug }) {
     // tree deeper than a couple of levels would have turned into a silently blank
     // page rather than an error (Root Cause #59).
     const categoriesIn = category?.id ? [category.id] : null;
-    const [productsResult, tabCounts, bundlesResult, childCategories, rootSiblingCategories, groupedListings, settings, liveCounts, compositions] = await Promise.all([
+    const [productsResult, tabCounts, bundlesResult, childCategories, rootSiblingCategories, groupedListings, settings, liveCounts, compositions, pairedBeys] = await Promise.all([
         categoriesIn
             ? safeRead(() => productRepository.list({
                 filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "standard")),
@@ -273,6 +275,29 @@ export async function CategoryDetailPageView({ slug }) {
                 fallback: [],
             })
             : Promise.resolve([]),
+        /*
+         * B5 — the bey(s) this leaf names, so the reference page is REACHABLE.
+         *
+         * 🛑 `ROUTES.PUBLIC.BEY_DETAIL` existed with ZERO call sites: 1,988 bey
+         * pages were built, routable and unreachable from anywhere in the product.
+         * The link already ran the other way (`/beys/{slug}` -> its category leaf),
+         * so this closes the loop rather than inventing an edge.
+         *
+         * Same shape as the compositions read directly above — one indexed
+         * equality against this category's OWN id, in the SAME `Promise.all` so it
+         * costs no extra round trip, wrapped in `safeRead` so a missing index
+         * records a DEGRADED_READ instead of taking the page down.
+         *
+         * A line or generation node matches nothing and renders nothing, which is
+         * correct: "Burst GT" is not a bey, the 1,858 leaves under it are.
+         */
+        category?.id
+            ? safeRead(() => getBeysForCategory(category.id), {
+                route: "/categories/[slug]",
+                key: "beys.beysForCategory",
+                fallback: [],
+            })
+            : Promise.resolve([]),
     ]);
     // 🛑 SAME TIER ONLY. `rootSiblingCategories` spans the whole root subtree —
     // siblings AND cousins across every depth — so without a tier check this
@@ -573,7 +598,15 @@ 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(OwnerQuickActions, { resource: "CATEGORY", placement: "detail", className: "mb-3", recordLabel: category.name ?? slug, editHref: String(ROUTES.ADMIN.CATEGORIES_EDIT(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)) })] }) }) })), (() => {
+    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", 
+                                /*
+                                 * 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]]
+                                            .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)
                     return null;
                 const branches = childCategories.filter((c) => c.tier === 1);

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

@@ -5,6 +5,7 @@ import { Div, Grid, Row, Span, Stack, Text } from "../../../ui/index.js";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { ImageMosaic, MOSAIC_MIN } from "../../../ui/components/ImageMosaic.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
@@ -35,13 +36,34 @@ export function CategoryCard({ category, href, onClick, className = "", renderOw
     const card = (_jsx(Div, { role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick
             ? (e) => (e.key === "Enter" || e.key === " ") && onClick(category)
             : undefined, onClick: onClick ? () => onClick(category) : undefined, className: cardClass, children: inner }));
-    if (!renderOwnerActions)
+    /*
+     * 🛑 The quick actions are the DEFAULT, not an opt-in.
+     *
+     * This was `if (!renderOwnerActions) return card;` and NOTHING in either
+     * repo ever passed `renderOwnerActions` — measured across all nine card
+     * components that declare it. So the pencil was unreachable on every grid in
+     * the app, and the slot read as wired because the prop, the docstring and
+     * the positioning were all present. Root Cause #8's shape: a slot shell
+     * rendered with zero render props.
+     *
+     * A card is resource-specific by construction — a CategoryCard is always a
+     * category — so it can name its own resource and needs no threading through
+     * the dozens of listing views that mount it. `RecordOwnerQuickActions` is a
+     * Client Component receiving only strings, which is the ordinary RSC
+     * boundary; the thing that cannot cross it is a FUNCTION prop, which is why
+     * the detail views could not pass `onDelete` directly.
+     *
+     * The override seam stays for a caller that genuinely needs different
+     * actions.
+     */
+    const ownerActions = renderOwnerActions ? (renderOwnerActions()) : category.id ? (_jsx(RecordOwnerQuickActions, { resource: "CATEGORY", recordId: String(category.id), recordLabel: category.name, placement: "card" })) : null;
+    if (!ownerActions)
         return card;
     /*
      * Sibling of the card, never a child — see the prop's docstring. `z-20`
      * beats the featured dot at `left-2 top-2`.
      */
-    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: renderOwnerActions() })] }));
+    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: ownerActions })] }));
 }
 export function CategoryGrid({ categories, getHref, onCategoryClick, emptyLabel = "No categories found", className = "", }) {
     if (categories.length === 0) {

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

@@ -9,8 +9,7 @@ import { Heading, Text } from "../../../ui/components/Typography.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { ProductGrid } from "../../products/components/ProductGrid.js";
 import { Alert } from "../../../ui/components/Alert.js";
-import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
-import { ROUTES } from "../../../next/routing/route-map.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const PAGE_SIZE = 24;
 export async function FranchiseDetailPageView({ slug, franchise, }) {
     const result = await safeRead(() => listPublicProducts({
@@ -39,7 +38,7 @@ export async function FranchiseDetailPageView({ slug, franchise, }) {
     const products = rows.map((r) => toProductItem(r));
     const total = reportedTotal ?? products.length;
     const cover = franchise.display?.coverImage;
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsxs(Row, { align: "center", gap: "comfortable", className: "mb-8", children: [cover ? (_jsx(MediaImage, { src: cover, alt: franchise.name ?? slug, size: "thumbnail", rounded: "lg" })) : null, _jsxs(Stack, { gap: "dense", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Heading, { level: 1, color: "primary", size: "3xl", weight: "semibold", children: franchise.name }), franchise.id ? (_jsx(OwnerQuickActions, { resource: "FRANCHISE", placement: "detail", recordLabel: franchise.name ?? slug, editHref: String(ROUTES.ADMIN.CATEGORIES_EDIT(franchise.id)) })) : null] }), franchise.description ? (_jsx(Text, { color: "muted", className: "max-w-2xl", children: franchise.description })) : null] })] }), franchise.isActive === false ? (_jsxs(Alert, { variant: "info", className: "mb-6", children: ["We are not stocking ", franchise.name, " yet. This page is here so the link works \u2014 check back, or browse what we do carry."] })) : null, readFailed ? (_jsxs(Alert, { variant: "warning", children: ["We could not load ", franchise.name, " listings just now. Please try again."] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "muted", className: "mb-4", children: total === 0
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsxs(Row, { align: "center", gap: "comfortable", className: "mb-8", children: [cover ? (_jsx(MediaImage, { src: cover, alt: franchise.name ?? slug, size: "thumbnail", rounded: "lg" })) : null, _jsxs(Stack, { gap: "dense", children: [_jsxs(Row, { gap: "sm", align: "center", justify: "between", wrap: true, children: [_jsx(Heading, { level: 1, color: "primary", size: "3xl", weight: "semibold", children: franchise.name }), franchise.id ? (_jsx(RecordOwnerQuickActions, { resource: "FRANCHISE", recordId: franchise.id, placement: "detail", recordLabel: franchise.name ?? slug })) : null] }), franchise.description ? (_jsx(Text, { color: "muted", className: "max-w-2xl", children: franchise.description })) : null] })] }), franchise.isActive === false ? (_jsxs(Alert, { variant: "info", className: "mb-6", children: ["We are not stocking ", franchise.name, " yet. This page is here so the link works \u2014 check back, or browse what we do carry."] })) : null, readFailed ? (_jsxs(Alert, { variant: "warning", children: ["We could not load ", franchise.name, " listings just now. Please try again."] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: "muted", className: "mb-4", children: total === 0
                                     ? "No listings yet."
                                     : `${total}${truncated ? "+" : ""} listing${total === 1 ? "" : "s"}` }), _jsx(ProductGrid, { products: products, emptyLabel: "No listings yet." })] }))] }) }) }));
 }

package/dist/features/events/components/EventCard.js

@@ -8,6 +8,7 @@ import { EVENT_FIELDS } from "../schemas/index.js";
 import { EventStatusBadge } from "./EventStatusBadge.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
 };
@@ -34,11 +35,23 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", s
     const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
     const card = (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
                                 daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
-    if (!renderOwnerActions)
+    /*
+     * 🛑 Default, not opt-in. Nothing in either repo ever passed
+     * `renderOwnerActions`, so this toolbar was unreachable on every grid that
+     * mounts this card (Root Cause #8 — a slot shell rendered with zero render
+     * props). A card is resource-specific by construction, so it names its own
+     * resource rather than being threaded one; the prop stays as an override.
+     */
+    const ownerActions = renderOwnerActions
+        ? renderOwnerActions()
+        : event.id
+            ? (_jsx(RecordOwnerQuickActions, { resource: "EVENT", recordId: String(event.id), recordLabel: event.title, placement: "card" }))
+            : null;
+    if (!ownerActions)
         return card;
     /*
      * Sibling of the card, never a child — see the prop's docstring. `z-20`
      * beats this card's own overlays, which all sit at `z-10`.
      */
-    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: renderOwnerActions() })] }));
+    return (_jsxs(Div, { className: "relative h-full", children: [card, _jsx(Div, { className: "absolute right-2 top-2 z-20", children: ownerActions })] }));
 }

package/dist/features/grouped/components/GroupedListingDetailView.js

@@ -4,8 +4,7 @@ import { Container, Div, Heading, Section, Span, Stack, Text, } from "../../../u
 import { MediaImage } from "../../media/MediaImage.js";
 import { GroupMemberPicker } from "../../products/components/GroupMemberPicker.js";
 import { readGroupRules } from "../../../_internal/shared/features/products/group-rules.js";
-import { OwnerQuickActions } from "../../../features/admin/components/OwnerQuickActions.js";
-import { ROUTES } from "../../../next/routing/route-map.js";
+import { RecordOwnerQuickActions } from "../../../features/admin/components/RecordOwnerQuickActions.js";
 const __O = { hidden: "overflow-hidden" };
 /** Human label per theme — mirrors GROUP_THEME_TITLE on the carousel. */
 const THEME_LABEL = {
@@ -16,7 +15,7 @@ const THEME_LABEL = {
     generic: "Grouped listing",
 };
 export function GroupedListingDetailView({ group, members }) {
-    return (_jsx(Section, { padding: "section", children: _jsx(Container, { children: _jsxs(Stack, { gap: "comfortable", children: [group.coverImage && (_jsx(Div, { className: `relative h-48 w-full md:h-64 ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: group.coverImage, alt: group.title, size: "banner" }) })), _jsxs(Stack, { gap: "xs", children: [_jsx(Span, { size: "xs", color: "muted", transform: "uppercase", weight: "semibold", children: THEME_LABEL[group.groupTheme] }), _jsx(OwnerQuickActions, { resource: "GROUP", placement: "detail", recordLabel: String(group.title), storeId: group.storeId ? String(group.storeId) : undefined, editHref: String(ROUTES.ADMIN.GROUPED_LISTINGS_EDIT(String(group.id))) }), _jsx(Heading, { level: 1, children: group.title }), group.description && (_jsx(Text, { color: "muted", children: group.description })), _jsxs(Text, { size: "sm", color: "muted", children: [members.length, " item", members.length === 1 ? "" : "s", " in this group"] })] }), members.length > 0 ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", children: "Pick what you want" }), _jsx(Text, { size: "sm", color: "muted", children: "Choose a quantity for each item \u2014 they'll go into your cart as a single line you can edit later." }), _jsx(GroupMemberPicker, { groupId: group.id, groupSource: "grouped-listing", members: members, 
+    return (_jsx(Section, { padding: "section", children: _jsx(Container, { children: _jsxs(Stack, { gap: "comfortable", children: [group.coverImage && (_jsx(Div, { className: `relative h-48 w-full md:h-64 ${__O.hidden}`, rounded: "xl", surface: "muted", children: _jsx(MediaImage, { src: group.coverImage, alt: group.title, size: "banner" }) })), _jsxs(Stack, { gap: "xs", children: [_jsx(Span, { size: "xs", color: "muted", transform: "uppercase", weight: "semibold", children: THEME_LABEL[group.groupTheme] }), _jsx(RecordOwnerQuickActions, { resource: "GROUP", recordId: String(group.id), placement: "detail", recordLabel: String(group.title), storeId: group.storeId ? String(group.storeId) : undefined }), _jsx(Heading, { level: 1, children: group.title }), group.description && (_jsx(Text, { color: "muted", children: group.description })), _jsxs(Text, { size: "sm", color: "muted", children: [members.length, " item", members.length === 1 ? "" : "s", " in this group"] })] }), members.length > 0 ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Heading, { level: 2, size: "lg", children: "Pick what you want" }), _jsx(Text, { size: "sm", color: "muted", children: "Choose a quantity for each item \u2014 they'll go into your cart as a single line you can edit later." }), _jsx(GroupMemberPicker, { groupId: group.id, groupSource: "grouped-listing", members: members, 
                                 /*
                                  * Off the group document this view already loaded. The picker
                                  * and `addGroupLineToCart` run the SAME `checkGroupRules`, so

package/dist/features/homepage/components/CustomCardsSection.js

@@ -1,61 +1,73 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
-import { Anchor, Div, Heading, HorizontalScroller, Section, Stack, Text } from "../../../ui/index.js";
-import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
+import Link from "next/link.js";
+import { Div, Heading, HorizontalScroller, PlainCard, PLAIN_CLASS, PosterCard, PosterGrid, POSTER_CLASS, Section, } from "../../../ui/index.js";
 import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed.js";
+/* Not re-exported from `ui/index` — import from the defining module (Root Cause #18). */
+import { Iframe } from "../../../ui/components/Iframe.js";
 import { SectionCarousel } from "./SectionCarousel.js";
 import { MediaImage } from "../../media/MediaImage.js";
-const __P = {
-    p4: "p-[var(--appkit-space-4)]",
-};
-const __O = {
-    hidden: "overflow-hidden",
-};
 // --- Constants ---------------------------------------------------------------
 const CLS_CONTAINER = "w-full max-w-7xl mx-auto px-[var(--appkit-space-4)]";
-// --- Helpers -----------------------------------------------------------------
-const COLS_CLASS = {
-    1: "grid-cols-1",
-    2: "grid-cols-1 sm:grid-cols-2",
-    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
-};
-const RADIUS_CLASS = {
-    none: "rounded-none",
-    sm: "rounded-sm",
-    md: "rounded-md",
-    lg: "rounded-lg",
-    xl: "rounded-xl",
-    full: "rounded-full",
-};
-const SHADOW_CLASS = {
-    none: "",
-    sm: "shadow-sm",
-    md: "shadow-md",
-    lg: "shadow-lg",
-};
-const VARIANT_CLASS = {
-    primary: "inline-flex items-center justify-center px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] rounded-md bg-[var(--appkit-color-primary)] text-white text-[length:var(--appkit-text-sm)] font-medium hover:opacity-90 transition-opacity",
-    secondary: "inline-flex items-center justify-center px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] rounded-md bg-[var(--appkit-color-secondary)] text-white text-[length:var(--appkit-text-sm)] font-medium hover:opacity-90 transition-opacity",
-    outline: "inline-flex items-center justify-center px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] rounded-md border border-current text-[length:var(--appkit-text-sm)] font-medium hover:bg-black/5 transition-colors",
-    ghost: "inline-flex items-center justify-center px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium hover:underline transition-colors",
-};
+function isKeyChip(variant) {
+    return variant !== "ghost";
+}
+/**
+ * 🛑 `next/link` for an internal href, a plain `<a>` only for an external one.
+ *
+ * A bare anchor on an internal route does a FULL PAGE LOAD — the regression
+ * documented on `OverflowRow.linkAs`, and invisible apart from the flash. The
+ * hrefs here are admin-authored, so both kinds genuinely occur.
+ */
+function Chip({ button, className, }) {
+    const external = button.target === "_blank" || /^https?:\/\//.test(button.href);
+    if (external) {
+        return (_jsx("a", { href: button.href, className: className, target: button.target ?? "_blank", rel: "noopener noreferrer", children: button.label }));
+    }
+    return (_jsx(Link, { href: button.href, className: className, children: button.label }));
+}
+/**
+ * Peers first, destinations last.
+ *
+ * The seeded order interleaves them ("… Heavy Metal System, Parts, Launchers"
+ * on one card, "Parts" mid-row on another), so the solid chips landed in a
+ * different place on every card and the row had no readable shape. Sorting is
+ * stable, so the authored order within each group is preserved.
+ */
+function orderedButtons(buttons) {
+    return [...buttons].sort((a, b) => Number(isKeyChip(a.variant)) - Number(isKeyChip(b.variant)));
+}
 // --- Card Item ---------------------------------------------------------------
 function CardItem({ card }) {
-    const radiusClass = RADIUS_CLASS[card.borderRadius ?? "lg"] ?? "rounded-lg";
-    const shadowClass = SHADOW_CLASS[card.shadowLevel ?? "sm"] ?? "shadow-sm";
-    return (_jsxs(DynamicBgDiv, { color: card.backgroundColor, textColor: card.textColor, className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, children: [card.image && (_jsx(Div, { className: `relative w-full aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs(Stack, { className: `${__P.p4} flex-1`, gap: "sm", children: [card.eyebrow && (_jsx(Text, { className: "tracking-widest opacity-70", size: "xs", weight: "semibold", transform: "uppercase", children: card.eyebrow })), card.title && (_jsx(Text, { className: "leading-snug", size: "base", weight: "bold", children: card.title })), card.body && (_jsx(Text, { className: "opacity-80 leading-relaxed flex-1", size: "sm", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx(Row, { gap: "sm", wrap: true, className: "mt-2", children: card.buttons.map((btn, i) => (_jsx(Anchor, { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, tone: "none", underline: "none", className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md min-h-[200px]", title: "Embedded form" }))] })] }));
+    const buttons = card.buttons?.length ? orderedButtons(card.buttons) : [];
+    /*
+     * With artwork → the poster treatment: the image fills the card and the
+     * scrim carries the type. Without → the plain card. Branching on the data
+     * rather than on a config flag keeps every OTHER `custom-cards` section an
+     * admin has authored rendering exactly as before.
+     */
+    if (card.image) {
+        return (_jsx(PosterCard, { height: "tall", media: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card", objectFit: "cover" }), eyebrow: card.eyebrow, title: card.title, text: card.body, chips: buttons.length > 0
+                ? buttons.map((btn, i) => (_jsx(Chip, { button: btn, className: isKeyChip(btn.variant)
+                        ? `${POSTER_CLASS.chip} ${POSTER_CLASS.chipKey}`
+                        : POSTER_CLASS.chip }, `${btn.href}-${i}`)))
+                : undefined }));
+    }
+    return (_jsx(PlainCard, { eyebrow: card.eyebrow, title: card.title, text: card.body, chips: buttons.length > 0
+            ? buttons.map((btn, i) => (_jsx(Chip, { button: btn, className: isKeyChip(btn.variant)
+                    ? `${PLAIN_CLASS.chip} ${PLAIN_CLASS.chipKey}`
+                    : PLAIN_CLASS.chip }, `${btn.href}-${i}`)))
+            : undefined, footer: card.formEmbed ? (_jsx(Iframe, { src: card.formEmbed, title: "Embedded form", sandbox: "allow-forms allow-scripts" })) : undefined }));
 }
 // --- Section Header ----------------------------------------------------------
 function SectionHeader({ title }) {
     const themed = { textPrimary: THEMED_TEXT_PRIMARY };
     if (!title)
         return null;
-    return (_jsx(Div, { className: "mb-6", children: _jsx(Heading, { level: 2, className: themed.textPrimary, children: title }) }));
+    return (_jsx(Div, { className: "mb-6 text-left", children: _jsx(Heading, { level: 2, className: themed.textPrimary, size: "2xl", mdSize: "3xl", weight: "bold", children: title }) }));
 }
 export function CustomCardsSection(config) {
-    const { title, layout, columns = 3, cards, autoScroll, scrollIntervalMs, loop = true } = config;
+    const { title, layout, columns = 3, cards, autoScroll, scrollIntervalMs, loop = true, } = config;
     if (!cards?.length)
         return null;
     // autoScroll: wrap all cards in SectionCarousel (client carousel)
@@ -66,16 +78,21 @@ export function CustomCardsSection(config) {
     if (layout === "row") {
         return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, loop: loop, items: cards, keyExtractor: (card) => card.id, renderItem: (card) => (_jsx(Div, { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) })) })] }) }));
     }
-    // Masonry layout: CSS columns
+    /*
+     * Masonry. `columns-*` on a container whose children are poster cards would
+     * fragment them across column boundaries, so the cards still carry
+     * `break-inside-avoid` — unchanged behaviour, just the new card shapes.
+     */
     if (layout === "masonry") {
-        const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
-        const masonryClass = colsClass
-            .split(" ")
-            .map((c) => c.replace("grid-cols-", "columns-"))
-            .join(" ");
-        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Stack, { className: `${masonryClass}`, gap: "md", children: cards.map((card) => (_jsx(Div, { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        const masonryClass = columns === 4
+            ? "columns-1 sm:columns-2 lg:columns-4"
+            : columns === 2
+                ? "columns-1 sm:columns-2"
+                : columns === 1
+                    ? "columns-1"
+                    : "columns-1 sm:columns-2 lg:columns-3";
+        return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Div, { gap: "4", className: masonryClass, children: cards.map((card) => (_jsx(Div, { className: "break-inside-avoid mb-4", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Grid layout (default)
-    const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
-    return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(Div, { layout: "grid", gap: "4", className: `${colsClass}`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
+    return (_jsx(Section, { padding: "y-3xl", surface: "muted", children: _jsxs(Div, { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(PosterGrid, { columns: columns, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
 }

package/dist/features/homepage/components/ShopByCategorySection.js

@@ -4,26 +4,39 @@ import { useState } from "react";
 import Image from "next/image.js";
 import Link from "next/link.js";
 import { THEMED_TEXT_PRIMARY } from "../../../_internal/shared/styles/themed.js";
-import { Button, Div, Heading, HorizontalScroller, Row, Section, Span, Stack, Text } from "../../../ui/index.js";
+import { Button, Div, Heading, HorizontalScroller, POSTER_CLASS, Row, Section, Span, Text, } from "../../../ui/index.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { resolveMediaUrl } from "../../../utils/media-url.js";
 import { useTopCategories } from "../hooks/useTopCategories.js";
 import { CAROUSEL_PER_VIEW } from "../constants/carousel-per-view.js";
-const __P = {
-    p3: "p-[var(--appkit-space-3)]",
-};
-const __O = {
-    hidden: "overflow-hidden",
-};
 function isImageUrl(s) {
     return s.startsWith("http") || s.startsWith("/") || s.startsWith("data:");
 }
+/**
+ * One category tile.
+ *
+ * 🛑 Image-LED, not image-on-top-of-a-body. The previous shape was a 16:9 crop
+ * stacked over a white block holding an icon square, the name, a count and a
+ * "Browse category →" line — four separate type sizes and a redundant CTA on a
+ * tile that is already entirely a link. It also letterboxed the artwork: every
+ * generation cover is portrait key art, so `aspect-video` cropped it to a
+ * horizontal band through the middle.
+ *
+ * Now it is the same `PosterCard` the systems matrix uses, so the two bands on
+ * the homepage read as one system rather than two designs.
+ */
 function CategoryChip({ category }) {
     const iconSrc = category.display?.icon;
     const coverImage = category.display?.coverImage;
-    const initial = category.name[0]?.toUpperCase() ?? "?";
+    const resolvedCover = coverImage && isImageUrl(coverImage) ? resolveMediaUrl(coverImage) : undefined;
     const productCount = category.metrics?.totalProductCount ?? category.metrics?.productCount ?? 0;
-    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: "group flex w-full min-h-[180px] sm:min-h-[220px] flex-col overflow-hidden rounded-xl border bg-[var(--appkit-color-surface)] shadow-sm transition-all hover:border-primary-300 hover:shadow-md border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] dark:hover:border-primary-600", children: [coverImage && isImageUrl(coverImage) ? (_jsx(Div, { className: `aspect-video w-full ${__O.hidden}`, surface: "subtle", children: _jsx(Image, { src: resolveMediaUrl(coverImage), alt: category.name, width: 320, height: 180, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Div, { surface: "muted", className: "aspect-video w-full" })), _jsxs(Stack, { className: `flex-1 ${__P.p3} text-left`, children: [_jsx(Row, { textWeight: "bold", textSize: "sm", className: "mb-2 h-9 w-9 bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300", align: "center", justify: "center", rounded: "lg", children: iconSrc && isImageUrl(iconSrc) ? (_jsx(Image, { src: resolveMediaUrl(iconSrc), alt: "", width: 24, height: 24, className: "h-6 w-6 rounded object-cover", "aria-hidden": true })) : iconSrc ? (_jsx(Span, { size: "lg", "aria-hidden": "true", className: "leading-none", children: iconSrc })) : (initial) }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", truncate: 2, children: category.name }), _jsxs(Text, { className: "mt-1", color: "muted", size: "xs", children: [productCount.toLocaleString(), " items"] }), _jsx(Text, { className: "mt-auto text-primary dark:text-primary-400 pt-[0.75rem]", size: "xs", weight: "medium", children: "Browse category \u2192" })] })] }));
+    /*
+     * `display.icon` holds an EMOJI in the seed and a URL in other writers —
+     * the ambiguity `resolveTaxonomyVisual` exists for. Only the emoji form is
+     * used as an eyebrow glyph here; a URL would print as raw text.
+     */
+    const emoji = iconSrc && !isImageUrl(iconSrc) ? iconSrc : undefined;
+    return (_jsxs(Link, { href: ROUTES.PUBLIC.CATEGORY_DETAIL(category.slug), className: `${POSTER_CLASS.root} ${POSTER_CLASS.compact} w-full`, children: [resolvedCover ? (_jsx(Div, { className: POSTER_CLASS.media, children: _jsx(Image, { src: resolvedCover, alt: "", fill: true, sizes: "(min-width: 1024px) 20rem, (min-width: 640px) 45vw, 80vw", className: "h-full w-full object-cover" }) })) : null, _jsx(Div, { className: POSTER_CLASS.scrim, "aria-hidden": "true" }), _jsxs(Div, { className: POSTER_CLASS.body, children: [emoji && (_jsx(Span, { className: POSTER_CLASS.eyebrow, "aria-hidden": "true", children: emoji })), _jsx(Span, { className: POSTER_CLASS.title, children: category.name }), _jsxs(Span, { className: POSTER_CLASS.meta, children: [productCount.toLocaleString(), " items"] })] })] }));
 }
 const CTA_CLASSES = {
     filled: "rounded-lg bg-[var(--appkit-color-primary)] px-[var(--appkit-space-5)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-semibold text-white hover:opacity-90",
@@ -69,5 +82,5 @@ export function ShopByCategorySection({ title = "Shop by Category", subtitle, li
                             if (!cat)
                                 return null;
                             return (_jsx(FilterChip, { label: cat.name, active: activeFilter === id, onClick: () => setActiveFilter(activeFilter === id ? "all" : id) }, id));
-                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", className: `${__O.hidden} px-[0.25rem]`, children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[0.375rem] rounded-[var(--appkit-radius-md)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-semibold transition-colors bg-primary text-white hover:bg-primary-600", children: viewMoreLabel }) }))] }) }));
+                        })] })), isLoading ? (_jsx(Div, { layout: "flex", gap: "3", overflow: "hidden", className: "px-[0.25rem]", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Div, { className: "flex-none h-[104px] w-[108px] animate-pulse", surface: "subtle", rounded: "xl" }, i))) })) : (_jsx(HorizontalScroller, { items: categories, renderItem: (cat) => _jsx(CategoryChip, { category: cat }), perView: CAROUSEL_PER_VIEW.standard, gap: 16, keyExtractor: (cat) => cat.id, autoScroll: autoScroll, autoScrollInterval: scrollInterval, showArrows: true, snapToItems: true, showScrollbar: false, loop: loop, pauseOnHover: true })), cta && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) })), !cta && viewMoreHref && !isLoading && (_jsx(Div, { className: "mt-6 text-left", children: _jsx(Link, { href: viewMoreHref, className: "inline-flex items-center gap-[0.375rem] rounded-[var(--appkit-radius-md)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-sm)] font-semibold transition-colors bg-primary text-white hover:bg-primary-600", children: viewMoreLabel }) }))] }) }));
 }

package/dist/features/homepage/schemas/index.d.ts

@@ -215,15 +215,15 @@ export declare const carouselCardSchema: z.ZodObject<{
         description?: string | undefined;
         textColor?: string | undefined;
         textAlign?: "center" | "left" | "right" | undefined;
-        subtitle?: string | undefined;
         eyebrow?: string | undefined;
+        subtitle?: string | undefined;
     }, {
         title?: string | undefined;
         description?: string | undefined;
         textColor?: string | undefined;
         textAlign?: "center" | "left" | "right" | undefined;
-        subtitle?: string | undefined;
         eyebrow?: string | undefined;
+        subtitle?: string | undefined;
     }>>;
     buttons: z.ZodOptional<z.ZodArray<z.ZodObject<{
         id: z.ZodOptional<z.ZodString>;
@@ -282,8 +282,8 @@ export declare const carouselCardSchema: z.ZodObject<{
         description?: string | undefined;
         textColor?: string | undefined;
         textAlign?: "center" | "left" | "right" | undefined;
-        subtitle?: string | undefined;
         eyebrow?: string | undefined;
+        subtitle?: string | undefined;
     } | undefined;
     hover?: {
         effect: "none" | "color" | "scale" | "glow";
@@ -323,8 +323,8 @@ export declare const carouselCardSchema: z.ZodObject<{
         description?: string | undefined;
         textColor?: string | undefined;
         textAlign?: "center" | "left" | "right" | undefined;
-        subtitle?: string | undefined;
         eyebrow?: string | undefined;
+        subtitle?: string | undefined;
     } | undefined;
     hover?: {
         effect: "none" | "color" | "scale" | "glow";
@@ -555,15 +555,15 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
             description?: string | undefined;
             textColor?: string | undefined;
             textAlign?: "center" | "left" | "right" | undefined;
-            subtitle?: string | undefined;
             eyebrow?: string | undefined;
+            subtitle?: string | undefined;
         }, {
             title?: string | undefined;
             description?: string | undefined;
             textColor?: string | undefined;
             textAlign?: "center" | "left" | "right" | undefined;
-            subtitle?: string | undefined;
             eyebrow?: string | undefined;
+            subtitle?: string | undefined;
         }>>;
         buttons: z.ZodOptional<z.ZodArray<z.ZodObject<{
             id: z.ZodOptional<z.ZodString>;
@@ -622,8 +622,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
             description?: string | undefined;
             textColor?: string | undefined;
             textAlign?: "center" | "left" | "right" | undefined;
-            subtitle?: string | undefined;
             eyebrow?: string | undefined;
+            subtitle?: string | undefined;
         } | undefined;
         hover?: {
             effect: "none" | "color" | "scale" | "glow";
@@ -663,8 +663,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
             description?: string | undefined;
             textColor?: string | undefined;
             textAlign?: "center" | "left" | "right" | undefined;
-            subtitle?: string | undefined;
             eyebrow?: string | undefined;
+            subtitle?: string | undefined;
         } | undefined;
         hover?: {
             effect: "none" | "color" | "scale" | "glow";
@@ -802,8 +802,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
             description?: string | undefined;
             textColor?: string | undefined;
             textAlign?: "center" | "left" | "right" | undefined;
-            subtitle?: string | undefined;
             eyebrow?: string | undefined;
+            subtitle?: string | undefined;
         } | undefined;
         hover?: {
             effect: "none" | "color" | "scale" | "glow";
@@ -911,8 +911,8 @@ export declare const carouselSlideFirestoreSchema: z.ZodObject<{
             description?: string | undefined;
             textColor?: string | undefined;
             textAlign?: "center" | "left" | "right" | undefined;
-            subtitle?: string | undefined;
             eyebrow?: string | undefined;
+            subtitle?: string | undefined;
         } | undefined;
         hover?: {
             effect: "none" | "color" | "scale" | "glow";

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

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Section, Container, Stack, Row, Div, Heading, Text, Span, TextLink, Badge, } from "../../../ui/index.js";
+import { Section, Container, Stack, Row, Div, Heading, Text, Span, TextLink, Badge, Anchor, } from "../../../ui/index.js";
 import { SpecTable } from "../../../ui/components/SpecTable.js";
+import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
 import { PART_SLOT_LABEL, } from "../schemas/firestore.js";
 /**
  * The buyer-facing label for each WBO tournament format, in the order a
@@ -100,12 +102,12 @@ export function PartDetailPageView({ part, usedBy, listings, listingsTruncated,
         : [];
     /* Only the formats this part is actually ruled on — see the note below. */
     const legalFormats = Object.entries(part.wboLegality ?? {}).filter(([, v]) => typeof v === "boolean");
-    return (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", className: "min-w-0", children: [_jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsx(Text, { size: "sm", color: "muted", children: _jsx(TextLink, { href: hrefForClassification(part.slot), children: classification }) }), _jsx(Heading, { level: 1, children: part.name }), _jsxs(Row, { gap: "xs", wrap: true, align: "center", className: "min-w-0", children: [part.code && _jsx(Badge, { variant: "info", children: part.code }), typeof part.weightG === "number" && (_jsxs(Badge, { variant: "default", children: [part.weightG, " g"] }))] }), aliases.length > 0 && (_jsxs(Text, { size: "sm", color: "muted", children: ["Also written: ", aliases.join(" · ")] }))] }), specRows.length > 1 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "Specifications" }), _jsx(SpecTable, { rows: specRows })] })), ratingRows.length > 0 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "Ratings" }), _jsx(SpecTable, { rows: ratingRows.map((r) => ({
+    return (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "lg", children: _jsxs(Stack, { gap: "lg", className: "min-w-0", children: [_jsxs(Stack, { gap: "xs", className: "min-w-0", children: [_jsx(Text, { size: "sm", color: "muted", children: _jsx(TextLink, { href: hrefForClassification(part.slot), children: classification }) }), _jsx(Heading, { level: 1, children: part.name }), _jsx(RecordOwnerQuickActions, { resource: "PART", recordId: part.id, placement: "detail", recordLabel: part.name }), _jsxs(Row, { gap: "xs", wrap: true, align: "center", className: "min-w-0", children: [part.code && _jsx(Badge, { variant: "info", children: part.code }), typeof part.weightG === "number" && (_jsxs(Badge, { variant: "default", children: [part.weightG, " g"] }))] }), aliases.length > 0 && (_jsxs(Text, { size: "sm", color: "muted", children: ["Also written: ", aliases.join(" · ")] }))] }), specRows.length > 1 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "Specifications" }), _jsx(SpecTable, { rows: specRows })] })), ratingRows.length > 0 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "Ratings" }), _jsx(SpecTable, { rows: ratingRows.map((r) => ({
                                     name: r.label,
                                     value: `${r.value} / 100`,
                                 })) }), _jsxs(Text, { size: "xs", color: "faint", children: ["Rescaled to 0\u2013100 for comparison across generations", typeof part.ratingScale === "number"
                                         ? `; rated 0–${part.ratingScale} at source`
-                                        : "", "."] })] })), legalFormats.length > 0 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "Tournament legality" }), _jsx(Row, { gap: "xs", wrap: true, align: "center", className: "min-w-0", children: legalFormats.map(([format, allowed]) => (_jsxs(Badge, { variant: allowed ? "success" : "danger", children: [WBO_FORMAT_LABEL[format] ?? format, allowed ? " ✓" : " ✗"] }, format))) }), _jsx(Text, { size: "xs", color: "faint", children: "World Beyblade Organization formats this part is ruled on. A format not listed has no ruling for it." })] })), _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: usedBy.length > 0
+                                        : "", "."] })] })), legalFormats.length > 0 && (_jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "Tournament legality" }), _jsx(Row, { gap: "xs", wrap: true, align: "center", className: "min-w-0", children: legalFormats.map(([format, allowed]) => (_jsxs(Badge, { variant: allowed ? "success" : "danger", children: [WBO_FORMAT_LABEL[format] ?? format, allowed ? " ✓" : " ✗"] }, format))) }), _jsx(Text, { size: "xs", color: "faint", children: "World Beyblade Organization formats this part is ruled on. A format not listed has no ruling for it." })] })), part.sourceUrl && (_jsx(Div, { children: _jsxs(Text, { size: "xs", color: "faint", children: ["Facts on this page are drawn from a community wiki under CC\u00A0BY-SA.", " ", _jsx(Anchor, { href: part.sourceUrl, tone: "muted", underline: "always", children: "Source" }), " · ", _jsx(TextLink, { href: String(ROUTES.PUBLIC.CREDITS), children: "Credits" })] }) })), _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: usedBy.length > 0
                                     ? `Used by ${usedBy.length} ${usedBy.length === 1 ? "model" : "models"}`
                                     : "Used by" }), usedBy.length === 0 ? (_jsx(Text, { color: "muted", size: "sm", children: "No model in our database records this part yet." })) : (_jsx(Stack, { gap: "xs", className: "min-w-0", children: usedBy.map((m) => (_jsxs(Row, { gap: "sm", align: "center", padding: "inline", surface: "card", rounded: "md", border: "subtle", className: "min-w-0", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [m.categoryId ? (_jsx(TextLink, { href: hrefForModel(m.categoryId), children: m.name })) : (
                                                 /* 49 of 259 compositions did not join to a category.