@swype-org/deposit 0.3.23 → 0.3.31

package/dist/react.d.cts

@@ -1,5 +1,5 @@
-import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-iQf3f-_m.cjs';
-export { k as getDisplayMessage } from './types-iQf3f-_m.cjs';
+import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-NMNL3Jut.cjs';
+export { k as getDisplayMessage } from './types-NMNL3Jut.cjs';
 import { ReactElement } from 'react';
 
 interface BlinkDepositButtonProps {

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-iQf3f-_m.js';
-export { k as getDisplayMessage } from './types-iQf3f-_m.js';
+import { c as DepositConfig, D as DepositStatus, a as DepositResult, b as DepositError, d as DepositRequest } from './types-NMNL3Jut.js';
+export { k as getDisplayMessage } from './types-NMNL3Jut.js';
 import { ReactElement } from 'react';
 
 interface BlinkDepositButtonProps {

package/dist/react.js

@@ -1,5 +1,5 @@
-import { Deposit, getDisplayMessage } from './chunk-JD7GTL6D.js';
-export { DepositError, getDisplayMessage } from './chunk-JD7GTL6D.js';
+import { Deposit, getDisplayMessage } from './chunk-HBW7IVRJ.js';
+export { DepositError, getDisplayMessage } from './chunk-HBW7IVRJ.js';
 import { useState, createElement, useRef, useEffect, useCallback } from 'react';
 
 function svgToDataUri(svg) {

package/dist/{types-iQf3f-_m.d.cts → types-NMNL3Jut.d.cts}

@@ -70,11 +70,72 @@ interface DepositConfig {
      */
     hostedFlowOrigin?: string;
     /**
-     * DOM element to mount the iframe overlay into.
+     * DOM element the iframe is mounted into.
+     *
+     * In the default `presentation: 'overlay'` this only changes the overlay's
+     * append parent — the overlay is still `position: fixed; inset: 0` and
+     * covers the viewport regardless of where it hangs in the tree.
+     *
+     * In `presentation: 'embedded'` it is the real mount point: the iframe
+     * renders inline inside this element, and the option is **required**. The
+     * element must be stable across re-renders — moving an iframe in the DOM
+     * reloads it, discarding the warmed-up document and the user's session.
+     * (On mobile, where an embedded flow presents as an overlay instead, this
+     * element is left untouched and the overlay mounts on `document.body` — a
+     * `position: fixed` overlay inside a host's animated dialog would position
+     * against that dialog rather than the viewport.)
      *
      * @default document.body
      */
     containerElement?: HTMLElement;
+    /**
+     * How the hosted flow is presented on the host page.
+     *
+     * `'overlay'` (the default) is the classic modal: a full-viewport dim +
+     * blur backdrop with the payment card centered on top, dismissable by
+     * backdrop click or Escape.
+     *
+     * `'embedded'` mounts the iframe **inline** inside {@link containerElement}
+     * — for a payment-method aggregator that lists Blink as one option inside
+     * its own widget. There is no backdrop, no body scroll lock, and no
+     * backdrop/Escape dismissal (the host owns all of that); the flow renders
+     * chrome-less so the host's own panel provides the radius, background and
+     * shadow. The iframe's height follows the flow's content, reported through
+     * the {@link Deposit.on | `resize`} event.
+     *
+     * Requires {@link containerElement}.
+     *
+     * **Desktop only.** On mobile an embedded flow presents as the overlay: a
+     * phone-sized method panel cannot hold a payment journey with a keypad,
+     * wallet lists and a QR code, and the overlay is what a phone user gets from
+     * every other Blink integration. Read the resolved value from
+     * {@link Deposit.presentation} — on `'overlay'` no `resize` event ever fires,
+     * so a panel sized from those reports should be collapsed or skipped.
+     *
+     * Nothing else downgrades it. A *failure* never reaches the overlay (an
+     * older webview keeps the inline presenter), because dropping a full-screen
+     * modal over an aggregator's widget unannounced is worse than the flow not
+     * starting; the mobile choice is deliberate and made before anything renders.
+     *
+     * @default 'overlay'
+     */
+    presentation?: 'overlay' | 'embedded';
+    /**
+     * Embedded presentation only: hard cap on the inline iframe's height, in
+     * CSS pixels. Ignored on mobile, where the flow presents as an overlay and
+     * sizes itself against the real viewport.
+     *
+     * Two jobs. It bounds the iframe element, so a tall screen scrolls
+     * internally instead of pushing the host's page around. And it is the
+     * basis viewport-derived sizing inside the flow resolves against — which
+     * is why it must be a budget the host decides, never a measurement of what
+     * the iframe currently is. (An inline iframe sized from its own content
+     * makes `dvh` self-referential; feeding the measured height back in would
+     * make every decorative band inflate to its ceiling.)
+     *
+     * @default Math.round(window.innerHeight * 0.9)
+     */
+    embedMaxHeightPx?: number;
     /**
      * Maximum time in milliseconds to wait for the signer endpoint to respond.
      *
@@ -109,6 +170,79 @@ interface DepositConfig {
      * @default 'fluid'
      */
     layout?: 'fluid' | 'fixed';
+    /**
+     * Visual appearance of the hosted payment UI. Nested `{ theme }` object,
+     * mirroring Privy's `appearance` config. `theme: 'light'` renders the light
+     * palette; `'dark'` renders the dark palette; `'system'` follows the user's
+     * OS `prefers-color-scheme`. Passed to the hosted flow as an `appearance`
+     * query param and carried through every Blink surface the flow opens
+     * (top-level setup tab, wallet authorization pages).
+     *
+     * When no theme is passed, the default follows the merchant page's own
+     * declared `color-scheme`: a page declaring `dark` defaults the flow to
+     * dark, a page declaring `light dark` defaults to `system`, and everything
+     * else defaults to light. Pass an explicit theme to override the detection
+     * (`theme: 'light'` pins light even on a dark page).
+     *
+     * @example
+     * new Deposit({ signer, appearance: { theme: 'dark' } })
+     */
+    appearance?: {
+        /**
+         * Color scheme of the hosted UI.
+         * @default detected from the merchant page's declared `color-scheme`,
+         * falling back to `'light'`
+         */
+        theme?: 'light' | 'dark' | 'system';
+        /**
+         * Brand colors for the hosted UI. Blink derives its whole palette from
+         * these — surfaces, the recessed/hover steps, the text ramp, borders, the
+         * button hover and label, the tinted semantic surfaces — so the flow reads
+         * as part of your product rather than a foreign panel inside it. Most
+         * valuable in the embedded presentation, where Blink sits in your own
+         * dialog, but applied on every surface.
+         *
+         * **Opaque hex only** (`#rgb` or `#rrggbb`). Anything else — `rgb()`, a CSS
+         * color name, 8-digit hex with alpha — is dropped with a console error
+         * naming the key: a solid card cannot honour translucency, and a color that
+         * cannot be parsed cannot be contrast-checked.
+         *
+         * Contrast is enforced. Where a derived pair would fall below WCAG AA the
+         * *derived* value is substituted (never your input) and the substitution is
+         * reported in the hosted flow's console. A `colorPrimary` too mid-toned for
+         * either a black or a white label is reported and left alone — only you can
+         * fix that one.
+         *
+         * The scale (sizes, weights, radii) and Blink's own brand marks, semantic
+         * hues and authorization states are not themeable.
+         *
+         * @example
+         * appearance: {
+         *   theme: 'light',
+         *   variables: {
+         *     colorPrimary: '#0f62fe',
+         *     colorBackground: '#ffffff',
+         *     colorText: '#111111',
+         *   },
+         * }
+         */
+        variables?: {
+            /** Primary button fill, focus ring, selected states. */
+            colorPrimary?: string;
+            /**
+             * The card surface. Its luminance also picks the light or dark base for
+             * everything not themeable — shadows, the backdrop scrim, semantic hues —
+             * so a dark surface stays coherent even with `theme: 'light'`.
+             */
+            colorBackground?: string;
+            /** Body text. The secondary/muted/tertiary ramp is derived from it. */
+            colorText?: string;
+            /** Error text and the error surface tint. */
+            colorDanger?: string;
+            /** Hairline borders. Derived from surface + text when omitted. */
+            colorBorder?: string;
+        };
+    };
     /**
      * Warm up the hosted payment flow in a hidden iframe as soon as the
      * `Deposit` instance is constructed (deferred until the host page has

package/dist/{types-iQf3f-_m.d.ts → types-NMNL3Jut.d.ts}

@@ -70,11 +70,72 @@ interface DepositConfig {
      */
     hostedFlowOrigin?: string;
     /**
-     * DOM element to mount the iframe overlay into.
+     * DOM element the iframe is mounted into.
+     *
+     * In the default `presentation: 'overlay'` this only changes the overlay's
+     * append parent — the overlay is still `position: fixed; inset: 0` and
+     * covers the viewport regardless of where it hangs in the tree.
+     *
+     * In `presentation: 'embedded'` it is the real mount point: the iframe
+     * renders inline inside this element, and the option is **required**. The
+     * element must be stable across re-renders — moving an iframe in the DOM
+     * reloads it, discarding the warmed-up document and the user's session.
+     * (On mobile, where an embedded flow presents as an overlay instead, this
+     * element is left untouched and the overlay mounts on `document.body` — a
+     * `position: fixed` overlay inside a host's animated dialog would position
+     * against that dialog rather than the viewport.)
      *
      * @default document.body
      */
     containerElement?: HTMLElement;
+    /**
+     * How the hosted flow is presented on the host page.
+     *
+     * `'overlay'` (the default) is the classic modal: a full-viewport dim +
+     * blur backdrop with the payment card centered on top, dismissable by
+     * backdrop click or Escape.
+     *
+     * `'embedded'` mounts the iframe **inline** inside {@link containerElement}
+     * — for a payment-method aggregator that lists Blink as one option inside
+     * its own widget. There is no backdrop, no body scroll lock, and no
+     * backdrop/Escape dismissal (the host owns all of that); the flow renders
+     * chrome-less so the host's own panel provides the radius, background and
+     * shadow. The iframe's height follows the flow's content, reported through
+     * the {@link Deposit.on | `resize`} event.
+     *
+     * Requires {@link containerElement}.
+     *
+     * **Desktop only.** On mobile an embedded flow presents as the overlay: a
+     * phone-sized method panel cannot hold a payment journey with a keypad,
+     * wallet lists and a QR code, and the overlay is what a phone user gets from
+     * every other Blink integration. Read the resolved value from
+     * {@link Deposit.presentation} — on `'overlay'` no `resize` event ever fires,
+     * so a panel sized from those reports should be collapsed or skipped.
+     *
+     * Nothing else downgrades it. A *failure* never reaches the overlay (an
+     * older webview keeps the inline presenter), because dropping a full-screen
+     * modal over an aggregator's widget unannounced is worse than the flow not
+     * starting; the mobile choice is deliberate and made before anything renders.
+     *
+     * @default 'overlay'
+     */
+    presentation?: 'overlay' | 'embedded';
+    /**
+     * Embedded presentation only: hard cap on the inline iframe's height, in
+     * CSS pixels. Ignored on mobile, where the flow presents as an overlay and
+     * sizes itself against the real viewport.
+     *
+     * Two jobs. It bounds the iframe element, so a tall screen scrolls
+     * internally instead of pushing the host's page around. And it is the
+     * basis viewport-derived sizing inside the flow resolves against — which
+     * is why it must be a budget the host decides, never a measurement of what
+     * the iframe currently is. (An inline iframe sized from its own content
+     * makes `dvh` self-referential; feeding the measured height back in would
+     * make every decorative band inflate to its ceiling.)
+     *
+     * @default Math.round(window.innerHeight * 0.9)
+     */
+    embedMaxHeightPx?: number;
     /**
      * Maximum time in milliseconds to wait for the signer endpoint to respond.
      *
@@ -109,6 +170,79 @@ interface DepositConfig {
      * @default 'fluid'
      */
     layout?: 'fluid' | 'fixed';
+    /**
+     * Visual appearance of the hosted payment UI. Nested `{ theme }` object,
+     * mirroring Privy's `appearance` config. `theme: 'light'` renders the light
+     * palette; `'dark'` renders the dark palette; `'system'` follows the user's
+     * OS `prefers-color-scheme`. Passed to the hosted flow as an `appearance`
+     * query param and carried through every Blink surface the flow opens
+     * (top-level setup tab, wallet authorization pages).
+     *
+     * When no theme is passed, the default follows the merchant page's own
+     * declared `color-scheme`: a page declaring `dark` defaults the flow to
+     * dark, a page declaring `light dark` defaults to `system`, and everything
+     * else defaults to light. Pass an explicit theme to override the detection
+     * (`theme: 'light'` pins light even on a dark page).
+     *
+     * @example
+     * new Deposit({ signer, appearance: { theme: 'dark' } })
+     */
+    appearance?: {
+        /**
+         * Color scheme of the hosted UI.
+         * @default detected from the merchant page's declared `color-scheme`,
+         * falling back to `'light'`
+         */
+        theme?: 'light' | 'dark' | 'system';
+        /**
+         * Brand colors for the hosted UI. Blink derives its whole palette from
+         * these — surfaces, the recessed/hover steps, the text ramp, borders, the
+         * button hover and label, the tinted semantic surfaces — so the flow reads
+         * as part of your product rather than a foreign panel inside it. Most
+         * valuable in the embedded presentation, where Blink sits in your own
+         * dialog, but applied on every surface.
+         *
+         * **Opaque hex only** (`#rgb` or `#rrggbb`). Anything else — `rgb()`, a CSS
+         * color name, 8-digit hex with alpha — is dropped with a console error
+         * naming the key: a solid card cannot honour translucency, and a color that
+         * cannot be parsed cannot be contrast-checked.
+         *
+         * Contrast is enforced. Where a derived pair would fall below WCAG AA the
+         * *derived* value is substituted (never your input) and the substitution is
+         * reported in the hosted flow's console. A `colorPrimary` too mid-toned for
+         * either a black or a white label is reported and left alone — only you can
+         * fix that one.
+         *
+         * The scale (sizes, weights, radii) and Blink's own brand marks, semantic
+         * hues and authorization states are not themeable.
+         *
+         * @example
+         * appearance: {
+         *   theme: 'light',
+         *   variables: {
+         *     colorPrimary: '#0f62fe',
+         *     colorBackground: '#ffffff',
+         *     colorText: '#111111',
+         *   },
+         * }
+         */
+        variables?: {
+            /** Primary button fill, focus ring, selected states. */
+            colorPrimary?: string;
+            /**
+             * The card surface. Its luminance also picks the light or dark base for
+             * everything not themeable — shadows, the backdrop scrim, semantic hues —
+             * so a dark surface stays coherent even with `theme: 'light'`.
+             */
+            colorBackground?: string;
+            /** Body text. The secondary/muted/tertiary ramp is derived from it. */
+            colorText?: string;
+            /** Error text and the error surface tint. */
+            colorDanger?: string;
+            /** Hairline borders. Derived from surface + text when omitted. */
+            colorBorder?: string;
+        };
+    };
     /**
      * Warm up the hosted payment flow in a hidden iframe as soon as the
      * `Deposit` instance is constructed (deferred until the host page has

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swype-org/deposit",
-  "version": "0.3.23",
+  "version": "0.3.31",
   "description": "Lightweight merchant deposit SDK — open a hosted payment flow, handle completion, zero dependencies",
   "type": "module",
   "main": "dist/index.cjs",