@reclack/walletkit 0.0.0-stage → 0.1.0

package/dist/deep-links.js

@@ -0,0 +1,201 @@
+import { mobileOS } from './device.js';
+const DEEP_LINKS = {
+    // https://go.cb-w.com/dapp?cb_url=<percent-encoded>, per Coinbase's own
+    // mobile dapp documentation.
+    coinbase: (url) => `https://go.cb-w.com/dapp?cb_url=${encodeURIComponent(url)}`,
+    // MetaMask takes the URL bare, with the scheme stripped.
+    metamask: (url) => `https://metamask.app.link/dapp/${url.replace(/^https?:\/\//, '')}`,
+    // coin_id 60 is Ethereum, which is what selects the dapp browser.
+    trust: (url) => `https://link.trustwallet.com/open_url?coin_id=60&url=${encodeURIComponent(url)}`,
+    // Phantom wants a referrer as well as the target.
+    phantom: (url) => `https://phantom.app/ul/browse/${encodeURIComponent(url)}` +
+        `?ref=${encodeURIComponent(new URL(url).origin)}`,
+    // Brave Wallet is part of the Brave browser rather than an app of its own,
+    // so the hand-off is to open this page in Brave, where the wallet is
+    // injected like any extension.
+    //
+    // There is no universal link for it, so each platform gets its own form
+    // and a desktop gets nothing. The Android intent carries a fallback URL,
+    // so a phone without Brave stays on the checkout rather than landing on an
+    // unknown-scheme error; iOS has no equivalent, and an uninstalled Brave
+    // means the link does nothing, which is why the install row stays below.
+    brave: (url, platform) => {
+        if (platform === 'android') {
+            const target = new URL(url);
+            return `intent://${target.host}${target.pathname}${target.search}`
+                + '#Intent;scheme=https;package=com.brave.browser;'
+                + `S.browser_fallback_url=${encodeURIComponent(url)};end`;
+        }
+        if (platform === 'ios') {
+            return `brave://open-url?url=${encodeURIComponent(url)}`;
+        }
+        return undefined;
+    },
+    // https://imtoken.gitbook.io/developers/products/universal-links. A real
+    // universal link, so it falls back to a web page when imToken is absent.
+    imtoken: (url) => 'https://connect.token.im/link/navigate/DappView'
+        + `?url=${encodeURIComponent(url)}`,
+    // https://docs.iopay.me/developer-guides/deep-linking. A custom scheme is
+    // all ioPay publishes: nothing to fall back to, and nothing a desktop
+    // scanner could usefully encode, so a desktop gets none.
+    iopay: (url, platform) => platform
+        ? `iopay://io.iotex.iopay/open?action=web&url=${encodeURIComponent(url)}`
+        : undefined,
+    // https://web3.okx.com/build/docs/waas/app-universal-link. OKX wraps this
+    // scheme in a download page for the web, but publishes the wrapper's
+    // address nowhere this could be checked against, so the scheme goes bare
+    // and a desktop gets none.
+    okx: (url, platform) => platform
+        ? `okx://wallet/dapp/url?dappUrl=${encodeURIComponent(url)}`
+        : undefined,
+    // https://web3.bitget.com/en/docs/configuration/deeplink. bkcode.vip is
+    // the https form, which Bitget's own documentation says is the only one
+    // Android honours, so it is the only one used here.
+    bitget: (url) => `https://bkcode.vip?action=dapp&url=${encodeURIComponent(url)}`,
+    // https://docs.solflare.com/solflare/technical/deeplinks/other-methods/browse
+    // and https://docs.backpack.app/deeplinks/other-methods/browse. Both took
+    // Phantom's shape: the target in the path, the caller in ref.
+    solflare: (url) => `https://solflare.com/ul/v1/browse/${encodeURIComponent(url)}` +
+        `?ref=${encodeURIComponent(new URL(url).origin)}`,
+    backpack: (url) => `https://backpack.app/ul/v1/browse/${encodeURIComponent(url)}` +
+        `?ref=${encodeURIComponent(new URL(url).origin)}`,
+    // https://help.tokenpocket.pro/developer-en/wallet/pull-up-wallet-with-deeplink.
+    // The parameters arrive as a JSON object, encoded whole. Another custom
+    // scheme, so a desktop gets none.
+    //
+    // ETH rather than the chain being paid on: the field picks which of
+    // TokenPocket's wallets opens the page, and every chain this checkout
+    // settles on is reached by the EVM one, which the page then asks to
+    // switch like any other provider.
+    tokenpocket: (url, platform) => platform
+        ? 'tpdapp://open?params='
+            + encodeURIComponent(JSON.stringify({ url, chain: 'ETH' }))
+        : undefined,
+};
+/**
+ * Where to send a pairing string so that one wallet receives it.
+ *
+ * A bare `wc:` URI is a scheme, not an address. Whichever application claimed
+ * the scheme answers it, which on a phone with MetaMask installed is MetaMask,
+ * whatever wallet the payer picked. These carry the same string to one named
+ * application instead.
+ *
+ * The links are each wallet's own entry in the WalletConnect registry, the
+ * list the wallets themselves maintain, taken as published rather than
+ * guessed at. A universal link where one exists, since it falls back to a web
+ * page when the wallet is absent, and the custom scheme where the universal
+ * is a redirect through an install tracker or already carries its own query.
+ *
+ * A wallet with no entry here is one the registry gives no mobile link for,
+ * which generally means it has no phone application at all. That is why this
+ * table doubles as the answer to walletScans below: on a phone the panel can
+ * still offer the code to copy, but a desktop payer has nothing to paste into
+ * and a wallet that lives only in a browser cannot scan.
+ */
+const PAIRING_LINKS = {
+    binance: 'https://app.binance.com/cedefi',
+    cryptocom: 'https://wallet.crypto.com/deeplink',
+    rainbow: 'https://rnbwapp.com',
+    rabby: 'rabby://',
+    exodus: 'https://exodus.com/m',
+    bybit: 'bybitapp://open/route?targetUrl=by://web3/walletconnect/',
+    ledger: 'ledgerlive://',
+    safe: 'https://app.safe.global/',
+    kraken: 'krakenwallet://',
+    bitpay: 'https://link.bitpay.com',
+    bitcoincom: 'https://wallet.bitcoin.com/',
+    blockchaincom: 'https://login.blockchain.com/app',
+    // An extension and an iOS application, and it was the extension that hid
+    // the application: a wallet that injects used to be taken as reachable.
+    berasig: 'berasig://',
+    bestwallet: 'https://best-wallet-prod.web.app/connect',
+    bifrostwallet: 'https://app.bifrostwallet.com/',
+    bitski: 'bitski://',
+    bitverse: 'bitverseapp://open/wallet',
+    coin98: 'coin98://',
+    compass: 'leapcompass://',
+    core: 'https://core.app',
+    foxwallet: 'https://link.foxwallet.com',
+    frontier: 'frontier://',
+    gate: 'gtweb3wallet://',
+    // This one, okx and tokenpocket have a browser of their own as well, and
+    // are reached through it on a phone. They are here for the desktop, where
+    // the link into that browser needs a platform nothing has named yet, and
+    // the wallet's own scanner is what is left.
+    iopay: 'iopay://',
+    kaia: 'https://app.kaiawallet.io',
+    kresuswallet: 'com.kresus.superapp://',
+    magiceden: 'magiceden://',
+    meco: 'mecowallet://',
+    mew: 'https://mewwallet.com',
+    nest: 'nestwallet://',
+    nova: 'novawallet://',
+    okto: 'okto://',
+    // The exchange application's scheme, not the standalone wallet's
+    // (okxwallet://main) and not the universal link, which is a download page
+    // carrying a query of its own.
+    okx: 'okex://main',
+    oneinch: 'https://wallet.1inch.io/app/nobodywilleveruseit',
+    onekey: 'https://app.onekey.so/wc/connect',
+    ready: 'readywallet://',
+    ronin: 'https://wallet.roninchain.com',
+    safepal: 'https://link.safepal.io',
+    subwallet: 'https://mobile.subwallet.app/',
+    talisman: 'talisman://',
+    // Not the tpdapp:// above: that one opens a page in TokenPocket, this one
+    // hands it a session.
+    tokenpocket: 'tpoutside://',
+    uniswap: 'https://uniswap.org/app',
+    universalprofiles: 'io.universaleverything.universalprofiles://wallet-connect',
+    valora: 'https://valoraapp.com',
+    wigwam: 'https://wigwam.app/',
+    xportal: 'https://xportal.app.link',
+    zeal: 'zeal://walletconnect/',
+    zerion: 'zerion://',
+};
+/**
+ * Whether this wallet has a phone application that can read a pairing code.
+ *
+ * Read off the table above rather than kept as a second list of its own. Every
+ * entry there is a mobile link the wallet published to the WalletConnect
+ * registry, and a wallet with no phone application publishes none.
+ *
+ * Asked by a desktop checkout, where a code can only be scanned. On a phone it
+ * can be pasted instead, so one is offered there whatever this says.
+ */
+export function walletScans(id) {
+    return id in PAIRING_LINKS;
+}
+/**
+ * The link that hands this pairing string to one named wallet, or nothing
+ * where that wallet publishes no way to be reached.
+ */
+export function walletPairingLink(id, uri) {
+    const base = PAIRING_LINKS[id];
+    if (!base) {
+        return undefined;
+    }
+    // `<link>/wc?uri=<encoded>` is the shape WalletConnect settled on and every
+    // link above is published to be used that way, trailing slash included or
+    // not, so the only thing to normalise is the slash.
+    const prefix = base.endsWith('/') ? base : `${base}/`;
+    return `${prefix}wc?uri=${encodeURIComponent(uri)}`;
+}
+/**
+ * The link that opens this checkout in one wallet, or nothing if that wallet
+ * has no known one.
+ */
+export function walletDeepLink(id, url, platform = mobileOS()) {
+    const build = DEEP_LINKS[id];
+    if (!build) {
+        return undefined;
+    }
+    try {
+        return build(url, platform);
+    }
+    catch {
+        // new URL() on something that is not a URL. Nothing to offer.
+        return undefined;
+    }
+}
+//# sourceMappingURL=deep-links.js.map

package/dist/deep-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deep-links.js","sourceRoot":"","sources":["../src/deep-links.ts"],"names":[],"mappings":"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"}

package/dist/device.d.ts

@@ -0,0 +1,23 @@
+export declare function isHandheld(): boolean;
+/**
+ * isHandheld, kept current: a tablet can be docked to a keyboard mid-session.
+ *
+ * A subscription rather than a hook, because this package renders nothing.
+ * Every UI layer over it has its own way of listening, and all of them can
+ * drive this one; the reverse is not true.
+ *
+ * Returns a cleanup function, and calls back once immediately so a caller
+ * never has to read the value separately before subscribing to it.
+ */
+export declare function subscribeHandheld(onChange: (handheld: boolean) => void): () => void;
+/**
+ * Which mobile platform this is, if either.
+ *
+ * Only for picking between two hand-off links that do the same job: a wallet
+ * with no universal link needs a custom scheme on iOS and an intent URL on
+ * Android, and neither does anything on the other. Nothing else should read
+ * this: the feature queries above say what a device can do, which a
+ * user-agent string only guesses at.
+ */
+export type MobileOS = 'ios' | 'android';
+export declare function mobileOS(): MobileOS | undefined;

package/dist/device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.d.ts","sourceRoot":"","sources":["../src/device.ts"],"names":[],"mappings":"AAeA,wBAAgB,UAAU,IAAK,OAAO,CAIrC;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAChC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,GACnC,MAAM,IAAI,CAaZ;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;AAExC,wBAAgB,QAAQ,IAAK,QAAQ,GAAG,SAAS,CAgBhD"}

package/dist/device.js

@@ -0,0 +1,59 @@
+/**
+ * Whether this is a touch-primary device: a phone or a tablet.
+ *
+ * `hover: none` and `pointer: coarse` together, not either alone. A laptop
+ * with a touchscreen reports a coarse pointer the moment somebody touches it
+ * but still hovers, and treating that as a phone would take the QR away from
+ * a payer who needs it. Screen width is deliberately not part of this: a
+ * narrow desktop window is still a desktop.
+ *
+ * Matters because the wallet hand-off is the opposite on each. A desktop
+ * payer scans a code to carry the checkout to their phone; a phone payer
+ * cannot scan their own screen and needs a link into the wallet instead.
+ */
+const HANDHELD = '(hover: none) and (pointer: coarse)';
+export function isHandheld() {
+    return typeof window !== 'undefined'
+        && typeof window.matchMedia === 'function'
+        && window.matchMedia(HANDHELD).matches;
+}
+/**
+ * isHandheld, kept current: a tablet can be docked to a keyboard mid-session.
+ *
+ * A subscription rather than a hook, because this package renders nothing.
+ * Every UI layer over it has its own way of listening, and all of them can
+ * drive this one; the reverse is not true.
+ *
+ * Returns a cleanup function, and calls back once immediately so a caller
+ * never has to read the value separately before subscribing to it.
+ */
+export function subscribeHandheld(onChange) {
+    if (typeof window === 'undefined'
+        || typeof window.matchMedia !== 'function') {
+        onChange(false);
+        return () => undefined;
+    }
+    const query = window.matchMedia(HANDHELD);
+    const update = () => onChange(query.matches);
+    update();
+    query.addEventListener('change', update);
+    return () => query.removeEventListener('change', update);
+}
+export function mobileOS() {
+    if (typeof navigator === 'undefined') {
+        return undefined;
+    }
+    const ua = navigator.userAgent;
+    if (/android/i.test(ua)) {
+        return 'android';
+    }
+    if (/iphone|ipad|ipod/i.test(ua)) {
+        return 'ios';
+    }
+    // An iPad reports itself as a Mac. A desktop Mac has no touch points.
+    if (/macintosh/i.test(ua) && navigator.maxTouchPoints > 1) {
+        return 'ios';
+    }
+    return undefined;
+}
+//# sourceMappingURL=device.js.map

package/dist/device.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device.js","sourceRoot":"","sources":["../src/device.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,QAAQ,GAAG,qCAAqC,CAAA;AAEtD,MAAM,UAAU,UAAU;IACzB,OAAO,OAAO,MAAM,KAAK,WAAW;WAChC,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU;WACvC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAA;AACxC,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,iBAAiB,CAChC,QAAqC;IAErC,IACC,OAAO,MAAM,KAAK,WAAW;WAC1B,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,EACzC,CAAC;QACF,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,OAAO,GAAG,EAAE,CAAC,SAAS,CAAA;IACvB,CAAC;IACD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;IACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAC5C,MAAM,EAAE,CAAA;IACR,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;IACxC,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;AACzD,CAAC;AAaD,MAAM,UAAU,QAAQ;IACvB,IAAI,OAAO,SAAS,KAAK,WAAW,EAAE,CAAC;QACtC,OAAO,SAAS,CAAA;IACjB,CAAC;IACD,MAAM,EAAE,GAAG,SAAS,CAAC,SAAS,CAAA;IAC9B,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QACzB,OAAO,SAAS,CAAA;IACjB,CAAC;IACD,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;QAClC,OAAO,KAAK,CAAA;IACb,CAAC;IACD,sEAAsE;IACtE,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,SAAS,CAAC,cAAc,GAAG,CAAC,EAAE,CAAC;QAC3D,OAAO,KAAK,CAAA;IACb,CAAC;IACD,OAAO,SAAS,CAAA;AACjB,CAAC"}

package/dist/element/attributes.d.ts

@@ -0,0 +1,48 @@
+import type { ConnectRequest, WalletKit, WalletKitTheme } from '@reclack/walletkit';
+/**
+ * The attributes `<reclack-connect>` understands.
+ *
+ * Exported so a typed host does not have to guess them, and so the JSX
+ * declarations for each framework are written against one list rather than
+ * three that drift.
+ *
+ * Everything here is a string, because attributes are. The richer settings,
+ * an intent carrying assets or a theme carrying per-mode overrides, are
+ * properties on the element instead: an attribute cannot hold either.
+ */
+export interface ReclackConnectAttributes {
+    /** `inline` for a list on the page, `modal` for the whole picker over it. */
+    variant?: 'inline' | 'modal';
+    /** Restricts the list to one chain family. Both when absent. */
+    family?: 'evm' | 'svm';
+    /** The EVM chain the wallet must end up on. No switch is forced without it. */
+    'chain-id'?: string | number;
+    /** Comma separated: `address`, `balance`. */
+    intent?: string;
+    /** Hold the connection open after the result, for a page that signs later. */
+    'keep-alive'?: boolean | '';
+    'theme-mode'?: 'light' | 'dark' | 'system';
+    /** `#rrggbb`. Anything else is ignored and the default stands. */
+    brand?: string;
+    radius?: string;
+    font?: string;
+    /** Where the host serves this package's `assets/` directory from. */
+    'asset-base'?: string;
+    /** A different Reclack to read the wallet catalogue from, such as a sandbox. */
+    'api-url'?: string;
+}
+/**
+ * Everything a framework can pass in JSX: the attributes above, plus the
+ * properties that carry more than a string.
+ *
+ * A framework sets a property when the element has one of that name and an
+ * attribute otherwise, which is why these can sit in one list.
+ */
+export interface ReclackConnectProps extends ReclackConnectAttributes {
+    /** A kit to share rather than one this element would make for itself. */
+    kit?: WalletKit;
+    /** The full request, for an intent carrying assets. */
+    request?: ConnectRequest;
+    /** The full theme, for per-mode overrides. */
+    theme?: WalletKitTheme;
+}

package/dist/element/element.d.ts

@@ -0,0 +1,92 @@
+import { type ColorScheme, type ConnectRequest, type ConnectResult, type WalletKit, type WalletKitOptions, type WalletKitTheme } from '@reclack/walletkit';
+/**
+ * `<reclack-connect>`: the wallet picker as an element.
+ *
+ * A custom element rather than a component, because the pages that need it
+ * are not all React. A merchant's dashboard, a partner's checkout and a plain
+ * HTML page all create elements; only one of them has a framework in common
+ * with us. Everything here is the platform: an element, attributes, events
+ * and a shadow root.
+ *
+ * The renderer inside is Preact, bundled. That is an implementation detail no
+ * host installs, imports or can collide with.
+ */
+export declare class ReclackConnectElement extends HTMLElement {
+    #private;
+    static readonly tagName = "reclack-connect";
+    static get observedAttributes(): string[];
+    /**
+     * The kit this element drives.
+     *
+     * Made on first use rather than in the constructor, so the attributes
+     * that configure it have been parsed by the time it is built: an element
+     * written in HTML has its attributes set after construction, and a kit
+     * made too early would have read none of them.
+     *
+     * A host with several pickers on a page, or one that already holds a
+     * connection, passes its own through `useKit`: discovery is a window
+     * listener and a catalogue fetch, and a second kit runs both again to
+     * answer the same question.
+     */
+    /**
+     * Hands this element a kit to share, as a property.
+     *
+     * A property rather than only `useKit`, because that is what a framework
+     * can set: React and Preact both create the element, set properties, and
+     * only then insert it, so a kit assigned this way is in place before the
+     * element mounts and no throwaway kit is ever built.
+     */
+    set kit(kit: WalletKit);
+    get kit(): WalletKit;
+    /**
+     * What the caller wants out of connecting.
+     *
+     * A property rather than only attributes, because an intent carries a
+     * list and an asset, and an attribute carries a string. Attributes cover
+     * the simple case; this covers the rest.
+     */
+    set request(request: ConnectRequest);
+    get request(): ConnectRequest;
+    /**
+     * Colours, corner radius, type and light or dark.
+     *
+     * An accessor rather than a field, and that is load-bearing. A framework
+     * can only assign a property once it holds the element, which is after it
+     * has been inserted and `connectedCallback` has run. A plain field would
+     * be set too late for anything to notice, and the picker would keep
+     * whatever the attributes said: absent a `theme-mode`, that is `system`,
+     * so a theme pinned to light rendered dark on anyone's dark machine.
+     */
+    set theme(theme: WalletKitTheme | undefined);
+    get theme(): WalletKitTheme | undefined;
+    /** What this element's mode resolved to, for a host that wants to match it. */
+    get scheme(): ColorScheme;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Hands this element a kit to share instead of the one it would make. */
+    useKit(kit: WalletKit): void;
+}
+/** Registers the element, once, under its own name. */
+export declare function defineWalletElement(tagName?: string): void;
+export interface ConnectWalletOptions extends ConnectRequest {
+    /** A kit to share rather than one made for this prompt. */
+    kit?: WalletKit;
+    /** Options for the kit this prompt makes, when it is making one. */
+    kitOptions?: WalletKitOptions;
+    theme?: WalletKitTheme;
+    /** Where to mount. A detached element on `document.body` by default. */
+    container?: HTMLElement;
+}
+/**
+ * Opens the picker and resolves with what the caller asked for.
+ *
+ * The whole point of the element for a host that only wants a value: filling
+ * a settlement address should be one call, not an element, two listeners and
+ * a piece of state.
+ *
+ * Rejects when the person closes it. That is a refusal, not a failure, and a
+ * caller that wants to ignore it can.
+ */
+export declare function connectWallet(options?: ConnectWalletOptions): Promise<ConnectResult>;

package/dist/element/index.d.ts

@@ -0,0 +1,4 @@
+export type { ReclackConnectAttributes, ReclackConnectProps, } from './attributes.js';
+export { ATTRIBUTES, attributesOf, EVENTS } from './props.js';
+export type { ConnectProps } from './props.js';
+export { connectWallet, defineWalletElement, ReclackConnectElement, type ConnectWalletOptions, } from './element.js';

package/dist/element/props.d.ts

@@ -0,0 +1,67 @@
+import type { ConnectRequest, ConnectResult, WalletKit, WalletKitTheme } from '@reclack/walletkit';
+/**
+ * What a framework component takes, as that framework's users expect it.
+ *
+ * The element underneath is `<reclack-connect>`, because a custom element's
+ * tag must be lowercase and contain a hyphen; that is the HTML spec, not a
+ * style choice. Nobody writing React or Preact should have to know it, so
+ * these wrappers exist: camelCase props, callbacks instead of
+ * `addEventListener`, and a component name that reads like every other
+ * component on the page.
+ */
+export interface ConnectProps {
+    /** A kit to share rather than one the element would make for itself. */
+    kit?: WalletKit;
+    /** The whole request, for an intent carrying assets. */
+    request?: ConnectRequest;
+    /** The whole theme, for per-mode overrides. */
+    theme?: WalletKitTheme;
+    /** `inline` for a list on the page, `modal` for the picker over it. */
+    variant?: 'inline' | 'modal';
+    /** Restricts the list to one chain family. Both when absent. */
+    family?: 'evm' | 'svm';
+    /** The EVM chain the wallet must end up on. No switch is forced without it. */
+    chainId?: number;
+    /** Shorthand for `request.intent`. */
+    intent?: Array<'address' | 'balance'>;
+    /** Hold the connection open afterwards, for a page that signs later. */
+    keepAlive?: boolean;
+    themeMode?: 'light' | 'dark' | 'system';
+    /** `#rrggbb`. Anything else is ignored and the default stands. */
+    brand?: string;
+    radius?: string;
+    fontFamily?: string;
+    /** Where the host serves this package's `assets/` directory from. */
+    assetBase?: string;
+    /** A different Reclack to read the wallet catalogue from, such as a sandbox. */
+    apiUrl?: string;
+    onConnect?: (result: ConnectResult) => void;
+    onCancel?: () => void;
+    onError?: (message: string) => void;
+}
+/** The props that are plain attributes, and what each is called in the DOM. */
+export declare const ATTRIBUTES: {
+    readonly variant: "variant";
+    readonly family: "family";
+    readonly chainId: "chain-id";
+    readonly themeMode: "theme-mode";
+    readonly brand: "brand";
+    readonly radius: "radius";
+    readonly fontFamily: "font";
+    readonly assetBase: "asset-base";
+    readonly apiUrl: "api-url";
+};
+/**
+ * Props to attributes, for whichever framework is rendering.
+ *
+ * Shared so the two wrappers cannot drift. Values are strings because
+ * attributes are; `undefined` is left out so the element falls back to its
+ * own default rather than parsing the word "undefined".
+ */
+export declare function attributesOf(props: ConnectProps): Record<string, string>;
+/** The events the element dispatches, and the callback each one answers. */
+export declare const EVENTS: {
+    readonly connect: "onConnect";
+    readonly cancel: "onCancel";
+    readonly 'connect-error': "onError";
+};

package/dist/element/ui/app.d.ts

@@ -0,0 +1,22 @@
+import { type ConnectRequest, type ConnectResult, type WalletKit } from '@reclack/walletkit';
+/**
+ * Where the picker sits.
+ *
+ * `inline` is the short list a checkout puts on the page, with the full
+ * catalogue folded behind one row. `modal` is the whole picker over the page,
+ * which is what a button marked "Connect wallet" opens.
+ *
+ * A modal here rather than a host wrapping the inline list in one: the dialog
+ * is a native `<dialog>`, so focus trapping, Esc, an inert background and a
+ * backdrop come from the platform rather than from a focus-trap library
+ * shipped on a page that takes payments.
+ */
+export type Variant = 'inline' | 'modal';
+export declare function ConnectApp({ kit, request, variant, onResult, onError, onClose, }: {
+    kit: WalletKit;
+    request: ConnectRequest;
+    variant: Variant;
+    onResult: (result: ConnectResult) => void;
+    onError: (message: string) => void;
+    onClose: () => void;
+}): import("preact").JSX.Element;

package/dist/element/ui/assets.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentChildren } from 'preact';
+export declare function AssetProvider({ base, children, }: {
+    base: string;
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
+/** The artwork for a wallet, or nothing where this package carries none. */
+export declare function useWalletLogo(): (id: string) => string | undefined;

package/dist/element/ui/qr.d.ts

@@ -0,0 +1,16 @@
+/**
+ * QR rendering for the wallet hand-off.
+ *
+ * The encoder is a dependency on purpose. QR generation is not something to
+ * hand-roll. Reed-Solomon over GF(256), mask selection and format bits are
+ * easy to get subtly wrong, and a code that looks right but does not scan is
+ * worse than none on a payment page.
+ *
+ * It is also NOT rendered through a remote service: the checkout URL is the
+ * credential for this payment, and handing it to an image API would leak every
+ * link a payer opens to a third party. uqr runs entirely in the page.
+ *
+ * Callers still handle `undefined`, so a failure to encode degrades to the
+ * copyable link rather than an empty frame.
+ */
+export declare function qrSvg(text: string): string | undefined;

package/dist/element/ui/use-handheld.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether this is a touch-primary device: a phone or a tablet.
+ *
+ * Matters because the wallet hand-off is the opposite on each. A desktop
+ * payer scans a code to carry the page to their phone; a phone payer cannot
+ * scan their own screen and needs a link into the wallet instead.
+ */
+export declare function useHandheld(): boolean;

package/dist/element/ui/wallet-connect-panel.d.ts

@@ -0,0 +1,26 @@
+import type { WalletChoice } from '@reclack/walletkit';
+/**
+ * The hand-off screen for one wallet.
+ *
+ * The way forward depends on the device. On a desktop the wallet is either in
+ * this browser or in the payer's pocket, so the panel offers a code to carry
+ * the checkout across. On a phone there is nothing to scan: the wallet is on
+ * this device, and the way in is a link that opens it.
+ */
+export declare function WalletConnectPanel<T extends WalletChoice>({ id, name, icon, detected, installUrl, connecting, error, onRemote, onConnect, }: {
+    id: string;
+    name: string;
+    icon?: string;
+    detected?: T;
+    installUrl?: string;
+    connecting: boolean;
+    /** What the wallet said when it refused, empty when it has not. */
+    error?: string;
+    /**
+     * Pairs with a wallet that puts nothing in the page, over WalletConnect.
+     * Absent when this wallet can be found some other way, or when the
+     * checkout has no project id to pair with.
+     */
+    onRemote?: (onUri: (uri: string) => void) => void;
+    onConnect: (wallet: T) => void;
+}): import("preact").JSX.Element;

package/dist/element/ui/wallet-dialog.d.ts

@@ -0,0 +1,37 @@
+import type { WalletChoice, WalletOption } from '@reclack/walletkit';
+/**
+ * The full wallet picker.
+ *
+ * Built on the native <dialog>: showModal() gives focus trapping, Esc to close,
+ * an inert background and a backdrop for free. A checkout should not ship a
+ * focus-trap library to reimplement what the platform already does correctly.
+ */
+export declare function WalletDialog<T extends WalletChoice>({ open, wallets, registry, connecting, connected, error, initialWalletId, remotePairing, onSelect, onClose, }: {
+    open: boolean;
+    wallets: T[];
+    /**
+     * The wallets that exist, installed or not, so one that is missing can
+     * still be found and installed. Empty when the catalogue has not loaded,
+     * which leaves the detected wallets listed and nothing to install.
+     */
+    registry?: WalletOption[];
+    connecting: boolean;
+    /** True once a wallet is connected, which is what closes the dialog. */
+    connected?: boolean;
+    /** What the wallet said when it refused, empty when it has not. */
+    error?: string;
+    /**
+     * Open straight into this wallet's hand-off rather than the list, for a
+     * payer who already named the wallet they want outside the dialog.
+     */
+    initialWalletId?: string;
+    /**
+     * How to pair with one wallet over WalletConnect, or undefined for a
+     * wallet the page can see for itself. Asked per wallet rather than given
+     * as a list, because only the checkout knows which chain family is on
+     * screen and which chain a pairing is for.
+     */
+    remotePairing?: (walletId: string) => ((onUri: (uri: string) => void) => void) | undefined;
+    onSelect: (wallet: T) => void;
+    onClose: () => void;
+}): import("preact").JSX.Element;