@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/features/about/components/HowPayoutsWorkView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
+import { ProseHero } from "./ProseHero.js";
 import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
 import { DollarSign, Calendar, Banknote, ShieldCheck } from "lucide-react";
@@ -86,7 +87,7 @@ export async function HowPayoutsWorkView({} = {}) {
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderPayoutsStepsSection(t, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPayoutsInfoCardsSection(INFO_CARDS), renderPayoutsCtaSection(t)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: t("title"), subtitle: t("subtitle") }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderPayoutsStepsSection(t, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `💸 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPayoutsInfoCardsSection(INFO_CARDS), renderPayoutsCtaSection(t)] })] }));
 }
 function renderPayoutsStepsSection(t, steps) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));

package/dist/features/about/components/HowPreOrdersWorkView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
+import { ProseHero } from "./ProseHero.js";
 import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
 import { Package, Clock, Banknote, AlertCircle } from "lucide-react";
@@ -86,7 +87,7 @@ export async function HowPreOrdersWorkView({} = {}) {
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderPreOrdersStepsSection(t, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPreOrdersInfoCardsSection(INFO_CARDS), renderPreOrdersCtaSection(t)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: t("title"), subtitle: t("subtitle") }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderPreOrdersStepsSection(t, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📋 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderPreOrdersInfoCardsSection(INFO_CARDS), renderPreOrdersCtaSection(t)] })] }));
 }
 function renderPreOrdersStepsSection(t, steps) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));

package/dist/features/about/components/HowReviewsWorkView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
+import { ProseHero } from "./ProseHero.js";
 import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
 import { ShieldCheck, ThumbsUp, Pencil } from "lucide-react";
@@ -71,7 +72,7 @@ export async function HowReviewsWorkView({} = {}) {
             desc: t("diagramStep4Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderReviewsStepsSection(t, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `⭐ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderReviewsInfoCardsSection(INFO_CARDS), renderReviewsCtaSection(t)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: t("title"), subtitle: t("subtitle") }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [renderReviewsStepsSection(t, STEPS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `⭐ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderReviewsInfoCardsSection(INFO_CARDS), renderReviewsCtaSection(t)] })] }));
 }
 function renderReviewsStepsSection(t, steps) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-8", align: "center", children: t("stepsTitle") }), _jsx(Stack, { gap: "5", children: steps.map(({ number, icon, title, text }) => (_jsxs(Row, { className: `${__P.p5}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `flex-shrink-0 w-10 h-10 bg-primary/10 dark:bg-primary/15`, rounded: "full", children: icon }), _jsxs(Div, { children: [_jsxs(Text, { className: "mb-0.5", weight: "semibold", children: [number, ". ", title] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] })] }, number))) })] }));

package/dist/features/about/components/PolicyPageView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
 import { serverLogger } from "../../../monitoring/server-logger.js";
+import { ProseHero } from "./ProseHero.js";
 import { Row } from "@mohasinac/appkit/ui";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
@@ -103,7 +104,7 @@ export async function PolicyPageView({ policy, children, }) {
         label: t(POLICY_META[key].relatedLabelKey),
         href: POLICY_META[key].path,
     }));
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-3", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80", size: "sm", children: t("lastUpdated") })] }) }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [adminHtml ? (
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", centered: false, subtitleSize: "sm", title: t("title"), subtitle: t("lastUpdated") }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [adminHtml ? (
                     /* Admin-set HTML takes priority */
                     _jsx(Div, { className: "prose max-w-none", dangerouslySetInnerHTML: { __html: adminHtml } })) : (_jsxs(_Fragment, { children: [t.has("intro") && (_jsx(Text, { variant: "secondary", className: "mb-10 leading-relaxed", size: "base", children: t("intro") })), _jsx(Stack, { gap: "xl", children: sections.map((section, i) => (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-3", children: section.heading }), _jsx(Text, { variant: "secondary", className: "leading-relaxed whitespace-pre-line", children: section.body })] }, i))) }), children] })), relatedLinks.length > 0 && (_jsxs(Div, { className: `mt-14 border-t`, border: "default", padding: "t-xl", children: [_jsx(Heading, { level: 3, className: "mb-3 uppercase tracking-wide", color: "muted", size: "sm", weight: "semibold", children: t("relatedTitle") }), _jsx(Row, { wrap: true, gap: "md", children: relatedLinks.map((l) => (_jsx(TextLink, { href: l.href, variant: "muted", size: "sm", children: l.label }, l.href))) })] }))] })] }));
 }

package/dist/features/about/components/ProseHero.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+/**
+ * The banner at the top of every prose page.
+ *
+ * ── WHAT THIS REPLACES ──────────────────────────────────────────────────────
+ *
+ * Sixteen views under `features/about/` opened with the same four-line block,
+ * and TEN of them were byte-identical:
+ *
+ *   <Section color="inverse" tone="accent-banner" padding="banner">
+ *     <Div className={`${page.container.md} text-center`}>
+ *       <Heading color="inverse" level={1} variant="none" className="mb-4">…
+ *       <Text color="inverse-muted" variant="none" className="max-w-2xl mx-auto">…
+ *
+ * The other six differed in exactly three dimensions — container width,
+ * whether the text is centred, and `mb-3` versus `mb-4`.
+ *
+ * (My first count said eleven. The md5 list had ten entries; recounting is
+ * cheaper than trusting the number I wrote down — the same lesson as the
+ * staged list that had 24 hand-typed entries against a rule's 23.)
+ *
+ * 🛑 THE `mb-3`/`mb-4` SPLIT IS DRIFT, NOT A DECISION. Nothing distinguishes
+ * the pages that got one from the pages that got the other; it is the same
+ * shape as the required-marker spacing that differed between `FormField` and
+ * the three `Field*` wrappers (four copies of five lines, one of which had
+ * been edited). This component picks one — `mb-4`, the majority — and the
+ * gap stops being a coincidence held in sixteen places.
+ *
+ * ── WHY A COMPONENT AND NOT A SHARED LAYOUT ────────────────────────────────
+ *
+ * The plan asked for "a shared article layout" across the ~45 prose pages.
+ * This is the part of that which is genuinely shared: the hero. Below it the
+ * sixteen views diverge completely — `FeesView` renders a commission table,
+ * `TrackOrderView` a form, `FAQPageView` a filtered accordion — so a wrapper
+ * owning the whole page would be a slot-shell with one render prop per page
+ * and nothing in common but the banner. That is the duplication framework's
+ * "different domain semantics" case; the banner is its "same prop surface"
+ * one.
+ *
+ * @tag domain:about
+ * @tag layer:feature
+ * @tag access:isomorphic
+ */
+export interface ProseHeroProps {
+    title: React.ReactNode;
+    /** Omitted on the pages whose banner is a title alone. */
+    subtitle?: React.ReactNode;
+    /**
+     * Reading measure. `md` (`max-w-4xl`) is the default and what the eleven
+     * identical callers used; `sm` (`max-w-3xl`) is the narrower policy/blog
+     * measure the rest chose.
+     */
+    width?: "sm" | "md" | "lg";
+    /**
+     * 🛑 `true` by default, because most of the sixteen centre their banner
+     * and a default that matches the majority is the one that gets reviewed.
+     * Pass `false` for the two that deliberately left it ranged left.
+     */
+    centered?: boolean;
+    /**
+     * Subtitle scale.
+     *
+     * 🛑 TWO REAL CASES, not a styling knob. The ten identical callers use the
+     * default because their subtitle is a SENTENCE explaining the page. The
+     * policy pages use `sm` because theirs is a "Last updated 14 March 2026"
+     * line — metadata, not prose, and at body size it competes with the heading
+     * it sits under. Anything beyond these two is drift waiting to happen.
+     */
+    subtitleSize?: "sm" | "base";
+    /** Extra content inside the banner — a form, a filter row, a CTA. */
+    children?: React.ReactNode;
+}
+export declare function ProseHero({ title, subtitle, width, centered, subtitleSize, children, }: ProseHeroProps): React.JSX.Element;

package/dist/features/about/components/ProseHero.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div, Heading, Section, Text } from "../../../ui/index.js";
+import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
+export function ProseHero({ title, subtitle, width = "md", centered = true, subtitleSize = "base", children, }) {
+    return (_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: [PAGE_CONTAINER[width], centered ? "text-center" : ""]
+                .filter(Boolean)
+                .join(" "), children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: title }), subtitle && (_jsx(Text, { color: "inverse-muted", variant: "none", size: subtitleSize, 
+                    /*
+                     * 🛑 `mx-auto` ONLY WHEN CENTRED. Left in unconditionally it
+                     * centres the subtitle's own block inside a left-ranged banner —
+                     * so on the three policy pages the heading sat left and its
+                     * "Last updated …" line drifted toward the middle, which reads as
+                     * a mistake rather than a layout. The original callers never hit
+                     * this because the ranged-left ones had no `max-w`/`mx-auto` at
+                     * all; collapsing them into one component is what surfaced it.
+                     */
+                    className: centered ? "max-w-2xl mx-auto" : "max-w-2xl", children: subtitle })), children] }) }));
+}

package/dist/features/about/components/SecurityPrivacyView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
+import { ProseHero } from "./ProseHero.js";
 import { Div, FlowDiagram, Heading, Row, Section, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
 import { Shield, Lock, Search, Globe, Database, KeyRound, FileText, Upload, ShieldCheck, Scale, } from "lucide-react";
@@ -121,7 +122,7 @@ export async function SecurityPrivacyView({} = {}) {
             desc: t("diagramStep5Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.md} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", size: "sm", align: "center", children: t("lastUpdated") }), renderSecurityCtaSection(t)] })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: t("title"), subtitle: t("subtitle") }), _jsxs(Stack, { gap: "14", className: `${page.container.md}`, padding: "content-banner", children: [_jsxs(Section, { className: "text-center", children: [_jsx(Heading, { level: 2, className: "mb-3", children: t("overviewTitle") }), _jsx(Text, { variant: "secondary", className: "max-w-2xl mx-auto", children: t("overviewText") })] }), renderSecurityCardsSection(SECTIONS), _jsx(Section, { children: _jsx(FlowDiagram, { title: `🛡️ ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), _jsx(Text, { variant: "secondary", size: "sm", align: "center", children: t("lastUpdated") }), renderSecurityCtaSection(t)] })] }));
 }
 function renderSecurityCardsSection(cards) {
     return (_jsx(Section, { children: _jsx(Div, { layout: "grid", gap: "5", className: "md:grid-cols-2", children: cards.map(({ icon: Icon, title, text, color, iconColor }) => (_jsxs(Div, { className: `border ${__P.p5} ${color}`, rounded: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-10 h-10 mb-3`, surface: "default", rounded: "lg", children: _jsx(Icon, { className: `w-5 h-5 ${iconColor}` }) }), _jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: text })] }, title))) }) }));

package/dist/features/about/components/ShippingPolicyView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
 import { serverLogger } from "../../../monitoring/server-logger.js";
+import { ProseHero } from "./ProseHero.js";
 import { siteSettingsRepository } from "../../../repositories/index.js";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
@@ -87,7 +88,7 @@ export async function ShippingPolicyView({} = {}) {
             desc: t("diagramStatus5Desc"),
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-3", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80", children: t("lastUpdated") })] }) }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [adminHtml ? (
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", centered: false, subtitleSize: "sm", title: t("title"), subtitle: t("lastUpdated") }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [adminHtml ? (
                     /*
                       Admin-set HTML replaces the WHOLE body — subtitle, sections,
                       diagram and contact block — matching PolicyPageView's behaviour

package/dist/features/about/components/TrackOrderView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Row } from "@mohasinac/appkit/ui";
 import { ROUTES } from "../../../constants/index.js";
+import { ProseHero } from "./ProseHero.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
 import { THEMED_BG_PRIMARY, THEMED_BG_SECONDARY, THEMED_BORDER, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY, } from "../../../_internal/shared/styles/themed.js";
 import { Caption, Div, Grid, Heading, Section, Stack, Text } from "../../../ui/index.js";
@@ -47,5 +48,5 @@ export async function TrackOrderView({} = {}) {
             bg: "bg-emerald-100 dark:bg-emerald-900/40",
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { color: "inverse", tone: "accent-banner", padding: "banner", children: _jsxs(Div, { className: `${page.container.sm} text-center`, children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80", children: t("subtitle") })] }) }), _jsx(Div, { className: page.container.md, padding: "y-4xl", children: _jsxs(Stack, { gap: "hero", children: [_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-16 h-16 bg-primary/10 dark:bg-primary/15 mx-auto mb-4`, rounded: "full", children: _jsx(ShoppingBag, { className: "w-8 h-8 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", children: t("signInPrompt") }), _jsxs(Stack, { direction: "sm-row", justify: "center", className: "mt-6", gap: "3", children: [_jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.AUTH.LOGIN), className: `bg-primary hover:bg-primary/90 text-white transition-colors`, weight: "medium", children: t("signIn") }), _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.USER.ORDERS), className: `${themed.bgPrimary} border ${themed.border} ${themed.textPrimary} hover:opacity-80 transition-opacity`, weight: "medium", children: t("viewOrders") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: t("howItWorksTitle") }), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", gap: "lg", children: STEPS.map(({ icon: Icon, title, text, color, bg }, index) => (_jsxs(Div, { rounded: "xl", padding: "lg", className: `${themed.bgSecondary} border ${themed.border} relative`, children: [_jsx(Caption, { className: "absolute top-4 right-4", weight: "bold", children: String(index + 1).padStart(2, "0") }), _jsx(Row, { align: "center", justify: "center", className: `w-12 h-12 ${bg} mb-4`, rounded: "xl", children: _jsx(Icon, { className: `w-6 h-6 ${color}` }) }), _jsx(Heading, { level: 3, className: "mb-2", children: title }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { layout: "flex-sm-row-between", gap: "md", border: "default", surface: "subtle", rounded: "xl", padding: "lg", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: t("needHelpTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("needHelpText") })] }), _jsxs(Row, { gap: "3", className: "flex-shrink-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: `${themed.textSecondary} hover:text-primary underline underline-offset-4 transition-colors`, size: "sm", children: t("helpCenter") }), _jsx(TextLink, { rounded: "lg", paddingX: "md", paddingY: "xs", href: String(ROUTES.PUBLIC.CONTACT), className: "bg-primary hover:bg-primary/90 text-white transition-colors", size: "sm", children: t("contactSupport") })] })] })] }) })] }));
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { width: "sm", title: t("title"), subtitle: t("subtitle") }), _jsx(Div, { className: page.container.md, padding: "y-4xl", children: _jsxs(Stack, { gap: "hero", children: [_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "xl", children: [_jsx(Row, { align: "center", justify: "center", className: `w-16 h-16 bg-primary/10 dark:bg-primary/15 mx-auto mb-4`, rounded: "full", children: _jsx(ShoppingBag, { className: "w-8 h-8 text-primary" }) }), _jsx(Heading, { level: 2, className: "mb-3", children: t("signInPrompt") }), _jsxs(Stack, { direction: "sm-row", justify: "center", className: "mt-6", gap: "3", children: [_jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.AUTH.LOGIN), className: `bg-primary hover:bg-primary/90 text-white transition-colors`, weight: "medium", children: t("signIn") }), _jsx(TextLink, { rounded: "lg", paddingX: "xl", paddingY: "md", layout: "inline-flex", align: "center", justify: "center", gap: "sm", href: String(ROUTES.USER.ORDERS), className: `${themed.bgPrimary} border ${themed.border} ${themed.textPrimary} hover:opacity-80 transition-opacity`, weight: "medium", children: t("viewOrders") })] })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: t("howItWorksTitle") }), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", gap: "lg", children: STEPS.map(({ icon: Icon, title, text, color, bg }, index) => (_jsxs(Div, { rounded: "xl", padding: "lg", className: `${themed.bgSecondary} border ${themed.border} relative`, children: [_jsx(Caption, { className: "absolute top-4 right-4", weight: "bold", children: String(index + 1).padStart(2, "0") }), _jsx(Row, { align: "center", justify: "center", className: `w-12 h-12 ${bg} mb-4`, rounded: "xl", children: _jsx(Icon, { className: `w-6 h-6 ${color}` }) }), _jsx(Heading, { level: 3, className: "mb-2", children: title }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { layout: "flex-sm-row-between", gap: "md", border: "default", surface: "subtle", rounded: "xl", padding: "lg", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: t("needHelpTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("needHelpText") })] }), _jsxs(Row, { gap: "3", className: "flex-shrink-0", children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), className: `${themed.textSecondary} hover:text-primary underline underline-offset-4 transition-colors`, size: "sm", children: t("helpCenter") }), _jsx(TextLink, { rounded: "lg", paddingX: "md", paddingY: "xs", href: String(ROUTES.PUBLIC.CONTACT), className: "bg-primary hover:bg-primary/90 text-white transition-colors", size: "sm", children: t("contactSupport") })] })] })] }) })] }));
 }

package/dist/features/about/components/UnauthorizedView.js

@@ -22,7 +22,7 @@ export async function UnauthorizedView({} = {}) {
             isPrimary: false,
         },
     ];
-    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { padding: "y-5xl", color: "inverse", layout: "flex-col", align: "center", justify: "center", tone: "accent-banner", className: "min-h-[60vh] text-center", children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Row, { align: "center", justify: "center", className: `w-20 h-20 mx-auto mb-6`, surface: "default", rounded: "2xl", children: _jsx(ShieldAlert, { className: "w-10 h-10 text-white" }) }), _jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", size: "4xl", children: t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-lg mx-auto mb-8", size: "lg", children: t("subtitle") }), _jsx(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: LINKS.map(({ icon: Icon, label, href, isPrimary }) => (_jsx(TextLink, { href: href, className: isPrimary
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(Section, { padding: "y-5xl", color: "inverse", layout: "flex-col", align: "center", justify: "center", tone: "accent-banner", className: "min-h-[60vh] text-center", children: _jsxs(Div, { className: `${page.container.sm}`, children: [_jsx(Row, { align: "center", justify: "center", className: `w-20 h-20 mx-auto mb-6`, surface: "default", rounded: "2xl", children: _jsx(ShieldAlert, { className: "w-10 h-10 text-white" }) }), _jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-4", size: "4xl", children: t("title") }), _jsx(Text, { color: "inverse-muted", variant: "none", className: "max-w-lg mx-auto mb-8", size: "lg", children: t("subtitle") }), _jsx(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: LINKS.map(({ icon: Icon, label, href, isPrimary }) => (_jsx(TextLink, { href: href, className: isPrimary
                                     ? "bg-white text-rose-700 font-semibold px-[var(--appkit-space-6)] py-[var(--appkit-space-2-5)] rounded-xl hover:bg-white/90 transition-colors"
                                     : "border border-white/40 text-white px-[var(--appkit-space-6)] py-[var(--appkit-space-2-5)] rounded-xl hover:bg-white/10 transition-colors", children: _jsxs(Span, { layout: "inline-flex", gap: "md", children: [_jsx(Icon, { className: "w-4 h-4" }), label] }) }, href))) })] }) }), _jsx(Div, { className: `${page.container.sm}`, padding: "y-2xl", children: _jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "lg", children: [_jsx(Heading, { level: 2, className: "mb-2", size: "base", children: t("helpTitle") }), _jsx(Text, { variant: "secondary", className: "mb-3", size: "sm", children: t("helpText") }), _jsxs(Row, { justify: "center", gap: "lg", wrap: true, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), variant: "muted", size: "sm", children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", size: "sm", children: t("contact") })] })] }) })] }));
 }

package/dist/features/about/index.d.ts

@@ -3,6 +3,8 @@ export type { AboutViewProps, AboutHowItem, AboutValueItem, AboutMilestone, Abou
 export type { AboutContentDocument } from "./schemas/firestore";
 export { TrackOrderView } from "./components/TrackOrderView";
 export type { TrackOrderViewProps } from "./components/TrackOrderView";
+export { ProseHero } from "./components/ProseHero";
+export type { ProseHeroProps } from "./components/ProseHero";
 export { FeesView } from "./components/FeesView";
 export type { FeesViewProps } from "./components/FeesView";
 export { SecurityPrivacyView } from "./components/SecurityPrivacyView";

package/dist/features/about/index.js

@@ -1,5 +1,10 @@
 export { AboutView } from "./components/AboutView.js";
 export { TrackOrderView } from "./components/TrackOrderView.js";
+/*
+ * The shared prose-page banner. Exported because it is the one thing all
+ * sixteen views in this feature had in common — ten of them byte-identically.
+ */
+export { ProseHero } from "./components/ProseHero.js";
 export { FeesView } from "./components/FeesView.js";
 export { SecurityPrivacyView } from "./components/SecurityPrivacyView.js";
 export { ShippingPolicyView } from "./components/ShippingPolicyView.js";

package/dist/features/account/actions/address-actions.d.ts

@@ -1,7 +1,31 @@
-import type { AddressCreateInput, AddressDocument, AddressUpdateInput } from "../../addresses/schemas";
+import type { AddressCreateInput, AddressDocument, AddressPlain, AddressUpdateInput } from "../../addresses/schemas";
 export declare function createAddressForUser(userId: string, input: AddressCreateInput): Promise<AddressDocument>;
 export declare function updateAddressForUser(userId: string, addressId: string, input: AddressUpdateInput): Promise<AddressDocument>;
 export declare function deleteAddressForUser(userId: string, addressId: string): Promise<void>;
 export declare function setDefaultAddressForUser(userId: string, addressId: string): Promise<AddressDocument>;
 export declare function listAddressesForUser(userId: string): Promise<AddressDocument[]>;
-export declare function getAddressByIdForUser(userId: string, addressId: string): Promise<AddressDocument | null>;
+/**
+ * One address, for the person who owns it.
+ *
+ * 🛑 RETURNS PLAINTEXT, and the return TYPE says so.
+ *
+ * `AddressesRepository.mapDoc` does not decrypt — the repository is
+ * ciphertext-by-default — so this returned `enc:v1:` blobs for `fullName`,
+ * `phone` and the street lines. Its one caller is a server action that hands
+ * the result straight to the client, so the owner's own saved address
+ * rendered as ciphertext. That is the `/user/addresses` symptom the audit
+ * measured, reached through a second door: the ROUTE was fixed with
+ * `revealAddresss`, this action path was not.
+ *
+ * Revealing belongs HERE rather than at the caller, because this function is
+ * the thing that knows the read is owner-scoped — it refuses any address
+ * whose `ownerId` is not the caller's, three lines down. A caller cannot make
+ * that judgement without repeating the check.
+ *
+ * And the signature is `AddressPlain`, not `AddressDocument`, so the choice
+ * is visible in review and `tsc` enumerates anyone who assumed otherwise —
+ * which is the whole point of the branded-plaintext direction CLAUDE.md
+ * prescribes: the fields are `string` either way, so only the type can say
+ * which.
+ */
+export declare function getAddressByIdForUser(userId: string, addressId: string): Promise<AddressPlain | null>;

package/dist/features/account/actions/address-actions.js

@@ -23,10 +23,34 @@ export async function setDefaultAddressForUser(userId, addressId) {
 export async function listAddressesForUser(userId) {
     return addressesRepository.listByOwner("user", userId);
 }
+/**
+ * One address, for the person who owns it.
+ *
+ * 🛑 RETURNS PLAINTEXT, and the return TYPE says so.
+ *
+ * `AddressesRepository.mapDoc` does not decrypt — the repository is
+ * ciphertext-by-default — so this returned `enc:v1:` blobs for `fullName`,
+ * `phone` and the street lines. Its one caller is a server action that hands
+ * the result straight to the client, so the owner's own saved address
+ * rendered as ciphertext. That is the `/user/addresses` symptom the audit
+ * measured, reached through a second door: the ROUTE was fixed with
+ * `revealAddresss`, this action path was not.
+ *
+ * Revealing belongs HERE rather than at the caller, because this function is
+ * the thing that knows the read is owner-scoped — it refuses any address
+ * whose `ownerId` is not the caller's, three lines down. A caller cannot make
+ * that judgement without repeating the check.
+ *
+ * And the signature is `AddressPlain`, not `AddressDocument`, so the choice
+ * is visible in review and `tsc` enumerates anyone who assumed otherwise —
+ * which is the whole point of the branded-plaintext direction CLAUDE.md
+ * prescribes: the fields are `string` either way, so only the type can say
+ * which.
+ */
 export async function getAddressByIdForUser(userId, addressId) {
     const address = await addressesRepository.findById(addressId);
     if (!address || address.ownerType !== "user" || address.ownerId !== userId) {
         return null;
     }
-    return address;
+    return addressesRepository.revealAddress(address);
 }

package/dist/features/account/components/BuyerShoppingGuideView.js

@@ -25,7 +25,7 @@ const SECTIONS = [
     },
     {
         Icon: CheckCircle, title: "Order Confirmation",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: GC.textMuted, children: "After a successful payment you'll see an on-screen confirmation with your order ID. You'll also receive:" }), _jsxs(Ul, { className: `${GC.listDiscMuted} mt-3`, children: [_jsx(Li, { children: "An email confirmation to your registered address" }), _jsx(Li, { children: "A WhatsApp message if you've added and verified your phone number" })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: ["View all your orders at any time under ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Orders" }), "."] })] })),
+        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: GC.textMuted, children: "After a successful payment you'll see an on-screen confirmation with your order ID. You'll also receive:" }), _jsxs(Ul, { className: `${GC.listDiscMuted} mt-3`, children: [_jsx(Li, { children: "An email confirmation to your registered address" }), _jsx(Li, { children: "An in-app notification you can read any time from the bell in the header" })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: ["View all your orders at any time under ", _jsx(Span, { weight: "bold", children: "My Account \u2192 My Orders" }), "."] })] })),
     },
     {
         Icon: UserX, title: "Guest Limitations",

package/dist/features/account/components/NotificationPreferencesPanel.js

@@ -24,7 +24,7 @@ function ToggleRow({ label, description, checked, onChange, disabled, }) {
 }
 // ─── Section card ───────────────────────────────────────────────────────────
 function SectionCard({ title, children }) {
-    return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, rounded: "xl", children: [_jsx(Div, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-alt,var(--appkit-color-surface))]", padding: "inline", children: _jsx(Text, { className: "tracking-widest text-[var(--appkit-color-text-muted)]", size: "xs", weight: "semibold", transform: "uppercase", children: title }) }), _jsx(Div, { padding: "x-md", children: children })] }));
+    return (_jsxs(Div, { className: `border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] ${__O.hidden}`, rounded: "xl", children: [_jsx(Div, { className: "border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-bg,var(--appkit-color-surface))]", padding: "inline", children: _jsx(Text, { className: "tracking-widest text-[var(--appkit-color-text-muted)]", size: "xs", weight: "semibold", transform: "uppercase", children: title }) }), _jsx(Div, { padding: "x-md", children: children })] }));
 }
 export function NotificationPreferencesPanel({ fetchUrl = ACCOUNT_ENDPOINTS.NOTIFICATION_PREFERENCES, saveUrl = ACCOUNT_ENDPOINTS.NOTIFICATION_PREFERENCES, onSave, }) {
     const { showToast } = useToast();

package/dist/features/account/components/UserOrdersView.js

@@ -50,6 +50,23 @@ const ORDER_LANE_TABS = [
     { id: "standard", label: "Normal" },
     { id: "auction", label: "Auction wins" },
     { id: "offer", label: "Offer wins" },
+    /*
+     * 🛑 `"preorder"` WITHOUT A HYPHEN, and this is not a typo to tidy up.
+     *
+     * `OrderType` (`orders/utils/order-splitter.ts`) spells it `"preorder"`,
+     * while `ListingType` spells the same concept `"pre-order"` WITH a hyphen.
+     * Two unions, two spellings, and the tab must match the one actually stored
+     * on `OrderDocument.orderType` — a tab id matching no stored value returns
+     * zero rows forever with no error anywhere (Root Cause #33), which is
+     * exactly the failure this file's own comment above warns about.
+     *
+     * These two lanes existed in the union and had no tab, so pre-order and
+     * prize-draw orders were reachable only by landing on "All" and scrolling.
+     * Five lanes, four tabs — the eighth instance this session of a
+     * hand-written enumeration drifting from the union it filters.
+     */
+    { id: "preorder", label: "Pre-orders" },
+    { id: "prize-draw", label: "Prize draws" },
 ];
 /**
  * Payment-method tabs — a THIRD axis, independent of the lane tabs above and

package/dist/features/account/components/UserSidebar.js

@@ -97,7 +97,7 @@ export function UserSidebar({ items, groups, mobileOpen = false, onCloseMobile,
     // ── Persistent sidebar variant (desktop left slide-over, mobile bottom-sheet) ──────
     if (variant === "sidebar") {
         const handleToggle = onToggle ?? close;
-        return (_jsxs(_Fragment, { children: [desktopOpen && (_jsx(Div, { surface: "overlay-xs", className: "hidden lg:block fixed inset-0 backdrop-blur-[2px] z-30", onClick: handleToggle, "aria-hidden": "true" })), _jsxs(Div, { className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[13rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "default", className: `flex-1 ${rail.borderClass} dark:border-[var(--appkit-color-border)] ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsx(Span, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: "My Account" }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname }) }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: `hidden lg:flex fixed ${rail.edgeClass} z-40 transition-transform duration-300 top-[var(--header-height,3.5rem)] h-[calc(100vh-var(--header-height,3.5rem))] w-[13rem] ${desktopOpen ? "translate-x-0" : rail.collapsedTranslateClass}`, children: [_jsxs(Stack, { border: "default", surface: "default", className: `flex-1 ${rail.borderClass} dark:border-[var(--appkit-color-border)] ${__O.hidden}`, shadow: "xl", children: [_jsx(Div, { border: "bottom-subtle", paddingY: "y-sm-tall", className: "shrink-0", padding: "x-md", children: _jsx(Span, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: "My Account" }) }), _jsx(Div, { className: `flex-1 ${__O.yAuto}`, children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname }) }), renderFooter && _jsx(Div, { border: "top", padding: "inline", children: renderFooter() })] }), _jsx(SidebarCollapseToggle, { expanded: desktopOpen, onToggle: handleToggle, edge: hand })] }), _jsx(Div, { className: "lg:hidden", children: _jsx(BottomSheet, { open: mobileOpen, onClose: close, title: "My Account", children: _jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }) }) })] }));
     }
     // ── Overlay variant (default) — portal on desktop, bottom-sheet on mobile ─
     const content = (_jsx(DrawerContent, { groups: groups, items: items, activeHref: pathname, onItemClick: close }));

package/dist/features/account/hooks/useNotifications.js

@@ -1,4 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
+import { useOptionalSession } from "../../../react/contexts/SessionContext.js";
 import { apiClient } from "../../../http/index.js";
 import { NOTIFICATIONS_ENDPOINTS } from "../../../constants/api-endpoints.js";
 /**
@@ -10,7 +11,35 @@ export function useNotifications(limit = 10, options) {
     const notificationsEndpoint = options?.notificationsEndpoint ?? NOTIFICATIONS_ENDPOINTS.LIST;
     const readAllEndpoint = options?.readAllEndpoint ?? NOTIFICATIONS_ENDPOINTS.READ_ALL;
     const readEndpoint = options?.readEndpoint ?? NOTIFICATIONS_ENDPOINTS.BY_ID;
+    /*
+     * 🛑 SIGNED-OUT VISITORS WERE POLLING AN AUTH-ONLY ENDPOINT.
+     *
+     * The interval below was tuned carefully and at length — and the query had
+     * no `enabled` gate at all. `TitleBar` mounts this hook on every page, so a
+     * signed-out visitor fetched `/api/notifications` on mount and again every
+     * five minutes per open tab, collecting a 401 each time. That is the
+     * audit's "two 401s fire for signed-out visitors, including a notifications
+     * poll that should not run at all", and signed-out is the majority of
+     * traffic on a public catalogue.
+     *
+     * Every one of those was a billed function invocation (Rule #6) spent
+     * asking for the unread count of nobody.
+     *
+     * `useOptionalSession`, not `useSession`: this hook is library code mounted
+     * in shared chrome, so it must not require a provider — and with no
+     * provider it fails CLOSED, which is the safe direction for a request that
+     * can only 401. Same precedent as `useCanSeePrices`.
+     *
+     * `loading` is deliberately part of the gate. `SessionProvider` mounts
+     * `initialUser={null}` (the root layout must stay static), so `user` is
+     * null on every hard load until Firebase resolves — firing then would 401
+     * for a signed-IN user too, and firing again afterwards would double the
+     * request.
+     */
+    const session = useOptionalSession();
+    const isSignedIn = Boolean(session?.user?.uid) && !session?.loading;
     const { data, isLoading, refetch } = useQuery({
+        enabled: isSignedIn,
         queryKey: ["notifications", "list", String(limit)],
         queryFn: () => apiClient.get(`${notificationsEndpoint}?limit=${limit}`),
         staleTime: NOTIFICATIONS_POLL_MS,

package/dist/features/admin/actions/admin-coupon-actions.js

@@ -7,6 +7,8 @@
 import { couponsRepository } from "../../promotions/repository/coupons.repository.js";
 import { NotFoundError, ValidationError } from "../../../errors/index.js";
 import { serverLogger } from "../../../monitoring/index.js";
+import { normalizeError } from "../../../errors/normalize.js";
+import { claimedCouponsRepository } from "../../promotions/repository/claimed-coupons.repository.js";
 import { recordAdminAction } from "../../../_internal/server/features/audit-log/actions.js";
 import { AdminAuditActionValues } from "../../audit-log/schemas/firestore.js";
 export async function adminCreateCoupon(adminId, input) {
@@ -58,6 +60,40 @@ export async function adminUpdateCoupon(adminId, id, input) {
             : {}),
     };
     const updated = await couponsRepository.update(id, updateData);
+    /*
+     * D59 — re-sync every wallet's denormalised snapshot. Nothing did this, so
+     * `/user/coupons` kept rendering the terms as they were at CLAIM time while
+     * checkout applied the live ones.
+     *
+     * 🛑 Display only, verified: redemption reads the live coupon via
+     * `getCouponByCode`, so the drift never changed what was charged. Fixing it
+     * stops the wallet advertising terms checkout will not honour.
+     *
+     * Best-effort and fire-and-forget: the admin's edit has already committed,
+     * and a failed re-sync must not fail it. The fallback is a stale display —
+     * which is exactly today's behaviour, so the worst case is no regression.
+     */
+    void claimedCouponsRepository
+        .resyncSnapshotsForCoupon(id, {
+        name: updated.name,
+        ...(updated.description ? { description: updated.description } : {}),
+        type: updated.type,
+        scope: updated.scope ?? "admin",
+        ...(updated.storeId ? { storeId: updated.storeId } : {}),
+        discount: updated.discount,
+        restrictions: updated.restrictions,
+    })
+        .then((n) => {
+        if (n > 0)
+            serverLogger.info("adminUpdateCoupon: wallet snapshots re-synced", { couponId: id, wallets: n });
+        if (n === 500) {
+            serverLogger.warn("adminUpdateCoupon: snapshot re-sync hit its 500-wallet bound — later wallets still show stale terms", { couponId: id });
+        }
+    })
+        .catch((err) => {
+        void normalizeError(err);
+        serverLogger.warn("adminUpdateCoupon: wallet snapshot re-sync failed (display only)", { couponId: id });
+    });
     serverLogger.info("adminUpdateCoupon", {
         adminId,
         couponId: id,

package/dist/features/admin/components/AdminBeysView.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AdminBeysView — browse and correct the generated Beyblade database.
  *
@@ -174,5 +174,5 @@ export function AdminBeysView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Beyblades" }), children] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Beyblades" }), _jsx(DataListingView, { config: ADMIN_BEYS_CONFIG })] }));
+    return _jsx(DataListingView, { config: ADMIN_BEYS_CONFIG });
 }

package/dist/features/admin/components/AdminBlogEditorView.js

@@ -207,7 +207,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
                         }, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: values.slug, onChange: (e) => {
                             setSlugManual(true);
                             onChange({ slug: e.target.value });
-                        }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Content" }), _jsx(RichTextEditor, { value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
+                        }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsx(Input, { label: "Excerpt", value: values.excerpt, onChange: (e) => onChange({ excerpt: e.target.value }), placeholder: "Short summary shown in listings and cards" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "muted", children: "Content" }), _jsx(RichTextEditor, { ariaLabel: "Content", value: values.content, onChange: (v) => onChange({ content: v }), placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] })] })),
         },
         {
             id: "media",
@@ -265,7 +265,7 @@ export function AdminBlogEditorView({ postId, onSaved, onDeleted, embedded, ...r
     if (embedded) {
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }
-    const previewSection = (_jsxs(Div, { rounded: "lg", padding: "5", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] max-h-[calc(100vh-12rem)] overflow-y-auto", children: [_jsx(Row, { textSize: "xs", textWeight: "semibold", color: "muted", className: "mb-3 uppercase tracking-wide", align: "center", gap: "sm", children: _jsx(Span, { children: "Live preview" }) }), draft.coverImage ? (_jsx(Div, { className: "relative h-64 w-full mb-4", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: draft.coverImage, alt: "", size: "hero" }) })) : null, _jsx(Heading, { level: 1, className: "mb-1", size: "2xl", weight: "bold", children: draft.title || "Untitled post" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mb-4", size: "xs", children: [draft.authorName || "Anonymous", draft.category ? ` · ${draft.category}` : ""] }), draft.excerpt ? (_jsx(Text, { className: "italic text-[var(--appkit-color-text-secondary)] mb-4", children: draft.excerpt })) : null, _jsx(RichTextRenderer, { html: draft.content || "<em>No content yet…</em>" }), draft.tags.length > 0 ? (_jsx(Row, { wrap: true, gap: "xs", className: "mt-6", children: draft.tags.map((t) => (_jsxs(Span, { size: "xs", className: "bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", children: ["#", t] }, t))) })) : null] }, "preview"));
+    const previewSection = (_jsxs(Div, { rounded: "lg", padding: "5", className: "border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] max-h-[calc(100vh-12rem)] overflow-y-auto", children: [_jsx(Row, { textSize: "xs", textWeight: "semibold", color: "muted", className: "mb-3 uppercase tracking-wide", align: "center", gap: "sm", children: _jsx(Span, { children: "Live preview" }) }), draft.coverImage ? (_jsx(Div, { className: "relative h-64 w-full mb-4", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: draft.coverImage, alt: "", size: "hero" }) })) : null, _jsx(Heading, { level: 1, className: "mb-1", size: "2xl", weight: "bold", children: draft.title || "Untitled post" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)] mb-4", size: "xs", children: [draft.authorName || "Anonymous", draft.category ? ` · ${draft.category}` : ""] }), draft.excerpt ? (_jsx(Text, { className: "italic text-[var(--appkit-color-text-muted)] mb-4", children: draft.excerpt })) : null, _jsx(RichTextRenderer, { html: draft.content || "<em>No content yet…</em>" }), draft.tags.length > 0 ? (_jsx(Row, { wrap: true, gap: "xs", className: "mt-6", children: draft.tags.map((t) => (_jsxs(Span, { size: "xs", className: "bg-[var(--appkit-color-surface)] border border-[var(--appkit-color-border)]", rounded: "full", padding: "pill-xs", children: ["#", t] }, t))) })) : null] }, "preview"));
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Post" : "New Blog Post", sections: [
             _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-[1.5rem]", children: [_jsx(Div, { children: formContent }), _jsx(Div, { className: "mt-6 lg:mt-0 lg:sticky lg:top-4 lg:self-start", children: previewSection })] }, "split"),
         ] }));