@enbox/browser 0.3.45 → 0.3.47

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

@@ -13,9 +13,19 @@
  * 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).
+ * 3. **Footer** — the wallet identity row ("Connecting with" + the selected
+ *    wallet and the next catalog wallets as tiles, capped so the same wallet
+ *    never appears twice), a More tile that expands the full catalog grid
+ *    with search + custom URL in place, and the alternate-method link.
+ *
+ * Theming: the stylesheet is static and reads `--ec-*` design tokens.
+ * Light/dark follows the visitor's system via `prefers-color-scheme` and
+ * updates live; the embedding app can force an appearance or override
+ * palette tokens through {@link ConnectModalOptions.theme}. Overrides are
+ * applied as inline custom properties — never interpolated into the
+ * stylesheet — so a hostile string can't escape its declaration. The QR
+ * card alone is theme-invariant (dark modules on white scan most
+ * reliably).
  *
  * The phone path drives the `@enbox/connect` relay transport via
  * {@link runRelayConnect}; the browser path drives the popup transport via
@@ -48,6 +58,22 @@ const REMINT_SAFETY_MS = 30000;
 const REMINT_MIN_MS = 10000;
 /** Pairing code length (matches the wallet's generated PIN). */
 const PIN_LENGTH = 4;
+/** Catalog size beyond which the wallet switcher shows its search bar. */
+const WALLET_SEARCH_THRESHOLD = 4; // one full row of tiles
+/** Wallet tiles shown in the collapsed identity row (plus the More tile). */
+const WALLET_ROW_SIZE = 3;
+/** Design-token custom property behind each palette key. */
+const PALETTE_TOKENS = {
+    background: '--ec-bg',
+    surface: '--ec-surface',
+    text: '--ec-text',
+    textMuted: '--ec-muted',
+    border: '--ec-border',
+    accent: '--ec-accent',
+    accentContrast: '--ec-accent-contrast',
+    danger: '--ec-danger',
+    success: '--ec-success',
+};
 /**
  * Resolves a wallet origin to its relay `connectServerUrl` via the wallet's
  * `/.well-known/enbox-connect` document ({@link fetchWalletWellKnown} — the
@@ -146,7 +172,7 @@ export function runConnectModal(options) {
         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 wallets = dedupeWalletsByUrl((_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';
@@ -158,14 +184,13 @@ export function runConnectModal(options) {
     // 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;
+        var _a, _b, _c, _d;
         // ── 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);
+        style.textContent = MODAL_STYLES;
         shadow.appendChild(style);
         const overlay = document.createElement('div');
         overlay.className = 'overlay';
@@ -174,6 +199,42 @@ export function runConnectModal(options) {
         modal.setAttribute('role', 'dialog');
         modal.setAttribute('aria-modal', 'true');
         modal.setAttribute('aria-label', `Connect to ${appName}`);
+        // ── Theme ──────────────────────────────────────────────────
+        // System light/dark is pure CSS (`prefers-color-scheme`), so it tracks
+        // the visitor live. A forced appearance pins the token block instead.
+        const theme = (_a = options.theme) !== null && _a !== void 0 ? _a : {};
+        const appearance = (_b = theme.appearance) !== null && _b !== void 0 ? _b : 'auto';
+        if (appearance !== 'auto') {
+            modal.setAttribute('data-appearance', appearance);
+        }
+        // Dapp palette overrides land as inline custom properties: setProperty
+        // parses each value as a lone declaration, so a hostile string cannot
+        // escape into the stylesheet.
+        const systemDark = (_c = window.matchMedia) === null || _c === void 0 ? void 0 : _c.call(window, '(prefers-color-scheme: dark)');
+        const hasPaletteOverrides = theme.accent !== undefined || theme.accentContrast !== undefined
+            || theme.light !== undefined || theme.dark !== undefined;
+        const applyPaletteTokens = () => {
+            const scheme = appearance === 'auto'
+                ? ((systemDark === null || systemDark === void 0 ? void 0 : systemDark.matches) === true ? 'dark' : 'light')
+                : appearance;
+            const palette = Object.assign({ accent: theme.accent, accentContrast: theme.accentContrast }, theme[scheme]);
+            for (const key of Object.keys(PALETTE_TOKENS)) {
+                const value = palette[key];
+                if (typeof value === 'string' && value.trim() !== '') {
+                    modal.style.setProperty(PALETTE_TOKENS[key], value);
+                }
+                else {
+                    modal.style.removeProperty(PALETTE_TOKENS[key]);
+                }
+            }
+        };
+        const onSchemeChange = () => applyPaletteTokens();
+        if (hasPaletteOverrides) {
+            applyPaletteTokens();
+            if (appearance === 'auto') {
+                (_d = systemDark === null || systemDark === void 0 ? void 0 : systemDark.addEventListener) === null || _d === void 0 ? void 0 : _d.call(systemDark, 'change', onSchemeChange);
+            }
+        }
         // ── Session state ──────────────────────────────────────────
         let settled = false;
         let relaySession;
@@ -181,14 +242,40 @@ export function runConnectModal(options) {
         let popupBusy = false;
         let pinResolve;
         const discoveryCache = new Map();
+        // Collapsed identity row: the selected wallet plus the next catalog
+        // wallets, never repeating one. Slots stay stable across in-row
+        // switches (only the highlight moves); the row recomposes only when a
+        // wallet from outside it — grid pick or custom URL — becomes selected,
+        // which puts that wallet in the first slot.
+        let rowWallets = [];
+        /** The catalog entry for `url`, or a synthesized option for custom URLs. */
+        const walletByUrl = (url) => { var _a, _b; return (_a = wallets.find((wallet) => wallet.url === url)) !== null && _a !== void 0 ? _a : { name: (_b = hostnameOf(url)) !== null && _b !== void 0 ? _b : url, url }; };
+        const composeWalletRow = () => {
+            if (walletUrl === undefined) {
+                rowWallets = wallets.slice(0, WALLET_ROW_SIZE);
+                return;
+            }
+            if (rowWallets.some((wallet) => wallet.url === walletUrl)) {
+                return;
+            }
+            const selected = walletByUrl(walletUrl);
+            rowWallets = [selected, ...wallets.filter((wallet) => wallet.url !== selected.url)].slice(0, WALLET_ROW_SIZE);
+        };
+        const selectWallet = (url) => {
+            walletUrl = url;
+            renderFooter();
+            void startMethod();
+        };
         const cleanup = () => {
+            var _a;
             relaySession === null || relaySession === void 0 ? void 0 : relaySession.cancel();
             clearTimeout(remintTimer);
             document.removeEventListener('keydown', onKeydown);
+            (_a = systemDark === null || systemDark === void 0 ? void 0 : systemDark.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(systemDark, 'change', onSchemeChange);
             try {
                 document.body.removeChild(host);
             }
-            catch ( /* best effort */_a) { /* best effort */ }
+            catch ( /* best effort */_b) { /* best effort */ }
         };
         const settle = (settler) => {
             if (settled) {
@@ -227,22 +314,39 @@ export function runConnectModal(options) {
             setStage(el('div', 'spinner'), el('p', 'stage-caption', message));
         };
         const renderQr = (handoff) => {
+            var _a;
+            const wallet = walletUrl !== undefined ? walletByUrl(walletUrl) : undefined;
+            const walletName = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.name) !== null && _a !== void 0 ? _a : 'your wallet';
             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.'));
+                if (wallet !== undefined) {
+                    link.appendChild(buildWalletIcon(wallet));
+                }
+                link.appendChild(el('span', 'deep-link-label', `Continue in ${walletName}`));
+                setStage(link, el('p', 'stage-caption', `${walletName} 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';
+            // Fixed colors on the white card: dark-on-light QRs scan reliably in
+            // both appearances (inverted codes trip up some camera apps).
             qrBox.replaceChildren(qrToSvg(encodeQr(handoff.walletUri), {
-                dark: isDark ? '#e8e8f0' : '#14141f',
+                dark: '#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.'));
+            // The selected wallet's mark sits at the QR centre — the "this is the
+            // wallet you're connecting to" cue. The 44px plate over the ~180px
+            // symbol occludes ~5% of modules, well inside ECC level M's 15%
+            // recovery budget.
+            if (wallet !== undefined) {
+                const logo = el('div', 'qr-logo');
+                logo.appendChild(buildWalletIcon(wallet));
+                qrBox.appendChild(logo);
+            }
+            setStage(qrBox, el('p', 'stage-caption', 'Scan with your phone’s camera'), el('p', 'stage-subline', `${walletName} stays on your phone.`));
         };
         const renderClaimed = () => {
             const pulse = document.createElement('div');
@@ -499,59 +603,102 @@ export function runConnectModal(options) {
             method = next;
             yield startMethod();
         });
-        // ── Footer: method link + wallet switcher ──────────────────
+        // ── Footer: identity row (+ catalog panel), method link below ──
         const renderFooter = () => {
             footer.replaceChildren();
+            if (!lockedWallet) {
+                composeWalletRow();
+                const switcher = buildWalletSwitcher();
+                if (switcher.label !== undefined) {
+                    footer.appendChild(switcher.label);
+                }
+                footer.appendChild(switcher.row);
+                footer.appendChild(switcher.panel);
+            }
+            const row = document.createElement('div');
+            row.className = 'footer-row';
             if (method === 'phone') {
                 const alt = document.createElement('button');
                 alt.className = 'footer-link method-link';
-                alt.textContent = 'No phone handy? Use this browser →';
+                alt.textContent = 'No phone? Use this browser →';
                 // startPopup runs synchronously in this click handler.
                 alt.addEventListener('click', () => { startPopup(); });
-                footer.appendChild(alt);
+                row.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);
+                row.appendChild(alt);
             }
-            if (!lockedWallet && wallets.length > 0) {
-                footer.appendChild(buildWalletSwitcher());
+            if (row.childElementCount > 0) {
+                footer.appendChild(row);
             }
         };
         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'} ▾`;
+            var _a;
+            // Identity row: selected wallet + the next catalog wallets, then the
+            // More tile expanding the full catalog in place.
+            const row = document.createElement('div');
+            row.className = 'wallet-row';
+            row.setAttribute('role', 'radiogroup');
+            row.setAttribute('aria-label', 'Wallet');
+            for (const wallet of rowWallets) {
+                const tile = document.createElement('button');
+                tile.className = 'row-tile';
+                tile.title = (_a = wallet.description) !== null && _a !== void 0 ? _a : wallet.name;
+                tile.setAttribute('role', 'radio');
+                const isSelected = wallet.url === walletUrl;
+                tile.setAttribute('aria-checked', isSelected ? 'true' : 'false');
+                if (isSelected) {
+                    tile.classList.add('selected');
+                }
+                tile.appendChild(buildWalletIcon(wallet));
+                tile.appendChild(el('span', 'row-tile-name', wallet.name));
+                tile.addEventListener('click', () => {
+                    if (wallet.url !== walletUrl) {
+                        selectWallet(wallet.url);
+                    }
+                });
+                row.appendChild(tile);
+            }
             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 hiddenCount = wallets.filter((wallet) => !rowWallets.some((shown) => shown.url === wallet.url)).length;
+            const more = document.createElement('button');
+            more.className = 'row-tile more-tile';
+            more.title = 'All wallets';
+            more.setAttribute('aria-expanded', 'false');
+            more.appendChild(el('span', 'more-count', hiddenCount > 0 ? `+${hiddenCount}` : '⋯'));
+            more.appendChild(el('span', 'row-tile-name', 'More'));
+            more.addEventListener('click', () => {
+                panel.hidden = !panel.hidden;
+                more.setAttribute('aria-expanded', panel.hidden ? 'false' : 'true');
+            });
+            row.appendChild(more);
+            const label = rowWallets.length > 0 ? el('div', 'wallet-row-label', 'Connecting with') : undefined;
+            // Search filter — appears once the catalog outgrows one grid row.
+            const tiles = [];
             const empty = document.createElement('div');
             empty.className = 'wallet-empty';
             empty.textContent = 'No wallets match your search.';
             empty.hidden = true;
-            if (wallets.length > 5) {
+            if (wallets.length > WALLET_SEARCH_THRESHOLD) {
                 const search = document.createElement('input');
                 search.type = 'search';
                 search.className = 'wallet-search';
                 search.placeholder = 'Search wallets…';
+                search.setAttribute('aria-label', 'Search wallets');
                 search.addEventListener('input', () => {
                     const query = search.value.trim().toLowerCase();
                     let visible = 0;
-                    for (const { wallet, el } of rows) {
+                    for (const { wallet, el: tile } of tiles) {
                         const match = query === ''
                             || wallet.name.toLowerCase().includes(query)
                             || wallet.url.toLowerCase().includes(query);
-                        el.hidden = !match;
+                        tile.hidden = !match;
                         if (match) {
                             visible += 1;
                         }
@@ -560,26 +707,34 @@ export function runConnectModal(options) {
                 });
                 panel.appendChild(search);
             }
+            // Square tiles, three per row; past two rows the grid scrolls in
+            // place so a large catalog never stretches the modal.
+            const scroll = document.createElement('div');
+            scroll.className = 'wallet-scroll';
+            const grid = document.createElement('div');
+            grid.className = 'wallet-grid';
             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);
+                const tile = document.createElement('button');
+                tile.className = 'wallet-tile';
+                tile.title = wallet.name;
+                tile.appendChild(buildWalletIcon(wallet));
+                const tileName = document.createElement('span');
+                tileName.className = 'wallet-tile-name';
+                tileName.textContent = wallet.name;
+                tile.appendChild(tileName);
                 if (wallet.url === walletUrl) {
-                    row.classList.add('selected');
+                    tile.classList.add('selected');
+                    tile.setAttribute('aria-pressed', 'true');
                 }
-                row.addEventListener('click', () => {
-                    walletUrl = wallet.url;
-                    renderFooter();
-                    void startMethod();
+                tile.addEventListener('click', () => {
+                    selectWallet(wallet.url);
                 });
-                rows.push({ wallet, el: row });
-                panel.appendChild(row);
+                tiles.push({ wallet, el: tile });
+                grid.appendChild(tile);
             }
-            panel.appendChild(empty);
+            scroll.appendChild(grid);
+            scroll.appendChild(empty);
+            panel.appendChild(scroll);
             // Custom wallet URL (the power-user path, demoted to the disclosure).
             const custom = document.createElement('div');
             custom.className = 'wallet-custom';
@@ -597,11 +752,6 @@ export function runConnectModal(options) {
             // 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 === '') {
@@ -616,7 +766,7 @@ export function runConnectModal(options) {
                     return;
                 }
                 if (allowUnverified) {
-                    useWallet(origin);
+                    selectWallet(origin);
                     return;
                 }
                 go.disabled = true;
@@ -626,7 +776,7 @@ export function runConnectModal(options) {
                 go.disabled = false;
                 if (valid) {
                     go.textContent = 'Use';
-                    useWallet(origin);
+                    selectWallet(origin);
                     return;
                 }
                 allowUnverified = true;
@@ -651,13 +801,7 @@ export function runConnectModal(options) {
             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;
+            return { label, row, panel };
         };
         // ── Global interactions ────────────────────────────────────
         overlay.addEventListener('click', (event) => {
@@ -686,6 +830,22 @@ export function runConnectModal(options) {
 function walletInCatalog(wallets, url) {
     return wallets.some((wallet) => wallet.url === url);
 }
+/** Drops catalog entries that repeat an earlier wallet's URL. */
+function dedupeWalletsByUrl(wallets) {
+    return wallets.filter((wallet, index) => wallets.findIndex((candidate) => candidate.url === wallet.url) === index);
+}
+/** Compact display form of a wallet URL for the switcher toggle. */
+function hostnameOf(url) {
+    if (url === undefined) {
+        return undefined;
+    }
+    try {
+        return new URL(url).hostname;
+    }
+    catch (_a) {
+        return url;
+    }
+}
 function el(tag, className, text) {
     const node = document.createElement(tag);
     node.className = className;
@@ -753,19 +913,42 @@ function trapFocus(shadow, event) {
     }
 }
 // ─── 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 `
+//
+// One static sheet; every color reads a `--ec-*` token. Light values sit on
+// `.modal`, dark values apply under `prefers-color-scheme` (so the system
+// appearance tracks live) and under a forced `data-appearance`. Dapp
+// palette overrides land as inline custom properties, which outrank all of
+// these — nothing user-provided is ever concatenated into this string.
+/** Light-appearance design tokens. */
+const LIGHT_TOKENS = `
+      --ec-bg: #ffffff;
+      --ec-surface: #f5f6f8;
+      --ec-text: #17171f;
+      --ec-muted: #63636e;
+      --ec-border: #e3e4e9;
+      --ec-accent: #0a62d0;
+      --ec-accent-contrast: #ffffff;
+      --ec-danger: #c0392b;
+      --ec-success: #1e9e5a;`;
+/** Dark-appearance design tokens. */
+const DARK_TOKENS = `
+      --ec-bg: #181822;
+      --ec-surface: #23232f;
+      --ec-text: #e9e9f0;
+      --ec-muted: #9a9aa6;
+      --ec-border: #33333f;
+      --ec-accent: #58a6ff;
+      --ec-accent-contrast: #0b1526;
+      --ec-danger: #ff7a7a;
+      --ec-success: #43d17c;`;
+const MODAL_STYLES = `
     * { box-sizing: border-box; margin: 0; padding: 0; }
 
+    /* Keep the hidden attribute authoritative: author display values (e.g.
+       the panel's flex) would otherwise override the UA's [hidden] rule and
+       leave "collapsed" sections permanently expanded. */
+    [hidden] { display: none !important; }
+
     .overlay {
       position: fixed;
       inset: 0;
@@ -773,6 +956,7 @@ function buildStyles(isDark) {
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: 16px;
       background: rgba(0, 0, 0, 0.5);
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       animation: fadeIn 0.15s ease-out;
@@ -787,115 +971,159 @@ function buildStyles(isDark) {
       40%, 80% { transform: translateX(6px); }
     }
     @keyframes spin { to { transform: rotate(360deg); } }
+    @keyframes claimedPulse {
+      0%, 100% { transform: scale(0.85); opacity: 0.7; }
+      50% { transform: scale(1); opacity: 1; }
+    }
 
-    .modal {
-      background: ${bg};
-      color: ${text};
+    .modal {${LIGHT_TOKENS}
+      --ec-accent-soft: color-mix(in srgb, var(--ec-accent) 14%, transparent);
+      background: var(--ec-bg);
+      color: var(--ec-text);
       border-radius: 16px;
       width: 400px;
-      max-width: 92vw;
-      max-height: 88vh;
+      max-width: 100%;
+      max-height: calc(100vh - 32px);
       overflow-y: auto;
-      padding: 20px 24px 16px;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+      padding: 16px 20px 12px;
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
       animation: slideUp 0.2s ease-out;
       display: flex;
       flex-direction: column;
     }
+    @media (prefers-color-scheme: dark) {
+      .modal {${DARK_TOKENS}
+      }
+    }
+    .modal[data-appearance='light'] {${LIGHT_TOKENS}
+    }
+    .modal[data-appearance='dark'] {${DARK_TOKENS}
+    }
+
+    button, input { font-family: inherit; }
+    button:focus-visible, a:focus-visible {
+      outline: 2px solid var(--ec-accent);
+      outline-offset: 2px;
+    }
 
-    .header { display: flex; justify-content: space-between; align-items: center; }
+    .header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
     .header-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
-    .header-icon { border-radius: 6px; }
+    .header-icon { border-radius: 6px; flex-shrink: 0; }
     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;
+      color: var(--ec-muted); padding: 4px 8px; border-radius: 8px; line-height: 1;
+      flex-shrink: 0;
     }
-    .close-btn:hover { color: ${text}; background: ${itemBg}; }
+    .close-btn:hover { color: var(--ec-text); background: var(--ec-surface); }
 
     .stage {
-      min-height: 300px;
+      min-height: 240px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 12px;
+      gap: 10px;
       text-align: center;
-      padding: 16px 0;
+      padding: 12px 0 10px;
     }
     .stage.fade-in > * { animation: stageIn 0.15s ease-out; }
 
     .qr-box {
-      width: 216px;
-      height: 216px;
-      padding: 12px;
+      position: relative;
+      width: 200px;
+      height: 200px;
+      padding: 10px;
       border-radius: 12px;
-      background: ${isDark ? '#10192e' : '#ffffff'}
+      background: #ffffff;
+      border: 1px solid #e3e4e9;
+    }
+    .qr-box svg { width: 100%; height: 100%; display: block; }
+
+    /* Selected wallet's mark on the QR centre. Like the card, the plate is
+       theme-invariant white so the logo sits on a scannable ground. */
+    .qr-logo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 44px;
+      height: 44px;
+      border-radius: 10px;
+      background: #ffffff;
+      border: 1px solid #e3e4e9;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .qr-logo .wallet-icon { width: 30px; height: 30px; }
+    .qr-logo .wallet-badge { border-radius: 8px; font-size: 15px; }
+
     .claimed-pulse {
       width: 64px; height: 64px; border-radius: 50%;
-      background: ${accentSoft}; position: relative;
+      background: var(--ec-accent-soft); position: relative;
     }
     .claimed-pulse::after {
       content: ''; position: absolute; inset: 18px; border-radius: 50%;
-      background: ${accent};
-      animation: enbox-claimed-pulse 1.6s ease-in-out infinite;
+      background: var(--ec-accent);
+      animation: claimedPulse 1.6s ease-in-out infinite;
     }
-    @keyframes enbox-claimed-pulse {
-      0%, 100% { transform: scale(0.85); opacity: 0.7; }
-      50% { transform: scale(1); opacity: 1; }
-    }
-    @media (prefers-reduced-motion: reduce) {
-      .claimed-pulse::after { animation: none; }
-    };
-      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}; }
+    .stage-subline { font-size: 13px; color: var(--ec-muted); max-width: 300px; line-height: 1.45; }
+    .stage-error { font-size: 13px; color: var(--ec-danger); }
 
     .deep-link {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
       width: 100%;
-      padding: 14px 16px;
+      padding: 13px 16px;
       border-radius: 12px;
-      background: ${accent};
-      color: #fff;
+      background: var(--ec-accent);
+      color: var(--ec-accent-contrast);
       font-weight: 600;
       font-size: 15px;
       text-decoration: none;
     }
+    .deep-link .wallet-icon { width: 24px; height: 24px; }
+    .deep-link .wallet-badge {
+      border-radius: 6px;
+      font-size: 12px;
+      background: var(--ec-accent-contrast);
+    }
+    .deep-link .wallet-img { border-radius: 6px; }
 
     .pin-row { display: flex; gap: 10px; }
     .pin-row.shake { animation: shake 0.4s ease-in-out; }
     .pin-input {
-      width: 48px; height: 56px;
+      width: 46px; height: 54px;
       text-align: center;
       font-size: 24px; font-weight: 600;
-      color: ${text};
-      background: ${itemBg};
-      border: 1px solid ${border};
+      color: var(--ec-text);
+      background: var(--ec-surface);
+      border: 1px solid var(--ec-border);
       border-radius: 10px;
       outline: none;
     }
-    .pin-input:focus { border-color: ${accent}; }
+    .pin-input:focus { border-color: var(--ec-accent); }
 
     .check {
       width: 56px; height: 56px;
       display: flex; align-items: center; justify-content: center;
       border-radius: 50%;
-      background: ${success};
-      color: #fff;
+      background: var(--ec-success);
+      color: #ffffff;
       font-size: 28px;
     }
 
     .spinner {
       width: 32px; height: 32px;
       border-radius: 50%;
-      border: 3px solid ${border};
-      border-top-color: ${accent};
+      border: 3px solid var(--ec-border);
+      border-top-color: var(--ec-accent);
       animation: spin 0.8s linear infinite;
     }
 
@@ -903,88 +1131,170 @@ function buildStyles(isDark) {
       padding: 10px 20px;
       border: none;
       border-radius: 10px;
-      background: ${accent};
-      color: #fff;
+      background: var(--ec-accent);
+      color: var(--ec-accent-contrast);
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
     }
-    .stage-btn:hover { filter: brightness(1.1); }
+    .stage-btn:hover { filter: brightness(1.08); }
 
     .footer {
-      border-top: 1px solid ${border};
-      padding-top: 10px;
+      border-top: 1px solid var(--ec-border);
+      padding-top: 8px;
       display: flex;
       flex-direction: column;
       gap: 6px;
+    }
+
+    .footer-row {
+      display: flex;
       align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 2px 8px;
     }
+    .footer-row > * { min-width: 0; }
+    .footer-row > :only-child { margin-inline: auto; }
 
     .footer-link {
       background: none;
       border: none;
-      color: ${muted};
+      color: var(--ec-muted);
       font-size: 13px;
       cursor: pointer;
-      padding: 4px 8px;
+      padding: 5px 8px;
       border-radius: 8px;
     }
-    .footer-link:hover { color: ${text}; background: ${itemBg}; }
-    .method-link { color: ${accent}; }
+    .footer-link:hover { color: var(--ec-text); background: var(--ec-surface); }
+    .method-link { color: var(--ec-accent); }
+
+    .wallet-row-label { font-size: 12px; color: var(--ec-muted); padding: 2px 2px 0; }
 
-    .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;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 8px;
+    }
+    .row-tile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 10px 6px;
+      min-width: 0;
+      background: var(--ec-surface);
+      border: 1px solid var(--ec-border);
+      border-radius: 12px;
+      color: var(--ec-text);
+      font-size: 11px;
       cursor: pointer;
     }
-    .wallet-row:hover, .wallet-row.selected { border-color: ${accent}; }
+    .row-tile:hover { border-color: var(--ec-accent); }
+    .row-tile.selected {
+      border-color: var(--ec-accent);
+      background: var(--ec-accent-soft);
+      box-shadow: inset 0 0 0 1px var(--ec-accent);
+    }
+    .row-tile.selected .row-tile-name { font-weight: 600; }
+    .row-tile .wallet-icon { width: 28px; height: 28px; }
+    .row-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+    .more-tile { color: var(--ec-muted); }
+    .more-tile:hover { color: var(--ec-text); }
+    .more-tile[aria-expanded='true'] { border-color: var(--ec-accent); }
+    .more-count {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      background: var(--ec-accent-soft);
+      color: var(--ec-accent);
+    }
+
+    .wallet-panel { width: 100%; padding: 4px 0 2px; display: flex; flex-direction: column; gap: 8px; }
+    .wallet-search {
+      width: 100%; padding: 8px 12px;
+      border-radius: 10px; border: 1px solid var(--ec-border); background: transparent;
+      color: inherit; font: inherit; font-size: 13px;
+    }
+    .wallet-search:focus { outline: none; border-color: var(--ec-accent); }
+
+    .wallet-scroll { max-height: 260px; overflow-y: auto; }
+    .wallet-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 8px;
+    }
+    .wallet-tile {
+      aspect-ratio: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 8px;
+      min-width: 0;
+      background: var(--ec-surface);
+      border: 1px solid var(--ec-border);
+      border-radius: 12px;
+      color: var(--ec-text);
+      font-size: 12px;
+      cursor: pointer;
+    }
+    .wallet-tile:hover { border-color: var(--ec-accent); }
+    .wallet-tile.selected {
+      border-color: var(--ec-accent);
+      background: var(--ec-accent-soft);
+      box-shadow: inset 0 0 0 1px var(--ec-accent);
+    }
+    .wallet-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
     .wallet-icon { position: relative; width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; }
+    .wallet-tile .wallet-icon { width: 40px; height: 40px; }
     .wallet-badge {
-      width: 28px; height: 28px; border-radius: 8px; display: inline-flex;
+      width: 100%; height: 100%; border-radius: 8px; display: inline-flex;
       align-items: center; justify-content: center; font-size: 13px;
-      font-weight: 600; background: ${accentSoft}; color: ${accent};
+      font-weight: 600; background: var(--ec-accent-soft); color: var(--ec-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; }
+    .wallet-tile .wallet-badge { border-radius: 10px; font-size: 17px; }
+    .wallet-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
+    .wallet-tile .wallet-img { border-radius: 10px; }
+
+    .wallet-empty { padding: 10px 4px; font-size: 12px; color: var(--ec-muted); text-align: center; }
+
+    .wallet-custom { display: flex; gap: 6px; }
     .url-input {
       flex: 1;
       padding: 8px 12px;
-      border: 1px solid ${border};
+      border: 1px solid var(--ec-border);
       border-radius: 10px;
       font-size: 13px;
-      background: ${itemBg};
-      color: ${text};
+      background: var(--ec-surface);
+      color: var(--ec-text);
       outline: none;
     }
-    .url-input:focus { border-color: ${accent}; }
-    .url-input.invalid { border-color: ${danger}; }
+    .url-input:focus { border-color: var(--ec-accent); }
+    .url-input.invalid { border-color: var(--ec-danger); }
     .url-go {
       padding: 8px 14px;
       border: none;
       border-radius: 10px;
-      background: ${accent};
-      color: #fff;
+      background: var(--ec-accent);
+      color: var(--ec-accent-contrast);
       font-size: 13px;
       cursor: pointer;
     }
-  `;
-}
+    .url-error { font-size: 12px; color: var(--ec-danger); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .overlay, .modal, .stage.fade-in > *, .pin-row.shake { animation: none; }
+      .claimed-pulse::after { animation: none; }
+    }
+`;
 //# sourceMappingURL=connect-modal.js.map