hd-wallet-ui 2.0.14 → 2.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "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.14",
+    "hd-wallet-wasm": "^2.0.16",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^1.93.3",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -4272,6 +4272,7 @@ 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) {
@@ -6024,8 +6025,17 @@ export async function createWalletUI(rootElement, options = {}) {
   return {
     /** Open the login modal */
     openLogin() {
-      const modal = document.getElementById('login-modal');
-      if (modal) modal.classList.add('active');
+      if (state.loggedIn) {
+        const accountModal = document.getElementById('keys-modal');
+        if (accountModal) accountModal.classList.add('active');
+        return;
+      }
+      const loginModal = document.getElementById('login-modal');
+      if (loginModal) {
+        loginModal.classList.add('active');
+        const storedTab = loginModal.querySelector('[data-method="stored"]');
+        if (storedTab && storedTab.style.display !== 'none') storedTab.click();
+      }
     },
     /** Open the account / keys modal (requires login first) */
     openAccount() {

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><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-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-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>

package/styles/main.css

@@ -977,9 +977,10 @@ body:has(.modal.active) .nav-bar {
 
 .wallet-info-expanded {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 12px 24px;
+  min-height: 30px;
+  padding: 6px 24px;
   background: rgba(59, 130, 246, 0.1);
   font-size: 13px;
   line-height: 1.5;
@@ -995,12 +996,17 @@ body:has(.modal.active) .nav-bar {
 }
 
 .wallet-info-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 18px;
   cursor: pointer;
-  padding: 0 2px;
+  padding: 0;
+  width: 22px;
+  height: 22px;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -1189,6 +1195,7 @@ body:has(.modal.active) .nav-bar {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: center;
   gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
@@ -1196,8 +1203,37 @@ body:has(.modal.active) .nav-bar {
 
 .account-modal-header {
   position: relative;
+  align-items: center;
   min-height: 118px;
-  padding-right: 56px;
+  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;
 }
 
 .account-wallet-row {
@@ -1232,8 +1268,8 @@ body:has(.modal.active) .nav-bar {
 
 .account-wallet-balance-line {
   display: flex;
-  align-items: baseline;
-  gap: 10px;
+  align-items: center;
+  gap: 8px;
 }
 
 .account-wallet-summary .ph-portfolio-value {
@@ -1241,7 +1277,7 @@ body:has(.modal.active) .nav-bar {
 }
 
 .account-wallet-summary .ph-portfolio-label {
-  font-size: 26px;
+  font-size: 18px;
   color: var(--white-80);
   margin-top: 0;
 }
@@ -1284,9 +1320,7 @@ body:has(.modal.active) .nav-bar {
 }
 
 .account-modal-close {
-  position: absolute;
-  top: 12px;
-  right: 14px;
+  position: static;
 }
 
 .modal-body {

package/styles/widget.css

@@ -979,9 +979,10 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
 #hd-wallet-ui-container .wallet-info-expanded {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 8px;
-  padding: 12px 24px;
+  min-height: 30px;
+  padding: 6px 24px;
   background: rgba(59, 130, 246, 0.1);
   font-size: 13px;
   line-height: 1.5;
@@ -997,12 +998,17 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .wallet-info-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: none;
   border: none;
   color: rgba(255, 255, 255, 0.5);
   font-size: 18px;
   cursor: pointer;
-  padding: 0 2px;
+  padding: 0;
+  width: 22px;
+  height: 22px;
   line-height: 1;
   flex-shrink: 0;
 }
@@ -1191,6 +1197,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  justify-content: center;
   gap: 8px;
   flex: 1 1 auto;
   min-width: 0;
@@ -1198,8 +1205,37 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 
 #hd-wallet-ui-container .account-modal-header {
   position: relative;
+  align-items: center;
   min-height: 118px;
-  padding-right: 56px;
+  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;
 }
 
 #hd-wallet-ui-container .account-wallet-row {
@@ -1234,8 +1270,8 @@ 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: baseline;
-  gap: 10px;
+  align-items: center;
+  gap: 8px;
 }
 
 #hd-wallet-ui-container .account-wallet-summary .ph-portfolio-value {
@@ -1243,7 +1279,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .account-wallet-summary .ph-portfolio-label {
-  font-size: 26px;
+  font-size: 18px;
   color: var(--white-80);
   margin-top: 0;
 }
@@ -1286,9 +1322,7 @@ body:has(#hd-wallet-ui-container .modal.active) #hd-wallet-ui-container .nav-bar
 }
 
 #hd-wallet-ui-container .account-modal-close {
-  position: absolute;
-  top: 12px;
-  right: 14px;
+  position: static;
 }
 
 #hd-wallet-ui-container .modal-body {