@sponsorcoin/merit-wallet 0.0.1 → 0.0.2

package/README.md

@@ -7,3 +7,25 @@ It depends on `@sponsorcoin/spcoin-panels` (peer dependency). The plan for mergi
 is in `docs/meritWalletNpmDesignToDo.txt` of the web app repo.
 
 Build: `npm run build` (tsc, output in `dist/`, which is tracked like the other packages).
+
+## Host injectables and defaults
+
+The wallet owns portable defaults where they are safe. Hosts inject the parts that differ by deployment. An empty optional hook or API is not a working implementation: required behavior must be supplied by the host.
+
+| Injectable | Wallet default | What an app overrides it for | Who supplies it today |
+| --- | --- | --- | --- |
+| `MeritWalletApi` (`session`, `accounts`, `signing`) | `createWallet()` supplies an empty authenticator registry and in-memory active-authenticator selection; it does not create a vault or sign. | Connect the wallet UI to a real vault, accounts, approvals, signing, and transaction transport. | Web: `webWallet` and `webApprovers` backed by wallet state/server routes. Extension: local vault and background worker. |
+| `createWallet` registry, default backend, and active-authenticator store | Empty registry; `appDefault` is required; active selection falls back to memory. | Register the host's signers and persist account-to-signer selection. | Web: server keystore authenticator and web default. Extension: local vault authenticator and extension storage. |
+| Vault storage and capability | `VaultSession` and `createLocalVault` implement crypto and account operations; the host must provide ciphertext storage. | Choose secure persistence and an unlock lifecycle for the device. | Web uses its server keystore. Extension uses `chrome.storage` through the background worker. |
+| `MeritWalletApi.networks` | Network data comes from shared `spcoin-feeds`; wallet selection helpers do not own persistence. | Supply a different network set or persist active-network changes. | Web: shared registry plus app chain selection. Extension: shared registry plus extension chain selection. |
+| `WalletDataSource.resolveNetwork` | Shared `spcoin-feeds` resolver when omitted by consumers that use the shared network helper. | Use an app-specific registry. | Web and extension use shared feeds; no separate resolver is currently injected. |
+| `WalletDataSource.loadNetworkInfo` | Relative fetch from `/assets/blockchains/<chainId>/info.json` in the panel layer. | Change the asset origin or provide a native/platform data source. | Web uses same-origin assets. Extension supplies its packaged asset base URL. |
+| `WalletDataSource.loadTokenRecord` | No loader; token detail can remain partial when no loader is supplied. | Hydrate an address-only token from the app's token registry. | Web supplies its token store loader. Extension currently leaves it unset. |
+| `MeritPlatform` | `domPlatform`: browser clipboard, URL opening, file download, localStorage preferences, visibility and focus. | Replace browser operations with native share/storage/lifecycle behavior. | Web and extension use the package default. |
+| `walletAssetBaseUrl` | Empty base URL, so assets resolve from the current origin. | Point packaged wallet identity assets at an extension or other app bundle. | Web uses its origin. Extension supplies `chrome.runtime.getURL('')`. |
+| Sponsor read cache store | LocalStorage with memory fallback. | Share/cache sponsor totals through an app backend or platform storage. | Web registers the HTTP cache store. Extension uses the local default. |
+| Sponsor read transport (`SpCoinReadStepFn`) | HTTP POST to the same-origin `/api/spCoin/run-script` route. | Use a direct RPC client or another route when the host has no web server. | Web uses the default route. Extension injects direct chain RPC. |
+| Hosted API base | Enabled by default for engine features that use host API routes. | Disable hosted reads when running without the web server, or select another API base. | Web keeps the same-origin API. Extension disables hosted API calls. |
+| Account/profile source | No universal profile backend; package offers account profile UI/client contracts. | Load and persist account labels, profiles, and active account for the host. | Web uses account API/store. Extension uses its local profile adapter and bundled assets. |
+
+These defaults are runtime behavior, not a claim that every host can run without configuration: vault operations, token hydration, and chain reads require their corresponding host implementation. Keep host adapters limited to those real differences; do not copy package defaults into host code.

package/dist/AgentSelectDropDown.js

@@ -11,6 +11,7 @@
 // that passes renderAccountAvatar; without it the package's plain AccountAvatar is used (no click behaviour).
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { panelPartClass } from '@sponsorcoin/spcoin-common/styles';
 import { useCallback } from 'react';
 import { FEED_TYPE } from '@sponsorcoin/spcoin-common/context';
 import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
@@ -36,9 +37,10 @@ export default function ConnectedAgentSelectDropDown({ panelGateId, label = 'Sel
             feedType: FEED_TYPE.REMOTE_AGENT_ACCOUNTS,
             onCommit: (asset) => setAgentAccount(asset),
             selectOnLogoClick: true,
+            currentTokenAddress: address || undefined,
             validateSelection: (addr) => validateAccount('AGENT', addr, exchangeContext?.apiCoreSyncedMembers?.accounts ?? {}),
         }, 'AgentSelectDropDown:openAgentList', SP_COIN_DISPLAY.REMOTE_ACCOUNT_AGENT_LIST);
-    }, [agentListVisible, openActiveListPanel, closeActiveListPanel, setAgentAccount, exchangeContext?.apiCoreSyncedMembers?.accounts]);
+    }, [agentListVisible, openActiveListPanel, closeActiveListPanel, setAgentAccount, exchangeContext?.apiCoreSyncedMembers?.accounts, address]);
     return (_jsx(PortableAgentSelectDropDown
     // No agent (never selected, or selection cleared) falls through to the portable component's shared Anonymous avatar.
     , { 
@@ -46,6 +48,6 @@ export default function ConnectedAgentSelectDropDown({ panelGateId, label = 'Sel
         icon: agentAccount && !isUnselected
             ? (renderAccountAvatar
                 ? renderAccountAvatar(agentAccount)
-                : _jsx(AccountAvatar, { account: agentAccount, mode: SP_COIN_DISPLAY.AGENT_ACCOUNT, className: "h-full w-full object-cover", roleLabel: "AGENT" }))
+                : _jsx(AccountAvatar, { account: agentAccount, mode: SP_COIN_DISPLAY.AGENT_ACCOUNT, className: panelPartClass.avatarFill, roleLabel: "AGENT" }))
             : undefined, address: isUnselected ? undefined : address || undefined, symbol: isUnselected ? undefined : agentAccount?.symbol, placeholderLabel: label, onSelectClick: openAgentList, listOpen: agentListVisible, addrPrePostSize: addrPrePostSize, panelGateId: panelGateId === null ? undefined : (panelGateId ?? SP_COIN_DISPLAY.AGENT_SELECT_DROP_DOWN), panelGate: panelGateId === null ? undefined : PanelGate }));
 }

package/dist/AgentSelectDropDownWithAvatar.js

@@ -4,9 +4,10 @@
 // the account panel on click (spcoin-panels' AccountAvatarWithOpen), so a host no longer has to write the adapter.
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { panelPartClass } from '@sponsorcoin/spcoin-common/styles';
 import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
 import { AccountAvatarWithOpen } from '@sponsorcoin/spcoin-panels';
 import ConnectedAgentSelectDropDown from './AgentSelectDropDown';
 export default function AgentSelectDropDownWithAvatar({ panelGateId, label = 'Select Agent', addrPrePostSize = 4 }) {
-    return (_jsx(ConnectedAgentSelectDropDown, { panelGateId: panelGateId, label: label, addrPrePostSize: addrPrePostSize, renderAccountAvatar: (account) => _jsx(AccountAvatarWithOpen, { account: account, mode: SP_COIN_DISPLAY.AGENT_ACCOUNT, className: "h-full w-full object-cover", roleLabel: "AGENT" }) }));
+    return (_jsx(ConnectedAgentSelectDropDown, { panelGateId: panelGateId, label: label, addrPrePostSize: addrPrePostSize, renderAccountAvatar: (account) => _jsx(AccountAvatarWithOpen, { account: account, mode: SP_COIN_DISPLAY.AGENT_ACCOUNT, className: panelPartClass.avatarFill, roleLabel: "AGENT" }) }));
 }

package/dist/ChangePasswordPanel.js

@@ -4,12 +4,12 @@
 // re-encrypts the vault (the extension sends merit/vault/changePassword to its worker, which checks the old password again).
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formKitStyle } from '@sponsorcoin/spcoin-common/styles';
 import { useState } from 'react';
 import { MIN_WALLET_PASSWORD_LENGTH } from './session/walletSession';
-const BORDER = '#334155';
-const box = { boxSizing: 'border-box', width: '100%', padding: 12, color: '#fff', display: 'flex', flexDirection: 'column', gap: 8 };
-const field = { boxSizing: 'border-box', width: '100%', borderRadius: 8, border: '1px solid ' + BORDER, background: '#0E111B', padding: '8px 12px', color: '#fff', font: 'inherit', outline: 'none' };
-const primary = { boxSizing: 'border-box', width: '100%', borderRadius: 8, border: 0, background: '#5981F3', padding: '8px 16px', fontWeight: 600, color: '#fff', cursor: 'pointer', font: 'inherit' };
+const box = formKitStyle.box(12);
+const field = formKitStyle.input;
+const primary = formKitStyle.primary;
 /**
  * 2026-10-11 (docs/design/accountAuthDesign.txt 14.3, item V5): `note` is the host's own small print (the web's development keystore says that every account is re-encrypted); `title` and `confirmLabel`
  * let a host keep its wording. The new password must also differ from the current one.
@@ -22,7 +22,7 @@ export default function ChangePasswordPanel({ changePassword, onDone, note, titl
     const [busy, setBusy] = useState(false);
     const [changed, setChanged] = useState(false);
     if (changed) {
-        return (_jsxs("div", { id: "WALLET_PASSWORD_CHANGED", style: box, children: [_jsx("p", { style: { margin: 0 }, children: "Your password was changed." }), _jsx("button", { type: "button", style: primary, onClick: onDone, children: "Done" })] }));
+        return (_jsxs("div", { id: "WALLET_PASSWORD_CHANGED", style: box, children: [_jsx("p", { style: formKitStyle.plain, children: "Your password was changed." }), _jsx("button", { type: "button", style: primary, onClick: onDone, children: "Done" })] }));
     }
     return (_jsxs("form", { id: "WALLET_CHANGE_PASSWORD", style: box, onSubmit: (e) => {
             e.preventDefault();
@@ -38,5 +38,5 @@ export default function ChangePasswordPanel({ changePassword, onDone, note, titl
                 .then(() => setChanged(true))
                 .catch((err) => setError(err instanceof Error ? err.message : 'The password could not be changed.'))
                 .finally(() => setBusy(false));
-        }, children: [_jsx("p", { style: { margin: 0, fontWeight: 600 }, children: title }), _jsx("input", { type: "password", autoComplete: "current-password", placeholder: "Current password", value: oldPw, onChange: (e) => setOldPw(e.target.value), style: field }), _jsx("input", { type: "password", autoComplete: "new-password", placeholder: "New password", value: newPw, onChange: (e) => setNewPw(e.target.value), style: field }), _jsx("input", { type: "password", autoComplete: "new-password", placeholder: "Confirm new password", value: confirm, onChange: (e) => setConfirm(e.target.value), style: field }), error && _jsx("p", { style: { color: '#f87171', fontSize: 12, margin: 0 }, children: error }), _jsx("button", { type: "submit", disabled: busy || !oldPw, style: { ...primary, opacity: busy || !oldPw ? 0.6 : 1 }, children: busy ? 'Changing…' : confirmLabel }), note && _jsx("p", { style: { margin: 0, fontSize: 12, color: '#9ca3af' }, children: note })] }));
+        }, children: [_jsx("p", { style: formKitStyle.heading, children: title }), _jsx("input", { type: "password", autoComplete: "current-password", placeholder: "Current password", value: oldPw, onChange: (e) => setOldPw(e.target.value), style: field }), _jsx("input", { type: "password", autoComplete: "new-password", placeholder: "New password", value: newPw, onChange: (e) => setNewPw(e.target.value), style: field }), _jsx("input", { type: "password", autoComplete: "new-password", placeholder: "Confirm new password", value: confirm, onChange: (e) => setConfirm(e.target.value), style: field }), error && _jsx("p", { style: formKitStyle.error, children: error }), _jsx("button", { type: "submit", disabled: busy || !oldPw, style: formKitStyle.primaryDim(busy || !oldPw), children: busy ? 'Changing…' : confirmLabel }), note && _jsx("p", { style: formKitStyle.note, children: note })] }));
 }

package/dist/ConnectedMessagePanel.js

@@ -11,25 +11,27 @@
 // account row is a simple avatar + "ROLE: symbol | name" + address line, since the web pill's click behaviour is web-only.
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
-import { useExchangeContext } from '@sponsorcoin/spcoin-exchange-engine';
-import { AccountAvatar, TokenLogo } from '@sponsorcoin/spcoin-panels';
+import { messageRowStyle } from '@sponsorcoin/spcoin-common/styles';
+import { useSyncExternalStore } from 'react';
+import { useExchangeContext, stepPanelContentStore } from '@sponsorcoin/spcoin-exchange-engine';
+import { MessageAccountRow, TokenLogo } from '@sponsorcoin/spcoin-panels';
 import { MessagePanelReal } from './panels';
-const ROLE_TO_MODE = {
-    SPONSOR: SP_COIN_DISPLAY.SPONSOR_ACCOUNT,
-    RECIPIENT: SP_COIN_DISPLAY.RECIPIENT_ACCOUNT,
-    AGENT: SP_COIN_DISPLAY.AGENT_ACCOUNT,
-    ACCOUNT: SP_COIN_DISPLAY.ACTIVE_ACCOUNT,
-};
-function DefaultAccountRow({ entry }) {
-    const label = [entry.account.symbol, entry.account.name].filter(Boolean).join(' | ');
-    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AccountAvatar, { account: entry.account, mode: ROLE_TO_MODE[entry.role], roleLabel: entry.role, className: "h-8 w-8 rounded-full object-cover" }), _jsxs("span", { className: "text-sm", children: [_jsxs("span", { className: "font-semibold", children: [entry.role, ":"] }), " ", label] })] }), _jsx("div", { className: "pl-10 text-xs opacity-80 break-all", children: String(entry.account.address ?? '') }), entry.detail && _jsx("div", { className: "pl-10 text-xs opacity-80", children: entry.detail })] }));
-}
+import { pendingApprovalMessageStore } from './approval/pendingApprovalMessageStore';
 /** The web app's MessageTokenRow, unchanged. */
 function DefaultTokenRow({ entry }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TokenLogo, { tokenContract: entry.token, className: "h-8 w-8 rounded-full object-contain" }), _jsxs("span", { className: "text-sm", children: [_jsxs("span", { className: "font-semibold", children: [entry.label, ":"] }), ' ', [entry.token.symbol, entry.token.name].filter(Boolean).join(': ')] })] }), entry.detail && _jsx("div", { className: "pl-10 text-xs opacity-80", children: entry.detail })] }));
+    return (_jsxs("div", { style: messageRowStyle.tokenColumn, children: [_jsxs("div", { style: messageRowStyle.line, children: [_jsx(TokenLogo, { tokenContract: entry.token, className: "", style: messageRowStyle.tokenLogo }), _jsxs("span", { style: messageRowStyle.label, children: [_jsxs("span", { style: messageRowStyle.role, children: [entry.label, ":"] }), ' ', [entry.token.symbol, entry.token.name].filter(Boolean).join(': ')] })] }), entry.detail && _jsx("div", { style: messageRowStyle.detail, children: entry.detail })] }));
 }
 export default function ConnectedMessagePanel({ renderAccountRow, renderTokenRow }) {
     const { errorMessage } = useExchangeContext();
-    return (_jsx(MessagePanelReal, { errorMessage: errorMessage, renderAccountRow: renderAccountRow ?? ((entry, i) => _jsx(DefaultAccountRow, { entry: entry }, `${entry.role}-${i}`)), renderTokenRow: renderTokenRow ?? ((entry, i) => _jsx(DefaultTokenRow, { entry: entry }, `token-${i}`)) }));
+    // 2026-10-29: present only while a Merit-authorized write is waiting on a person —
+    // useMeritApprovalMessagePanel.ts (mounted once in MeritWallet.tsx) publishes it here rather
+    // than as a prop, since this component is mounted in more than one place — see that store's own
+    // doc comment for why.
+    const pendingApproval = useSyncExternalStore(pendingApprovalMessageStore.subscribe, pendingApprovalMessageStore.getSnapshot, pendingApprovalMessageStore.getServerSnapshot);
+    // A step-through popup published for MESSAGE_PANEL (the Swap tab's Steps flow) replaces the normal message while it is up.
+    const stepContent = useSyncExternalStore(stepPanelContentStore.subscribe, stepPanelContentStore.getSnapshot, stepPanelContentStore.getServerSnapshot);
+    // A write waiting on a person (Approve / Reject, the password) always comes first: the step popup returns once it is answered.
+    if (stepContent && !pendingApproval)
+        return _jsx("div", { style: messageRowStyle.stepContent, children: stepContent });
+    return (_jsx(MessagePanelReal, { errorMessage: errorMessage, renderAccountRow: renderAccountRow ?? ((entry, i) => _jsx(MessageAccountRow, { entry: entry }, `${entry.role}-${i}`)), renderTokenRow: renderTokenRow ?? ((entry, i) => _jsx(DefaultTokenRow, { entry: entry }, `token-${i}`)), pendingApproval: pendingApproval }));
 }

package/dist/ConnectedNetworkPanel.js

@@ -12,16 +12,15 @@
 // A host that passes nothing gets the registry defaults, which is what the extension uses.
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokenRowClass, tokenRowStyle } from '@sponsorcoin/spcoin-common/styles';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { CopyBtn } from './TokenSlotPanels';
 import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
-import { defaultMissingImage, previewNetworkStore, useExchangeContext, usePanelVisible, usePreviewNetworkChainId, } from '@sponsorcoin/spcoin-exchange-engine';
+import { defaultStaticImage, previewNetworkStore, useExchangeContext, usePanelVisible, usePreviewNetworkChainId, } from '@sponsorcoin/spcoin-exchange-engine';
 import { getNetworkConfiguration } from '@sponsorcoin/spcoin-feeds/networks';
 import { getNetworkMetaData } from '@sponsorcoin/spcoin-panels';
-import { ReadOnlyMetaDataTable } from './panels';
+import MetaDetailScreen from './account/MetaDetailScreen';
 import { useWalletData } from './walletData';
-// text-sp-sm is a Tailwind token only the web app defines (var(--sp-text-sm), 1rem); an inline style gives every host the same size.
-const SP_TEXT_SM = { fontSize: 'var(--sp-text-sm, 1rem)' };
 /** A NetworkElement for a chain id straight from the registry (the default for previewing a chain other than the live one). */
 export function networkElementFromRegistry(chainId) {
     const cfg = getNetworkConfiguration(chainId);
@@ -55,8 +54,6 @@ export function useLiveNetworkFromContext() {
 }
 export default function ConnectedNetworkPanel({ useLiveNetwork = useLiveNetworkFromContext }) {
     const vNetworkPanel = usePanelVisible(SP_COIN_DISPLAY.NETWORK_PANEL);
-    const vNetworkMetaData = usePanelVisible(SP_COIN_DISPLAY.NETWORK_META_DATA);
-    const vNetworkLogo = usePanelVisible(SP_COIN_DISPLAY.NETWORK_LOGO);
     const { resolveNetwork, loadNetworkInfo } = useWalletData();
     const { network: liveNetwork, chainId: liveChainId } = useLiveNetwork();
     const previewChainId = usePreviewNetworkChainId();
@@ -100,7 +97,7 @@ export default function ConnectedNetworkPanel({ useLiveNetwork = useLiveNetworkF
     if (!vNetworkPanel)
         return null;
     if (!chainId) {
-        return (_jsx("div", { id: "NETWORK_PANEL", children: _jsxs("div", { className: "p-4 text-slate-200 text-center", style: SP_TEXT_SM, children: [_jsx("p", { className: "mb-2 font-semibold", children: "No network selected." }), _jsx("p", { className: "m-0", children: "Select a network to view its details." })] }) }));
+        return (_jsx("div", { id: "NETWORK_PANEL", children: _jsxs("div", { className: tokenRowClass.empty, style: tokenRowStyle.text, children: [_jsx("p", { className: tokenRowClass.emptyTitle, children: "No network selected." }), _jsx("p", { className: tokenRowClass.emptyText, children: "Select a network to view its details." })] }) }));
     }
     const resolvedNetwork = { ...network, ...info };
     const logoURL = (resolvedNetwork.logoURL ?? '').toString().trim();
@@ -111,13 +108,11 @@ export default function ConnectedNetworkPanel({ useLiveNetwork = useLiveNetworkF
         if (f.kind === 'url') {
             return {
                 label: f.label,
-                value: (_jsxs("span", { className: "flex items-center justify-between w-full gap-2", children: [_jsx("a", { href: f.value, target: "_blank", rel: "noopener noreferrer", className: "underline decoration-slate-400/60 underline-offset-2 hover:decoration-slate-200 break-all", children: f.value }), _jsx(CopyBtn, { text: f.value })] })),
+                value: (_jsxs("span", { className: tokenRowClass.cell, children: [_jsx("a", { href: f.value, target: "_blank", rel: "noopener noreferrer", className: tokenRowClass.link, children: f.value }), _jsx(CopyBtn, { text: f.value })] })),
             };
         }
         return { label: f.label, value: f.value };
     });
-    return (_jsx("div", { id: "NETWORK_PANEL", children: vNetworkMetaData && (_jsx(ReadOnlyMetaDataTable, { rows: rows, logoURL: logoURL || defaultMissingImage, logoAlt: name, logoVisible: vNetworkLogo, 
-            // Network logos are already complete, self-contained circular brand marks with real transparent padding, so no navy fill behind
-            // them and no card frame around them (unlike token and account logos).
-            logoBackgroundClassName: "", logoContainerClassName: "p-2" })) }));
+    // 2026-11-09 (owner): drawn by the shared read-only screen, the twin of the Account Details screen. Network logos are already complete, self-contained circular brand marks with real transparent padding, so no navy fill behind them.
+    return (_jsx(MetaDetailScreen, { screenId: "NETWORK_PANEL", logoFlag: SP_COIN_DISPLAY.NETWORK_LOGO, metaFlag: SP_COIN_DISPLAY.NETWORK_META_DATA, logoId: "NETWORK_LOGO", metaId: "NETWORK_META_DATA", logoSrc: logoURL || defaultStaticImage, logoAlt: name, toggleLabel: "Network Meta", imageKind: "network", rows: rows, plainLogo: true, fitImageShape: true }));
 }

package/dist/DeleteWalletDialog.js

@@ -2,26 +2,73 @@
 //
 // 2026-10-08 -- the confirmation popup for deleting the wallet from this device: it asks for the wallet password and deletes only when the host says
 // the password is right. Host-independent: the host supplies confirmDelete(password), which throws a readable message for a wrong password.
+//
+// 2026-10-22 (owner request): the submit button itself carries the whole state (see dialogStyle.deleteConfirmButton's own doc comment) -- blue
+// "Password Required" while empty, still blue with the host's confirmLabel once something is typed (nothing here can know the password is RIGHT
+// before the server says so, so typing alone never turns it green), a quick double red/blue flash on a wrong password then solid red with the
+// server's own message for a few seconds before it reverts on its own, and green only once the server actually confirms the password and the
+// delete succeeds. A wrong password is kept, not cleared (the same rule the login screen follows), so a typo can be fixed instead of retyped. An
+// eye icon toggles the field between masked and plain text.
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { dialogStyle } from '@sponsorcoin/spcoin-common/styles';
+import { Eye, EyeOff } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import DialogPortal from './DialogPortal';
+const FLASH_STEP_MS = 150;
+const FLASH_STEPS = 4; // two full red/green cycles
+const ERROR_SHOWN_MS = 5000; // how long the solid red state stays, after the flash settles
 /**
  * 2026-10-11 (docs/design/accountAuthDesign.txt 14.3, item V5): `warning` carries the host's wording for what is lost (the default says the wallet is removed from this device); `title` and `confirmLabel` keep a
  * host's own words (the web's development keystore says "Remove Account"); `footnote` is optional small print under the buttons.
  */
 export default function DeleteWalletDialog({ confirmDelete, onClose, warning, title = 'Delete wallet', confirmLabel = 'Delete wallet', footnote }) {
     const [password, setPassword] = useState('');
+    const [visible, setVisible] = useState(false);
     const [error, setError] = useState('');
+    const [errorNonce, setErrorNonce] = useState(0);
+    const [flashOn, setFlashOn] = useState(false);
+    const [errorSettled, setErrorSettled] = useState(false);
     const [busy, setBusy] = useState(false);
-    return (_jsx("div", { id: "DELETE_WALLET_DIALOG", role: "dialog", "aria-modal": "true", style: { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 12 }, children: _jsxs("form", { style: { boxSizing: 'border-box', width: '100%', maxWidth: 340, background: '#0E111B', border: '1px solid #7f1d1d', borderRadius: 12, padding: 16, color: '#fff', display: 'flex', flexDirection: 'column', gap: 8 }, onSubmit: (e) => {
-                e.preventDefault();
-                setBusy(true);
-                setError('');
-                confirmDelete(password)
-                    .catch((err) => {
-                    setError(err instanceof Error ? err.message : 'The wallet could not be deleted.');
-                    setPassword('');
-                })
-                    .finally(() => setBusy(false));
-            }, children: [_jsx("p", { style: { margin: 0, fontWeight: 700 }, children: title }), _jsx("p", { style: { margin: 0, fontSize: 12, color: '#fbbf24' }, children: warning ?? 'This deletes the wallet and all its accounts from this device. You can only get them back with your Secret Recovery Phrase (imported accounts need their private keys).' }), _jsx("input", { type: "password", autoFocus: true, autoComplete: "current-password", placeholder: "Enter your password to confirm", value: password, onChange: (e) => setPassword(e.target.value), style: { boxSizing: 'border-box', width: '100%', borderRadius: 8, border: '1px solid #334155', background: '#0b0e17', padding: '8px 12px', color: '#fff', font: 'inherit', outline: 'none' } }), error && _jsx("p", { style: { margin: 0, fontSize: 12, color: '#f87171' }, children: error }), _jsx("button", { type: "submit", disabled: busy || !password, style: { borderRadius: 8, border: 0, background: '#b91c1c', color: '#fff', padding: '8px 16px', fontWeight: 600, cursor: 'pointer', font: 'inherit', opacity: busy || !password ? 0.6 : 1 }, children: busy ? 'Deleting…' : confirmLabel }), _jsx("button", { type: "button", onClick: onClose, style: { borderRadius: 8, border: '1px solid #334155', background: 'transparent', color: '#fff', padding: '8px 16px', cursor: 'pointer', font: 'inherit' }, children: "Cancel" }), footnote && _jsx("p", { style: { margin: 0, fontSize: 12, color: '#9ca3af' }, children: footnote })] }) }));
+    // only the server knows whether the password is right: green appears here, and only here, once confirmDelete actually resolves.
+    const [success, setSuccess] = useState(false);
+    // one failed submit runs the flash, then the solid error, then clears itself -- a SECOND failure (even with the identical message) must restart the
+    // whole sequence, which is why this keys off a nonce rather than the error text (two equal strings would not re-trigger a dependent effect).
+    useEffect(() => {
+        if (errorNonce === 0)
+            return;
+        setErrorSettled(false);
+        setFlashOn(true);
+        let step = 1;
+        const flashTimer = setInterval(() => {
+            step += 1;
+            setFlashOn((v) => !v);
+            if (step >= FLASH_STEPS) {
+                clearInterval(flashTimer);
+                setErrorSettled(true);
+            }
+        }, FLASH_STEP_MS);
+        const revertTimer = setTimeout(() => {
+            setError('');
+            setErrorSettled(false);
+        }, FLASH_STEPS * FLASH_STEP_MS + ERROR_SHOWN_MS);
+        return () => {
+            clearInterval(flashTimer);
+            clearTimeout(revertTimer);
+        };
+    }, [errorNonce]);
+    const variant = success ? 'success' : error ? (errorSettled ? 'error' : 'flash') : password ? 'typed' : 'empty';
+    const label = success ? 'Deleted' : busy ? 'Deleting…' : error ? error : password ? confirmLabel : 'Password Required';
+    return (_jsx(DialogPortal, { children: _jsx("div", { id: "DELETE_WALLET_DIALOG", role: "dialog", "aria-modal": "true", style: dialogStyle.backdrop, children: _jsxs("form", { style: dialogStyle.formCardDanger, onSubmit: (e) => {
+                    e.preventDefault();
+                    setBusy(true);
+                    setError('');
+                    confirmDelete(password)
+                        .then(() => setSuccess(true))
+                        .catch((err) => {
+                        setError(err instanceof Error ? err.message : 'The wallet could not be deleted.');
+                        setErrorNonce((n) => n + 1);
+                    })
+                        .finally(() => setBusy(false));
+                }, children: [_jsx("p", { style: dialogStyle.title, children: title }), _jsx("p", { style: dialogStyle.warning, children: warning ?? 'This deletes the wallet and all its accounts from this device. You can only get them back with your Secret Recovery Phrase (imported accounts need their private keys).' }), _jsxs("div", { style: dialogStyle.inputWrap, children: [_jsx("input", { type: visible ? 'text' : 'password', autoFocus: true, autoComplete: "current-password", placeholder: "Enter your password to confirm", value: password, onChange: (e) => setPassword(e.target.value), style: dialogStyle.input }), _jsx("button", { type: "button", onClick: () => setVisible((v) => !v), "aria-label": visible ? 'Hide password' : 'Show password', title: visible ? 'Hide password' : 'Show password', style: dialogStyle.eyeButton, children: visible ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })] }), _jsx("button", { type: "submit", disabled: busy || !password, style: dialogStyle.deleteConfirmButton(variant, flashOn, busy), children: label }), _jsx("button", { type: "button", onClick: onClose, style: dialogStyle.cancelButton, children: "Cancel" }), footnote && _jsx("p", { style: dialogStyle.footnote, children: footnote })] }) }) }));
 }

package/dist/DialogPortal.d.ts

@@ -0,0 +1,3 @@
+export default function DialogPortal({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DialogPortal.js

@@ -0,0 +1,19 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/DialogPortal.tsx
+//
+// 2026-10-22 (owner report: "the Delete Permanently button does not work"). Every full-screen confirmation dialog (DeleteWalletDialog, PasswordPromptDialog, the Reset Password card in
+// WalletSessionDialogs) is `position: fixed; inset: 0` drawn deep inside MeritWallet's own tree. The web app's floating wallet positions itself with a CSS `transform` (SpCoinWalletPopup.tsx's
+// drag positioning) — a plain CSS rule then reparents `position: fixed` to THAT transformed ancestor instead of the real viewport, so the dialog's "full screen" backdrop no longer actually
+// covers the screen, and the Config tab's own scrollable content painted OVER it, catching every click meant for the dialog's buttons (confirmed with document.elementFromPoint at the button's
+// own pixel: it resolved to the Config panel, never the dialog, even on a forced click). Escaping to the platform's portal target (platform/platform.ts's portalContainer — document.body for
+// every real DOM host) fixes it for every wallet layout mode and every host; this file itself touches no device API directly (test/platformBoundary.test.mjs), only the platform interface.
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { usePlatform } from './platform/platform';
+export default function DialogPortal({ children }) {
+    const container = usePlatform().portalContainer();
+    // No portal target (a host with no such nesting problem, or none supplied): render in place, same as before this fix existed.
+    if (!container)
+        return _jsx(_Fragment, { children: children });
+    return createPortal(children, container);
+}

package/dist/MeritWallet.d.ts

@@ -1,39 +1,32 @@
 import React from 'react';
-import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { type PeerConnection } from './peer/peerConnection';
 import type { APP_TYPE } from '@sponsorcoin/spcoin-common';
-import { type WalletListSelectionSlot } from '@sponsorcoin/spcoin-exchange-engine';
-import { type AssetListEntry, type AccountListGroup, type FetchBalance, type OpenTarget, type MeritWalletPasswordMode as ConfigPasswordMode, type ApplicationSyncMode, type MeritWalletLocation, type MeritExtensionChannel } from '@sponsorcoin/spcoin-panels';
+import { type AssetListEntry, type AccountListGroup, type AccountListRemoteSelection, type FetchBalance, type OpenTarget, type MeritWalletPasswordMode as ConfigPasswordMode, type ApplicationSyncMode, type MeritWalletLocation, type MeritExtensionChannel } from '@sponsorcoin/spcoin-panels';
 import type { Wallet } from './wallet/wallet';
 import { type MeritPlatform } from './platform/platform';
 import { type WalletDerivation } from './wallet/walletProps';
 import type { ApproverHost } from './wallet/approverAccounts';
 import type { IconCacheStorage } from '@sponsorcoin/spcoin-feeds/shared';
 import { type MenuTabKey, type MeritWalletNetworkRow } from './panels';
-import { type RewardsHost } from './rewards/ConnectedRewardsPanel';
+import { type ApprovalHost } from './approval/useMeritApprovalMessagePanel';
+import { type RewardsHost, type RewardsPanelExtras } from './rewards/ConnectedRewardsPanel';
 import { type AddAccountHost } from './account/AddAccountFlow';
 import { type TestAccountsApi } from './TestAccountsSection';
+import { type TradeHost } from './trade/tradeHost';
 import type { WalletSessionHost } from './walletSessionHost';
 import { type AccountDetailHost } from './account/AccountDetailScreen';
+import { type SecuritySetupHost } from './SecuritySetupScreen';
+import { type WalletOnboardingPanelProps } from './WalletOnboardingPanel';
 import { type SponsorStakingHost } from './sponsor/ConnectedSponsorStakingList';
 import { type HostTransactionResult } from './receipt/transactionReceipts';
-import { type AssetEntryKind, type AssetEntryResult } from '@sponsorcoin/spcoin-exchange-engine';
 import type { AuthenticationType } from './auth/authenticationType';
-import { type SwapTradeButtonHost } from './swap/SwapTradeButton';
-type ActiveListMode = WalletListSelectionSlot | null;
 export type { MeritWalletNetworkRow };
 export interface MeritWalletProps {
-    /**
-     * 2026-10-05 — resolves an address typed into a list's ADDRESS_PANEL that is NOT in the
-     * rows already loaded (on-chain token lookup / account hydration). The host builds it
-     * from the engine's resolveAssetEntry with its own RPC client; omit it and such an
-     * address just shows "not in this list". `peerAddress` is the other side's token (duplicate guard).
-     */
-    resolveAssetAddress?: (address: string, kind: AssetEntryKind, peerAddress?: string) => Promise<AssetEntryResult>;
     /** Docked (full-height, square corners, no right border — a split-pane
      *  layout) vs. floating/dialog (rounded corners, capped height). Default
      *  false. */
     docked?: boolean;
-    /** Drops the web app's 364px cap in favor of a plain 100% width — for a
+    /** Drops the web app's 380px cap in favor of a plain 100% width — for a
      *  consumer (like a Chrome side panel) that's already narrow and
      *  user-resizable rather than floating inside a wider page. Default
      *  false. */
@@ -75,9 +68,10 @@ export interface MeritWalletProps {
     networkRows?: MeritWalletNetworkRow[];
     accountGroups?: AccountListGroup[];
     tokenRows?: AssetListEntry[];
-    recipientRows?: AssetListEntry[];
     /** 2026-10-09 -- turns the Rewards tab live (Trading / Staked / Pending with estimate and claim, Auto Refresh), the same card and data hook the web app runs. Omit for the static table. */
     rewardsHost?: RewardsHost;
+    /** What the host adds around the Rewards card: a shared Auto Refresh store, the Deposit Account row's starting address, a refresh registration hook and a trace sink (all data or functions). */
+    rewardsExtras?: RewardsPanelExtras;
     /**
      * 2026-10-09 -- turns the Sponsored Recipient Accounts list (opened from Rewards > Unstake) live, with Un-Stake: the web app's card and confirm popup over the host's
      * chain reads and one send-an-unstake-transaction function.
@@ -99,11 +93,6 @@ export interface MeritWalletProps {
     onAccountIconClick?: (address: string) => void;
     /** 2026-10-08 (table row 21): the "Add a Wallet/Account" button at the foot of the account list. Omit it and the list shows the button inert, as before. */
     onAddAccount?: () => void;
-    /**
-     * 2026-10-08 (table row 22): lets a host without the web trading pipeline (the extension) get a working Swap tab. When set and the host passes no
-     * zeroXTradeButtonContent / uniSelectContent of its own, the 0x trade button and the Uniswap section are the package's (price + swap through this host).
-     */
-    swapHost?: SwapTradeButtonHost;
     /** Data to render in the account-details overlay once
      *  onAccountIconClick's caller has resolved it. `address` gates which
      *  click this answers — this component shows a loading state for any
@@ -128,17 +117,14 @@ export interface MeritWalletProps {
     accountDetailHost?: AccountDetailHost;
     /** 2026-10-10 (docs/design/accountAuthDesign.txt section 17 item 2): what the shared Add a Wallet/Account flow does for this host. When given, the list's button opens the shared flow; otherwise onAddAccount is called as before. */
     addAccountHost?: AddAccountHost;
-    onTokenIconClick?: (address: string) => void;
-    tokenDetail?: {
-        address: string;
-        logoSrc?: string;
-        name?: string;
-        symbol?: string;
-        decimals?: number;
-        website?: string;
-        explorer?: string;
-        description?: string;
-    } | null;
+    /** 2026-10-31 (owner design): the account list was opened BY A REMOTE (a site asking the wallet to connect). The list opens by itself, titled "Remote <caller> Account Selector", every row has a Connect / Connected button and the footer is Done / Cancel. */
+    remoteSelection?: AccountListRemoteSelection;
+    /** 2026-11-03 (owner request): a request the person must answer (connect this site, sign, send) is VALIDATE_REMOTE_CONNECT, a page inside the wallet's own chrome (header, title bar, tabs). The host supplies the page and what its back arrow does (refuse); the component opens and closes the panel with it. */
+    approvalPage?: {
+        title: string;
+        element: React.ReactNode;
+        onCancel: () => void;
+    };
     onNetworkIconClick?: (networkId: string) => void;
     sendAmount?: string;
     onSendAmountChange?: (value: string) => void;
@@ -176,6 +162,10 @@ export interface MeritWalletProps {
      * installed from, how an approver is unlocked. Passing it asks for the derived list: it replaces the host's own accountGroups / onAccountRowSelect once the list has loaded (they stay as the fallback until then).
      */
     approverHost?: ApproverHost;
+    /** 2026-11-01: the wallets this one is paired with (the other Merit wallet, a phone wallet app), by authenticator id, each a PeerConnection the host built from its own transport (src/peer/peerConnection.ts). A peer's Connected is its `connected` (reachable and logged on); a wallet with no peer keeps the approverHost's rule. */
+    peers?: Record<string, PeerConnection>;
+    /** 2026-11-07 (owner request): one connection hook per REMOTE wallet, by authenticator id (web: useMeritExtension and useMetaMask; extension: useMeritWebApp and useMetaMask), each returning true while that wallet is connected. The component calls them every render in the object's key order, so the host passes ONE constant object (never built per render). A wallet's group in the account list reads Disconnected (red; Connect on hover) while its hook says false, and Add Account(s) while it says true. */
+    walletLinkHooks?: Record<string, () => boolean>;
     /** The banner above the account list (a failed connect). Derived when `approverHost` is given; a host may also set it. */
     accountListNotice?: string;
     /** The wallet that signs for the active account (derived from `wallet` when the host does not pass it), shown as the account header's tooltip. */
@@ -187,24 +177,24 @@ export interface MeritWalletProps {
     /** Which wallets are connected to this app, by wallet asset folder (merit, meritExtension, metamask, ledger, trezor): the wallet list's Connected / Disconnected buttons. Derived from `approverHost` when the host does not pass it. */
     walletConnection?: Record<string, boolean>;
     /** Disconnect a wallet of the wallet list, by asset folder. Derived from `approverHost` when the host does not pass it. */
-    onDisconnectWallet?: (slug: string) => void;
+    onDisconnectWallet?: (slug: string) => void | Promise<unknown>;
     /** Show the wallet pill (WalletSelectDropDown) just under the tabs: its down chevron opens the wallet list (REMOTE_WALLET_LIST), its icon opens the active wallet's panel (WALLET_PANEL). Default true. */
     showWalletSelect?: boolean;
     /** Where the wallet asset files (public/assets/wallets) are served from: this page's own origin by default; a host on another origin (the extension) passes the web app's address. */
     walletAssetBaseUrl?: string;
+    /** 2026-11-03 (owner request: the same for every app that uses this component): the address of the account service, the one server the wallet calls to sign in and publish an account profile (any server that implements /api/spCoin/auth and /api/spCoin/accounts). Every host injects it the same way; none is assumed. Omitted or empty: no call is made and Publish Account says so. */
+    accountServiceUrl?: string;
     /** What the component may derive from `wallet` (default: everything). A host that has its own lock gate (the web app) leaves out 'lock' and 'logoff'. */
     walletDerives?: readonly WalletDerivation[];
-    /** 2026-10-11 (plan row 13): a host that mounts the shared Sponsor panel (spcoin-panels' SponsorPanelController, driven by the exchange context) passes it here, and it replaces this component's own Sponsor tab. */
-    sponsorPanel?: React.ReactNode;
-    /** 2026-10-11 (plan row 13): the host's list overlay (spcoin-panels' ActiveListPanelHost) for the lists the shared panels open through the panel tree; shown in place of the tab body while a panel-tree list is open. */
-    listHost?: React.ReactNode;
+    /** The trade screens' host data and functions (the Swap tab and the Sponsor tab trade through one path): the trading provider, a trace sink, how a recipient's site opens and one hook for the confirm popup's state. The component draws the screens. */
+    tradeHost?: TradeHost;
     manageRadioPanels?: boolean;
-    overlayHost?: React.ReactNode;
-    agentSelectSlot?: React.ReactNode;
     fetchBalance?: FetchBalance;
-    listPanelIdOverrides?: Partial<Record<Exclude<ActiveListMode, null>, SP_COIN_DISPLAY>>;
     passwordMode?: 'checking' | 'setup' | 'unlock';
-    passwordIcon?: React.ReactNode;
+    /** The artwork of the login page: an image URL (the data); the component draws it. */
+    passwordIconSrc?: string;
+    /** How the wallet answers a write's approval: the host checks the password (`unlock`) and may gate a debug step. The component draws the approval screen itself. */
+    approvalHost?: ApprovalHost;
     /**
      * 2026-10-08 (table row 23): the wallet is locked (or has no wallet yet), so show the password screen in place of everything else, whatever the panel tree says.
      * The lock gate lives here, in the component; whether and where the wallet is shown at all stays with the host (a layout gate).
@@ -223,6 +213,14 @@ export interface MeritWalletProps {
      */
     recoveryPhrase?: string;
     onRecoveryPhraseSaved?: () => void;
+    /** 2026-11-13 (owner: optional MFA after the phrase): when set, the phrase screen's Continue opens the optional "Protect your wallet" screen (authenticator app / passkey) before onRecoveryPhraseSaved fires; Skip is always there. Omitted: no such step. */
+    securitySetup?: SecuritySetupHost;
+    /**
+     * 2026-10-19 (docs/meritMigration.txt rows 27 / 28: a host passes data and functions, it never draws a wallet screen): first-run setup. While this is set the component draws the
+     * "Set up your wallet" screen (create a wallet, import by recovery phrase, restore a backup) INSTEAD of the wallet, and the host only supplies what the screen calls. The host clears it
+     * (sets undefined) when onDone fires and the vault exists.
+     */
+    onboarding?: WalletOnboardingPanelProps;
     sellBalanceText?: string;
     buyBalanceText?: string;
     /** 2026-10-05, on request — the 0X engine's trade/submit
@@ -237,11 +235,11 @@ export interface MeritWalletProps {
      *  additionally gates this slot on its own panel-tree node,
      *  so this component adds no visibility check of its own
      *  for it either). */
-    zeroXTradeButtonContent?: React.ReactNode;
-    uniSelectContent?: React.ReactNode;
     configPasswordMode?: ConfigPasswordMode;
     onConfigPasswordModeChange?: (mode: ConfigPasswordMode) => void;
-    configPersistedTimeoutContent?: React.ReactNode;
+    /** The persisted-password time limit in hours (the data) and what a change does (the action): the component draws the Time Limit picker itself. Omit both and there is no picker. */
+    configPersistedTimeoutHours?: number;
+    onConfigPersistedTimeoutHoursChange?: (hours: number) => void;
     configPasswordDescription?: string;
     configMandatorySecurity?: boolean;
     onConfigMandatorySecurityChange?: (mandatory: boolean) => void;
@@ -279,6 +277,8 @@ export interface MeritWalletProps {
     configZeroXEngineVisible?: boolean;
     onConfig0xEngineChange?: (checked: boolean) => void;
     configResetPanelsContent?: React.ReactNode;
+    /** A host-supplied section shown last on the Config tab (the web app's dev-only shared-libraries sync/build control); the extension supplies none. */
+    configDevToolsContent?: React.ReactNode;
     configExtensionChannel?: MeritExtensionChannel;
     onConfigExtensionChannelChange?: (channel: MeritExtensionChannel) => void;
     configExtensionDownloadPath?: string;
@@ -292,7 +292,7 @@ export interface MeritWalletProps {
     walletSession?: WalletSessionHost;
 }
 /**
- * The component. A host that passes `wallet` gets the lock screen, the lock button, the authentication type and the Wallet Security section from it (src/wallet/walletProps.tsx); everything else, and every
- * prop the host passes explicitly, is unchanged.
+ * The component. First-run setup replaces the wallet (a different component type, so the wallet's own state starts fresh when setup ends, the same as when the host used to swap it out);
+ * otherwise the wired wallet. The setup screen runs inside the same platform context (clipboard) as the wallet.
  */
-export default function MeritWallet(props: MeritWalletProps): React.FunctionComponentElement<React.ProviderProps<MeritPlatform>>;
+export default function MeritWallet(props: MeritWalletProps): React.FunctionComponentElement<MeritWalletProps> | React.FunctionComponentElement<React.ProviderProps<MeritPlatform>>;