@mohasinac/appkit 4.56.0 → 4.58.0

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

@@ -9,7 +9,7 @@ import { MediaImage } from "../../media/MediaImage.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { computeBundleDiscount } from "../../../_internal/shared/features/categories/bundle-pricing.js";
 import { CategoryGrid } from "./CategoryGrid.js";
-import { OwnerQuickActions } from "../../../features/admin/components/OwnerQuickActions.js";
+import { RecordOwnerQuickActions } from "../../../features/admin/components/RecordOwnerQuickActions.js";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -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(OwnerQuickActions, { resource: "BUNDLE", placement: "detail", recordLabel: String(bundle.name), editHref: String(ROUTES.ADMIN.BUNDLES_EDIT(String(bundle.id))) }), _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(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 && (
                                                     // 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

@@ -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,6 +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 { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const PAGE_SIZE = 24;
 export async function FranchiseDetailPageView({ slug, franchise, }) {
     const result = await safeRead(() => listPublicProducts({
@@ -37,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: [_jsx(Heading, { level: 1, color: "primary", size: "3xl", weight: "semibold", children: franchise.name }), 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/faq/components/FAQPageContent.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Alert, Div, EmptyState, Heading, Input, SlottedListingView, Text } from "../../../ui/index.js";
+import { Alert, Div, EmptyState, Heading, Input, Row, SlottedListingView, Text, TextLink } from "../../../ui/index.js";
 import { sortBy } from "../../../constants/sort.js";
 import { FAQCategorySidebar } from "./FAQCategorySidebar.js";
 import { FAQSortDropdown } from "./FAQSortDropdown.js";
 import { FAQAccordion } from "./FAQAccordion.js";
 import { ContactCTA } from "./ContactCTA.js";
 import { useFaqList } from "../hooks/useFaqList.js";
+import { helpGuideFor } from "../constants/help-guides.js";
 export function FAQPageContent({ initialCategory = "all", categories, routeHelpers, labels, contact, searchValue, onSearchChange, sortOption, onSortChange, page = 1, pageSize = 100, renderPagination, renderMobileCategoryTabs, renderAccordion, }) {
     const selectedCategory = initialCategory;
     const sorts = sortOption === "helpful"
@@ -49,9 +50,21 @@ export function FAQPageContent({ initialCategory = "all", categories, routeHelpe
                                 allFaqs: labels.allFaqs,
                                 stillHaveQuestions: labels.stillHaveQuestions,
                                 contactSupport: labels.contactSupport,
-                            } }) }), _jsxs(Div, { className: "col-span-1 lg:col-span-8 xl:col-span-9", children: [_jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-6", renderHeader: () => (_jsxs(Text, { size: "sm", color: "muted", children: [labels.resultCount(total), selectedCategory !== "all"
-                                            ? ` ${labels.inCategory(categories.find((c) => c.key === selectedCategory)?.label ?? selectedCategory)}`
-                                            : ""] })), renderSearch: () => (_jsx(Input, { value: searchValue, onChange: (event) => onSearchChange(event.target.value), placeholder: labels.searchPlaceholder })), renderSort: () => (_jsx(FAQSortDropdown, { selectedSort: sortOption, onSortChange: onSortChange, labels: {
+                            } }) }), _jsxs(Div, { className: "col-span-1 lg:col-span-8 xl:col-span-9", children: [_jsx(SlottedListingView, { portal: "public", inlineToolbar: true, className: "space-y-6", renderHeader: () => {
+                                    /*
+                                     * The fuller answer, next to the short ones.
+                                     *
+                                     * Only on a chosen category: on "all" there is no single guide
+                                     * to offer, and a link to the Help Centre index here would
+                                     * duplicate the footer's for no gain. `helpGuideFor` falls back
+                                     * to the index for the two categories that span the product, so
+                                     * a selected category always has somewhere honest to point.
+                                     */
+                                    const guide = selectedCategory !== "all" ? helpGuideFor(selectedCategory) : null;
+                                    return (_jsxs(Row, { align: "center", justify: "between", gap: "sm", className: "min-w-0", children: [_jsxs(Text, { size: "sm", color: "muted", className: "min-w-0", children: [labels.resultCount(total), selectedCategory !== "all"
+                                                        ? ` ${labels.inCategory(categories.find((c) => c.key === selectedCategory)?.label ?? selectedCategory)}`
+                                                        : ""] }), guide && (_jsxs(TextLink, { href: guide.path, size: "sm", variant: "muted", className: "flex-shrink-0", children: [guide.label, " \u2192"] }))] }));
+                                }, renderSearch: () => (_jsx(Input, { value: searchValue, onChange: (event) => onSearchChange(event.target.value), placeholder: labels.searchPlaceholder })), renderSort: () => (_jsx(FAQSortDropdown, { selectedSort: sortOption, onSortChange: onSortChange, labels: {
                                         label: labels.sortLabel,
                                         helpful: labels.sortHelpful,
                                         newest: labels.sortNewest,

package/dist/features/faq/constants/help-guides.d.ts

@@ -0,0 +1,36 @@
+import type { FAQCategory } from "../types/index";
+/**
+ * The Help Centre guide that answers a FAQ category at length.
+ *
+ * A FAQ is a short answer to one question; a help guide is the surrounding
+ * explanation. They were written as separate surfaces and never linked —
+ * measured 2026-10-20, the FAQ seed contained **zero** `/help/` links across
+ * 91 entries — so a reader who wanted the fuller version had to already know
+ * the Help Centre existed and find the right page in it.
+ *
+ * 🛑 `Record<FAQCategory, …>`, deliberately, so adding a tenth category is a
+ * COMPILE error rather than a category that silently offers no guide. This is
+ * the same decision as `ALL_LISTING_TYPES_MAP` and `EMAIL_ELIGIBLE_TYPES`, and
+ * the reason is Root Cause #61: every hand-written enumeration of a union in
+ * this codebase has eventually fallen behind it.
+ *
+ * `null` is a real answer and not a gap. `technical_support` and `general`
+ * span the whole product, so pointing them at one guide would be arbitrary —
+ * they get the Help Centre index instead, via `HELP_INDEX_PATH`. Writing a
+ * guide to point them at later is a content decision, not a missing entry.
+ *
+ * 🛑 Paths, not `ROUTES`. The Help Centre pages are consumer routes under
+ * `src/app/[locale]/help/`, and `ROUTES` is appkit's own map — adding them
+ * there would make appkit declare pages it does not own. They are stable,
+ * linked from the footer, and covered by `audit-nav-page-wiring`.
+ */
+export declare const HELP_INDEX_PATH: "/help";
+export declare const FAQ_CATEGORY_HELP_GUIDE: Record<FAQCategory, {
+    path: string;
+    label: string;
+} | null>;
+/** The guide for a category, or the Help Centre index when none is specific. */
+export declare function helpGuideFor(category: FAQCategory): {
+    path: string;
+    label: string;
+};

package/dist/features/faq/constants/help-guides.js

@@ -0,0 +1,64 @@
+/**
+ * The Help Centre guide that answers a FAQ category at length.
+ *
+ * A FAQ is a short answer to one question; a help guide is the surrounding
+ * explanation. They were written as separate surfaces and never linked —
+ * measured 2026-10-20, the FAQ seed contained **zero** `/help/` links across
+ * 91 entries — so a reader who wanted the fuller version had to already know
+ * the Help Centre existed and find the right page in it.
+ *
+ * 🛑 `Record<FAQCategory, …>`, deliberately, so adding a tenth category is a
+ * COMPILE error rather than a category that silently offers no guide. This is
+ * the same decision as `ALL_LISTING_TYPES_MAP` and `EMAIL_ELIGIBLE_TYPES`, and
+ * the reason is Root Cause #61: every hand-written enumeration of a union in
+ * this codebase has eventually fallen behind it.
+ *
+ * `null` is a real answer and not a gap. `technical_support` and `general`
+ * span the whole product, so pointing them at one guide would be arbitrary —
+ * they get the Help Centre index instead, via `HELP_INDEX_PATH`. Writing a
+ * guide to point them at later is a content decision, not a missing entry.
+ *
+ * 🛑 Paths, not `ROUTES`. The Help Centre pages are consumer routes under
+ * `src/app/[locale]/help/`, and `ROUTES` is appkit's own map — adding them
+ * there would make appkit declare pages it does not own. They are stable,
+ * linked from the footer, and covered by `audit-nav-page-wiring`.
+ */
+export const HELP_INDEX_PATH = "/help";
+/**
+ * The orders guide, named once because THREE categories share it.
+ *
+ * `orders_payment`, `shipping_delivery` and `returns_refunds` all resolve to
+ * the same page — see the per-entry notes below for why — so the path and the
+ * label were written out three times each. Extracted so a retitle is one edit
+ * rather than three, and so the three cannot drift into disagreeing labels for
+ * one destination.
+ */
+const ORDERS_GUIDE = {
+    path: "/help/orders",
+    label: "Orders, Returns & Support guide",
+};
+export const FAQ_CATEGORY_HELP_GUIDE = {
+    orders_payment: ORDERS_GUIDE,
+    // Shipping questions are about an order in flight, which is what the orders
+    // guide covers end to end. A separate shipping guide does not exist, and a
+    // link to one that did not would be worse than this.
+    shipping_delivery: ORDERS_GUIDE,
+    returns_refunds: ORDERS_GUIDE,
+    // "Is my Beyblade original?" — the vocabulary behind most questions about
+    // what an item actually is.
+    product_information: { path: "/help/authenticity", label: "Is my Beyblade original?" },
+    account_security: { path: "/help/account", label: "Account & Safety guide" },
+    // Safety, not shopping: the account guide is where reporting and blocking
+    // live.
+    scam_awareness: { path: "/help/account", label: "Account & Safety guide" },
+    fees_and_taxes: { path: "/help/shopping", label: "Shopping & Checkout guide" },
+    technical_support: null,
+    general: null,
+};
+/** The guide for a category, or the Help Centre index when none is specific. */
+export function helpGuideFor(category) {
+    return (FAQ_CATEGORY_HELP_GUIDE[category] ?? {
+        path: HELP_INDEX_PATH,
+        label: "Help Centre",
+    });
+}

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/HeroCarousel.js

@@ -10,6 +10,8 @@ import { POSITION_FILL, FLEX_CENTER, HERO_PLACEHOLDER_BG } from "../constants/he
 /* The one carousel position/navigation control. The dot and arrow class
    strings this file used to import are deleted — see CarouselNav.style.css. */
 import { CarouselNav } from "../../../ui/components/CarouselNav.js";
+import { OwnerQuickActions } from "../../admin/components/OwnerQuickActions.js";
+import { ROUTES } from "../../../next/routing/route-map.js";
 function makeButtonClickHandler(href, openInNewTab, push) {
     return () => {
         if (openInNewTab) {
@@ -200,7 +202,7 @@ export function HeroCarousel({ initialSlides, push, height, defaultAutoplayDelay
         onMouseEnter: pauseOnHover ? () => setIsPaused(true) : undefined, onMouseLeave: pauseOnHover ? () => setIsPaused(false) : undefined, onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: POSITION_FILL, children: _jsx(Div, { layout: "flex", ref: slidesRef, onScroll: handleSlidesScroll, className: "h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
                         const slideHeightClass = getSlideHeightClass(slide.settings?.height);
                         const hasCards = slide.cards && slide.cards.length > 0;
-                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-neutral-900 ${slideHeightClass}`, children: [_jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { layout: "flex-col", align: "start", justify: "center", className: `${POSITION_FILL} text-left md:px-[4rem] lg:px-[8rem]`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 opacity-80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-neutral-900 ${slideHeightClass}`, children: [_jsx(Div, { className: "absolute bottom-2 left-2 z-10", children: _jsx(OwnerQuickActions, { resource: "CAROUSEL", placement: "card", recordLabel: slide.title ?? `Slide ${slideIndex + 1}`, editHref: String(ROUTES.ADMIN.CAROUSEL_EDIT(slide.id)) }) }), _jsx(Div, { className: POSITION_FILL, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { layout: "flex-col", align: "start", justify: "center", className: `${POSITION_FILL} text-left md:px-[4rem] lg:px-[8rem]`, padding: "x-lg", children: [slide.overlay.subtitle && (_jsx(Text, { color: "inverse", shadow: "sm", className: "stagger-1 opacity-80 mb-1 md:mb-2 tracking-widest", mdSize: "sm", size: "xs", transform: "uppercase", children: slide.overlay.subtitle })), slide.overlay.title && (
                                         // level={2}, NOT 1. The welcome section above this
                                         // carousel owns the page's single <h1>; a carousel that
                                         // emits one <h1> per slide gives the document as many