@mohasinac/appkit 4.71.0 → 4.71.2

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

@@ -15,7 +15,9 @@ import { Grid } from "../../../ui/components/Layout.js";
 import { Label, Span, Text } from "../../../ui/components/Typography.js";
 import { Toggle } from "../../../ui/components/Toggle.js";
 import { StickyToolbar } from "../../../ui/components/StickyToolbar.js";
-import { ListingToolbar } from "../../../ui/components/ListingToolbar.js";
+import { ListingToolbar, applyToggleVisibility } from "../../../ui/components/ListingToolbar.js";
+import { useFieldVisibility } from "../../shell/useFieldVisibility.js";
+import { useEditMode } from "../../../edit-mode/index.js";
 import { Pagination } from "../../../ui/components/Pagination.js";
 import { FilterDrawer } from "../../../ui/components/FilterDrawer.js";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
@@ -38,6 +40,8 @@ export function CategoryBundlesListing({ initialBundles, brandName, onBuyNow, })
     const table = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
     const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
     const [filterOpen, setFilterOpen] = useState(false);
+    const { editMode } = useEditMode();
+    const { fields: toolbarVisibilityFields, fieldOrder: toolbarFieldOrder } = useFieldVisibility("category-bundles-toolbar");
     const [pendingShowOutOfStock, setPendingShowOutOfStock] = useState(table.get("showOutOfStock") === "true");
     const sort = table.get(TABLE_KEYS.SORT) || DEFAULT_SORT;
     const query = table.get(TABLE_KEYS.QUERY) || "";
@@ -93,11 +97,11 @@ export function CategoryBundlesListing({ initialBundles, brandName, onBuyNow, })
         return (_jsx(Div, { className: "border-dashed text-left", padding: "y-4xl", rounded: "2xl", border: "default", children: _jsxs(Text, { color: "muted", children: ["No bundles available", brandName ? ` for ${brandName}` : "", " yet."] }) }));
     }
     return (_jsxs(Div, { className: "min-h-[40vh]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search bundles...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, onSearchKeyDown: (e) => { if (e.key === "Enter")
-                    commitSearch(); }, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: [
+                    commitSearch(); }, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, onResetAll: resetAll, hasActiveState: hasActiveState, toggles: applyToggleVisibility([
                     // Inline quick-filter: the single facet this page has is promoted to
                     // the sticky toolbar so it doesn't require open-drawer → check →
                     // Apply → close. <FilterDrawer> below stays available for parity
                     // with every other listing page's filter affordance.
                     { label: "Show out-of-stock", active: showOutOfStock, onChange: (next) => table.setMany({ showOutOfStock: next ? "true" : "", page: "1" }) },
-                ] }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: pageItems.length === 0 ? (_jsxs(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "start", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: pageItems.map((bundle) => (_jsxs(Stack, { children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx(Div, { border: "default", surface: "default", className: "-mt-px border-t border-t-0 border-[var(--appkit-color-border)] pt-[0.5rem] pb-[0.75rem]", padding: "x-sm", roundedBottom: "lg", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(Label, { layout: "flex", gap: "lg", className: /* audit-variant-ok: <Label> exposes no flex `justify` prop */ "justify-between cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", color: "muted", children: "Show out-of-stock bundles" }), _jsx(Toggle, { checked: pendingShowOutOfStock, onChange: setPendingShowOutOfStock, size: "sm" })] }) }) })] }));
+                ], editMode ? {} : toolbarVisibilityFields, toolbarFieldOrder) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: pageItems.length === 0 ? (_jsxs(Text, { paddingY: "4xl", color: "muted", size: "sm", align: "start", children: ["No bundles match your search", brandName ? ` for ${brandName}` : "", "."] })) : (_jsx(Grid, { cols: "cards", gap: "lg", children: pageItems.map((bundle) => (_jsxs(Stack, { children: [_jsx(MarketplaceBundleCard, { bundle: bundle }), onBuyNow && (_jsx(Div, { border: "default", surface: "default", className: "-mt-px border-t border-t-0 border-[var(--appkit-color-border)] pt-[0.5rem] pb-[0.75rem]", padding: "x-sm", roundedBottom: "lg", children: _jsx(BundleBuyNowCta, { bundleSlug: bundle.slug, outOfStock: bundle.bundleStockStatus === "out_of_stock", onBuyNow: onBuyNow, compact: true }) }))] }, bundle.id))) })) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingShowOutOfStock(false), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(Label, { layout: "flex", gap: "lg", className: /* audit-variant-ok: <Label> exposes no flex `justify` prop */ "justify-between cursor-pointer", children: [_jsx(Span, { size: "sm", weight: "medium", color: "muted", children: "Show out-of-stock bundles" }), _jsx(Toggle, { checked: pendingShowOutOfStock, onChange: setPendingShowOutOfStock, size: "sm" })] }) }) })] }));
 }

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

@@ -1,5 +1,8 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface CategoryDetailPageViewProps {
     slug: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function CategoryDetailPageView({ slug }: CategoryDetailPageViewProps): Promise<React.JSX.Element>;
+export declare function CategoryDetailPageView({ slug, pageRegionCards }: CategoryDetailPageViewProps): Promise<React.JSX.Element>;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row, SIEVE_OP, sieveAnd, sieveFilter } from "@mohasinac/appkit";
-import { sortBy } from "@mohasinac/appkit";
+import { Row } from "../../../ui/components/Layout.js";
+import { SIEVE_OP, sieveAnd, sieveFilter } from "../../../utils/sieve-builder.js";
+import { sortBy } from "../../../constants/sort.js";
 import { categoryCrumbs, withTrailHead } from "../utils/breadcrumb-chain.js";
 import { ownTotalFor, descendantTotalFor } from "../schemas/category-counts.js";
 import { categoriesRepository, productRepository, storeRepository, } from "../../../repositories/index.js";
@@ -9,10 +10,10 @@ import { Div } from "../../../ui/components/Div.js";
 import { Heading, Span, Text } from "../../../ui/components/Typography.js";
 import { ImageMosaic, MOSAIC_MIN } from "../../../ui/components/ImageMosaic.js";
 import { Main, Section } from "../../../ui/components/Semantic.js";
+import { DetailViewShell } from "../../../ui/components/DetailViewShell.js";
 import { SplitTile } from "../../../ui/components/SplitTile.js";
-import { TextLink } from "../../../ui/components/TextLink.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { RichTextRenderer } from "../../../ui/rich-text/RichTextRenderer.js";
 import { resolveTaxonomyVisual } from "../utils/taxonomy-visual.js";
 import { SubcategoryCardRow } from "./SubcategoryCardRow.js";
@@ -22,14 +23,11 @@ import { CategoryHighlightsAndFaqSection } from "./CategoryHighlightsAndFaqSecti
 import { BreadcrumbTrail } from "./BreadcrumbTrail.js";
 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";
 import { CATEGORY_PAGE_TABS } from "../../products/constants/listing-tabs.js";
-import { enabledCategoryTypes, enabledListingTypes } from "../../../_internal/shared/listing-types/feature-flags.js";
+import { enabledCategoryTypes, listedListingTypes } from "../../../_internal/shared/listing-types/feature-flags.js";
 import { siteSettingsRepository } from "../../admin/repository/site-settings.repository.js";
 import { safeRead } from "../../../errors/safe-read.js";
 import { breadcrumbJsonLd, collectionPageJsonLd, faqJsonLd, } from "../../../seo/json-ld.js";
@@ -37,6 +35,7 @@ import { toStoreListItem } from "../../../_internal/server/features/stores/adapt
 import { hidePublicTestData } from "../../../_internal/server/features/tester/visibility.js";
 import { productImageUrls } from "../../products/schemas/firestore.js";
 import { getBrandName } from "../../../core/brand-resolver.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __O = {
     hidden: "overflow-hidden",
 };
@@ -60,17 +59,17 @@ const __W = "max-w-7xl mx-auto";
  * `CategoryTableColumns` renders "own (total)" explicitly.
  */
 /*
- * 🛑 products + auctions, SUMMED.
+ * 🛑 products + collector drops, SUMMED.
  *
- * `metrics.productCount` EXCLUDES auctions — `Tally` keeps `productIds` and
- * `auctionIds` as separate arrays and writes `auctionCount` /
- * `totalAuctionCount` alongside, so the comparable "how much is in here"
+ * `metrics.productCount` EXCLUDES collector drops — `Tally` keeps `productIds` and
+ * `collectorDropIds` as separate arrays and writes `collectorDropCount` /
+ * `totalCollectorDropCount` alongside, so the comparable "how much is in here"
  * figure is the sum of both. Reading only the product half understated every
- * subcategory holding an auction, and understated it silently: the chip
+ * subcategory holding a collector drop, and understated it silently: the chip
  * showed a plausible smaller number rather than anything that looked wrong.
  *
  * This page already derives its own header figures correctly that way
- * (`productCount` and `auctionCount` resolved separately further down); this
+ * (`productCount` and `collectorDropCount` resolved separately further down); this
  * was the one place that took the product half for the whole.
  *
  * Prefer the rollup (`total*`) over the own-count for both halves, because a
@@ -81,8 +80,8 @@ const __W = "max-w-7xl mx-auto";
  */
 function listingCountFor(child) {
     const products = child.metrics?.totalProductCount ?? child.metrics?.productCount ?? 0;
-    const auctions = child.metrics?.totalAuctionCount ?? child.metrics?.auctionCount ?? 0;
-    return products + auctions;
+    const collectorDrops = child.metrics?.totalCollectorDropCount ?? child.metrics?.collectorDropCount ?? 0;
+    return products + collectorDrops;
 }
 /**
  * Direct children → the Subcategory card row's items.
@@ -140,7 +139,7 @@ const RELATED_CATEGORY_LIMIT = 24;
 const RELATED_CATEGORY_FETCH = 60;
 /** Descendant slugs the Stores tab will match on → at most 4 chunked queries. */
 const STORE_CATEGORY_SLUG_MAX = 120;
-export async function CategoryDetailPageView({ slug }) {
+export async function CategoryDetailPageView({ slug, pageRegionCards = [] }) {
     // The category IS this page's subject — a read failure must surface rather
     // than render an anonymous, empty category page. `undefined` still means
     // "no such category slug".
@@ -166,7 +165,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, pairedBeys] = await Promise.all([
+    const [productsResult, tabCounts, bundlesResult, childCategories, rootSiblingCategories, groupedListings, settings, liveCounts] = await Promise.all([
         categoriesIn
             ? safeRead(() => productRepository.list({
                 filters: sieveAnd(sieveFilter("status", SIEVE_OP.EQ, "published"), sieveFilter("listingType", SIEVE_OP.EQ, "standard")),
@@ -256,54 +255,6 @@ export async function CategoryDetailPageView({ slug }) {
         category?.id
             ? safeRead(() => categoriesRepository.getLiveCounts(category.id), { route: "/categories/[slug]", key: "category.liveCounts", fallback: null })
             : Promise.resolve(null),
-        /*
-         * D12 — the PART COMPOSITION, when this category is a named model.
-         *
-         * 🛑 ONE indexed equality on `categoryId`, added to this same
-         * `Promise.all` for the reason G3b's read above records: Rule #6's budget
-         * is ~3 SEQUENTIAL round trips, and a ninth PARALLEL read adds no
-         * latency. The plan's "a sidecar collection would add an eighth read"
-         * warning was about latency; parallelism is the answer to it, and the
-         * sibling collection is what keeps `onCategoryWrite` — which calls
-         * `notifyRevalidate` unconditionally — from dropping this page's ISR
-         * entry every time a composition is reseeded.
-         *
-         * 🛑 Resolved against this category's OWN id, so only a model leaf gets a
-         * panel. A line or generation node matches nothing and renders nothing,
-         * which is correct: "Burst GT" is not made of parts, the beys under it
-         * are. 210 of 259 compositions joined to a category, so the 49 that did
-         * not simply render no panel rather than a wrong one.
-         */
-        category?.id
-            ? safeRead(() => getCompositionsForCategory(category.id), {
-                route: "/categories/[slug]",
-                key: "parts.compositionsForCategory",
-                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
@@ -466,7 +417,7 @@ export async function CategoryDetailPageView({ slug }) {
     // Header pills read TOTALS, deliberately: "47 products" is a statement about
     // what this category holds, not about what one scope is currently showing.
     const productCount = totals.products ?? category?.metrics?.totalProductCount ?? category?.metrics?.productCount ?? 0;
-    const auctionCount = totals.auctions ?? category?.metrics?.totalAuctionCount ?? category?.metrics?.auctionCount ?? 0;
+    const collectorDropCount = totals.collectorDrops ?? category?.metrics?.totalCollectorDropCount ?? category?.metrics?.collectorDropCount ?? 0;
     const preOrderCount = totals["pre-orders"] ?? 0;
     /*
      * G3b — OWN vs CHILDREN, so one number stops answering two questions.
@@ -604,38 +555,120 @@ 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 ${getBrandName()}` }) }) })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsx(BreadcrumbTrail, { crumbs: trail, className: "mb-4", tone: hasCover ? "on-media" : "default" }), category?.id && _jsx(LastCategoryBeacon, { categoryId: category.id }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.id && (_jsx(RecordOwnerQuickActions, { resource: "CATEGORY", recordId: category.id, placement: "detail", 
-                                /*
-                                 * Same flag the rest of this hero branches on. Without it the
-                                 * pencil renders `ghost` (zinc-600) on the dark cover and is
-                                 * invisible — see Root Cause #67 and `OwnerQuickActions.onMedia`.
-                                 */
-                                onMedia: hasCover, className: "mb-3", recordLabel: category.name ?? slug })), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: "max-w-2xl mb-4", size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), showCountSplit && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "muted", size: "xs", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [ownHere.toLocaleString(), " here \u00B7 ", inSubcategories.toLocaleString(), " in subcategories"] })), auctionCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "warning", surface: hasCover ? undefined : "warning-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [auctionCount.toLocaleString(), " ", auctionCount === 1 ? "auction" : "auctions"] })), preOrderCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "info", surface: hasCover ? undefined : "info-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [preOrderCount.toLocaleString(), " ", preOrderCount === 1 ? "pre-order" : "pre-orders"] })), storeCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "success", surface: hasCover ? undefined : "success-surface", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [storeCount.toLocaleString(), " ", storeCount === 1 ? "store" : "stores"] }))] })] })] }), category?.hasbroName && (_jsx(Section, { padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Row, { gap: "md", align: "center", wrap: true, children: [category.hasbroCoverImage && (_jsx(MediaImage, { src: category.hasbroCoverImage, alt: `${category.hasbroName} logo`, size: "thumbnail", className: "h-12 w-auto flex-shrink-0" })), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", transform: "uppercase", weight: "medium", children: "Also known as" }), _jsx(Text, { weight: "semibold", children: category.hasbroName }), _jsxs(Text, { size: "xs", color: "muted", children: ["The same wave, named differently outside Japan \u2014 Takara-Tomy releases it as ", category.name, ", Hasbro as ", category.hasbroName, ". Both names find these listings."] })] })] }) }) })), contentBody && contentBody.trim().length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: contentBody }) }) })), _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }), pairedBeys.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "sm", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: pairedBeys.length === 1 ? "Specifications" : "Releases" }), _jsx(Stack, { gap: "xs", className: "min-w-0", children: pairedBeys.map((bey) => (_jsxs(Row, { gap: "sm", align: "center", wrap: true, className: "min-w-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.BEY_DETAIL(bey.slug)), children: bey.name }), [bey.system, bey.productCodes?.[0]]
-                                            .filter(Boolean)
-                                            .map((bit) => (_jsx(Text, { size: "sm", color: "muted", children: String(bit) }, String(bit))))] }, bey.id))) })] }) }) })), compositions.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "section", children: _jsxs(Stack, { gap: "md", className: "min-w-0", children: [_jsx(Heading, { level: 2, size: "lg", children: "What it is made of" }), _jsx(ModelCompositionPanel, { compositions: compositions, hrefForPart: (slot, tail) => String(ROUTES.PUBLIC.PART_DETAIL(slot, tail)) })] }) }) })), (() => {
-                if (category?.tier !== 0)
-                    return null;
-                const branches = childCategories.filter((c) => c.tier === 1);
-                if (branches.length !== 2)
-                    return null;
-                const [a, b] = branches;
-                const coverOf = (c) => c?.display?.coverImage;
-                if (!a || !b || !coverOf(a) || !coverOf(b))
-                    return null;
-                const countOf = (c) => {
-                    const n = c?.metrics?.totalProductCount ?? c?.metrics?.productCount ?? 0;
-                    return n > 0 ? `${n.toLocaleString()} listing${n === 1 ? "" : "s"}` : undefined;
-                };
-                return (_jsx(Section, { padding: "y-lg", children: _jsx(Div, { className: __W, padding: "x-md", children: _jsx(SplitTile, { left: {
-                                href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(a.slug)),
-                                label: a.name,
-                                imageUrl: coverOf(a),
-                                countLabel: countOf(a),
-                            }, right: {
-                                href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(b.slug)),
-                                label: b.name,
-                                imageUrl: coverOf(b),
-                                countLabel: countOf(b),
-                            } }) }) }));
-            })(), directChildrenWithListings.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "inline", children: _jsxs(Div, { padding: "b-2xs", children: [parentLadder.length > 0 && (_jsx(Div, { padding: "b-2xs", children: _jsx(SubcategoryCardRow, { items: parentLadder, label: "Parent category" }) })), _jsx(SubcategoryCardRow, { items: toSubcategoryItems(directChildrenWithListings, childCategories) })] }) }) })), _jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: counts, totals: totals, enabledListingTypes: enabledListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) }) }) }), groupedListings.length > 0 && (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) })), relatedCategories.length > 0 && (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))] }));
+    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) } })), _jsx(DetailViewShell, { layout: "hub", mainSlots: [
+                    /* ── Hero / Banner ───────────────────────────────────────────────── */
+                    () => (_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 ${getBrandName()}` }) }) })), _jsxs(Div, { className: "relative z-10 max-w-7xl mx-auto", paddingY: hasCover ? "y-3xl" : "y-xl", padding: "x-md", children: [_jsx(BreadcrumbTrail, { crumbs: trail, className: "mb-4", tone: hasCover ? "on-media" : "default" }), category?.id && _jsx(LastCategoryBeacon, { categoryId: category.id }), _jsx(Heading, { color: "inverse", level: 1, className: `mb-2 ${hasCover ? "" : "text-[var(--appkit-color-text)]"}`, size: "3xl", mdSize: "4xl", weight: "bold", children: category?.name ?? slug }), category?.id && (_jsx(RecordOwnerQuickActions, { resource: "CATEGORY", recordId: category.id, placement: "detail", 
+                                        /*
+                                         * Same flag the rest of this hero branches on. Without it the
+                                         * pencil renders `ghost` (zinc-600) on the dark cover and is
+                                         * invisible — see Root Cause #67 and `OwnerQuickActions.onMedia`.
+                                         */
+                                        onMedia: hasCover, className: "mb-3", recordLabel: category.name ?? slug })), category?.description && typeof category.description === "string" && !category.description.startsWith("{") && (_jsx(Text, { color: hasCover ? "inverse" : "muted", className: "max-w-2xl mb-4", size: "base", children: category.description })), _jsxs(Row, { wrap: true, gap: "sm", children: [productCount > 0 && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: "inverse", size: "xs", weight: "medium", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "bg-primary/10 text-primary-700 dark:text-primary-400", rounded: "full", padding: "pill-sm-tall", children: [productCount.toLocaleString(), " ", productCount === 1 ? "product" : "products"] })), showCountSplit && (_jsxs(Span, { layout: "inline-flex", gap: "xs", color: hasCover ? "inverse" : "muted", size: "xs", className: hasCover ? "bg-[rgba(255,255,255,0.2)] backdrop-blur-sm" : "", rounded: "full", padding: "pill-sm-tall", children: [ownHere.toLocaleString(), " here \u00B7 ", inSubcategories.toLocaleString(), " in subcategories"] })), collectorDropCount > 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: [collectorDropCount.toLocaleString(), " ", collectorDropCount === 1 ? "collector drop" : "collector drops"] })), 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"] }))] })] })] })),
+                    /* ── Regional naming: the alternate-market name for this release ─────
+                        Renamed from `hasbroName` 2026-11-07 — the concept is real, but a
+                        core schema field named after one company hardcodes a vertical.
+          
+                        A buyer who grew up on the other region's naming knows "Turbo", not
+                        "Cho-Z", and the catalogue has always been FINDABLE by either —
+                        per-model alternate names are folded into `aliases`. But `aliases`
+                        feeds `searchTxt` and is rendered nowhere, so nothing on the page
+                        ever stated the correspondence. Someone who searched "Turbo", landed
+                        on Cho-Z and saw no mention of Turbo had no way to know they were in
+                        the right place.
+          
+                        Renders nothing when unset, which is the common case: five of the
+                        seven Burst waves have a confirmed divergence and nothing else in the
+                        forest does. */
+                    category?.altRegionName
+                        ? () => (_jsx(Section, { padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsxs(Row, { gap: "md", align: "center", wrap: true, children: [category.altRegionCoverImage && (_jsx(MediaImage, { src: category.altRegionCoverImage, alt: `${category.altRegionName} 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.altRegionName }), _jsxs(Text, { size: "xs", color: "muted", children: ["The same release, named differently by region \u2014 sold as", " ", category.name, " in one market and ", category.altRegionName, " in another. Both names find these listings."] })] })] }) }) }))
+                        : undefined,
+                    /* ── D4 / I7: the category's OWN content ────────────────────────────
+                        🛑 `contentBody` has existed on the schema since B3, has an admin
+                        editor, and `category-content.ts` claimed it rendered "on the category
+                        page" — it had NO render site anywhere. So the one field this plan
+                        measured as worldhobbyshop's actual ranking mechanism (36 of their 46
+                        categories carry one; no Shopify competitor in the crawl has any) was
+                        authorable, storable, and invisible.
+          
+                        Rendered through `RichTextRenderer`, which is what the field's own
+                        docstring specifies and is SSR-safe (content is sanitised at save
+                        time by `RichTextEditor`). Omitted entirely when absent — an empty
+                        prose block reads as a broken page, which is the `{{partBreakdown}}`
+                        lesson. */
+                    contentBody && contentBody.trim().length > 0
+                        ? () => (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(RichTextRenderer, { html: contentBody }) }) }))
+                        : undefined,
+                    () => _jsx(CategoryHighlightsAndFaqSection, { highlights: category?.highlights, faqs: category?.faqs }),
+                    /* ── D12: what this model is MADE OF ─────────────────────────────────
+                        Renders only on a named-model leaf, because only a leaf has a
+                        composition. No `parts` map is passed: 963 of 963 slots carry their
+                        own `weightG`, which is the weight AS FITTED and the better figure
+                        than the mould's — so hydrating the glossary would be a second read
+                        for a value we already have. */
+                    /* ── B5: the reference page for the model this leaf names ───────────
+                        🛑 `ROUTES.PUBLIC.BEY_DETAIL` had ZERO call sites before this —
+                        1,988 bey pages, every one routable and unreachable from anywhere in
+                        the product. The link already ran the other way (a bey page links to
+                        its category leaf via `categoryId`), so this closes the loop.
+          
+                        Rendered ABOVE "What it is made of" deliberately: the bey page is the
+                        reference for the WHOLE model (mass, ratings, owner, release), while
+                        the composition panel below is one section of it. Reading order
+                        follows that.
+          
+                        🛑 Plural, and not `[0]`. Measured: 1,880 beys across 1,858 leaves,
+                        so 22 leaves carry TWO — the vendor pairs, a Takara-Tomy release and
+                        its Hasbro equivalent on one taxonomy leaf. Rendering only the first
+                        would drop the other with nothing to show one existed.
+          
+                        No money and no image: the amounts live on the listings below, and a
+                        price here would need `<GatedPrice>` and make this a client
+                        component. */
+                    /* ── D3: two real branches, side by side ─────────────────────────────
+                        Only when this is a ROOT with EXACTLY TWO tier-1 children and BOTH
+                        carry a real cover photo. Three or more is what the scroller below
+                        already does; one or zero photographed children means there is
+                        nothing honest to split — so it falls through silently to the
+                        scroller rather than inventing a placeholder side. */
+                    () => {
+                        if (category?.tier !== 0)
+                            return null;
+                        const branches = childCategories.filter((c) => c.tier === 1);
+                        if (branches.length !== 2)
+                            return null;
+                        const [a, b] = branches;
+                        const coverOf = (c) => c?.display?.coverImage;
+                        if (!a || !b || !coverOf(a) || !coverOf(b))
+                            return null;
+                        const countOf = (c) => {
+                            const n = c?.metrics?.totalProductCount ?? c?.metrics?.productCount ?? 0;
+                            return n > 0 ? `${n.toLocaleString()} listing${n === 1 ? "" : "s"}` : undefined;
+                        };
+                        return (_jsx(Section, { padding: "y-lg", children: _jsx(Div, { className: __W, padding: "x-md", children: _jsx(SplitTile, { left: {
+                                        href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(a.slug)),
+                                        label: a.name,
+                                        imageUrl: coverOf(a),
+                                        countLabel: countOf(a),
+                                    }, right: {
+                                        href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(b.slug)),
+                                        label: b.name,
+                                        imageUrl: coverOf(b),
+                                        countLabel: countOf(b),
+                                    } }) }) }));
+                    },
+                    /* ── Sub-categories horizontal scroller ──────────────────────────── */
+                    directChildrenWithListings.length > 0
+                        ? () => (_jsx(Section, { border: "subtle", surface: "default", className: "border-b", children: _jsx(Div, { className: __W, padding: "inline", children: _jsxs(Div, { padding: "b-2xs", children: [parentLadder.length > 0 && (_jsx(Div, { padding: "b-2xs", children: _jsx(SubcategoryCardRow, { items: parentLadder, label: "Parent category" }) })), _jsx(SubcategoryCardRow, { items: toSubcategoryItems(directChildrenWithListings, childCategories) })] }) }) }))
+                        : undefined,
+                    /* ── Tabs: Products / Collector Drops / Pre-Orders ──────────────────────── */
+                    () => (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(CategoryDetailTabs, { categorySlug: slug, categoryId: category?.id, initialProductsData: productsResult ?? undefined, initialBundles: bundlesResult ?? [], initialStores: categoryStores, counts: counts, totals: totals, listedListingTypes: listedListingTypes(settings), enabledCategoryTypes: enabledCategoryTypes(settings) }) }) })),
+                    groupedListings.length > 0
+                        ? () => (_jsx(Section, { padding: "y-lg", children: _jsx(Container, { size: "xl", children: _jsx(GroupedListingsCarousel, { groups: groupedListings }) }) }))
+                        : undefined,
+                    () => (_jsx(Section, { padding: "y-md", children: _jsx(Container, { size: "xl", children: _jsx(AdminComposableRegion, { pageId: "categories-slug-tab-sort-sortkey-page-page", initialCards: pageRegionCards }) }) })),
+                    /* ── Related categories ───────────────────────────────────────────── */
+                    relatedCategories.length > 0
+                        ? () => (_jsx(Section, { border: "subtle", surface: "default", className: "border-t", padding: "y-lg", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, className: "mb-4", size: "xl", weight: "semibold", children: "Related Categories" }), _jsx(CategoryGrid, { categories: relatedCategories, getHref: (c) => String(ROUTES.PUBLIC.CATEGORY_DETAIL(c.slug)) })] }) }))
+                        : undefined,
+                ] })] }));
 }

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

@@ -23,9 +23,18 @@ export interface CategoryDetailTabsProps {
      * it falls back to `counts`, i.e. the pre-split behaviour.
      */
     totals?: Record<string, number | undefined>;
-    /** Enabled listing types (e.g. ["standard","auction","pre-order"]). When omitted, all tabs shown. */
-    enabledListingTypes?: string[];
+    /**
+     * Listing types a visitor may be OFFERED a tab for — i.e.
+     * `listedListingTypes(settings)`, NOT `enabledListingTypes(settings)`.
+     * When omitted, all tabs shown.
+     *
+     * 🛑 LISTED, not enabled, and the difference is a bug review already found
+     * elsewhere: `enabled` stays true for an `"unlisted"` type (its pages must
+     * keep serving), so a tab built from it re-advertises exactly what the
+     * admin withdrew. A tab is a way IN, so it follows `isListingTypeListed`.
+     */
+    listedListingTypes?: string[];
     /** Enabled category types (e.g. ["category","brand","bundle"]). When omitted, all tabs shown. */
     enabledCategoryTypes?: string[];
 }
-export declare function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles, initialStores, counts, totals, enabledListingTypes, enabledCategoryTypes, }: CategoryDetailTabsProps): React.JSX.Element;
+export declare function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles, initialStores, counts, totals, listedListingTypes, enabledCategoryTypes, }: CategoryDetailTabsProps): React.JSX.Element;

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

@@ -5,12 +5,12 @@ import { EmptyState } from "../../../ui/components/EmptyState.js";
 import { Tabs, TabsList, TabsTrigger } from "../../../ui/components/Tabs.js";
 import { AvailabilityScopeHint } from "../../products/components/AvailabilityScopeHint.js";
 import { CategoryProductsListing } from "./CategoryProductsListing.js";
-import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing.js";
+import { CollectorDropsIndexListing } from "../../products/components/CollectorDropsIndexListing.js";
 import { PreOrdersIndexListing } from "../../pre-orders/components/PreOrdersIndexListing.js";
-import { PrizeDrawsIndexListing } from "../../products/components/PrizeDrawsIndexListing.js";
+import { ClearanceIndexListing } from "../../products/components/ClearanceIndexListing.js";
 import { CategoryBundlesListing } from "./CategoryBundlesListing.js";
 import { CategoryStoresListing } from "./CategoryStoresListing.js";
-import { CATEGORY_PAGE_TABS, ART_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs.js";
+import { CATEGORY_PAGE_TABS, ART_AND_STICKERS_LISTING_TYPES, } from "../../products/constants/listing-tabs.js";
 import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 /**
@@ -52,11 +52,11 @@ const GENERIC_TAB_LISTING_TYPES = {
     [pluginFor("classified").tabSlug]: ["classified"],
     [pluginFor("digital-code").tabSlug]: ["digital-code"],
     [pluginFor("live").tabSlug]: ["live"],
-    // The combined Art & Stickers tab spans both types under the `art` slug.
-    [pluginFor("art").tabSlug]: ART_STICKERS_LISTING_TYPES,
+    // The Art & Stickers tab, under the unchanged `art` slug (1.34).
+    [pluginFor("art-and-stickers").tabSlug]: ART_AND_STICKERS_LISTING_TYPES,
     /*
      * Spares render generically — there is nothing type-specific to show beyond
-     * a product grid, unlike an auction (countdown, bid history) or a prize draw
+     * a product grid, unlike a collector drop (countdown, bid history) or a prize draw
      * (entries remaining).
      *
      * 🛑 This map is hand-written and a missing entry is a tab you can CLICK that
@@ -67,7 +67,7 @@ const GENERIC_TAB_LISTING_TYPES = {
      */
     [pluginFor("spares").tabSlug]: ["spares"],
 };
-export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, totals, enabledListingTypes, enabledCategoryTypes, }) {
+export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsData, initialBundles = [], initialStores = [], counts, totals, listedListingTypes, enabledCategoryTypes, }) {
     const countFor = (id) => counts?.[id];
     // Falls back to the badge when no totals map is supplied, so a caller that
     // has not been migrated keeps today's hide behaviour rather than hiding
@@ -76,8 +76,8 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
     const visibleTabs = CATEGORY_PAGE_TABS.filter((t) => {
         const mapping = TAB_TYPE_MAP[t.id];
         if (mapping) {
-            if (mapping.kind === "listing" && enabledListingTypes) {
-                if (!enabledListingTypes.includes(mapping.type))
+            if (mapping.kind === "listing" && listedListingTypes) {
+                if (!listedListingTypes.includes(mapping.type))
                     return false;
             }
             if (mapping.kind === "category" && enabledCategoryTypes) {
@@ -101,5 +101,5 @@ export function CategoryDetailTabs({ categorySlug, categoryId, initialProductsDa
     if (visibleTabs.length === 0) {
         return (_jsx(EmptyState, { title: "Nothing listed here yet", description: "This category has no active listings right now. Check back soon." }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), _jsx(AvailabilityScopeHint, { total: totalFor(activeTab), available: countFor(activeTab), types: typesForTab(activeTab) }), GENERIC_TAB_LISTING_TYPES[activeTab] && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, listingTypes: GENERIC_TAB_LISTING_TYPES[activeTab], initialData: activeTab === pluginFor("standard").tabSlug ? initialProductsData : undefined })), activeTab === pluginFor("auction").tabSlug && (_jsx(AuctionsIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("pre-order").tabSlug && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("prize-draw").tabSlug && (_jsx(PrizeDrawsIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: activeTab, onChange: (v) => setActiveTab(v), className: "mb-6", children: _jsx(TabsList, { children: visibleTabs.map((t) => (_jsx(TabsTrigger, { value: t.id, badge: countFor(t.id), children: t.label }, t.id))) }) }), _jsx(AvailabilityScopeHint, { total: totalFor(activeTab), available: countFor(activeTab), types: typesForTab(activeTab) }), GENERIC_TAB_LISTING_TYPES[activeTab] && (_jsx(CategoryProductsListing, { categorySlug: categorySlug, categoryId: categoryId, listingTypes: GENERIC_TAB_LISTING_TYPES[activeTab], initialData: activeTab === pluginFor("standard").tabSlug ? initialProductsData : undefined })), activeTab === pluginFor("collector-drop").tabSlug && (_jsx(CollectorDropsIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("pre-order").tabSlug && (_jsx(PreOrdersIndexListing, { categorySlug: categorySlug })), activeTab === pluginFor("clearance").tabSlug && (_jsx(ClearanceIndexListing, { categorySlug: categorySlug })), activeTab === "bundles" && (_jsx(CategoryBundlesListing, { initialBundles: initialBundles })), activeTab === "stores" && (_jsx(CategoryStoresListing, { stores: initialStores }))] }));
 }

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

@@ -6,7 +6,8 @@ import { Label, Text } from "../../../ui/components/Typography.js";
 import { Checkbox } from "../../../ui/components/Checkbox.js";
 import { RichTextEditor } from "../../../ui/components/RichTextEditor.js";
 import { FieldLabel } from "../../../ui/forms/index.js";
-import { ImageUpload, MediaImage, useMediaUpload } from "../../media/index.js";
+import { ImageUpload, useMediaUpload } from "../../media/index.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { FormField } from "../../../ui/index.js";
 import { flattenCategories } from "../types/index.js";
 import { normalizeRichTextHtml, slugify } from "../../../utils/string.formatter.js";

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

@@ -5,7 +5,7 @@ import { Div } from "../../../ui/components/Div.js";
 import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
 import { Span, Text } from "../../../ui/components/Typography.js";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { ImageMosaic, MOSAIC_MIN } from "../../../ui/components/ImageMosaic.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
 const __P = {

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

@@ -7,7 +7,7 @@ export interface CategoryProductsListingProps {
     /**
      * Listing types this tab spans. Defaults to `["standard"]` — the original,
      * only behaviour. Category/brand pages pass a single non-standard type (or
-     * the `["art","stickers"]` pair) so the classifieds / digital-codes / live /
+     * the `["art-and-stickers"]` set) so the classifieds / digital-codes / live /
      * art tabs render real content instead of a blank panel: those four tabs
      * existed in CATEGORY_PAGE_TABS but had no render branch at all.
      */

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

@@ -6,6 +6,7 @@ import { useState, useCallback } from "react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable.js";
 import { usePendingTable } from "../../../react/hooks/usePendingTable.js";
 import { useProducts } from "../../products/hooks/useProducts.js";
+import { Button } from "../../../ui/components/Button.js";
 import { Div } from "../../../ui/components/Div.js";
 import { Grid, Row, Stack } from "../../../ui/components/Layout.js";
 import { FilterDrawer } from "../../../ui/components/FilterDrawer.js";
@@ -126,9 +127,9 @@ export function CategoryProductsListing({ categorySlug, categoryId, brandName, l
     }, [localCart, showToast]);
     return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: `Search in ${categorySlug.replace(/-/g, " ")}...`, onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || "-createdAt", sortOptions: withoutPriceSorts(PRODUCT_PUBLIC_SORT_OPTIONS, canSeePrices), onSortChange: (v) => {
                     table.set("sort", v);
-                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: listingTypes }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
-                    isLoading, products: products, view,
-                    getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)),
-                    onWishlistToggle: handleWishlistToggle, wishlistedIds, onAddToCart: handleAddToCart,
-                }) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
+                }, view: view === "card" ? "grid" : "list", onViewChange: (v) => handleViewToggle(v === "grid" ? "card" : "list"), onResetAll: resetAll, hasActiveState: hasActiveState }), _jsx(Div, { padding: "y-sm", children: _jsx(AvailabilityTabs, { types: listingTypes }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), _jsxs(Div, { layout: "grid", gap: "8", className: "lg:grid-cols-12", children: [_jsx(Div, { className: "hidden lg:col-span-4 lg:block xl:col-span-3", children: _jsxs(Div, { rounded: "xl", border: "default", padding: "lg", children: [_jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }), _jsxs(Row, { gap: "sm", className: "mt-4", justify: "end", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onFilterClear, children: "Reset all" }), _jsx(Button, { type: "button", variant: "primary", onClick: applyFilters, children: filterActiveCount > 0 ? `Apply (${filterActiveCount})` : "Apply" })] })] }) }), _jsx(Div, { className: "lg:col-span-8 xl:col-span-9", children: _jsx(Div, { padding: "y-lg", children: renderCategoryProductGrid({
+                                isLoading, products: products, view,
+                                getProductHref: (p) => String(ROUTES.PUBLIC.PRODUCT_DETAIL(p.slug || p.id)),
+                                onWishlistToggle: handleWishlistToggle, wishlistedIds, onAddToCart: handleAddToCart,
+                            }) }) })] }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ProductFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) }), _jsx(LoginRequiredModal, { isOpen: modalOpen, onClose: closeModal, message: modalMessage })] }));
 }

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

@@ -5,7 +5,7 @@ import { Div } from "../../../ui/components/Div.js";
 import { Row } from "../../../ui/components/Layout.js";
 import { Span } from "../../../ui/components/Typography.js";
 import { StatusBadge } from "../../../ui/components/StatusBadge.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { DynamicBgDiv } from "../../../ui/components/DynamicBgDiv.js";
 const __O = {
     hidden: "overflow-hidden",

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../../../ui/components/Button.js";
 import { Div } from "../../../ui/components/Div.js";
 import { Heading, Text } from "../../../ui/components/Typography.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 export function ConcernCard({ concern, onClick, className = "", }) {
     return (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onClick?.(concern), 
         // No bare `flex` here: globals.css declares `.flex` un-layered + !important,

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

@@ -1,4 +1,5 @@
 import type { CategoryDocument } from "../schemas";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 /**
  * A FRANCHISE page — every listing from one IP.
  *
@@ -21,5 +22,7 @@ import type { CategoryDocument } from "../schemas";
 export interface FranchiseDetailPageViewProps {
     slug: string;
     franchise: CategoryDocument;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function FranchiseDetailPageView({ slug, franchise, }: FranchiseDetailPageViewProps): Promise<import("react").JSX.Element>;
+export declare function FranchiseDetailPageView({ slug, franchise, pageRegionCards, }: FranchiseDetailPageViewProps): Promise<import("react").JSX.Element>;