@mohasinac/appkit 4.52.0 → 4.52.2

package/dist/features/layout/BottomActions.js

@@ -277,7 +277,7 @@ export default function BottomActions() {
                             isVisible ? "" : "pointer-events-none",
                         ]
                             .filter(Boolean)
-                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `min-${BOTTOM_NAV_HEIGHT} py-[var(--appkit-space-2)]`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "inline- flex-shrink-0 bg-primary-50 hover:bg-primary-surface active:bg-primary-200 dark:bg-primary-950/30 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
+                            .join(" "), children: [isBulkMode && (_jsx(Div, { className: "h-[3px] w-full bg-[image:var(--appkit-gradient-brand-tri)]" })), secondaryLabel && !isBulkMode && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: secondaryLabel }) })), infoLabel && !isBulkMode && !hasInfoPanel && (_jsx(Div, { className: "pt-[var(--appkit-space-2)] pb-[var(--appkit-space-0)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-md", children: _jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }) })), infoLabel && !isBulkMode && hasInfoPanel && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setInfoOpen((o) => !o), "aria-expanded": infoOpen, "aria-controls": infoPanelId, className: "w-full flex items-center justify-between gap-[var(--appkit-space-2)] rounded-none border-b border-[var(--appkit-color-border)]/80 px-[var(--appkit-space-4)] pt-[var(--appkit-space-2)] pb-[var(--appkit-space-1)] min-h-0", children: [_jsx(Text, { className: "leading-5 truncate", color: "muted", size: "xs", weight: "semibold", children: infoLabel }), _jsxs(Span, { className: "flex-shrink-0 flex items-center gap-[var(--appkit-space-1)]", children: [_jsx(Text, { as: "span", size: "xs", color: "muted", children: infoOpen ? "Hide" : "Details" }), infoOpen ? (_jsx(ChevronDown, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" })) : (_jsx(ChevronUp, { className: "w-4 h-4 text-zinc-400", "aria-hidden": "true" }))] })] })), _jsx(Row, { className: `min-${BOTTOM_NAV_HEIGHT} py-[var(--appkit-space-2)]`, gap: "sm", padding: "x-sm", children: isBulkMode && bulk ? (_jsxs(_Fragment, { children: [_jsxs(Button, { rounded: "full", gap: "xs", type: "button", variant: "ghost", onClick: dispatchBulkClear, className: "flex-shrink-0 bg-primary-50 hover:bg-primary-surface active:bg-primary-200 dark:bg-primary-950/30 text-primary-700 dark:text-primary-300 pl-2 pr-3 h-8 border border-primary-200/70 dark:border-primary-800/50 transition-colors min-h-0", "aria-label": "Clear selection", children: [_jsx(X, { className: "w-3.5 h-3.5 flex-shrink-0", "aria-hidden": "true" }), _jsx(Span, { size: "xs", weight: "semibold", className: "tabular-nums whitespace-nowrap leading-none", children: bulk.noun
                                                         ? `${bulk.selectedCount} ${bulk.noun}`
                                                         : `${bulk.selectedCount} selected` })] }), bulkActions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
                                                 "flex-1 min-w-0 h-10 flex items-center gap-[var(--appkit-space-2)] px-[var(--appkit-space-3)] rounded-lg border text-[length:var(--appkit-text-sm)] font-medium transition-colors",

package/dist/features/live/components/LiveItemDetailPageView.js

@@ -70,7 +70,7 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-muted-foreground", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-muted-foreground", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: specs.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.value, s.unit ? ` ${s.unit}` : ""] })] }, i))) })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: customSections.map((s) => ({
                                 id: s.id,
                                 label: s.title,
                                 content: _jsx(CustomSectionTabContent, { section: s }),

package/dist/features/products/hooks/useProducts.js

@@ -6,6 +6,7 @@ import { useToast } from "../../../ui/index.js";
 import { useOptionalSession } from "../../../react/contexts/SessionContext.js";
 import { isAdminUser, isTesterUser } from "../../auth/role-predicates.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { LISTING_PARAM_NAMES } from "../../../utils/listing-params.js";
 export function useProducts(params = {}, opts) {
     const { showToast } = useToast();
     const sp = new URLSearchParams();
@@ -36,8 +37,24 @@ export function useProducts(params = {}, opts) {
         sp.set("listingType", params.listingType);
     if (params.storeId)
         sp.set("storeId", params.storeId);
+    /*
+     * 🛑 THE SHARED CONSTANT, not a hand-written string. This read
+     * `sp.set("sorts", …)` while `parsePublicProductParams` read
+     * `TABLE_KEYS.SORT` (= "sort") — two spellings of one concept, neither
+     * derived from the other, so they could not be kept in step by anything.
+     * Every client-side fetch therefore arrived with a sort the server could not
+     * see and fell back to `-createdAt`, while the dropdown displayed the sort
+     * the user had picked. Measured: `?sorts=auctionEndDate` returned byte-identical
+     * row order to sending no sort at all.
+     *
+     * "We have shared constants and it still broke" is exactly this: the
+     * constants existed, and this call site did not use them. The server now
+     * also accepts all three spellings (`s` / `sorts` / `sort`) the way every
+     * sibling listing route already did, so the two halves are belt-and-braces —
+     * but the literal is what made the gap possible and it is gone.
+     */
     if (params.sort)
-        sp.set("sorts", params.sort);
+        sp.set(LISTING_PARAM_NAMES.sorts.long, params.sort);
     if (params.page)
         sp.set("page", String(params.page));
     if (params.perPage)

package/dist/features/reviews/components/ReviewDetailShell.js

@@ -20,6 +20,7 @@ const CLS_ICON_PURPLE_BARE = "flex h-10 w-10 flex-shrink-0 items-center justify-
 import Link from "next/link.js";
 import { Button, Div, Grid, Heading, IconButton, RichText, Row, Section, Span, StarRating, Stack, Text } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
+import { MediaVideo } from "../../media/MediaVideo.js";
 import { maskName } from "../../../security/index.js";
 import { getDefaultLocale } from "../../../core/baseline-resolver.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
@@ -101,7 +102,7 @@ export function ReviewDetailShell({ review, storeHref }) {
         ? String(ROUTES.PUBLIC.PROFILE(reviewerProfileId))
         : null;
     const currentImage = lightboxIdx !== null ? images[lightboxIdx] : null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "default", className: "border-b border-neutral-200 pt-[2.5rem]", padding: "b-xl", children: _jsxs(Div, { className: "mx-auto max-w-3xl", padding: "x-md", children: [_jsxs(Row, { gap: "sm", className: "mb-4", children: [_jsx(StarRating, { value: review.rating, size: "lg", readOnly: true }), _jsxs(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", size: "2xl", children: [review.rating, ".0"] }), review.verified && (_jsx(Span, { layout: "inline-flex", gap: "xs", color: "success", surface: "success-surface", size: "xs", weight: "semibold", rounded: "full", padding: "pill-md", children: "\u2713 Verified Purchase" })), review.featured && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_RATING_PILL, children: "\u2605 Featured" }))] }), review.title && (_jsx(Heading, { color: "inverse", level: 1, className: "text-[var(--appkit-color-text)] dark: mb-4 leading-snug", size: "2xl", weight: "bold", children: review.title })), _jsxs(Row, { gap: "sm", children: [review.userAvatar ? (_jsx(Div, { className: "relative h-11 w-11 flex-shrink-0 ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: review.userAvatar, alt: displayName, size: "avatar" }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", centered: true, className: "h-11 w-11 flex-shrink-0 bg-primary/10 text-primary ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", children: initials })), _jsxs(Div, { className: "min-w-0", children: [reviewerHref ? (_jsx(Link, { href: reviewerHref, className: "text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] dark:text-white hover:text-primary transition-colors", children: displayName })) : (_jsx(Span, { color: "inverse", size: "sm", weight: "semibold", className: "text-[var(--appkit-color-text)] dark:", children: review.isAnonymous ? "Anonymous" : displayName })), date && (_jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: date }))] })] })] }) }), _jsxs(Stack, { gap: "xl", className: "mx-auto max-w-3xl", paddingY: "y-xl", paddingX: "x-md", children: [review.comment && (_jsx(Section, { children: _jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:font-semibold prose-img:rounded-lg prose-a:text-primary", className: "text-[var(--appkit-color-text-muted)]" }) })), images.length > 0 && (_jsxs(Section, { children: [_jsxs(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: ["Photos (", images.length, ")"] }), _jsx(Grid, { gap: "xs", className: "grid-cols-3 sm:grid-cols-4", children: images.map((img, i) => (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setLightboxIdx(i), "aria-label": `View photo ${i + 1}`, rounded: "xl", paddingX: "none", paddingY: "none", className: "group relative aspect-square overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] focus-visible:ring-2 focus-visible:ring-primary", children: [_jsx(MediaImage, { src: img, alt: `Review image ${i + 1}`, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }), _jsx(Row, { centered: true, className: "absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity bg-[rgba(0,0,0,0.3)]", children: _jsx(Span, { color: "inverse", size: "xl", children: "\uD83D\uDD0D" }) })] }, i))) })] })), review.video && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: "Video" }), _jsx(Div, { className: `${__O.hidden} border border-[var(--appkit-color-border)] bg-[rgb(0,0,0)] aspect-video`, rounded: "xl", children: _jsx("video", { src: review.video.url, poster: review.video.thumbnailUrl, controls: true, className: "h-full w-full", preload: "metadata" }) })] })), _jsxs(Section, { className: "flex items-[center] gap-[1rem] border-t border-neutral-100", padding: "y-md", children: [_jsx(Div, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", children: helpfulCount > 0 && (_jsxs(Span, { children: [_jsx(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", children: helpfulCount }), " ", helpfulCount === 1 ? "person" : "people", " found this helpful"] })) }), _jsxs(Button, { variant: "outline", type: "button", onClick: handleVote, disabled: voted || voting, gap: "sm", rounded: "lg", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: `ml-auto transition-colors ${voted
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "default", className: "border-b border-neutral-200 pt-[2.5rem]", padding: "b-xl", children: _jsxs(Div, { className: "mx-auto max-w-3xl", padding: "x-md", children: [_jsxs(Row, { gap: "sm", className: "mb-4", children: [_jsx(StarRating, { value: review.rating, size: "lg", readOnly: true }), _jsxs(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", size: "2xl", children: [review.rating, ".0"] }), review.verified && (_jsx(Span, { layout: "inline-flex", gap: "xs", color: "success", surface: "success-surface", size: "xs", weight: "semibold", rounded: "full", padding: "pill-md", children: "\u2713 Verified Purchase" })), review.featured && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_RATING_PILL, children: "\u2605 Featured" }))] }), review.title && (_jsx(Heading, { color: "inverse", level: 1, className: "text-[var(--appkit-color-text)] dark: mb-4 leading-snug", size: "2xl", weight: "bold", children: review.title })), _jsxs(Row, { gap: "sm", children: [review.userAvatar ? (_jsx(Div, { className: "relative h-11 w-11 flex-shrink-0 ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: review.userAvatar, alt: displayName, size: "avatar" }) })) : (_jsx(Row, { textWeight: "bold", textSize: "base", centered: true, className: "h-11 w-11 flex-shrink-0 bg-primary/10 text-primary ring-2 ring-white ring-[var(--appkit-color-border-subtle)]", rounded: "full", children: initials })), _jsxs(Div, { className: "min-w-0", children: [reviewerHref ? (_jsx(Link, { href: reviewerHref, className: "text-[length:var(--appkit-text-sm)] font-semibold text-[var(--appkit-color-text)] dark:text-white hover:text-primary transition-colors", children: displayName })) : (_jsx(Span, { color: "inverse", size: "sm", weight: "semibold", className: "text-[var(--appkit-color-text)] dark:", children: review.isAnonymous ? "Anonymous" : displayName })), date && (_jsx(Text, { size: "xs", color: "muted", className: "mt-0.5", children: date }))] })] })] }) }), _jsxs(Stack, { gap: "xl", className: "mx-auto max-w-3xl", paddingY: "y-xl", paddingX: "x-md", children: [review.comment && (_jsx(Section, { children: _jsx(RichText, { html: normalizeRichTextHtml(review.comment), proseClass: "prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:font-semibold prose-img:rounded-lg prose-a:text-primary", className: "text-[var(--appkit-color-text-muted)]" }) })), images.length > 0 && (_jsxs(Section, { children: [_jsxs(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: ["Photos (", images.length, ")"] }), _jsx(Grid, { gap: "xs", className: "grid-cols-3 sm:grid-cols-4", children: images.map((img, i) => (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setLightboxIdx(i), "aria-label": `View photo ${i + 1}`, rounded: "xl", paddingX: "none", paddingY: "none", className: "group relative aspect-square overflow-hidden border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-elevated)] focus-visible:ring-2 focus-visible:ring-primary", children: [_jsx(MediaImage, { src: img, alt: `Review image ${i + 1}`, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }), _jsx(Row, { centered: true, className: "absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity bg-[rgba(0,0,0,0.3)]", children: _jsx(Span, { color: "inverse", size: "xl", children: "\uD83D\uDD0D" }) })] }, i))) })] })), review.video && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "tracking-wide mb-3", color: "faint", size: "sm", weight: "semibold", transform: "uppercase", children: "Video" }), _jsx(Div, { className: `${__O.hidden} border border-[var(--appkit-color-border)] bg-[rgb(0,0,0)] aspect-video relative`, rounded: "xl", children: _jsx(MediaVideo, { src: review.video.url, thumbnailUrl: review.video.thumbnailUrl, alt: "Review video", objectFit: "contain" }) })] })), _jsxs(Section, { className: "flex items-center gap-[1rem] border-t border-neutral-100", padding: "y-md", children: [_jsx(Div, { textSize: "sm", className: "text-[var(--appkit-color-text-muted)]", children: helpfulCount > 0 && (_jsxs(Span, { children: [_jsx(Span, { color: "inverse", weight: "bold", className: "text-[var(--appkit-color-text)] dark:", children: helpfulCount }), " ", helpfulCount === 1 ? "person" : "people", " found this helpful"] })) }), _jsxs(Button, { variant: "outline", type: "button", onClick: handleVote, disabled: voted || voting, gap: "sm", rounded: "lg", paddingX: "md", paddingY: "sm", textSize: "sm", weight: "medium", className: `ml-auto transition-colors ${voted
                                     ? CLS_HELPFUL_ACTIVE
                                     : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-primary hover:text-primary dark:hover:border-primary dark:hover:text-primary disabled:opacity-50"}`, children: [_jsx(Span, { "aria-hidden": "true", children: voted ? "✓" : "👍" }), voted ? "Marked helpful" : voting ? "Saving…" : "Helpful?"] })] }), _jsxs(Section, { className: "grid gap-[0.75rem] sm:grid-cols-3", children: [productHref && (_jsxs(Link, { href: productHref, className: CLS_RELATED_LINK, children: [_jsx(Span, { className: CLS_ICON_ORANGE, children: "\uD83D\uDCE6" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_RELATED_LABEL, children: "Product" }), _jsx(Text, { className: CLS_RELATED_TITLE, children: review.productTitle ?? "View Product" })] })] })), sellerHref && (_jsxs(Link, { href: sellerHref, className: CLS_RELATED_LINK, children: [_jsx(Span, { className: CLS_ICON_BLUE, children: "\uD83C\uDFEA" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_RELATED_LABEL, children: "Seller" }), _jsx(Text, { className: CLS_RELATED_TITLE, children: "View Seller" })] })] })), reviewerHref ? (_jsxs(Link, { href: reviewerHref, className: CLS_RELATED_LINK, children: [_jsx(Span, { className: CLS_ICON_PURPLE, children: "\uD83D\uDC64" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: CLS_RELATED_LABEL, children: "Reviewer" }), _jsx(Text, { className: CLS_RELATED_TITLE, children: displayName })] })] })) : (_jsxs(Row, { surface: "default", gap: "sm", className: `border border-neutral-200 dark:border-[var(--appkit-color-border)] ${__P.p4}`, rounded: "xl", children: [_jsx(Span, { size: "xl", className: CLS_ICON_PURPLE_BARE, children: "\uD83D\uDC64" }), _jsxs(Div, { className: "min-w-0", children: [_jsx(Span, { size: "xs", className: "block mb-0.5", color: "faint", children: "Reviewer" }), _jsx(Span, { color: "inverse", size: "sm", weight: "medium", className: "block text-[var(--appkit-color-text)] dark: truncate", children: "Anonymous" })] })] }))] })] }), lightboxIdx !== null && currentImage && (_jsxs(Row, { centered: true, className: "fixed inset-0 z-50 bg-[rgba(0,0,0,0.95)]", onClick: closeLightbox, role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", children: [_jsx(IconButton, { type: "button", onClick: closeLightbox, "aria-label": "Close lightbox", variant: "scrim", rounded: "full", className: "absolute top-4 right-4 z-10 h-10 w-10", children: _jsx(Span, { size: "xl", children: "\u00D7" }) }), _jsxs(Div, { textSize: "sm", className: "absolute top-4 left-1/2 -translate-x-1/2 text-white/70", children: [lightboxIdx + 1, " / ", images.length] }), images.length > 1 && (_jsx(IconButton, { type: "button", onClick: (e) => { e.stopPropagation(); prevImage(); }, "aria-label": "Previous image", variant: "scrim", rounded: "full", className: "absolute left-4 top-1/2 -translate-y-1/2 z-10 h-12 w-12", children: _jsx(Span, { size: "2xl", children: "\u2039" }) })), _jsx(Row, { centered: true, className: "relative h-[85vh] w-[85vw]", onClick: (e) => e.stopPropagation(), children: _jsx(MediaImage, { src: currentImage, alt: `Review photo ${lightboxIdx + 1}`, size: "hero", objectFit: "contain", rounded: "lg", shadow: "2xl" }) }), images.length > 1 && (_jsx(IconButton, { type: "button", onClick: (e) => { e.stopPropagation(); nextImage(); }, "aria-label": "Next image", variant: "scrim", rounded: "full", className: "absolute right-4 top-1/2 -translate-y-1/2 z-10 h-12 w-12", children: _jsx(Span, { size: "2xl", children: "\u203A" }) })), images.length > 1 && (_jsx(Row, { justify: "center", gap: "xs", className: "absolute bottom-4 left-0 right-0", padding: "x-md", children: images.map((img, i) => (_jsx(Button, { variant: "ghost", type: "button", onClick: (e) => { e.stopPropagation(); setLightboxIdx(i); }, "aria-label": `Go to image ${i + 1}`, rounded: "md", paddingX: "none", paddingY: "none", className: `h-12 w-12 flex-shrink-0 overflow-hidden border-2 transition-all ${i === lightboxIdx
                                 ? "border-white scale-110"

package/dist/features/reviews/components/ReviewSummary.js

@@ -14,7 +14,7 @@ const CLS_BAR = "h-full rounded-full bg-warning-surface transition-all duration-
  */
 export function ReviewSummary({ averageRating, totalReviews, distribution, className = "", }) {
     const stars = [5, 4, 3, 2, 1];
-    return (_jsxs(Stack, { align: "center", className: `sm:[flex-direction:row] sm: sm:gap-[2rem] ${className}`, gap: "md", children: [_jsxs(Stack, { className: "sm:items-[flex-start]", align: "center", gap: "xs", children: [_jsx(Span, { color: "inverse", weight: "bold", className: "leading-none text-[var(--appkit-color-text)] dark:", size: "5xl", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: averageRating, size: "md", readOnly: true }), _jsxs(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [totalReviews.toLocaleString(), " review", totalReviews !== 1 ? "s" : ""] })] }), _jsx(Stack, { className: "flex-1", gap: "sm", children: stars.map((star) => {
+    return (_jsxs(Stack, { align: "center", className: `sm:[flex-direction:row] sm: sm:gap-[2rem] ${className}`, gap: "md", children: [_jsxs(Stack, { className: /* audit-variant-ok: RESPONSIVE alignment override; `align` is base-breakpoint only */ "sm:items-start", align: "center", gap: "xs", children: [_jsx(Span, { color: "inverse", weight: "bold", className: "leading-none text-[var(--appkit-color-text)] dark:", size: "5xl", children: averageRating.toFixed(1) }), _jsx(StarRating, { value: averageRating, size: "md", readOnly: true }), _jsxs(Text, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: [totalReviews.toLocaleString(), " review", totalReviews !== 1 ? "s" : ""] })] }), _jsx(Stack, { className: "flex-1", gap: "sm", children: stars.map((star) => {
                     const count = distribution[star] ?? 0;
                     const pct = totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;
                     return (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: "w-4 text-[var(--appkit-color-text-muted)] tabular-nums", align: "end", children: star }), _jsx(Span, { size: "xs", className: CLS_STAR, children: "\u2605" }), _jsx(Div, { className: "flex-1 h-2 bg-[var(--appkit-color-surface)] overflow-hidden", rounded: "full", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `${star} star: ${pct}%`, children: _jsx(ProgressBarFill, { pct: pct, className: CLS_BAR }) }), _jsxs(Span, { size: "xs", className: "w-8 tabular-nums", color: "faint", align: "end", children: [pct, "%"] })] }, star));

package/dist/features/tester/seed-data/_happy-path.js

@@ -67,7 +67,7 @@ export const happyPathPages = [
                     "Wait for the grid to render.",
                     "Read every category name shown at the top level.",
                 ],
-                expectedBehaviour: "The index lists the tier-0 roots of the category forest, which are Spinning Tops and Living Collectibles.",
+                expectedBehaviour: "The index lists the tier-0 roots of the category forest — SIX of them: Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits and Living Collectibles. It lists ONLY roots: the forest is 1,185 rows and the index used to render all of them flat.",
                 expectedUiState: "Both 'Spinning Tops' and 'Living Collectibles' are visible as cards or links. The page is not empty and does not render only leaf categories.",
                 expectedData: { rootCategoriesVisible: 2 },
                 endResult: "Nothing is written; reloading shows the same roots.",

package/dist/features/tester/seed-data/authored/admin__catalog-listings.js

@@ -51,7 +51,7 @@ export const authored = {
         startPage: "/admin/categories",
         steps: [
             "Sign in as admin@letitrip.in / TempPass123!.",
-            "Open /admin/categories and read the tree, noting the two roots and how depth is shown.",
+            "Open /admin/categories and read the tree, noting the six roots and how depth is shown.",
             "Create a child category named 'QA Category admin-crud' under category-beyblade-burst.",
             "Save, RELOAD, and read its parent, its tier and its position in the tree.",
             "Open /categories in a private window and find it beneath its parent.",

package/dist/features/tester/seed-data/authored/content-discovery__category-brand-relations.js

@@ -44,14 +44,14 @@ export const authored = {
         startPage: "/categories",
         steps: [
             "Open /categories and read every top-level category shown.",
-            "Check both Spinning Tops and Living Collectibles are present.",
+            "Check all six roots are present: Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits, Living Collectibles.",
             "Click Living Collectibles and read its children.",
             "Click down to a leaf under it.",
             "Check the leaf lists at least one live-item listing.",
         ],
         inputs: { rootA: "category-spinning-tops", rootB: "category-living-collectibles" },
-        expectedBehaviour: "Both roots are on the index. The tree had one root and two tiers before it was rebuilt, so the live-item listings carried no category at all and were unreachable from every category and brand page — a whole listing type invisible to browsing while its detail pages worked fine.",
-        expectedUiState: "Two roots on the index, and the Living Collectibles branch walks down to a leaf holding a live listing. One root, or a second root that leads nowhere, is the finding.",
+        expectedBehaviour: "All SIX roots are on the index. The tree had one root and two tiers before it was rebuilt, so the live-item listings carried no category at all and were unreachable from every category and brand page — a whole listing type invisible to browsing while its detail pages worked fine. Living Collectibles is the one to walk, because it is the root whose leaves hold the live-item listings.",
+        expectedUiState: "Six roots on the index, and the Living Collectibles branch walks down to a leaf holding a live listing. A missing root, or a root that leads nowhere, is the finding.",
         endResult: "Read-only.",
     },
     "checklist-content-discovery-category-brand-relations-root-page-shows-descendant-products": {

package/dist/features/tester/seed-data/authored/content-discovery__category-tabs-franchise-bundles.d.ts

@@ -0,0 +1,2 @@
+import type { AuthoredCase } from "./_types";
+export declare const authored: Record<string, AuthoredCase>;

package/dist/features/tester/seed-data/authored/content-discovery__category-tabs-franchise-bundles.js

@@ -0,0 +1,152 @@
+/*
+ * WHY: Authored six-part procedures for the categories-index tabs, the
+ *      franchise unit and the bundle collage (2026-10-14).
+ * WHAT: 8 cases, keyed by full checklist id.
+ *
+ * 🛑 EVERY CASE IS BEFORE → AFTER, because every defect this work produced
+ * rendered a page that looked fine:
+ *
+ *   1. The index rendered all 1,185 rows flat — six roots buried under 752
+ *      part leaves. A case reading "the categories page loads" passes against
+ *      that.
+ *   2. The Parts tab first returned 772, catching the 20 classification NODES
+ *      as well as the leaves, because their own `parentIds` also pass through
+ *      a `*-parts` node. A list mixing "Attack Rings" with attack rings is not
+ *      visibly wrong.
+ *   3. Seven franchises have no stock. Active, each is a card opening an empty
+ *      shop; absent, seventeen `CharacterHotspot` links stay 404. Both look
+ *      correct from any single page — which is why two cases here check the
+ *      index and the detail page SEPARATELY.
+ *   4. Every bundle also carries a placeholder cover, so a collage tested
+ *      after the cover never renders — and one grey tile is not "broken".
+ *
+ * So each case counts an exact number or compares two surfaces. Several carry
+ * a nonsense control, because a filter that returns everything looks identical
+ * to a filter that works.
+ *
+ * @tag domain:tester
+ * @tag layer:seed
+ * @tag pattern:none
+ * @tag access:server-only
+ * @tag consumers:seed-data/authored/index.ts
+ * @tag sideEffects:none
+ */
+export const authored = {
+    "checklist-content-discovery-category-tabs-franchise-bundles-index-shows-roots-only": {
+        roles: ["guest"],
+        startPage: "/categories",
+        steps: [
+            "Open /categories.",
+            "Confirm the Categories tab is the one selected on arrival.",
+            "Count the cards. There must be exactly six.",
+            "Read the six names: Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits, Living Collectibles.",
+            "Answer no if any deeper category appears here — 'Attack Rings', 'Beyblade Burst', '1B' or any single part name.",
+        ],
+        expectedBehaviour: "BEFORE: the index rendered the whole flat forest — 1,185 rows, of which 752 are part leaves and 220 are model leaves — so the six roots were buried and a visitor met a wall of names with no sense of where they were. AFTER: the Categories tab shows ONLY the tier-0 roots and you walk down from one.",
+        expectedUiState: "Exactly six cards, each a root. No tier-1-or-deeper row anywhere on this tab.",
+        expectedData: { rootCards: 6 },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-five-tabs-no-all": {
+        roles: ["guest"],
+        startPage: "/categories",
+        steps: [
+            "Open /categories.",
+            "Read the tab bar.",
+            "Confirm there are exactly five tabs: Categories, Brands, Franchises, Parts, Bundles.",
+            "Answer no if a tab labelled 'All' is present.",
+        ],
+        expectedBehaviour: "BEFORE: the tabs were All / Categories / Brands, and 'All' was the DEFAULT — it is what rendered the 1,185 rows. AFTER: five tabs, no 'All'. Every tab answers a question ('which parts do you have?'); 'all' answered none of them, which is why it was removed rather than reordered.",
+        expectedUiState: "Five tabs, named exactly as above, with no 'All'.",
+        expectedData: { tabCount: 5, hasAllTab: false },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-parts-tab-is-leaves-only": {
+        roles: ["guest"],
+        startPage: "/categories",
+        steps: [
+            "Open /categories and click the Parts tab.",
+            "Read the total the pager reports.",
+            "Confirm it reads 752 and not 772.",
+            "Scan the first page and confirm every card is an individual PART — '1B', 'Ten Heavy', 'Neo Right SG'.",
+            "Answer no if a classification GROUP appears as a card: 'Attack Rings', 'Weight Disks', 'Performance Tips', 'Bit Chips'.",
+        ],
+        expectedBehaviour: "BEFORE: the tab returned 772, because the predicate matched any row whose ancestry passes a `*-parts` node — which is true of the 20 classification NODES as well as the leaves beneath them. The list mixed groups with their own contents and was not visibly wrong. AFTER: leaves only, 752. A part is a leaf by itself; a classification is a branch you reach by drilling down.",
+        expectedUiState: "752 parts reported. Every card is a single part; no classification group appears.",
+        expectedData: { partsTotal: 752, classificationNodesShown: 0 },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-tabs-do-not-overlap": {
+        roles: ["guest"],
+        startPage: "/categories",
+        steps: [
+            "Open /categories and note the total each of the five tabs reports: Categories, Brands, Franchises, Parts, Bundles.",
+            "Expect 6, 28, 8, 752, 5.",
+            "Pick one brand by name on the Brands tab — for example Takara-Tomy.",
+            "Open each of the other four tabs and search for that same name.",
+            "Answer no if it appears on any tab other than Brands.",
+            "Repeat once with a bundle name taken from the Bundles tab.",
+        ],
+        expectedBehaviour: "Brands, franchises and bundles are all tier-0 rows, so a predicate that tested the tier before the discriminator would list every one of them under Categories as well. The type check has to come first. A row on two tabs double-counts the catalogue and makes the totals unreadable.",
+        expectedUiState: "Tab totals read 6 / 28 / 8 / 752 / 5. The sampled brand and bundle each appear on exactly one tab.",
+        expectedData: { categories: 6, brands: 28, franchises: 8, parts: 752, bundles: 5 },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-franchise-index-hides-unstocked": {
+        roles: ["guest"],
+        startPage: "/franchise",
+        steps: [
+            "Open /franchise.",
+            "Count the cards. Exactly one must be present: Beyblade.",
+            "Answer no if Marvel, DC Comics, Dragon Ball, Naruto, Bleach, One Piece or One Punch Man appears here.",
+        ],
+        expectedBehaviour: "Eight franchises are seeded; seven have no stock. A row with no product is a dead facet — a card that opens an empty shop — so the index lists ACTIVE franchises only. The seven still exist and their pages still resolve; they are simply not advertised as somewhere to shop until they have something to sell.",
+        expectedUiState: "One card, Beyblade. None of the seven unstocked IPs.",
+        expectedData: { franchiseCards: 1 },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-unstocked-franchise-page-resolves": {
+        roles: ["guest"],
+        startPage: "/franchise/marvel",
+        steps: [
+            "Open /franchise/marvel directly.",
+            "Confirm a real page renders — a heading reading Marvel — and NOT a 404 or not-found view.",
+            "Confirm a message says plainly that this franchise is not stocked yet.",
+            "Answer no if the page 404s, or if it renders an empty product grid with no explanation.",
+        ],
+        expectedBehaviour: "BEFORE: `/franchise/*` was not a route at all, so seventeen links in CharacterHotspot 404ed. AFTER: the page resolves. An unstocked franchise is NOT a 404 — the row exists deliberately so those links land somewhere honest. An unexplained empty grid would be the other wrong answer: the visitor arrived from a real link and should be told it is coming, not left to assume something broke.",
+        expectedUiState: "The Marvel page renders with its name and an explicit 'not stocking this yet' message. No 404, no bare empty grid.",
+        expectedData: { httpOk: true, explanationShown: true },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-franchise-detail-lists-its-products": {
+        roles: ["guest"],
+        startPage: "/franchise/franchise-beyblade",
+        steps: [
+            "Open the Beyblade franchise page from /franchise.",
+            "Confirm it reports a listing count in the thousands, not zero and not a handful.",
+            "Confirm product cards render.",
+            "CONTROL: now open /franchise/zzznope by typing it.",
+            "Confirm that page 404s rather than showing the whole catalogue.",
+        ],
+        expectedBehaviour: "The products filter matches on `franchiseSlug`, so a clause that was silently dropped would return the ENTIRE catalogue on every franchise page — which looks like a working page full of products. The nonsense control is the only step that tells a working filter from an absent one.",
+        expectedUiState: "Beyblade lists ~1,304 listings. An unknown franchise slug 404s and never renders a populated grid.",
+        expectedData: { beybladeListings: 1304, nonsenseSlug404s: true },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+    "checklist-content-discovery-category-tabs-franchise-bundles-bundle-card-shows-a-collage": {
+        roles: ["guest"],
+        startPage: "/categories",
+        steps: [
+            "Open /categories and click the Bundles tab.",
+            "Confirm five bundle cards render.",
+            "Look at each card's image area.",
+            "Confirm it shows a COLLAGE of several product photos, not one single image.",
+            "Answer no if any card shows a single flat colour tile or one lone photo.",
+        ],
+        expectedBehaviour: "BEFORE: a bundle card showed one generic placeholder tile — the least informative thing a bundle card can show, since a bundle IS its contents. AFTER: each card shows a collage built from its members' own photos, resolved at seed time so the card costs no extra query. All five bundles carry 3 or 4 member images, which clears the 3-image minimum the collage needs.",
+        expectedUiState: "Five bundle cards, each showing a multi-image collage rather than a single tile.",
+        expectedData: { bundleCards: 5, cardsWithCollage: 5 },
+        endResult: "Nothing is changed; this case only reads.",
+    },
+};

package/dist/features/tester/seed-data/authored/design-ux__rich-text-readability.d.ts

@@ -0,0 +1,2 @@
+import type { AuthoredCase } from "./_types";
+export declare const authored: Record<string, AuthoredCase>;

package/dist/features/tester/seed-data/authored/design-ux__rich-text-readability.js

@@ -0,0 +1,84 @@
+/*
+ * WHY: Authored six-part procedures for the design-ux/rich-text-readability page.
+ * WHAT: 5 case(s), keyed by full checklist id.
+ *
+ * @tag domain:tester
+ * @tag layer:seed
+ * @tag pattern:none
+ * @tag access:server-only
+ * @tag consumers:seed-data/authored/index.ts
+ * @tag sideEffects:none
+ */
+export const authored = {
+    "checklist-design-ux-rich-text-readability-prose-body-readable-dark": {
+        roles: ["guest"],
+        startPage: "/categories/category-spinning-tops",
+        steps: [
+            "Set the site to DARK mode using the theme toggle in the header.",
+            "Open /categories/category-spinning-tops.",
+            "Scroll to the multi-paragraph write-up directly below the hero banner (it begins 'Four generations of Beyblade').",
+            "Read the full write-up at normal viewing distance without leaning in or changing zoom.",
+        ],
+        expectedBehaviour: "The rich-text block takes its body colour from the active theme's own text token rather than from the Tailwind typography plugin's light-theme default. No element in the block should be rendering a colour that was chosen for a white page.",
+        expectedUiState: "Every sentence of the write-up is comfortably readable against the dark page. The body copy is a light grey, clearly brighter than the page background. It is NOT the dim, low-contrast grey that appears to recede into the background — the specific prior symptom was body text at gray-700 on a dark surface.",
+        endResult: "Nothing is written and nothing persists. Reloading the page in dark mode shows the same readable text; this is a pure rendering check.",
+    },
+    "checklist-design-ux-rich-text-readability-prose-links-visible-dark": {
+        roles: ["guest"],
+        startPage: "/categories/category-spinning-tops",
+        steps: [
+            "Stay in DARK mode on /categories/category-spinning-tops.",
+            "Without moving the mouse over them, locate the five inline links in the write-up: 'Beyblade Original', 'Metal Fight', 'Burst', 'Beyblade X' and 'Accessories'.",
+            "Compare each link's text colour against the paragraph text immediately surrounding it.",
+        ],
+        expectedBehaviour: "Link colour resolves to the theme's secondary accent in dark mode, not to the typography plugin's default link colour. Identifying a link must not require hovering, because hover is unavailable on touch devices.",
+        expectedUiState: "All five links are a visibly different colour from the body copy around them and are obviously clickable at a glance. The prior symptom was links rendering at gray-900 — near-black on a dark page, effectively invisible, findable only by sweeping the cursor and watching for the pointer to change. An underline alone does NOT satisfy this case: the text colour itself must differ.",
+        endResult: "No state changes. Clicking any of the five navigates to that category, which also confirms they were real links and not styled text.",
+    },
+    "checklist-design-ux-rich-text-readability-prose-readable-light-regression": {
+        roles: ["guest"],
+        startPage: "/categories/category-spinning-tops",
+        steps: [
+            "On /categories/category-spinning-tops, switch the theme toggle to LIGHT mode.",
+            "Read the same write-up and locate the same five inline links.",
+            "Toggle between light and dark three times, pausing on each to re-read one paragraph and one link.",
+        ],
+        expectedBehaviour: "Both themes resolve their colours from the same rebound token set, so a regression in one is a plausible consequence of a change to the other. Headings, body copy and links must each stay distinct from one another in both themes.",
+        expectedUiState: "In LIGHT mode the body copy is dark on the white surface and the links are the primary brand colour. Headings remain visibly darker/stronger than body copy. Nothing is washed out, and no text becomes near-invisible at either end of the toggle.",
+        endResult: "The theme choice persists across a reload (it is stored client-side), and the write-up renders correctly in whichever mode was last selected.",
+    },
+    "checklist-design-ux-rich-text-readability-prose-readable-across-surfaces": {
+        roles: ["guest"],
+        startPage: "/blog",
+        steps: [
+            "Set the site to DARK mode.",
+            "Open any published post from /blog and read its body copy and any inline links.",
+            "Open /terms (or /privacy) and read the policy body copy.",
+            "Open /faqs and expand any answer.",
+            "Open any product from /products and read its Description tab.",
+        ],
+        expectedBehaviour: "All four surfaces render through the same shared rich-text renderer, so one shared fix must reach all of them. A surface that is still unreadable means the fix did not apply there and the renderer is being bypassed.",
+        expectedUiState: "On each of the four pages the body copy is readable light-grey-on-dark and any inline links are a visibly distinct colour. No page shows the dim gray-700 body or the near-black links described in the dark-mode cases above.",
+        endResult: "Nothing persists. If any ONE of the four fails while the others pass, record which one — that narrows the cause to that surface's own markup rather than the shared renderer.",
+    },
+    "checklist-design-ux-rich-text-readability-prose-follows-custom-theme": {
+        roles: ["admin"],
+        startPage: "/admin/site",
+        steps: [
+            "Sign in as admin@letitrip.in / TempPass123!.",
+            "Open /admin/site and go to the Themes tab.",
+            "Note which theme is currently the default, then set a visibly different one as the active default (for example Cobalt Night, or Sunset).",
+            "Open /categories/category-spinning-tops in a new tab and read the write-up's body copy and links.",
+            "Return to /admin/site → Themes and restore the original default theme.",
+        ],
+        inputs: {
+            "Themes tab — active default": "a theme other than the current default",
+        },
+        expectedBehaviour: "Rich-text colours are bound to `--appkit-color-*` theme tokens, so switching the active theme must restyle admin-authored prose along with the rest of the site. This is only possible since the 2026-10-15 fix: the typography plugin's palette is hardcoded Tailwind greys that no theme record could ever reach.",
+        expectedUiState: "After the theme change, the write-up's paragraph colour and link colour both shift to match the new theme — they do not stay the same grey the previous theme used. Body copy remains readable against whatever surface the new theme sets.",
+        expectedData: {
+            "siteSettings.theme.defaultDarkThemeId": "restored to its original value at the end",
+        },
+        endResult: "The original default theme is restored, so no other tester inherits a changed site theme. Reloading the category page shows prose in the original theme's colours again.",
+    },
+};

package/dist/features/tester/seed-data/authored/index.js

@@ -78,6 +78,7 @@ import { authored as a_content_discovery__coupons } from "./content-discovery__c
 import { authored as a_content_discovery__events } from "./content-discovery__events.js";
 import { authored as a_content_discovery__faq_help } from "./content-discovery__faq-help.js";
 import { authored as a_content_discovery__parts_database } from "./content-discovery__parts-database.js";
+import { authored as a_content_discovery__category_tabs_franchise_bundles } from "./content-discovery__category-tabs-franchise-bundles.js";
 import { authored as a_content_discovery__notifications } from "./content-discovery__notifications.js";
 import { authored as a_content_discovery__search } from "./content-discovery__search.js";
 import { authored as a_cta_layout__checkout_bottom_bar } from "./cta-layout__checkout-bottom-bar.js";
@@ -85,6 +86,7 @@ import { authored as a_cta_layout__dialog_footers } from "./cta-layout__dialog-f
 import { authored as a_cta_layout__editor_action_bar } from "./cta-layout__editor-action-bar.js";
 import { authored as a_cta_layout__product_bottom_bar } from "./cta-layout__product-bottom-bar.js";
 import { authored as a_design_ux__back_to_top_button } from "./design-ux__back-to-top-button.js";
+import { authored as a_design_ux__rich_text_readability } from "./design-ux__rich-text-readability.js";
 import { authored as a_design_ux__dashboard_layout } from "./design-ux__dashboard-layout.js";
 import { authored as a_design_ux__footer_theme } from "./design-ux__footer-theme.js";
 import { authored as a_design_ux__form_validation_errors } from "./design-ux__form-validation-errors.js";
@@ -199,6 +201,7 @@ export const AUTHORED_CASES = {
     ...a_content_discovery__events,
     ...a_content_discovery__faq_help,
     ...a_content_discovery__parts_database,
+    ...a_content_discovery__category_tabs_franchise_bundles,
     ...a_content_discovery__notifications,
     ...a_content_discovery__search,
     ...a_cta_layout__checkout_bottom_bar,
@@ -206,6 +209,7 @@ export const AUTHORED_CASES = {
     ...a_cta_layout__editor_action_bar,
     ...a_cta_layout__product_bottom_bar,
     ...a_design_ux__back_to_top_button,
+    ...a_design_ux__rich_text_readability,
     ...a_design_ux__dashboard_layout,
     ...a_design_ux__footer_theme,
     ...a_design_ux__form_validation_errors,

package/dist/features/tester/seed-data/authored/public-pages__core-listing-pages.js

@@ -180,8 +180,8 @@ export const authored = {
             "Click into one root category and read its page.",
             "Go back and click a tier-3 category and read its page.",
         ],
-        expectedBehaviour: "The index renders the category forest — two roots across four tiers — and every card links to a page that resolves. Products carry their full ancestor chain, so a category page matches on its own id alone and needs no descendant expansion.",
-        expectedUiState: "Both roots, Spinning Tops and Living Collectibles, are present. Every card shows a name and a count rather than a bare name. Both the root and the tier-3 page render with products rather than an empty grid.",
+        expectedBehaviour: "The index renders the SIX roots of the category forest — Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits, Living Collectibles — and every card links to a page that resolves. It shows roots ONLY: the forest is 1,185 rows across five tiers (0-4) and the index used to render every one of them flat. Products carry their full ancestor chain, so a category page matches on its own id alone and needs no descendant expansion.",
+        expectedUiState: "All six roots are present, and NO tier-1-or-deeper category appears on the Categories tab. Every card shows a name and a count rather than a bare name. Both the root and the tier-3 page render with products rather than an empty grid.",
         expectedData: { rootCategoryCount: 2 },
         endResult: "Read-only; nothing persists. A root category page rendering blank with no error is the specific failure worth watching for — the query that produces it is wrapped in a catch that returns nothing.",
     },

package/dist/features/tester/seed-data/tester-checklist-seed-data.js

@@ -3119,6 +3119,43 @@ const rawTesterChecklistItems = [
                 { key: "seller-description-lists-parts", label: "A listing under a model leaf gets a Parts line in its filled description, and a non-Beyblade category gets no empty one" },
             ],
         },
+        {
+            /*
+             * The categories index, the franchise unit and the bundle collage —
+             * 2026-10-14.
+             *
+             * 🛑 Every case here compares two things or counts an exact number,
+             * because every defect this work already produced rendered a perfectly
+             * plausible page:
+             *
+             *   1. The index rendered all 1,185 rows flat. Nothing errored; it just
+             *      buried the six roots under 752 part leaves.
+             *   2. The Parts tab first matched 772 rows — it also caught the 20
+             *      classification NODES, whose own parentIds pass through a
+             *      `*-parts` node. A tab mixing "Attack Rings" with the attack rings
+             *      inside it looks entirely reasonable.
+             *   3. Seven franchises have NO stock. Seeded active they would each be
+             *      a card opening an empty shop; omitted entirely, seventeen
+             *      CharacterHotspot links stay 404. Both failure modes look fine
+             *      from one page.
+             *   4. Every bundle carries a placeholder cover image, so a collage
+             *      checked AFTER the cover would never render — and a card showing
+             *      one grey tile is not visibly broken.
+             */
+            pageKey: "category-tabs-franchise-bundles",
+            pageLabel: "Categories index tabs, the franchise unit and the bundle collage",
+            href: "/categories",
+            cases: [
+                { key: "index-shows-roots-only", label: "The Categories tab lists the six roots and NO deeper category" },
+                { key: "five-tabs-no-all", label: "There are exactly five tabs and none of them is 'All'" },
+                { key: "parts-tab-is-leaves-only", label: "The Parts tab lists part leaves and NOT the 20 classification nodes" },
+                { key: "tabs-do-not-overlap", label: "No single row appears on two tabs" },
+                { key: "franchise-index-hides-unstocked", label: "The franchise index shows only stocked franchises, not all eight" },
+                { key: "unstocked-franchise-page-resolves", label: "An unstocked franchise page loads and says so, rather than 404ing or showing an empty grid" },
+                { key: "franchise-detail-lists-its-products", label: "The Beyblade franchise page lists its listings, with a nonsense slug as the control" },
+                { key: "bundle-card-shows-a-collage", label: "A bundle card shows a collage of its members, not its placeholder cover" },
+            ],
+        },
         {
             /*
              * Store reviews. The endpoint answered 200 with zero reviews for EVERY
@@ -3450,13 +3487,13 @@ const rawTesterChecklistItems = [
             cases: [
                 {
                     key: "tier-depth-reachable",
-                    label: "The category tree is four tiers deep and every tier is reachable by clicking down from a root",
-                    description: "Two roots exist — Spinning Tops and Living Collectibles. Walk one of them all the way to a leaf without typing a URL.",
+                    label: "The category tree is five tiers deep and every tier is reachable by clicking down from a root",
+                    description: "Six roots exist — Spinning Tops, Trading Cards, Collectible Figures, Hot Wheels, Model Kits, Living Collectibles. Walk one of them all the way to a leaf without typing a URL.",
                     href: "/categories",
                 },
                 {
                     key: "second-root-reachable",
-                    label: "Both category roots appear on the categories index, not just the Beyblade one",
+                    label: "Every category root appears on the categories index, not just the Beyblade one",
                     description: "BEFORE: the tree had ONE root and TWO tiers, so the live-item listings carried no category at all and were unreachable from every category and brand page.",
                     href: "/categories",
                 },
@@ -3855,6 +3892,43 @@ const rawTesterChecklistItems = [
                 },
             ],
         },
+        {
+            pageKey: "rich-text-readability",
+            pageLabel: "Admin-Authored Rich Text — Readability in Both Themes",
+            href: "/categories/category-spinning-tops",
+            cases: [
+                {
+                    key: "prose-body-readable-dark",
+                    label: "IN DARK MODE: the paragraphs of a category's own write-up are clearly readable — not a dim grey that disappears into the page background",
+                    description: "Fixed 2026-10-15. BEFORE: every rich-text block on the site rendered the LIGHT-theme prose palette in dark mode — body text at gray-700 — because `dark:prose-invert` has never compiled in this project (the consumer Tailwind build is told `@source not \"../../appkit\"`, and appkit's own build has no typography plugin). AFTER: switch to DARK mode, open /categories/category-spinning-tops and read the four-paragraph write-up under the hero. Every sentence must be comfortably readable at arm's length. A paragraph you have to lean in for is still a bug.",
+                    href: "/categories/category-spinning-tops",
+                },
+                {
+                    key: "prose-links-visible-dark",
+                    label: "IN DARK MODE: links inside that write-up (Beyblade Original, Metal Fight, Burst, Beyblade X, Accessories) are visibly a different colour from the surrounding text and are obviously clickable",
+                    description: "The worst half of the same bug, and the one a reader notices first. BEFORE: prose links resolved to gray-900 — near-black on a dark page — so they were effectively invisible; you could only find them by sweeping the mouse for the cursor change. AFTER: each link must read as a link WITHOUT hovering. Check all five in the body copy. Underline alone is not enough: the text colour must differ from the paragraph around it.",
+                    href: "/categories/category-spinning-tops",
+                },
+                {
+                    key: "prose-readable-light-regression",
+                    label: "IN LIGHT MODE: the same write-up and its links are still correct — fixing dark mode must not have broken light mode",
+                    description: "A real risk, not a formality: the fix rebinds the prose colour palette to theme tokens, so both themes now come from one place and a mistake affects both. Toggle light/dark a few times on this page. Headings must stay darker than body text, and links must stay distinguishable in BOTH.",
+                    href: "/categories/category-spinning-tops",
+                },
+                {
+                    key: "prose-readable-across-surfaces",
+                    label: "The same readability holds on every other admin-authored rich-text surface — a blog post, a policy page, an FAQ answer and a product description",
+                    description: "This was never a category-page bug; ~25 surfaces share one renderer. In DARK mode check: a post under /blog, /terms (or /privacy), an expanded answer on /faqs, and the Description tab of any product. Each must have readable body copy and visible links. One unreadable surface here means the shared fix did not reach it.",
+                    href: "/blog",
+                },
+                {
+                    key: "prose-follows-custom-theme",
+                    label: "Rich-text body copy follows an admin-authored CUSTOM theme, not a fixed grey",
+                    description: "Added with the 2026-10-15 fix, and only possible because of it: the old prose palette was hardcoded Tailwind greys that no theme could reach. As admin, open Site Settings → Themes, switch the active theme (e.g. to Cobalt Night or Sunset), then reload a category page with a write-up. The paragraph and link colours must shift with the theme rather than staying the same grey.",
+                    href: "/admin/site",
+                },
+            ],
+        },
         {
             pageKey: "status-badge-legibility",
             pageLabel: "Listing Tags & Status Chips — Light vs Dark Mode",