@mohasinac/appkit 4.59.0 → 4.60.1

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

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
 import { serverLogger } from "../../../monitoring/server-logger.js";
-import { Anchor, Avatar, Badge, Div, Heading, Row, Section, Span, Stack, Text, TextLink } from "../../../ui/index.js";
+import { ProseHero } from "./ProseHero.js";
+// `Section` dropped — `ProseHero` owns the banner now and this view had no
+// other use for it.
+import { Anchor, Avatar, Badge, Div, Heading, Row, Span, Stack, Text, TextLink } from "../../../ui/index.js";
 import { ROUTES } from "../../../constants/index.js";
 import { PAGE_CONTAINER } from "../../../_internal/shared/styles/page.js";
 import { siteSettingsRepository } from "../../../repositories/index.js";
@@ -30,5 +33,5 @@ export async function DeveloperView({ labels = {} }) {
         });
     }
     const developers = teamMembers.filter((m) => m.isDeveloper);
-    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: labels.title ?? "Meet the Developer" }), _jsx(Text, { color: "inverse", variant: "none", className: "/80", size: "sm", children: labels.subtitle ?? "The person building LetItRip, one feature at a time." })] }) }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [developers.length === 0 ? (_jsx(Text, { variant: "secondary", children: labels.empty ?? "Developer profile coming soon." })) : (_jsx(Stack, { gap: "xl", children: developers.map((dev) => (_jsxs(Stack, { gap: "md", surface: "default", padding: "lg", rounded: "xl", border: "default", children: [_jsxs(Row, { gap: "md", align: "center", children: [_jsx(Avatar, { src: dev.photoUrl, name: dev.name, alt: dev.name, size: "lg" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, children: dev.name }), _jsxs(Row, { gap: "xs", wrap: true, children: [_jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: dev.role }), dev.isFounder && _jsx(Badge, { variant: "primary", size: "xs", children: "Founder" }), _jsx(Badge, { variant: "secondary", size: "xs", children: "Developer" })] })] })] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", children: dev.bio }), dev.githubUrl && (_jsx(Anchor, { href: dev.githubUrl, tone: "brand", size: "sm", underline: "hover", children: "GitHub \u2197" }))] }, dev.name))) })), milestones.length > 0 && (_jsxs(Div, { className: "mt-14 border-t", border: "default", padding: "t-xl", children: [_jsx(Heading, { level: 3, className: "mb-6", color: "muted", size: "sm", weight: "semibold", transform: "uppercase", children: labels.journeyTitle ?? "The Journey" }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 max-w-2xl pl-[2rem]", gap: "lg", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 bg-primary border-2 border-white", rounded: "full" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] })), _jsx(Div, { className: "mt-10", children: _jsx(TextLink, { href: String(ROUTES.PUBLIC.ABOUT), variant: "muted", size: "sm", children: labels.backToTeam ?? "← Meet the whole team" }) })] })] }));
+    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: labels.title ?? "Meet the Developer", subtitle: labels.subtitle ?? "The person building LetItRip, one feature at a time." }), _jsxs(Div, { className: `${page.container.sm}`, padding: "content-banner", children: [developers.length === 0 ? (_jsx(Text, { variant: "secondary", children: labels.empty ?? "Developer profile coming soon." })) : (_jsx(Stack, { gap: "xl", children: developers.map((dev) => (_jsxs(Stack, { gap: "md", surface: "default", padding: "lg", rounded: "xl", border: "default", children: [_jsxs(Row, { gap: "md", align: "center", children: [_jsx(Avatar, { src: dev.photoUrl, name: dev.name, alt: dev.name, size: "lg" }), _jsxs(Stack, { gap: "xs", children: [_jsx(Heading, { level: 2, children: dev.name }), _jsxs(Row, { gap: "xs", wrap: true, children: [_jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: dev.role }), dev.isFounder && _jsx(Badge, { variant: "primary", size: "xs", children: "Founder" }), _jsx(Badge, { variant: "secondary", size: "xs", children: "Developer" })] })] })] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", children: dev.bio }), dev.githubUrl && (_jsx(Anchor, { href: dev.githubUrl, tone: "brand", size: "sm", underline: "hover", children: "GitHub \u2197" }))] }, dev.name))) })), milestones.length > 0 && (_jsxs(Div, { className: "mt-14 border-t", border: "default", padding: "t-xl", children: [_jsx(Heading, { level: 3, className: "mb-6", color: "muted", size: "sm", weight: "semibold", transform: "uppercase", children: labels.journeyTitle ?? "The Journey" }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 max-w-2xl pl-[2rem]", gap: "lg", children: milestones.map(({ year, text }) => (_jsxs(Div, { className: "relative", children: [_jsx(Div, { className: "absolute -left-10 top-1 w-4 h-4 bg-primary border-2 border-white", rounded: "full" }), _jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: year }), _jsx(Text, { className: "mt-1", children: text })] }, year))) })] })), _jsx(Div, { className: "mt-10", children: _jsx(TextLink, { href: String(ROUTES.PUBLIC.ABOUT), variant: "muted", size: "sm", children: labels.backToTeam ?? "← Meet the whole team" }) })] })] }));
 }

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ROUTES } from "../../../constants/index.js";
+import { ProseHero } from "./ProseHero.js";
 import { FLEX_ROW } from "../../../_internal/shared/styles/themed.js";
 import { Aside, Container, Div, Heading, Nav, Row, Section, Span, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
@@ -25,7 +26,7 @@ export async function FAQPageView({ category, faqs = [], } = {}) {
         : [];
     const visibleFaqs = (category ? faqs.filter((f) => f.category === category) : faqs).map(toDisplayFaq);
     const activeCategory = categories.find((c) => c.slug === category);
-    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(Container, { size: "md", className: "text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-3", children: activeCategory ? activeCategory.label : t("title") }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsx(Container, { size: "md", padding: "content-banner", children: _jsxs(Stack, { direction: "md-row", gap: "xl", children: [categories.length > 0 && (_jsxs(Aside, { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "uppercase tracking-wide mb-3", color: "muted", size: "sm", weight: "semibold", children: t("categoriesLabel") }), _jsxs(Nav, { "aria-label": "FAQ categories", spacing: "xs", children: [_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQS), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: !category ? "semibold" : undefined, className: `transition-colors ${!category ? "bg-primary/10 text-primary" : "hover:bg-surface-hover"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: category === cat.slug ? "semibold" : undefined, className: `transition-colors ${category === cat.slug ? "bg-primary/10 text-primary" : "hover:bg-surface-hover"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(Span, { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleFaqs.length === 0 ? (_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "y-4xl", children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-[var(--appkit-color-text-muted)]" }), _jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("emptyText") })] })) : (_jsx(FAQSearchableList, { faqs: visibleFaqs, labels: {
+    return (_jsxs(Div, { className: "-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10", children: [_jsx(ProseHero, { title: activeCategory ? activeCategory.label : t("title"), subtitle: t("subtitle") }), _jsx(Container, { size: "md", padding: "content-banner", children: _jsxs(Stack, { direction: "md-row", gap: "xl", children: [categories.length > 0 && (_jsxs(Aside, { className: "md:w-56 flex-shrink-0", children: [_jsx(Heading, { level: 3, className: "uppercase tracking-wide mb-3", color: "muted", size: "sm", weight: "semibold", children: t("categoriesLabel") }), _jsxs(Nav, { "aria-label": "FAQ categories", spacing: "xs", children: [_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQS), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: !category ? "semibold" : undefined, className: `transition-colors ${!category ? "bg-primary/10 text-primary" : "hover:bg-surface-hover"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(HelpCircle, { className: "w-4 h-4" }), t("allCategories")] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }), categories.map((cat) => (_jsxs(TextLink, { rounded: "lg", href: String(ROUTES.PUBLIC.FAQ_CATEGORY(cat.slug)), paddingX: "sm", paddingY: "xs", layout: "flex", align: "center", justify: "between", weight: category === cat.slug ? "semibold" : undefined, className: `transition-colors ${category === cat.slug ? "bg-primary/10 text-primary" : "hover:bg-surface-hover"}`, size: "sm", children: [_jsxs(Span, { className: `${flex.row}`, gap: "md", children: [_jsx(Span, { children: cat.icon }), cat.label] }), _jsx(ChevronRight, { className: "w-3.5 h-3.5 opacity-50" })] }, cat.slug)))] })] })), _jsxs(Div, { className: "flex-1 min-w-0", children: [visibleFaqs.length === 0 ? (_jsxs(Section, { className: `text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "y-4xl", children: [_jsx(HelpCircle, { className: "w-10 h-10 mx-auto mb-3 text-zinc-300 dark:text-[var(--appkit-color-text-muted)]" }), _jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("emptyTitle") }), _jsx(Text, { variant: "secondary", size: "sm", children: t("emptyText") })] })) : (_jsx(FAQSearchableList, { faqs: visibleFaqs, labels: {
                                         searchPlaceholder: t("searchPlaceholder"),
                                         noResults: t("searchNoResults"),
                                     } })), _jsxs(Section, { className: `mt-10 text-center`, border: "default", surface: "subtle", rounded: "2xl", padding: "lg", children: [_jsx(Heading, { level: 3, className: "mb-2", size: "base", children: t("stillNeedHelpTitle") }), _jsx(Text, { variant: "secondary", className: "mb-4", size: "sm", children: t("stillNeedHelpText") }), _jsxs(Row, { align: "center", justify: "center", gap: "md", wrap: true, children: [_jsx(TextLink, { href: String(ROUTES.PUBLIC.HELP), children: t("helpCenter") }), _jsx(TextLink, { href: String(ROUTES.PUBLIC.CONTACT), variant: "muted", children: t("contactUs") })] })] })] })] }) })] }));

package/dist/features/about/components/FeesView.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 { THEMED_BG_PRIMARY, THEMED_BG_SECONDARY } from "../../../_internal/shared/styles/themed.js";
 import { Caption, Div, Heading, Row, Section, Stack, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../../ui/index.js";
 const __P = {
@@ -86,7 +87,7 @@ export async function FeesView({} = {}) {
         { label: t("netPayoutLabel"), example: "= ₹917.40", highlight: true },
     ];
     void ROUTES; // ROUTES imported for future CTA links if needed
-    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 max-w-2xl mx-auto", children: t("subtitle") })] }) }), _jsxs(Stack, { gap: "section", className: `${page.container.sm}`, padding: "content-banner", children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(t, themed)] })] }));
+    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"), width: "sm" }), _jsxs(Stack, { gap: "section", className: `${page.container.sm}`, padding: "content-banner", children: [renderFeeTableSection(t, themed, FEE_ROWS), renderPayoutExampleSection(t, themed, OFFER_PAYOUT_ROWS), renderDisclaimerSection(t, themed)] })] }));
 }
 function renderFeeTableSection(t, themed, rows) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("tableTitle") }), _jsx(Div, { className: `${__O.xAuto}`, border: "default", rounded: "xl", children: _jsxs(Table, { size: "sm", children: [_jsx(Thead, { className: themed.bgSecondary, children: _jsxs(Tr, { children: [_jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colFeeType") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colRate") }), _jsx(Th, { className: "text-left", padding: "md", weight: "semibold", children: t("colPaidBy") }), _jsx(Th, { className: "text-left hidden md:table-cell", padding: "md", weight: "semibold", children: t("colNote") })] }) }), _jsx(Tbody, { className: "divide-y divide-neutral-100 divide-[var(--appkit-color-border)]", children: rows.map((row) => (_jsxs(Tr, { className: `${themed.bgPrimary} hover:bg-surface-hover`, children: [_jsx(Td, { weight: "medium", padding: "md", children: row.category }), _jsx(Td, { className: CLS_RATE_CELL, children: row.rate }), _jsx(Td, { padding: "md", children: _jsx(Caption, { children: row.who }) }), _jsx(Td, { className: "text-[var(--appkit-color-text-muted)] hidden md:table-cell", padding: "md", size: "xs", children: row.note })] }, row.category))) })] }) }), _jsx(Caption, { className: "mt-3 block", color: "muted", children: t("tableNote") })] }));

package/dist/features/about/components/HelpPageView.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 { FLEX_ROW } from "../../../_internal/shared/styles/themed.js";
 import { Alert, Div, Heading, Row, Section, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
@@ -64,7 +65,7 @@ export async function HelpPageView({} = {}) {
             iconColor: "text-rose-600 dark:text-rose-400",
         },
     ];
-    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: [renderTopicsGrid(t, flex, TOPICS), renderScamAwarenessAlert(t), renderTrackOrderSection(t), renderContactCtaSection(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: [renderTopicsGrid(t, flex, TOPICS), renderScamAwarenessAlert(t), renderTrackOrderSection(t), renderContactCtaSection(t)] })] }));
 }
 function renderTopicsGrid(t, flex, topics) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", align: "center", children: t("browseTopics") }), _jsx(Div, { layout: "grid", gap: "4", className: "sm:grid-cols-2 lg:grid-cols-3", children: topics.map(({ icon: Icon, title, desc, href, color, iconColor }) => (_jsxs(TextLink, { rounded: "xl", href: href, shadow: "hover-md", className: `group border p-[1.25rem] transition ${color} no-underline`, 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}` }) }), _jsxs(Div, { layout: "flex", justify: "between", align: "start", className: flex.row, children: [_jsxs(Div, { children: [_jsx(Text, { className: "mb-1", weight: "semibold", children: title }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: desc })] }), _jsx(ChevronRight, { className: "w-4 h-4 mt-1 flex-shrink-0 opacity-40 group-hover:opacity-80 transition-opacity" })] })] }, href))) })] }));

package/dist/features/about/components/HowAuctionsWorkView.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 { Gavel, Clock, Trophy, CreditCard } from "lucide-react";
@@ -86,7 +87,7 @@ export async function HowAuctionsWorkView({} = {}) {
             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: [renderAuctionStepsSection(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 }) }), renderAuctionInfoCardsSection(INFO_CARDS), renderAuctionCtaSection(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: [renderAuctionStepsSection(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 }) }), renderAuctionInfoCardsSection(INFO_CARDS), renderAuctionCtaSection(t)] })] }));
 }
 function renderAuctionStepsSection(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", textSize: "xl", 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/HowCheckoutWorksView.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 { Wallet, Smartphone, Banknote, CalendarClock } from "lucide-react";
@@ -86,7 +87,7 @@ export async function HowCheckoutWorksView({} = {}) {
             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: [renderCheckoutStepsSection(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 }) }), renderPaymentMethodsSection(t, PAYMENT_METHODS), renderCheckoutCtaSection(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: [renderCheckoutStepsSection(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 }) }), renderPaymentMethodsSection(t, PAYMENT_METHODS), renderCheckoutCtaSection(t)] })] }));
 }
 function renderCheckoutStepsSection(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/HowEmiWorksView.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 { THEMED_BG_PRIMARY, THEMED_BG_SECONDARY } from "../../../_internal/shared/styles/themed.js";
 import { Alert, Caption, Div, FlowDiagram, Heading, Row, Section, Stack, Table, Tbody, Td, Text, Th, Thead, Tr } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
@@ -98,7 +99,7 @@ export async function HowEmiWorksView({} = {}) {
             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: [renderEligibilityAlert(t), renderEmiSteps(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 }) }), renderEmiInfoCards(INFO_CARDS), renderEmiExample(t, themed, EXAMPLE_ROWS), renderEmiCta(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: [renderEligibilityAlert(t), renderEmiSteps(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 }) }), renderEmiInfoCards(INFO_CARDS), renderEmiExample(t, themed, EXAMPLE_ROWS), renderEmiCta(t)] })] }));
 }
 function renderEligibilityAlert(t) {
     return (_jsx(Alert, { variant: "info", title: t("eligibilityTitle"), children: t("eligibilityText") }));

package/dist/features/about/components/HowOffersWorkView.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, Li, Row, Section, Span, Stack, Text, Ul } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
 const __P = {
@@ -58,7 +59,7 @@ export async function HowOffersWorkView({} = {}) {
             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: [renderOffersStepsSection(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 }) }), renderOffersRulesSection(t, RULES), renderOffersCtaSection(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: [renderOffersStepsSection(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 }) }), renderOffersRulesSection(t, RULES), renderOffersCtaSection(t)] })] }));
 }
 function renderOffersStepsSection(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/HowOrdersWorkView.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, Span, Stack, Text } from "../../../ui/index.js";
 import { TextLink } from "../../../ui/index.js";
 import { PackageSearch, MapPinned, FileText, XCircle } from "lucide-react";
@@ -131,7 +132,7 @@ export async function HowOrdersWorkView({} = {}) {
             desc: t("diagramStep6Desc"),
         },
     ];
-    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: [renderOrderStatusesSection(t, ORDER_STATUSES), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOrderInfoCardsSection(INFO_CARDS), renderOrdersCtaSection(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: [renderOrderStatusesSection(t, ORDER_STATUSES), _jsx(Section, { children: _jsx(FlowDiagram, { title: `📦 ${t("diagramTitle")}`, titleClass: "text-primary", connectorClass: "bg-primary/20 dark:bg-primary/30", steps: DIAGRAM_STEPS, centered: true }) }), renderOrderInfoCardsSection(INFO_CARDS), renderOrdersCtaSection(t)] })] }));
 }
 function renderOrderStatusesSection(t, statuses) {
     return (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-6", children: t("statusesTitle") }), _jsx(Stack, { gap: "3", children: statuses.map(({ status, icon, badge, desc }) => (_jsxs(Row, { className: `${__P.p4}`, border: "default", surface: "muted", align: "start", gap: "md", rounded: "xl", children: [_jsxs(Row, { align: "center", gap: "sm", className: "flex-shrink-0 pt-[0.125rem]", children: [_jsx(Span, { size: "xl", children: icon }), _jsx(Span, { size: "xs", weight: "semibold", className: `${badge}`, rounded: "full", padding: "pill-xs", children: status })] }), _jsx(Text, { variant: "secondary", className: "leading-relaxed", size: "sm", children: desc })] }, status))) })] }));

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);
 }