@mysten-incubation/dev-wallet 0.0.1 → 0.3.0

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

@@ -1,13 +1,21 @@
-import * as lit41 from "lit";
-import { LitElement } from "lit";
+import * as _$lit from "lit";
+import { LitElement, TemplateResult } from "lit";
 
 //#region src/ui/dev-wallet-tab-bar.d.ts
-type TabId = 'assets' | 'objects' | 'settings';
+/** Built-in tab ids. */
+type BuiltinTabId = 'assets' | 'objects' | 'fork' | 'settings';
+type TabId = BuiltinTabId;
 declare class DevWalletTabBar extends LitElement {
   #private;
-  static styles: (lit41.CSSResult | lit41.CSSResult[])[];
+  static styles: (_$lit.CSSResult | _$lit.CSSResult[])[];
   active: TabId;
-  render(): lit41.TemplateResult<1>;
+  /** Phase 5 Subtopic 6 — when true, the bar surfaces a "Fork" tab
+   *  between Objects and Settings. The host controller toggles this
+   *  on whenever the active stack's manifest reports
+   *  `meta.runtime === 'forked'`. Off by default so bundled-mode
+   *  apps don't accidentally expose admin RPCs. */
+  showFork: boolean;
+  render(): TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -1 +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"}
+{"version":3,"file":"dev-wallet-tab-bar.d.mts","names":[],"sources":["../../src/ui/dev-wallet-tab-bar.ts"],"mappings":";;;;;KASY,YAAA;AAAA,KACA,KAAA,GAAQ,YAAA;AAAA,cAwEP,eAAA,SAAwB,UAAA;EAAA;SACpB,MAAA,GADY,KAAA,CACN,SAAA,GAAA,KAAA,CAAA,SAAA;EA4DtB,MAAA,EAAQ,KAAA;EAtIe;AACxB;;;;EA6IC,QAAA;EAES,MAAA,CAAA,GAAM,cAAA;AAAA;AAAA,QAuDR,MAAA;EAAA,UACG,qBAAA;IACT,oBAAA,EAAsB,eAAA;EAAA;AAAA"}

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

@@ -1,116 +1,174 @@
 import { sharedStyles } from "./styles.mjs";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.107.0/helpers/decorate.mjs";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.127.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 {
+const ASSETS_ICON = html`<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>`;
+const OBJECTS_ICON = html`<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>`;
+const SETTINGS_ICON = html`<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>`;
+const FORK_ICON = html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+	<circle cx="6" cy="6" r="2" />
+	<circle cx="6" cy="18" r="2" />
+	<circle cx="18" cy="12" r="2" />
+	<path d="M6 8v8" />
+	<path d="M6 12h6" />
+	<path d="M12 12l4-2" />
+	<path d="M12 12l4 2" />
+</svg>`;
+const BUILTIN_TABS = [
+	{
+		id: "assets",
+		label: "Home",
+		icon: ASSETS_ICON
+	},
+	{
+		id: "objects",
+		label: "Objects",
+		icon: OBJECTS_ICON
+	},
+	{
+		id: "settings",
+		label: "Settings",
+		icon: SETTINGS_ICON
+	}
+];
+/** Built-in tabs plus the fork-controls tab. Returned when the host
+*  controller signals fork-mode availability via the `showFork` prop. */
+const TABS_WITH_FORK = [
+	{
+		id: "assets",
+		label: "Home",
+		icon: ASSETS_ICON
+	},
+	{
+		id: "objects",
+		label: "Objects",
+		icon: OBJECTS_ICON
+	},
+	{
+		id: "fork",
+		label: "Fork",
+		icon: FORK_ICON
+	},
+	{
+		id: "settings",
+		label: "Settings",
+		icon: SETTINGS_ICON
+	}
+];
+let DevWalletTabBar = class DevWalletTabBar extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.active = "assets";
+		this.showFork = false;
 	}
 	static {
 		this.styles = [sharedStyles, css`
 			:host {
 				display: block;
-				border-top: 1px solid var(--dev-wallet-border);
+				border-bottom: 1px solid var(--dev-wallet-border);
+				background: var(--dev-wallet-surface);
 			}
 
 			.tab-bar {
 				display: flex;
-				height: 40px;
+				align-items: stretch;
+				min-height: 38px;
+				overflow-x: auto;
+				padding: 0 6px;
 			}
 
 			.tab {
-				flex: 1;
+				position: relative;
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				gap: 4px;
-				font-size: 11px;
+				gap: 6px;
+				min-width: 0;
+				height: 38px;
+				padding: 0 14px;
+				font-size: 12px;
 				font-weight: var(--dev-wallet-font-weight-medium);
-				color: var(--dev-wallet-muted-foreground);
-				transition: color 0.15s;
-				border-top: 2px solid transparent;
+				color: var(--dev-wallet-text-2);
+				transition:
+					color 120ms,
+					background 120ms;
+				border-bottom: 2px solid transparent;
+				white-space: nowrap;
 			}
 
 			.tab:hover {
 				color: var(--dev-wallet-foreground);
+				background: var(--dev-wallet-bg-hover);
 			}
 
 			.tab[aria-selected='true'] {
-				color: var(--dev-wallet-primary);
-				border-top-color: var(--dev-wallet-primary);
+				color: var(--dev-wallet-foreground);
+				border-bottom-color: var(--dev-wallet-primary);
 			}
 
 			.tab svg {
-				width: 16px;
-				height: 16px;
+				width: 13px;
+				height: 13px;
+				flex-shrink: 0;
+			}
+
+			.tab:last-child {
+				margin-left: auto;
+				padding: 0 10px;
 			}
 		`];
 	}
 	render() {
+		const tabs = this.showFork ? TABS_WITH_FORK : BUILTIN_TABS;
 		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>
+				${tabs.map((tab) => html`
+						<button
+							class="tab"
+							part="tab"
+							role="tab"
+							aria-selected=${this.active === tab.id}
+							tabindex=${this.active === tab.id ? 0 : -1}
+							@click=${() => this.#select(tab.id)}
+							@keydown=${(e) => this.#handleKeydown(e, tabs)}
+						>
+							${tab.icon} ${tab.label}
+						</button>
+					`)}
 			</nav>
 		`;
 	}
-	#handleKeydown(e) {
-		const tabs = [
-			"assets",
-			"objects",
-			"settings"
-		];
-		const currentIndex = tabs.indexOf(this.active);
+	#handleKeydown(e, tabs) {
+		const currentIndex = tabs.findIndex((t) => t.id === this.active);
 		let newIndex = -1;
 		if (e.key === "ArrowRight") {
 			e.preventDefault();
@@ -120,24 +178,27 @@ let DevWalletTabBar = class DevWalletTabBar$1 extends LitElement {
 			newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
 		}
 		if (newIndex !== -1) {
-			this.#select(tabs[newIndex]);
-			const buttons = this.shadowRoot?.querySelectorAll(".tab");
-			buttons?.[newIndex]?.focus();
+			const next = tabs[newIndex];
+			if (next === void 0) return;
+			this.#select(next.id);
+			(this.shadowRoot?.querySelectorAll(".tab"))?.[newIndex]?.focus();
 		}
 	}
 	#select(tab) {
-		if (tab !== this.active) {
-			this.dispatchEvent(new CustomEvent("tab-changed", {
-				bubbles: true,
-				composed: true,
-				detail: { 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);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-fork"
+})], DevWalletTabBar.prototype, "showFork", 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

@@ -1 +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"}
+{"version":3,"file":"dev-wallet-tab-bar.mjs","names":["#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, type TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { sharedStyles } from './styles.js';\n\n/** Built-in tab ids. */\nexport type BuiltinTabId = 'assets' | 'objects' | 'fork' | 'settings';\nexport type TabId = BuiltinTabId;\n\ninterface TabSpec {\n\tid: TabId;\n\tlabel: string;\n\ticon: TemplateResult;\n}\n\nconst ASSETS_ICON = html`<svg\n\tviewBox=\"0 0 24 24\"\n\tfill=\"none\"\n\tstroke=\"currentColor\"\n\tstroke-width=\"2\"\n>\n\t<rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" />\n\t<path d=\"M16 12h.01\" />\n</svg>`;\n\nconst OBJECTS_ICON = html`<svg\n\tviewBox=\"0 0 24 24\"\n\tfill=\"none\"\n\tstroke=\"currentColor\"\n\tstroke-width=\"2\"\n>\n\t<rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n\t<rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\" />\n\t<rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n\t<rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\" />\n</svg>`;\n\nconst SETTINGS_ICON = html`<svg\n\tviewBox=\"0 0 24 24\"\n\tfill=\"none\"\n\tstroke=\"currentColor\"\n\tstroke-width=\"2\"\n>\n\t<circle cx=\"12\" cy=\"12\" r=\"3\" />\n\t<path\n\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/>\n</svg>`;\n\n// Phase 5 Subtopic 6 — fork-controls tab icon. Branching shape signals\n// the \"fork\" semantic without overlapping with the existing wallet\n// glyphs; rendered only when the active manifest's `meta.runtime`\n// resolves to `'forked'` (see `wallet-controller.renderTabBar`).\nconst FORK_ICON = html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n\t<circle cx=\"6\" cy=\"6\" r=\"2\" />\n\t<circle cx=\"6\" cy=\"18\" r=\"2\" />\n\t<circle cx=\"18\" cy=\"12\" r=\"2\" />\n\t<path d=\"M6 8v8\" />\n\t<path d=\"M6 12h6\" />\n\t<path d=\"M12 12l4-2\" />\n\t<path d=\"M12 12l4 2\" />\n</svg>`;\n\nconst BUILTIN_TABS: TabSpec[] = [\n\t{ id: 'assets', label: 'Home', icon: ASSETS_ICON },\n\t{ id: 'objects', label: 'Objects', icon: OBJECTS_ICON },\n\t{ id: 'settings', label: 'Settings', icon: SETTINGS_ICON },\n];\n\n/** Built-in tabs plus the fork-controls tab. Returned when the host\n *  controller signals fork-mode availability via the `showFork` prop. */\nconst TABS_WITH_FORK: TabSpec[] = [\n\t{ id: 'assets', label: 'Home', icon: ASSETS_ICON },\n\t{ id: 'objects', label: 'Objects', icon: OBJECTS_ICON },\n\t{ id: 'fork', label: 'Fork', icon: FORK_ICON },\n\t{ id: 'settings', label: 'Settings', icon: SETTINGS_ICON },\n];\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-bottom: 1px solid var(--dev-wallet-border);\n\t\t\t\tbackground: var(--dev-wallet-surface);\n\t\t\t}\n\n\t\t\t.tab-bar {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: stretch;\n\t\t\t\tmin-height: 38px;\n\t\t\t\toverflow-x: auto;\n\t\t\t\tpadding: 0 6px;\n\t\t\t}\n\n\t\t\t.tab {\n\t\t\t\tposition: relative;\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: 6px;\n\t\t\t\tmin-width: 0;\n\t\t\t\theight: 38px;\n\t\t\t\tpadding: 0 14px;\n\t\t\t\tfont-size: 12px;\n\t\t\t\tfont-weight: var(--dev-wallet-font-weight-medium);\n\t\t\t\tcolor: var(--dev-wallet-text-2);\n\t\t\t\ttransition:\n\t\t\t\t\tcolor 120ms,\n\t\t\t\t\tbackground 120ms;\n\t\t\t\tborder-bottom: 2px solid transparent;\n\t\t\t\twhite-space: nowrap;\n\t\t\t}\n\n\t\t\t.tab:hover {\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tbackground: var(--dev-wallet-bg-hover);\n\t\t\t}\n\n\t\t\t.tab[aria-selected='true'] {\n\t\t\t\tcolor: var(--dev-wallet-foreground);\n\t\t\t\tborder-bottom-color: var(--dev-wallet-primary);\n\t\t\t}\n\n\t\t\t.tab svg {\n\t\t\t\twidth: 13px;\n\t\t\t\theight: 13px;\n\t\t\t\tflex-shrink: 0;\n\t\t\t}\n\n\t\t\t.tab:last-child {\n\t\t\t\tmargin-left: auto;\n\t\t\t\tpadding: 0 10px;\n\t\t\t}\n\t\t`,\n\t];\n\n\t@property({ type: String })\n\tactive: TabId = 'assets';\n\n\t/** Phase 5 Subtopic 6 — when true, the bar surfaces a \"Fork\" tab\n\t *  between Objects and Settings. The host controller toggles this\n\t *  on whenever the active stack's manifest reports\n\t *  `meta.runtime === 'forked'`. Off by default so bundled-mode\n\t *  apps don't accidentally expose admin RPCs. */\n\t@property({ type: Boolean, attribute: 'show-fork' })\n\tshowFork = false;\n\n\toverride render() {\n\t\tconst tabs: TabSpec[] = this.showFork ? TABS_WITH_FORK : BUILTIN_TABS;\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${tabs.map(\n\t\t\t\t\t(tab) => html`\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"tab\"\n\t\t\t\t\t\t\tpart=\"tab\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-selected=${this.active === tab.id}\n\t\t\t\t\t\t\ttabindex=${this.active === tab.id ? 0 : -1}\n\t\t\t\t\t\t\t@click=${() => this.#select(tab.id)}\n\t\t\t\t\t\t\t@keydown=${(e: KeyboardEvent) => this.#handleKeydown(e, tabs)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${tab.icon} ${tab.label}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t`;\n\t}\n\n\t#handleKeydown(e: KeyboardEvent, tabs: TabSpec[]): void {\n\t\tconst currentIndex = tabs.findIndex((t) => t.id === this.active);\n\t\tlet newIndex = -1;\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\t\tif (newIndex !== -1) {\n\t\t\tconst next = tabs[newIndex];\n\t\t\tif (next === undefined) return;\n\t\t\tthis.#select(next.id);\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): void {\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":";;;;;AAkBA,MAAM,cAAc,IAAI;;;;;;;;;AAUxB,MAAM,eAAe,IAAI;;;;;;;;;;;AAYzB,MAAM,gBAAgB,IAAI;;;;;;;;;;;AAgB1B,MAAM,YAAY,IAAI;;;;;;;;;AAUtB,MAAM,eAA0B;CAC/B;EAAE,IAAI;EAAU,OAAO;EAAQ,MAAM;EAAa;CAClD;EAAE,IAAI;EAAW,OAAO;EAAW,MAAM;EAAc;CACvD;EAAE,IAAI;EAAY,OAAO;EAAY,MAAM;EAAe;CAC1D;;;AAID,MAAM,iBAA4B;CACjC;EAAE,IAAI;EAAU,OAAO;EAAQ,MAAM;EAAa;CAClD;EAAE,IAAI;EAAW,OAAO;EAAW,MAAM;EAAc;CACvD;EAAE,IAAI;EAAQ,OAAO;EAAQ,MAAM;EAAW;CAC9C;EAAE,IAAI;EAAY,OAAO;EAAY,MAAM;EAAe;CAC1D;AAGM,IAAA,kBAAA,MAAM,wBAAwB,WAAW;;;gBA6D/B;kBAQL;;;gBApEc,CACxB,cACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuDH;;CAaD,SAAkB;EACjB,MAAM,OAAkB,KAAK,WAAW,iBAAiB;AACzD,SAAO,IAAI;;MAEP,KAAK,KACL,QAAQ,IAAI;;;;;uBAKK,KAAK,WAAW,IAAI,GAAG;kBAC5B,KAAK,WAAW,IAAI,KAAK,IAAI,GAAG;sBAC5B,MAAA,OAAa,IAAI,GAAG,CAAC;mBACxB,MAAqB,MAAA,cAAoB,GAAG,KAAK,CAAC;;SAE5D,IAAI,KAAK,GAAG,IAAI,MAAM;;OAG1B,CAAC;;;;CAKL,eAAe,GAAkB,MAAuB;EACvD,MAAM,eAAe,KAAK,WAAW,MAAM,EAAE,OAAO,KAAK,OAAO;EAChE,IAAI,WAAW;AACf,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;;AAEpD,MAAI,aAAa,IAAI;GACpB,MAAM,OAAO,KAAK;AAClB,OAAI,SAAS,OAAW;AACxB,SAAA,OAAa,KAAK,GAAG;AAErB,IADgB,KAAK,YAAY,iBAAoC,OAAO,IAClE,WAAW,OAAO;;;CAI9B,QAAQ,KAAkB;AACzB,MAAI,QAAQ,KAAK,OAChB,MAAK,cACJ,IAAI,YAAY,eAAe;GAC9B,SAAS;GACT,UAAU;GACV,QAAQ,EAAE,KAAK;GACf,CAAC,CACF;;;YA7DF,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,gBAAA,WAAA,UAAA,KAAA,EAAA;YAQ1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,CAAC,CAAA,EAAA,gBAAA,WAAA,YAAA,KAAA,EAAA;8BArEpD,cAAc,qBAAqB,CAAA,EAAA,gBAAA"}

package/dist/ui/index.d.mts

@@ -1,8 +1,8 @@
+import { DevWalletPanel } from "./dev-wallet-panel.mjs";
 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";
@@ -13,5 +13,6 @@ 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 { DevWalletForkPanel } from "./dev-wallet-fork-panel.mjs";
 import { mountDevWallet } from "./mount.mjs";
-export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };
+export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletForkPanel, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };

package/dist/ui/index.mjs

@@ -2,6 +2,7 @@ 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 { DevWalletForkPanel } from "./dev-wallet-fork-panel.mjs";
 import { DevWalletNetworkBadge } from "./dev-wallet-network-badge.mjs";
 import { DevWalletObjects } from "./dev-wallet-objects.mjs";
 import { DevWalletNewAccount } from "./dev-wallet-new-account.mjs";
@@ -14,5 +15,4 @@ 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 };
+export { DevWalletAccountSelector, DevWalletAccounts, DevWalletBalances, DevWalletConnect, DevWalletDropdown, DevWalletForkPanel, DevWalletNetworkBadge, DevWalletNewAccount, DevWalletObjects, DevWalletPanel, DevWalletPopup, DevWalletSettings, DevWalletSigning, DevWalletSigningModal, DevWalletStandalone, DevWalletTabBar, mountDevWallet };

package/dist/ui/mount.d.mts

@@ -1,10 +1,23 @@
+import { ForkRelay } from "../adapters/fork-relay.mjs";
 import { DevWallet } from "../wallet/dev-wallet.mjs";
-import "./dev-wallet-panel.mjs";
+import { CoinRecord } from "./utils.mjs";
+import { DevWalletDockStyle } from "./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;
+  /** Pre-seeded coin metadata — pass the generated `coins` constant
+   *  from devstack codegen to skip per-coin RPC waterfalls on UI
+   *  load. See `DevWalletPanel.coins`. */
+  coins?: CoinRecord | null;
+  /** Phase 5 Subtopic 6 — fork admin relay. Construct via
+   *  `createForkRelayFromManifest(manifest)` and pass through;
+   *  the panel surfaces a Fork tab whenever this is non-null and
+   *  the active network ends in `-fork`. */
+  forkRelay?: ForkRelay | null; /** Upstream label (`'mainnet'`, …) sourced from `meta.upstream`. */
+  forkUpstream?: string; /** Floating dock presentation. Defaults to the corner pill from the handoff. */
+  dockStyle?: DevWalletDockStyle;
 }): () => void;
 //#endregion
 export { mountDevWallet };

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

@@ -1 +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"}
+{"version":3,"file":"mount.d.mts","names":[],"sources":["../../src/ui/mount.ts"],"mappings":";;;;;;;iBAUgB,cAAA,CACf,MAAA,EAAQ,SAAA,EACR,OAAA;EACC,SAAA,GAAY,WAAA;;;;EAIZ,KAAA,GAAQ,UAAA;EAKI;;;;EAAZ,SAAA,GAAY,SAAA,SAXb;EAaC,YAAA,WAXY;EAaZ,SAAA,GAAY,kBAAA;AAAA"}

package/dist/ui/mount.mjs

@@ -1,17 +1,20 @@
 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;
+	if (options?.coins !== void 0) panel.coins = options.coins;
+	if (options?.forkRelay !== void 0) panel.forkRelay = options.forkRelay;
+	if (options?.forkUpstream !== void 0) panel.forkUpstream = options.forkUpstream;
+	if (options?.dockStyle !== void 0) panel.dockStyle = options.dockStyle;
 	container.appendChild(panel);
 	return () => {
 		panel.remove();
 	};
 }
-
 //#endregion
 export { mountDevWallet };
+
 //# sourceMappingURL=mount.mjs.map

package/dist/ui/mount.mjs.map

@@ -1 +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"}
+{"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 { ForkRelay } from '../adapters/fork-relay.js';\nimport type { DevWallet } from '../wallet/dev-wallet.js';\nimport './dev-wallet-panel.js';\nimport type { DevWalletDockStyle } from './dev-wallet-panel.js';\nimport type { CoinRecord } from './utils.js';\n\n/** @returns A cleanup function that removes the panel from the DOM. */\nexport function mountDevWallet(\n\twallet: DevWallet,\n\toptions?: {\n\t\tcontainer?: HTMLElement;\n\t\t/** Pre-seeded coin metadata — pass the generated `coins` constant\n\t\t *  from devstack codegen to skip per-coin RPC waterfalls on UI\n\t\t *  load. See `DevWalletPanel.coins`. */\n\t\tcoins?: CoinRecord | null;\n\t\t/** Phase 5 Subtopic 6 — fork admin relay. Construct via\n\t\t *  `createForkRelayFromManifest(manifest)` and pass through;\n\t\t *  the panel surfaces a Fork tab whenever this is non-null and\n\t\t *  the active network ends in `-fork`. */\n\t\tforkRelay?: ForkRelay | null;\n\t\t/** Upstream label (`'mainnet'`, …) sourced from `meta.upstream`. */\n\t\tforkUpstream?: string;\n\t\t/** Floating dock presentation. Defaults to the corner pill from the handoff. */\n\t\tdockStyle?: DevWalletDockStyle;\n\t},\n): () => void {\n\tconst container = options?.container ?? document.body;\n\n\tconst panel = document.createElement('dev-wallet-panel');\n\tpanel.wallet = wallet;\n\tif (options?.coins !== undefined) panel.coins = options.coins;\n\tif (options?.forkRelay !== undefined) panel.forkRelay = options.forkRelay;\n\tif (options?.forkUpstream !== undefined) panel.forkUpstream = options.forkUpstream;\n\tif (options?.dockStyle !== undefined) panel.dockStyle = options.dockStyle;\n\tcontainer.appendChild(panel);\n\n\treturn () => {\n\t\tpanel.remove();\n\t};\n}\n"],"mappings":";;;AAUA,SAAgB,eACf,QACA,SAgBa;CACb,MAAM,YAAY,SAAS,aAAa,SAAS;CAEjD,MAAM,QAAQ,SAAS,cAAc,mBAAmB;AACxD,OAAM,SAAS;AACf,KAAI,SAAS,UAAU,OAAW,OAAM,QAAQ,QAAQ;AACxD,KAAI,SAAS,cAAc,OAAW,OAAM,YAAY,QAAQ;AAChE,KAAI,SAAS,iBAAiB,OAAW,OAAM,eAAe,QAAQ;AACtE,KAAI,SAAS,cAAc,OAAW,OAAM,YAAY,QAAQ;AAChE,WAAU,YAAY,MAAM;AAE5B,cAAa;AACZ,QAAM,QAAQ"}