@enbox/browser 0.3.43 → 0.3.44

package/dist/esm/ui/connect-modal.js

@@ -0,0 +1,961 @@
+/**
+ * Connect modal — the single surface that owns a whole connect session.
+ *
+ * One Shadow-DOM dialog whose stage morphs in place through the session:
+ * QR (phone path) → pairing code → connected, with the in-browser popup
+ * path and the wallet catalog folded in as in-place alternates. The modal
+ * never chains into a second modal and stays mounted until the session
+ * resolves (connected / denied / cancelled).
+ *
+ * Layout: three zones —
+ *
+ * 1. **Header** — requesting app identity + close.
+ * 2. **Stage** — a height-stable region where states crossfade: the QR
+ *    (or deep link on phones), the pairing-code input, progress, success,
+ *    and error states.
+ * 3. **Footer** — the alternate-method link and the wallet switcher
+ *    disclosure (catalog + custom URL — the entire legacy selector,
+ *    demoted to an option).
+ *
+ * The phone path drives the `@enbox/connect` relay transport via
+ * {@link runRelayConnect}; the browser path drives the popup transport via
+ * the kernel `ConnectClient`. Wallet `connectServerUrl`s are discovered
+ * from each wallet's `/.well-known/enbox-connect` document unless
+ * overridden.
+ *
+ * @module
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { ConnectClient } from '@enbox/connect';
+import { buildWalletIcon } from './wallet-icon.js';
+import { collectBrowserClientMetadata, PopupClientTransport, PopupWindowClosedError, } from '../dweb-connect-client.js';
+import { encodeQr, qrToSvg } from './qr.js';
+import { fetchWalletWellKnown, probeWalletWellKnown } from './wallet-well-known.js';
+import { RelayConnectCancelledError, runRelayConnect } from '../relay-connect-runner.js';
+/** localStorage key remembering the last successful method + wallet. */
+const LAST_CHOICE_STORAGE_KEY = 'enbox:connect:lastChoice';
+/** Safety margin subtracted from the relay pointer TTL before re-minting. */
+const REMINT_SAFETY_MS = 30000;
+/** Minimum delay before an automatic re-mint. */
+const REMINT_MIN_MS = 10000;
+/** Pairing code length (matches the wallet's generated PIN). */
+const PIN_LENGTH = 4;
+/**
+ * Resolves a wallet origin to its relay `connectServerUrl` via the wallet's
+ * `/.well-known/enbox-connect` document ({@link fetchWalletWellKnown} — the
+ * same machinery the wallet selector uses for custom-URL validation).
+ */
+export function discoverWalletConnectServerUrl(walletOrigin) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        return (_a = (yield fetchWalletWellKnown(walletOrigin))) === null || _a === void 0 ? void 0 : _a.connectServerUrl;
+    });
+}
+/** Runs one popup handshake without collapsing early-close into a denial. */
+function runPopupConnect(options) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // The transport constructor calls `window.open` synchronously — callers
+        // must invoke this inside the user-gesture call stack.
+        const transport = new PopupClientTransport({
+            walletUrl: options.walletUrl,
+            timeoutMs: options.timeoutMs,
+        });
+        const client = new ConnectClient({ transport });
+        return yield client.connect({
+            appName: options.appName,
+            appIcon: options.appIcon,
+            clientMetadata: collectBrowserClientMetadata(),
+            permissionRequests: options.permissionRequests,
+        });
+    });
+}
+function defaultIsMobile() {
+    var _a, _b;
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const coarse = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(pointer: coarse)').matches) !== null && _b !== void 0 ? _b : false;
+    return coarse && Math.min(window.innerWidth, window.innerHeight) < 900;
+}
+function defaultDeps() {
+    return {
+        runRelay: runRelayConnect,
+        runPopup: runPopupConnect,
+        discoverConnectServerUrl: discoverWalletConnectServerUrl,
+        validateWalletUrl: probeWalletWellKnown,
+        isMobile: defaultIsMobile,
+        storage: typeof localStorage === 'undefined' ? undefined : localStorage,
+    };
+}
+function readLastChoice(storage) {
+    try {
+        const raw = storage === null || storage === void 0 ? void 0 : storage.getItem(LAST_CHOICE_STORAGE_KEY);
+        if (raw == null) {
+            return undefined;
+        }
+        const parsed = JSON.parse(raw);
+        if ((parsed.method === 'phone' || parsed.method === 'browser') && typeof parsed.walletUrl === 'string') {
+            return { method: parsed.method, walletUrl: parsed.walletUrl };
+        }
+    }
+    catch ( /* unreadable storage — behave as first visit */_a) { /* unreadable storage — behave as first visit */ }
+    return undefined;
+}
+function writeLastChoice(storage, choice) {
+    try {
+        storage === null || storage === void 0 ? void 0 : storage.setItem(LAST_CHOICE_STORAGE_KEY, JSON.stringify(choice));
+    }
+    catch ( /* best effort */_a) { /* best effort */ }
+}
+function createRelaySession() {
+    let cancel;
+    const session = { active: true };
+    const cancelled = new Promise((_, reject) => {
+        cancel = () => {
+            if (session.active === true) {
+                session.active = false;
+                reject(new RelayConnectCancelledError());
+            }
+        };
+    });
+    // Mark handled so an unconsumed cancellation never surfaces as unhandled.
+    cancelled.catch(() => undefined);
+    session.cancelled = cancelled;
+    session.cancel = cancel;
+    return session;
+}
+/**
+ * Opens the connect modal and resolves when the session ends.
+ *
+ * @returns The delegated credentials; `undefined` when the user denied the
+ *          request in the wallet (or dismissed after a denial).
+ * @throws When the user cancels the modal, or the session fails and the
+ *         user dismisses the error.
+ */
+export function runConnectModal(options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        throw new Error('[@enbox/browser] The connect modal is only available in browser environments.');
+    }
+    const deps = Object.assign(Object.assign({}, defaultDeps()), options.deps);
+    const wallets = (_a = options.wallets) !== null && _a !== void 0 ? _a : [];
+    const rememberChoice = (_b = options.rememberChoice) !== null && _b !== void 0 ? _b : true;
+    const appName = (_c = options.appName) !== null && _c !== void 0 ? _c : window.location.host;
+    const relayWalletPath = (_d = options.relayWalletPath) !== null && _d !== void 0 ? _d : '/connect/app';
+    const isMobile = deps.isMobile();
+    const lastChoice = rememberChoice ? readLastChoice(deps.storage) : undefined;
+    // Wallet resolution order: explicit option → remembered → catalog head.
+    const lockedWallet = options.walletUrl !== undefined;
+    let walletUrl = (_f = (_e = options.walletUrl) !== null && _e !== void 0 ? _e : (lastChoice !== undefined && (lockedWallet || walletInCatalog(wallets, lastChoice.walletUrl)) ? lastChoice.walletUrl : undefined)) !== null && _f !== void 0 ? _f : (_g = wallets[0]) === null || _g === void 0 ? void 0 : _g.url;
+    // Method resolution order: explicit option → remembered → phone.
+    let method = (_j = (_h = options.preferredMethod) !== null && _h !== void 0 ? _h : lastChoice === null || lastChoice === void 0 ? void 0 : lastChoice.method) !== null && _j !== void 0 ? _j : 'phone';
+    return new Promise((resolve, reject) => {
+        var _a, _b;
+        // ── Host + shadow root ─────────────────────────────────────
+        const host = document.createElement('div');
+        host.id = 'enbox-connect-modal';
+        const shadow = host.attachShadow({ mode: 'open' });
+        const isDark = (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)').matches) !== null && _b !== void 0 ? _b : false;
+        const style = document.createElement('style');
+        style.textContent = buildStyles(isDark);
+        shadow.appendChild(style);
+        const overlay = document.createElement('div');
+        overlay.className = 'overlay';
+        const modal = document.createElement('div');
+        modal.className = 'modal';
+        modal.setAttribute('role', 'dialog');
+        modal.setAttribute('aria-modal', 'true');
+        modal.setAttribute('aria-label', `Connect to ${appName}`);
+        // ── Session state ──────────────────────────────────────────
+        let settled = false;
+        let relaySession;
+        let remintTimer;
+        let popupBusy = false;
+        let pinResolve;
+        const discoveryCache = new Map();
+        const cleanup = () => {
+            relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
+            clearTimeout(remintTimer);
+            document.removeEventListener('keydown', onKeydown);
+            try {
+                document.body.removeChild(host);
+            }
+            catch ( /* best effort */_a) { /* best effort */ }
+        };
+        const settle = (settler) => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            cleanup();
+            settler();
+        };
+        const succeed = (result) => {
+            if (rememberChoice) {
+                writeLastChoice(deps.storage, { method, walletUrl: walletUrl !== null && walletUrl !== void 0 ? walletUrl : '' });
+            }
+            renderConnected();
+            const finish = () => settle(() => resolve(result));
+            setTimeout(finish, 1200);
+        };
+        const cancelModal = () => settle(() => reject(new Error('[@enbox/browser] Connect cancelled.')));
+        // ── Zones ──────────────────────────────────────────────────
+        modal.appendChild(buildHeader(appName, options.appIcon, cancelModal));
+        const stage = document.createElement('div');
+        stage.className = 'stage';
+        stage.setAttribute('aria-live', 'polite');
+        modal.appendChild(stage);
+        const footer = document.createElement('div');
+        footer.className = 'footer';
+        modal.appendChild(footer);
+        // ── Stage renderers (all render in place; nothing navigates) ──
+        const setStage = (...nodes) => {
+            stage.replaceChildren(...nodes);
+            stage.classList.remove('fade-in');
+            void stage.offsetWidth; // restart the transition
+            stage.classList.add('fade-in');
+        };
+        const renderBusy = (message) => {
+            setStage(el('div', 'spinner'), el('p', 'stage-caption', message));
+        };
+        const renderQr = (handoff) => {
+            if (isMobile) {
+                const link = document.createElement('a');
+                link.className = 'deep-link';
+                link.href = handoff.walletUri;
+                link.textContent = 'Continue in your wallet';
+                setStage(link, el('p', 'stage-caption', 'Your wallet opens to approve this connection.'), el('p', 'stage-subline', 'Come back here when you’re done.'));
+                return;
+            }
+            const qrBox = document.createElement('div');
+            qrBox.className = 'qr-box';
+            qrBox.replaceChildren(qrToSvg(encodeQr(handoff.walletUri), {
+                dark: isDark ? '#e8e8f0' : '#14141f',
+                light: 'transparent',
+                quietZone: 2,
+            }));
+            setStage(qrBox, el('p', 'stage-caption', 'Scan with your phone’s camera'), el('p', 'stage-subline', 'Your wallet stays on your phone, so you can approve things anywhere.'));
+        };
+        const renderPin = (attempt, previousError) => {
+            return new Promise((resolvePin) => {
+                pinResolve = resolvePin;
+                const boxes = document.createElement('div');
+                boxes.className = 'pin-row';
+                if (previousError !== undefined) {
+                    boxes.classList.add('shake');
+                }
+                const inputs = [];
+                for (let i = 0; i < PIN_LENGTH; i++) {
+                    const input = document.createElement('input');
+                    input.className = 'pin-input';
+                    input.type = 'text';
+                    input.inputMode = 'numeric';
+                    input.maxLength = 1;
+                    input.setAttribute('aria-label', `Code digit ${i + 1}`);
+                    inputs.push(input);
+                    boxes.appendChild(input);
+                }
+                const submitIfComplete = () => {
+                    const code = inputs.map((i) => i.value).join('');
+                    if (code.length === PIN_LENGTH && pinResolve !== undefined) {
+                        const resolveOnce = pinResolve;
+                        pinResolve = undefined;
+                        renderBusy('Checking the code…');
+                        resolveOnce(code);
+                    }
+                };
+                inputs.forEach((input, index) => {
+                    input.addEventListener('input', () => {
+                        input.value = input.value.replace(/\D/g, '').slice(0, 1);
+                        if (input.value !== '' && index + 1 < inputs.length) {
+                            inputs[index + 1].focus();
+                        }
+                        submitIfComplete();
+                    });
+                    input.addEventListener('keydown', (event) => {
+                        if (event.key === 'Backspace' && input.value === '' && index > 0) {
+                            inputs[index - 1].focus();
+                        }
+                    });
+                    input.addEventListener('paste', (event) => {
+                        var _a, _b, _c;
+                        const digits = ((_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '').replace(/\D/g, '').slice(0, PIN_LENGTH);
+                        if (digits.length === 0) {
+                            return;
+                        }
+                        event.preventDefault();
+                        digits.split('').forEach((digit, digitIndex) => {
+                            if (inputs[digitIndex] !== undefined) {
+                                inputs[digitIndex].value = digit;
+                            }
+                        });
+                        (_c = inputs[Math.min(digits.length, PIN_LENGTH) - 1]) === null || _c === void 0 ? void 0 : _c.focus();
+                        submitIfComplete();
+                    });
+                });
+                setStage(el('p', 'stage-caption', 'Enter the code shown on your phone'), boxes, ...(previousError !== undefined
+                    ? [el('p', 'stage-error', 'That code doesn’t match — check your phone.')]
+                    : [el('p', 'stage-subline', attempt === 1 ? 'Phone connected.' : '')]));
+                inputs[0].focus();
+            });
+        };
+        const renderConnected = () => {
+            const check = el('div', 'check');
+            check.textContent = '✓';
+            setStage(check, el('p', 'stage-caption', 'You’re connected.'));
+        };
+        const renderDenied = () => {
+            setStage(el('p', 'stage-caption', 'No problem — nothing was shared.'), stageButton('Start over', () => { void startMethod(); }), stageLinkButton('Close', () => settle(() => resolve(undefined))));
+        };
+        const renderError = (message, error) => {
+            setStage(el('p', 'stage-caption', message), stageButton('Start over', () => { void startMethod(); }), stageLinkButton('Close', () => settle(() => reject(error !== null && error !== void 0 ? error : new Error(`[@enbox/browser] ${message}`)))));
+        };
+        const renderPhoneUnavailable = () => {
+            setStage(el('p', 'stage-caption', 'This wallet can’t connect by phone here.'), el('p', 'stage-subline', 'You can continue in this browser instead.'), stageButton('Use this browser', () => { startPopup(); }));
+        };
+        const renderPopupPrompt = () => {
+            setStage(el('p', 'stage-caption', 'Connect with a wallet in this browser'), el('p', 'stage-subline', 'Your wallet opens in a small window to approve this connection.'), stageButton('Open wallet window', () => { startPopup(); }));
+        };
+        const renderPopupWaiting = () => {
+            setStage(el('div', 'spinner'), el('p', 'stage-caption', 'Finish in the wallet window'), el('p', 'stage-subline', 'We’ll wrap up here as soon as you’re done.'));
+        };
+        const renderPopupInterrupted = (blocked) => {
+            setStage(el('p', 'stage-caption', blocked
+                ? 'Your browser blocked the wallet window.'
+                : 'The wallet window was closed.'), stageButton(blocked ? 'Open it now' : 'Reopen window', () => { startPopup(); }), ...(isMobile ? [] : [stageLinkButton('Use your phone instead', () => { void switchMethod('phone'); })]));
+        };
+        // ── Method drivers ─────────────────────────────────────────
+        const resolveConnectServerUrl = (origin) => __awaiter(this, void 0, void 0, function* () {
+            if (options.connectServerUrl !== undefined) {
+                return options.connectServerUrl;
+            }
+            let cached = discoveryCache.get(origin);
+            if (cached === undefined) {
+                cached = deps.discoverConnectServerUrl(origin);
+                discoveryCache.set(origin, cached);
+            }
+            return cached;
+        });
+        const scheduleRemint = (expiresInSeconds) => {
+            clearTimeout(remintTimer);
+            const delay = Math.max(REMINT_MIN_MS, expiresInSeconds * 1000 - REMINT_SAFETY_MS);
+            remintTimer = setTimeout(() => {
+                // Never re-mint once the wallet has responded (pairing in progress).
+                if (!settled && pinResolve === undefined && method === 'phone') {
+                    void startPhone();
+                }
+            }, delay);
+        };
+        const startPhone = () => __awaiter(this, void 0, void 0, function* () {
+            relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
+            clearTimeout(remintTimer);
+            if (walletUrl === undefined) {
+                renderError('No wallet is configured.');
+                return;
+            }
+            method = 'phone';
+            renderFooter();
+            renderBusy('Getting things ready…');
+            const origin = new URL(walletUrl).origin;
+            const connectServerUrl = yield resolveConnectServerUrl(origin);
+            if (connectServerUrl === undefined) {
+                renderPhoneUnavailable();
+                return;
+            }
+            const session = createRelaySession();
+            relaySession = session;
+            try {
+                const result = yield deps.runRelay({
+                    connectServerUrl,
+                    walletUri: new URL(relayWalletPath, origin).toString(),
+                    appName,
+                    appIcon: options.appIcon,
+                    clientMetadata: collectBrowserClientMetadata(),
+                    permissionRequests: options.permissionRequests,
+                    timeoutMs: options.timeout,
+                    cancelled: session.cancelled,
+                    onWalletUriReady: (handoff) => {
+                        if (session.active && !settled) {
+                            renderQr(handoff);
+                            scheduleRemint(handoff.expiresIn);
+                        }
+                    },
+                    requestPin: (attempt, previousError) => {
+                        clearTimeout(remintTimer);
+                        return renderPin(attempt, previousError);
+                    },
+                });
+                if (!session.active || settled) {
+                    return;
+                }
+                if (result === undefined) {
+                    renderDenied();
+                }
+                else {
+                    succeed(result);
+                }
+            }
+            catch (error) {
+                if (!session.active || settled || error instanceof RelayConnectCancelledError) {
+                    return;
+                }
+                const failure = error instanceof Error ? error : new Error(String(error));
+                renderError(/timed out/i.test(failure.message)
+                    ? 'That took too long, so we stopped for safety.'
+                    : 'Something went wrong while connecting.', failure);
+            }
+        });
+        const startPopup = () => {
+            // Synchronous popup open inside the click's call stack.
+            relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
+            clearTimeout(remintTimer);
+            if (walletUrl === undefined) {
+                renderError('No wallet is configured.');
+                return;
+            }
+            if (popupBusy) {
+                return;
+            }
+            method = 'browser';
+            renderFooter();
+            let flow;
+            try {
+                flow = deps.runPopup({
+                    walletUrl,
+                    permissionRequests: options.permissionRequests,
+                    appName,
+                    appIcon: options.appIcon,
+                    timeoutMs: options.timeout,
+                });
+            }
+            catch (error) {
+                const blocked = error instanceof Error && /popup blocked/i.test(error.message);
+                renderPopupInterrupted(blocked);
+                return;
+            }
+            popupBusy = true;
+            renderPopupWaiting();
+            flow
+                .then((result) => {
+                if (settled) {
+                    return;
+                }
+                if (result === undefined) {
+                    renderDenied();
+                }
+                else {
+                    succeed(result);
+                }
+            })
+                .catch((error) => {
+                if (settled) {
+                    return;
+                }
+                if (error instanceof PopupWindowClosedError) {
+                    renderPopupInterrupted(false);
+                    return;
+                }
+                const failure = error instanceof Error ? error : new Error(String(error));
+                renderError(/timed out/i.test(failure.message)
+                    ? 'That took too long, so we stopped for safety.'
+                    : 'Something went wrong while connecting.', failure);
+            })
+                .finally(() => { popupBusy = false; });
+        };
+        const startMethod = () => __awaiter(this, void 0, void 0, function* () {
+            if (method === 'browser') {
+                // window.open must stay inside a user gesture — prompt for the click.
+                relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
+                clearTimeout(remintTimer);
+                renderFooter();
+                renderPopupPrompt();
+            }
+            else {
+                yield startPhone();
+            }
+        });
+        const switchMethod = (next) => __awaiter(this, void 0, void 0, function* () {
+            method = next;
+            yield startMethod();
+        });
+        // ── Footer: method link + wallet switcher ──────────────────
+        const renderFooter = () => {
+            footer.replaceChildren();
+            if (method === 'phone') {
+                const alt = document.createElement('button');
+                alt.className = 'footer-link method-link';
+                alt.textContent = 'No phone handy? Use this browser →';
+                // startPopup runs synchronously in this click handler.
+                alt.addEventListener('click', () => { startPopup(); });
+                footer.appendChild(alt);
+            }
+            else if (!isMobile) {
+                const alt = document.createElement('button');
+                alt.className = 'footer-link method-link';
+                alt.textContent = 'Use your phone instead →';
+                alt.addEventListener('click', () => { void switchMethod('phone'); });
+                footer.appendChild(alt);
+            }
+            if (!lockedWallet && wallets.length > 0) {
+                footer.appendChild(buildWalletSwitcher());
+            }
+        };
+        const buildWalletSwitcher = () => {
+            var _a, _b;
+            const wrap = document.createElement('div');
+            wrap.className = 'wallet-switcher';
+            const current = wallets.find((wallet) => wallet.url === walletUrl);
+            const toggle = document.createElement('button');
+            toggle.className = 'footer-link wallet-toggle';
+            toggle.setAttribute('aria-expanded', 'false');
+            toggle.textContent = `Wallet: ${(_b = (_a = current === null || current === void 0 ? void 0 : current.name) !== null && _a !== void 0 ? _a : walletUrl) !== null && _b !== void 0 ? _b : 'Choose'} ▾`;
+            const panel = document.createElement('div');
+            panel.className = 'wallet-panel';
+            panel.hidden = true;
+            // Search filter — only worth the chrome once the catalog grows.
+            const rows = [];
+            const empty = document.createElement('div');
+            empty.className = 'wallet-empty';
+            empty.textContent = 'No wallets match your search.';
+            empty.hidden = true;
+            if (wallets.length > 5) {
+                const search = document.createElement('input');
+                search.type = 'search';
+                search.className = 'wallet-search';
+                search.placeholder = 'Search wallets…';
+                search.addEventListener('input', () => {
+                    const query = search.value.trim().toLowerCase();
+                    let visible = 0;
+                    for (const { wallet, el } of rows) {
+                        const match = query === ''
+                            || wallet.name.toLowerCase().includes(query)
+                            || wallet.url.toLowerCase().includes(query);
+                        el.hidden = !match;
+                        if (match) {
+                            visible += 1;
+                        }
+                    }
+                    empty.hidden = visible > 0;
+                });
+                panel.appendChild(search);
+            }
+            for (const wallet of wallets) {
+                const row = document.createElement('button');
+                row.className = 'wallet-row';
+                row.appendChild(buildWalletIcon(wallet));
+                const rowName = document.createElement('span');
+                rowName.className = 'wallet-row-name';
+                rowName.textContent = wallet.name;
+                row.appendChild(rowName);
+                if (wallet.url === walletUrl) {
+                    row.classList.add('selected');
+                }
+                row.addEventListener('click', () => {
+                    walletUrl = wallet.url;
+                    renderFooter();
+                    void startMethod();
+                });
+                rows.push({ wallet, el: row });
+                panel.appendChild(row);
+            }
+            panel.appendChild(empty);
+            // Custom wallet URL (the power-user path, demoted to the disclosure).
+            const custom = document.createElement('div');
+            custom.className = 'wallet-custom';
+            const input = document.createElement('input');
+            input.className = 'url-input';
+            input.type = 'url';
+            input.placeholder = 'https://your-wallet.example';
+            const go = document.createElement('button');
+            go.className = 'url-go';
+            go.textContent = 'Use';
+            const urlError = document.createElement('div');
+            urlError.className = 'url-error';
+            urlError.hidden = true;
+            // When validation fails we let the user override, since the connect
+            // handshake is the ultimate gate — a valid wallet behind strict CORS
+            // should not be permanently blocked.
+            let allowUnverified = false;
+            const useWallet = (origin) => {
+                walletUrl = origin;
+                renderFooter();
+                void startMethod();
+            };
+            const submitCustom = () => __awaiter(this, void 0, void 0, function* () {
+                const value = input.value.trim();
+                if (value === '') {
+                    return;
+                }
+                let origin;
+                try {
+                    origin = new URL(value.includes('://') ? value : `https://${value}`).origin;
+                }
+                catch (_a) {
+                    input.classList.add('invalid');
+                    return;
+                }
+                if (allowUnverified) {
+                    useWallet(origin);
+                    return;
+                }
+                go.disabled = true;
+                go.textContent = 'Checking…';
+                urlError.hidden = true;
+                const valid = yield deps.validateWalletUrl(origin);
+                go.disabled = false;
+                if (valid) {
+                    go.textContent = 'Use';
+                    useWallet(origin);
+                    return;
+                }
+                allowUnverified = true;
+                go.textContent = 'Use anyway';
+                input.classList.add('invalid');
+                urlError.textContent = `Couldn't verify a wallet at ${origin}.`;
+                urlError.hidden = false;
+            });
+            input.addEventListener('input', () => {
+                allowUnverified = false;
+                go.textContent = 'Use';
+                input.classList.remove('invalid');
+                urlError.hidden = true;
+            });
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    void submitCustom();
+                }
+            });
+            go.addEventListener('click', () => { void submitCustom(); });
+            custom.appendChild(input);
+            custom.appendChild(go);
+            panel.appendChild(custom);
+            panel.appendChild(urlError);
+            toggle.addEventListener('click', () => {
+                panel.hidden = !panel.hidden;
+                toggle.setAttribute('aria-expanded', panel.hidden ? 'false' : 'true');
+            });
+            wrap.appendChild(toggle);
+            wrap.appendChild(panel);
+            return wrap;
+        };
+        // ── Global interactions ────────────────────────────────────
+        overlay.addEventListener('click', (event) => {
+            if (event.target === overlay) {
+                cancelModal();
+            }
+        });
+        const onKeydown = (event) => {
+            if (event.key === 'Escape') {
+                cancelModal();
+                return;
+            }
+            if (event.key === 'Tab') {
+                trapFocus(shadow, event);
+            }
+        };
+        document.addEventListener('keydown', onKeydown);
+        overlay.appendChild(modal);
+        shadow.appendChild(overlay);
+        document.body.appendChild(host);
+        renderFooter();
+        void startMethod();
+    });
+}
+// ─── Small DOM helpers ───────────────────────────────────────────
+function walletInCatalog(wallets, url) {
+    return wallets.some((wallet) => wallet.url === url);
+}
+function el(tag, className, text) {
+    const node = document.createElement(tag);
+    node.className = className;
+    if (text !== undefined) {
+        node.textContent = text;
+    }
+    return node;
+}
+function stageButton(label, onClick) {
+    const button = document.createElement('button');
+    button.className = 'stage-btn';
+    button.textContent = label;
+    button.addEventListener('click', onClick);
+    return button;
+}
+function stageLinkButton(label, onClick) {
+    const button = document.createElement('button');
+    button.className = 'footer-link';
+    button.textContent = label;
+    button.addEventListener('click', onClick);
+    return button;
+}
+function buildHeader(appName, appIcon, onCancel) {
+    const header = document.createElement('div');
+    header.className = 'header';
+    const identity = document.createElement('div');
+    identity.className = 'header-identity';
+    if (appIcon !== undefined) {
+        const icon = document.createElement('img');
+        icon.className = 'header-icon';
+        icon.src = appIcon;
+        icon.alt = '';
+        icon.width = 24;
+        icon.height = 24;
+        icon.addEventListener('error', () => icon.remove());
+        identity.appendChild(icon);
+    }
+    const title = document.createElement('h2');
+    title.textContent = `Connect to ${appName}`;
+    identity.appendChild(title);
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'close-btn';
+    closeBtn.setAttribute('aria-label', 'Close');
+    closeBtn.textContent = '\u00d7';
+    closeBtn.addEventListener('click', onCancel);
+    header.appendChild(identity);
+    header.appendChild(closeBtn);
+    return header;
+}
+function trapFocus(shadow, event) {
+    const focusables = Array.from(shadow.querySelectorAll('button, input, a[href], [tabindex]:not([tabindex="-1"])')).filter((node) => !node.hasAttribute('disabled') && node.offsetParent !== null);
+    if (focusables.length === 0) {
+        return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = shadow.activeElement;
+    if (event.shiftKey && (active === first || active === null)) {
+        event.preventDefault();
+        last.focus();
+    }
+    else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}
+// ─── Styles ──────────────────────────────────────────────────────
+function buildStyles(isDark) {
+    const bg = isDark ? '#1a1a2e' : '#ffffff';
+    const text = isDark ? '#e0e0e0' : '#1a1a2e';
+    const muted = isDark ? '#888' : '#666';
+    const border = isDark ? '#333' : '#e0e0e0';
+    const itemBg = isDark ? '#16213e' : '#f8f9fa';
+    const accent = isDark ? '#4a9eff' : '#0066cc';
+    const accentSoft = isDark ? 'rgba(74, 158, 255, 0.16)' : 'rgba(0, 102, 204, 0.1)';
+    const danger = isDark ? '#ff6b6b' : '#c0392b';
+    const success = isDark ? '#43d17c' : '#1e9e5a';
+    return `
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483647;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.5);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      animation: fadeIn 0.15s ease-out;
+    }
+
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+    @keyframes stageIn { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      20%, 60% { transform: translateX(-6px); }
+      40%, 80% { transform: translateX(6px); }
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .modal {
+      background: ${bg};
+      color: ${text};
+      border-radius: 16px;
+      width: 400px;
+      max-width: 92vw;
+      max-height: 88vh;
+      overflow-y: auto;
+      padding: 20px 24px 16px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      animation: slideUp 0.2s ease-out;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header { display: flex; justify-content: space-between; align-items: center; }
+    .header-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
+    .header-icon { border-radius: 6px; }
+    h2 { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+    .close-btn {
+      background: none; border: none; font-size: 24px; cursor: pointer;
+      color: ${muted}; padding: 4px 8px; border-radius: 8px; line-height: 1;
+    }
+    .close-btn:hover { color: ${text}; background: ${itemBg}; }
+
+    .stage {
+      min-height: 300px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      text-align: center;
+      padding: 16px 0;
+    }
+    .stage.fade-in > * { animation: stageIn 0.15s ease-out; }
+
+    .qr-box {
+      width: 216px;
+      height: 216px;
+      padding: 12px;
+      border-radius: 12px;
+      background: ${isDark ? '#10192e' : '#ffffff'};
+      border: 1px solid ${border};
+    }
+    .qr-box svg { width: 100%; height: 100%; display: block; }
+
+    .stage-caption { font-size: 15px; font-weight: 600; }
+    .stage-subline { font-size: 13px; color: ${muted}; max-width: 300px; line-height: 1.45; }
+    .stage-error { font-size: 13px; color: ${danger}; }
+
+    .deep-link {
+      display: block;
+      width: 100%;
+      padding: 14px 16px;
+      border-radius: 12px;
+      background: ${accent};
+      color: #fff;
+      font-weight: 600;
+      font-size: 15px;
+      text-decoration: none;
+    }
+
+    .pin-row { display: flex; gap: 10px; }
+    .pin-row.shake { animation: shake 0.4s ease-in-out; }
+    .pin-input {
+      width: 48px; height: 56px;
+      text-align: center;
+      font-size: 24px; font-weight: 600;
+      color: ${text};
+      background: ${itemBg};
+      border: 1px solid ${border};
+      border-radius: 10px;
+      outline: none;
+    }
+    .pin-input:focus { border-color: ${accent}; }
+
+    .check {
+      width: 56px; height: 56px;
+      display: flex; align-items: center; justify-content: center;
+      border-radius: 50%;
+      background: ${success};
+      color: #fff;
+      font-size: 28px;
+    }
+
+    .spinner {
+      width: 32px; height: 32px;
+      border-radius: 50%;
+      border: 3px solid ${border};
+      border-top-color: ${accent};
+      animation: spin 0.8s linear infinite;
+    }
+
+    .stage-btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 10px;
+      background: ${accent};
+      color: #fff;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+    .stage-btn:hover { filter: brightness(1.1); }
+
+    .footer {
+      border-top: 1px solid ${border};
+      padding-top: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      align-items: center;
+    }
+
+    .footer-link {
+      background: none;
+      border: none;
+      color: ${muted};
+      font-size: 13px;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 8px;
+    }
+    .footer-link:hover { color: ${text}; background: ${itemBg}; }
+    .method-link { color: ${accent}; }
+
+    .wallet-switcher { width: 100%; display: flex; flex-direction: column; align-items: center; }
+    .wallet-panel { width: 100%; padding: 6px 0; display: flex; flex-direction: column; gap: 4px; }
+    .wallet-row {
+      width: 100%;
+      text-align: left;
+      padding: 8px 12px;
+      background: ${itemBg};
+      border: 1px solid ${border};
+      border-radius: 10px;
+      color: ${text};
+      font-size: 13px;
+      cursor: pointer;
+    }
+    .wallet-row:hover, .wallet-row.selected { border-color: ${accent}; }
+
+    .wallet-icon { position: relative; width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; }
+    .wallet-badge {
+      width: 28px; height: 28px; border-radius: 8px; display: inline-flex;
+      align-items: center; justify-content: center; font-size: 13px;
+      font-weight: 600; background: ${accentSoft}; color: ${accent};
+    }
+    .wallet-img { position: absolute; inset: 0; width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
+    .wallet-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .wallet-search {
+      width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 4px;
+      border-radius: 8px; border: 1px solid ${border}; background: transparent;
+      color: inherit; font: inherit;
+    }
+    .wallet-search:focus { outline: none; border-color: ${accent}; }
+    .wallet-empty { padding: 8px 10px; font-size: 12px; opacity: 0.7; }
+    .url-error { padding: 4px 2px 0; font-size: 12px; color: ${danger}; }
+    .wallet-custom { display: flex; gap: 6px; margin-top: 4px; }
+    .url-input {
+      flex: 1;
+      padding: 8px 12px;
+      border: 1px solid ${border};
+      border-radius: 10px;
+      font-size: 13px;
+      background: ${itemBg};
+      color: ${text};
+      outline: none;
+    }
+    .url-input:focus { border-color: ${accent}; }
+    .url-input.invalid { border-color: ${danger}; }
+    .url-go {
+      padding: 8px 14px;
+      border: none;
+      border-radius: 10px;
+      background: ${accent};
+      color: #fff;
+      font-size: 13px;
+      cursor: pointer;
+    }
+  `;
+}
+//# sourceMappingURL=connect-modal.js.map