@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/cjs/react/components/AccountMenuButton/ProfileDropdown-BCW8a1XS.css

@@ -0,0 +1,120 @@
+/* ProfileDropdown component-specific styles */
+
+/* Dropdown (grid height animation with data-state) */
+.w3a-profile-dropdown-morphed {
+  position: static;
+  box-sizing: border-box;
+  margin-top: 0;
+  opacity: 0;
+  visibility: hidden;
+  display: grid;
+  grid-template-rows: 0fr;
+  grid-template-columns: 1fr;
+  transition: opacity 120ms linear, grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);
+  border-top: 1px solid var(--w3a-colors-borderPrimary);
+}
+
+.w3a-profile-dropdown-morphed[data-state="open"] {
+  opacity: 1;
+  visibility: visible;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  pointer-events: auto;
+  --stagger-base: 40ms;
+}
+
+.w3a-profile-dropdown-morphed[data-state="closed"] {
+  pointer-events: none;
+  border-top-width: 0;
+  grid-template-rows: 0fr;
+  height: 0;
+  min-height: 0;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.w3a-profile-dropdown-morphed.hidden {
+  display: none;
+}
+
+/* Inner clip and container */
+.w3a-profile-dropdown-menu {
+  overflow: hidden;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Global theme pulse when toggling theme */
+@keyframes w3a-theme-pulse {
+  0% { filter: none; }
+  50% { filter: brightness(1.05) saturate(1.06); }
+  100% { filter: none; }
+}
+body[data-w3a-theme-pulse="1"] .w3a-profile-dropdown-menu {
+  animation: w3a-theme-pulse 220ms ease;
+}
+
+/* Press feedback for menu items (animate even if state doesn't change) */
+.w3a-dropdown-menu-item {
+  transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
+}
+.w3a-dropdown-menu-item:active {
+  transform: scale(0.98);
+  background: var(--w3a-colors-surface2);
+}
+
+/* Themed focus ring for accessibility */
+.w3a-dropdown-menu-item:focus { outline: none; }
+.w3a-dropdown-menu-item:focus-visible {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);
+}
+
+/* Menu item animation states */
+
+.w3a-profile-dropdown-morphed[data-state="closed"] .w3a-dropdown-menu-item {
+  opacity: 0;
+  transform: translateX(-1rem);
+  animation: none;
+}
+
+.w3a-profile-dropdown-morphed[data-state="open"] .w3a-dropdown-menu-item {
+  animation: w3a-profile-menu-item-enter 240ms linear forwards;
+  animation-delay: calc(var(--stagger-base, 0ms) + var(--stagger-item-n, 0) * 20ms);
+}
+
+/* Menu Item Animation Keyframes */
+@keyframes w3a-profile-menu-item-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes w3a-profile-menu-item-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+}
+
+/* Logout menu item specific styling */
+.w3a-logout-menu-item {
+  border-top: 1px solid var(--w3a-colors-borderPrimary);
+  border-radius: 0px 0px 2rem 2rem;
+  margin-top: 0.5rem;
+}
+
+
+/*# sourceMappingURL=ProfileDropdown-BCW8a1XS.css.map*/

package/dist/cjs/react/components/AccountMenuButton/ProfileDropdown-BCW8a1XS.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileDropdown-BCW8a1XS.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.css"],"sourcesContent":["/* ProfileDropdown component-specific styles */\n\n/* Dropdown (grid height animation with data-state) */\n.w3a-profile-dropdown-morphed {\n  position: static;\n  box-sizing: border-box;\n  margin-top: 0;\n  opacity: 0;\n  visibility: hidden;\n  display: grid;\n  grid-template-rows: 0fr;\n  grid-template-columns: 1fr;\n  transition: opacity 120ms linear, grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);\n  border-top: 1px solid var(--w3a-colors-borderPrimary);\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] {\n  opacity: 1;\n  visibility: visible;\n  grid-template-rows: 1fr;\n  grid-template-columns: 1fr;\n  pointer-events: auto;\n  --stagger-base: 40ms;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] {\n  pointer-events: none;\n  border-top-width: 0;\n  grid-template-rows: 0fr;\n  height: 0;\n  min-height: 0;\n  width: 0;\n  min-width: 0;\n  max-width: 0;\n  overflow: hidden;\n  margin: 0;\n  padding: 0;\n}\n\n.w3a-profile-dropdown-morphed.hidden {\n  display: none;\n}\n\n/* Inner clip and container */\n.w3a-profile-dropdown-menu {\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n}\n\n/* Global theme pulse when toggling theme */\n@keyframes w3a-theme-pulse {\n  0% { filter: none; }\n  50% { filter: brightness(1.05) saturate(1.06); }\n  100% { filter: none; }\n}\nbody[data-w3a-theme-pulse=\"1\"] .w3a-profile-dropdown-menu {\n  animation: w3a-theme-pulse 220ms ease;\n}\n\n/* Press feedback for menu items (animate even if state doesn't change) */\n.w3a-dropdown-menu-item {\n  transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;\n}\n.w3a-dropdown-menu-item:active {\n  transform: scale(0.98);\n  background: var(--w3a-colors-surface2);\n}\n\n/* Themed focus ring for accessibility */\n.w3a-dropdown-menu-item:focus { outline: none; }\n.w3a-dropdown-menu-item:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3a-colors-focus), transparent 60%);\n}\n\n/* Menu item animation states */\n\n.w3a-profile-dropdown-morphed[data-state=\"closed\"] .w3a-dropdown-menu-item {\n  opacity: 0;\n  transform: translateX(-1rem);\n  animation: none;\n}\n\n.w3a-profile-dropdown-morphed[data-state=\"open\"] .w3a-dropdown-menu-item {\n  animation: w3a-profile-menu-item-enter 240ms linear forwards;\n  animation-delay: calc(var(--stagger-base, 0ms) + var(--stagger-item-n, 0) * 20ms);\n}\n\n/* Menu Item Animation Keyframes */\n@keyframes w3a-profile-menu-item-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-1rem);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes w3a-profile-menu-item-exit {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-1rem);\n  }\n}\n\n/* Logout menu item specific styling */\n.w3a-logout-menu-item {\n  border-top: 1px solid var(--w3a-colors-borderPrimary);\n  border-radius: 0px 0px 2rem 2rem;\n  margin-top: 0.5rem;\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA"}

package/dist/cjs/react/components/AccountMenuButton/ProfileDropdown2.js

@@ -9,7 +9,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/react/components/AccountMenuButton/ProfileDropdown.tsx
-const ProfileDropdown = (0, react.forwardRef)(({ isOpen, menuItems, onLogout, onClose, menuItemsRef, toggleColors, currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, onToggleTheme, transactionSettingsOpen = false, theme = "dark", highlightedMenuItemId }, ref) => {
+const ProfileDropdown = (0, react.forwardRef)(({ isOpen, menuItems, onLogout, onClose, menuItemsRef, toggleColors, currentConfirmConfig, signerMode, onToggleThresholdSigning, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, onToggleTheme, transactionSettingsOpen = false, theme = "dark", highlightedMenuItemId }, ref) => {
 	const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;
 	menuItemsRef.current.length = menuItems.length;
 	const highlightedIndex = (0, react.useMemo)(() => {
@@ -39,6 +39,8 @@ const ProfileDropdown = (0, react.forwardRef)(({ isOpen, menuItems, onLogout, on
 				}),
 				currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TransactionSettingsSection.TransactionSettingsSection, {
 					currentConfirmConfig,
+					signerMode,
+					onToggleThresholdSigning,
 					onSetUiMode,
 					onToggleShowDetails,
 					onToggleSkipClick,

package/dist/cjs/react/components/AccountMenuButton/ProfileDropdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown2.js","names":["MenuItem","TransactionSettingsSection","LogoutMenuItem"],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { MenuItem } from './MenuItem';\nimport { LogoutMenuItem } from './LogoutMenuItem';\nimport { TransactionSettingsSection } from './TransactionSettingsSection';\nimport type { ProfileDropdownProps } from './types';\nimport './ProfileDropdown.css';\n\ninterface ProfileDropdownWithRefs extends Omit<ProfileDropdownProps, 'menuItemsRef'> {\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n  // Transaction settings props\n  currentConfirmConfig?: any;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick?: () => void;\n  onSetDelay?: (delay: number) => void;\n  onToggleTheme?: () => void;\n  transactionSettingsOpen?: boolean;\n}\n\nexport const ProfileDropdown = forwardRef<HTMLDivElement, ProfileDropdownWithRefs>(\n  ({\n    isOpen,\n    menuItems,\n    onLogout,\n    onClose,\n    menuItemsRef,\n    toggleColors,\n    currentConfirmConfig,\n    onSetUiMode,\n    onToggleShowDetails,\n    onToggleSkipClick,\n    onSetDelay,\n    onToggleTheme,\n    transactionSettingsOpen = false,\n    theme = 'dark',\n    highlightedMenuItemId,\n  }, ref) => {\n    // Only count transaction settings if it's actually rendered (when expanded)\n    const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;\n\n    menuItemsRef.current.length = menuItems.length;\n\n    const highlightedIndex = useMemo(() => {\n      if (!highlightedMenuItemId) return -1;\n      return menuItems.findIndex((item) => item.id === highlightedMenuItemId || item.label === highlightedMenuItemId);\n    }, [highlightedMenuItemId, menuItems]);\n\n    return (\n      <div\n        ref={ref}\n        className={`w3a-profile-dropdown-morphed ${theme}`}\n        data-state={isOpen ? 'open' : 'closed'}\n      >\n        <div className=\"w3a-profile-dropdown-menu\">\n\n          {/* Menu Items */}\n          {menuItems.map((item, index) => {\n            const refCallback = (el: HTMLElement | null) => {\n              if (menuItemsRef.current) {\n                menuItemsRef.current[index] = el;\n              }\n            };\n            const isHighlighted = index === highlightedIndex;\n\n            return (\n              <MenuItem\n                key={item.id ?? index}\n                ref={refCallback}\n                item={item}\n                onClose={onClose}\n                className=\"\"\n                isHighlighted={isHighlighted}\n                // Set CSS variable to calculate stagger delay in CSS stylesheet\n                style={{ ['--stagger-item-n' as any]: index }}\n              />\n            );\n          })}\n\n          {/* Transaction Settings Section - Always render with animation */}\n          {currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && (\n            <TransactionSettingsSection\n              currentConfirmConfig={currentConfirmConfig}\n              onSetUiMode={onSetUiMode}\n              onToggleShowDetails={onToggleShowDetails}\n              onToggleSkipClick={onToggleSkipClick}\n              onSetDelay={onSetDelay}\n              onToggleTheme={onToggleTheme}\n              isOpen={transactionSettingsOpen}\n              theme={theme}\n              // Set CSS variable to calculate stagger delay in CSS stylesheet\n              style={{ ['--stagger-item-n' as any]: menuItems.length }}\n            />\n          )}\n\n          {/* Logout Section */}\n          <LogoutMenuItem\n            onLogout={onLogout}\n            className=\"w3a-logout-menu-item\"\n            // Set CSS variable to calculate stagger delay in CSS stylesheet\n            style={{ ['--stagger-item-n' as any]: hasTransactionSettings ? menuItems.length + 1 : menuItems.length }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,yCACV,EACC,QACA,WACA,UACA,SACA,cACA,cACA,sBACA,aACA,qBACA,mBACA,YACA,eACA,0BAA0B,OAC1B,QAAQ,QACR,yBACC,QAAQ;CAET,MAAM,yBAAyB,2BAA2B,wBAAwB,uBAAuB,qBAAqB;AAE9H,cAAa,QAAQ,SAAS,UAAU;CAExC,MAAM,4CAAiC;AACrC,MAAI,CAAC,sBAAuB,QAAO;AACnC,SAAO,UAAU,WAAW,SAAS,KAAK,OAAO,yBAAyB,KAAK,UAAU;IACxF,CAAC,uBAAuB;AAE3B,QACE,2CAAC;EACM;EACL,WAAW,gCAAgC;EAC3C,cAAY,SAAS,SAAS;YAE9B,4CAAC;GAAI,WAAU;;IAGZ,UAAU,KAAK,MAAM,UAAU;KAC9B,MAAM,eAAe,OAA2B;AAC9C,UAAI,aAAa,QACf,cAAa,QAAQ,SAAS;;KAGlC,MAAM,gBAAgB,UAAU;AAEhC,YACE,2CAACA;MAEC,KAAK;MACC;MACG;MACT,WAAU;MACK;MAEf,OAAO,GAAG,qBAA4B;QAPjC,KAAK,MAAM;;IAarB,yBAAyB,eAAe,wBAAwB,qBAAqB,cACpF,2CAACC;KACuB;KACT;KACQ;KACF;KACP;KACG;KACf,QAAQ;KACD;KAEP,OAAO,GAAG,qBAA4B,UAAU;;IAKpD,2CAACC;KACW;KACV,WAAU;KAEV,OAAO,GAAG,qBAA4B,yBAAyB,UAAU,SAAS,IAAI,UAAU"}
+{"version":3,"file":"ProfileDropdown2.js","names":["MenuItem","TransactionSettingsSection","LogoutMenuItem"],"sources":["../../../../../src/react/components/AccountMenuButton/ProfileDropdown.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { MenuItem } from './MenuItem';\nimport { LogoutMenuItem } from './LogoutMenuItem';\nimport { TransactionSettingsSection } from './TransactionSettingsSection';\nimport type { ProfileDropdownProps } from './types';\nimport './ProfileDropdown.css';\n\ninterface ProfileDropdownWithRefs extends Omit<ProfileDropdownProps, 'menuItemsRef'> {\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n  // Transaction settings props\n  currentConfirmConfig?: any;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick?: () => void;\n  onSetDelay?: (delay: number) => void;\n  onToggleTheme?: () => void;\n  transactionSettingsOpen?: boolean;\n}\n\nexport const ProfileDropdown = forwardRef<HTMLDivElement, ProfileDropdownWithRefs>(\n  ({\n    isOpen,\n    menuItems,\n    onLogout,\n    onClose,\n    menuItemsRef,\n    toggleColors,\n    currentConfirmConfig,\n    signerMode,\n    onToggleThresholdSigning,\n    onSetUiMode,\n    onToggleShowDetails,\n    onToggleSkipClick,\n    onSetDelay,\n    onToggleTheme,\n    transactionSettingsOpen = false,\n    theme = 'dark',\n    highlightedMenuItemId,\n  }, ref) => {\n    // Only count transaction settings if it's actually rendered (when expanded)\n    const hasTransactionSettings = transactionSettingsOpen && currentConfirmConfig && onToggleShowDetails && onToggleSkipClick && onSetDelay;\n\n    menuItemsRef.current.length = menuItems.length;\n\n    const highlightedIndex = useMemo(() => {\n      if (!highlightedMenuItemId) return -1;\n      return menuItems.findIndex((item) => item.id === highlightedMenuItemId || item.label === highlightedMenuItemId);\n    }, [highlightedMenuItemId, menuItems]);\n\n    return (\n      <div\n        ref={ref}\n        className={`w3a-profile-dropdown-morphed ${theme}`}\n        data-state={isOpen ? 'open' : 'closed'}\n      >\n        <div className=\"w3a-profile-dropdown-menu\">\n\n          {/* Menu Items */}\n          {menuItems.map((item, index) => {\n            const refCallback = (el: HTMLElement | null) => {\n              if (menuItemsRef.current) {\n                menuItemsRef.current[index] = el;\n              }\n            };\n            const isHighlighted = index === highlightedIndex;\n\n            return (\n              <MenuItem\n                key={item.id ?? index}\n                ref={refCallback}\n                item={item}\n                onClose={onClose}\n                className=\"\"\n                isHighlighted={isHighlighted}\n                // Set CSS variable to calculate stagger delay in CSS stylesheet\n                style={{ ['--stagger-item-n' as any]: index }}\n              />\n            );\n          })}\n\n          {/* Transaction Settings Section - Always render with animation */}\n          {currentConfirmConfig && (onSetUiMode || onToggleShowDetails) && onToggleSkipClick && onSetDelay && (\n            <TransactionSettingsSection\n              currentConfirmConfig={currentConfirmConfig}\n              signerMode={signerMode}\n              onToggleThresholdSigning={onToggleThresholdSigning}\n              onSetUiMode={onSetUiMode}\n              onToggleShowDetails={onToggleShowDetails}\n              onToggleSkipClick={onToggleSkipClick}\n              onSetDelay={onSetDelay}\n              onToggleTheme={onToggleTheme}\n              isOpen={transactionSettingsOpen}\n              theme={theme}\n              // Set CSS variable to calculate stagger delay in CSS stylesheet\n              style={{ ['--stagger-item-n' as any]: menuItems.length }}\n            />\n          )}\n\n          {/* Logout Section */}\n          <LogoutMenuItem\n            onLogout={onLogout}\n            className=\"w3a-logout-menu-item\"\n            // Set CSS variable to calculate stagger delay in CSS stylesheet\n            style={{ ['--stagger-item-n' as any]: hasTransactionSettings ? menuItems.length + 1 : menuItems.length }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,yCACV,EACC,QACA,WACA,UACA,SACA,cACA,cACA,sBACA,YACA,0BACA,aACA,qBACA,mBACA,YACA,eACA,0BAA0B,OAC1B,QAAQ,QACR,yBACC,QAAQ;CAET,MAAM,yBAAyB,2BAA2B,wBAAwB,uBAAuB,qBAAqB;AAE9H,cAAa,QAAQ,SAAS,UAAU;CAExC,MAAM,4CAAiC;AACrC,MAAI,CAAC,sBAAuB,QAAO;AACnC,SAAO,UAAU,WAAW,SAAS,KAAK,OAAO,yBAAyB,KAAK,UAAU;IACxF,CAAC,uBAAuB;AAE3B,QACE,2CAAC;EACM;EACL,WAAW,gCAAgC;EAC3C,cAAY,SAAS,SAAS;YAE9B,4CAAC;GAAI,WAAU;;IAGZ,UAAU,KAAK,MAAM,UAAU;KAC9B,MAAM,eAAe,OAA2B;AAC9C,UAAI,aAAa,QACf,cAAa,QAAQ,SAAS;;KAGlC,MAAM,gBAAgB,UAAU;AAEhC,YACE,2CAACA;MAEC,KAAK;MACC;MACG;MACT,WAAU;MACK;MAEf,OAAO,GAAG,qBAA4B;QAPjC,KAAK,MAAM;;IAarB,yBAAyB,eAAe,wBAAwB,qBAAqB,cACpF,2CAACC;KACuB;KACV;KACc;KACb;KACQ;KACF;KACP;KACG;KACf,QAAQ;KACD;KAEP,OAAO,GAAG,qBAA4B,UAAU;;IAKpD,2CAACC;KACW;KACV,WAAU;KAEV,OAAO,GAAG,qBAA4B,yBAAyB,UAAU,SAAS,IAAI,UAAU"}

package/dist/cjs/react/components/AccountMenuButton/TransactionSettingsSection.js

@@ -7,13 +7,14 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/react/components/AccountMenuButton/TransactionSettingsSection.tsx
-const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, className, style, isOpen = true, theme = "dark" }) => {
+const TransactionSettingsSection = ({ currentConfirmConfig, signerMode, onToggleThresholdSigning, onSetUiMode, onToggleShowDetails, onToggleSkipClick, onSetDelay, className, style, isOpen = true, theme = "dark" }) => {
 	const handleClick = (e) => {
 		e.stopPropagation();
 	};
 	const disableRequireClick = currentConfirmConfig?.uiMode === "skip";
 	const disableDelaySlider = disableRequireClick || currentConfirmConfig?.behavior !== "autoProceed";
 	const disableAll = !isOpen;
+	const selectedSignerMode = signerMode?.mode ?? "local-signer";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `w3a-dropdown-tx-settings-root ${isOpen ? "is-expanded" : ""} ${className || ""}`,
 		style,
@@ -32,6 +33,39 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 						gap: 8
 					},
 					children: [
+						signerMode && onToggleThresholdSigning && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "w3a-confirmation-options",
+							children: "Signing Mode"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: { width: "100%" },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SegmentedControl.SegmentedControl, {
+								items: [{
+									value: "local-signer",
+									label: "Local Signer",
+									disabled: disableAll
+								}, {
+									value: "threshold-signer",
+									label: "MPC Signer",
+									disabled: disableAll
+								}],
+								value: selectedSignerMode,
+								onValueChange: (v) => onToggleThresholdSigning(v === "threshold-signer"),
+								activeBg: "var(--w3a-colors-primary)",
+								height: 40,
+								buttonFontSize: 12,
+								containerStyle: {
+									background: "var(--w3a-colors-surface2)",
+									width: "100%"
+								},
+								buttonStyle: {
+									display: "grid",
+									placeItems: "center",
+									lineHeight: 1,
+									padding: "0 10px"
+								},
+								activeButtonStyle: { color: "var(--w3a-colors-textButton)" }
+							})
+						})] }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "w3a-confirmation-options",
 							children: "Confirmation Options"
@@ -70,7 +104,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 									lineHeight: 1,
 									padding: "0 10px"
 								},
-								activeButtonStyle: { color: "var(--w3a-colors-buttonPrimary)" }
+								activeButtonStyle: { color: "var(--w3a-colors-textButton)" }
 							})
 						})] }),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -109,7 +143,7 @@ const TransactionSettingsSection = ({ currentConfirmConfig, onSetUiMode, onToggl
 										lineHeight: 1,
 										padding: "0 10px"
 									},
-									activeButtonStyle: { color: "var(--w3a-colors-buttonPrimary)" }
+									activeButtonStyle: { color: "var(--w3a-colors-textButton)" }
 								})
 							})
 						}),

package/dist/cjs/react/components/AccountMenuButton/TransactionSettingsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionSettingsSection.js","names":["TransactionSettingsSection: React.FC<TransactionSettingsSectionProps>","SegmentedControl","Slider"],"sources":["../../../../../src/react/components/AccountMenuButton/TransactionSettingsSection.tsx"],"sourcesContent":["import React from 'react';\nimport { Slider } from './Slider';\nimport type { TransactionSettingsSectionProps } from './types';\nimport { SegmentedControl } from '../PasskeyAuthMenu/ui/SegmentedControl';\n\nexport const TransactionSettingsSection: React.FC<TransactionSettingsSectionProps> = ({\n  currentConfirmConfig,\n  onSetUiMode,\n  onToggleShowDetails,\n  onToggleSkipClick,\n  onSetDelay,\n  className,\n  style,\n  isOpen = true,\n  theme = 'dark'\n}) => {\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const disableRequireClick = currentConfirmConfig?.uiMode === 'skip';\n  const disableDelaySlider = disableRequireClick || currentConfirmConfig?.behavior !== 'autoProceed';\n  const disableAll = !isOpen;\n\n  return (\n    <div\n      className={`w3a-dropdown-tx-settings-root ${isOpen ? 'is-expanded' : ''} ${className || ''}`}\n      style={style}\n      onClick={handleClick}\n    >\n      <div className=\"w3a-dropdown-toggle-tx-settings\">\n        <div\n          className=\"w3a-dropdown-toggle-tx-settings-content\"\n          aria-hidden={!isOpen}\n          style={{ pointerEvents: isOpen ? 'auto' : 'none' }}\n        >\n          <div style={{\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 8\n          }}>\n            <div>\n              <div className=\"w3a-confirmation-options\">\n                Confirmation Options\n              </div>\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'skip', label: 'skip', disabled: disableAll },\n                    { value: 'modal', label: 'modal', disabled: disableAll },\n                    { value: 'drawer', label: 'drawer', disabled: disableAll },\n                  ]}\n                  value={(currentConfirmConfig?.uiMode ?? 'modal')}\n                  onValueChange={(v) => onSetUiMode?.(v as 'skip' | 'modal' | 'drawer')}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-buttonPrimary)' }}\n                />\n              </div>\n            </div>\n            <div\n              style={{\n                opacity: disableRequireClick ? 0.6 : 1,\n                pointerEvents: disableRequireClick ? 'none' : 'auto'\n              }}\n            >\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'auto', label: 'auto proceed', disabled: disableAll || disableRequireClick },\n                    { value: 'require', label: 'require click', disabled: disableAll || disableRequireClick },\n                  ]}\n                  value={(currentConfirmConfig?.behavior === 'autoProceed') ? 'auto' : 'require'}\n                  onValueChange={(v) => {\n                    const wantsAuto = v === 'auto';\n                    const isAuto = currentConfirmConfig?.behavior === 'autoProceed';\n                    if (wantsAuto !== isAuto) onToggleSkipClick?.();\n                  }}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-buttonPrimary)' }}\n                />\n              </div>\n            </div>\n            <Slider\n              disabled={disableAll || disableDelaySlider}\n              min={0}\n              max={6}\n              step={1}\n              value={Math.round((currentConfirmConfig?.autoProceedDelay ?? 0) / 500)}\n              onChange={(v) => onSetDelay(v * 500)}\n              theme={theme}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAKA,MAAaA,8BAAyE,EACpF,sBACA,aACA,qBACA,mBACA,YACA,WACA,OACA,SAAS,MACT,QAAQ,aACJ;CAEJ,MAAM,eAAe,MAAwB;AAC3C,IAAE;;CAGJ,MAAM,sBAAsB,sBAAsB,WAAW;CAC7D,MAAM,qBAAqB,uBAAuB,sBAAsB,aAAa;CACrF,MAAM,aAAa,CAAC;AAEpB,QACE,2CAAC;EACC,WAAW,iCAAiC,SAAS,gBAAgB,GAAG,GAAG,aAAa;EACjF;EACP,SAAS;YAET,2CAAC;GAAI,WAAU;aACb,2CAAC;IACC,WAAU;IACV,eAAa,CAAC;IACd,OAAO,EAAE,eAAe,SAAS,SAAS;cAE1C,4CAAC;KAAI,OAAO;MACV,OAAO;MACP,SAAS;MACT,eAAe;MACf,KAAK;;;MAEL,4CAAC,oBACC,2CAAC;OAAI,WAAU;iBAA2B;UAG1C,2CAAC;OAAI,OAAO,EAAE,OAAO;iBACnB,2CAACC;QACC,OAAO;SACL;UAAE,OAAO;UAAQ,OAAO;UAAQ,UAAU;;SAC1C;UAAE,OAAO;UAAS,OAAO;UAAS,UAAU;;SAC5C;UAAE,OAAO;UAAU,OAAO;UAAU,UAAU;;;QAEhD,OAAQ,sBAAsB,UAAU;QACxC,gBAAgB,MAAM,cAAc;QACpC,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;SAAE,YAAY;SAA8B,OAAO;;QACnE,aAAa;SAAE,SAAS;SAAQ,YAAY;SAAU,YAAY;SAAG,SAAS;;QAC9E,mBAAmB,EAAE,OAAO;;;MAIlC,2CAAC;OACC,OAAO;QACL,SAAS,sBAAsB,KAAM;QACrC,eAAe,sBAAsB,SAAS;;iBAGhD,2CAAC;QAAI,OAAO,EAAE,OAAO;kBACnB,2CAACA;SACC,OAAO,CACL;UAAE,OAAO;UAAQ,OAAO;UAAgB,UAAU,cAAc;YAChE;UAAE,OAAO;UAAW,OAAO;UAAiB,UAAU,cAAc;;SAEtE,OAAQ,sBAAsB,aAAa,gBAAiB,SAAS;SACrE,gBAAgB,MAAM;UACpB,MAAM,YAAY,MAAM;UACxB,MAAM,SAAS,sBAAsB,aAAa;AAClD,cAAI,cAAc,OAAQ;;SAE5B,UAAU;SACV,QAAQ;SACR,gBAAgB;SAChB,gBAAgB;UAAE,YAAY;UAA8B,OAAO;;SACnE,aAAa;UAAE,SAAS;UAAQ,YAAY;UAAU,YAAY;UAAG,SAAS;;SAC9E,mBAAmB,EAAE,OAAO;;;;MAIlC,2CAACC;OACC,UAAU,cAAc;OACxB,KAAK;OACL,KAAK;OACL,MAAM;OACN,OAAO,KAAK,OAAO,sBAAsB,oBAAoB,KAAK;OAClE,WAAW,MAAM,WAAW,IAAI;OACzB"}
+{"version":3,"file":"TransactionSettingsSection.js","names":["TransactionSettingsSection: React.FC<TransactionSettingsSectionProps>","SegmentedControl","Slider"],"sources":["../../../../../src/react/components/AccountMenuButton/TransactionSettingsSection.tsx"],"sourcesContent":["import React from 'react';\nimport { Slider } from './Slider';\nimport type { TransactionSettingsSectionProps } from './types';\nimport { SegmentedControl } from '../PasskeyAuthMenu/ui/SegmentedControl';\n\nexport const TransactionSettingsSection: React.FC<TransactionSettingsSectionProps> = ({\n  currentConfirmConfig,\n  signerMode,\n  onToggleThresholdSigning,\n  onSetUiMode,\n  onToggleShowDetails,\n  onToggleSkipClick,\n  onSetDelay,\n  className,\n  style,\n  isOpen = true,\n  theme = 'dark'\n}) => {\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  const disableRequireClick = currentConfirmConfig?.uiMode === 'skip';\n  const disableDelaySlider = disableRequireClick || currentConfirmConfig?.behavior !== 'autoProceed';\n  const disableAll = !isOpen;\n  const selectedSignerMode = signerMode?.mode ?? 'local-signer';\n\n  return (\n    <div\n      className={`w3a-dropdown-tx-settings-root ${isOpen ? 'is-expanded' : ''} ${className || ''}`}\n      style={style}\n      onClick={handleClick}\n    >\n      <div className=\"w3a-dropdown-toggle-tx-settings\">\n        <div\n          className=\"w3a-dropdown-toggle-tx-settings-content\"\n          aria-hidden={!isOpen}\n          style={{ pointerEvents: isOpen ? 'auto' : 'none' }}\n        >\n          <div style={{\n            width: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: 8\n          }}>\n            {signerMode && onToggleThresholdSigning && (\n              <div>\n                <div className=\"w3a-confirmation-options\">\n                  Signing Mode\n                </div>\n                <div style={{ width: '100%' }}>\n                  <SegmentedControl\n                    items={[\n                      { value: 'local-signer', label: 'Local Signer', disabled: disableAll },\n                      { value: 'threshold-signer', label: 'MPC Signer', disabled: disableAll },\n                    ]}\n                    value={selectedSignerMode}\n                    onValueChange={(v) => onToggleThresholdSigning(v === 'threshold-signer')}\n                    activeBg={'var(--w3a-colors-primary)'}\n                    height={40}\n                    buttonFontSize={12}\n                    containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                    buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                    activeButtonStyle={{ color: 'var(--w3a-colors-textButton)' }}\n                  />\n                </div>\n              </div>\n            )}\n            <div>\n              <div className=\"w3a-confirmation-options\">\n                Confirmation Options\n              </div>\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'skip', label: 'skip', disabled: disableAll },\n                    { value: 'modal', label: 'modal', disabled: disableAll },\n                    { value: 'drawer', label: 'drawer', disabled: disableAll },\n                  ]}\n                  value={(currentConfirmConfig?.uiMode ?? 'modal')}\n                  onValueChange={(v) => onSetUiMode?.(v as 'skip' | 'modal' | 'drawer')}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-textButton)' }}\n                />\n              </div>\n            </div>\n            <div\n              style={{\n                opacity: disableRequireClick ? 0.6 : 1,\n                pointerEvents: disableRequireClick ? 'none' : 'auto'\n              }}\n            >\n              <div style={{ width: '100%' }}>\n                <SegmentedControl\n                  items={[\n                    { value: 'auto', label: 'auto proceed', disabled: disableAll || disableRequireClick },\n                    { value: 'require', label: 'require click', disabled: disableAll || disableRequireClick },\n                  ]}\n                  value={(currentConfirmConfig?.behavior === 'autoProceed') ? 'auto' : 'require'}\n                  onValueChange={(v) => {\n                    const wantsAuto = v === 'auto';\n                    const isAuto = currentConfirmConfig?.behavior === 'autoProceed';\n                    if (wantsAuto !== isAuto) onToggleSkipClick?.();\n                  }}\n                  activeBg={'var(--w3a-colors-primary)'}\n                  height={40}\n                  buttonFontSize={12}\n                  containerStyle={{ background: 'var(--w3a-colors-surface2)', width: '100%' }}\n                  buttonStyle={{ display: 'grid', placeItems: 'center', lineHeight: 1, padding: '0 10px' }}\n                  activeButtonStyle={{ color: 'var(--w3a-colors-textButton)' }}\n                />\n              </div>\n            </div>\n            <Slider\n              disabled={disableAll || disableDelaySlider}\n              min={0}\n              max={6}\n              step={1}\n              value={Math.round((currentConfirmConfig?.autoProceedDelay ?? 0) / 500)}\n              onChange={(v) => onSetDelay(v * 500)}\n              theme={theme}\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAKA,MAAaA,8BAAyE,EACpF,sBACA,YACA,0BACA,aACA,qBACA,mBACA,YACA,WACA,OACA,SAAS,MACT,QAAQ,aACJ;CAEJ,MAAM,eAAe,MAAwB;AAC3C,IAAE;;CAGJ,MAAM,sBAAsB,sBAAsB,WAAW;CAC7D,MAAM,qBAAqB,uBAAuB,sBAAsB,aAAa;CACrF,MAAM,aAAa,CAAC;CACpB,MAAM,qBAAqB,YAAY,QAAQ;AAE/C,QACE,2CAAC;EACC,WAAW,iCAAiC,SAAS,gBAAgB,GAAG,GAAG,aAAa;EACjF;EACP,SAAS;YAET,2CAAC;GAAI,WAAU;aACb,2CAAC;IACC,WAAU;IACV,eAAa,CAAC;IACd,OAAO,EAAE,eAAe,SAAS,SAAS;cAE1C,4CAAC;KAAI,OAAO;MACV,OAAO;MACP,SAAS;MACT,eAAe;MACf,KAAK;;;MAEJ,cAAc,4BACb,4CAAC,oBACC,2CAAC;OAAI,WAAU;iBAA2B;UAG1C,2CAAC;OAAI,OAAO,EAAE,OAAO;iBACnB,2CAACC;QACC,OAAO,CACL;SAAE,OAAO;SAAgB,OAAO;SAAgB,UAAU;WAC1D;SAAE,OAAO;SAAoB,OAAO;SAAc,UAAU;;QAE9D,OAAO;QACP,gBAAgB,MAAM,yBAAyB,MAAM;QACrD,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;SAAE,YAAY;SAA8B,OAAO;;QACnE,aAAa;SAAE,SAAS;SAAQ,YAAY;SAAU,YAAY;SAAG,SAAS;;QAC9E,mBAAmB,EAAE,OAAO;;;MAKpC,4CAAC,oBACC,2CAAC;OAAI,WAAU;iBAA2B;UAG1C,2CAAC;OAAI,OAAO,EAAE,OAAO;iBACnB,2CAACA;QACC,OAAO;SACL;UAAE,OAAO;UAAQ,OAAO;UAAQ,UAAU;;SAC1C;UAAE,OAAO;UAAS,OAAO;UAAS,UAAU;;SAC5C;UAAE,OAAO;UAAU,OAAO;UAAU,UAAU;;;QAEhD,OAAQ,sBAAsB,UAAU;QACxC,gBAAgB,MAAM,cAAc;QACpC,UAAU;QACV,QAAQ;QACR,gBAAgB;QAChB,gBAAgB;SAAE,YAAY;SAA8B,OAAO;;QACnE,aAAa;SAAE,SAAS;SAAQ,YAAY;SAAU,YAAY;SAAG,SAAS;;QAC9E,mBAAmB,EAAE,OAAO;;;MAIlC,2CAAC;OACC,OAAO;QACL,SAAS,sBAAsB,KAAM;QACrC,eAAe,sBAAsB,SAAS;;iBAGhD,2CAAC;QAAI,OAAO,EAAE,OAAO;kBACnB,2CAACA;SACC,OAAO,CACL;UAAE,OAAO;UAAQ,OAAO;UAAgB,UAAU,cAAc;YAChE;UAAE,OAAO;UAAW,OAAO;UAAiB,UAAU,cAAc;;SAEtE,OAAQ,sBAAsB,aAAa,gBAAiB,SAAS;SACrE,gBAAgB,MAAM;UACpB,MAAM,YAAY,MAAM;UACxB,MAAM,SAAS,sBAAsB,aAAa;AAClD,cAAI,cAAc,OAAQ;;SAE5B,UAAU;SACV,QAAQ;SACR,gBAAgB;SAChB,gBAAgB;UAAE,YAAY;UAA8B,OAAO;;SACnE,aAAa;UAAE,SAAS;UAAQ,YAAY;UAAU,YAAY;UAAG,SAAS;;SAC9E,mBAAmB,EAAE,OAAO;;;;MAIlC,2CAACC;OACC,UAAU,cAAc;OACxB,KAAK;OACL,KAAK;OACL,MAAM;OACN,OAAO,KAAK,OAAO,sBAAsB,oBAAoB,KAAK;OAClE,WAAW,MAAM,WAAW,IAAI;OACzB"}

package/dist/cjs/react/components/AccountMenuButton/Web3AuthProfileButton-QsQWyQ9D.css

@@ -0,0 +1,77 @@
+* {
+  box-sizing: border-box;
+}
+
+.w3a-profile-button-morphable {
+  position: relative;
+  background-color: var(--w3a-colors-colorBackground);
+  border: 1px solid var(--w3a-colors-borderPrimary);
+  border-radius: 2rem;
+  box-shadow: var(--w3a-shadows-sm);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--w3a-colors-textPrimary);
+  cursor: pointer;
+  outline: none;
+  overflow: visible;
+  width: fit-content;
+  transition: none;
+}
+
+.w3a-profile-button-morphable:hover {
+  border-color: var(--w3a-colors-borderHover);
+}
+
+.w3a-profile-button-icon {
+  flex-shrink: 0;
+}
+
+.w3a-profile-button-icon svg {
+  overflow: visible;
+}
+
+.w3a-profile-button-username {
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+}
+
+.w3a-profile-button-icon {
+  color: var(--w3a-colors-textSecondary);
+}
+
+.w3a-profile-button-username {
+  display: block; color: var(--w3a-colors-textSecondary);
+}
+
+.w3a-profile-button-username.hidden {
+  display: none;
+}
+
+.w3a-user-account--toggle-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.w3a-user-account--toggle-text {
+  flex: 1;
+}
+
+.w3a-user-account--toggle-title {
+  font-weight: 500;
+  color: var(--w3a-colors-textPrimary);
+  font-size: 14px;
+  margin: 0;
+}
+
+.w3a-user-account--toggle-description {
+  font-size: 14px;
+  color: var(--w3a-colors-textMuted);
+  margin: 0;
+}
+
+
+/*# sourceMappingURL=Web3AuthProfileButton-QsQWyQ9D.css.map*/

package/dist/cjs/react/components/AccountMenuButton/Web3AuthProfileButton-QsQWyQ9D.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"Web3AuthProfileButton-QsQWyQ9D.css","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/Web3AuthProfileButton.css"],"sourcesContent":["* {\n  box-sizing: border-box;\n}\n\n.w3a-profile-button-morphable {\n  position: relative;\n  background-color: var(--w3a-colors-colorBackground);\n  border: 1px solid var(--w3a-colors-borderPrimary);\n  border-radius: 2rem;\n  box-shadow: var(--w3a-shadows-sm);\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--w3a-colors-textPrimary);\n  cursor: pointer;\n  outline: none;\n  overflow: visible;\n  width: fit-content;\n  transition: none;\n}\n\n.w3a-profile-button-morphable:hover {\n  border-color: var(--w3a-colors-borderHover);\n}\n\n.w3a-profile-button-icon {\n  flex-shrink: 0;\n}\n\n.w3a-profile-button-icon svg {\n  overflow: visible;\n}\n\n.w3a-profile-button-username {\n  white-space: nowrap;\n  overflow: hidden;\n  display: inline-block;\n}\n\n.w3a-profile-button-icon {\n  color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username {\n  display: block; color: var(--w3a-colors-textSecondary);\n}\n\n.w3a-profile-button-username.hidden {\n  display: none;\n}\n\n.w3a-user-account--toggle-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  transition: opacity 0.15s ease-in-out;\n}\n\n.w3a-user-account--toggle-text {\n  flex: 1;\n}\n\n.w3a-user-account--toggle-title {\n  font-weight: 500;\n  color: var(--w3a-colors-textPrimary);\n  font-size: 14px;\n  margin: 0;\n}\n\n.w3a-user-account--toggle-description {\n  font-size: 14px;\n  color: var(--w3a-colors-textMuted);\n  margin: 0;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA"}

package/dist/cjs/react/components/AccountMenuButton/icons/TouchIcon-BRVcqcso.css

@@ -0,0 +1,41 @@
+/* TouchIcon specific styles and animations */
+
+.w3a-fingerprint-icon {
+  transition: transform 400ms ease;
+}
+
+.w3a-fingerprint-icon path {
+  /* Normalize path length so dash animations are simple */
+  stroke: currentColor;
+}
+
+.w3a-fingerprint-icon.open path {
+  /* Draw the fingerprint when expanding/opening */
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: w3a-fp-open 1.6s ease-out 0.1s both;
+}
+
+/* Animate when closing the menu */
+.w3a-fingerprint-icon.closed path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: w3a-fp-close 1.6s ease-out 0.1s both;
+}
+
+@keyframes w3a-fp-open {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes w3a-fp-close {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+
+.w3a-fingerprint-icon:hover {
+  transform: rotate(180deg) scale(1.2);
+}
+
+
+/*# sourceMappingURL=TouchIcon-BRVcqcso.css.map*/

package/dist/cjs/react/components/AccountMenuButton/icons/TouchIcon-BRVcqcso.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchIcon-BRVcqcso.css","names":[],"sources":["../../../../../../src/react/components/AccountMenuButton/icons/TouchIcon.css"],"sourcesContent":["/* TouchIcon specific styles and animations */\n\n.w3a-fingerprint-icon {\n  transition: transform 400ms ease;\n}\n\n.w3a-fingerprint-icon path {\n  /* Normalize path length so dash animations are simple */\n  stroke: currentColor;\n}\n\n.w3a-fingerprint-icon.open path {\n  /* Draw the fingerprint when expanding/opening */\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: w3a-fp-open 1.6s ease-out 0.1s both;\n}\n\n/* Animate when closing the menu */\n.w3a-fingerprint-icon.closed path {\n  stroke-dasharray: 1;\n  stroke-dashoffset: 1;\n  animation: w3a-fp-close 1.6s ease-out 0.1s both;\n}\n\n@keyframes w3a-fp-open {\n  from { stroke-dashoffset: 1; }\n  to { stroke-dashoffset: 0; }\n}\n\n@keyframes w3a-fp-close {\n  from { stroke-dashoffset: 1; }\n  to { stroke-dashoffset: 0; }\n}\n\n.w3a-fingerprint-icon:hover {\n  transform: rotate(180deg) scale(1.2);\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA"}

package/dist/cjs/react/components/AccountMenuButton/index.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.js');
-const require_accountIds = require('../../sdk/src/core/types/accountIds.js');
+const require_accountIds = require('../../src/core/types/accountIds.js');
 const require_index = require('../../context/index.js');
 const require_ThemeProvider = require('../theme/ThemeProvider.js');
 const require_KeyIcon = require('./icons/KeyIcon.js');
@@ -23,7 +23,6 @@ let react_dom = require("react-dom");
 react_dom = require_rolldown_runtime.__toESM(react_dom);
 
 //#region src/react/components/AccountMenuButton/index.tsx
-require_accountIds.init_accountIds();
 /**
 * Account Menu Button Component
 * Provides user settings, account management, and device linking.
@@ -63,6 +62,8 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 	const [showLinkedDevices, setShowLinkedDevices] = (0, react.useState)(false);
 	const [transactionSettingsOpen, setTransactionSettingsOpen] = (0, react.useState)(false);
 	const [currentConfirmConfig, setCurrentConfirmConfig] = (0, react.useState)(null);
+	const [currentSignerMode, setCurrentSignerMode] = (0, react.useState)(null);
+	const lastThresholdSignerModeRef = (0, react.useRef)(null);
 	const { isOpen, refs, handleToggle, handleClose } = require_useProfileState.useProfileState({
 		open: typeof isMenuOpen === "boolean" ? isMenuOpen : void 0,
 		onOpenChange: onMenuOpenChange
@@ -72,24 +73,34 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 		if (!tatchi) return;
 		if (!loginState.isLoggedIn || !loggedInAccountId) {
 			setCurrentConfirmConfig(null);
+			setCurrentSignerMode(null);
 			return;
 		}
 		let cancelled = false;
 		if (require_accountIds.AccountId.validate(loggedInAccountId).valid) tatchi.userPreferences.setCurrentUser(require_accountIds.toAccountId(loggedInAccountId));
 		setCurrentConfirmConfig(tatchi.getConfirmationConfig());
-		const unsub = tatchi.userPreferences.onConfirmationConfigChange?.((cfg) => {
+		setCurrentSignerMode(tatchi.getSignerMode());
+		const unsubConfirmConfig = tatchi.userPreferences.onConfirmationConfigChange?.((cfg) => {
 			if (cancelled) return;
 			setCurrentConfirmConfig(cfg);
 		});
+		const unsubSignerMode = tatchi.userPreferences.onSignerModeChange?.((mode) => {
+			if (cancelled) return;
+			setCurrentSignerMode(mode);
+		});
 		return () => {
 			cancelled = true;
-			unsub?.();
+			unsubConfirmConfig?.();
+			unsubSignerMode?.();
 		};
 	}, [
 		tatchi,
 		loginState.isLoggedIn,
 		loggedInAccountId
 	]);
+	(0, react.useEffect)(() => {
+		if (currentSignerMode?.mode === "threshold-signer") lastThresholdSignerModeRef.current = currentSignerMode;
+	}, [currentSignerMode]);
 	const handleSetUiMode = (mode) => {
 		tatchi.setConfirmationConfig({ uiMode: mode });
 	};
@@ -111,6 +122,14 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 			}, 220);
 		}
 	};
+	const handleToggleThresholdSigning = (enabled) => {
+		if (enabled) {
+			const prev = lastThresholdSignerModeRef.current;
+			tatchi.setSignerMode(prev?.mode === "threshold-signer" ? prev : "threshold-signer");
+			return;
+		}
+		tatchi.setSignerMode("local-signer");
+	};
 	const MENU_ITEMS = (0, react.useMemo)(() => [
 		{
 			id: require_types.PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,
@@ -229,6 +248,8 @@ const AccountMenuButtonInner = ({ nearAccountId: nearAccountIdProp, nearExplorer
 				menuItemsRef: refs.menuItemsRef,
 				toggleColors,
 				currentConfirmConfig,
+				signerMode: currentSignerMode ?? void 0,
+				onToggleThresholdSigning: handleToggleThresholdSigning,
 				onSetUiMode: handleSetUiMode,
 				onToggleSkipClick: handleToggleSkipClick,
 				onSetDelay: handleSetDelay,

package/dist/cjs/react/components/AccountMenuButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AccountMenuButtonInner: React.FC<AccountMenuButtonProps>","useTatchi","useProfileState","useTheme","AccountId","toAccountId","MENU_ITEMS: MenuItem[]","PROFILE_MENU_ITEM_IDS","KeyIcon","error: any","ScanIcon","LinkIcon","SunIcon","MoonIcon","SlidersIcon","UserAccountButton","ProfileDropdown","QRCodeScanner","LinkedDevicesModal","AccountMenuButton: React.FC<AccountMenuButtonProps>","Theme"],"sources":["../../../../../src/react/components/AccountMenuButton/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { KeyIcon } from './icons/KeyIcon';\nimport { ScanIcon } from './icons/ScanIcon';\nimport { LinkIcon } from './icons/LinkIcon';\nimport { SlidersIcon } from './icons/SlidersIcon';\nimport { SunIcon } from './icons/SunIcon';\nimport { MoonIcon } from './icons/MoonIcon';\nimport { UserAccountButton } from './UserAccountButton';\nimport { ProfileDropdown } from './ProfileDropdown';\nimport { useProfileState } from './hooks/useProfileState';\nimport { useTatchi } from '../../context';\nimport type { AccountMenuButtonProps, MenuItem } from './types';\nimport { PROFILE_MENU_ITEM_IDS } from './types';\nimport { QRCodeScanner } from '../QRCodeScanner';\nimport { LinkedDevicesModal } from './LinkedDevicesModal';\nimport './Web3AuthProfileButton.css';\nimport { Theme, useTheme } from '../theme';\nimport { AccountId, toAccountId } from '../../../core/types/accountIds';\n\n/**\n * Account Menu Button Component\n * Provides user settings, account management, and device linking.\n * **Important:** This component should be used inside a TatchiPasskey context.\n * Wrap your app with PasskeyProvider or ensure TatchiPasskey is available in context via useTatchi.\n *\n * @example\n * ```tsx\n * import { PasskeyProvider } from '@tatchi-xyz/sdk/react';\n * import { AccountMenuButton } from '@tatchi-xyz/sdk/react';\n *\n * function App() {\n *   return (\n *     <PasskeyProvider configs={passkeyConfigs}>\n *       <AccountMenuButton\n *         username=\"alice\"\n *         onLogout={() => console.log('User logged out')}\n *         deviceLinkingScannerParams={{\n *           onDeviceLinked: (result) => console.log('Device linked:', result),\n *           onError: (error) => console.error('Error:', error),\n *           onClose: () => console.log('Scanner closed'),\n *           onEvent: (event) => console.log('Event:', event),\n *           fundingAmount: '0.05'\n *         }}\n *       />\n *     </PasskeyProvider>\n *   );\n * }\n * ```\n */\nconst AccountMenuButtonInner: React.FC<AccountMenuButtonProps> = ({\n  nearAccountId: nearAccountIdProp,\n  nearExplorerBaseUrl = 'https://nearblocks.io',\n  username: usernameProp,\n  hideUsername = false,\n  onLogout: onLogout,\n  deviceLinkingScannerParams,\n  toggleColors,\n  style,\n  className,\n  portalTarget,\n  isMenuOpen,\n  onMenuOpenChange,\n  highlightedMenuItem,\n}) => {\n  // Get values from context if not provided as props\n  const {\n    loginState,\n    tatchi,\n    logout,\n  } = useTatchi();\n\n  // Use props if provided, otherwise fall back to context\n  const accountName = usernameProp || nearAccountIdProp?.split('.')?.[0] || loginState.nearAccountId?.split('.')?.[0] || 'User';\n  const loggedInAccountId = loginState.nearAccountId;\n  const nearAccountId = nearAccountIdProp || loggedInAccountId;\n\n  // Local state for modals/expanded sections\n  const [showQRScanner, setShowQRScanner] = useState(false);\n  const [showLinkedDevices, setShowLinkedDevices] = useState(false);\n  const [transactionSettingsOpen, setTransactionSettingsOpen] = useState(false);\n  const [currentConfirmConfig, setCurrentConfirmConfig] = useState<any>(null);\n\n  // State management\n  const {\n    isOpen,\n    refs,\n    handleToggle,\n    handleClose,\n  } = useProfileState({\n    open: typeof isMenuOpen === 'boolean' ? isMenuOpen : undefined,\n    onOpenChange: onMenuOpenChange,\n  });\n\n  // Read current theme from Theme context (falls back to system preference)\n  const { theme } = useTheme();\n\n  // Keep local view state in sync with SDK preferences (mirrors wallet host in iframe mode)\n  useEffect(() => {\n    if (!tatchi) return;\n    if (!loginState.isLoggedIn || !loggedInAccountId) {\n      setCurrentConfirmConfig(null);\n      return;\n    }\n\n    let cancelled = false;\n\n    if (AccountId.validate(loggedInAccountId).valid) {\n      tatchi.userPreferences.setCurrentUser(toAccountId(loggedInAccountId));\n    }\n    setCurrentConfirmConfig(tatchi.getConfirmationConfig());\n\n    const unsub = tatchi.userPreferences.onConfirmationConfigChange?.((cfg: any) => {\n      if (cancelled) return;\n      setCurrentConfirmConfig(cfg);\n    });\n\n    return () => {\n      cancelled = true;\n      unsub?.();\n    };\n  }, [tatchi, loginState.isLoggedIn, loggedInAccountId]);\n\n  // Handlers for transaction settings\n  const handleSetUiMode = (mode: 'skip' | 'modal' | 'drawer') => {\n    // Only patch the field we intend to change to avoid overwriting theme or other values\n    tatchi.setConfirmationConfig({ uiMode: mode } as any);\n  };\n\n  const handleToggleSkipClick = () => {\n    if (!currentConfirmConfig) return;\n    const newBehavior = currentConfirmConfig.behavior === 'requireClick' ? 'autoProceed' : 'requireClick';\n    tatchi.setConfirmBehavior(newBehavior);\n  };\n\n  const handleSetDelay = (delay: number) => {\n    // Only patch delay; avoid passing a stale theme from local state\n    tatchi.setConfirmationConfig({ autoProceedDelay: delay } as any);\n  };\n\n  const handleToggleTheme = () => {\n    // Determine next theme from current visible theme when possible\n    const newTheme = (theme === 'dark' ? 'light' : (theme === 'light' ? 'dark' : (currentConfirmConfig?.theme === 'dark' ? 'light' : 'dark')));\n    tatchi.setUserTheme(newTheme);\n    // Always show a quick pulse to acknowledge the press\n    if (typeof document !== 'undefined' && document.body) {\n      document.body.setAttribute('data-w3a-theme-pulse', '1');\n      window.setTimeout(() => {\n        document.body?.removeAttribute('data-w3a-theme-pulse');\n      }, 220);\n    }\n  };\n\n  // Menu items configuration with context-aware handlers\n  const MENU_ITEMS: MenuItem[] = useMemo(() => [\n    {\n      id: PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,\n      icon: <KeyIcon />,\n      label: 'Export Keys',\n      description: 'View your private keys',\n      disabled: !loginState.isLoggedIn,\n      onClick: async () => {\n        try {\n          await tatchi.exportNearKeypairWithUI(nearAccountId!);\n        } catch (error: any) {\n          console.error('Key export failed:', error);\n          const msg = String(error?.message || 'Unknown error');\n          const friendly = /No user data found|No public key found/i.test(msg)\n            ? 'No local key material found for this account on this device. Please complete registration or recovery here first.'\n            : msg;\n          alert(`Key export failed: ${friendly}`);\n        }\n      },\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.SCAN_LINK_DEVICE,\n      icon: <ScanIcon />,\n      label: 'Scan and Link Device',\n      description: 'Scan QR to link a device',\n      disabled: !loginState.isLoggedIn,\n      onClick: () => {\n        setShowQRScanner(true);\n      },\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.LINKED_DEVICES,\n      icon: <LinkIcon />,\n      label: 'Linked Devices',\n      description: 'View linked devices',\n      disabled: !loginState.isLoggedIn,\n      onClick: () => setShowLinkedDevices(true),\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.TOGGLE_THEME,\n      icon: theme === 'dark' ? <SunIcon /> : <MoonIcon />,\n      label: 'Toggle Theme',\n      description: theme === 'dark' ? 'Dark Mode' : 'Light Mode',\n      disabled: false,\n      onClick: handleToggleTheme,\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.TRANSACTION_SETTINGS,\n      icon: <SlidersIcon />,\n      label: 'Transaction Settings',\n      description: 'Customize confirmation behavior',\n      disabled: !loginState.isLoggedIn,\n      onClick: () => setTransactionSettingsOpen((v) => !v),\n      keepOpenOnClick: true,\n    },\n  ], [tatchi, nearAccountId, loginState.isLoggedIn, theme, handleToggleTheme]);\n\n  const highlightedMenuItemId = highlightedMenuItem?.id;\n  const highlightShouldFocus = highlightedMenuItem?.focus ?? true;\n  const highlightedIndex = useMemo(() => {\n    if (!highlightedMenuItemId) return -1;\n    return MENU_ITEMS.findIndex((item) => item.id === highlightedMenuItemId);\n  }, [MENU_ITEMS, highlightedMenuItemId]);\n\n  useEffect(() => {\n    if (!isOpen || highlightedIndex < 0 || !highlightShouldFocus) return;\n    const el = refs.menuItemsRef.current?.[highlightedIndex];\n    if (!el) return;\n    const focusItem = () => {\n      if (typeof (el as any).focus === 'function') {\n        (el as any).focus();\n      }\n    };\n    if (typeof window === 'undefined') {\n      focusItem();\n      return;\n    }\n    const frame = window.requestAnimationFrame(focusItem);\n    return () => window.cancelAnimationFrame(frame);\n  }, [isOpen, highlightedIndex, highlightShouldFocus, refs.menuItemsRef]);\n\n  // Handlers\n  const handleLogout = () => {\n    logout();\n    onLogout?.();\n    handleClose();\n  };\n\n  return (\n    <div\n      ref={refs.buttonRef}\n      className={`w3a-profile-button-morphable ${isOpen ? 'open' : 'closed'}${className ? ` ${className}` : ''}`}\n      style={style}\n      data-state={isOpen ? 'open' : 'closed'}\n    >\n      <UserAccountButton\n        username={accountName}\n        hideUsername={hideUsername}\n        fullAccountId={nearAccountId || undefined}\n        isOpen={isOpen}\n        onClick={handleToggle}\n        nearExplorerBaseUrl={nearExplorerBaseUrl}\n        theme={theme}\n      />\n\n      {/* Visible menu structure for actual interaction */}\n      <ProfileDropdown\n        ref={refs.dropdownRef}\n        isOpen={isOpen}\n        menuItems={MENU_ITEMS}\n        onLogout={handleLogout}\n        onClose={handleClose}\n        menuItemsRef={refs.menuItemsRef}\n        toggleColors={toggleColors}\n        currentConfirmConfig={currentConfirmConfig}\n        onSetUiMode={handleSetUiMode}\n        onToggleSkipClick={handleToggleSkipClick}\n        onSetDelay={handleSetDelay}\n        onToggleTheme={handleToggleTheme}\n        transactionSettingsOpen={transactionSettingsOpen}\n        theme={theme}\n        highlightedMenuItemId={highlightedMenuItemId}\n      />\n\n      {/* QR Scanner Modal (portaled to nearest root for robustness) */}\n      {createPortal(\n        <QRCodeScanner\n          key=\"profile-qr-scanner\"\n          isOpen={showQRScanner}\n          fundingAmount={deviceLinkingScannerParams?.fundingAmount || '0.05'}\n          onDeviceLinked={(result) => {\n            deviceLinkingScannerParams?.onDeviceLinked?.(result);\n            setShowQRScanner(false);\n          }}\n          onError={(error) => {\n            deviceLinkingScannerParams?.onError?.(error);\n            setShowQRScanner(false);\n          }}\n          onClose={() => {\n            deviceLinkingScannerParams?.onClose?.();\n            setShowQRScanner(false);\n          }}\n          onEvent={(event) => deviceLinkingScannerParams?.onEvent?.(event)}\n        />, (portalTarget || document.body))}\n\n      {/* Linked Devices Modal (portaled to nearest root for robustness) */}\n      {createPortal(\n        <LinkedDevicesModal\n          nearAccountId={nearAccountId!}\n          isOpen={showLinkedDevices}\n          onClose={() => setShowLinkedDevices(false)}\n        />, (portalTarget || document.body))}\n    </div>\n  );\n};\n\nexport const AccountMenuButton: React.FC<AccountMenuButtonProps> = (props) => {\n  return (\n    <Theme>\n      <AccountMenuButtonInner {...props} />\n    </Theme>\n  );\n};\n\nexport const ProfileSettingsButton = AccountMenuButton;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["AccountMenuButtonInner: React.FC<AccountMenuButtonProps>","useTatchi","useProfileState","useTheme","AccountId","toAccountId","MENU_ITEMS: MenuItem[]","PROFILE_MENU_ITEM_IDS","KeyIcon","error: any","ScanIcon","LinkIcon","SunIcon","MoonIcon","SlidersIcon","UserAccountButton","ProfileDropdown","QRCodeScanner","LinkedDevicesModal","AccountMenuButton: React.FC<AccountMenuButtonProps>","Theme"],"sources":["../../../../../src/react/components/AccountMenuButton/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { KeyIcon } from './icons/KeyIcon';\nimport { ScanIcon } from './icons/ScanIcon';\nimport { LinkIcon } from './icons/LinkIcon';\nimport { SlidersIcon } from './icons/SlidersIcon';\nimport { SunIcon } from './icons/SunIcon';\nimport { MoonIcon } from './icons/MoonIcon';\nimport { UserAccountButton } from './UserAccountButton';\nimport { ProfileDropdown } from './ProfileDropdown';\nimport { useProfileState } from './hooks/useProfileState';\nimport { useTatchi } from '../../context';\nimport type { AccountMenuButtonProps, MenuItem } from './types';\nimport { PROFILE_MENU_ITEM_IDS } from './types';\nimport { QRCodeScanner } from '../QRCodeScanner';\nimport { LinkedDevicesModal } from './LinkedDevicesModal';\nimport './Web3AuthProfileButton.css';\nimport { Theme, useTheme } from '../theme';\nimport { AccountId, toAccountId } from '../../../core/types/accountIds';\nimport type { SignerMode } from '../../../core/types/signer-worker';\n\n/**\n * Account Menu Button Component\n * Provides user settings, account management, and device linking.\n * **Important:** This component should be used inside a TatchiPasskey context.\n * Wrap your app with PasskeyProvider or ensure TatchiPasskey is available in context via useTatchi.\n *\n * @example\n * ```tsx\n * import { PasskeyProvider } from '@tatchi-xyz/sdk/react';\n * import { AccountMenuButton } from '@tatchi-xyz/sdk/react';\n *\n * function App() {\n *   return (\n *     <PasskeyProvider configs={passkeyConfigs}>\n *       <AccountMenuButton\n *         username=\"alice\"\n *         onLogout={() => console.log('User logged out')}\n *         deviceLinkingScannerParams={{\n *           onDeviceLinked: (result) => console.log('Device linked:', result),\n *           onError: (error) => console.error('Error:', error),\n *           onClose: () => console.log('Scanner closed'),\n *           onEvent: (event) => console.log('Event:', event),\n *           fundingAmount: '0.05'\n *         }}\n *       />\n *     </PasskeyProvider>\n *   );\n * }\n * ```\n */\nconst AccountMenuButtonInner: React.FC<AccountMenuButtonProps> = ({\n  nearAccountId: nearAccountIdProp,\n  nearExplorerBaseUrl = 'https://nearblocks.io',\n  username: usernameProp,\n  hideUsername = false,\n  onLogout: onLogout,\n  deviceLinkingScannerParams,\n  toggleColors,\n  style,\n  className,\n  portalTarget,\n  isMenuOpen,\n  onMenuOpenChange,\n  highlightedMenuItem,\n}) => {\n  // Get values from context if not provided as props\n  const {\n    loginState,\n    tatchi,\n    logout,\n  } = useTatchi();\n\n  // Use props if provided, otherwise fall back to context\n  const accountName = usernameProp || nearAccountIdProp?.split('.')?.[0] || loginState.nearAccountId?.split('.')?.[0] || 'User';\n  const loggedInAccountId = loginState.nearAccountId;\n  const nearAccountId = nearAccountIdProp || loggedInAccountId;\n\n  // Local state for modals/expanded sections\n  const [showQRScanner, setShowQRScanner] = useState(false);\n  const [showLinkedDevices, setShowLinkedDevices] = useState(false);\n  const [transactionSettingsOpen, setTransactionSettingsOpen] = useState(false);\n  const [currentConfirmConfig, setCurrentConfirmConfig] = useState<any>(null);\n  const [currentSignerMode, setCurrentSignerMode] = useState<SignerMode | null>(null);\n  const lastThresholdSignerModeRef = useRef<SignerMode | null>(null);\n\n  // State management\n  const {\n    isOpen,\n    refs,\n    handleToggle,\n    handleClose,\n  } = useProfileState({\n    open: typeof isMenuOpen === 'boolean' ? isMenuOpen : undefined,\n    onOpenChange: onMenuOpenChange,\n  });\n\n  // Read current theme from Theme context (falls back to system preference)\n  const { theme } = useTheme();\n\n  // Keep local view state in sync with SDK preferences (mirrors wallet host in iframe mode)\n  useEffect(() => {\n    if (!tatchi) return;\n    if (!loginState.isLoggedIn || !loggedInAccountId) {\n      setCurrentConfirmConfig(null);\n      setCurrentSignerMode(null);\n      return;\n    }\n\n    let cancelled = false;\n\n    if (AccountId.validate(loggedInAccountId).valid) {\n      tatchi.userPreferences.setCurrentUser(toAccountId(loggedInAccountId));\n    }\n    setCurrentConfirmConfig(tatchi.getConfirmationConfig());\n    setCurrentSignerMode(tatchi.getSignerMode());\n\n    const unsubConfirmConfig = tatchi.userPreferences.onConfirmationConfigChange?.((cfg: any) => {\n      if (cancelled) return;\n      setCurrentConfirmConfig(cfg);\n    });\n    const unsubSignerMode = tatchi.userPreferences.onSignerModeChange?.((mode) => {\n      if (cancelled) return;\n      setCurrentSignerMode(mode);\n    });\n\n    return () => {\n      cancelled = true;\n      unsubConfirmConfig?.();\n      unsubSignerMode?.();\n    };\n  }, [tatchi, loginState.isLoggedIn, loggedInAccountId]);\n\n  useEffect(() => {\n    if (currentSignerMode?.mode === 'threshold-signer') {\n      lastThresholdSignerModeRef.current = currentSignerMode;\n    }\n  }, [currentSignerMode]);\n\n  // Handlers for transaction settings\n  const handleSetUiMode = (mode: 'skip' | 'modal' | 'drawer') => {\n    // Only patch the field we intend to change to avoid overwriting theme or other values\n    tatchi.setConfirmationConfig({ uiMode: mode } as any);\n  };\n\n  const handleToggleSkipClick = () => {\n    if (!currentConfirmConfig) return;\n    const newBehavior = currentConfirmConfig.behavior === 'requireClick' ? 'autoProceed' : 'requireClick';\n    tatchi.setConfirmBehavior(newBehavior);\n  };\n\n  const handleSetDelay = (delay: number) => {\n    // Only patch delay; avoid passing a stale theme from local state\n    tatchi.setConfirmationConfig({ autoProceedDelay: delay } as any);\n  };\n\n  const handleToggleTheme = () => {\n    // Determine next theme from current visible theme when possible\n    const newTheme = (theme === 'dark' ? 'light' : (theme === 'light' ? 'dark' : (currentConfirmConfig?.theme === 'dark' ? 'light' : 'dark')));\n    tatchi.setUserTheme(newTheme);\n    // Always show a quick pulse to acknowledge the press\n    if (typeof document !== 'undefined' && document.body) {\n      document.body.setAttribute('data-w3a-theme-pulse', '1');\n      window.setTimeout(() => {\n        document.body?.removeAttribute('data-w3a-theme-pulse');\n      }, 220);\n    }\n  };\n\n  const handleToggleThresholdSigning = (enabled: boolean) => {\n    if (enabled) {\n      const prev = lastThresholdSignerModeRef.current;\n      tatchi.setSignerMode(prev?.mode === 'threshold-signer' ? prev : 'threshold-signer');\n      return;\n    }\n    tatchi.setSignerMode('local-signer');\n  };\n\n  // Menu items configuration with context-aware handlers\n  const MENU_ITEMS: MenuItem[] = useMemo(() => [\n    {\n      id: PROFILE_MENU_ITEM_IDS.EXPORT_KEYS,\n      icon: <KeyIcon />,\n      label: 'Export Keys',\n      description: 'View your private keys',\n      disabled: !loginState.isLoggedIn,\n      onClick: async () => {\n        try {\n          await tatchi.exportNearKeypairWithUI(nearAccountId!);\n        } catch (error: any) {\n          console.error('Key export failed:', error);\n          const msg = String(error?.message || 'Unknown error');\n          const friendly = /No user data found|No public key found/i.test(msg)\n            ? 'No local key material found for this account on this device. Please complete registration or recovery here first.'\n            : msg;\n          alert(`Key export failed: ${friendly}`);\n        }\n      },\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.SCAN_LINK_DEVICE,\n      icon: <ScanIcon />,\n      label: 'Scan and Link Device',\n      description: 'Scan QR to link a device',\n      disabled: !loginState.isLoggedIn,\n      onClick: () => {\n        setShowQRScanner(true);\n      },\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.LINKED_DEVICES,\n      icon: <LinkIcon />,\n      label: 'Linked Devices',\n      description: 'View linked devices',\n      disabled: !loginState.isLoggedIn,\n      onClick: () => setShowLinkedDevices(true),\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.TOGGLE_THEME,\n      icon: theme === 'dark' ? <SunIcon /> : <MoonIcon />,\n      label: 'Toggle Theme',\n      description: theme === 'dark' ? 'Dark Mode' : 'Light Mode',\n      disabled: false,\n      onClick: handleToggleTheme,\n      keepOpenOnClick: true,\n    },\n    {\n      id: PROFILE_MENU_ITEM_IDS.TRANSACTION_SETTINGS,\n      icon: <SlidersIcon />,\n      label: 'Transaction Settings',\n      description: 'Customize confirmation behavior',\n      disabled: !loginState.isLoggedIn,\n      onClick: () => setTransactionSettingsOpen((v) => !v),\n      keepOpenOnClick: true,\n    },\n  ], [tatchi, nearAccountId, loginState.isLoggedIn, theme, handleToggleTheme]);\n\n  const highlightedMenuItemId = highlightedMenuItem?.id;\n  const highlightShouldFocus = highlightedMenuItem?.focus ?? true;\n  const highlightedIndex = useMemo(() => {\n    if (!highlightedMenuItemId) return -1;\n    return MENU_ITEMS.findIndex((item) => item.id === highlightedMenuItemId);\n  }, [MENU_ITEMS, highlightedMenuItemId]);\n\n  useEffect(() => {\n    if (!isOpen || highlightedIndex < 0 || !highlightShouldFocus) return;\n    const el = refs.menuItemsRef.current?.[highlightedIndex];\n    if (!el) return;\n    const focusItem = () => {\n      if (typeof (el as any).focus === 'function') {\n        (el as any).focus();\n      }\n    };\n    if (typeof window === 'undefined') {\n      focusItem();\n      return;\n    }\n    const frame = window.requestAnimationFrame(focusItem);\n    return () => window.cancelAnimationFrame(frame);\n  }, [isOpen, highlightedIndex, highlightShouldFocus, refs.menuItemsRef]);\n\n  // Handlers\n  const handleLogout = () => {\n    logout();\n    onLogout?.();\n    handleClose();\n  };\n\n  return (\n    <div\n      ref={refs.buttonRef}\n      className={`w3a-profile-button-morphable ${isOpen ? 'open' : 'closed'}${className ? ` ${className}` : ''}`}\n      style={style}\n      data-state={isOpen ? 'open' : 'closed'}\n    >\n      <UserAccountButton\n        username={accountName}\n        hideUsername={hideUsername}\n        fullAccountId={nearAccountId || undefined}\n        isOpen={isOpen}\n        onClick={handleToggle}\n        nearExplorerBaseUrl={nearExplorerBaseUrl}\n        theme={theme}\n      />\n\n      {/* Visible menu structure for actual interaction */}\n      <ProfileDropdown\n        ref={refs.dropdownRef}\n        isOpen={isOpen}\n        menuItems={MENU_ITEMS}\n        onLogout={handleLogout}\n        onClose={handleClose}\n        menuItemsRef={refs.menuItemsRef}\n        toggleColors={toggleColors}\n        currentConfirmConfig={currentConfirmConfig}\n        signerMode={currentSignerMode ?? undefined}\n        onToggleThresholdSigning={handleToggleThresholdSigning}\n        onSetUiMode={handleSetUiMode}\n        onToggleSkipClick={handleToggleSkipClick}\n        onSetDelay={handleSetDelay}\n        onToggleTheme={handleToggleTheme}\n        transactionSettingsOpen={transactionSettingsOpen}\n        theme={theme}\n        highlightedMenuItemId={highlightedMenuItemId}\n      />\n\n      {/* QR Scanner Modal (portaled to nearest root for robustness) */}\n      {createPortal(\n        <QRCodeScanner\n          key=\"profile-qr-scanner\"\n          isOpen={showQRScanner}\n          fundingAmount={deviceLinkingScannerParams?.fundingAmount || '0.05'}\n          onDeviceLinked={(result) => {\n            deviceLinkingScannerParams?.onDeviceLinked?.(result);\n            setShowQRScanner(false);\n          }}\n          onError={(error) => {\n            deviceLinkingScannerParams?.onError?.(error);\n            setShowQRScanner(false);\n          }}\n          onClose={() => {\n            deviceLinkingScannerParams?.onClose?.();\n            setShowQRScanner(false);\n          }}\n          onEvent={(event) => deviceLinkingScannerParams?.onEvent?.(event)}\n        />, (portalTarget || document.body))}\n\n      {/* Linked Devices Modal (portaled to nearest root for robustness) */}\n      {createPortal(\n        <LinkedDevicesModal\n          nearAccountId={nearAccountId!}\n          isOpen={showLinkedDevices}\n          onClose={() => setShowLinkedDevices(false)}\n        />, (portalTarget || document.body))}\n    </div>\n  );\n};\n\nexport const AccountMenuButton: React.FC<AccountMenuButtonProps> = (props) => {\n  return (\n    <Theme>\n      <AccountMenuButtonInner {...props} />\n    </Theme>\n  );\n};\n\nexport const ProfileSettingsButton = AccountMenuButton;\n"],"mappings":"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"}

package/dist/cjs/react/components/AccountMenuButton/types.js

@@ -1,4 +1,3 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.js');
 
 //#region src/react/components/AccountMenuButton/types.ts
 const PROFILE_MENU_ITEM_IDS = {

package/dist/cjs/react/components/AccountMenuButton/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/types.ts"],"sourcesContent":["import type { ToggleColorProps } from './Toggle';\nimport type { DeviceLinkingSSEEvent, LinkDeviceResult } from '@/index';\nimport type { ThemeName } from '@/core/WebAuthnManager/LitComponents/confirm-ui-types';\n\nexport interface ProfileDimensions {\n  width: number;\n  height: number;\n}\n\nexport interface ProfileAnimationConfig {\n  duration: number;\n  delay: number;\n  ease: string;\n}\n\nexport const PROFILE_MENU_ITEM_IDS = {\n  EXPORT_KEYS: 'export-keys',\n  SCAN_LINK_DEVICE: 'scan-link-device',\n  LINKED_DEVICES: 'linked-devices',\n  TOGGLE_THEME: 'toggle-theme',\n  TRANSACTION_SETTINGS: 'transaction-settings',\n} as const;\n\nexport type ProfileSettingsMenuItemId = typeof PROFILE_MENU_ITEM_IDS[keyof typeof PROFILE_MENU_ITEM_IDS];\n\nexport interface MenuItem {\n  id?: ProfileSettingsMenuItemId | (string & {});\n  icon: React.ReactNode;\n  label: string;\n  description: string;\n  disabled: boolean;\n  onClick?: () => void;\n  // When true, clicking this item will NOT close the dropdown\n  keepOpenOnClick?: boolean;\n}\n\nexport interface HighlightedProfileMenuItem {\n  id: ProfileSettingsMenuItemId | (string & {});\n  /**\n   * When true (default), focus the highlighted button when the menu opens.\n   */\n  focus?: boolean;\n}\n\nexport interface DeviceLinkingScannerParams {\n  onDeviceLinked?: (result: LinkDeviceResult) => void;\n  onError?: (error: Error) => void;\n  onClose?: () => void;\n  onEvent?: (event: DeviceLinkingSSEEvent) => void;\n  fundingAmount?: string;\n}\n\nexport interface AccountMenuButtonProps {\n  nearAccountId: string;\n  nearExplorerBaseUrl?: string;\n  username?: string | null;\n  hideUsername?: boolean;\n  onLogout?: () => void;\n  // QR Code Scanner parameters\n  deviceLinkingScannerParams?: DeviceLinkingScannerParams;\n  // styles\n  toggleColors?: ToggleColorProps;\n  style?: React.CSSProperties;\n  className?: string;\n  // Optional: where to portal overlays (modals)\n  // Defaults to the component's ShadowRoot when present, otherwise document.body\n  portalTarget?: HTMLElement | ShadowRoot | null;\n  // Programmatic menu control\n  isMenuOpen?: boolean;\n  onMenuOpenChange?: (open: boolean) => void;\n  highlightedMenuItem?: HighlightedProfileMenuItem | null;\n}\n\nexport type ProfileSettingsButtonProps = AccountMenuButtonProps;\n\nexport interface UserAccountButtonProps {\n  username: string;\n  hideUsername: boolean;\n  fullAccountId?: string;\n  nearExplorerBaseUrl?: string;\n  isOpen: boolean;\n  onClick: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  theme?: ThemeName;\n  // Optional ARIA linkage\n  menuId?: string;\n  triggerId?: string;\n}\n\nexport interface ProfileDropdownProps {\n  isOpen: boolean;\n  menuItems: MenuItem[];\n  onLogout: () => void;\n  onClose: () => void;\n  toggleColors?: ToggleColorProps;\n  theme?: ThemeName;\n  currentConfirmConfig?: any;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick?: () => void;\n  onSetDelay?: (delay: number) => void;\n  onToggleTheme?: () => void;\n  transactionSettingsOpen?: boolean;\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n  // Optional ARIA linkage\n  menuId?: string;\n  triggerId?: string;\n  highlightedMenuItemId?: string;\n}\n\nexport interface MenuItemProps {\n  item: MenuItem;\n  onClose: () => void;\n  className?: string;\n  style?: React.CSSProperties;\n  isHighlighted?: boolean;\n}\n\nexport interface LogoutMenuItemProps {\n  onLogout: () => void;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface ProfileRelayerToggleSectionProps {\n  toggleColors?: ToggleColorProps;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface TransactionSettingsSectionProps {\n  currentConfirmConfig: any;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick: () => void;\n  onSetDelay: (delay: number) => void;\n  onToggleTheme?: () => void;\n  className?: string;\n  style?: React.CSSProperties;\n  isOpen?: boolean;\n  theme?: ThemeName;\n}\n\nexport interface ProfileStateRefs {\n  buttonRef: React.RefObject<HTMLDivElement | null>;\n  dropdownRef: React.RefObject<HTMLDivElement | null>;\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n}\n\nexport type { ToggleColorProps };\n"],"mappings":";;;AAeA,MAAa,wBAAwB;CACnC,aAAa;CACb,kBAAkB;CAClB,gBAAgB;CAChB,cAAc;CACd,sBAAsB"}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../src/react/components/AccountMenuButton/types.ts"],"sourcesContent":["import type { ToggleColorProps } from './Toggle';\nimport type { DeviceLinkingSSEEvent, LinkDeviceResult } from '@/index';\nimport type { ThemeName } from '@/core/WebAuthnManager/LitComponents/confirm-ui-types';\nimport type { SignerMode } from '@/core/types/signer-worker';\n\nexport interface ProfileDimensions {\n  width: number;\n  height: number;\n}\n\nexport interface ProfileAnimationConfig {\n  duration: number;\n  delay: number;\n  ease: string;\n}\n\nexport const PROFILE_MENU_ITEM_IDS = {\n  EXPORT_KEYS: 'export-keys',\n  SCAN_LINK_DEVICE: 'scan-link-device',\n  LINKED_DEVICES: 'linked-devices',\n  TOGGLE_THEME: 'toggle-theme',\n  TRANSACTION_SETTINGS: 'transaction-settings',\n} as const;\n\nexport type ProfileSettingsMenuItemId = typeof PROFILE_MENU_ITEM_IDS[keyof typeof PROFILE_MENU_ITEM_IDS];\n\nexport interface MenuItem {\n  id?: ProfileSettingsMenuItemId | (string & {});\n  icon: React.ReactNode;\n  label: string;\n  description: string;\n  disabled: boolean;\n  onClick?: () => void;\n  // When true, clicking this item will NOT close the dropdown\n  keepOpenOnClick?: boolean;\n}\n\nexport interface HighlightedProfileMenuItem {\n  id: ProfileSettingsMenuItemId | (string & {});\n  /**\n   * When true (default), focus the highlighted button when the menu opens.\n   */\n  focus?: boolean;\n}\n\nexport interface DeviceLinkingScannerParams {\n  onDeviceLinked?: (result: LinkDeviceResult) => void;\n  onError?: (error: Error) => void;\n  onClose?: () => void;\n  onEvent?: (event: DeviceLinkingSSEEvent) => void;\n  fundingAmount?: string;\n}\n\nexport interface AccountMenuButtonProps {\n  nearAccountId: string;\n  nearExplorerBaseUrl?: string;\n  username?: string | null;\n  hideUsername?: boolean;\n  onLogout?: () => void;\n  // QR Code Scanner parameters\n  deviceLinkingScannerParams?: DeviceLinkingScannerParams;\n  // styles\n  toggleColors?: ToggleColorProps;\n  style?: React.CSSProperties;\n  className?: string;\n  // Optional: where to portal overlays (modals)\n  // Defaults to the component's ShadowRoot when present, otherwise document.body\n  portalTarget?: HTMLElement | ShadowRoot | null;\n  // Programmatic menu control\n  isMenuOpen?: boolean;\n  onMenuOpenChange?: (open: boolean) => void;\n  highlightedMenuItem?: HighlightedProfileMenuItem | null;\n}\n\nexport type ProfileSettingsButtonProps = AccountMenuButtonProps;\n\nexport interface UserAccountButtonProps {\n  username: string;\n  hideUsername: boolean;\n  fullAccountId?: string;\n  nearExplorerBaseUrl?: string;\n  isOpen: boolean;\n  onClick: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  theme?: ThemeName;\n  // Optional ARIA linkage\n  menuId?: string;\n  triggerId?: string;\n}\n\nexport interface ProfileDropdownProps {\n  isOpen: boolean;\n  menuItems: MenuItem[];\n  onLogout: () => void;\n  onClose: () => void;\n  toggleColors?: ToggleColorProps;\n  theme?: ThemeName;\n  currentConfirmConfig?: any;\n  signerMode?: SignerMode;\n  onToggleThresholdSigning?: (enabled: boolean) => void;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick?: () => void;\n  onSetDelay?: (delay: number) => void;\n  onToggleTheme?: () => void;\n  transactionSettingsOpen?: boolean;\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n  // Optional ARIA linkage\n  menuId?: string;\n  triggerId?: string;\n  highlightedMenuItemId?: string;\n}\n\nexport interface MenuItemProps {\n  item: MenuItem;\n  onClose: () => void;\n  className?: string;\n  style?: React.CSSProperties;\n  isHighlighted?: boolean;\n}\n\nexport interface LogoutMenuItemProps {\n  onLogout: () => void;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface ProfileRelayerToggleSectionProps {\n  toggleColors?: ToggleColorProps;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface TransactionSettingsSectionProps {\n  currentConfirmConfig: any;\n  signerMode?: SignerMode;\n  onToggleThresholdSigning?: (enabled: boolean) => void;\n  onSetUiMode?: (mode: 'skip' | 'modal' | 'drawer') => void;\n  onToggleShowDetails?: () => void;\n  onToggleSkipClick: () => void;\n  onSetDelay: (delay: number) => void;\n  onToggleTheme?: () => void;\n  className?: string;\n  style?: React.CSSProperties;\n  isOpen?: boolean;\n  theme?: ThemeName;\n}\n\nexport interface ProfileStateRefs {\n  buttonRef: React.RefObject<HTMLDivElement | null>;\n  dropdownRef: React.RefObject<HTMLDivElement | null>;\n  menuItemsRef: React.MutableRefObject<(HTMLElement | null)[]>;\n}\n\nexport type { ToggleColorProps };\n"],"mappings":";;AAgBA,MAAa,wBAAwB;CACnC,aAAa;CACb,kBAAkB;CAClB,gBAAgB;CAChB,cAAc;CACd,sBAAsB"}