@qrlwallet/connect-ui 0.1.0

package/README.md

@@ -0,0 +1,100 @@
+# @qrlwallet/connect-ui
+
+The MyQRLWallet pairing dialog as a framework-free web component, for dApps using [`@qrlwallet/connect`](https://github.com/DigitalGuards/myqrlwallet-connect). One import replaces the QR modal every dApp used to hand-copy.
+
+- `<qrl-pairing-modal>`: shadow-DOM custom element, themeable with CSS custom properties, dark MyQRLWallet look by default.
+- `showPairingModal(provider)`: one-line helper that wires the modal to a connect provider and resolves when pairing finishes.
+- Zero framework dependencies; works in React, Vue, Svelte and plain HTML alike. Only runtime dependency is the `qrcode` encoder.
+- Purely presentational: consumes only the SDK's public API and contains no cryptography. Keys, sessions and protocol live in `@qrlwallet/connect`.
+
+## Install
+
+```bash
+npm install @qrlwallet/connect @qrlwallet/connect-ui
+```
+
+## Quick start
+
+```ts
+import { QRLConnect } from '@qrlwallet/connect';
+import { showPairingModal } from '@qrlwallet/connect-ui';
+
+const provider = new QRLConnect({
+  dappMetadata: { name: 'My dApp', url: location.origin },
+  autoReconnect: true,
+});
+
+const result = await showPairingModal(provider);
+// 'connected'  -> handshake completed, start using provider.request()
+// 'cancelled'  -> user dismissed the dialog
+// 'redirected' -> mobile browser navigated to the wallet deep link
+
+if (result === 'connected') {
+  const accounts = await provider.request({ method: 'qrl_requestAccounts' });
+}
+```
+
+`showPairingModal` reuses a stored session URI when one exists. To force a fresh pairing (tear down the old channel and rotate keys), pass `{ fresh: true }`; wire that to your "New connection" affordance outside the modal if you have one. Inside the modal the New connection action already rotates in place.
+
+### Options
+
+| Option | Default | Meaning |
+|---|---|---|
+| `fresh` | `false` | Start from `newConnection()` instead of the stored session URI |
+| `walletName` | `"MyQRLWallet"` | Dialog title branding |
+| `walletUrl` | `https://myqrlwallet.com` | Get-the-wallet link under the title (app downloads; intentionally a different host than `webWalletUrl`) |
+| `webWalletUrl` | `https://qrlwallet.com` | Base URL for the "Open web wallet" action; pass `''` to hide it |
+| `container` | `document.body` | Mount point for the modal element |
+| `mobileRedirect` | `true` | On mobile browsers navigate straight to the `qrlconnect://` deep link instead of showing a QR |
+
+## Using the element directly
+
+If you manage the pairing lifecycle yourself (as the existing dApps do with their `useQrlWallet`-style hooks), render the element and feed it attributes:
+
+```ts
+import { defineQrlPairingModal } from '@qrlwallet/connect-ui';
+
+defineQrlPairingModal();
+```
+
+```html
+<qrl-pairing-modal
+  uri="qrlconnect://pair?..."
+  status="waiting"
+></qrl-pairing-modal>
+```
+
+Attributes: `uri`, `status`, `wallet-name`, `wallet-url`, `web-wallet-url` (absent = default web wallet, empty string = hide the action). Events (bubbling, composed): `qrl-new-connection` when the user asks for a fresh pairing, `qrl-cancel` when the dialog is dismissed (Cancel action, Escape, or backdrop click). The element renders nothing outside its own box: mount and remove it to show and hide.
+
+### The web-wallet handoff link
+
+"Open web wallet" opens `<web-wallet-url>/dapp-sessions#qrlconnect=<encodeURIComponent(uri)>` in a new tab; the wallet reads the fragment, scrubs it from the address bar, and asks the user to approve. The URI travels in the URL fragment so it never reaches any server. If you build this link yourself, the `encodeURIComponent` step is mandatory: an un-encoded URI truncates at its first `&` or `#`. Requires a wallet deployment that reads the fragment; older deployments ignore it entirely (no pairing starts, and the URI lingers in the address bar), which is why the wallet ingress ships first.
+
+## Theming
+
+Set CSS custom properties on the element or any ancestor:
+
+| Property | Default | Role |
+|---|---|---|
+| `--qrl-modal-accent` | `#f97316` | Left card border, hover + focus accents |
+| `--qrl-modal-bg` | `#0f172a` | Card background |
+| `--qrl-modal-fg` | `#e2e8f0` | Primary text |
+| `--qrl-modal-muted` | `#94a3b8` | Secondary text |
+| `--qrl-modal-link` | `#38bdf8` | Links and link-style buttons |
+| `--qrl-modal-border` | `rgba(148,163,184,.25)` | Card + button borders |
+| `--qrl-modal-radius` | `12px` | Card corner radius |
+| `--qrl-modal-backdrop` | `rgba(2,6,23,.8)` | Backdrop overlay |
+| `--qrl-modal-font` | system stack | Font family |
+| `--qrl-modal-z` | `2147483000` | Backdrop z-index |
+
+## Accessibility
+
+`role="dialog"` with `aria-modal`, labelled title, focus moved into the dialog on open and restored on close, Tab focus trap, Escape to dismiss, `aria-live` status line.
+
+## Why a separate package
+
+The core SDK keeps a small, auditable, crypto-fenced surface. UI code and the QR encoder dependency deliberately live here instead, so dApps that build their own pairing UI never pull them in.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,95 @@
+declare const QRL_PAIRING_MODAL_TAG = "qrl-pairing-modal";
+declare class QrlPairingModal extends HTMLElement {
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private readonly card;
+    private readonly titleEl;
+    private readonly walletLink;
+    private readonly qrBox;
+    private readonly statusEl;
+    private readonly webLink;
+    private readonly openLink;
+    private readonly copyLabel;
+    private qrToken;
+    private lastQrUri;
+    private copyTimer;
+    private restoreFocus;
+    constructor();
+    get uri(): string | null;
+    set uri(value: string | null);
+    attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private fire;
+    private syncAll;
+    private syncWallet;
+    private syncStatus;
+    private syncUri;
+    /**
+     * The web-wallet handoff: an https link carrying the pairing URI in the
+     * URL fragment (never sent to servers; the wallet scrubs and stages it
+     * behind its consent modal). Attribute absent = default web wallet;
+     * attribute set but empty = feature disabled. Hidden links carry no href,
+     * which also keeps them out of the focus trap.
+     */
+    private syncWebWalletLink;
+    private renderQr;
+    private copyUri;
+    private showCopyFeedback;
+    private focusables;
+    private handleKeydown;
+}
+declare function defineQrlPairingModal(tagName?: string): void;
+
+/**
+ * Structural subset of QRLConnectProvider that the modal needs. Kept
+ * duck-typed so @qrlwallet/connect stays an optional peer dependency;
+ * a compile-time test asserts the real provider satisfies it.
+ */
+interface PairingProvider {
+    /** Returns the pairing URI, reusing a stored session when available. */
+    getConnectionURI(): Promise<string>;
+    /** Tears down the existing pairing and rotates to a fresh channel/keys. */
+    newConnection(): Promise<string>;
+    isMobile(): boolean;
+    on(event: 'connect', listener: (info: {
+        chainId: string;
+    }) => void): unknown;
+    on(event: 'statusChanged', listener: (status: string) => void): unknown;
+    off(event: 'connect', listener: (info: {
+        chainId: string;
+    }) => void): unknown;
+    off(event: 'statusChanged', listener: (status: string) => void): unknown;
+}
+type PairingResult = 'connected' | 'cancelled' | 'redirected';
+interface ShowPairingOptions {
+    /** Tear down any existing pairing and rotate channel/keys first. */
+    fresh?: boolean;
+    /** Shown in the dialog title. Default "MyQRLWallet". */
+    walletName?: string;
+    /** Get-the-wallet link under the title. Default https://myqrlwallet.com. */
+    walletUrl?: string;
+    /**
+     * Base URL for the "Open web wallet" handoff (the pairing URI travels in
+     * the URL fragment). Default https://qrlwallet.com; pass '' to hide the
+     * web-wallet action.
+     */
+    webWalletUrl?: string;
+    /** Where to mount the modal. Default document.body. */
+    container?: HTMLElement;
+    /**
+     * On mobile browsers navigate straight to the qrlconnect:// deep link
+     * instead of showing a QR (the wallet app opens in the foreground).
+     * Default true.
+     */
+    mobileRedirect?: boolean;
+}
+/**
+ * Shows the pairing dialog and resolves when the pairing reaches a
+ * terminal state: 'connected' (handshake completed), 'cancelled' (user
+ * dismissed the dialog), or 'redirected' (mobile deep-link navigation;
+ * the page is likely being backgrounded).
+ */
+declare function showPairingModal(provider: PairingProvider, options?: ShowPairingOptions): Promise<PairingResult>;
+
+export { type PairingProvider, type PairingResult, QRL_PAIRING_MODAL_TAG, QrlPairingModal, type ShowPairingOptions, defineQrlPairingModal, showPairingModal };

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+declare const QRL_PAIRING_MODAL_TAG = "qrl-pairing-modal";
+declare class QrlPairingModal extends HTMLElement {
+    static get observedAttributes(): string[];
+    private readonly shadow;
+    private readonly card;
+    private readonly titleEl;
+    private readonly walletLink;
+    private readonly qrBox;
+    private readonly statusEl;
+    private readonly webLink;
+    private readonly openLink;
+    private readonly copyLabel;
+    private qrToken;
+    private lastQrUri;
+    private copyTimer;
+    private restoreFocus;
+    constructor();
+    get uri(): string | null;
+    set uri(value: string | null);
+    attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private fire;
+    private syncAll;
+    private syncWallet;
+    private syncStatus;
+    private syncUri;
+    /**
+     * The web-wallet handoff: an https link carrying the pairing URI in the
+     * URL fragment (never sent to servers; the wallet scrubs and stages it
+     * behind its consent modal). Attribute absent = default web wallet;
+     * attribute set but empty = feature disabled. Hidden links carry no href,
+     * which also keeps them out of the focus trap.
+     */
+    private syncWebWalletLink;
+    private renderQr;
+    private copyUri;
+    private showCopyFeedback;
+    private focusables;
+    private handleKeydown;
+}
+declare function defineQrlPairingModal(tagName?: string): void;
+
+/**
+ * Structural subset of QRLConnectProvider that the modal needs. Kept
+ * duck-typed so @qrlwallet/connect stays an optional peer dependency;
+ * a compile-time test asserts the real provider satisfies it.
+ */
+interface PairingProvider {
+    /** Returns the pairing URI, reusing a stored session when available. */
+    getConnectionURI(): Promise<string>;
+    /** Tears down the existing pairing and rotates to a fresh channel/keys. */
+    newConnection(): Promise<string>;
+    isMobile(): boolean;
+    on(event: 'connect', listener: (info: {
+        chainId: string;
+    }) => void): unknown;
+    on(event: 'statusChanged', listener: (status: string) => void): unknown;
+    off(event: 'connect', listener: (info: {
+        chainId: string;
+    }) => void): unknown;
+    off(event: 'statusChanged', listener: (status: string) => void): unknown;
+}
+type PairingResult = 'connected' | 'cancelled' | 'redirected';
+interface ShowPairingOptions {
+    /** Tear down any existing pairing and rotate channel/keys first. */
+    fresh?: boolean;
+    /** Shown in the dialog title. Default "MyQRLWallet". */
+    walletName?: string;
+    /** Get-the-wallet link under the title. Default https://myqrlwallet.com. */
+    walletUrl?: string;
+    /**
+     * Base URL for the "Open web wallet" handoff (the pairing URI travels in
+     * the URL fragment). Default https://qrlwallet.com; pass '' to hide the
+     * web-wallet action.
+     */
+    webWalletUrl?: string;
+    /** Where to mount the modal. Default document.body. */
+    container?: HTMLElement;
+    /**
+     * On mobile browsers navigate straight to the qrlconnect:// deep link
+     * instead of showing a QR (the wallet app opens in the foreground).
+     * Default true.
+     */
+    mobileRedirect?: boolean;
+}
+/**
+ * Shows the pairing dialog and resolves when the pairing reaches a
+ * terminal state: 'connected' (handshake completed), 'cancelled' (user
+ * dismissed the dialog), or 'redirected' (mobile deep-link navigation;
+ * the page is likely being backgrounded).
+ */
+declare function showPairingModal(provider: PairingProvider, options?: ShowPairingOptions): Promise<PairingResult>;
+
+export { type PairingProvider, type PairingResult, QRL_PAIRING_MODAL_TAG, QrlPairingModal, type ShowPairingOptions, defineQrlPairingModal, showPairingModal };

package/dist/index.js

@@ -0,0 +1,538 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  QRL_PAIRING_MODAL_TAG: () => QRL_PAIRING_MODAL_TAG,
+  QrlPairingModal: () => QrlPairingModal,
+  defineQrlPairingModal: () => defineQrlPairingModal,
+  showPairingModal: () => showPairingModal
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/qr.ts
+var import_qrcode = __toESM(require("qrcode"));
+async function qrSvg(text) {
+  return import_qrcode.default.toString(text, {
+    type: "svg",
+    margin: 2,
+    errorCorrectionLevel: "M",
+    color: { dark: "#000000", light: "#ffffff" }
+  });
+}
+
+// src/styles.ts
+var modalStyles = `
+:host {
+  --qrl-modal-accent: #f97316;
+  --qrl-modal-bg: #0f172a;
+  --qrl-modal-fg: #e2e8f0;
+  --qrl-modal-muted: #94a3b8;
+  --qrl-modal-link: #38bdf8;
+  --qrl-modal-border: rgba(148, 163, 184, 0.25);
+  --qrl-modal-radius: 12px;
+  --qrl-modal-backdrop: rgba(2, 6, 23, 0.8);
+  --qrl-modal-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --qrl-modal-z: 2147483000;
+}
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--qrl-modal-z);
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  background: var(--qrl-modal-backdrop);
+  backdrop-filter: blur(4px);
+}
+.card {
+  width: 100%;
+  max-width: 24rem;
+  background: var(--qrl-modal-bg);
+  color: var(--qrl-modal-fg);
+  border: 1px solid var(--qrl-modal-border);
+  border-left: 2px solid var(--qrl-modal-accent);
+  border-radius: var(--qrl-modal-radius);
+  font-family: var(--qrl-modal-font);
+  padding: 20px;
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+}
+h2 {
+  margin: 0 0 6px;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.sub {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  color: var(--qrl-modal-muted);
+  line-height: 1.5;
+}
+.sub a {
+  color: var(--qrl-modal-link);
+  text-decoration: none;
+}
+.sub a:hover {
+  text-decoration: underline;
+}
+.qr {
+  display: grid;
+  place-items: center;
+  margin: 0 auto 12px;
+  width: 240px;
+  min-height: 240px;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 8px;
+  color: #334155;
+  font-size: 0.8rem;
+}
+.qr svg {
+  display: block;
+  width: 240px;
+  height: 240px;
+}
+.status {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  color: var(--qrl-modal-muted);
+  min-height: 1em;
+}
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 10px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--qrl-modal-fg);
+  background: transparent;
+  border: 1px solid var(--qrl-modal-border);
+  border-radius: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  font-family: inherit;
+}
+.btn:hover {
+  border-color: var(--qrl-modal-accent);
+}
+.btn.wide {
+  grid-column: 1 / -1;
+}
+.btn[hidden] {
+  display: none;
+}
+.btn:focus-visible,
+.link:focus-visible {
+  outline: 2px solid var(--qrl-modal-accent);
+  outline-offset: 2px;
+}
+.hint {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--qrl-modal-muted);
+}
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--qrl-modal-link);
+  cursor: pointer;
+}
+.link:hover {
+  text-decoration: underline;
+}
+.icon {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+.icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+`;
+var iconSvg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+var ICON_EXTERNAL_LINK = iconSvg(
+  '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>'
+);
+var ICON_COPY = iconSvg(
+  '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>'
+);
+var ICON_REFRESH = iconSvg(
+  '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>'
+);
+
+// src/element.ts
+var QRL_PAIRING_MODAL_TAG = "qrl-pairing-modal";
+var COPY_FEEDBACK_MS = 1500;
+var isPairingUri = (uri) => uri.startsWith("qrlconnect:");
+var isWebUrl = (url) => url.startsWith("https://") || url.startsWith("http://");
+function makeIcon(svg) {
+  const span = document.createElement("span");
+  span.className = "icon";
+  span.innerHTML = svg;
+  return span;
+}
+var QrlPairingModal = class extends HTMLElement {
+  constructor() {
+    super();
+    this.qrToken = 0;
+    this.lastQrUri = null;
+    this.copyTimer = null;
+    this.restoreFocus = null;
+    this.shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = modalStyles;
+    const backdrop = document.createElement("div");
+    backdrop.className = "backdrop";
+    backdrop.addEventListener("mousedown", (event) => {
+      if (event.target === backdrop) this.fire("qrl-cancel");
+    });
+    this.card = document.createElement("div");
+    this.card.className = "card";
+    this.card.setAttribute("role", "dialog");
+    this.card.setAttribute("aria-modal", "true");
+    this.card.setAttribute("aria-labelledby", "qrl-pairing-title");
+    this.card.tabIndex = -1;
+    this.titleEl = document.createElement("h2");
+    this.titleEl.id = "qrl-pairing-title";
+    const sub = document.createElement("p");
+    sub.className = "sub";
+    sub.append("Scan with the mobile app, or open the web wallet. Get the apps at ");
+    this.walletLink = document.createElement("a");
+    this.walletLink.target = "_blank";
+    this.walletLink.rel = "noreferrer";
+    sub.append(this.walletLink);
+    this.qrBox = document.createElement("div");
+    this.qrBox.className = "qr";
+    this.qrBox.setAttribute("aria-label", "qrlconnect pairing QR code");
+    this.statusEl = document.createElement("p");
+    this.statusEl.className = "status";
+    this.statusEl.setAttribute("aria-live", "polite");
+    const actions = document.createElement("div");
+    actions.className = "actions";
+    this.webLink = document.createElement("a");
+    this.webLink.className = "btn wide web";
+    this.webLink.target = "_blank";
+    this.webLink.rel = "noreferrer";
+    this.webLink.title = "Opens the web wallet in a new tab to approve this connection";
+    this.webLink.append(makeIcon(ICON_EXTERNAL_LINK), "Open web wallet");
+    this.openLink = document.createElement("a");
+    this.openLink.className = "btn desktop";
+    this.openLink.title = "Opens the MyQRLWallet desktop app if installed";
+    this.openLink.append(makeIcon(ICON_EXTERNAL_LINK), "Open desktop app");
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "btn";
+    this.copyLabel = document.createElement("span");
+    this.copyLabel.textContent = "Copy code";
+    copyBtn.append(makeIcon(ICON_COPY), this.copyLabel);
+    copyBtn.addEventListener("click", () => {
+      this.copyUri();
+    });
+    actions.append(this.webLink, this.openLink, copyBtn);
+    const hint = document.createElement("p");
+    hint.className = "hint";
+    hint.textContent = "No protocol handler? Copy the code and paste it under dApp Sessions in the desktop or web wallet.";
+    const links = document.createElement("div");
+    links.className = "links";
+    const newBtn = document.createElement("button");
+    newBtn.type = "button";
+    newBtn.className = "link";
+    newBtn.append(makeIcon(ICON_REFRESH), "New connection");
+    newBtn.addEventListener("click", () => {
+      this.fire("qrl-new-connection");
+    });
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "link";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", () => {
+      this.fire("qrl-cancel");
+    });
+    links.append(newBtn, cancelBtn);
+    this.card.append(this.titleEl, sub, this.qrBox, this.statusEl, actions, hint, links);
+    backdrop.append(this.card);
+    this.shadow.append(style, backdrop);
+    this.addEventListener("keydown", (event) => {
+      this.handleKeydown(event);
+    });
+    this.syncAll();
+  }
+  static get observedAttributes() {
+    return ["uri", "status", "wallet-name", "wallet-url", "web-wallet-url"];
+  }
+  get uri() {
+    return this.getAttribute("uri");
+  }
+  set uri(value) {
+    if (value === null) this.removeAttribute("uri");
+    else this.setAttribute("uri", value);
+  }
+  attributeChangedCallback(name, _oldValue, _newValue) {
+    switch (name) {
+      case "uri":
+        this.syncUri();
+        this.syncWebWalletLink();
+        break;
+      case "status":
+        this.syncStatus();
+        break;
+      case "wallet-name":
+      case "wallet-url":
+        this.syncWallet();
+        break;
+      case "web-wallet-url":
+        this.syncWebWalletLink();
+        break;
+      default:
+        break;
+    }
+  }
+  connectedCallback() {
+    const active = document.activeElement;
+    this.restoreFocus = active instanceof HTMLElement ? active : null;
+    queueMicrotask(() => {
+      if (this.isConnected) this.card.focus();
+    });
+  }
+  disconnectedCallback() {
+    if (this.copyTimer !== null) clearTimeout(this.copyTimer);
+    this.copyTimer = null;
+    if (this.restoreFocus?.isConnected) this.restoreFocus.focus();
+    this.restoreFocus = null;
+    this.fire("qrl-cancel");
+  }
+  fire(name) {
+    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));
+  }
+  syncAll() {
+    this.syncWallet();
+    this.syncStatus();
+    this.syncUri();
+    this.syncWebWalletLink();
+  }
+  syncWallet() {
+    const name = this.getAttribute("wallet-name") ?? "MyQRLWallet";
+    const url = this.getAttribute("wallet-url") ?? "https://myqrlwallet.com";
+    this.titleEl.textContent = `Pair ${name}`;
+    this.walletLink.textContent = url.replace(/^https?:\/\//, "");
+    if (isWebUrl(url)) this.walletLink.setAttribute("href", url);
+    else this.walletLink.removeAttribute("href");
+  }
+  syncStatus() {
+    const status = this.getAttribute("status");
+    this.statusEl.textContent = status !== null && status !== "" ? `status: ${status}` : "";
+  }
+  syncUri() {
+    const uri = this.getAttribute("uri");
+    if (uri !== null && isPairingUri(uri)) this.openLink.setAttribute("href", uri);
+    else this.openLink.removeAttribute("href");
+    if (uri === this.lastQrUri) return;
+    this.lastQrUri = uri;
+    this.renderQr(uri);
+  }
+  /**
+   * The web-wallet handoff: an https link carrying the pairing URI in the
+   * URL fragment (never sent to servers; the wallet scrubs and stages it
+   * behind its consent modal). Attribute absent = default web wallet;
+   * attribute set but empty = feature disabled. Hidden links carry no href,
+   * which also keeps them out of the focus trap.
+   */
+  syncWebWalletLink() {
+    const attr = this.getAttribute("web-wallet-url");
+    const base = attr ?? "https://qrlwallet.com";
+    const uri = this.getAttribute("uri");
+    const enabled = base !== "" && isWebUrl(base) && uri !== null && isPairingUri(uri);
+    if (!enabled) {
+      this.webLink.removeAttribute("href");
+      this.webLink.hidden = true;
+      return;
+    }
+    this.webLink.hidden = false;
+    this.webLink.setAttribute(
+      "href",
+      `${base.replace(/\/+$/, "")}/dapp-sessions#qrlconnect=${encodeURIComponent(uri)}`
+    );
+  }
+  renderQr(uri) {
+    const token = ++this.qrToken;
+    if (uri === null || uri === "") {
+      this.qrBox.textContent = "";
+      return;
+    }
+    this.qrBox.textContent = "Generating\u2026";
+    void qrSvg(uri).then((svg) => {
+      if (token !== this.qrToken) return;
+      this.qrBox.innerHTML = svg;
+    }).catch(() => {
+      if (token === this.qrToken) this.qrBox.textContent = "Could not render the QR code";
+    });
+  }
+  copyUri() {
+    const uri = this.getAttribute("uri") ?? "";
+    const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+    if (uri === "" || clipboard === void 0) {
+      this.showCopyFeedback("Copy failed");
+      return;
+    }
+    void clipboard.writeText(uri).then(() => {
+      this.showCopyFeedback("Copied!");
+    }).catch(() => {
+      this.showCopyFeedback("Copy failed");
+    });
+  }
+  showCopyFeedback(text) {
+    this.copyLabel.textContent = text;
+    if (this.copyTimer !== null) clearTimeout(this.copyTimer);
+    this.copyTimer = setTimeout(() => {
+      this.copyLabel.textContent = "Copy code";
+      this.copyTimer = null;
+    }, COPY_FEEDBACK_MS);
+  }
+  focusables() {
+    const nodes = this.shadow.querySelectorAll("a[href], button");
+    const result = [];
+    nodes.forEach((node) => {
+      if (node instanceof HTMLElement) result.push(node);
+    });
+    return result;
+  }
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      this.fire("qrl-cancel");
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = this.focusables();
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (first === void 0 || last === void 0) return;
+    const active = this.shadow.activeElement;
+    if (event.shiftKey && (active === first || active === this.card)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+};
+function defineQrlPairingModal(tagName = QRL_PAIRING_MODAL_TAG) {
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(tagName) === void 0) customElements.define(tagName, QrlPairingModal);
+}
+
+// src/show.ts
+async function showPairingModal(provider, options = {}) {
+  const uri = options.fresh === true ? await provider.newConnection() : await provider.getConnectionURI();
+  if ((options.mobileRedirect ?? true) && provider.isMobile()) {
+    if (!isPairingUri(uri)) {
+      throw new Error("refusing to redirect: pairing URI does not use the qrlconnect: scheme");
+    }
+    window.location.href = uri;
+    return "redirected";
+  }
+  defineQrlPairingModal();
+  const modal = new QrlPairingModal();
+  modal.setAttribute("uri", uri);
+  if (options.walletName !== void 0) modal.setAttribute("wallet-name", options.walletName);
+  if (options.walletUrl !== void 0) modal.setAttribute("wallet-url", options.walletUrl);
+  if (options.webWalletUrl !== void 0) {
+    modal.setAttribute("web-wallet-url", options.webWalletUrl);
+  }
+  const container = options.container ?? document.body;
+  return new Promise((resolve) => {
+    let settled = false;
+    const onStatus = (status) => {
+      modal.setAttribute("status", status);
+    };
+    const onConnect = () => {
+      finish("connected");
+    };
+    function finish(result) {
+      if (settled) return;
+      settled = true;
+      provider.off("connect", onConnect);
+      provider.off("statusChanged", onStatus);
+      modal.remove();
+      resolve(result);
+    }
+    modal.addEventListener("qrl-cancel", () => {
+      finish("cancelled");
+    });
+    modal.addEventListener("qrl-new-connection", () => {
+      modal.setAttribute("status", "rotating\u2026");
+      void provider.newConnection().then((fresh) => {
+        if (!settled) modal.setAttribute("uri", fresh);
+      }).catch((err) => {
+        if (!settled) {
+          modal.setAttribute(
+            "status",
+            err instanceof Error ? err.message : "could not rotate the connection"
+          );
+        }
+      });
+    });
+    provider.on("statusChanged", onStatus);
+    provider.on("connect", onConnect);
+    container.appendChild(modal);
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  QRL_PAIRING_MODAL_TAG,
+  QrlPairingModal,
+  defineQrlPairingModal,
+  showPairingModal
+});

package/dist/index.mjs

@@ -0,0 +1,498 @@
+// src/qr.ts
+import QRCode from "qrcode";
+async function qrSvg(text) {
+  return QRCode.toString(text, {
+    type: "svg",
+    margin: 2,
+    errorCorrectionLevel: "M",
+    color: { dark: "#000000", light: "#ffffff" }
+  });
+}
+
+// src/styles.ts
+var modalStyles = `
+:host {
+  --qrl-modal-accent: #f97316;
+  --qrl-modal-bg: #0f172a;
+  --qrl-modal-fg: #e2e8f0;
+  --qrl-modal-muted: #94a3b8;
+  --qrl-modal-link: #38bdf8;
+  --qrl-modal-border: rgba(148, 163, 184, 0.25);
+  --qrl-modal-radius: 12px;
+  --qrl-modal-backdrop: rgba(2, 6, 23, 0.8);
+  --qrl-modal-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --qrl-modal-z: 2147483000;
+}
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--qrl-modal-z);
+  display: grid;
+  place-items: center;
+  padding: 16px;
+  background: var(--qrl-modal-backdrop);
+  backdrop-filter: blur(4px);
+}
+.card {
+  width: 100%;
+  max-width: 24rem;
+  background: var(--qrl-modal-bg);
+  color: var(--qrl-modal-fg);
+  border: 1px solid var(--qrl-modal-border);
+  border-left: 2px solid var(--qrl-modal-accent);
+  border-radius: var(--qrl-modal-radius);
+  font-family: var(--qrl-modal-font);
+  padding: 20px;
+  box-sizing: border-box;
+  text-align: center;
+  outline: none;
+}
+h2 {
+  margin: 0 0 6px;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.sub {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  color: var(--qrl-modal-muted);
+  line-height: 1.5;
+}
+.sub a {
+  color: var(--qrl-modal-link);
+  text-decoration: none;
+}
+.sub a:hover {
+  text-decoration: underline;
+}
+.qr {
+  display: grid;
+  place-items: center;
+  margin: 0 auto 12px;
+  width: 240px;
+  min-height: 240px;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 8px;
+  color: #334155;
+  font-size: 0.8rem;
+}
+.qr svg {
+  display: block;
+  width: 240px;
+  height: 240px;
+}
+.status {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  color: var(--qrl-modal-muted);
+  min-height: 1em;
+}
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 10px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--qrl-modal-fg);
+  background: transparent;
+  border: 1px solid var(--qrl-modal-border);
+  border-radius: 8px;
+  cursor: pointer;
+  text-decoration: none;
+  font-family: inherit;
+}
+.btn:hover {
+  border-color: var(--qrl-modal-accent);
+}
+.btn.wide {
+  grid-column: 1 / -1;
+}
+.btn[hidden] {
+  display: none;
+}
+.btn:focus-visible,
+.link:focus-visible {
+  outline: 2px solid var(--qrl-modal-accent);
+  outline-offset: 2px;
+}
+.hint {
+  margin: 0 0 12px;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: var(--qrl-modal-muted);
+}
+.links {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--qrl-modal-link);
+  cursor: pointer;
+}
+.link:hover {
+  text-decoration: underline;
+}
+.icon {
+  width: 14px;
+  height: 14px;
+  flex: none;
+}
+.icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+`;
+var iconSvg = (body) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+var ICON_EXTERNAL_LINK = iconSvg(
+  '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>'
+);
+var ICON_COPY = iconSvg(
+  '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>'
+);
+var ICON_REFRESH = iconSvg(
+  '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>'
+);
+
+// src/element.ts
+var QRL_PAIRING_MODAL_TAG = "qrl-pairing-modal";
+var COPY_FEEDBACK_MS = 1500;
+var isPairingUri = (uri) => uri.startsWith("qrlconnect:");
+var isWebUrl = (url) => url.startsWith("https://") || url.startsWith("http://");
+function makeIcon(svg) {
+  const span = document.createElement("span");
+  span.className = "icon";
+  span.innerHTML = svg;
+  return span;
+}
+var QrlPairingModal = class extends HTMLElement {
+  constructor() {
+    super();
+    this.qrToken = 0;
+    this.lastQrUri = null;
+    this.copyTimer = null;
+    this.restoreFocus = null;
+    this.shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = modalStyles;
+    const backdrop = document.createElement("div");
+    backdrop.className = "backdrop";
+    backdrop.addEventListener("mousedown", (event) => {
+      if (event.target === backdrop) this.fire("qrl-cancel");
+    });
+    this.card = document.createElement("div");
+    this.card.className = "card";
+    this.card.setAttribute("role", "dialog");
+    this.card.setAttribute("aria-modal", "true");
+    this.card.setAttribute("aria-labelledby", "qrl-pairing-title");
+    this.card.tabIndex = -1;
+    this.titleEl = document.createElement("h2");
+    this.titleEl.id = "qrl-pairing-title";
+    const sub = document.createElement("p");
+    sub.className = "sub";
+    sub.append("Scan with the mobile app, or open the web wallet. Get the apps at ");
+    this.walletLink = document.createElement("a");
+    this.walletLink.target = "_blank";
+    this.walletLink.rel = "noreferrer";
+    sub.append(this.walletLink);
+    this.qrBox = document.createElement("div");
+    this.qrBox.className = "qr";
+    this.qrBox.setAttribute("aria-label", "qrlconnect pairing QR code");
+    this.statusEl = document.createElement("p");
+    this.statusEl.className = "status";
+    this.statusEl.setAttribute("aria-live", "polite");
+    const actions = document.createElement("div");
+    actions.className = "actions";
+    this.webLink = document.createElement("a");
+    this.webLink.className = "btn wide web";
+    this.webLink.target = "_blank";
+    this.webLink.rel = "noreferrer";
+    this.webLink.title = "Opens the web wallet in a new tab to approve this connection";
+    this.webLink.append(makeIcon(ICON_EXTERNAL_LINK), "Open web wallet");
+    this.openLink = document.createElement("a");
+    this.openLink.className = "btn desktop";
+    this.openLink.title = "Opens the MyQRLWallet desktop app if installed";
+    this.openLink.append(makeIcon(ICON_EXTERNAL_LINK), "Open desktop app");
+    const copyBtn = document.createElement("button");
+    copyBtn.type = "button";
+    copyBtn.className = "btn";
+    this.copyLabel = document.createElement("span");
+    this.copyLabel.textContent = "Copy code";
+    copyBtn.append(makeIcon(ICON_COPY), this.copyLabel);
+    copyBtn.addEventListener("click", () => {
+      this.copyUri();
+    });
+    actions.append(this.webLink, this.openLink, copyBtn);
+    const hint = document.createElement("p");
+    hint.className = "hint";
+    hint.textContent = "No protocol handler? Copy the code and paste it under dApp Sessions in the desktop or web wallet.";
+    const links = document.createElement("div");
+    links.className = "links";
+    const newBtn = document.createElement("button");
+    newBtn.type = "button";
+    newBtn.className = "link";
+    newBtn.append(makeIcon(ICON_REFRESH), "New connection");
+    newBtn.addEventListener("click", () => {
+      this.fire("qrl-new-connection");
+    });
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.className = "link";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", () => {
+      this.fire("qrl-cancel");
+    });
+    links.append(newBtn, cancelBtn);
+    this.card.append(this.titleEl, sub, this.qrBox, this.statusEl, actions, hint, links);
+    backdrop.append(this.card);
+    this.shadow.append(style, backdrop);
+    this.addEventListener("keydown", (event) => {
+      this.handleKeydown(event);
+    });
+    this.syncAll();
+  }
+  static get observedAttributes() {
+    return ["uri", "status", "wallet-name", "wallet-url", "web-wallet-url"];
+  }
+  get uri() {
+    return this.getAttribute("uri");
+  }
+  set uri(value) {
+    if (value === null) this.removeAttribute("uri");
+    else this.setAttribute("uri", value);
+  }
+  attributeChangedCallback(name, _oldValue, _newValue) {
+    switch (name) {
+      case "uri":
+        this.syncUri();
+        this.syncWebWalletLink();
+        break;
+      case "status":
+        this.syncStatus();
+        break;
+      case "wallet-name":
+      case "wallet-url":
+        this.syncWallet();
+        break;
+      case "web-wallet-url":
+        this.syncWebWalletLink();
+        break;
+      default:
+        break;
+    }
+  }
+  connectedCallback() {
+    const active = document.activeElement;
+    this.restoreFocus = active instanceof HTMLElement ? active : null;
+    queueMicrotask(() => {
+      if (this.isConnected) this.card.focus();
+    });
+  }
+  disconnectedCallback() {
+    if (this.copyTimer !== null) clearTimeout(this.copyTimer);
+    this.copyTimer = null;
+    if (this.restoreFocus?.isConnected) this.restoreFocus.focus();
+    this.restoreFocus = null;
+    this.fire("qrl-cancel");
+  }
+  fire(name) {
+    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));
+  }
+  syncAll() {
+    this.syncWallet();
+    this.syncStatus();
+    this.syncUri();
+    this.syncWebWalletLink();
+  }
+  syncWallet() {
+    const name = this.getAttribute("wallet-name") ?? "MyQRLWallet";
+    const url = this.getAttribute("wallet-url") ?? "https://myqrlwallet.com";
+    this.titleEl.textContent = `Pair ${name}`;
+    this.walletLink.textContent = url.replace(/^https?:\/\//, "");
+    if (isWebUrl(url)) this.walletLink.setAttribute("href", url);
+    else this.walletLink.removeAttribute("href");
+  }
+  syncStatus() {
+    const status = this.getAttribute("status");
+    this.statusEl.textContent = status !== null && status !== "" ? `status: ${status}` : "";
+  }
+  syncUri() {
+    const uri = this.getAttribute("uri");
+    if (uri !== null && isPairingUri(uri)) this.openLink.setAttribute("href", uri);
+    else this.openLink.removeAttribute("href");
+    if (uri === this.lastQrUri) return;
+    this.lastQrUri = uri;
+    this.renderQr(uri);
+  }
+  /**
+   * The web-wallet handoff: an https link carrying the pairing URI in the
+   * URL fragment (never sent to servers; the wallet scrubs and stages it
+   * behind its consent modal). Attribute absent = default web wallet;
+   * attribute set but empty = feature disabled. Hidden links carry no href,
+   * which also keeps them out of the focus trap.
+   */
+  syncWebWalletLink() {
+    const attr = this.getAttribute("web-wallet-url");
+    const base = attr ?? "https://qrlwallet.com";
+    const uri = this.getAttribute("uri");
+    const enabled = base !== "" && isWebUrl(base) && uri !== null && isPairingUri(uri);
+    if (!enabled) {
+      this.webLink.removeAttribute("href");
+      this.webLink.hidden = true;
+      return;
+    }
+    this.webLink.hidden = false;
+    this.webLink.setAttribute(
+      "href",
+      `${base.replace(/\/+$/, "")}/dapp-sessions#qrlconnect=${encodeURIComponent(uri)}`
+    );
+  }
+  renderQr(uri) {
+    const token = ++this.qrToken;
+    if (uri === null || uri === "") {
+      this.qrBox.textContent = "";
+      return;
+    }
+    this.qrBox.textContent = "Generating\u2026";
+    void qrSvg(uri).then((svg) => {
+      if (token !== this.qrToken) return;
+      this.qrBox.innerHTML = svg;
+    }).catch(() => {
+      if (token === this.qrToken) this.qrBox.textContent = "Could not render the QR code";
+    });
+  }
+  copyUri() {
+    const uri = this.getAttribute("uri") ?? "";
+    const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+    if (uri === "" || clipboard === void 0) {
+      this.showCopyFeedback("Copy failed");
+      return;
+    }
+    void clipboard.writeText(uri).then(() => {
+      this.showCopyFeedback("Copied!");
+    }).catch(() => {
+      this.showCopyFeedback("Copy failed");
+    });
+  }
+  showCopyFeedback(text) {
+    this.copyLabel.textContent = text;
+    if (this.copyTimer !== null) clearTimeout(this.copyTimer);
+    this.copyTimer = setTimeout(() => {
+      this.copyLabel.textContent = "Copy code";
+      this.copyTimer = null;
+    }, COPY_FEEDBACK_MS);
+  }
+  focusables() {
+    const nodes = this.shadow.querySelectorAll("a[href], button");
+    const result = [];
+    nodes.forEach((node) => {
+      if (node instanceof HTMLElement) result.push(node);
+    });
+    return result;
+  }
+  handleKeydown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      this.fire("qrl-cancel");
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = this.focusables();
+    const first = items[0];
+    const last = items[items.length - 1];
+    if (first === void 0 || last === void 0) return;
+    const active = this.shadow.activeElement;
+    if (event.shiftKey && (active === first || active === this.card)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+};
+function defineQrlPairingModal(tagName = QRL_PAIRING_MODAL_TAG) {
+  if (typeof customElements === "undefined") return;
+  if (customElements.get(tagName) === void 0) customElements.define(tagName, QrlPairingModal);
+}
+
+// src/show.ts
+async function showPairingModal(provider, options = {}) {
+  const uri = options.fresh === true ? await provider.newConnection() : await provider.getConnectionURI();
+  if ((options.mobileRedirect ?? true) && provider.isMobile()) {
+    if (!isPairingUri(uri)) {
+      throw new Error("refusing to redirect: pairing URI does not use the qrlconnect: scheme");
+    }
+    window.location.href = uri;
+    return "redirected";
+  }
+  defineQrlPairingModal();
+  const modal = new QrlPairingModal();
+  modal.setAttribute("uri", uri);
+  if (options.walletName !== void 0) modal.setAttribute("wallet-name", options.walletName);
+  if (options.walletUrl !== void 0) modal.setAttribute("wallet-url", options.walletUrl);
+  if (options.webWalletUrl !== void 0) {
+    modal.setAttribute("web-wallet-url", options.webWalletUrl);
+  }
+  const container = options.container ?? document.body;
+  return new Promise((resolve) => {
+    let settled = false;
+    const onStatus = (status) => {
+      modal.setAttribute("status", status);
+    };
+    const onConnect = () => {
+      finish("connected");
+    };
+    function finish(result) {
+      if (settled) return;
+      settled = true;
+      provider.off("connect", onConnect);
+      provider.off("statusChanged", onStatus);
+      modal.remove();
+      resolve(result);
+    }
+    modal.addEventListener("qrl-cancel", () => {
+      finish("cancelled");
+    });
+    modal.addEventListener("qrl-new-connection", () => {
+      modal.setAttribute("status", "rotating\u2026");
+      void provider.newConnection().then((fresh) => {
+        if (!settled) modal.setAttribute("uri", fresh);
+      }).catch((err) => {
+        if (!settled) {
+          modal.setAttribute(
+            "status",
+            err instanceof Error ? err.message : "could not rotate the connection"
+          );
+        }
+      });
+    });
+    provider.on("statusChanged", onStatus);
+    provider.on("connect", onConnect);
+    container.appendChild(modal);
+  });
+}
+export {
+  QRL_PAIRING_MODAL_TAG,
+  QrlPairingModal,
+  defineQrlPairingModal,
+  showPairingModal
+};

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@qrlwallet/connect-ui",
+  "version": "0.1.0",
+  "description": "Framework-agnostic pairing modal for @qrlwallet/connect: <qrl-pairing-modal> web component plus a one-line showPairingModal() helper",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint src/ test/ --ext .ts",
+    "lint:fix": "eslint src/ test/ --ext .ts --fix",
+    "format": "prettier --write src/ test/",
+    "format:check": "prettier --check src/ test/",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm test && npm run build"
+  },
+  "keywords": [
+    "qrl",
+    "zond",
+    "wallet",
+    "connect",
+    "dapp",
+    "qr-code",
+    "web-component",
+    "modal"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DigitalGuards/myqrlwallet-connect.git",
+    "directory": "ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.4"
+  },
+  "peerDependencies": {
+    "@qrlwallet/connect": ">=3.1.0 <4"
+  },
+  "peerDependenciesMeta": {
+    "@qrlwallet/connect": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@qrlwallet/connect": "file:..",
+    "@types/qrcode": "^1.5.5",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "jsdom": "^25.0.1",
+    "prettier": "^3.4.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  }
+}