@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/constants/seed-meta.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Seed/test PROVENANCE METADATA — the vocabulary, not the data.
+ *
+ * ── 🛑 WHY THIS IS IN `constants/` AND NOT IN `seed/` ─────────────────────
+ *
+ * `appkit/src/seed/` is **61% of this package's source bytes and 60% of the
+ * published dist** — 540 files and 24.6 MB of pure fixture data that no
+ * runtime code reads. It is being extracted into its own package so a purge,
+ * a seed or a reseed stops requiring an appkit release, and so Turbopack stops
+ * tracing a graph through 24 MB of object literals.
+ *
+ * Two things stood in the way, and both were in `seed/` by accident of
+ * history rather than by nature:
+ *
+ *   · `TEST_DATA_TTL_DAYS` / `testDataExpiresAt()` — a job handler re-exports
+ *     them, so the SWEEP that reclaims expired fixtures depended on the
+ *     fixture data shipping alongside it.
+ *   · `SeedPurpose` — `BaseDocument` carries the field, so the base type of
+ *     every document in the system pointed into the seed directory.
+ *
+ * Neither is data. A TTL and a three-value union are metadata ABOUT seeding
+ * that runtime code legitimately reads, so they live with the other shared
+ * constants and `seed/` keeps only rows.
+ *
+ * 🛑 What deliberately did NOT move: `SEED_COLLECTION_PURPOSE`,
+ * `SEED_ROW_PURPOSE` and `SEED_PURPOSE_DERIVED_FROM`. Those name specific
+ * collections and specific seeded ids — they are registries over the data, so
+ * they belong with it, and only `appkit-seed` and `audit-seed-purpose` read
+ * them.
+ */
+/**
+ * The TTL stamp every disposable test fixture must carry.
+ *
+ * 🛑 `isTestData: true` WITHOUT `testDataExpiresAt` means PERMANENT — nothing
+ * ever reclaims it (see `jobs/handlers/_helpers.ts`, which documents the same
+ * rule from the sweep's side). That is not a theoretical hazard: until
+ * 2026-10-10 the only two `isTestData` rows in the whole seed,
+ * `product-tester-crossstore-a` / `-b`, were in exactly that state — live in
+ * the public catalogue of 72 products, never purged, and one of them was
+ * `store-letitrip-official`'s ONLY buyable standard product, so it was hidden
+ * from every real buyer by `hidePublicTestData` while being the only thing
+ * that store had to sell. Both are deleted.
+ *
+ * And the reason they were permanent is that **this module had zero callers**.
+ * The helper that enforces the rule existed, was documented as the rule that
+ * matters most, and no fixture used it. So: a fixture's three obligations are
+ * an id containing `-test-`, `isTestData: true`, and an expiry FROM HERE.
+ *
+ * Recomputed fresh on every seed run (seed files are re-imported per
+ * invocation), so re-seeding naturally refreshes the expiry rather than
+ * leaving a fixture that expired between runs.
+ *
+ * 🛑 Do NOT re-declare the day count elsewhere. It used to be declared twice —
+ * in the seed directory and in `jobs/handlers/messages.ts` — with a comment as
+ * the only thing keeping them equal, which is the drift shape Root Cause #42
+ * describes. `messages.ts` re-exports this one.
+ */
+export declare const TEST_DATA_TTL_DAYS = 7;
+export declare function testDataExpiresAt(): Date;
+/**
+ * Why a seeded row exists — i.e. what a purge is allowed to do with it.
+ *
+ * 🛑 Not a severity scale. Two different answers to one question: never, and
+ * on request.
+ */
+export type SeedPurpose = 
+/**
+ * Clearable test data. **The default**, and what almost everything is.
+ *
+ * Users, stores, listings, auctions, orders, bids, reviews, offers, carts,
+ * payouts — everything seeded to exercise a path rather than to be read as
+ * content. `appkit-seed purge` removes these and nothing else.
+ *
+ * 🛑 `test` says nothing about PUBLIC VISIBILITY. A demo product is `test`
+ * and fully visible; that is what makes the demo a demo. Hiding a row from
+ * the public is `isTestData`, which is a separate decision.
+ */
+"test"
+/**
+ * Real content. **A purge must NEVER remove it**, because re-creating it is
+ * not a re-seed, it is authoring.
+ *
+ * The test to apply: *if clearing this means somebody has to WRITE it again
+ * rather than re-run a loader, it is permanent.*
+ *
+ * That is why the **tester checklist cases** are in here and not in some
+ * harness tier — they are the real catalogue of issues the testers test
+ * against and keep updating, which is authored content that happens to be
+ * about testing. Its 1,500-odd cases are no more disposable than the 85 FAQs.
+ */
+ | "permanent";
+/**
+ * `Record<SeedPurpose, true>`, so a third value is a compile error in every map
+ * keyed on the union rather than a silent gap (Root Cause #61).
+ */
+export declare const SEED_PURPOSE_VALUES: Record<SeedPurpose, true>;
+export declare const ALL_SEED_PURPOSES: SeedPurpose[];
+export declare function isSeedPurpose(value: unknown): value is SeedPurpose;
+/**
+ * 🛑 There is deliberately NO third `fixture` tier.
+ *
+ * An earlier draft had one, meaning "clearable but only by an explicit full
+ * purge", intended for the tester checklist. Once the cases were correctly
+ * classified as permanent content it had **nothing in it** — and a union member
+ * with no members is the dead-enum-value shape this codebase keeps paying for:
+ * a filter chip whose value no row carries returns zero rows forever and reads
+ * as a working control (Root Cause #33), and nine section types that exist in a
+ * dropdown and have never rendered.
+ *
+ * Two values answer the question that was actually asked. If a genuine third
+ * case appears, add it then — with a row that needs it.
+ */
+export declare const PURGEABLE: Record<SeedPurpose, boolean>;

package/dist/constants/seed-meta.js

@@ -0,0 +1,91 @@
+/**
+ * Seed/test PROVENANCE METADATA — the vocabulary, not the data.
+ *
+ * ── 🛑 WHY THIS IS IN `constants/` AND NOT IN `seed/` ─────────────────────
+ *
+ * `appkit/src/seed/` is **61% of this package's source bytes and 60% of the
+ * published dist** — 540 files and 24.6 MB of pure fixture data that no
+ * runtime code reads. It is being extracted into its own package so a purge,
+ * a seed or a reseed stops requiring an appkit release, and so Turbopack stops
+ * tracing a graph through 24 MB of object literals.
+ *
+ * Two things stood in the way, and both were in `seed/` by accident of
+ * history rather than by nature:
+ *
+ *   · `TEST_DATA_TTL_DAYS` / `testDataExpiresAt()` — a job handler re-exports
+ *     them, so the SWEEP that reclaims expired fixtures depended on the
+ *     fixture data shipping alongside it.
+ *   · `SeedPurpose` — `BaseDocument` carries the field, so the base type of
+ *     every document in the system pointed into the seed directory.
+ *
+ * Neither is data. A TTL and a three-value union are metadata ABOUT seeding
+ * that runtime code legitimately reads, so they live with the other shared
+ * constants and `seed/` keeps only rows.
+ *
+ * 🛑 What deliberately did NOT move: `SEED_COLLECTION_PURPOSE`,
+ * `SEED_ROW_PURPOSE` and `SEED_PURPOSE_DERIVED_FROM`. Those name specific
+ * collections and specific seeded ids — they are registries over the data, so
+ * they belong with it, and only `appkit-seed` and `audit-seed-purpose` read
+ * them.
+ */
+/**
+ * The TTL stamp every disposable test fixture must carry.
+ *
+ * 🛑 `isTestData: true` WITHOUT `testDataExpiresAt` means PERMANENT — nothing
+ * ever reclaims it (see `jobs/handlers/_helpers.ts`, which documents the same
+ * rule from the sweep's side). That is not a theoretical hazard: until
+ * 2026-10-10 the only two `isTestData` rows in the whole seed,
+ * `product-tester-crossstore-a` / `-b`, were in exactly that state — live in
+ * the public catalogue of 72 products, never purged, and one of them was
+ * `store-letitrip-official`'s ONLY buyable standard product, so it was hidden
+ * from every real buyer by `hidePublicTestData` while being the only thing
+ * that store had to sell. Both are deleted.
+ *
+ * And the reason they were permanent is that **this module had zero callers**.
+ * The helper that enforces the rule existed, was documented as the rule that
+ * matters most, and no fixture used it. So: a fixture's three obligations are
+ * an id containing `-test-`, `isTestData: true`, and an expiry FROM HERE.
+ *
+ * Recomputed fresh on every seed run (seed files are re-imported per
+ * invocation), so re-seeding naturally refreshes the expiry rather than
+ * leaving a fixture that expired between runs.
+ *
+ * 🛑 Do NOT re-declare the day count elsewhere. It used to be declared twice —
+ * in the seed directory and in `jobs/handlers/messages.ts` — with a comment as
+ * the only thing keeping them equal, which is the drift shape Root Cause #42
+ * describes. `messages.ts` re-exports this one.
+ */
+export const TEST_DATA_TTL_DAYS = 7;
+export function testDataExpiresAt() {
+    return new Date(Date.now() + TEST_DATA_TTL_DAYS * 24 * 60 * 60 * 1000);
+}
+/**
+ * `Record<SeedPurpose, true>`, so a third value is a compile error in every map
+ * keyed on the union rather than a silent gap (Root Cause #61).
+ */
+export const SEED_PURPOSE_VALUES = {
+    test: true,
+    permanent: true,
+};
+export const ALL_SEED_PURPOSES = Object.keys(SEED_PURPOSE_VALUES);
+export function isSeedPurpose(value) {
+    return typeof value === "string" && value in SEED_PURPOSE_VALUES;
+}
+/**
+ * 🛑 There is deliberately NO third `fixture` tier.
+ *
+ * An earlier draft had one, meaning "clearable but only by an explicit full
+ * purge", intended for the tester checklist. Once the cases were correctly
+ * classified as permanent content it had **nothing in it** — and a union member
+ * with no members is the dead-enum-value shape this codebase keeps paying for:
+ * a filter chip whose value no row carries returns zero rows forever and reads
+ * as a working control (Root Cause #33), and nine section types that exist in a
+ * dropdown and have never rendered.
+ *
+ * Two values answer the question that was actually asked. If a genuine third
+ * case appears, add it then — with a row that needs it.
+ */
+export const PURGEABLE = {
+    test: true,
+    permanent: false,
+};

package/dist/contracts/index.d.ts

@@ -2,7 +2,7 @@ export type { WhereOp, SieveQuery, PagedResult, IReadRepository, IWriteRepositor
 export type { AuthPayload, AuthUser, CreateUserInput, IAuthProvider, ISessionProvider, } from "./auth";
 export type { EmailAttachment, EmailOptions, EmailResult, IEmailProvider, } from "./email";
 export type { UploadOptions, StorageFile, IStorageProvider } from "./storage";
-export type { PaymentOrder, PaymentCapture, Refund } from "./payment";
+export type { PaymentOrder, PaymentCapture, Refund, Dispute, GatewayPaymentRecord, } from "./payment";
 export { IPaymentProvider } from "./payment";
 export type { ShippingAddress, CreateShipmentInput, Shipment, TrackingEvent, TrackingInfo, ServiceabilityResult, } from "./shipping";
 export { IShippingProvider } from "./shipping";

package/dist/contracts/payment.d.ts

@@ -36,6 +36,102 @@ export interface Refund {
     reason?: string;
     createdAt: string;
 }
+/**
+ * A chargeback / dispute, normalised at the provider boundary.
+ *
+ * ## Units
+ *
+ * 🛑 `amount` and `amountDeducted` are **decimal rupees**. Razorpay's own
+ * entity reports both in currency SUBUNITS (`RazorpayDispute.amount`), so the
+ * adapter converts with `paiseToRupees` and nothing downstream ever sees the
+ * subunit figure — `audit-money-units` blocks both the raw `/100` and the word
+ * for the subunit in a comment or label.
+ *
+ * 🛑 **This deliberately differs from `Refund` above, which is in SUBUNITS**,
+ * and the inconsistency is real rather than an oversight here: `refund()` takes
+ * `rupeesToPaise(input.amount)` from its one call site and returns
+ * `Number(result.amount)` unconverted. That is pre-existing and is NOT changed
+ * by this type — flipping it would silently alter what every refund consumer
+ * reads, which is the money-unit migration's whole cautionary tale. A new
+ * surface gets the correct convention; an existing one gets a measured
+ * migration or nothing. If you are here because the two look inconsistent:
+ * they are, `Dispute` is the right one, and `Refund` is a separate job.
+ *
+ * 🛑 `respondBy` and `createdAt` are `Date`. Razorpay reports both as **Unix
+ * timestamps in SECONDS**, so `new Date(respond_by)` yields 1970 and reads as
+ * corrupt data rather than as a unit error — the same trap the Vercel token's
+ * `expiresAt` sets. Multiply by 1000 at the boundary, once.
+ *
+ * ## `status` and `phase` are strings, not unions, on purpose
+ *
+ * The SDK declares both as `string` (`disputes.d.ts`), and the value set is
+ * Razorpay's to change. Inventing a union here would mean a real dispute in a
+ * state we did not anticipate either fails a parse or gets asserted into the
+ * wrong member — and a dispute is the one record where being wrong has a
+ * deadline attached. Treat them as opaque, compare against known values where
+ * a decision depends on it, and never exhaustively switch.
+ */
+export interface Dispute {
+    /** The gateway's own dispute id. */
+    id: string;
+    /** The payment this dispute is against — the join key to our orders. */
+    paymentId: string;
+    /** Decimal rupees. */
+    amount: number;
+    currency: string;
+    /** Decimal rupees. What the gateway takes from our balance if we lose. */
+    amountDeducted: number;
+    /** The gateway's reason code, verbatim. */
+    reasonCode: string;
+    /**
+     * The gateway's own deadline for a response. **An external, hard date** — not
+     * an SLA we invented — which is why a `paymentCases` row built from a dispute
+     * takes its `dueAt` from here and from nowhere else.
+     */
+    respondBy: Date;
+    /** Opaque — see the docstring. */
+    status: string;
+    /** Opaque — see the docstring. */
+    phase: string;
+    createdAt: Date;
+    /** The provider's short name, so a mixed-gateway queue stays attributable. */
+    gateway: string;
+}
+/**
+ * One payment as the GATEWAY sees it — the input to reconciliation.
+ *
+ * 🛑 This type exists so a reconciler can compare the gateway's view against
+ * ours **in the direction that needs no trust in our own code.** Every other
+ * check in this system starts from our records and asks whether they are
+ * consistent; this one starts from the gateway's and asks whether we have an
+ * order at all. That is the only direction that could have detected the
+ * 2026-10-21 incident, where our side had nothing to be inconsistent with.
+ *
+ * `amount`, `amountRefunded` — decimal rupees, converted at the boundary.
+ * `capturedAt` — a Date; the gateway reports Unix SECONDS.
+ */
+export interface GatewayPaymentRecord {
+    /** The gateway's payment id. */
+    id: string;
+    /** The gateway's order id, when the payment is attached to one. */
+    orderId?: string;
+    /** Decimal rupees. */
+    amount: number;
+    currency: string;
+    /**
+     * The gateway's own status string, verbatim and opaque. Razorpay uses
+     * `created | authorized | captured | refunded | failed`; treat anything
+     * unrecognised as "not captured", which fails toward not drawing a
+     * conclusion.
+     */
+    status: string;
+    /** Decimal rupees already refunded against this payment, per the gateway. */
+    amountRefunded: number;
+    /** `null` | `partial` | `full`, as the gateway reports it. */
+    refundStatus?: string;
+    capturedAt?: Date;
+    gateway: string;
+}
 /**
  * Payment gateway adapter contract. An abstract base class rather than a
  * plain interface so every provider (manual, PhonePe, and any future
@@ -53,4 +149,39 @@ export declare abstract class IPaymentProvider {
     abstract capturePayment(orderId: string): Promise<PaymentCapture>;
     abstract refund(paymentId: string, amount?: number): Promise<Refund>;
     abstract getOrder(orderId: string): Promise<PaymentOrder>;
+    /**
+     * Every payment the gateway recorded in a window — the reconciliation feed.
+     *
+     * 🛑 A provider that cannot enumerate payments returns `[]`, and the caller
+     * MUST treat an empty list as "no information", never as "no payments".
+     * Concluding "nothing is missing" from a provider that cannot answer is the
+     * false-clean a reconciler exists to avoid.
+     */
+    abstract listPayments(opts: {
+        from: Date;
+        to: Date;
+        limit?: number;
+    }): Promise<GatewayPaymentRecord[]>;
+    /** Fetch one dispute by the gateway's id. */
+    abstract getDispute(disputeId: string): Promise<Dispute>;
+    /**
+     * Every dispute the gateway knows about.
+     *
+     * 🛑 A gateway with no dispute concept returns `[]`, and that is the CORRECT
+     * documented answer rather than a silent degrade: "this provider cannot have
+     * chargebacks" is a true statement about manual bank transfers, not a
+     * swallowed failure. `audit-silent-degrade` draws that line, and the
+     * difference is that an empty array here is a fact while a `.catch(() => [])`
+     * would be a guess.
+     */
+    abstract listDisputes(): Promise<Dispute[]>;
+    /**
+     * Accept liability. **Irreversible** — the gateway debits us and the dispute
+     * is closed in the buyer's favour.
+     *
+     * `confirmIrrevocable` is a required literal `true`, so the call cannot be
+     * made by a caller who has not read what it does; a boolean parameter that
+     * could be `false` would be a flag, and this is a gate.
+     */
+    abstract acceptDispute(disputeId: string, confirmIrrevocable: true): Promise<Dispute>;
 }

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor, Avatar, Badge, Card, Div, Heading, Row, Section, Span, Stack, Text, TextLink } from "../../../ui/index.js";
 import { ROUTES } from "../../../constants/index.js";
 export function AboutView({ labels = {}, howItems = [], valueItems = [], milestones = [], teamMembers = [], ctaBannerClass = "", renderCtaButtons, }) {
-    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: "y-4xl", children: _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-6", mdSize: "5xl", size: "4xl", weight: "bold", children: labels.title }), _jsx(Text, { color: "inverse", variant: "none", className: "/80 max-w-2xl mx-auto", size: "xl", children: labels.subtitle })] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-5xl mx-auto", padding: "y-4xl", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3", gap: "6", children: howItems.map(({ title, text, icon, tone }) => (_jsxs(Card, { variant: `gradient-${tone ?? "indigo"}`, padding: "md", spacing: "sm", children: [_jsx(Div, { children: _jsx(Span, { size: "4xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: labels.valuesSubtitle ? "mb-3" : "mb-12", align: "center", children: labels.valuesTitle }), labels.valuesSubtitle && (_jsx(Text, { size: "base", variant: "secondary", align: "center", className: "mb-12 max-w-2xl mx-auto leading-relaxed", children: labels.valuesSubtitle })), _jsx(Div, { className: "grid md:grid-cols-3", gap: "5", children: valueItems.map(({ title, text, icon, detail }) => (_jsxs(Stack, { gap: "3", surface: "default", padding: "lg", rounded: "xl", border: "default", children: [_jsx(Div, { children: _jsx(Span, { size: "3xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text }), detail && (_jsx(Text, { size: "sm", color: "muted", className: "leading-relaxed", children: detail }))] }, title))) }), labels.valuesLinkLabel && (_jsx(Div, { className: "mt-8 text-center", children: _jsx(TextLink, { href: String(ROUTES.PUBLIC.ETHICS), size: "sm", children: labels.valuesLinkLabel }) }))] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: labels.milestonesTitle }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 max-w-2xl mx-auto pl-[2rem]", gap: "xl", 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))) })] }), teamMembers.length > 0 && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-2", align: "center", children: labels.teamTitle }), labels.teamSubtitle && (_jsx(Text, { size: "lg", variant: "secondary", align: "center", className: "mb-12 max-w-2xl mx-auto", children: labels.teamSubtitle })), _jsx(Div, { className: "grid md:grid-cols-3", gap: "6", children: teamMembers.map((member) => (_jsxs(Stack, { gap: "3", surface: "default", padding: "lg", rounded: "xl", border: "default", align: "center", className: "text-center", children: [_jsx(Avatar, { src: member.photoUrl, name: member.name, alt: member.name, size: "lg" }), _jsx(Heading, { level: 3, children: member.name }), _jsxs(Row, { gap: "xs", wrap: true, justify: "center", children: [_jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: member.role }), member.isFounder && _jsx(Badge, { variant: "primary", size: "xs", children: "Founder" }), member.isDeveloper && _jsx(Badge, { variant: "secondary", size: "xs", children: "Developer" })] }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: member.bio }), member.githubUrl && (_jsx(Anchor, { href: member.githubUrl, tone: "muted", size: "sm", underline: "hover", children: "GitHub \u2197" }))] }, member.name))) })] })), _jsxs(Section, { color: "inverse", tone: "accent-banner", className: `text-center ${ctaBannerClass}`, padding: "xl", rounded: "2xl", children: [_jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "mb-8", size: "3xl", weight: "bold", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { color: "inverse", size: "sm", className: "/70", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
+    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: "y-4xl", children: _jsxs(Div, { paddingX: "x-page", className: "max-w-4xl mx-auto text-center", children: [_jsx(Heading, { color: "inverse", level: 1, variant: "none", className: "mb-6", mdSize: "5xl", size: "4xl", weight: "bold", children: labels.title }), _jsx(Text, { color: "inverse-muted", variant: "none", className: "max-w-2xl mx-auto", size: "xl", children: labels.subtitle })] }) }), _jsxs(Div, { paddingX: "x-page", className: "max-w-5xl mx-auto", padding: "y-4xl", children: [_jsxs(Section, { className: "text-center max-w-3xl mx-auto", children: [_jsx(Heading, { level: 2, className: "mb-4", children: labels.missionTitle }), _jsx(Text, { size: "lg", variant: "secondary", className: "leading-relaxed", children: labels.missionText })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-12", align: "center", children: labels.howItWorksTitle }), _jsx(Div, { className: "grid md:grid-cols-3", gap: "6", children: howItems.map(({ title, text, icon, tone }) => (_jsxs(Card, { variant: `gradient-${tone ?? "indigo"}`, padding: "md", spacing: "sm", children: [_jsx(Div, { children: _jsx(Span, { size: "4xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text })] }, title))) })] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: labels.valuesSubtitle ? "mb-3" : "mb-12", align: "center", children: labels.valuesTitle }), labels.valuesSubtitle && (_jsx(Text, { size: "base", variant: "secondary", align: "center", className: "mb-12 max-w-2xl mx-auto leading-relaxed", children: labels.valuesSubtitle })), _jsx(Div, { className: "grid md:grid-cols-3", gap: "5", children: valueItems.map(({ title, text, icon, detail }) => (_jsxs(Stack, { gap: "3", surface: "default", padding: "lg", rounded: "xl", border: "default", children: [_jsx(Div, { children: _jsx(Span, { size: "3xl", children: icon }) }), _jsx(Heading, { level: 3, children: title }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: text }), detail && (_jsx(Text, { size: "sm", color: "muted", className: "leading-relaxed", children: detail }))] }, title))) }), labels.valuesLinkLabel && (_jsx(Div, { className: "mt-8 text-center", children: _jsx(TextLink, { href: String(ROUTES.PUBLIC.ETHICS), size: "sm", children: labels.valuesLinkLabel }) }))] }), _jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-10", align: "center", children: labels.milestonesTitle }), _jsx(Stack, { className: "relative border-l-2 border-primary/30 max-w-2xl mx-auto pl-[2rem]", gap: "xl", 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))) })] }), teamMembers.length > 0 && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "mb-2", align: "center", children: labels.teamTitle }), labels.teamSubtitle && (_jsx(Text, { size: "lg", variant: "secondary", align: "center", className: "mb-12 max-w-2xl mx-auto", children: labels.teamSubtitle })), _jsx(Div, { className: "grid md:grid-cols-3", gap: "6", children: teamMembers.map((member) => (_jsxs(Stack, { gap: "3", surface: "default", padding: "lg", rounded: "xl", border: "default", align: "center", className: "text-center", children: [_jsx(Avatar, { src: member.photoUrl, name: member.name, alt: member.name, size: "lg" }), _jsx(Heading, { level: 3, children: member.name }), _jsxs(Row, { gap: "xs", wrap: true, justify: "center", children: [_jsx(Span, { size: "xs", weight: "bold", className: "text-primary tracking-wide", transform: "uppercase", children: member.role }), member.isFounder && _jsx(Badge, { variant: "primary", size: "xs", children: "Founder" }), member.isDeveloper && _jsx(Badge, { variant: "secondary", size: "xs", children: "Developer" })] }), _jsx(Text, { size: "sm", variant: "secondary", className: "leading-relaxed", children: member.bio }), member.githubUrl && (_jsx(Anchor, { href: member.githubUrl, tone: "muted", size: "sm", underline: "hover", children: "GitHub \u2197" }))] }, member.name))) })] })), _jsxs(Section, { color: "inverse", tone: "accent-banner", className: `text-center ${ctaBannerClass}`, padding: "xl", rounded: "2xl", children: [_jsx(Heading, { color: "inverse", level: 2, variant: "none", className: "mb-8", size: "3xl", weight: "bold", children: labels.ctaTitle }), renderCtaButtons ? (renderCtaButtons()) : (_jsx(Row, { justify: "center", gap: "3", wrap: true, children: _jsxs(Span, { color: "inverse-muted", size: "sm", children: [labels.ctaSell, " \u00B7 ", labels.ctaShop] }) }))] })] })] }));
 }

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