@mohasinac/appkit 4.63.5 → 4.64.1

package/dist/features/blog/components/BlogListView.js

@@ -3,6 +3,7 @@ import React from "react";
 import Link from "next/link.js";
 import { Article, Div, Grid, Heading, OverflowRow, Pagination, Row, Span, Stack, Text } from "../../../ui/index.js";
 import { MediaImage } from "../../media/MediaImage.js";
+import { blogCategoryBadge } from "../constants/category-badge.js";
 import { getDefaultLocale } from "../../../core/baseline-resolver.js";
 import { getMediaUrl } from "../../media/types/index.js";
 import { safeDisplayName } from "../../../security/index.js";
@@ -25,7 +26,7 @@ export function BlogCard({ post, href, onClick, className = "" }) {
     const isInteractive = !!(href || onClick);
     const card = (_jsxs(Article, { role: onClick && !href ? "button" : undefined, tabIndex: onClick && !href ? 0 : undefined, onKeyDown: onClick && !href
             ? (e) => (e.key === "Enter" || e.key === "") && onClick(post)
-            : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `relative aspect-video w-full ${__O.hidden} bg-[var(--appkit-color-surface)] dark:bg-[var(--appkit-color-surface-elevated)] flex-shrink-0`, children: coverImageUrl ? (_jsx(MediaImage, { src: coverImageUrl, alt: post.title, size: "card", className: "transition-transform duration-300 group-hover:scale-105" })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: "bg-primary/10 text-primary", rounded: "full", padding: "pill-xs", transform: "capitalize", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", color: "muted", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `group-hover:text-primary`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 flex-1`, color: "muted", truncate: 3, size: "sm", children: post.excerpt })), _jsxs(Row, { className: "mt-auto", padding: "t-sm", gap: "3", children: [post.authorAvatar ? (_jsx(Div, { className: "relative h-7 w-7 flex-shrink-0", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: post.authorAvatar, alt: post.authorName ?? "author", size: "avatar" }) })) : post.authorName ? (_jsx(Row, { textWeight: "bold", textSize: "xs", className: "h-7 w-7 flex-shrink-0 bg-primary/10 text-primary", align: "center", justify: "center", rounded: "full", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] min-w-0", size: "xs", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] })] })] }));
+            : undefined, onClick: onClick && !href ? () => onClick(post) : undefined, className: `group flex flex-col h-full overflow-hidden rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] shadow-sm transition hover:shadow-md ${isInteractive ? "cursor-pointer" : ""} ${className}`, children: [_jsx(Div, { className: `relative aspect-video w-full ${__O.hidden} bg-[var(--appkit-color-surface)] dark:bg-[var(--appkit-color-surface-elevated)] flex-shrink-0`, children: coverImageUrl ? (_jsx(MediaImage, { src: coverImageUrl, alt: post.title, size: "card", className: "transition-transform duration-300 group-hover:scale-105" })) : (_jsx(Row, { surface: "muted", className: "h-full w-full", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-30", size: "4xl", "aria-hidden": "true", children: "\u270D\uFE0F" }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p5}`, children: [_jsxs(Row, { className: "mb-2", gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: blogCategoryBadge(post.category), rounded: "full", padding: "pill-xs", transform: "capitalize", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: "Featured" })), post.readTimeMinutes && (_jsxs(Span, { size: "xs", color: "muted", children: [post.readTimeMinutes, " min read"] }))] }), _jsx(Heading, { level: 3, className: `group-hover:text-primary`, color: "primary", truncate: 2, size: "base", weight: "semibold", children: post.title }), post.excerpt && (_jsx(Text, { className: `mt-2 flex-1`, color: "muted", truncate: 3, size: "sm", children: post.excerpt })), _jsxs(Row, { className: "mt-auto", padding: "t-sm", gap: "3", children: [post.authorAvatar ? (_jsx(Div, { className: "relative h-7 w-7 flex-shrink-0", rounded: "full", overflow: "hidden", children: _jsx(MediaImage, { src: post.authorAvatar, alt: post.authorName ?? "author", size: "avatar" }) })) : post.authorName ? (_jsx(Row, { textWeight: "bold", textSize: "xs", className: "h-7 w-7 flex-shrink-0 bg-primary/10 text-primary", align: "center", justify: "center", rounded: "full", children: post.authorName.charAt(0).toUpperCase() })) : null, _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] min-w-0", size: "xs", children: [post.authorName && (_jsx(Span, { weight: "medium", className: "text-neutral-700", children: safeDisplayName(post.authorName, "Author") })), date && _jsxs(Span, { className: "ml-1 text-neutral-400", children: ["\u00B7 ", date] })] })] }), _jsxs(Row, { align: "center", gap: "xs", className: "mt-3 text-primary", textSize: "sm", textWeight: "medium", children: [_jsx(Span, { children: "Read" }), _jsx(Span, { "aria-hidden": "true", className: "transition-transform duration-200 group-hover:translate-x-1", children: "\u2192" })] })] })] }));
     if (href) {
         return (_jsx(Link, { href: href, className: "block h-full", children: card }));
     }

package/dist/features/blog/components/BlogPostView.js

@@ -5,6 +5,7 @@ import Link from "next/link.js";
 import { Div, Grid, Heading, RichText, Row, Scrim, Span, Stack, Text } from "../../../ui/index.js";
 import { Iframe } from "../../../ui/components/Iframe.js";
 import { MediaImage } from "../../media/MediaImage.js";
+import { blogCategoryBadge } from "../constants/category-badge.js";
 import { useBlogPost } from "../hooks/useBlog.js";
 import { BlogCard } from "./BlogListView.js";
 import { getMediaUrl } from "../../media/types/index.js";
@@ -56,5 +57,5 @@ export function BlogPostView({ slug, initialData, labels = {}, renderImage, rend
         })
         : "";
     const coverImageUrl = getMediaUrl(post.coverImage);
-    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-96 ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(MediaImage, { src: coverImageUrl, alt: post.title, size: "hero" })), _jsx(Scrim, { direction: "bottom-up", intensity: "subtle", className: "absolute inset-0" })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [renderBlogPostHeader(post, date, labels), post.youtubeId && /^[A-Za-z0-9_-]{6,20}$/.test(post.youtubeId) && (_jsx(Div, { className: "mb-8", children: _jsx(Iframe, { src: `https://www.youtube-nocookie.com/embed/${post.youtubeId}`, title: `${post.title} — video`, aspect: "video", rounded: "lg" }) })), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.BLOG.LIST)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full bg-[var(--appkit-color-surface-elevated)] hover:bg-primary/10 text-[var(--appkit-color-text-muted)] hover:text-primary text-[length:var(--appkit-text-xs)] font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), _jsxs(Stack, { gap: "xl", children: [renderBlogPostRelated(related, labels?.relatedTitle ?? "Related Posts", renderRelatedCard), renderBlogPostRelated(relatedByTags, labels?.relatedByTagsTitle ?? "You might also like", renderRelatedCard), renderBlogPostRelated(relatedByAuthor, labels?.relatedByAuthorTitle ?? `More from ${post.authorName}`, renderRelatedCard)] }), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] })] }));
+    return (_jsxs(Div, { className: `min-h-screen ${className}`, children: [coverImageUrl && (_jsxs(Div, { className: `relative h-72 md:h-[28rem] ${__O.hidden}`, children: [renderImage ? (renderImage(post)) : (_jsx(MediaImage, { src: coverImageUrl, alt: post.title, size: "hero", objectFit: "cover" })), _jsx(Scrim, { direction: "bottom-up", intensity: "strong", className: "absolute inset-0" }), _jsx(Div, { className: "absolute inset-x-0 bottom-0", children: _jsxs(Stack, { className: "mx-auto max-w-3xl", gap: "sm", paddingX: "x-md", paddingY: "y-xl", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-block capitalize ${blogCategoryBadge(post.category)}`, rounded: "full", padding: "pill-xs", children: post.category }), post.isFeatured && (_jsx(Span, { size: "xs", weight: "medium", className: CLS_FEATURED_BADGE, children: labels?.featured ?? "Featured" }))] }), _jsx(Heading, { level: 1, size: "3xl", mdSize: "4xl", weight: "bold", color: "inverse", shadow: "lg", children: post.title }), _jsxs(Row, { color: "inverse", textSize: "sm", wrap: true, gap: "md", className: "opacity-90", children: [post.authorName && (_jsxs(Span, { children: [labels?.author ?? "By", " ", _jsx(Span, { weight: "medium", children: post.authorName })] })), post.readTimeMinutes != null && (_jsxs(Span, { children: [post.readTimeMinutes, " ", labels?.readTime ?? "min read"] })), date && _jsx(Span, { children: date })] })] }) })] })), _jsxs(Div, { className: "max-w-3xl mx-auto", paddingY: "y-3xl", paddingX: "x-md", children: [!coverImageUrl && renderBlogPostHeader(post, date, labels), post.youtubeId && /^[A-Za-z0-9_-]{6,20}$/.test(post.youtubeId) && (_jsx(Div, { className: "mb-8", children: _jsx(Iframe, { src: `https://www.youtube-nocookie.com/embed/${post.youtubeId}`, title: `${post.title} — video`, aspect: "video", rounded: "lg" }) })), post.tags && post.tags.length > 0 && (_jsx(Row, { wrap: true, gap: "sm", className: "mb-8", children: post.tags.map((tag) => (_jsxs(Link, { href: `${String(ROUTES.BLOG.LIST)}?tags=${encodeURIComponent(tag)}`, className: "inline-block px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full bg-[var(--appkit-color-surface-elevated)] hover:bg-primary/10 text-[var(--appkit-color-text-muted)] hover:text-primary text-[length:var(--appkit-text-xs)] font-medium transition-colors", children: ["#", tag] }, tag))) })), renderAuthorBio && _jsx(Div, { className: "mb-6", children: renderAuthorBio(post) }), _jsx(Div, { surface: "card", padding: "xl", className: "mb-12", children: renderContent ? renderContent(post) : (_jsx(RichText, { html: normalizeRichTextHtml(post.content ?? ""), proseClass: "prose max-w-none dark:prose-invert" })) }), renderBackButton && _jsx(Div, { border: "default", className: "mt-10 border-t", padding: "t-xl", children: renderBackButton() })] }), _jsx(Div, { className: "mx-auto max-w-6xl", paddingX: "x-md", paddingY: "y-2xl", children: _jsxs(Stack, { gap: "xl", children: [renderBlogPostRelated(related, labels?.relatedTitle ?? "Related Posts", renderRelatedCard), renderBlogPostRelated(relatedByTags, labels?.relatedByTagsTitle ?? "You might also like", renderRelatedCard), renderBlogPostRelated(relatedByAuthor, labels?.relatedByAuthorTitle ?? `More from ${post.authorName}`, renderRelatedCard)] }) })] }));
 }

package/dist/features/blog/constants/category-badge.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The per-category chip palette, shared by every blog surface.
+ *
+ * ## Why this moved out of `BlogFeaturedCard`
+ *
+ * There were two palettes and only one of them had colours. `BlogFeaturedCard`
+ * carried this real five-way map — and that component is mounted ONLY on the
+ * homepage rail. `BlogCard`, which is what `/blog` and every related-posts
+ * grid actually render, painted all five categories one flat
+ * `bg-primary/10 text-primary`.
+ *
+ * So the index — the page where telling a guide from a release note is worth
+ * something, because you are scanning twenty of them — was the one surface
+ * with no category colour at all.
+ *
+ * 🛑 `Record<BlogPostCategory, string>`, so a sixth category is a compile
+ * error rather than a card that silently falls back to grey.
+ *
+ * @tag domain:blog
+ * @tag layer:constants
+ */
+import type { BlogPostCategory } from "../types";
+export declare const BLOG_CATEGORY_BADGE: Record<BlogPostCategory, string>;
+/**
+ * Neutral fallback for a value that is not a known category.
+ *
+ * 🛑 Both halves are theme-relative tokens that invert together. Never pair a
+ * `-surface` tint with a literal `text-white`: `-surface` is a near-white tint
+ * in light themes and a dark tint in dark ones, so fixed-white ink is
+ * invisible in exactly one of them (Root Cause #67).
+ */
+export declare const BLOG_CATEGORY_BADGE_FALLBACK = "bg-[var(--appkit-color-bg)] text-[var(--appkit-color-text-muted)]";
+export declare function blogCategoryBadge(category: string | undefined): string;

package/dist/features/blog/constants/category-badge.js

@@ -0,0 +1,40 @@
+/**
+ * The per-category chip palette, shared by every blog surface.
+ *
+ * ## Why this moved out of `BlogFeaturedCard`
+ *
+ * There were two palettes and only one of them had colours. `BlogFeaturedCard`
+ * carried this real five-way map — and that component is mounted ONLY on the
+ * homepage rail. `BlogCard`, which is what `/blog` and every related-posts
+ * grid actually render, painted all five categories one flat
+ * `bg-primary/10 text-primary`.
+ *
+ * So the index — the page where telling a guide from a release note is worth
+ * something, because you are scanning twenty of them — was the one surface
+ * with no category colour at all.
+ *
+ * 🛑 `Record<BlogPostCategory, string>`, so a sixth category is a compile
+ * error rather than a card that silently falls back to grey.
+ *
+ * @tag domain:blog
+ * @tag layer:constants
+ */
+export const BLOG_CATEGORY_BADGE = {
+    news: "bg-info-surface text-info",
+    tips: "bg-success-surface text-success",
+    guides: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/40 dark:text-indigo-300",
+    updates: "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
+    community: "bg-warning-surface text-warning",
+};
+/**
+ * Neutral fallback for a value that is not a known category.
+ *
+ * 🛑 Both halves are theme-relative tokens that invert together. Never pair a
+ * `-surface` tint with a literal `text-white`: `-surface` is a near-white tint
+ * in light themes and a dark tint in dark ones, so fixed-white ink is
+ * invisible in exactly one of them (Root Cause #67).
+ */
+export const BLOG_CATEGORY_BADGE_FALLBACK = "bg-[var(--appkit-color-bg)] text-[var(--appkit-color-text-muted)]";
+export function blogCategoryBadge(category) {
+    return (BLOG_CATEGORY_BADGE[category] ?? BLOG_CATEGORY_BADGE_FALLBACK);
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+/**
+ * A plain, server-rendered index of entity links.
+ *
+ * ## Why this exists
+ *
+ * Measured on the prerendered HTML 2026-10-24: `/categories`, `/brands` and
+ * `/parts` each rendered **zero** outbound entity links, and `/franchise`
+ * rendered one. All three hubs filter and paginate entirely client-side
+ * (`useCategoriesFiltered`), which is a deliberate choice that keeps them
+ * static — but it means a crawler that lands on `/brands` finds nothing to
+ * follow, and the 28 brand pages are reachable only from the homepage strip.
+ * Franchise detail pages were reachable by no link at all.
+ *
+ * This renders the full set as real `<a href>`s in the server HTML, below the
+ * interactive grid. It is additive: the client grid above is untouched, so the
+ * filtering UX is unchanged and the page stays static (a Firestore read in a
+ * Server Component does not force dynamic rendering — only `searchParams`,
+ * `cookies()` and `headers()` do, Root Cause #94).
+ *
+ * It is also genuinely useful rather than an SEO artefact — an A–Z index is
+ * what a visitor who wants "all of them" is looking for, and hiding every
+ * entity behind a JS filter serves nobody. Nothing here is cloaked: the links
+ * are visible to a person exactly as they are to a crawler.
+ *
+ * 🛑 Deliberately NOT a `"use client"` component and deliberately not
+ * paginated. Its whole job is to be in the HTML.
+ */
+export interface TaxonomyLink {
+    href: string;
+    label: string;
+}
+export interface TaxonomyLinkIndexProps {
+    heading: string;
+    /** One short sentence saying what the list is. Rendered above the links. */
+    blurb?: string;
+    items: readonly TaxonomyLink[];
+}
+export declare function TaxonomyLinkIndex({ heading, blurb, items }: TaxonomyLinkIndexProps): React.JSX.Element | null;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextLink } from "../../../ui/components/TextLink.js";
+import { Section } from "../../../ui/components/Semantic.js";
+import { Container, Row } from "../../../ui/components/Layout.js";
+import { Heading, Text } from "../../../ui/components/Typography.js";
+export function TaxonomyLinkIndex({ heading, blurb, items }) {
+    // An empty index is worse than none — it reads as a broken section.
+    if (items.length === 0)
+        return null;
+    return (_jsx(Section, { padding: "y-xl", surface: "muted", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 2, size: "xl", weight: "semibold", color: "primary", className: "mb-2", children: heading }), blurb ? (_jsx(Text, { size: "sm", color: "muted", className: "mb-4", children: blurb })) : null, _jsx(Row, { wrap: true, gap: "comfortable", as: "nav", "aria-label": heading, children: items.map((item) => (_jsx(TextLink, { href: item.href, children: item.label }, item.href))) })] }) }));
+}

package/dist/features/categories/schemas/firestore.d.ts

@@ -185,6 +185,31 @@ export interface CategoryDocument extends BaseDocument {
      * ranking mechanism; no Shopify competitor in the crawl has any.
      */
     contentBody?: string;
+    /**
+     * Where this category's SEO signals belong, when that is NOT its own URL.
+     *
+     * A part-leaf category and a `/parts/{slot}/{code}` page are the same
+     * entity seen twice: the leaf is a (usually empty) shopping surface, the
+     * parts page is the reference entry with the weight, code, aliases, WBO
+     * legality and the models that use it. Measured 2026-10-24 the taxonomy
+     * held 4,698 categories of which exactly **20** had any stock, so for the
+     * overwhelming majority the parts page is the only one with content.
+     *
+     * Setting this makes the category page declare the parts page canonical, so
+     * the two stop competing and the signals consolidate onto the one a visitor
+     * actually wants.
+     *
+     * 🛑 Written by `scripts/gen-category-parts.mjs`, which is the ONLY place
+     * that knows both ids — it assigns the category id and the glossary id in
+     * the same loop (the pairing `PART_CATEGORY_TO_GLOSSARY_ID` records). Do not
+     * re-derive it at a call site from the slug: the id schemes differ by
+     * construction and the collision-qualification rule is not invertible.
+     *
+     * 🛑 A root-relative path (`/parts/disc/0-0wall`), never absolute — the
+     * canonical HOST has exactly one definition (appkit.config.js `seo.siteUrl`)
+     * and a second one here is Root Cause #81 waiting to happen.
+     */
+    seoCanonicalPath?: string;
     /** Condition-keyed description bodies. A SET, because WHS reuses two per category. */
     descriptionTemplates?: CategoryDescriptionTemplate[];
     /** What this category hands down to a product filed under it. */

package/dist/features/categories/utils/load-category-options.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `loadOptions` adapters for `<PaginatedSelect>` over the PUBLIC taxonomy
+ * endpoints.
+ *
+ * 🛑 Extracted 2026-10-24 because there were already THREE independent copies
+ * of this function — `AdminCategoryEditorView`, `AdminProductEditorView` and
+ * `CatalogueItemEditorView` — which is the Duplication Framework's Rule of
+ * Three trigger, and a fourth was about to be written for the store-creation
+ * form. The body below is lifted from the catalogue copy, which is the only
+ * one that got both details right (see the two 🛑 notes).
+ *
+ * The three existing copies are deliberately NOT migrated here: each lives in
+ * an editor another session may hold open, and a shared helper with one honest
+ * consumer is a better starting point than a four-way edit. They remain as the
+ * migration backlog.
+ */
+export interface TaxonomyOptionPage {
+    items: {
+        value: string;
+        label: string;
+    }[];
+    hasMore: boolean;
+}
+/**
+ * 🛑 `listingOnly=true` is load-bearing. Without it the picker offers brand
+ * and bundle rows as categories — measured against production: "Takara-Tomy",
+ * "Original Collector's Set", "Metal Fusion Duo". They share the `categories`
+ * collection, and a plain listing category OMITS `categoryType` entirely, so
+ * the test cannot be expressed as a query clause; the route applies it in
+ * memory.
+ */
+export declare const loadCategoryOptions: (q: string, p: number) => Promise<TaxonomyOptionPage>;
+export declare const loadBrandOptions: (q: string, p: number) => Promise<TaxonomyOptionPage>;

package/dist/features/categories/utils/load-category-options.js

@@ -0,0 +1,50 @@
+/**
+ * `loadOptions` adapters for `<PaginatedSelect>` over the PUBLIC taxonomy
+ * endpoints.
+ *
+ * 🛑 Extracted 2026-10-24 because there were already THREE independent copies
+ * of this function — `AdminCategoryEditorView`, `AdminProductEditorView` and
+ * `CatalogueItemEditorView` — which is the Duplication Framework's Rule of
+ * Three trigger, and a fourth was about to be written for the store-creation
+ * form. The body below is lifted from the catalogue copy, which is the only
+ * one that got both details right (see the two 🛑 notes).
+ *
+ * The three existing copies are deliberately NOT migrated here: each lives in
+ * an editor another session may hold open, and a shared helper with one honest
+ * consumer is a better starting point than a four-way edit. They remain as the
+ * migration backlog.
+ */
+import { apiClient } from "../../../http/index.js";
+import { CATEGORY_ENDPOINTS, BRAND_ENDPOINTS } from "../../../constants/api-endpoints.js";
+/**
+ * 🛑 PUBLIC endpoints only. A seller-facing picker that reached
+ * `/api/admin/categories` would 403 for the very users it exists for, and the
+ * failure renders as an empty dropdown rather than an error.
+ */
+async function loadOptionsFrom(endpoint, query, page, 
+/**
+ * Extra query params, passed as an object rather than baked into `endpoint`:
+ * this builds its own `?`, so a pre-existing query string would produce
+ * `...?listingOnly=true?page=1`.
+ */
+extra) {
+    const params = new URLSearchParams({ page: String(page), pageSize: "25", ...extra });
+    if (query)
+        params.set("q", query);
+    const res = await apiClient.get(`${endpoint}?${params.toString()}`);
+    const data = res ?? {};
+    return {
+        items: (data.items ?? []).map((c) => ({ value: c.id, label: c.name })),
+        hasMore: data.hasMore ?? false,
+    };
+}
+/**
+ * 🛑 `listingOnly=true` is load-bearing. Without it the picker offers brand
+ * and bundle rows as categories — measured against production: "Takara-Tomy",
+ * "Original Collector's Set", "Metal Fusion Duo". They share the `categories`
+ * collection, and a plain listing category OMITS `categoryType` entirely, so
+ * the test cannot be expressed as a query clause; the route applies it in
+ * memory.
+ */
+export const loadCategoryOptions = (q, p) => loadOptionsFrom(CATEGORY_ENDPOINTS.LIST, q, p, { listingOnly: "true" });
+export const loadBrandOptions = (q, p) => loadOptionsFrom(BRAND_ENDPOINTS.LIST, q, p);

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

@@ -6,6 +6,8 @@ import { MediaImage } from "../../media/MediaImage.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 import { EVENT_FIELDS } from "../schemas/index.js";
 import { EventStatusBadge } from "./EventStatusBadge.js";
+import { EventTypeBadge } from "./EventTypeBadge.js";
+import { eventTypeMeta } from "../constants/event-type-meta.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { useLongPress } from "../../../react/hooks/useLongPress.js";
 import { RecordOwnerQuickActions } from "../../admin/components/RecordOwnerQuickActions.js";
@@ -15,16 +17,6 @@ const __P = {
 const __O = {
     hidden: "overflow-hidden",
 };
-const TYPE_ICONS = {
-    sale: "🏷️",
-    offer: "🎁",
-    poll: "📊",
-    survey: "📝",
-    feedback: "💬",
-    raffle: "🎟️",
-    spin_wheel: "🎡",
-    lottery: "🎰",
-};
 export function EventCard({ event, labels = {}, onParticipate, className = "", selectable = false, isSelected = false, onSelect, renderOwnerActions, }) {
     const longPress = useLongPress(() => onSelect?.(event.id, !isSelected));
     const safeTitle = event.title?.trim() || "Untitled event";
@@ -33,8 +25,8 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", s
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
     const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.slug ?? event.id));
-    const card = (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(Span, { size: "lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
-                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
+    const card = (_jsxs(Stack, { as: "article", border: "default", rounded: "xl", shadow: "hover-md", gap: "none", className: `group relative h-full overflow-hidden bg-[var(--appkit-color-surface)] ${isSelected ? "border-primary outline outline-2 outline-primary" : " "} ${className}`, onMouseDown: onSelect && !isSelected ? longPress.onMouseDown : undefined, onMouseUp: onSelect && !isSelected ? longPress.onMouseUp : undefined, onMouseLeave: onSelect && !isSelected ? longPress.onMouseLeave : undefined, onTouchStart: onSelect && !isSelected ? longPress.onTouchStart : undefined, onTouchEnd: onSelect && !isSelected ? longPress.onTouchEnd : undefined, onTouchCancel: onSelect && !isSelected ? longPress.onTouchCancel : undefined, children: [onSelect && (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: (e) => { e.preventDefault(); onSelect(event.id, !isSelected); }, label: isSelected ? "Deselect event" : "Select event", position: "top-2 left-2", className: selectable || isSelected ? "opacity-100" : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity" })), _jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl || event.coverImage?.url ? (_jsx(Div, { className: `relative aspect-video ${__O.hidden}`, children: _jsx(MediaImage, { src: event.coverImageUrl || event.coverImage?.url || "", alt: safeTitle, size: "card", className: "transition-transform duration-300 group-hover:scale-105" }) })) : (_jsx(Row, { surface: "muted", className: "aspect-video", align: "center", justify: "center", children: _jsx(Span, { className: "opacity-40", size: "5xl", "aria-hidden": "true", children: eventTypeMeta(event.type).emoji }) })) }), _jsxs(Stack, { className: `flex-1 ${__P.p4}`, children: [_jsxs(Row, { className: "mb-2", align: "start", justify: "between", gap: "sm", children: [_jsx(EventTypeBadge, { type: event.type }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "text-[var(--appkit-color-text)] leading-snug mb-1 group-hover:text-primary transition-colors", size: "base", weight: "semibold", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "mb-3 line-clamp-3 text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)]" }), _jsxs(Row, { color: "muted", textSize: "xs", className: "mb-3 mt-auto", align: "center", justify: "between", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\u2665 ", event.stats.likeCount ?? 0, " ", (event.stats.likeCount ?? 0) === 1 ? "like" : "likes"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { rounded: "lg", type: "button", onClick: () => onParticipate(event), className: "w-full bg-primary py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { rounded: "lg", paddingX: "sm", paddingY: "xs", href: detailHref, layout: "inline-flex", align: "center", justify: "center", gap: "xs", className: "w-full border border-[var(--appkit-color-border)] transition-colors hover:bg-[var(--appkit-color-bg)]", color: "primary", size: "sm", weight: "medium", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
     /*
      * 🛑 Default, not opt-in. Nothing in either repo ever passed
      * `renderOwnerActions`, so this toolbar was unreachable on every grid that

package/dist/features/events/components/EventInsights.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The charts on an event page — whichever ones have real data.
+ *
+ * 🛑 THE WHOLE SECTION DISAPPEARS WHEN NOTHING QUALIFIES, and each chart
+ * independently returns `null` from its own builder rather than rendering an
+ * empty frame. A chart says "we measured this"; an axis pair with a flat line
+ * says it too, and says something false. An absent chart says "not yet",
+ * which is both true and the common case for a new event.
+ *
+ * `<Chart>` declares its own `"use client"` internally and loads recharts via
+ * `dynamic(..., { ssr: false })`, so this file needs no client boundary and a
+ * Server Component can mount it directly.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+import type { ChartSpec } from "../../../ui/components/chart-spec";
+import type { SaleProgress } from "../utils/event-charts";
+export interface EventInsightsProps {
+    pollChart?: ChartSpec | null;
+    savingsChart?: ChartSpec | null;
+    likeTrendChart?: ChartSpec | null;
+    saleProgress?: SaleProgress | null;
+    heading?: string;
+}
+export declare function EventInsights({ pollChart, savingsChart, likeTrendChart, saleProgress, heading, }: EventInsightsProps): React.JSX.Element | null;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Chart } from "../../../ui/components/Chart.js";
+import { Grid, Heading, Progress, Row, Stack, Text } from "../../../ui/index.js";
+import { CountdownDisplay } from "../../../ui/components/CountdownDisplay.js";
+export function EventInsights({ pollChart, savingsChart, likeTrendChart, saleProgress, heading = "By the numbers", }) {
+    const charts = [savingsChart, pollChart, likeTrendChart].filter((c) => Boolean(c));
+    if (charts.length === 0 && !saleProgress)
+        return null;
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", color: "primary", children: heading }), saleProgress && (_jsxs(Stack, { gap: "sm", surface: "card", padding: "md", rounded: "xl", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: saleProgress.endsAt ? "Time remaining" : "This has ended" }), saleProgress.endsAt && (_jsx(Text, { size: "sm", color: "muted", children: _jsx(CountdownDisplay, { targetDate: saleProgress.endsAt, format: "auto" }) }))] }), _jsx(Progress, { value: saleProgress.elapsedPercent, variant: saleProgress.elapsedPercent > 85 ? "warning" : "primary", size: "sm", label: "Sale window elapsed" }), saleProgress.claimedPercent !== null && (_jsxs(_Fragment, { children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", children: "Claimed" }), _jsx(Text, { size: "sm", color: "muted", children: saleProgress.claimedLabel })] }), _jsx(Progress, { value: saleProgress.claimedPercent, variant: saleProgress.claimedPercent > 85 ? "error" : "success", size: "sm", label: "Redemptions against the cap" })] }))] })), charts.length > 0 && (_jsx(Grid, { cols: "cardsWide", gap: "lg", children: charts.map((spec) => (_jsx(Chart, { spec: spec, height: 260 }, spec.title ?? spec.caption))) }))] }));
+}

package/dist/features/events/components/EventLikeButton.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The like toggle. Optimistic, signed-in only, and safe to double-click.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+export interface EventLikeButtonProps {
+    eventId: string;
+    /** Server-rendered starting state. */
+    initialLiked: boolean;
+    initialCount: number;
+    /** POSTs the toggle and resolves with the authoritative new state. */
+    onToggle: (eventId: string) => Promise<{
+        liked: boolean;
+        likeCount: number;
+    }>;
+    size?: "sm" | "md";
+    className?: string;
+}
+export declare function EventLikeButton({ eventId, initialLiked, initialCount, onToggle, size, className, }: EventLikeButtonProps): React.JSX.Element;

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The like toggle. Optimistic, signed-in only, and safe to double-click.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import { useCallback, useState, useTransition } from "react";
+import { Button, Row, Span, Icon } from "../../../ui/index.js";
+import { PressScale } from "../../../ui/components/Motion.js";
+import { useOptionalSession } from "../../../react/contexts/SessionContext.js";
+import { LoginRequiredModal } from "../../../ui/components/LoginRequiredModal.js";
+import { normalizeError } from "../../../errors/normalize.js";
+export function EventLikeButton({ eventId, initialLiked, initialCount, onToggle, size = "md", className = "", }) {
+    const session = useOptionalSession();
+    const [liked, setLiked] = useState(initialLiked);
+    const [count, setCount] = useState(initialCount);
+    const [showLogin, setShowLogin] = useState(false);
+    const [pending, startTransition] = useTransition();
+    const handleClick = useCallback(() => {
+        /*
+         * 🛑 THREE STATES, NOT TWO. `SessionProvider` mounts `initialUser={null}`
+         * because the root locale layout must stay static (Root Cause #82), so
+         * `loading` is true on every hard load FOR SIGNED-IN USERS TOO. Testing
+         * only `!user` would open the sign-in modal at a buyer who is already
+         * signed in, on every first click after a page load — the exact defect
+         * Root Cause #79 records for the wishlist heart.
+         */
+        if (session?.loading)
+            return;
+        if (!session?.user?.uid) {
+            setShowLogin(true);
+            return;
+        }
+        // Optimistic: flip now, reconcile from the server response. A like is
+        // cheap to be briefly wrong about and the latency is what people notice.
+        const nextLiked = !liked;
+        setLiked(nextLiked);
+        setCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)));
+        startTransition(() => {
+            void onToggle(eventId)
+                .then((res) => {
+                // The server is authoritative — it holds the real count, which may
+                // have moved for other reasons between paint and click.
+                setLiked(res.liked);
+                setCount(res.likeCount);
+            })
+                .catch((err) => {
+                void normalizeError(err);
+                // Roll back rather than leaving a lie on screen.
+                setLiked(liked);
+                setCount(initialCount);
+            });
+        });
+    }, [session, liked, initialCount, eventId, onToggle]);
+    const label = liked ? "Liked" : "Like";
+    return (_jsxs(_Fragment, { children: [_jsx(PressScale, { children: _jsx(Button, { type: "button", variant: liked ? "primary" : "outline", size: size, onClick: handleClick, isLoading: pending, "aria-pressed": liked, "aria-label": `${label} this event — ${count} ${count === 1 ? "person likes" : "people like"} it`, className: className, children: _jsxs(Row, { align: "center", gap: "xs", children: [_jsx(Icon, { name: "wishlist", filled: liked }), _jsx(Span, { weight: "medium", children: label }), _jsx(Span, { numeric: true, children: count })] }) }) }), _jsx(LoginRequiredModal, { isOpen: showLogin, onClose: () => setShowLogin(false), message: "Sign in to like this event and see who else has." })] }));
+}

package/dist/features/events/components/EventLikersRail.d.ts

@@ -0,0 +1,23 @@
+/**
+ * "Liked by" — the last ten faces, then a way to see the rest.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+import type { PublicLiker } from "../schemas/likes";
+export interface EventLikersRailProps {
+    /** The most recent likers, server-rendered. */
+    likers: PublicLiker[];
+    /** The event's total like count — usually larger than `likers.length`. */
+    totalCount: number;
+    /** True when more exist past the preview. */
+    hasMore: boolean;
+    /** Fetches one more page for the modal. */
+    loadMore?: (offset: number) => Promise<{
+        likers: PublicLiker[];
+        hasMore: boolean;
+    }>;
+    className?: string;
+}
+export declare function EventLikersRail({ likers, totalCount, hasMore, loadMore, className, }: EventLikersRailProps): React.JSX.Element | null;

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

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * "Liked by" — the last ten faces, then a way to see the rest.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import { useCallback, useState } from "react";
+import { AvatarGroup, Button, Modal, Row, Stack, Text, Span, Avatar } from "../../../ui/index.js";
+import { LIKERS_PAGE_SIZE } from "../schemas/likes.js";
+import { normalizeError } from "../../../errors/normalize.js";
+/** "Aarav, Riya and 7 others" — names first, count only for the remainder. */
+function summarise(likers, total) {
+    if (likers.length === 0)
+        return "";
+    const shown = likers.slice(0, 2).map((l) => l.displayName);
+    const others = Math.max(0, total - shown.length);
+    if (others === 0)
+        return shown.join(" and ");
+    return `${shown.join(", ")} and ${others} other${others === 1 ? "" : "s"}`;
+}
+export function EventLikersRail({ likers, totalCount, hasMore, loadMore, className = "", }) {
+    const [open, setOpen] = useState(false);
+    const [all, setAll] = useState(likers);
+    const [more, setMore] = useState(hasMore);
+    const [loading, setLoading] = useState(false);
+    const handleLoadMore = useCallback(() => {
+        if (!loadMore || loading)
+            return;
+        setLoading(true);
+        void loadMore(all.length)
+            .then((page) => {
+            setAll((prev) => [...prev, ...page.likers]);
+            setMore(page.hasMore);
+        })
+            .catch((err) => {
+            void normalizeError(err);
+            // Stop offering a button that is not working, rather than letting it
+            // sit there doing nothing on every press.
+            setMore(false);
+        })
+            .finally(() => setLoading(false));
+    }, [loadMore, loading, all.length]);
+    /*
+     * Nothing to show. Deliberately renders null rather than "Be the first to
+     * like this" — an empty social proof row advertises that nobody has, which
+     * is worse for the event than saying nothing at all. The like BUTTON is
+     * still there; this is only the rail beside it.
+     */
+    if (likers.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsxs(Row, { align: "center", gap: "sm", className: className, children: [_jsx(AvatarGroup, { size: "sm", max: likers.length, avatars: likers.map((l) => ({ src: l.photoURL, name: l.displayName, alt: l.displayName })) }), _jsxs(Text, { size: "sm", color: "muted", children: ["Liked by ", _jsx(Span, { weight: "medium", children: summarise(likers, totalCount) })] }), (hasMore || totalCount > likers.length) && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setOpen(true), children: "View all" }))] }), _jsx(Modal, { isOpen: open, onClose: () => setOpen(false), title: `Liked by ${totalCount}`, children: _jsxs(Stack, { gap: "sm", children: [all.map((l) => (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Avatar, { size: "sm", src: l.photoURL, name: l.displayName, alt: l.displayName }), _jsx(Text, { size: "sm", children: l.displayName })] }, l.uid))), more && loadMore && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleLoadMore, isLoading: loading, children: ["Show ", LIKERS_PAGE_SIZE, " more"] }))] }) })] }));
+}

package/dist/features/events/components/EventTypeBadge.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The event-type chip. Emoji plus a real label, always both.
+ *
+ * 🛑 THE LABEL IS NOT OPTIONAL, and that is the accessibility half of this
+ * component. `EventCard` rendered the type as a bare `aria-hidden` emoji with
+ * no text companion anywhere on the card, so a screen-reader user got no
+ * event type at all; the detail hero rendered the raw enum. Neither surface
+ * could reach the other's map. This is the shared one.
+ *
+ * @tag domain:events
+ * @tag layer:component
+ */
+import React from "react";
+export interface EventTypeBadgeProps {
+    type: string | undefined;
+    /**
+     * Hide the text and keep only the glyph — for a dense card corner where the
+     * label is already rendered nearby.
+     *
+     * 🛑 Even then an `aria-label` carries the real label, so the type is never
+     * lost to a screen reader. A silent emoji is not a badge.
+     */
+    compact?: boolean;
+    className?: string;
+}
+export declare function EventTypeBadge({ type, compact, className }: EventTypeBadgeProps): React.JSX.Element;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Span } from "../../../ui/index.js";
+import { eventTypeMeta } from "../constants/event-type-meta.js";
+export function EventTypeBadge({ type, compact = false, className = "" }) {
+    const meta = eventTypeMeta(type);
+    return (_jsxs(Span, { layout: "inline-flex", align: "center", gap: "xs", padding: "pill-sm", rounded: "full", size: "xs", weight: "semibold", className: `${meta.chipClass} ${className}`, "aria-label": compact ? meta.label : undefined, children: [_jsx(Span, { "aria-hidden": "true", children: meta.emoji }), !compact && meta.label] }));
+}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { eventRepository } from "../../../repositories/index.js";
 import { AdSlot } from "../../homepage/components/AdSlot.js";
-import { Container, Heading, Main, Section } from "../../../ui/index.js";
+import { Container, Main, Section, PageHeroHeading } from "../../../ui/index.js";
 import { EventsIndexListing } from "./EventsIndexListing.js";
 import { EVENT_FIELDS } from "../../../constants/field-names.js";
 import { sieveFilter, sieveMultiEq, sieveAnd, SIEVE_OP } from "../../../utils/sieve-builder.js";
@@ -72,5 +72,5 @@ export async function EventsListPageView({ searchParams = {} }) {
     const publicResult = result
         ? { ...result, items: sortPinnedFirst(hidePublicTestData(result.items)) }
         : result;
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Events" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(EventsIndexListing, { initialData: publicResult, facetCounts: facetCounts }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(PageHeroHeading, { className: "mb-8", pill: "Events & Offers", title: "Events", description: "Sales, spin wheels, raffles and polls \u2014 everything running right now, and what is opening next.", meta: publicResult?.total ? `${publicResult.total} running` : undefined }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(EventsIndexListing, { initialData: publicResult, facetCounts: facetCounts }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }