@mysten-incubation/dev-wallet 0.0.0

package/dist/ui/dev-wallet-balances.mjs

@@ -0,0 +1,130 @@
+import { sectionHeaderStyles, sharedStyles, stateStyles } from "./styles.mjs";
+import { formatCoinBalance, getCoinSymbol } from "./utils.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/ui/dev-wallet-balances.ts
+let DevWalletBalances = class DevWalletBalances$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.address = "";
+		this.client = null;
+		this._balances = [];
+		this._loading = false;
+		this._error = null;
+	}
+	static {
+		this.styles = [
+			sharedStyles,
+			sectionHeaderStyles,
+			stateStyles,
+			css`
+			:host {
+				display: block;
+			}
+
+			.balance-list {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+			}
+
+			.balance-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 10px 12px;
+				border-radius: var(--dev-wallet-radius-sm);
+				border: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-secondary);
+			}
+
+			.balance-symbol {
+				font-size: 14px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.balance-amount {
+				font-size: 14px;
+				color: var(--dev-wallet-foreground);
+				font-family: var(--dev-wallet-font-mono);
+			}
+		`
+		];
+	}
+	#lastFetchedAddress = "";
+	#lastFetchedClient = null;
+	#fetchGeneration = 0;
+	/** Re-fetch balances for the current address/client. */
+	refresh() {
+		if (this.address && this.client) {
+			this.#fetchBalances();
+		}
+	}
+	willUpdate(changedProperties) {
+		if ((changedProperties.has("address") || changedProperties.has("client")) && this.address && this.client && (this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)) {
+			this.#fetchBalances();
+		}
+	}
+	render() {
+		if (!this.address || !this.client) {
+			return nothing;
+		}
+		return html`
+			<h3 class="section-header">Balances</h3>
+			${this._loading ? html`<div class="loading" part="loading" aria-live="polite">Loading...</div>` : this._error ? html`<div class="error-state" part="error-message" aria-live="polite">
+							${this._error}
+						</div>` : this._balances.length === 0 ? html`<div class="empty-state" part="empty-state">No balances</div>` : html`
+								<div class="balance-list" part="balance-list">
+									${this._balances.map((balance) => html`
+											<div class="balance-item">
+												<span class="balance-symbol">${balance.symbol}</span>
+												<span class="balance-amount"
+													>${formatCoinBalance(balance.totalBalance, balance.decimals)}</span
+												>
+											</div>
+										`)}
+								</div>
+							`}
+		`;
+	}
+	async #fetchBalances() {
+		this.#lastFetchedAddress = this.address;
+		this.#lastFetchedClient = this.client;
+		const generation = ++this.#fetchGeneration;
+		this._loading = true;
+		this._error = null;
+		try {
+			const { balances } = await this.client.core.listBalances({ owner: this.address });
+			if (generation !== this.#fetchGeneration) return;
+			const metadataResults = await Promise.all(balances.map((b) => this.client.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null)));
+			if (generation !== this.#fetchGeneration) return;
+			this._balances = balances.map((b, i) => ({
+				coinType: b.coinType,
+				symbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),
+				totalBalance: b.balance,
+				decimals: metadataResults[i]?.coinMetadata?.decimals ?? 0
+			}));
+		} catch {
+			if (generation !== this.#fetchGeneration) return;
+			this._error = "Failed to load balances";
+			this._balances = [];
+		} finally {
+			if (generation === this.#fetchGeneration) {
+				this._loading = false;
+			}
+		}
+	}
+};
+__decorate([property({ type: String })], DevWalletBalances.prototype, "address", void 0);
+__decorate([property({ attribute: false })], DevWalletBalances.prototype, "client", void 0);
+__decorate([state()], DevWalletBalances.prototype, "_balances", void 0);
+__decorate([state()], DevWalletBalances.prototype, "_loading", void 0);
+__decorate([state()], DevWalletBalances.prototype, "_error", void 0);
+DevWalletBalances = __decorate([customElement("dev-wallet-balances")], DevWalletBalances);
+
+//#endregion
+export { DevWalletBalances };
+//# sourceMappingURL=dev-wallet-balances.mjs.map

package/dist/ui/dev-wallet-balances.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-balances.mjs","names":["DevWalletBalances","#fetchBalances","#lastFetchedAddress","#lastFetchedClient","#fetchGeneration"],"sources":["../../src/ui/dev-wallet-balances.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ClientWithCoreApi } from '@mysten/sui/client';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { sectionHeaderStyles, sharedStyles, stateStyles } from './styles.js';\nimport { formatCoinBalance, getCoinSymbol } from './utils.js';\n\ninterface CoinBalance {\n\tcoinType: string;\n\tsymbol: string;\n\ttotalBalance: string;\n\tdecimals: number;\n}\n\n@customElement('dev-wallet-balances')\nexport class DevWalletBalances extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tsectionHeaderStyles,\n\t\tstateStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.balance-list {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 4px;\n\t\t\t}\n\n\t\t\t.balance-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 10px 12px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-sm);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t}\n\n\t\t\t.balance-symbol {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.balance-amount {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\taddress = '';\n\n\t@property({ attribute: false })\n\tclient: ClientWithCoreApi | null = null;\n\n\t@state()\n\tprivate _balances: CoinBalance[] = [];\n\n\t@state()\n\tprivate _loading = false;\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t#lastFetchedAddress = '';\n\t#lastFetchedClient: ClientWithCoreApi | null = null;\n\t#fetchGeneration = 0;\n\n\t/** Re-fetch balances for the current address/client. */\n\trefresh() {\n\t\tif (this.address && this.client) {\n\t\t\tthis.#fetchBalances();\n\t\t}\n\t}\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (\n\t\t\t(changedProperties.has('address') || changedProperties.has('client')) &&\n\t\t\tthis.address &&\n\t\t\tthis.client &&\n\t\t\t(this.address !== this.#lastFetchedAddress || this.client !== this.#lastFetchedClient)\n\t\t) {\n\t\t\tthis.#fetchBalances();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tif (!this.address || !this.client) {\n\t\t\treturn nothing;\n\t\t}\n\n\t\treturn html`\n\t\t\t<h3 class=\"section-header\">Balances</h3>\n\t\t\t${this._loading\n\t\t\t\t? html`<div class=\"loading\" part=\"loading\" aria-live=\"polite\">Loading...</div>`\n\t\t\t\t: this._error\n\t\t\t\t\t? html`<div class=\"error-state\" part=\"error-message\" aria-live=\"polite\">\n\t\t\t\t\t\t\t${this._error}\n\t\t\t\t\t\t</div>`\n\t\t\t\t\t: this._balances.length === 0\n\t\t\t\t\t\t? html`<div class=\"empty-state\" part=\"empty-state\">No balances</div>`\n\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t<div class=\"balance-list\" part=\"balance-list\">\n\t\t\t\t\t\t\t\t\t${this._balances.map(\n\t\t\t\t\t\t\t\t\t\t(balance) => html`\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"balance-item\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-symbol\">${balance.symbol}</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"balance-amount\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t>${formatCoinBalance(balance.totalBalance, balance.decimals)}</span\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`}\n\t\t`;\n\t}\n\n\tasync #fetchBalances() {\n\t\tthis.#lastFetchedAddress = this.address;\n\t\tthis.#lastFetchedClient = this.client;\n\t\tconst generation = ++this.#fetchGeneration;\n\t\tthis._loading = true;\n\t\tthis._error = null;\n\n\t\ttry {\n\t\t\tconst { balances } = await this.client!.core.listBalances({ owner: this.address });\n\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\n\t\t\tconst metadataResults = await Promise.all(\n\t\t\t\tbalances.map((b) =>\n\t\t\t\t\tthis.client!.core.getCoinMetadata({ coinType: b.coinType }).catch(() => null),\n\t\t\t\t),\n\t\t\t);\n\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\t\t\tthis._balances = balances.map(\n\t\t\t\t(b, i): CoinBalance => ({\n\t\t\t\t\tcoinType: b.coinType,\n\t\t\t\t\tsymbol: metadataResults[i]?.coinMetadata?.symbol ?? getCoinSymbol(b.coinType),\n\t\t\t\t\ttotalBalance: b.balance,\n\t\t\t\t\tdecimals: metadataResults[i]?.coinMetadata?.decimals ?? 0,\n\t\t\t\t}),\n\t\t\t);\n\t\t} catch {\n\t\t\tif (generation !== this.#fetchGeneration) return;\n\t\t\tthis._error = 'Failed to load balances';\n\t\t\tthis._balances = [];\n\t\t} finally {\n\t\t\tif (generation === this.#fetchGeneration) {\n\t\t\t\tthis._loading = false;\n\t\t\t}\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-balances': DevWalletBalances;\n\t}\n}\n"],"mappings":";;;;;;;AAkBO,8BAAMA,4BAA0B,WAAW;;;iBAyCvC;gBAGyB;mBAGA,EAAE;kBAGlB;gBAGa;;;gBApDP;GACxB;GACA;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCH;;CAiBD,sBAAsB;CACtB,qBAA+C;CAC/C,mBAAmB;;CAGnB,UAAU;AACT,MAAI,KAAK,WAAW,KAAK,QAAQ;AAChC,SAAKC,eAAgB;;;CAIvB,AAAS,WAAW,mBAAyC;AAC5D,OACE,kBAAkB,IAAI,UAAU,IAAI,kBAAkB,IAAI,SAAS,KACpE,KAAK,WACL,KAAK,WACJ,KAAK,YAAY,MAAKC,sBAAuB,KAAK,WAAW,MAAKC,oBAClE;AACD,SAAKF,eAAgB;;;CAIvB,AAAS,SAAS;AACjB,MAAI,CAAC,KAAK,WAAW,CAAC,KAAK,QAAQ;AAClC,UAAO;;AAGR,SAAO,IAAI;;KAER,KAAK,WACJ,IAAI,4EACJ,KAAK,SACJ,IAAI;SACF,KAAK,OAAO;gBAEd,KAAK,UAAU,WAAW,IACzB,IAAI,kEACJ,IAAI;;WAED,KAAK,UAAU,KACf,YAAY,IAAI;;2CAEgB,QAAQ,OAAO;;gBAE1C,kBAAkB,QAAQ,cAAc,QAAQ,SAAS,CAAC;;;YAIhE,CAAC;;SAEF;;;CAIR,OAAMA,gBAAiB;AACtB,QAAKC,qBAAsB,KAAK;AAChC,QAAKC,oBAAqB,KAAK;EAC/B,MAAM,aAAa,EAAE,MAAKC;AAC1B,OAAK,WAAW;AAChB,OAAK,SAAS;AAEd,MAAI;GACH,MAAM,EAAE,aAAa,MAAM,KAAK,OAAQ,KAAK,aAAa,EAAE,OAAO,KAAK,SAAS,CAAC;AAElF,OAAI,eAAe,MAAKA,gBAAkB;GAE1C,MAAM,kBAAkB,MAAM,QAAQ,IACrC,SAAS,KAAK,MACb,KAAK,OAAQ,KAAK,gBAAgB,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,YAAY,KAAK,CAC7E,CACD;AAED,OAAI,eAAe,MAAKA,gBAAkB;AAC1C,QAAK,YAAY,SAAS,KACxB,GAAG,OAAoB;IACvB,UAAU,EAAE;IACZ,QAAQ,gBAAgB,IAAI,cAAc,UAAU,cAAc,EAAE,SAAS;IAC7E,cAAc,EAAE;IAChB,UAAU,gBAAgB,IAAI,cAAc,YAAY;IACxD,EACD;UACM;AACP,OAAI,eAAe,MAAKA,gBAAkB;AAC1C,QAAK,SAAS;AACd,QAAK,YAAY,EAAE;YACV;AACT,OAAI,eAAe,MAAKA,iBAAkB;AACzC,SAAK,WAAW;;;;;YAtGlB,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,OAAO;YAGP,OAAO;YAGP,OAAO;gCArDR,cAAc,sBAAsB"}

package/dist/ui/dev-wallet-connect.d.mts

@@ -0,0 +1,31 @@
+import * as lit11 from "lit";
+import { LitElement } from "lit";
+
+//#region src/ui/dev-wallet-connect.d.ts
+interface AccountInfo {
+  address: string;
+  label?: string;
+  adapterName?: string;
+}
+declare class DevWalletConnect extends LitElement {
+  #private;
+  static styles: (lit11.CSSResult | lit11.CSSResult[])[];
+  appName: string;
+  appUrl: string;
+  accounts: AccountInfo[];
+  private _connecting;
+  private _error;
+  private _selectedAddresses;
+  willUpdate(changedProperties: Map<string, unknown>): void;
+  render(): lit11.TemplateResult<1>;
+  get selectedAddresses(): string[];
+  showError(message: string): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'dev-wallet-connect': DevWalletConnect;
+  }
+}
+//#endregion
+export { DevWalletConnect };
+//# sourceMappingURL=dev-wallet-connect.d.mts.map

package/dist/ui/dev-wallet-connect.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-connect.d.mts","names":[],"sources":["../../src/ui/dev-wallet-connect.ts"],"mappings":";;;;UASU,WAAA;EACT,OAAA;EACA,KAAA;EACA,WAAA;AAAA;AAAA,cAIY,gBAAA,SAAyB,UAAA;EAAA;SACrB,MAAA,GADa,KAAA,CACP,SAAA,GAAA,KAAA,CAAA,SAAA;EA4HtB,OAAA;EAGA,MAAA;EAGA,QAAA,EAAU,WAAA;EAAA,QAGF,WAAA;EAAA,QAGA,MAAA;EAAA,QAGA,kBAAA;EAEC,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAU9B,MAAA,CAAA,GAViC,KAAA,CAU3B,cAAA;EAAA,IA8DX,iBAAA,CAAA;EAkBJ,SAAA,CAAU,OAAA;AAAA;AAAA,QAMH,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,gBAAA;EAAA;AAAA"}

package/dist/ui/dev-wallet-connect.mjs

@@ -0,0 +1,225 @@
+import { actionButtonStyles, sharedStyles } from "./styles.mjs";
+import { emitEvent, formatAddress, toggleSetItem } from "./utils.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/ui/dev-wallet-connect.ts
+let DevWalletConnect = class DevWalletConnect$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.appName = "";
+		this.appUrl = "";
+		this.accounts = [];
+		this._connecting = false;
+		this._error = null;
+		this._selectedAddresses = new Set();
+	}
+	static {
+		this.styles = [
+			sharedStyles,
+			actionButtonStyles,
+			css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				min-height: 0;
+			}
+
+			.connect-content {
+				flex: 1;
+				padding: 16px;
+			}
+
+			.connect-header {
+				text-align: center;
+				margin-bottom: 12px;
+			}
+
+			.connect-title {
+				font-size: 14px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.connect-desc {
+				font-size: 12px;
+				color: var(--dev-wallet-muted-foreground);
+				margin-top: 4px;
+			}
+
+			.app-info {
+				margin-top: 8px;
+			}
+
+			.app-name {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-foreground);
+				display: block;
+			}
+
+			.app-url {
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+				word-break: break-all;
+			}
+
+			.account-list {
+				max-height: 240px;
+				overflow-y: auto;
+			}
+
+			.account-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				padding: 8px;
+				border-radius: var(--dev-wallet-radius-md);
+				cursor: pointer;
+			}
+
+			.account-item:hover {
+				background: var(--dev-wallet-secondary);
+			}
+
+			.account-item input[type='checkbox'] {
+				accent-color: var(--dev-wallet-primary);
+			}
+
+			.account-label {
+				font-size: 13px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.account-address {
+				font-size: 11px;
+				font-family: var(--dev-wallet-font-mono);
+				color: var(--dev-wallet-muted-foreground);
+			}
+
+			.account-adapter {
+				display: inline-block;
+				font-size: 9px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				text-transform: uppercase;
+				letter-spacing: 0.3px;
+				padding: 1px 5px;
+				border-radius: var(--dev-wallet-radius-2xs);
+				background: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);
+				color: var(--dev-wallet-primary);
+				margin-left: 6px;
+			}
+
+			.connect-footer {
+				padding: 12px 16px;
+				border-top: 1px solid var(--dev-wallet-border);
+			}
+
+			/* Override: connect uses --primary instead of --positive for approve */
+			.btn-approve {
+				background: var(--dev-wallet-primary);
+			}
+
+			.btn-approve:hover {
+				background: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);
+			}
+
+			.btn-approve:disabled {
+				cursor: default;
+			}
+
+			.error-message {
+				color: var(--dev-wallet-destructive);
+				font-size: 12px;
+				margin-top: 8px;
+				text-align: center;
+			}
+		`
+		];
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("accounts") && this.accounts.length > 0 && this._selectedAddresses.size === 0) {
+			this._selectedAddresses = new Set(this.accounts.map((a) => a.address));
+		}
+	}
+	render() {
+		return html`
+			<div class="connect-content">
+				<div class="connect-header">
+					<div class="connect-title">Connection Request</div>
+					<div class="connect-desc">Select accounts to share with the app</div>
+					${this.appName ? html`
+								<div class="app-info">
+									<span class="app-name">${this.appName}</span>
+									<span class="app-url">${this.appUrl}</span>
+								</div>
+							` : nothing}
+				</div>
+				${this.accounts.length > 0 ? html`
+							<div class="account-list" part="account-list">
+								${this.accounts.map((account) => html`
+										<label class="account-item">
+											<input
+												type="checkbox"
+												.checked=${this._selectedAddresses.has(account.address)}
+												@change=${() => this.#toggleAccount(account.address)}
+											/>
+											<div>
+												${account.label ? html`<div class="account-label">
+															${account.label}${account.adapterName ? html`<span class="account-adapter">${account.adapterName}</span>` : nothing}
+														</div>` : nothing}
+												<div class="account-address">${formatAddress(account.address)}</div>
+											</div>
+										</label>
+									`)}
+							</div>
+						` : nothing}
+			</div>
+			<div class="connect-footer">
+				<div class="actions">
+					<button class="btn btn-reject" part="reject-button" @click=${this.#reject}>Reject</button>
+					<button
+						class="btn btn-approve"
+						part="approve-button"
+						?disabled=${this._connecting || this._selectedAddresses.size === 0}
+						@click=${this.#approve}
+					>
+						${this._connecting ? "Connecting..." : `Connect (${this._selectedAddresses.size})`}
+					</button>
+				</div>
+				${this._error ? html`<p class="error-message" part="error-message">${this._error}</p>` : nothing}
+			</div>
+		`;
+	}
+	get selectedAddresses() {
+		return [...this._selectedAddresses];
+	}
+	#toggleAccount(address) {
+		this._selectedAddresses = toggleSetItem(this._selectedAddresses, address);
+	}
+	#approve() {
+		this._connecting = true;
+		this._error = null;
+		emitEvent(this, "approve", { selectedAddresses: this.selectedAddresses });
+	}
+	#reject() {
+		emitEvent(this, "reject");
+	}
+	showError(message) {
+		this._connecting = false;
+		this._error = message;
+	}
+};
+__decorate([property({ type: String })], DevWalletConnect.prototype, "appName", void 0);
+__decorate([property({ type: String })], DevWalletConnect.prototype, "appUrl", void 0);
+__decorate([property({ attribute: false })], DevWalletConnect.prototype, "accounts", void 0);
+__decorate([state()], DevWalletConnect.prototype, "_connecting", void 0);
+__decorate([state()], DevWalletConnect.prototype, "_error", void 0);
+__decorate([state()], DevWalletConnect.prototype, "_selectedAddresses", void 0);
+DevWalletConnect = __decorate([customElement("dev-wallet-connect")], DevWalletConnect);
+
+//#endregion
+export { DevWalletConnect };
+//# sourceMappingURL=dev-wallet-connect.mjs.map

package/dist/ui/dev-wallet-connect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-connect.mjs","names":["DevWalletConnect","#toggleAccount","#reject","#approve"],"sources":["../../src/ui/dev-wallet-connect.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { actionButtonStyles, sharedStyles } from './styles.js';\nimport { emitEvent, formatAddress, toggleSetItem } from './utils.js';\n\ninterface AccountInfo {\n\taddress: string;\n\tlabel?: string;\n\tadapterName?: string;\n}\n\n@customElement('dev-wallet-connect')\nexport class DevWalletConnect extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tactionButtonStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tmin-height: 0;\n\t\t\t}\n\n\t\t\t.connect-content {\n\t\t\t\tflex: 1;\n\t\t\t\tpadding: 16px;\n\t\t\t}\n\n\t\t\t.connect-header {\n\t\t\t\ttext-align: center;\n\t\t\t\tmargin-bottom: 12px;\n\t\t\t}\n\n\t\t\t.connect-title {\n\t\t\t\tfont-size: 14px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.connect-desc {\n\t\t\t\tfont-size: 12px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tmargin-top: 4px;\n\t\t\t}\n\n\t\t\t.app-info {\n\t\t\t\tmargin-top: 8px;\n\t\t\t}\n\n\t\t\t.app-name {\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.app-url {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\tword-break: break-all;\n\t\t\t}\n\n\t\t\t.account-list {\n\t\t\t\tmax-height: 240px;\n\t\t\t\toverflow-y: auto;\n\t\t\t}\n\n\t\t\t.account-item {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t\tpadding: 8px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-md);\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.account-item:hover {\n\t\t\t\tbackground: var(--dev-wallet-secondary);\n\t\t\t}\n\n\t\t\t.account-item input[type='checkbox'] {\n\t\t\t\taccent-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.account-label {\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.account-address {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-family: var(--dev-wallet-font-mono);\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.account-adapter {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tfont-size: 9px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tletter-spacing: 0.3px;\n\t\t\t\tpadding: 1px 5px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-2xs);\n\t\t\t\tbackground: color-mix(in oklab, var(--dev-wallet-primary) 15%, transparent);\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tmargin-left: 6px;\n\t\t\t}\n\n\t\t\t.connect-footer {\n\t\t\t\tpadding: 12px 16px;\n\t\t\t\tborder-top: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t/* Override: connect uses --primary instead of --positive for approve */\n\t\t\t.btn-approve {\n\t\t\t\tbackground: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.btn-approve:hover {\n\t\t\t\tbackground: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);\n\t\t\t}\n\n\t\t\t.btn-approve:disabled {\n\t\t\t\tcursor: default;\n\t\t\t}\n\n\t\t\t.error-message {\n\t\t\t\tcolor: var(--dev-wallet-destructive);\n\t\t\t\tfont-size: 12px;\n\t\t\t\tmargin-top: 8px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\tappName = '';\n\n\t@property({ type: String })\n\tappUrl = '';\n\n\t@property({ attribute: false })\n\taccounts: AccountInfo[] = [];\n\n\t@state()\n\tprivate _connecting = false;\n\n\t@state()\n\tprivate _error: string | null = null;\n\n\t@state()\n\tprivate _selectedAddresses: Set<string> = new Set();\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (\n\t\t\tchangedProperties.has('accounts') &&\n\t\t\tthis.accounts.length > 0 &&\n\t\t\tthis._selectedAddresses.size === 0\n\t\t) {\n\t\t\tthis._selectedAddresses = new Set(this.accounts.map((a) => a.address));\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"connect-content\">\n\t\t\t\t<div class=\"connect-header\">\n\t\t\t\t\t<div class=\"connect-title\">Connection Request</div>\n\t\t\t\t\t<div class=\"connect-desc\">Select accounts to share with the app</div>\n\t\t\t\t\t${this.appName\n\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t<div class=\"app-info\">\n\t\t\t\t\t\t\t\t\t<span class=\"app-name\">${this.appName}</span>\n\t\t\t\t\t\t\t\t\t<span class=\"app-url\">${this.appUrl}</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t: nothing}\n\t\t\t\t</div>\n\t\t\t\t${this.accounts.length > 0\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<div class=\"account-list\" part=\"account-list\">\n\t\t\t\t\t\t\t\t${this.accounts.map(\n\t\t\t\t\t\t\t\t\t(account) => html`\n\t\t\t\t\t\t\t\t\t\t<label class=\"account-item\">\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\t\t\t\t.checked=${this._selectedAddresses.has(account.address)}\n\t\t\t\t\t\t\t\t\t\t\t\t@change=${() => this.#toggleAccount(account.address)}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t${account.label\n\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<div class=\"account-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t${account.label}${account.adapterName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? html`<span class=\"account-adapter\">${account.adapterName}</span>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>`\n\t\t\t\t\t\t\t\t\t\t\t\t\t: nothing}\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"account-address\">${formatAddress(account.address)}</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t\t<div class=\"connect-footer\">\n\t\t\t\t<div class=\"actions\">\n\t\t\t\t\t<button class=\"btn btn-reject\" part=\"reject-button\" @click=${this.#reject}>Reject</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"btn btn-approve\"\n\t\t\t\t\t\tpart=\"approve-button\"\n\t\t\t\t\t\t?disabled=${this._connecting || this._selectedAddresses.size === 0}\n\t\t\t\t\t\t@click=${this.#approve}\n\t\t\t\t\t>\n\t\t\t\t\t\t${this._connecting ? 'Connecting...' : `Connect (${this._selectedAddresses.size})`}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t${this._error\n\t\t\t\t\t? html`<p class=\"error-message\" part=\"error-message\">${this._error}</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\tget selectedAddresses(): string[] {\n\t\treturn [...this._selectedAddresses];\n\t}\n\n\t#toggleAccount(address: string) {\n\t\tthis._selectedAddresses = toggleSetItem(this._selectedAddresses, address);\n\t}\n\n\t#approve() {\n\t\tthis._connecting = true;\n\t\tthis._error = null;\n\t\temitEvent(this, 'approve', { selectedAddresses: this.selectedAddresses });\n\t}\n\n\t#reject() {\n\t\temitEvent(this, 'reject');\n\t}\n\n\tshowError(message: string) {\n\t\tthis._connecting = false;\n\t\tthis._error = message;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-connect': DevWalletConnect;\n\t}\n}\n"],"mappings":";;;;;;;AAgBO,6BAAMA,2BAAyB,WAAW;;;iBA6HtC;gBAGD;kBAGiB,EAAE;qBAGN;gBAGU;4BAGU,IAAI,KAAK;;;gBA3I1B;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHH;;CAoBD,AAAS,WAAW,mBAAyC;AAC5D,MACC,kBAAkB,IAAI,WAAW,IACjC,KAAK,SAAS,SAAS,KACvB,KAAK,mBAAmB,SAAS,GAChC;AACD,QAAK,qBAAqB,IAAI,IAAI,KAAK,SAAS,KAAK,MAAM,EAAE,QAAQ,CAAC;;;CAIxE,AAAS,SAAS;AACjB,SAAO,IAAI;;;;;OAKN,KAAK,UACJ,IAAI;;kCAEsB,KAAK,QAAQ;iCACd,KAAK,OAAO;;WAGrC,QAAQ;;MAEV,KAAK,SAAS,SAAS,IACtB,IAAI;;UAED,KAAK,SAAS,KACd,YAAY,IAAI;;;;uBAIH,KAAK,mBAAmB,IAAI,QAAQ,QAAQ,CAAC;4BACxC,MAAKC,cAAe,QAAQ,QAAQ,CAAC;;;cAGnD,QAAQ,QACP,IAAI;iBACF,QAAQ,QAAQ,QAAQ,cACvB,IAAI,iCAAiC,QAAQ,YAAY,WACzD,QAAQ;wBAEX,QAAQ;2CACoB,cAAc,QAAQ,QAAQ,CAAC;;;WAIjE,CAAC;;UAGH,QAAQ;;;;kEAImD,MAAKC,OAAQ;;;;kBAI7D,KAAK,eAAe,KAAK,mBAAmB,SAAS,EAAE;eAC1D,MAAKC,QAAS;;QAErB,KAAK,cAAc,kBAAkB,YAAY,KAAK,mBAAmB,KAAK,GAAG;;;MAGnF,KAAK,SACJ,IAAI,iDAAiD,KAAK,OAAO,QACjE,QAAQ;;;;CAKd,IAAI,oBAA8B;AACjC,SAAO,CAAC,GAAG,KAAK,mBAAmB;;CAGpC,eAAe,SAAiB;AAC/B,OAAK,qBAAqB,cAAc,KAAK,oBAAoB,QAAQ;;CAG1E,WAAW;AACV,OAAK,cAAc;AACnB,OAAK,SAAS;AACd,YAAU,MAAM,WAAW,EAAE,mBAAmB,KAAK,mBAAmB,CAAC;;CAG1E,UAAU;AACT,YAAU,MAAM,SAAS;;CAG1B,UAAU,SAAiB;AAC1B,OAAK,cAAc;AACnB,OAAK,SAAS;;;YA9Gd,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,MAAM,QAAQ,CAAC;YAG1B,SAAS,EAAE,WAAW,OAAO,CAAC;YAG9B,OAAO;YAGP,OAAO;YAGP,OAAO;+BA5IR,cAAc,qBAAqB"}

package/dist/ui/dev-wallet-dropdown.d.mts

@@ -0,0 +1,27 @@
+import * as lit32 from "lit";
+import { LitElement } from "lit";
+
+//#region src/ui/dev-wallet-dropdown.d.ts
+/**
+ * @slot trigger - The element that opens the dropdown (parent handles click to toggle)
+ * @slot popover - The dropdown content
+ */
+declare class DevWalletDropdown extends LitElement {
+  #private;
+  static styles: (lit32.CSSResult | lit32.CSSResult[])[];
+  open: boolean;
+  fullWidth: boolean;
+  render(): lit32.TemplateResult<1>;
+  close(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  willUpdate(changed: Map<string, unknown>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'dev-wallet-dropdown': DevWalletDropdown;
+  }
+} //# sourceMappingURL=dev-wallet-dropdown.d.ts.map
+//#endregion
+export { DevWalletDropdown };
+//# sourceMappingURL=dev-wallet-dropdown.d.mts.map

package/dist/ui/dev-wallet-dropdown.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-dropdown.d.mts","names":[],"sources":["../../src/ui/dev-wallet-dropdown.ts"],"mappings":";;;;;;;AAaA;cACa,iBAAA,SAA0B,UAAA;EAAA;SACtB,MAAA,GADc,KAAA,CACR,SAAA,GAAA,KAAA,CAAA,SAAA;EAmCtB,IAAA;EAGA,SAAA;EAES,MAAA,CAAA,GAxCa,KAAA,CAwCP,cAAA;EAOf,KAAA,CAAA;EA8CS,iBAAA,CAAA;EAQA,oBAAA,CAAA;EAMA,UAAA,CAAW,OAAA,EAAS,GAAA;AAAA;AAAA,QAWtB,MAAA;EAAA,UACG,qBAAA;IACT,qBAAA,EAAuB,iBAAA;EAAA;AAAA"}

package/dist/ui/dev-wallet-dropdown.mjs

@@ -0,0 +1,121 @@
+import { sharedStyles } from "./styles.mjs";
+import { emitEvent } from "./utils.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/ui/dev-wallet-dropdown.ts
+let DevWalletDropdown = class DevWalletDropdown$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.fullWidth = false;
+	}
+	static {
+		this.styles = [sharedStyles, css`
+			:host {
+				position: relative;
+				display: inline-block;
+			}
+
+			:host([full-width]) {
+				display: block;
+			}
+
+			.popover {
+				position: absolute;
+				top: 100%;
+				left: 0;
+				margin-top: 4px;
+				min-width: 100%;
+				background: var(--dev-wallet-background);
+				border: 1px solid var(--dev-wallet-border);
+				border-radius: var(--dev-wallet-radius-md);
+				box-shadow: var(--dev-wallet-shadow-md);
+				z-index: 10;
+				overflow: hidden;
+				max-height: var(--dropdown-max-height, none);
+				overflow-y: auto;
+			}
+
+			:host([full-width]) .popover {
+				right: 0;
+			}
+		`];
+	}
+	render() {
+		return html`
+			<slot name="trigger"></slot>
+			${this.open ? html`<div class="popover"><slot name="popover"></slot></div>` : nothing}
+		`;
+	}
+	close() {
+		if (this.open) {
+			this.open = false;
+			emitEvent(this, "close");
+		}
+	}
+	#handleDocClick = (e) => {
+		if (this.open && !e.composedPath().includes(this)) {
+			this.close();
+		}
+	};
+	#handleKeydown = (e) => {
+		if (!this.open) return;
+		if (e.key === "Escape") {
+			e.preventDefault();
+			this.close();
+			const trigger = this.querySelector("[slot=\"trigger\"]");
+			trigger?.focus();
+			return;
+		}
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			const items = Array.from(this.querySelectorAll("[slot=\"popover\"] button, [slot=\"popover\"] [role=\"option\"]"));
+			if (items.length === 0) return;
+			const focused = items.find((el) => el === document.activeElement);
+			let index = focused ? items.indexOf(focused) : -1;
+			if (e.key === "ArrowDown") {
+				index = index < items.length - 1 ? index + 1 : 0;
+			} else {
+				index = index > 0 ? index - 1 : items.length - 1;
+			}
+			items[index]?.focus();
+		}
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("keydown", this.#handleKeydown);
+		if (this.open) {
+			document.addEventListener("click", this.#handleDocClick, true);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("click", this.#handleDocClick, true);
+		this.removeEventListener("keydown", this.#handleKeydown);
+	}
+	willUpdate(changed) {
+		if (changed.has("open")) {
+			if (this.open) {
+				document.addEventListener("click", this.#handleDocClick, true);
+			} else {
+				document.removeEventListener("click", this.#handleDocClick, true);
+			}
+		}
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DevWalletDropdown.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "full-width"
+})], DevWalletDropdown.prototype, "fullWidth", void 0);
+DevWalletDropdown = __decorate([customElement("dev-wallet-dropdown")], DevWalletDropdown);
+
+//#endregion
+export { DevWalletDropdown };
+//# sourceMappingURL=dev-wallet-dropdown.mjs.map

package/dist/ui/dev-wallet-dropdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-dropdown.mjs","names":["DevWalletDropdown","#handleKeydown","#handleDocClick"],"sources":["../../src/ui/dev-wallet-dropdown.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { sharedStyles } from './styles.js';\nimport { emitEvent } from './utils.js';\n\n/**\n * @slot trigger - The element that opens the dropdown (parent handles click to toggle)\n * @slot popover - The dropdown content\n */\n@customElement('dev-wallet-dropdown')\nexport class DevWalletDropdown extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\n\t\t\t:host([full-width]) {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\n\t\t\t.popover {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 100%;\n\t\t\t\tleft: 0;\n\t\t\t\tmargin-top: 4px;\n\t\t\t\tmin-width: 100%;\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tborder-radius: var(--dev-wallet-radius-md);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-md);\n\t\t\t\tz-index: 10;\n\t\t\t\toverflow: hidden;\n\t\t\t\tmax-height: var(--dropdown-max-height, none);\n\t\t\t\toverflow-y: auto;\n\t\t\t}\n\n\t\t\t:host([full-width]) .popover {\n\t\t\t\tright: 0;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: Boolean, reflect: true })\n\topen = false;\n\n\t@property({ type: Boolean, reflect: true, attribute: 'full-width' })\n\tfullWidth = false;\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<slot name=\"trigger\"></slot>\n\t\t\t${this.open ? html`<div class=\"popover\"><slot name=\"popover\"></slot></div>` : nothing}\n\t\t`;\n\t}\n\n\tclose() {\n\t\tif (this.open) {\n\t\t\tthis.open = false;\n\t\t\temitEvent(this, 'close');\n\t\t}\n\t}\n\n\t#handleDocClick = (e: Event) => {\n\t\tif (this.open && !e.composedPath().includes(this)) {\n\t\t\tthis.close();\n\t\t}\n\t};\n\n\t#handleKeydown = (e: KeyboardEvent) => {\n\t\tif (!this.open) return;\n\n\t\tif (e.key === 'Escape') {\n\t\t\te.preventDefault();\n\t\t\tthis.close();\n\t\t\tconst trigger = this.querySelector('[slot=\"trigger\"]') as HTMLElement | null;\n\t\t\ttrigger?.focus();\n\t\t\treturn;\n\t\t}\n\n\t\tif (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n\t\t\te.preventDefault();\n\t\t\tconst items = Array.from(\n\t\t\t\tthis.querySelectorAll<HTMLElement>(\n\t\t\t\t\t'[slot=\"popover\"] button, [slot=\"popover\"] [role=\"option\"]',\n\t\t\t\t),\n\t\t\t);\n\t\t\tif (items.length === 0) return;\n\n\t\t\tconst focused = items.find((el) => el === document.activeElement);\n\t\t\tlet index = focused ? items.indexOf(focused) : -1;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\tindex = index < items.length - 1 ? index + 1 : 0;\n\t\t\t} else {\n\t\t\t\tindex = index > 0 ? index - 1 : items.length - 1;\n\t\t\t}\n\n\t\t\titems[index]?.focus();\n\t\t}\n\t};\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.addEventListener('keydown', this.#handleKeydown);\n\t\tif (this.open) {\n\t\t\tdocument.addEventListener('click', this.#handleDocClick, true);\n\t\t}\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tdocument.removeEventListener('click', this.#handleDocClick, true);\n\t\tthis.removeEventListener('keydown', this.#handleKeydown);\n\t}\n\n\toverride willUpdate(changed: Map<string, unknown>) {\n\t\tif (changed.has('open')) {\n\t\t\tif (this.open) {\n\t\t\t\tdocument.addEventListener('click', this.#handleDocClick, true);\n\t\t\t} else {\n\t\t\t\tdocument.removeEventListener('click', this.#handleDocClick, true);\n\t\t\t}\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-dropdown': DevWalletDropdown;\n\t}\n}\n"],"mappings":";;;;;;;AAcO,8BAAMA,4BAA0B,WAAW;;;cAoC1C;mBAGK;;;gBAtCa,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8BH;;CAQD,AAAS,SAAS;AACjB,SAAO,IAAI;;KAER,KAAK,OAAO,IAAI,4DAA4D,QAAQ;;;CAIxF,QAAQ;AACP,MAAI,KAAK,MAAM;AACd,QAAK,OAAO;AACZ,aAAU,MAAM,QAAQ;;;CAI1B,mBAAmB,MAAa;AAC/B,MAAI,KAAK,QAAQ,CAAC,EAAE,cAAc,CAAC,SAAS,KAAK,EAAE;AAClD,QAAK,OAAO;;;CAId,kBAAkB,MAAqB;AACtC,MAAI,CAAC,KAAK,KAAM;AAEhB,MAAI,EAAE,QAAQ,UAAU;AACvB,KAAE,gBAAgB;AAClB,QAAK,OAAO;GACZ,MAAM,UAAU,KAAK,cAAc,qBAAmB;AACtD,YAAS,OAAO;AAChB;;AAGD,MAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AACjD,KAAE,gBAAgB;GAClB,MAAM,QAAQ,MAAM,KACnB,KAAK,iBACJ,kEACA,CACD;AACD,OAAI,MAAM,WAAW,EAAG;GAExB,MAAM,UAAU,MAAM,MAAM,OAAO,OAAO,SAAS,cAAc;GACjE,IAAI,QAAQ,UAAU,MAAM,QAAQ,QAAQ,GAAG,CAAC;AAEhD,OAAI,EAAE,QAAQ,aAAa;AAC1B,YAAQ,QAAQ,MAAM,SAAS,IAAI,QAAQ,IAAI;UACzC;AACN,YAAQ,QAAQ,IAAI,QAAQ,IAAI,MAAM,SAAS;;AAGhD,SAAM,QAAQ,OAAO;;;CAIvB,AAAS,oBAAoB;AAC5B,QAAM,mBAAmB;AACzB,OAAK,iBAAiB,WAAW,MAAKC,cAAe;AACrD,MAAI,KAAK,MAAM;AACd,YAAS,iBAAiB,SAAS,MAAKC,gBAAiB,KAAK;;;CAIhE,AAAS,uBAAuB;AAC/B,QAAM,sBAAsB;AAC5B,WAAS,oBAAoB,SAAS,MAAKA,gBAAiB,KAAK;AACjE,OAAK,oBAAoB,WAAW,MAAKD,cAAe;;CAGzD,AAAS,WAAW,SAA+B;AAClD,MAAI,QAAQ,IAAI,OAAO,EAAE;AACxB,OAAI,KAAK,MAAM;AACd,aAAS,iBAAiB,SAAS,MAAKC,gBAAiB,KAAK;UACxD;AACN,aAAS,oBAAoB,SAAS,MAAKA,gBAAiB,KAAK;;;;;YA9EnE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC;gCAvCpE,cAAc,sBAAsB"}

package/dist/ui/dev-wallet-network-badge.d.mts

@@ -0,0 +1,21 @@
+import "./dev-wallet-dropdown.mjs";
+import * as lit35 from "lit";
+import { LitElement } from "lit";
+
+//#region src/ui/dev-wallet-network-badge.d.ts
+declare class DevWalletNetworkBadge extends LitElement {
+  #private;
+  static styles: (lit35.CSSResult | lit35.CSSResult[])[];
+  active: string;
+  networks: string[];
+  private _open;
+  render(): lit35.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'dev-wallet-network-badge': DevWalletNetworkBadge;
+  }
+} //# sourceMappingURL=dev-wallet-network-badge.d.ts.map
+//#endregion
+export { DevWalletNetworkBadge };
+//# sourceMappingURL=dev-wallet-network-badge.d.mts.map

package/dist/ui/dev-wallet-network-badge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-network-badge.d.mts","names":[],"sources":["../../src/ui/dev-wallet-network-badge.ts"],"mappings":";;;;;cAWa,qBAAA,SAA8B,UAAA;EAAA;SAC1B,MAAA,GADkB,KAAA,CACZ,SAAA,GAAA,KAAA,CAAA,SAAA;EA6CtB,MAAA;EAGA,QAAA;EAAA,QAGQ,KAAA;EAEC,MAAA,CAAA,GArDa,KAAA,CAqDP,cAAA;AAAA;AAAA,QA0DR,MAAA;EAAA,UACG,qBAAA;IACT,0BAAA,EAA4B,qBAAA;EAAA;AAAA"}