@mysten-incubation/dev-wallet 0.0.0

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

@@ -0,0 +1,129 @@
+import { connectDialogStyles, sharedStyles } from "./styles.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { WalletController } from "./wallet-controller.mjs";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/ui/dev-wallet-standalone.ts
+let DevWalletStandalone = class DevWalletStandalone$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.wallet = null;
+		this.bookmarkletOrigin = "";
+	}
+	static {
+		this.styles = [
+			sharedStyles,
+			connectDialogStyles,
+			css`
+			:host {
+				display: flex;
+				justify-content: center;
+				padding: 24px 16px;
+				min-height: 100vh;
+				box-sizing: border-box;
+			}
+
+			.card {
+				width: 100%;
+				max-width: 480px;
+				border-radius: var(--dev-wallet-radius-xl);
+				background: var(--dev-wallet-background);
+				border: 1px solid var(--dev-wallet-border);
+				box-shadow: var(--dev-wallet-shadow-lg);
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				height: min(640px, calc(100vh - 48px));
+			}
+
+			.card-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 16px 20px;
+				border-bottom: 1px solid var(--dev-wallet-border);
+			}
+
+			.card-title {
+				font-size: 17px;
+				font-weight: var(--dev-wallet-font-weight-semibold);
+				color: var(--dev-wallet-foreground);
+			}
+
+			.header-right {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			.status-dot {
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				background: var(--dev-wallet-status-connected);
+			}
+
+			.status-text {
+				font-size: 11px;
+				color: var(--dev-wallet-muted-foreground);
+			}
+
+			.card-body {
+				padding: 16px 20px;
+				overflow-y: auto;
+				flex: 1;
+			}
+
+			.section {
+				margin-bottom: 16px;
+			}
+
+			.section:last-child {
+				margin-bottom: 0;
+			}
+		`
+		];
+	}
+	#ctrl = new WalletController(this);
+	willUpdate(changedProperties) {
+		if (changedProperties.has("wallet")) {
+			this.#ctrl.wallet = this.wallet;
+		}
+		if (changedProperties.has("bookmarkletOrigin")) {
+			this.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;
+		}
+	}
+	updated() {
+		const dialog = this.shadowRoot?.querySelector(".connect-dialog");
+		if (this.#ctrl.pendingConnect && dialog && !dialog.open) {
+			dialog.showModal();
+		} else if (!this.#ctrl.pendingConnect && dialog?.open) {
+			dialog.close();
+		}
+	}
+	render() {
+		return html`
+			<div class="card" part="card">
+				<div class="card-header">
+					<span class="card-title">${this.wallet?.name ?? "Dev Wallet"}</span>
+					<div class="header-right">
+						${this.#ctrl.renderNetworkBadge()}
+						<span class="status-dot"></span>
+						<span class="status-text">Running</span>
+					</div>
+				</div>
+				<div class="card-body">${this.#ctrl.renderTabContent()}</div>
+				${this.#ctrl.renderTabBar()}
+			</div>
+			${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}
+		`;
+	}
+};
+__decorate([property({ attribute: false })], DevWalletStandalone.prototype, "wallet", void 0);
+__decorate([property({ type: String })], DevWalletStandalone.prototype, "bookmarkletOrigin", void 0);
+DevWalletStandalone = __decorate([customElement("dev-wallet-standalone")], DevWalletStandalone);
+
+//#endregion
+export { DevWalletStandalone };
+//# sourceMappingURL=dev-wallet-standalone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-standalone.mjs","names":["DevWalletStandalone","#ctrl"],"sources":["../../src/ui/dev-wallet-standalone.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport { connectDialogStyles, sharedStyles } from './styles.js';\nimport { WalletController } from './wallet-controller.js';\n\n@customElement('dev-wallet-standalone')\nexport class DevWalletStandalone extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tconnectDialogStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\tpadding: 24px 16px;\n\t\t\t\tmin-height: 100vh;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\n\t\t\t.card {\n\t\t\t\twidth: 100%;\n\t\t\t\tmax-width: 480px;\n\t\t\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\t\t\tbackground: var(--dev-wallet-background);\n\t\t\t\tborder: 1px solid var(--dev-wallet-border);\n\t\t\t\tbox-shadow: var(--dev-wallet-shadow-lg);\n\t\t\t\toverflow: hidden;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\theight: min(640px, calc(100vh - 48px));\n\t\t\t}\n\n\t\t\t.card-header {\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: 16px 20px;\n\t\t\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.card-title {\n\t\t\t\tfont-size: 17px;\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.header-right {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\n\t\t\t.status-dot {\n\t\t\t\twidth: 8px;\n\t\t\t\theight: 8px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbackground: var(--dev-wallet-status-connected);\n\t\t\t}\n\n\t\t\t.status-text {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t}\n\n\t\t\t.card-body {\n\t\t\t\tpadding: 16px 20px;\n\t\t\t\toverflow-y: auto;\n\t\t\t\tflex: 1;\n\t\t\t}\n\n\t\t\t.section {\n\t\t\t\tmargin-bottom: 16px;\n\t\t\t}\n\n\t\t\t.section:last-child {\n\t\t\t\tmargin-bottom: 0;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ attribute: false })\n\twallet: DevWallet | null = null;\n\n\t/** When set, the settings tab shows a bookmarklet section pointing to this origin. */\n\t@property({ type: String })\n\tbookmarkletOrigin = '';\n\n\t#ctrl = new WalletController(this);\n\n\toverride willUpdate(changedProperties: Map<string, unknown>) {\n\t\tif (changedProperties.has('wallet')) {\n\t\t\tthis.#ctrl.wallet = this.wallet;\n\t\t}\n\t\tif (changedProperties.has('bookmarkletOrigin')) {\n\t\t\tthis.#ctrl.bookmarkletOrigin = this.bookmarkletOrigin;\n\t\t}\n\t}\n\n\toverride updated() {\n\t\tconst dialog = this.shadowRoot?.querySelector<HTMLDialogElement>('.connect-dialog');\n\t\tif (this.#ctrl.pendingConnect && dialog && !dialog.open) {\n\t\t\tdialog.showModal();\n\t\t} else if (!this.#ctrl.pendingConnect && dialog?.open) {\n\t\t\tdialog.close();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"card\" part=\"card\">\n\t\t\t\t<div class=\"card-header\">\n\t\t\t\t\t<span class=\"card-title\">${this.wallet?.name ?? 'Dev Wallet'}</span>\n\t\t\t\t\t<div class=\"header-right\">\n\t\t\t\t\t\t${this.#ctrl.renderNetworkBadge()}\n\t\t\t\t\t\t<span class=\"status-dot\"></span>\n\t\t\t\t\t\t<span class=\"status-text\">Running</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"card-body\">${this.#ctrl.renderTabContent()}</div>\n\t\t\t\t${this.#ctrl.renderTabBar()}\n\t\t\t</div>\n\t\t\t${this.#ctrl.renderSigningModal()} ${this.#ctrl.renderConnectPicker()}\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-standalone': DevWalletStandalone;\n\t}\n}\n"],"mappings":";;;;;;;AAWO,gCAAMA,8BAA4B,WAAW;;;gBA2ExB;2BAIP;;;gBA9EK;GACxB;GACA;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEH;;CASD,QAAQ,IAAI,iBAAiB,KAAK;CAElC,AAAS,WAAW,mBAAyC;AAC5D,MAAI,kBAAkB,IAAI,SAAS,EAAE;AACpC,SAAKC,KAAM,SAAS,KAAK;;AAE1B,MAAI,kBAAkB,IAAI,oBAAoB,EAAE;AAC/C,SAAKA,KAAM,oBAAoB,KAAK;;;CAItC,AAAS,UAAU;EAClB,MAAM,SAAS,KAAK,YAAY,cAAiC,kBAAkB;AACnF,MAAI,MAAKA,KAAM,kBAAkB,UAAU,CAAC,OAAO,MAAM;AACxD,UAAO,WAAW;aACR,CAAC,MAAKA,KAAM,kBAAkB,QAAQ,MAAM;AACtD,UAAO,OAAO;;;CAIhB,AAAS,SAAS;AACjB,SAAO,IAAI;;;gCAGmB,KAAK,QAAQ,QAAQ,aAAa;;QAE1D,MAAKA,KAAM,oBAAoB,CAAC;;;;;6BAKX,MAAKA,KAAM,kBAAkB,CAAC;MACrD,MAAKA,KAAM,cAAc,CAAC;;KAE3B,MAAKA,KAAM,oBAAoB,CAAC,GAAG,MAAKA,KAAM,qBAAqB,CAAC;;;;YAzCvE,SAAS,EAAE,WAAW,OAAO,CAAC;YAI9B,SAAS,EAAE,MAAM,QAAQ,CAAC;kCA/E3B,cAAc,wBAAwB"}

package/dist/ui/dev-wallet-tab-bar.d.mts

@@ -0,0 +1,19 @@
+import * as lit29 from "lit";
+import { LitElement } from "lit";
+
+//#region src/ui/dev-wallet-tab-bar.d.ts
+type TabId = 'assets' | 'objects' | 'settings';
+declare class DevWalletTabBar extends LitElement {
+  #private;
+  static styles: (lit29.CSSResult | lit29.CSSResult[])[];
+  active: TabId;
+  render(): lit29.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'dev-wallet-tab-bar': DevWalletTabBar;
+  }
+} //# sourceMappingURL=dev-wallet-tab-bar.d.ts.map
+//#endregion
+export { DevWalletTabBar };
+//# sourceMappingURL=dev-wallet-tab-bar.d.mts.map

package/dist/ui/dev-wallet-tab-bar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-tab-bar.d.mts","names":[],"sources":["../../src/ui/dev-wallet-tab-bar.ts"],"mappings":";;;;KAQY,KAAA;AAAA,cAGC,eAAA,SAAwB,UAAA;EAAA;SACpB,MAAA,GADY,KAAA,CACN,SAAA,GAAA,KAAA,CAAA,SAAA;EA2CtB,MAAA,EAAQ,KAAA;EAEC,MAAA,CAAA,GAFI,KAAA,CAEE,cAAA;AAAA;AAAA,QAyFR,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,eAAA;EAAA;AAAA"}

package/dist/ui/dev-wallet-tab-bar.mjs

@@ -0,0 +1,143 @@
+import { sharedStyles } from "./styles.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+//#region src/ui/dev-wallet-tab-bar.ts
+let DevWalletTabBar = class DevWalletTabBar$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.active = "assets";
+	}
+	static {
+		this.styles = [sharedStyles, css`
+			:host {
+				display: block;
+				border-top: 1px solid var(--dev-wallet-border);
+			}
+
+			.tab-bar {
+				display: flex;
+				height: 40px;
+			}
+
+			.tab {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 4px;
+				font-size: 11px;
+				font-weight: var(--dev-wallet-font-weight-medium);
+				color: var(--dev-wallet-muted-foreground);
+				transition: color 0.15s;
+				border-top: 2px solid transparent;
+			}
+
+			.tab:hover {
+				color: var(--dev-wallet-foreground);
+			}
+
+			.tab[aria-selected='true'] {
+				color: var(--dev-wallet-primary);
+				border-top-color: var(--dev-wallet-primary);
+			}
+
+			.tab svg {
+				width: 16px;
+				height: 16px;
+			}
+		`];
+	}
+	render() {
+		return html`
+			<nav class="tab-bar" part="tab-bar" role="tablist" aria-label="Wallet navigation">
+				<button
+					class="tab"
+					part="tab"
+					role="tab"
+					aria-selected=${this.active === "assets"}
+					tabindex=${this.active === "assets" ? 0 : -1}
+					@click=${() => this.#select("assets")}
+					@keydown=${this.#handleKeydown}
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<rect x="2" y="4" width="20" height="16" rx="2" />
+						<path d="M16 12h.01" />
+					</svg>
+					Assets
+				</button>
+				<button
+					class="tab"
+					part="tab"
+					role="tab"
+					aria-selected=${this.active === "objects"}
+					tabindex=${this.active === "objects" ? 0 : -1}
+					@click=${() => this.#select("objects")}
+					@keydown=${this.#handleKeydown}
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<rect x="3" y="3" width="7" height="7" rx="1" />
+						<rect x="14" y="3" width="7" height="7" rx="1" />
+						<rect x="3" y="14" width="7" height="7" rx="1" />
+						<rect x="14" y="14" width="7" height="7" rx="1" />
+					</svg>
+					Objects
+				</button>
+				<button
+					class="tab"
+					part="tab"
+					role="tab"
+					aria-selected=${this.active === "settings"}
+					tabindex=${this.active === "settings" ? 0 : -1}
+					@click=${() => this.#select("settings")}
+					@keydown=${this.#handleKeydown}
+				>
+					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+						<circle cx="12" cy="12" r="3" />
+						<path
+							d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+						/>
+					</svg>
+					Settings
+				</button>
+			</nav>
+		`;
+	}
+	#handleKeydown(e) {
+		const tabs = [
+			"assets",
+			"objects",
+			"settings"
+		];
+		const currentIndex = tabs.indexOf(this.active);
+		let newIndex = -1;
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			newIndex = (currentIndex + 1) % tabs.length;
+		} else if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+		}
+		if (newIndex !== -1) {
+			this.#select(tabs[newIndex]);
+			const buttons = this.shadowRoot?.querySelectorAll(".tab");
+			buttons?.[newIndex]?.focus();
+		}
+	}
+	#select(tab) {
+		if (tab !== this.active) {
+			this.dispatchEvent(new CustomEvent("tab-changed", {
+				bubbles: true,
+				composed: true,
+				detail: { tab }
+			}));
+		}
+	}
+};
+__decorate([property({ type: String })], DevWalletTabBar.prototype, "active", void 0);
+DevWalletTabBar = __decorate([customElement("dev-wallet-tab-bar")], DevWalletTabBar);
+
+//#endregion
+export { DevWalletTabBar };
+//# sourceMappingURL=dev-wallet-tab-bar.mjs.map

package/dist/ui/dev-wallet-tab-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-wallet-tab-bar.mjs","names":["DevWalletTabBar","#select","#handleKeydown"],"sources":["../../src/ui/dev-wallet-tab-bar.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { sharedStyles } from './styles.js';\n\nexport type TabId = 'assets' | 'objects' | 'settings';\n\n@customElement('dev-wallet-tab-bar')\nexport class DevWalletTabBar extends LitElement {\n\tstatic override styles = [\n\t\tsharedStyles,\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tborder-top: 1px solid var(--dev-wallet-border);\n\t\t\t}\n\n\t\t\t.tab-bar {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: 40px;\n\t\t\t}\n\n\t\t\t.tab {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tgap: 4px;\n\t\t\t\tfont-size: 11px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\t\t\ttransition: color 0.15s;\n\t\t\t\tborder-top: 2px solid transparent;\n\t\t\t}\n\n\t\t\t.tab:hover {\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t}\n\n\t\t\t.tab[aria-selected='true'] {\n\t\t\t\tcolor: var(--dev-wallet-primary);\n\t\t\t\tborder-top-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.tab svg {\n\t\t\t\twidth: 16px;\n\t\t\t\theight: 16px;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\tactive: TabId = 'assets';\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<nav class=\"tab-bar\" part=\"tab-bar\" role=\"tablist\" aria-label=\"Wallet navigation\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"tab\"\n\t\t\t\t\tpart=\"tab\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\taria-selected=${this.active === 'assets'}\n\t\t\t\t\ttabindex=${this.active === 'assets' ? 0 : -1}\n\t\t\t\t\t@click=${() => this.#select('assets')}\n\t\t\t\t\t@keydown=${this.#handleKeydown}\n\t\t\t\t>\n\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n\t\t\t\t\t\t<rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" />\n\t\t\t\t\t\t<path d=\"M16 12h.01\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tAssets\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"tab\"\n\t\t\t\t\tpart=\"tab\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\taria-selected=${this.active === 'objects'}\n\t\t\t\t\ttabindex=${this.active === 'objects' ? 0 : -1}\n\t\t\t\t\t@click=${() => this.#select('objects')}\n\t\t\t\t\t@keydown=${this.#handleKeydown}\n\t\t\t\t>\n\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n\t\t\t\t\t\t<rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n\t\t\t\t\t\t<rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n\t\t\t\t\t\t<rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n\t\t\t\t\t\t<rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\tObjects\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"tab\"\n\t\t\t\t\tpart=\"tab\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t\taria-selected=${this.active === 'settings'}\n\t\t\t\t\ttabindex=${this.active === 'settings' ? 0 : -1}\n\t\t\t\t\t@click=${() => this.#select('settings')}\n\t\t\t\t\t@keydown=${this.#handleKeydown}\n\t\t\t\t>\n\t\t\t\t\t<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"3\" />\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\t\t\t\t\tSettings\n\t\t\t\t</button>\n\t\t\t</nav>\n\t\t`;\n\t}\n\n\t#handleKeydown(e: KeyboardEvent) {\n\t\tconst tabs: TabId[] = ['assets', 'objects', 'settings'];\n\t\tconst currentIndex = tabs.indexOf(this.active);\n\t\tlet newIndex = -1;\n\n\t\tif (e.key === 'ArrowRight') {\n\t\t\te.preventDefault();\n\t\t\tnewIndex = (currentIndex + 1) % tabs.length;\n\t\t} else if (e.key === 'ArrowLeft') {\n\t\t\te.preventDefault();\n\t\t\tnewIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n\t\t}\n\n\t\tif (newIndex !== -1) {\n\t\t\tthis.#select(tabs[newIndex]);\n\t\t\tconst buttons = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.tab');\n\t\t\tbuttons?.[newIndex]?.focus();\n\t\t}\n\t}\n\n\t#select(tab: TabId) {\n\t\tif (tab !== this.active) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('tab-changed', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t\tdetail: { tab },\n\t\t\t\t}),\n\t\t\t);\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'dev-wallet-tab-bar': DevWalletTabBar;\n\t}\n}\n"],"mappings":";;;;;;AAWO,4BAAMA,0BAAwB,WAAW;;;gBA4C/B;;;gBA3CS,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCH;;CAKD,AAAS,SAAS;AACjB,SAAO,IAAI;;;;;;qBAMQ,KAAK,WAAW,SAAS;gBAC9B,KAAK,WAAW,WAAW,IAAI,CAAC,EAAE;oBAC9B,MAAKC,OAAQ,SAAS,CAAC;gBAC3B,MAAKC,cAAe;;;;;;;;;;;;qBAYf,KAAK,WAAW,UAAU;gBAC/B,KAAK,WAAW,YAAY,IAAI,CAAC,EAAE;oBAC/B,MAAKD,OAAQ,UAAU,CAAC;gBAC5B,MAAKC,cAAe;;;;;;;;;;;;;;qBAcf,KAAK,WAAW,WAAW;gBAChC,KAAK,WAAW,aAAa,IAAI,CAAC,EAAE;oBAChC,MAAKD,OAAQ,WAAW,CAAC;gBAC7B,MAAKC,cAAe;;;;;;;;;;;;;CAcnC,eAAe,GAAkB;EAChC,MAAM,OAAgB;GAAC;GAAU;GAAW;GAAW;EACvD,MAAM,eAAe,KAAK,QAAQ,KAAK,OAAO;EAC9C,IAAI,WAAW,CAAC;AAEhB,MAAI,EAAE,QAAQ,cAAc;AAC3B,KAAE,gBAAgB;AAClB,eAAY,eAAe,KAAK,KAAK;aAC3B,EAAE,QAAQ,aAAa;AACjC,KAAE,gBAAgB;AAClB,eAAY,eAAe,IAAI,KAAK,UAAU,KAAK;;AAGpD,MAAI,aAAa,CAAC,GAAG;AACpB,SAAKD,OAAQ,KAAK,UAAU;GAC5B,MAAM,UAAU,KAAK,YAAY,iBAAoC,OAAO;AAC5E,aAAU,WAAW,OAAO;;;CAI9B,QAAQ,KAAY;AACnB,MAAI,QAAQ,KAAK,QAAQ;AACxB,QAAK,cACJ,IAAI,YAAY,eAAe;IAC9B,SAAS;IACT,UAAU;IACV,QAAQ,EAAE,KAAK;IACf,CAAC,CACF;;;;YAvFF,SAAS,EAAE,MAAM,QAAQ,CAAC;8BA5C3B,cAAc,qBAAqB"}

package/dist/ui/index.d.mts

@@ -0,0 +1,17 @@
+import { DevWalletDropdown } from "./dev-wallet-dropdown.mjs";
+import { DevWalletNewAccount } from "./dev-wallet-new-account.mjs";
+import { DevWalletAccounts } from "./dev-wallet-accounts.mjs";
+import { DevWalletBalances } from "./dev-wallet-balances.mjs";
+import { DevWalletPanel } from "./dev-wallet-panel.mjs";
+import { DevWalletSigning } from "./dev-wallet-signing.mjs";
+import { DevWalletConnect } from "./dev-wallet-connect.mjs";
+import { DevWalletObjects } from "./dev-wallet-objects.mjs";
+import { DevWalletPopup } from "./dev-wallet-popup.mjs";
+import { DevWalletSettings } from "./dev-wallet-settings.mjs";
+import { DevWalletStandalone } from "./dev-wallet-standalone.mjs";
+import { DevWalletSigningModal } from "./dev-wallet-signing-modal.mjs";
+import { DevWalletAccountSelector } from "./dev-wallet-account-selector.mjs";
+import { DevWalletNetworkBadge } from "./dev-wallet-network-badge.mjs";
+import { DevWalletTabBar } from "./dev-wallet-tab-bar.mjs";
+import { mountDevWallet } from "./mount.mjs";
+export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };

package/dist/ui/index.mjs

@@ -0,0 +1,18 @@
+import { DevWalletDropdown } from "./dev-wallet-dropdown.mjs";
+import { DevWalletAccountSelector } from "./dev-wallet-account-selector.mjs";
+import { DevWalletBalances } from "./dev-wallet-balances.mjs";
+import { DevWalletConnect } from "./dev-wallet-connect.mjs";
+import { DevWalletNetworkBadge } from "./dev-wallet-network-badge.mjs";
+import { DevWalletObjects } from "./dev-wallet-objects.mjs";
+import { DevWalletNewAccount } from "./dev-wallet-new-account.mjs";
+import { DevWalletAccounts } from "./dev-wallet-accounts.mjs";
+import { DevWalletSettings } from "./dev-wallet-settings.mjs";
+import { DevWalletSigning } from "./dev-wallet-signing.mjs";
+import { DevWalletSigningModal } from "./dev-wallet-signing-modal.mjs";
+import { DevWalletTabBar } from "./dev-wallet-tab-bar.mjs";
+import { DevWalletPanel } from "./dev-wallet-panel.mjs";
+import { DevWalletPopup } from "./dev-wallet-popup.mjs";
+import { DevWalletStandalone } from "./dev-wallet-standalone.mjs";
+import { mountDevWallet } from "./mount.mjs";
+
+export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };

package/dist/ui/mount.d.mts

@@ -0,0 +1,11 @@
+import { DevWallet } from "../wallet/dev-wallet.mjs";
+import "./dev-wallet-panel.mjs";
+
+//#region src/ui/mount.d.ts
+/** @returns A cleanup function that removes the panel from the DOM. */
+declare function mountDevWallet(wallet: DevWallet, options?: {
+  container?: HTMLElement;
+}): () => void;
+//#endregion
+export { mountDevWallet };
+//# sourceMappingURL=mount.d.mts.map

package/dist/ui/mount.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.d.mts","names":[],"sources":["../../src/ui/mount.ts"],"mappings":";;;;;iBAOgB,cAAA,CACf,MAAA,EAAQ,SAAA,EACR,OAAA;EAAY,SAAA,GAAY,WAAA;AAAA"}

package/dist/ui/mount.mjs

@@ -0,0 +1,17 @@
+import "./dev-wallet-panel.mjs";
+
+//#region src/ui/mount.ts
+/** @returns A cleanup function that removes the panel from the DOM. */
+function mountDevWallet(wallet, options) {
+	const container = options?.container ?? document.body;
+	const panel = document.createElement("dev-wallet-panel");
+	panel.wallet = wallet;
+	container.appendChild(panel);
+	return () => {
+		panel.remove();
+	};
+}
+
+//#endregion
+export { mountDevWallet };
+//# sourceMappingURL=mount.mjs.map

package/dist/ui/mount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mount.mjs","names":[],"sources":["../../src/ui/mount.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport './dev-wallet-panel.js';\n\n/** @returns A cleanup function that removes the panel from the DOM. */\nexport function mountDevWallet(\n\twallet: DevWallet,\n\toptions?: { container?: HTMLElement },\n): () => void {\n\tconst container = options?.container ?? document.body;\n\n\tconst panel = document.createElement('dev-wallet-panel');\n\tpanel.wallet = wallet;\n\tcontainer.appendChild(panel);\n\n\treturn () => {\n\t\tpanel.remove();\n\t};\n}\n"],"mappings":";;;;AAOA,SAAgB,eACf,QACA,SACa;CACb,MAAM,YAAY,SAAS,aAAa,SAAS;CAEjD,MAAM,QAAQ,SAAS,cAAc,mBAAmB;AACxD,OAAM,SAAS;AACf,WAAU,YAAY,MAAM;AAE5B,cAAa;AACZ,QAAM,QAAQ"}

package/dist/ui/styles.mjs

@@ -0,0 +1,250 @@
+import { css } from "lit";
+
+//#region src/ui/styles.ts
+const resetStyles = css`
+	* {
+		box-sizing: border-box;
+		-webkit-font-smoothing: antialiased;
+		font-family: var(--dev-wallet-font-sans);
+	}
+
+	button {
+		appearance: none;
+		background-color: transparent;
+		font-size: inherit;
+		font-family: inherit;
+		color: inherit;
+		border: 0;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+		outline-color: color-mix(in oklab, var(--dev-wallet-ring) 50%, transparent);
+	}
+
+	p,
+	h1,
+	h2,
+	h3 {
+		margin: 0;
+		color: var(--dev-wallet-foreground);
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--dev-wallet-ring);
+		outline-offset: 2px;
+	}
+`;
+const themeStyles = css`
+	:host {
+		/* Colors — OKLch dark theme */
+		--dev-wallet-background: oklch(0.175 0.028 283);
+		--dev-wallet-foreground: oklch(0.91 0 0);
+		--dev-wallet-primary: oklch(0.55 0.24 265);
+		--dev-wallet-primary-foreground: oklch(0.98 0 0);
+		--dev-wallet-secondary: oklch(0.195 0.04 262);
+		--dev-wallet-secondary-foreground: oklch(0.91 0 0);
+		--dev-wallet-muted: oklch(0.25 0.035 280);
+		--dev-wallet-muted-foreground: oklch(0.62 0.04 280);
+		--dev-wallet-destructive: oklch(0.63 0.26 25);
+		--dev-wallet-positive: oklch(0.72 0.19 145);
+		--dev-wallet-warning: oklch(0.79 0.17 75);
+		--dev-wallet-border: oklch(0.25 0.035 280);
+		--dev-wallet-input: oklch(0.25 0.035 280);
+		--dev-wallet-ring: oklch(0.55 0.24 265);
+		--dev-wallet-status-connected: #22c55e;
+		--dev-wallet-status-disconnected: #6b7280;
+
+		/* Radius scale — derived from base */
+		--dev-wallet-radius: 12px;
+		--dev-wallet-radius-xs: calc(var(--dev-wallet-radius) - 6px);
+		--dev-wallet-radius-sm: calc(var(--dev-wallet-radius) - 4px);
+		--dev-wallet-radius-md: calc(var(--dev-wallet-radius) - 2px);
+		--dev-wallet-radius-xl: calc(var(--dev-wallet-radius) + 4px);
+		--dev-wallet-radius-2xs: 3px;
+
+		/* Shadows */
+		--dev-wallet-shadow-sm: 0 1px 3px color-mix(in oklab, oklch(0 0 0) 10%, transparent);
+		--dev-wallet-shadow-md: 0 4px 12px color-mix(in oklab, oklch(0 0 0) 30%, transparent);
+
+		/* Typography */
+		--dev-wallet-font-sans:
+			ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, sans-serif;
+		--dev-wallet-font-weight-medium: 500;
+		--dev-wallet-font-weight-semibold: 600;
+		--dev-wallet-font-mono:
+			ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+		/* Font-size scale */
+		--dev-wallet-text-2xs: 10px;
+		--dev-wallet-text-xs: 11px;
+		--dev-wallet-text-sm: 12px;
+		--dev-wallet-text-base: 13px;
+		--dev-wallet-text-md: 14px;
+		--dev-wallet-text-lg: 15px;
+		--dev-wallet-text-xl: 16px;
+		--dev-wallet-shadow-lg: 0 8px 32px color-mix(in oklab, oklch(0 0 0) 40%, transparent);
+	}
+`;
+const dropdownItemStyles = css`
+	.dropdown-item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 8px 10px;
+		font-size: 12px;
+		color: var(--dev-wallet-foreground);
+		text-align: left;
+	}
+
+	.dropdown-item:hover {
+		background: var(--dev-wallet-secondary);
+	}
+
+	.dropdown-item[aria-selected='true'] {
+		font-weight: var(--dev-wallet-font-weight-semibold);
+	}
+`;
+const connectDialogStyles = css`
+	.connect-dialog {
+		width: 360px;
+		max-height: min(600px, 80vh);
+		border-radius: var(--dev-wallet-radius-xl);
+		background: var(--dev-wallet-background);
+		border: 1px solid var(--dev-wallet-border);
+		box-shadow: var(--dev-wallet-shadow-lg);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		color: inherit;
+	}
+
+	.connect-dialog::backdrop {
+		background: color-mix(in oklab, oklch(0 0 0) 50%, transparent);
+	}
+
+	.connect-dialog-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 14px 16px;
+		border-bottom: 1px solid var(--dev-wallet-border);
+	}
+
+	.connect-dialog-title {
+		font-size: 15px;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		color: var(--dev-wallet-foreground);
+	}
+`;
+const actionButtonStyles = css`
+	.actions {
+		display: flex;
+		gap: 8px;
+	}
+
+	.btn {
+		flex: 1;
+		padding: 10px 16px;
+		border-radius: var(--dev-wallet-radius-md);
+		font-size: 13px;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		transition: background-color 0.15s;
+	}
+
+	.btn-approve {
+		background: var(--dev-wallet-positive);
+		color: var(--dev-wallet-primary-foreground);
+	}
+
+	.btn-approve:hover {
+		background: oklab(from var(--dev-wallet-positive) calc(l - 0.03) a b);
+	}
+
+	.btn-reject {
+		background: var(--dev-wallet-destructive);
+		color: var(--dev-wallet-primary-foreground);
+	}
+
+	.btn-reject:hover {
+		background: oklab(from var(--dev-wallet-destructive) calc(l - 0.05) a b);
+	}
+
+	.btn-cancel {
+		background: var(--dev-wallet-secondary);
+		color: var(--dev-wallet-foreground);
+		border: 1px solid var(--dev-wallet-border);
+	}
+
+	.btn-cancel:hover {
+		background: oklab(from var(--dev-wallet-secondary) calc(l - 0.02) a b);
+	}
+
+	.btn-create {
+		background: var(--dev-wallet-primary);
+		color: var(--dev-wallet-primary-foreground);
+	}
+
+	.btn-create:hover {
+		background: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);
+	}
+
+	.btn-create:disabled,
+	.btn-approve:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+`;
+const stateStyles = css`
+	.loading,
+	.empty-state,
+	.error-state {
+		text-align: center;
+		padding: 16px;
+		font-size: 13px;
+	}
+
+	.loading {
+		color: var(--dev-wallet-muted-foreground);
+	}
+
+	.empty-state {
+		color: var(--dev-wallet-muted-foreground);
+	}
+
+	.error-state {
+		color: var(--dev-wallet-destructive);
+	}
+`;
+const sectionHeaderStyles = css`
+	.section-header {
+		font-size: 13px;
+		font-weight: var(--dev-wallet-font-weight-semibold);
+		color: var(--dev-wallet-muted-foreground);
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
+		margin-bottom: 12px;
+	}
+`;
+const reducedMotionStyles = css`
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+		}
+	}
+`;
+const sharedStyles = [
+	resetStyles,
+	themeStyles,
+	reducedMotionStyles
+];
+
+//#endregion
+export { actionButtonStyles, connectDialogStyles, dropdownItemStyles, sectionHeaderStyles, sharedStyles, stateStyles };
+//# sourceMappingURL=styles.mjs.map

package/dist/ui/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","names":[],"sources":["../../src/ui/styles.ts"],"sourcesContent":["// Copyright (c) Mysten Labs, Inc.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css } from 'lit';\n\nconst resetStyles = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t\t-webkit-font-smoothing: antialiased;\n\t\tfont-family: var(--dev-wallet-font-sans);\n\t}\n\n\tbutton {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tfont-size: inherit;\n\t\tfont-family: inherit;\n\t\tcolor: inherit;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\tcursor: pointer;\n\t\toutline-color: color-mix(in oklab, var(--dev-wallet-ring) 50%, transparent);\n\t}\n\n\tp,\n\th1,\n\th2,\n\th3 {\n\t\tmargin: 0;\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n\n\t:focus-visible {\n\t\toutline: 2px solid var(--dev-wallet-ring);\n\t\toutline-offset: 2px;\n\t}\n`;\n\nconst themeStyles = css`\n\t:host {\n\t\t/* Colors — OKLch dark theme */\n\t\t--dev-wallet-background: oklch(0.175 0.028 283);\n\t\t--dev-wallet-foreground: oklch(0.91 0 0);\n\t\t--dev-wallet-primary: oklch(0.55 0.24 265);\n\t\t--dev-wallet-primary-foreground: oklch(0.98 0 0);\n\t\t--dev-wallet-secondary: oklch(0.195 0.04 262);\n\t\t--dev-wallet-secondary-foreground: oklch(0.91 0 0);\n\t\t--dev-wallet-muted: oklch(0.25 0.035 280);\n\t\t--dev-wallet-muted-foreground: oklch(0.62 0.04 280);\n\t\t--dev-wallet-destructive: oklch(0.63 0.26 25);\n\t\t--dev-wallet-positive: oklch(0.72 0.19 145);\n\t\t--dev-wallet-warning: oklch(0.79 0.17 75);\n\t\t--dev-wallet-border: oklch(0.25 0.035 280);\n\t\t--dev-wallet-input: oklch(0.25 0.035 280);\n\t\t--dev-wallet-ring: oklch(0.55 0.24 265);\n\t\t--dev-wallet-status-connected: #22c55e;\n\t\t--dev-wallet-status-disconnected: #6b7280;\n\n\t\t/* Radius scale — derived from base */\n\t\t--dev-wallet-radius: 12px;\n\t\t--dev-wallet-radius-xs: calc(var(--dev-wallet-radius) - 6px);\n\t\t--dev-wallet-radius-sm: calc(var(--dev-wallet-radius) - 4px);\n\t\t--dev-wallet-radius-md: calc(var(--dev-wallet-radius) - 2px);\n\t\t--dev-wallet-radius-xl: calc(var(--dev-wallet-radius) + 4px);\n\t\t--dev-wallet-radius-2xs: 3px;\n\n\t\t/* Shadows */\n\t\t--dev-wallet-shadow-sm: 0 1px 3px color-mix(in oklab, oklch(0 0 0) 10%, transparent);\n\t\t--dev-wallet-shadow-md: 0 4px 12px color-mix(in oklab, oklch(0 0 0) 30%, transparent);\n\n\t\t/* Typography */\n\t\t--dev-wallet-font-sans:\n\t\t\tui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n\t\t\t'Helvetica Neue', Arial, sans-serif;\n\t\t--dev-wallet-font-weight-medium: 500;\n\t\t--dev-wallet-font-weight-semibold: 600;\n\t\t--dev-wallet-font-mono:\n\t\t\tui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n\n\t\t/* Font-size scale */\n\t\t--dev-wallet-text-2xs: 10px;\n\t\t--dev-wallet-text-xs: 11px;\n\t\t--dev-wallet-text-sm: 12px;\n\t\t--dev-wallet-text-base: 13px;\n\t\t--dev-wallet-text-md: 14px;\n\t\t--dev-wallet-text-lg: 15px;\n\t\t--dev-wallet-text-xl: 16px;\n\t\t--dev-wallet-shadow-lg: 0 8px 32px color-mix(in oklab, oklch(0 0 0) 40%, transparent);\n\t}\n`;\n\nexport const dropdownItemStyles = css`\n\t.dropdown-item {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\twidth: 100%;\n\t\tpadding: 8px 10px;\n\t\tfont-size: 12px;\n\t\tcolor: var(--dev-wallet-foreground);\n\t\ttext-align: left;\n\t}\n\n\t.dropdown-item:hover {\n\t\tbackground: var(--dev-wallet-secondary);\n\t}\n\n\t.dropdown-item[aria-selected='true'] {\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t}\n`;\n\nexport const connectDialogStyles = css`\n\t.connect-dialog {\n\t\twidth: 360px;\n\t\tmax-height: min(600px, 80vh);\n\t\tborder-radius: var(--dev-wallet-radius-xl);\n\t\tbackground: var(--dev-wallet-background);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t\tbox-shadow: var(--dev-wallet-shadow-lg);\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 0;\n\t\tcolor: inherit;\n\t}\n\n\t.connect-dialog::backdrop {\n\t\tbackground: color-mix(in oklab, oklch(0 0 0) 50%, transparent);\n\t}\n\n\t.connect-dialog-header {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 14px 16px;\n\t\tborder-bottom: 1px solid var(--dev-wallet-border);\n\t}\n\n\t.connect-dialog-title {\n\t\tfont-size: 15px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-foreground);\n\t}\n`;\n\nexport const actionButtonStyles = css`\n\t.actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\t.btn {\n\t\tflex: 1;\n\t\tpadding: 10px 16px;\n\t\tborder-radius: var(--dev-wallet-radius-md);\n\t\tfont-size: 13px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\ttransition: background-color 0.15s;\n\t}\n\n\t.btn-approve {\n\t\tbackground: var(--dev-wallet-positive);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-approve:hover {\n\t\tbackground: oklab(from var(--dev-wallet-positive) calc(l - 0.03) a b);\n\t}\n\n\t.btn-reject {\n\t\tbackground: var(--dev-wallet-destructive);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-reject:hover {\n\t\tbackground: oklab(from var(--dev-wallet-destructive) calc(l - 0.05) a b);\n\t}\n\n\t.btn-cancel {\n\t\tbackground: var(--dev-wallet-secondary);\n\t\tcolor: var(--dev-wallet-foreground);\n\t\tborder: 1px solid var(--dev-wallet-border);\n\t}\n\n\t.btn-cancel:hover {\n\t\tbackground: oklab(from var(--dev-wallet-secondary) calc(l - 0.02) a b);\n\t}\n\n\t.btn-create {\n\t\tbackground: var(--dev-wallet-primary);\n\t\tcolor: var(--dev-wallet-primary-foreground);\n\t}\n\n\t.btn-create:hover {\n\t\tbackground: oklab(from var(--dev-wallet-primary) calc(l - 0.03) a b);\n\t}\n\n\t.btn-create:disabled,\n\t.btn-approve:disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n`;\n\nexport const stateStyles = css`\n\t.loading,\n\t.empty-state,\n\t.error-state {\n\t\ttext-align: center;\n\t\tpadding: 16px;\n\t\tfont-size: 13px;\n\t}\n\n\t.loading {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.empty-state {\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t}\n\n\t.error-state {\n\t\tcolor: var(--dev-wallet-destructive);\n\t}\n`;\n\nexport const sectionHeaderStyles = css`\n\t.section-header {\n\t\tfont-size: 13px;\n\t\tfont-weight: var(--dev-wallet-font-weight-semibold);\n\t\tcolor: var(--dev-wallet-muted-foreground);\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.5px;\n\t\tmargin-bottom: 12px;\n\t}\n`;\n\nconst reducedMotionStyles = css`\n\t@media (prefers-reduced-motion: reduce) {\n\t\t*,\n\t\t*::before,\n\t\t*::after {\n\t\t\tanimation-duration: 0.01ms !important;\n\t\t\tanimation-iteration-count: 1 !important;\n\t\t\ttransition-duration: 0.01ms !important;\n\t\t}\n\t}\n`;\n\nexport const sharedStyles = [resetStyles, themeStyles, reducedMotionStyles];\n"],"mappings":";;;AAKA,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCvB,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDvB,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;AAqBrC,MAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCtC,MAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DrC,MAAa,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;AAsB9B,MAAa,sBAAsB,GAAG;;;;;;;;;;AAWtC,MAAM,sBAAsB,GAAG;;;;;;;;;;;AAY/B,MAAa,eAAe;CAAC;CAAa;CAAa;CAAoB"}