hd-wallet-ui 2.0.16 → 2.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "HD Wallet modal UI — login, keys, identity, trust map, and security bond. Attach to any button in your app.",
   "type": "module",
   "main": "src/app.js",
@@ -40,7 +40,7 @@
     "buffer": "^6.0.3",
     "flatbuffers": "^25.9.23",
     "flatc-wasm": "^26.1.32",
-    "hd-wallet-wasm": "^2.0.16",
+    "hd-wallet-wasm": "^2.0.18",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^1.93.3",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -3836,8 +3836,8 @@ function isPasskeySupported() {
 
 // Track selected remember method (pin or passkey) for each login type
 const rememberMethod = {
-  password: 'passkey',
-  seed: 'passkey'
+  password: 'pin',
+  seed: 'pin'
 };
 
 function setupLoginHandlers() {
@@ -4272,7 +4272,6 @@ function setupMainAppHandlers() {
     $('login-modal')?.classList.add('active');
   });
   $('nav-logout')?.addEventListener('click', logout);
-  $('account-logout')?.addEventListener('click', logout);
   $('nav-keys')?.addEventListener('click', async () => {
     $('keys-modal')?.classList.add('active');
     if (state.loggedIn) {
@@ -6042,6 +6041,10 @@ export async function createWalletUI(rootElement, options = {}) {
       const modal = document.getElementById('keys-modal');
       if (modal) modal.classList.add('active');
     },
+    /** Clear the wallet session; host applications own any visible logout control */
+    logout() {
+      logout();
+    },
     /** Remove all injected wallet UI elements from the DOM */
     destroy() {
       const container = document.getElementById('hd-wallet-ui-container');

package/src/template.js

@@ -3,7 +3,7 @@ export function getModalHTML() {
   <!-- Keys Modal -->
   <div id="keys-modal" class="modal">
   <div class="modal-glass modal-wide">
-      <div class="modal-header account-modal-header"><div class="account-header-info"><div class="account-wallet-row"><select id="account-wallet-select" class="glass-input compact account-wallet-select" aria-label="Select wallet"></select></div><div class="account-wallet-summary"><div class="account-wallet-balance-line"><div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div><div class="ph-portfolio-label">Bond</div></div></div></div><div class="account-header-actions"><button id="account-logout" class="account-logout-btn" type="button" aria-label="Logout" title="Logout"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg></button><button class="modal-close account-modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div></div>
+      <div class="modal-header account-modal-header"><div class="account-header-info"><div class="account-wallet-row"><select id="account-wallet-select" class="glass-input compact account-wallet-select" aria-label="Select wallet"></select></div><div class="account-wallet-summary"><div class="account-wallet-balance-line"><div class="ph-portfolio-value" id="wallet-bond-value">$0.00</div><div class="ph-portfolio-label">Bond</div></div></div></div><button class="modal-close account-modal-close" type="button" aria-label="Close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
       <div class="modal-tabs">
         <button class="modal-tab active" data-modal-tab="vcard-tab-content">Identity</button>
         <button class="modal-tab" data-modal-tab="trust-tab-content">Trust Map</button>
@@ -562,11 +562,11 @@ export function getModalHTML() {
             <span class="entropy-label"><span id="entropy-bits">0</span> bits entropy</span>
           </div>
           <div class="remember-wallet-group">
-            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-password"><span class="checkmark"></span><span>Remember wallet</span></label>
-            <div class="remember-options" id="remember-options-password" style="display: none;">
-              <div class="remember-method-selector"><button type="button" class="remember-method-btn" data-method="pin" data-target="password">PIN</button><button type="button" class="remember-method-btn active" data-method="passkey" data-target="password" id="passkey-btn-password">Passkey</button></div>
-              <div class="pin-input-group" id="pin-group-password" style="display: none;"><input type="password" id="pin-input-password" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
-              <div class="passkey-info" id="passkey-info-password"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
+            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-password" checked><span class="checkmark"></span><span>Remember wallet</span></label>
+            <div class="remember-options" id="remember-options-password">
+              <div class="remember-method-selector"><button type="button" class="remember-method-btn active" data-method="pin" data-target="password">PIN</button><button type="button" class="remember-method-btn" data-method="passkey" data-target="password" id="passkey-btn-password">Passkey</button></div>
+              <div class="pin-input-group" id="pin-group-password"><input type="password" id="pin-input-password" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
+              <div class="passkey-info" id="passkey-info-password" style="display: none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
             </div>
           </div>
           <button id="derive-from-password" class="glass-btn primary full-width" disabled type="button">Login</button>
@@ -574,11 +574,11 @@ export function getModalHTML() {
         <div id="seed-method" class="method-content">
           <div class="glass-input-group"><textarea id="seed-phrase" class="glass-input glass-textarea" rows="3" placeholder="Enter 12 or 24 word seed phrase..."></textarea><div class="seed-actions"><button id="generate-seed" class="glass-btn small">Generate</button><button id="validate-seed" class="glass-btn small">Validate</button></div></div>
           <div class="remember-wallet-group">
-            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-seed"><span class="checkmark"></span><span>Remember wallet</span></label>
-            <div class="remember-options" id="remember-options-seed" style="display: none;">
-              <div class="remember-method-selector"><button type="button" class="remember-method-btn" data-method="pin" data-target="seed">PIN</button><button type="button" class="remember-method-btn active" data-method="passkey" data-target="seed" id="passkey-btn-seed">Passkey</button></div>
-              <div class="pin-input-group" id="pin-group-seed" style="display: none;"><input type="password" id="pin-input-seed" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
-              <div class="passkey-info" id="passkey-info-seed"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
+            <label class="glass-checkbox"><input type="checkbox" id="remember-wallet-seed" checked><span class="checkmark"></span><span>Remember wallet</span></label>
+            <div class="remember-options" id="remember-options-seed">
+              <div class="remember-method-selector"><button type="button" class="remember-method-btn active" data-method="pin" data-target="seed">PIN</button><button type="button" class="remember-method-btn" data-method="passkey" data-target="seed" id="passkey-btn-seed">Passkey</button></div>
+              <div class="pin-input-group" id="pin-group-seed"><input type="password" id="pin-input-seed" class="glass-input pin-input" placeholder="6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*"></div>
+              <div class="passkey-info" id="passkey-info-seed" style="display: none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a5 5 0 0 1 5 5v3H7V7a5 5 0 0 1 5-5z"/><rect x="3" y="10" width="18" height="12" rx="2"/><circle cx="12" cy="16" r="1"/></svg><span>Use Face ID, Touch ID, or device PIN</span></div>
             </div>
           </div>
           <button id="derive-from-seed" class="glass-btn primary full-width" disabled>Login</button>

package/styles/main.css

@@ -1205,35 +1205,7 @@ body:has(.modal.active) .nav-bar {
   position: relative;
   align-items: center;
   min-height: 118px;
-  padding-right: 92px;
-}
-
-.account-header-actions {
-  position: absolute;
-  top: 12px;
-  right: 14px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.account-logout-btn {
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  color: var(--white);
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.2s, opacity 0.2s;
-}
-
-.account-logout-btn:hover {
-  color: var(--white-80);
-  opacity: 0.9;
+  padding-right: 56px;
 }
 
 .account-wallet-row {
@@ -1269,11 +1241,12 @@ body:has(.modal.active) .nav-bar {
 .account-wallet-balance-line {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
 }
 
 .account-wallet-summary .ph-portfolio-value {
   color: #4ade80;
+  font-size: 25px;
 }
 
 .account-wallet-summary .ph-portfolio-label {
@@ -1320,7 +1293,9 @@ body:has(.modal.active) .nav-bar {
 }
 
 .account-modal-close {
-  position: static;
+  position: absolute;
+  top: 12px;
+  right: 14px;
 }
 
 .modal-body {

package/styles/widget.css

@@ -1207,35 +1207,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   position: relative;
   align-items: center;
   min-height: 118px;
-  padding-right: 92px;
-}
-
-#hd-wallet-ui-container .account-header-actions {
-  position: absolute;
-  top: 12px;
-  right: 14px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-#hd-wallet-ui-container .account-logout-btn {
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  color: var(--white);
-  cursor: pointer;
-  padding: 0;
-  transition: color 0.2s, opacity 0.2s;
-}
-
-#hd-wallet-ui-container .account-logout-btn:hover {
-  color: var(--white-80);
-  opacity: 0.9;
+  padding-right: 56px;
 }
 
 #hd-wallet-ui-container .account-wallet-row {
@@ -1271,11 +1243,12 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 #hd-wallet-ui-container .account-wallet-balance-line {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
 }
 
 #hd-wallet-ui-container .account-wallet-summary .ph-portfolio-value {
   color: #4ade80;
+  font-size: 25px;
 }
 
 #hd-wallet-ui-container .account-wallet-summary .ph-portfolio-label {
@@ -1322,7 +1295,9 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .account-modal-close {
-  position: static;
+  position: absolute;
+  top: 12px;
+  right: 14px;
 }
 
 #hd-wallet-ui-container .modal-body {