@encorekit/web-sdk 1.1.21 → 2.0.1

package/types/ui/OfferCarousel.d.ts

@@ -12,6 +12,39 @@ export interface OfferCarouselOptions {
      * carousel at every breakpoint, with chevron nav bubbles.
      */
     mode?: 'responsive' | 'paged';
+    /**
+     * Suppress the carousel's own title/subtitle header block entirely (reward
+     * composition — see Encore.ts's `#runOfferFlow`). The carousel's header exists to
+     * carry paywall-flavored copy (a titleText/customHeadline default, or the hardcoded
+     * "Unlock 10 free articles…" fallback when neither is configured) or the thankYou
+     * layout's offerContext priming pair — reward has neither: its own headline already
+     * renders in the reward chrome above this carousel, and the modal's
+     * accessible name is already pointed at THAT title (see THANKYOU_TITLE_ID), so
+     * hiding this header is a11y-safe, not just visually tidier.
+     */
+    hideHeader?: boolean;
+    /**
+     * SELECTION MODE (reward composition). Turns the carousel from "N self-contained
+     * offer tiles, each with its own Claim" into "a list you pick ONE offer from",
+     * matching `streaksCarousel.json`'s `autoSelectFirstOffer` + `selectOffer` model
+     * that iOS and Android already render. Three things change:
+     *
+     *   - Cards lose their per-card Claim button (see OfferCardOptions.selectable) and
+     *     become selection targets. The host drives the claim via `claimSelected()`.
+     *   - The prev/next chevrons are replaced by a compact dot page indicator, the
+     *     variant's `compactPageIndicator`.
+     *   - The cards container becomes a real `role="listbox"`.
+     *
+     * SELECTION HAS EXACTLY ONE SOURCE: `#currentIndex`. Paging IS selecting and
+     * selecting IS paging — the centered card is the selected card, always. This is
+     * deliberate: iOS shipped a version where the CTA's offer and the carousel's
+     * position were two independent pieces of state, they diverged, and `claimOffer`
+     * silently dropped a nil offer (EncoreKit/swift#106). One index cannot diverge
+     * from itself.
+     *
+     * Off by default, so the churn-intervention and thankYou carousels are untouched.
+     */
+    selectable?: boolean;
 }
 interface CarouselEventMap extends Record<string, unknown> {
     offerClaim: {
@@ -25,9 +58,31 @@ interface CarouselEventMap extends Record<string, unknown> {
         offer: Offer;
         index: number;
     };
+    /**
+     * The user moved to a different card, by any means (gesture, arrows, keyboard).
+     * Distinct from `offerView`, which is an IMPRESSION and stays deduped to
+     * once-per-index-per-rest: this is the navigation itself, so a user paging
+     * 0→1→0 produces three scrolls and two impressions. `axis` is a real dimension
+     * on web — the same carousel is horizontal on desktop and a vertical list on
+     * mobile — and is what `sdk_sdui_scroll` reports.
+     */
+    scroll: {
+        axis: 'horizontal' | 'vertical';
+        position: number;
+    };
     complete: {
         claimed: boolean;
     };
+    /**
+     * The selected offer changed (selection mode only). A STATE notification, not an
+     * analytics event — it exists so the sheet's single CTA can name what it will
+     * claim. It fires once at mount for the auto-selected first offer, which is what
+     * makes the CTA correct before the user touches anything.
+     */
+    offerSelect: {
+        offer: Offer;
+        index: number;
+    };
 }
 export declare class OfferCarousel {
     #private;
@@ -54,6 +109,32 @@ export declare class OfferCarousel {
      * scroll as an effect. The highlight is not touched — it follows the motion.
      */
     next(): void;
+    /**
+     * The offer the sheet's single CTA acts on. In selection mode this is the
+     * centered/selected card; elsewhere it is simply the current one. Never
+     * undefined for a rendered carousel (the constructor rejects an empty list),
+     * but typed honestly so callers cannot assume.
+     */
+    getSelectedOffer(): Offer | undefined;
+    /**
+     * Claim the SELECTED offer — the reward sheet's one bottom CTA (the variant's
+     * `claimOffer` action).
+     *
+     * It emits the SAME `offerClaim` event a per-card Claim button emits, on purpose:
+     * every downstream guarantee (transaction creation and its `transactionId`, the
+     * `use_case` stamp on claim analytics, the synchronous advertiser-window open that
+     * survives mobile popup blockers, the deferred/immediate branch) lives in that one
+     * handler in Encore.ts. Routing the new CTA through it means reward inherits all of
+     * it rather than growing a second, drifting claim path.
+     */
+    claimSelected(): void;
+    /**
+     * Select the offer at `index` — the variant's `selectOffer` action, reached by
+     * tapping a card or by arrowing within the listbox. A user INTENT, so it follows
+     * exactly the same path as next()/previous(): commit domain state, render the
+     * semantic view, then run the scroll as an effect.
+     */
+    selectOffer(index: number): void;
     /**
      * Navigate to previous offer — see next().
      */

package/types/ui/OfferCarousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OfferCarousel.d.ts","sourceRoot":"","sources":["../../src/ui/OfferCarousel.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAMhD,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CAC/B;AAED,UAAU,gBAAiB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxD,UAAU,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,SAAS,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,QAAQ,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;CAChC;AAED,qBAAa,aAAa;;gBAgDZ,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,oBAAoB;IAcvF;;OAEG;IACH,MAAM,IAAI,WAAW;IAgLrB;;OAEG;IACH,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACjC,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,GAC9C,MAAM,IAAI;IAIb;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;OAEG;IACH,cAAc,IAAI,MAAM;IAIxB;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAUZ;;OAEG;IACH,QAAQ,IAAI,IAAI;IA+YhB;;OAEG;IACH,OAAO,IAAI,IAAI;CAqBhB"}
+{"version":3,"file":"OfferCarousel.d.ts","sourceRoot":"","sources":["../../src/ui/OfferCarousel.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;IAC9B;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAQD,UAAU,gBAAiB,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxD,UAAU,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,SAAS,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C;;;;;;;OAOG;IACH,MAAM,EAAE;QAAE,IAAI,EAAE,YAAY,GAAG,UAAU,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,QAAQ,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/B;;;;;OAKG;IACH,WAAW,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,qBAAa,aAAa;;gBAkEZ,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,oBAAoB;IAiBvF;;OAEG;IACH,MAAM,IAAI,WAAW;IA8PrB;;OAEG;IACH,EAAE,CAAC,CAAC,SAAS,MAAM,gBAAgB,EACjC,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,GAC9C,MAAM,IAAI;IAIb;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;OAEG;IACH,cAAc,IAAI,MAAM;IAIxB;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAUZ;;;;;OAKG;IACH,gBAAgB,IAAI,KAAK,GAAG,SAAS;IAIrC;;;;;;;;;;OAUG;IACH,aAAa,IAAI,IAAI;IASrB;;;;;OAKG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAiBhC;;OAEG;IACH,QAAQ,IAAI,IAAI;IAqnBhB;;OAEG;IACH,OAAO,IAAI,IAAI;CA2BhB"}

package/types/ui/RewardActions.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Reward action block — the bottom of the post-action-reward sheet.
+ *
+ * Trust line, then a two-button CTA stack: ONE primary that claims the SELECTED
+ * offer, and a secondary that dismisses. This is the interaction model
+ * `streaksCarousel.json` describes and that iOS and Android already render; web
+ * previously put a Claim button on every card and offered no explicit decline.
+ *
+ * NOT a renderer. Every value below is read off the variant and hard-coded here —
+ * web has no SDUI engine, and the variant JSON is a design spec this file tracks by
+ * hand, never something the SDK parses:
+ *
+ *   trust line   14 / regular, onBackground @ 0.55, 2-line clamp
+ *   primary      "Claim gift", 16 / bold, onAccent on accent, radius 12, 16px y-padding
+ *   secondary    "No thanks",  16 / medium, muted, 1px border, radius 12, 14px y-padding
+ *   stack        vStack spacing 8, inside a group of spacing 12, 20px gutters
+ *
+ * Callbacks rather than an EventEmitter: there are exactly two, both fire at most
+ * once per sheet, and neither has a second subscriber. The emitter would be
+ * ceremony around a pair of function calls.
+ */
+/** Copy the variant hard-codes. Named so the tests can assert parity by symbol. */
+export declare const REWARD_COPY: {
+    readonly trust: "No charges until trial ends, cancel anytime.";
+    readonly primary: "Claim gift";
+    readonly secondary: "No thanks";
+};
+export interface RewardActionsOptions {
+    /** Claim the selected offer (the variant's `claimOffer` action). */
+    onClaim: () => void;
+    /** Dismiss the sheet (the variant's `close` action). */
+    onDecline: () => void;
+    /**
+     * Overrides the default trust line. Present so a publisher whose reward is not a
+     * free trial is not stuck asserting "No charges until trial ends" — the default
+     * is the variant's copy, not a universal truth.
+     */
+    trustText?: string;
+}
+export declare class RewardActions {
+    #private;
+    constructor(options: RewardActionsOptions);
+    render(): HTMLElement;
+    /**
+     * Name the offer the CTA will claim.
+     *
+     * "Claim gift" alone is ambiguous the moment there is more than one card on
+     * screen and no per-card button left to disambiguate — a screen-reader user
+     * arrowing the listbox has no way to tell what the single bottom button now acts
+     * on. The visible label stays exactly "Claim gift" (the variant's copy, and what
+     * a sighted user reads), and the accessible name EXTENDS it rather than replacing
+     * it, which is what WCAG 2.5.3 Label in Name requires.
+     *
+     * Falls back to removing the label entirely — never to a half-built sentence —
+     * when the offer has no advertiser name, so the button is announced by its text.
+     */
+    setSelectedOffer(advertiserName?: string): void;
+    destroy(): void;
+}
+//# sourceMappingURL=RewardActions.d.ts.map

package/types/ui/RewardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardActions.d.ts","sourceRoot":"","sources":["../../src/ui/RewardActions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,mFAAmF;AACnF,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wDAAwD;IACxD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,aAAa;;gBAaZ,OAAO,EAAE,oBAAoB;IAIzC,MAAM,IAAI,WAAW;IAmCrB;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAe/C,OAAO,IAAI,IAAI;CAKhB"}

package/types/ui/RewardCard.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Reward offer card — the tile the Figma's `streaksCarousel` hero shows.
+ *
+ * A DIFFERENT card from `OfferCard`, not a variant of it. OfferCard is a wide banner
+ * image over a merchant row with its own Claim button; this is a 210×260 portrait
+ * tile — pill, icon, advertiser, offer line — centred on a wash of the advertiser's
+ * colour. They share no element, so expressing this as more flags on OfferCard would
+ * have meant a component that renders two unrelated layouts and a churn-intervention
+ * card one boolean away from the reward one. Separate file, separate class names:
+ * the churn path cannot reach a single line of this.
+ *
+ * NOT a renderer. Web has no SDUI engine; every value below is read off the Figma by
+ * hand (frame 18304:2399, node 18304:3383) and tracked here:
+ *
+ *   card      210×260, radius 24, tint@10% over white
+ *             shadow 0 4px 12px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.02),
+ *                    0 4px 74px rgba(0,0,0,.06)
+ *   pill      top 43, white, radius 16, pad 4/10, 14 / medium
+ *   icon      top 84, 72×72, radius 18
+ *   name      top 176, 18 / semibold, tracking -0.18
+ *   offer     top 201, 14 / regular, tracking -0.28
+ *
+ * The Figma's Audible orange is NOT hardcoded — offers are remote and arbitrary. See
+ * `brandTint.ts` for how the wash is derived per offer.
+ */
+import type { OfferModel as Offer } from '../api/models';
+/**
+ * Copy the card hard-codes, mirroring `RewardActions`' REWARD_COPY.
+ *
+ * The badge is SDK-owned rather than per-offer because no field carries it: the
+ * contract has no badge/category on `Creative`, and the Figma's own cards disagree
+ * with each other (a "Free 30 days trial" pill above a "50% discount for 3 month"
+ * line). It is overridable for the same reason the trust line is — a publisher whose
+ * reward is not a trial must not be stuck asserting one.
+ */
+export declare const REWARD_CARD_COPY: {
+    readonly badge: "Free trial";
+};
+export interface RewardCardOptions {
+    /** Overrides the badge pill. Blank/absent keeps the variant's copy. */
+    badgeText?: string;
+}
+export declare class RewardCard {
+    #private;
+    constructor(options?: RewardCardOptions);
+    render(offer: Offer): HTMLElement;
+    destroy(): void;
+}
+//# sourceMappingURL=RewardCard.d.ts.map

package/types/ui/RewardCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardCard.d.ts","sourceRoot":"","sources":["../../src/ui/RewardCard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,UAAU,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;CAEnB,CAAC;AAEX,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBAAa,UAAU;;gBAMT,OAAO,GAAE,iBAAsB;IAI3C,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW;IA2GjC,OAAO,IAAI,IAAI;CAKhB"}

package/types/ui/RewardConfetti.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Reward confetti — the variant's celebration layer.
+ *
+ * `streaksCarousel.json` opens the sheet with a `confetti` burst that web never had:
+ *
+ *   intensity 22   particle count
+ *   duration  2.0  seconds, then the layer removes itself
+ *   originY   0.0  emitted from the TOP edge, falling down
+ *   scatter   46   horizontal spread, in points, around each particle's origin
+ *   scatterHeight 0.3  origins spread over the top 30% of the sheet
+ *   style     maxWidth/maxHeight infinity, ignoresSafeArea — full-bleed
+ *
+ * Hand-rolled on a single 2D canvas: the SDK ships zero runtime dependencies, and a
+ * confetti library would be several KB for 22 rectangles falling for two seconds.
+ *
+ * Purely decorative and entirely optional. It is `aria-hidden`, it takes no pointer
+ * events, it is skipped outright under `prefers-reduced-motion`, and every entry
+ * point is guarded — an environment without a 2D context (jsdom, a locked-down
+ * browser) simply gets no confetti rather than an exception on a host page.
+ */
+/** The variant's values, named so tests can assert parity by symbol. */
+export declare const CONFETTI_SPEC: {
+    readonly intensity: 22;
+    readonly durationMs: 2000;
+    readonly originY: 0;
+    readonly scatter: 46;
+    readonly scatterHeight: 0.3;
+};
+export declare class RewardConfetti {
+    #private;
+    /**
+     * True when the burst should be skipped entirely.
+     *
+     * `prefers-reduced-motion` is a hard skip, not a slowdown: falling confetti is
+     * exactly the large-area motion the setting exists to suppress, and the sheet
+     * loses nothing functional without it.
+     */
+    static shouldSkip(): boolean;
+    /**
+     * Mount the burst inside `host` and start it. Returns silently if confetti cannot
+     * run; the caller never has to branch.
+     */
+    start(host: HTMLElement): void;
+    destroy(): void;
+}
+//# sourceMappingURL=RewardConfetti.d.ts.map

package/types/ui/RewardConfetti.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardConfetti.d.ts","sourceRoot":"","sources":["../../src/ui/RewardConfetti.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH,wEAAwE;AACxE,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAkCX,qBAAa,cAAc;;IASzB;;;;;;OAMG;IACH,MAAM,CAAC,UAAU,IAAI,OAAO;IAU5B;;;OAGG;IACH,KAAK,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAmI9B,OAAO,IAAI,IAAI;CAWhB"}

package/types/ui/RewardLayout.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Reward chrome — the composition `useCase: 'rewardUsers'` renders.
+ *
+ * Pure chrome around the unchanged OfferCarousel: a status block (success check +
+ * headline + subheadline) above the offers. A pure render function rather than a
+ * component class: the chrome is static content with no events, no listeners, and no
+ * state — the carousel keeps its own lifecycle and is passed in as a ready element.
+ *
+ * The `thankyou` class names are deliberately UNCHANGED from when this chrome was
+ * also reachable as a publisher-selectable `layout: 'thankYou'` (retired in 3.0.0).
+ * They are internal style hooks, not public API, and renaming them would churn the
+ * whole visual system — including the `--reward` parity rules that track the native
+ * SDKs' `streaksCarousel.json` type scale — for no behavioural gain.
+ */
+/**
+ * The id given to the status heading so the dialog's accessible name can point at
+ * the chrome's real primary heading (the carousel's own header is suppressed in this
+ * composition, so it is not available as a fallback `aria-labelledby` target).
+ */
+export declare const REWARD_TITLE_ID: string;
+export interface RewardLayoutOptions {
+    /** Resolved headline. Required in practice — it is the dialog's accessible name. */
+    title?: string;
+    /** Resolved subheadline. Omitted (never `''`) when nothing resolved. */
+    subtitle?: string;
+    /**
+     * Status icon above the headline. Defaults to `'none'`, matching the native
+     * variant — see `PlacementOptions.statusIcon`. `'success'` opts into a
+     * green-circle check.
+     */
+    statusIcon?: 'success' | 'none';
+    /**
+     * A ready-built action block placed directly under the carousel — the trust line
+     * and the single bottom CTA pair (see RewardActions). The variant puts the CTA
+     * stack last in the sheet, and nothing renders below it there.
+     *
+     * An ELEMENT, not a config object, on purpose: this module is a pure render
+     * function with no events, no listeners and no state, and the action block is all
+     * three. Taking it pre-built keeps the ownership boundary — RewardActions owns its
+     * listeners and its teardown; this function only positions it.
+     */
+    actions?: HTMLElement;
+}
+/**
+ * Compose the reward sheet: status (optional check → title → subtitle) → carousel.
+ *
+ * All host-supplied copy is set via textContent (text-only, injection-safe).
+ *
+ * The check is OPT-IN (`statusIcon: 'success'`) and off by default, matching the
+ * native reward variant, which renders no checkmark at all. It is `aria-hidden`
+ * either way, so its presence never affects the dialog's accessible name — that
+ * always comes from the title below.
+ */
+export declare function renderRewardLayout(carouselElement: HTMLElement, options?: RewardLayoutOptions): HTMLElement;
+//# sourceMappingURL=RewardLayout.d.ts.map

package/types/ui/RewardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RewardLayout.d.ts","sourceRoot":"","sources":["../../src/ui/RewardLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAAwB,CAAC;AAErD,MAAM,WAAW,mBAAmB;IAClC,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAChC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAQD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAChC,eAAe,EAAE,WAAW,EAC5B,OAAO,GAAE,mBAAwB,GAChC,WAAW,CA8Cb"}

package/types/ui/ThankYouLayout.d.ts

@@ -26,6 +26,17 @@ export interface ThankYouLayoutOptions {
     footer?: PlacementFooterConfig;
     /** Per-transaction receipt — owns the subtitle slot when provided. */
     receipt?: Receipt;
+    /**
+     * Marks this as the REWARD composition rather than the payment-status one, adding
+     * the `--reward` modifier so the parity styles can be scoped to it.
+     *
+     * The two share this chrome but are not the same screen. `thankYou` confirms a
+     * payment the user just made; reward celebrates an action and offers a gift, and
+     * on the native SDKs it is a full-screen surface with its own type scale (see
+     * `streaksCarousel.json`). Keeping the modifier off by default means every
+     * existing `thankYou` render stays byte-identical.
+     */
+    reward?: boolean;
 }
 /**
  * Compose the thankYou sheet: status (check → title → subtitle) → carousel → footer.

package/types/ui/ThankYouLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThankYouLayout.d.ts","sourceRoot":"","sources":["../../src/ui/ThankYouLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,OAAO,EACR,MAAM,UAAU,CAAC;AAOlB;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAwB,CAAC;AAEvD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,eAAe,CAO7D;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAqCD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,eAAe,EAAE,WAAW,EAC5B,OAAO,GAAE,qBAA0B,GAClC,WAAW,CAkDb"}
+{"version":3,"file":"ThankYouLayout.d.ts","sourceRoot":"","sources":["../../src/ui/ThankYouLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EACV,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,OAAO,EACR,MAAM,UAAU,CAAC;AAOlB;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAwB,CAAC;AAEvD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,eAAe,CAO7D;AAED,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAqCD;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,eAAe,EAAE,WAAW,EAC5B,OAAO,GAAE,qBAA0B,GAClC,WAAW,CAkDb"}

package/types/ui/brandTint.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Per-offer brand tint for the reward card.
+ *
+ * The Figma renders each card on a wash of the advertiser's own colour — Audible's
+ * card is `rgba(255,159,43,0.1)` over white. `streaksCarousel.json` binds that as
+ * `offerDominantColor`.
+ *
+ * THERE IS NO API FIELD BEHIND THAT BINDING, on any platform. iOS and Android compute
+ * it from the logo at render time; the contract carries no colour on `Creative`,
+ * `Organization` or `Campaign`. So sampling the icon is not a web workaround for a
+ * missing field — it IS the canonical implementation, and this module is web's copy
+ * of it. Native's rule, verbatim: *"the dominant color used in the icon that is not
+ * straight black or straight white."*
+ *
+ * Two tiers, and the first one always succeeds. Native is single-tier; web needs the
+ * extra one because it has a failure mode native does not — a cross-origin logo whose
+ * host sends no CORS headers can never be read into a canvas at all.
+ *
+ *   1. `fallbackTint` — synchronous, deterministic, from the offer's identity. Every
+ *      card has a tint from its first frame; a card is never briefly untinted and
+ *      never depends on the network.
+ *   2. `sampleLogoTint` — asynchronous, upgrades tier 1 to the real brand colour when
+ *      the logo is readable. Resolves `null` on ANY failure and never throws.
+ *
+ * Tier 2 needs a CORS-clean image, and `crossOrigin = 'anonymous'` makes a
+ * non-CORS server fail the load OUTRIGHT rather than merely tainting the canvas.
+ * That is why this samples a SEPARATE `Image`, never the one on screen: the card's
+ * own <img> is loaded without `crossOrigin` so it always renders, and a sampling
+ * failure costs a tint upgrade rather than the logo itself.
+ */
+/** How much of the tint the card background gets — the Figma's 0.1 over white. */
+export declare const CARD_TINT_ALPHA = 0.1;
+/**
+ * The synchronous tier. Always returns a usable colour.
+ *
+ * Keyed on the advertiser NAME first so every creative from one advertiser tints
+ * identically — the card shows the advertiser, so two Audible offers reading as two
+ * different brands would be wrong. Falls back through title to id, which are never
+ * both empty.
+ */
+export declare function fallbackTint(seed: string): string;
+/**
+ * Reduce RGBA pixels to the dominant non-black, non-white colour, or `null` when the
+ * image has none.
+ *
+ * Split out from the canvas plumbing and exported so the rule that actually matters —
+ * paper and ink are excluded, greys lose to colour, a monochrome logo yields nothing —
+ * is unit-testable. jsdom has no 2D context, so it is unreachable through
+ * `extractDominantColor` in tests.
+ *
+ * @internal exported for tests only.
+ */
+export declare function dominantColorFromPixels(data: Uint8ClampedArray): string | null;
+/**
+ * Try to read the advertiser's colour off its logo. Resolves `null` on every failure
+ * path — a missing URL, a CORS refusal, a decode error, a timeout, a greyscale logo,
+ * or an environment without canvas. Never rejects and never throws: a tint upgrade is
+ * the least important thing on the sheet, and an SDK must not crash a host page for it.
+ */
+export declare function sampleLogoTint(url: string | undefined): Promise<string | null>;
+//# sourceMappingURL=brandTint.d.ts.map

package/types/ui/brandTint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brandTint.d.ts","sourceRoot":"","sources":["../../src/ui/brandTint.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAIH,kFAAkF;AAClF,eAAO,MAAM,eAAe,MAAM,CAAC;AA2InC;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAGjD;AA4BD;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,GAAG,IAAI,CAuC9E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAmC9E"}

package/types/ui/styles.d.ts

@@ -11,6 +11,92 @@ export declare const BREAKPOINTS: {
     readonly TABLET: "1023px";
     readonly DESKTOP: "1024px";
 };
+/**
+ * REWARD_VISUAL_NOTES — why the reward block in the stylesheet below looks the way
+ * it does. Deliberately a JS comment and NOT a CSS one.
+ *
+ * The stylesheet is one big template literal, so every `/* … *\/` inside it is STRING
+ * CONTENT that terser cannot strip and every user downloads. This file's house style
+ * is long prose; in the literal that prose is payload. Keep in-literal comments to a
+ * terse line or two and put the reasoning here, where it is free. (Trimming this
+ * block's CSS prose cut 3.9KB of raw bundle — it had been 46% of the whole
+ * stylesheet delta.)
+ *
+ * SOURCE OF TRUTH. The interaction model tracks `streaksCarousel.json`; the visuals
+ * track Figma frame 18304:2399 (393×852). Where they disagree the Figma wins — see
+ * the PR for the itemised list. Web has no SDUI engine, so every value is hand-tracked.
+ *
+ * SHEET BACKGROUND, three layers, top-most first:
+ *   1. The Figma's radial glow — a 346px circle of #B728F5 @ 12%, Gaussian-blurred
+ *      (stdDeviation 102), centred at (189, −38), just above the top edge. Rendered
+ *      as a soft radial rather than a real blur: a filter would cost a full-surface
+ *      repaint for what is a completely static wash.
+ *   2. The variant's accent wash — its four stops, 0.14 → 0.05 → 0 → 0.
+ *   3. The variant's base canvas — surface → surface → background → background.
+ *   Layers 2 and 3 are the variant's two stacked full-bleed gradients. Alpha is only
+ *   ever composited against layer 3, never the host page's backdrop: an accent tint
+ *   over an unknown ground is what rendered near-black in night mode (backend #426).
+ *
+ * TEXT COLOUR stays on theme tokens rather than the Figma's #292D32 / #051E34. The
+ * variant's own dark-mode note is explicit that every mode-derived colour must remain
+ * a token, and a hardcoded light-mode hex in a mode-reactive layer is exactly bug
+ * #426/#427. Figma hexes are used only for the brand wash, which is not mode-derived.
+ * The subheadline ships at 0.55 rather than the Figma's 0.50 because the variant
+ * specifies 0.55 for secondary copy to clear WCAG AA at this size — on a contrast
+ * question the variant wins.
+ *
+ * THE NEIGHBOUR TREATMENT IS MEASURED, NOT GUESSED. A neighbour's card body samples
+ * #F9F9F9 against a #F2F2F2 ground, and its icon matches at the same ratio — that is
+ * white at 55%. So it is opacity 0.55 + scale 0.95 + translateY(11px) with NO
+ * grayscale/saturate filter; the "desaturated" look is just opacity over a light
+ * ground. That is also the fast choice: opacity composites on the GPU and holds 60fps
+ * through a drag, where a filter repaints every card every frame.
+ *
+ * CARD BODY is tint@10% over white — measured #FFF5E9 against Audible's #FF9F2B,
+ * exactly white + 10%. The two radial layers add the deeper wash the Figma carries at
+ * the right and bottom edges (its decorative vector), derived from the same tint so
+ * any advertiser colour works. See `brandTint.ts` for where the tint comes from.
+ *
+ * DESKTOP WIDTH. The design is a 393-wide phone frame; on the desktop modal
+ * (max-width 800) the content column holds 393 and centres, so the hero keeps its
+ * proportions instead of stranding a 210px card in an 800px sheet. The background
+ * stays full-bleed — only the content column is constrained. Content sits at
+ * z-index 1 so it clears the confetti canvas, matching the variant's zStack order
+ * (gradients → confetti → content).
+ */
+/**
+ * The reward sheet's brand pair, read off the Figma (frame 18304:2399).
+ *
+ * `#B728F5 → #6515ED` is the primary CTA's gradient (node 18304:2417, 98.22°), and
+ * `#B728F5` is also the active dot and the radial glow behind the header — one accent
+ * for the whole surface, which is why it is one variable rather than three literals.
+ *
+ * NOT `--encore-primary-color`. `streaksCarousel.json` fills this CTA with a FLAT
+ * `accent` (the publisher's brand colour) at `cornerRadius: 12`; the Figma shows this
+ * gradient at a full pill. The Figma is the target, so the gradient ships — see the
+ * PR for the divergence. Exposed as custom properties on the reward root so the pair
+ * stays overridable if that decision is revisited.
+ */
+export declare const REWARD_BRAND = "#B728F5";
+export declare const REWARD_BRAND_DEEP = "#6515ED";
+/** Inactive dot ink, Figma 18304:3072 — `#6A6D81` at 30%. */
+export declare const REWARD_DOT_COLOR = "#6A6D81";
+/**
+ * Reward hero carousel geometry (Figma: hero 210×260 centred in a 393 frame, ~10px
+ * between card edges, neighbours peeking at both edges).
+ *
+ * Shared as constants because three separate rules have to agree on them: the card
+ * itself, the scroll container's centring padding (`50% - CARD_WIDTH/2`), and the
+ * arrows' vertical offset (`CARDS_PAD_Y + CARD_HEIGHT/2`). Drifting any one of them
+ * apart silently de-centres the hero.
+ */
+export declare const REWARD_CARD_GEOMETRY: {
+    readonly width: 210;
+    readonly height: 260;
+    readonly gap: 10;
+    /** Vertical breathing room in the scroll container, so the card shadow is not clipped. */
+    readonly padY: 26;
+};
 /**
  * CSS custom properties for theming
  */

package/types/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAGX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAi9CD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAE,cAAmB,GAAG,IAAI,CAgB7D;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAMnC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAUvD;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAE/C;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAE7C"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAWH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAGX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,YAAY,CAAC;AACtC,eAAO,MAAM,iBAAiB,YAAY,CAAC;AAC3C,6DAA6D;AAC7D,eAAO,MAAM,gBAAgB,YAAY,CAAC;AAE1C;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB;;;;IAI/B,0FAA0F;;CAElF,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AA8qDD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,GAAE,cAAmB,GAAG,IAAI,CAgB7D;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAMnC;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAUvD;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAE/C;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAE7C"}

package/types/utils/text.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Small text helpers shared across the core and UI layers.
+ */
+/**
+ * First value that is a non-blank string once trimmed, else `undefined` —
+ * the copy-priority primitive for tiered overrides (per-call > backend > default).
+ *
+ * Exists because neither operator expresses this. `??` treats `'   '` as a real
+ * value, so a whitespace-only override would win its slot and render an empty
+ * headline (taking `aria-labelledby` with it) or an empty subtitle. `||` behaves
+ * correctly but trips `prefer-nullish-coalescing`, whose autofix converts it to
+ * `??` and reintroduces precisely that bug — so the rule's suggested fix is
+ * actively wrong on this shape. A named helper states the rule once and keeps
+ * every call site honest.
+ *
+ * Returning `undefined` rather than `''` is what lets callers OMIT a slot instead
+ * of filling it with an empty value — for the header that is the difference
+ * between rendering no subtitle node and rendering a blank one that still takes
+ * layout space and is announced as an empty element. The reward CARD uses the same
+ * property to drop its offer line rather than render an empty node that would still
+ * consume its 4px gap.
+ */
+export declare function firstNonBlank(...values: (string | null | undefined)[]): string | undefined;
+//# sourceMappingURL=text.d.ts.map

package/types/utils/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/utils/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,GAAG,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,GAAG,SAAS,CAM1F"}

package/examples/react/.env

@@ -1 +0,0 @@
-VITE_ENCORE_API_KEY=pk_test_localdemoappkeytest00000