@enbox/browser 0.3.44 → 0.3.46

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

@@ -13,9 +13,18 @@
  * 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** — one row holding the alternate-method link and the wallet
+ *    switcher disclosure (a tile grid with search + custom URL — the
+ *    entire legacy selector, demoted to an option).
+ *
+ * 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 +57,20 @@ 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
+/** 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
@@ -158,14 +181,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 +196,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;
@@ -182,13 +240,15 @@ export function runConnectModal(options) {
         let pinResolve;
         const discoveryCache = new Map();
         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) {
@@ -237,12 +297,19 @@ export function runConnectModal(options) {
             }
             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.'));
+            setStage(qrBox, el('p', 'stage-caption', 'Scan with your phone’s camera'), el('p', 'stage-subline', 'Your wallet stays on your phone.'));
+        };
+        const renderClaimed = () => {
+            const pulse = document.createElement('div');
+            pulse.className = 'claimed-pulse';
+            setStage(pulse, el('p', 'stage-caption', 'Phone connected — finish there'), el('p', 'stage-subline', 'Approve the request on your phone, then come back here.'));
         };
         const renderPin = (attempt, previousError) => {
             return new Promise((resolvePin) => {
@@ -388,6 +455,14 @@ export function runConnectModal(options) {
                             scheduleRemint(handoff.expiresIn);
                         }
                     },
+                    onClaimed: () => {
+                        if (session.active && !settled) {
+                            // The phone has the request — stop re-minting (a new pointer
+                            // would orphan the approval in progress) and show progress.
+                            clearTimeout(remintTimer);
+                            renderClaimed();
+                        }
+                    },
                     requestPin: (attempt, previousError) => {
                         clearTimeout(remintTimer);
                         return renderPin(attempt, previousError);
@@ -486,59 +561,69 @@ export function runConnectModal(options) {
             method = next;
             yield startMethod();
         });
-        // ── Footer: method link + wallet switcher ──────────────────
+        // ── Footer: one row (method link + wallet toggle), panel below ──
         const renderFooter = () => {
             footer.replaceChildren();
+            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);
             }
+            let panel;
             if (!lockedWallet && wallets.length > 0) {
-                footer.appendChild(buildWalletSwitcher());
+                const switcher = buildWalletSwitcher();
+                row.appendChild(switcher.toggle);
+                panel = switcher.panel;
+            }
+            if (row.childElementCount > 0) {
+                footer.appendChild(row);
+            }
+            if (panel !== undefined) {
+                footer.appendChild(panel);
             }
         };
         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'} ▾`;
+            toggle.textContent = `Wallet: ${(_b = (_a = current === null || current === void 0 ? void 0 : current.name) !== null && _a !== void 0 ? _a : hostnameOf(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 = [];
+            // 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;
                         }
@@ -547,26 +632,36 @@ 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', () => {
+                tile.addEventListener('click', () => {
                     walletUrl = wallet.url;
                     renderFooter();
                     void startMethod();
                 });
-                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';
@@ -642,9 +737,7 @@ export function runConnectModal(options) {
                 panel.hidden = !panel.hidden;
                 toggle.setAttribute('aria-expanded', panel.hidden ? 'false' : 'true');
             });
-            wrap.appendChild(toggle);
-            wrap.appendChild(panel);
-            return wrap;
+            return { toggle, panel };
         };
         // ── Global interactions ────────────────────────────────────
         overlay.addEventListener('click', (event) => {
@@ -673,6 +766,18 @@ export function runConnectModal(options) {
 function walletInCatalog(wallets, url) {
     return wallets.some((wallet) => wallet.url === url);
 }
+/** 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;
@@ -740,19 +845,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;
@@ -760,6 +888,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;
@@ -774,66 +903,96 @@ 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;
+      width: 200px;
+      height: 200px;
+      padding: 10px;
       border-radius: 12px;
-      background: ${isDark ? '#10192e' : '#ffffff'};
-      border: 1px solid ${border};
+      background: #ffffff;
+      border: 1px solid #e3e4e9;
     }
     .qr-box svg { width: 100%; height: 100%; display: block; }
 
+    .claimed-pulse {
+      width: 64px; height: 64px; border-radius: 50%;
+      background: var(--ec-accent-soft); position: relative;
+    }
+    .claimed-pulse::after {
+      content: ''; position: absolute; inset: 18px; border-radius: 50%;
+      background: var(--ec-accent);
+      animation: claimedPulse 1.6s ease-in-out infinite;
+    }
+
     .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;
       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;
@@ -842,31 +1001,31 @@ function buildStyles(isDark) {
     .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;
     }
 
@@ -874,88 +1033,123 @@ 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-toggle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-    .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;
+    .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-row:hover, .wallet-row.selected { border-color: ${accent}; }
+    .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