@meddleware/ui 0.1.9 → 0.1.11

package/README.md

@@ -53,6 +53,24 @@ All three accept a `variant` prop:
 | `UiSelect` | Styled select input. |
 | `UiNotice` | Notice / alert banner. |
 | `SidebarItem` | Navigation button for use inside `AppSidebar`. Accepts `label`, `icon`, `active`, and `disabled` props. |
+| `CopyableAddress` | Shows a value (address/blob id/tx digest) with a dedicated **copy icon** (the value text is not the copy trigger). Put a link in the default slot to make it both linkable and copyable. Props: `address`, `truncate`, `chars`, `label`. |
+| `ExplorerLink` | External block-explorer link with a truncated label (or slot). Chain-agnostic — pass `href` (build it with `suiExplorerUrl`, or an app helper such as a Walruscan URL). Nest inside `CopyableAddress` for link + copy. |
+
+Copy + link compose — nest `ExplorerLink` in `CopyableAddress` so the value links out while the
+icon copies:
+
+```vue
+<CopyableAddress :address="addr">
+  <ExplorerLink :href="suiExplorerUrl('account', addr, 'testnet')" :value="addr" />
+</CopyableAddress>
+```
+
+### Explorer helper
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `suiExplorerUrl(kind, id, network?)` | Function | Builds a SuiVision URL. `kind`: `'account' \| 'object' \| 'txblock'`; `network` defaults to `'testnet'`. Single source of truth for Sui explorer links. |
+| `SuiNetwork`, `SuiExplorerKind` | Types | `'mainnet' \| 'testnet' \| 'devnet'` and the link kinds. |
 
 ### Colour mode
 

package/dist/base.css

@@ -1,2 +1,2 @@
-*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--mw-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:16px;line-height:1.55}:where(ul,ol):where([role=list],[role=listitem]){margin:0;padding:0;list-style:none}:where(img,svg,video,canvas){max-width:100%;display:block}:where(fieldset){border:0;margin:0;padding:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:where(button,input,select,textarea){font-family:inherit}:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-mono{font-family:var(--mw-font-mono)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.mw-header[data-v-ad7cd1c5]{height:var(--mw-header-height,56px);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);align-items:center;gap:1rem;padding:0 1rem;display:flex}.mw-header--sticky[data-v-ad7cd1c5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-ad7cd1c5]{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:.5rem;font-weight:650;display:flex}.mw-header__center[data-v-ad7cd1c5]{flex:auto;min-width:0}.mw-header__actions[data-v-ad7cd1c5]{align-items:center;gap:.5rem;margin-left:auto;display:flex}.mw-sidebar[data-v-23c3c7f3]{height:100%;width:var(--mw-sidebar-width,240px);background:var(--_bg);color:var(--_text);border-right:1px solid var(--_border);font-family:var(--mw-font-sans);flex-direction:column;display:flex}.mw-sidebar__head[data-v-23c3c7f3]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-23c3c7f3]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__body[data-v-23c3c7f3]{flex-shrink:0}.mw-sidebar__foot[data-v-23c3c7f3]{border-top:1px solid var(--_border);color:var(--_muted);padding:.75rem 1rem;font-size:.85rem}.mw-footer[data-v-c646b8e1]{background:var(--_bg);color:var(--_muted);border-top:1px solid var(--_border);font-family:var(--mw-font-sans);flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.mw-footer--transparent[data-v-c646b8e1]{border-top:1px solid var(--border)}.mw-footer__center[data-v-c646b8e1]{flex:auto;min-width:0}.mw-footer__end[data-v-c646b8e1]{margin-left:auto}.mw-mode[data-v-e4a6bf1d]{border:1px solid var(--_border,var(--border));border-radius:var(--mw-radius,10px);background:color-mix(in srgb, var(--_text,var(--text)) 6%, transparent);gap:2px;padding:2px;display:inline-flex}.mw-mode__btn[data-v-e4a6bf1d]{border-radius:calc(var(--mw-radius,10px) - 3px);color:var(--_text,var(--text));font:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.8rem;display:inline-flex}.mw-mode__btn[data-v-e4a6bf1d]:hover{opacity:1}.mw-mode__btn.is-active[data-v-e4a6bf1d]{opacity:1;background:color-mix(in srgb, var(--_text,var(--text)) 14%, transparent)}.mw-mode__btn[data-v-e4a6bf1d]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (width<=640px){.mw-mode__label[data-v-e4a6bf1d]{display:none}}.mw-btn[data-v-299de2c3]{border-radius:var(--mw-radius,10px);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.5rem .9rem;font-weight:550;transition:filter .12s,background .12s;display:inline-flex}.mw-btn[data-v-299de2c3]:disabled{opacity:.55;cursor:not-allowed}.mw-btn[data-v-299de2c3]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-btn--primary[data-v-299de2c3]{background:var(--accent);color:var(--accent-contrast)}.mw-btn--primary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--secondary[data-v-299de2c3]{background:var(--secondary);color:var(--secondary-contrast)}.mw-btn--secondary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--ghost[data-v-299de2c3]{color:var(--text);border-color:var(--border);background:0 0}.mw-btn--ghost[data-v-299de2c3]:not(:disabled):hover{background:var(--lift)}.mw-btn--danger[data-v-299de2c3]{background:var(--danger);color:var(--mw-neutral-000)}.mw-btn--danger[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-card[data-v-fd2fd7ab]{background:var(--surface);border:1px solid var(--border);border-radius:var(--mw-radius,10px);color:var(--text);overflow:hidden}.mw-card__header[data-v-fd2fd7ab]{border-bottom:1px solid var(--border);padding:.85rem 1rem}.mw-card__title[data-v-fd2fd7ab]{margin:0;font-size:1rem;font-weight:600}.mw-card__body[data-v-fd2fd7ab]{padding:1rem}.mw-card__footer[data-v-fd2fd7ab]{border-top:1px solid var(--border);background:var(--lift);padding:.75rem 1rem}.mw-select[data-v-b9468387]{position:relative}.mw-select select[data-v-b9468387]{appearance:none;background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--mw-radius,10px);font:inherit;padding:.5rem 2.5rem .5rem .7rem}.mw-select select[data-v-b9468387]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mw-select__chevron[data-v-b9468387]{pointer-events:none;stroke:var(--muted);stroke-width:1.5px;fill:none;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.mw-notice[data-v-6f53d0be]{border:1px solid var(--border);border-radius:var(--mw-radius,10px);background:var(--lift);color:var(--text);border-left-width:3px;margin:0;padding:.6rem .8rem;font-size:.9rem}.mw-notice--error[data-v-6f53d0be]{border-left-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent)}.mw-notice--ok[data-v-6f53d0be]{border-left-color:var(--ok);color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}.sidebar-item[data-v-e15afdf7]{border-radius:var(--mw-radius,10px);width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.85;background:0 0;border:0;align-items:center;gap:.6rem;padding:.55rem .7rem;display:flex}.sidebar-item[data-v-e15afdf7]:hover:not(:disabled){background:color-mix(in srgb, currentColor 10%, transparent);opacity:1}.sidebar-item.is-active[data-v-e15afdf7]{background:color-mix(in srgb, var(--accent) 26%, transparent);opacity:1}.sidebar-item[data-v-e15afdf7]:disabled{cursor:default}.sidebar-item[data-v-e15afdf7]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.sidebar-item__icon[data-v-e15afdf7]{text-align:center;width:1.1rem}.ca-root[data-v-e2d23de9]{font-family:monospace;font-size:inherit;color:var(--muted,#888);cursor:pointer;text-underline-offset:2px;background:0 0;border:none;padding:0;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;transition:color .15s;display:inline-block}.ca-root[data-v-e2d23de9]:hover{color:var(--text,#f0f0f0)}.ca-root--copied[data-v-e2d23de9]{color:var(--accent,#6366f1);text-decoration:none}.status-widget[data-v-20197983]{color:inherit;opacity:.85;align-items:center;gap:.4rem;font-size:.8rem;text-decoration:none;display:inline-flex}.status-widget[data-v-20197983]:hover{opacity:1}.status-widget__dot[data-v-20197983]{border-radius:50%;flex-shrink:0;width:.55rem;height:.55rem}.status-widget--ok .status-widget__dot[data-v-20197983]{background:var(--mw-ok-500)}.status-widget--degraded .status-widget__dot[data-v-20197983]{background:var(--mw-gold-500)}.status-widget--error .status-widget__dot[data-v-20197983]{background:var(--mw-danger-500)}
+*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);min-height:100vh;color:var(--text);font-family:var(--mw-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:16px;line-height:1.55}:where(ul,ol):where([role=list],[role=listitem]){margin:0;padding:0;list-style:none}:where(img,svg,video,canvas){max-width:100%;display:block}:where(fieldset){border:0;margin:0;padding:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:where(button,input,select,textarea){font-family:inherit}:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-mono{font-family:var(--mw-font-mono)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}.mw-header[data-v-ad7cd1c5]{height:var(--mw-header-height,56px);background:var(--_bg);color:var(--_text);border-bottom:1px solid var(--_border);font-family:var(--mw-font-sans);align-items:center;gap:1rem;padding:0 1rem;display:flex}.mw-header--sticky[data-v-ad7cd1c5]{z-index:50;position:sticky;top:0}.mw-header__brand[data-v-ad7cd1c5]{letter-spacing:.01em;white-space:nowrap;align-items:center;gap:.5rem;font-weight:650;display:flex}.mw-header__center[data-v-ad7cd1c5]{flex:auto;min-width:0}.mw-header__actions[data-v-ad7cd1c5]{align-items:center;gap:.5rem;margin-left:auto;display:flex}.mw-sidebar[data-v-23c3c7f3]{height:100%;width:var(--mw-sidebar-width,240px);background:var(--_bg);color:var(--_text);border-right:1px solid var(--_border);font-family:var(--mw-font-sans);flex-direction:column;display:flex}.mw-sidebar__head[data-v-23c3c7f3]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-23c3c7f3]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__body[data-v-23c3c7f3]{flex-shrink:0}.mw-sidebar__foot[data-v-23c3c7f3]{border-top:1px solid var(--_border);color:var(--_muted);padding:.75rem 1rem;font-size:.85rem}.mw-footer[data-v-c646b8e1]{background:var(--_bg);color:var(--_muted);border-top:1px solid var(--_border);font-family:var(--mw-font-sans);flex-wrap:wrap;align-items:center;gap:1rem;padding:.75rem 1rem;font-size:.85rem;display:flex}.mw-footer--transparent[data-v-c646b8e1]{border-top:1px solid var(--border)}.mw-footer__center[data-v-c646b8e1]{flex:auto;min-width:0}.mw-footer__end[data-v-c646b8e1]{margin-left:auto}.mw-mode[data-v-186f8312]{border:1px solid var(--_border,var(--border));border-radius:var(--mw-radius,10px);background:color-mix(in srgb, var(--_text,var(--text)) 6%, transparent);gap:2px;padding:2px;display:inline-flex}.mw-mode__btn[data-v-186f8312]{border-radius:calc(var(--mw-radius,10px) - 3px);color:var(--_text,var(--text));font:inherit;cursor:pointer;opacity:.7;background:0 0;border:0;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.8rem;display:inline-flex}.mw-mode__btn[data-v-186f8312]:hover{opacity:1}.mw-mode__btn.is-active[data-v-186f8312]{opacity:1;background:color-mix(in srgb, var(--_text,var(--text)) 14%, transparent)}.mw-mode__btn[data-v-186f8312]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (width<=640px){.mw-mode__label[data-v-186f8312]{display:none}}.mw-btn[data-v-299de2c3]{border-radius:var(--mw-radius,10px);font:inherit;cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.4rem;padding:.5rem .9rem;font-weight:550;transition:filter .12s,background .12s;display:inline-flex}.mw-btn[data-v-299de2c3]:disabled{opacity:.55;cursor:not-allowed}.mw-btn[data-v-299de2c3]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mw-btn--primary[data-v-299de2c3]{background:var(--accent);color:var(--accent-contrast)}.mw-btn--primary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--secondary[data-v-299de2c3]{background:var(--secondary);color:var(--secondary-contrast)}.mw-btn--secondary[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-btn--ghost[data-v-299de2c3]{color:var(--text);border-color:var(--border);background:0 0}.mw-btn--ghost[data-v-299de2c3]:not(:disabled):hover{background:var(--lift)}.mw-btn--danger[data-v-299de2c3]{background:var(--danger);color:var(--mw-neutral-000)}.mw-btn--danger[data-v-299de2c3]:not(:disabled):hover{filter:brightness(1.08)}.mw-card[data-v-fd2fd7ab]{background:var(--surface);border:1px solid var(--border);border-radius:var(--mw-radius,10px);color:var(--text);overflow:hidden}.mw-card__header[data-v-fd2fd7ab]{border-bottom:1px solid var(--border);padding:.85rem 1rem}.mw-card__title[data-v-fd2fd7ab]{margin:0;font-size:1rem;font-weight:600}.mw-card__body[data-v-fd2fd7ab]{padding:1rem}.mw-card__footer[data-v-fd2fd7ab]{border-top:1px solid var(--border);background:var(--lift);padding:.75rem 1rem}.mw-select[data-v-b9468387]{position:relative}.mw-select select[data-v-b9468387]{appearance:none;background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border);border-radius:var(--mw-radius,10px);font:inherit;padding:.5rem 2.5rem .5rem .7rem}.mw-select select[data-v-b9468387]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mw-select__chevron[data-v-b9468387]{pointer-events:none;stroke:var(--muted);stroke-width:1.5px;fill:none;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.mw-notice[data-v-6f53d0be]{border:1px solid var(--border);border-radius:var(--mw-radius,10px);background:var(--lift);color:var(--text);border-left-width:3px;margin:0;padding:.6rem .8rem;font-size:.9rem}.mw-notice--error[data-v-6f53d0be]{border-left-color:var(--danger);color:var(--danger);background:color-mix(in srgb, var(--danger) 8%, transparent)}.mw-notice--ok[data-v-6f53d0be]{border-left-color:var(--ok);color:var(--ok);background:color-mix(in srgb, var(--ok) 8%, transparent)}.sidebar-item[data-v-e15afdf7]{border-radius:var(--mw-radius,10px);width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.85;background:0 0;border:0;align-items:center;gap:.6rem;padding:.55rem .7rem;display:flex}.sidebar-item[data-v-e15afdf7]:hover:not(:disabled){background:color-mix(in srgb, currentColor 10%, transparent);opacity:1}.sidebar-item.is-active[data-v-e15afdf7]{background:color-mix(in srgb, var(--accent) 26%, transparent);opacity:1}.sidebar-item[data-v-e15afdf7]:disabled{cursor:default}.sidebar-item[data-v-e15afdf7]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.sidebar-item__icon[data-v-e15afdf7]{text-align:center;width:1.1rem}.mw-tab-nav[data-v-88758ede]{border-bottom:2px solid var(--border);gap:.25rem;display:flex}.mw-tab-nav__tab[data-v-88758ede]{appearance:none;cursor:pointer;color:var(--muted);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:.5rem 1rem;font-size:.95rem;transition:color .1s,border-color .1s}.mw-tab-nav__tab[data-v-88758ede]:hover{color:var(--text)}.mw-tab-nav__tab--active[data-v-88758ede]{border-bottom-color:var(--accent);color:var(--text);font-weight:600}.ca-root[data-v-08c3420b]{align-items:center;gap:.35em;display:inline-flex}.ca-value[data-v-08c3420b]{font-family:monospace;font-size:inherit}.ca-copy[data-v-08c3420b]{color:var(--muted,#888);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:1;transition:color .15s;display:inline-flex}.ca-copy[data-v-08c3420b]:hover{color:var(--text,#f0f0f0)}.ca-copy--copied[data-v-08c3420b]{color:var(--accent,#6366f1)}.ca-icon[data-v-08c3420b]{display:block}.el-root[data-v-7a44607e]{font-family:monospace;font-size:inherit;color:var(--accent,#6366f1);text-underline-offset:2px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;transition:color .15s}.el-root[data-v-7a44607e]:hover{color:var(--text,#f0f0f0);text-decoration-style:solid}.status-widget[data-v-20197983]{color:inherit;opacity:.85;align-items:center;gap:.4rem;font-size:.8rem;text-decoration:none;display:inline-flex}.status-widget[data-v-20197983]:hover{opacity:1}.status-widget__dot[data-v-20197983]{border-radius:50%;flex-shrink:0;width:.55rem;height:.55rem}.status-widget--ok .status-widget__dot[data-v-20197983]{background:var(--mw-ok-500)}.status-widget--degraded .status-widget__dot[data-v-20197983]{background:var(--mw-gold-500)}.status-widget--error .status-widget__dot[data-v-20197983]{background:var(--mw-danger-500)}
 /*$vite$:1*/

package/dist/components/AppTabNav.vue.d.ts

@@ -0,0 +1,16 @@
+export interface AppTab {
+    id: string;
+    label: string;
+}
+type __VLS_Props = {
+    tabs: AppTab[];
+    modelValue: string;
+    ariaLabel?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/CopyableAddress.vue.d.ts

@@ -1,13 +1,27 @@
 type __VLS_Props = {
+    /** The full value to copy (and to truncate for the default label). */
     address: string;
-    /** Show prefix…suffix truncation (default true). Full address shown in title attribute always. */
+    /** Prefix…suffix truncation for the default label (default true). Ignored when a slot is given. */
     truncate?: boolean;
-    /** [prefixChars, suffixChars] — only used when truncate is true. */
+    /** [prefixChars, suffixChars] — only used for the default label when truncate is true. */
     chars?: [number, number];
+    /** Accessible label / tooltip for the copy button (default "Copy"). */
+    label?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
     truncate: boolean;
     chars: [number, number];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ExplorerLink.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    /** Destination URL (opens in a new tab). */
+    href: string;
+    /** Value used for the truncated label + title; omit when providing slot content. */
+    value?: string;
+    /** Prefix…suffix truncation of `value` (default true). */
+    truncate?: boolean;
+    /** [prefixChars, suffixChars] — only used when truncate is true. */
+    chars?: [number, number];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    truncate: boolean;
+    chars: [number, number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/StatusWidget.vue.d.ts

@@ -7,8 +7,8 @@ type __VLS_Props = {
     pollInterval?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    apiUrl: string;
     href: string;
+    apiUrl: string;
     pollInterval: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/explorer.d.ts

@@ -0,0 +1,13 @@
+/** Sui networks SuiVision serves. */
+export type SuiNetwork = 'mainnet' | 'testnet' | 'devnet';
+/** The kind of Sui entity to link, mapped to SuiVision's URL path segment. */
+export type SuiExplorerKind = 'account' | 'object' | 'txblock';
+/**
+ * Build a SuiVision explorer URL for a Sui entity.
+ *
+ * @param kind - `account` (address), `object`, or `txblock` (transaction digest).
+ * @param id - The address / object id / transaction digest.
+ * @param network - Target network (default `testnet`).
+ * @returns The full SuiVision URL, e.g. `https://testnet.suivision.xyz/account/0x…`.
+ */
+export declare function suiExplorerUrl(kind: SuiExplorerKind, id: string, network?: SuiNetwork): string;

package/dist/index.d.ts

@@ -8,8 +8,13 @@ export { default as UiCard } from './components/UiCard.vue';
 export { default as UiSelect } from './components/UiSelect.vue';
 export { default as UiNotice } from './components/UiNotice.vue';
 export { default as SidebarItem } from './components/SidebarItem.vue';
+export { default as AppTabNav } from './components/AppTabNav.vue';
+export type { AppTab } from './components/AppTabNav.vue';
 export { default as CopyableAddress } from './components/CopyableAddress.vue';
+export { default as ExplorerLink } from './components/ExplorerLink.vue';
 export { default as StatusWidget } from './components/StatusWidget.vue';
+export { suiExplorerUrl } from './explorer.js';
+export type { SuiNetwork, SuiExplorerKind } from './explorer.js';
 export { useColorMode } from './composables/useColorMode.js';
 export type { ColorMode } from './composables/useColorMode.js';
 export type { PanelVariant, PanelColors } from './internal/panel.js';

package/dist/ui.js

@@ -1,6 +1,6 @@
-import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, normalizeStyle as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, useModel as ee, vModelSelect as te, watch as ne, withDirectives as g } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, normalizeClass as c, normalizeStyle as l, onMounted as ee, onUnmounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, useModel as te, vModelSelect as ne, watch as re, withDirectives as ie } from "vue";
 //#region src/internal/panel.ts
-function _(e, t) {
+function g(e, t) {
 	let n;
 	return n = e === "transparent" ? {
 		"--_bg": "transparent",
@@ -24,7 +24,7 @@ function _(e, t) {
 }
 //#endregion
 //#region src/components/AppHeader.vue?vue&type=script&setup=true&lang.ts
-var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae = { class: "mw-header__actions" }, oe = /*@__PURE__*/ a({
+var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se = { class: "mw-header__actions" }, ce = /*@__PURE__*/ o({
 	__name: "AppHeader",
 	props: {
 		variant: { default: "dark" },
@@ -35,33 +35,33 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 		}
 	},
 	setup(e) {
-		let n = e, a = t(() => _(n.variant, n.colors));
+		let n = e, a = t(() => g(n.variant, n.colors));
 		return (t, n) => (d(), r("header", {
-			class: s(["mw-header", [`mw-header--${e.variant}`, { "mw-header--sticky": e.sticky }]]),
-			style: c(a.value)
+			class: c(["mw-header", [`mw-header--${e.variant}`, { "mw-header--sticky": e.sticky }]]),
+			style: l(a.value)
 		}, [
-			i("div", re, [m(t.$slots, "brand", {}, void 0, !0)]),
-			i("div", ie, [m(t.$slots, "default", {}, void 0, !0)]),
-			i("div", ae, [m(t.$slots, "actions", {}, void 0, !0)])
+			i("div", ae, [m(t.$slots, "brand", {}, void 0, !0)]),
+			i("div", oe, [m(t.$slots, "default", {}, void 0, !0)]),
+			i("div", se, [m(t.$slots, "actions", {}, void 0, !0)])
 		], 6));
 	}
-}), v = (e, t) => {
+}), _ = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, y = /*#__PURE__*/ v(oe, [["__scopeId", "data-v-ad7cd1c5"]]), b = {
+}, v = /*#__PURE__*/ _(ce, [["__scopeId", "data-v-ad7cd1c5"]]), y = {
 	key: 0,
 	class: "mw-sidebar__head"
-}, x = {
+}, b = {
 	class: "mw-sidebar__nav",
 	"aria-label": "Primary"
-}, S = {
+}, x = {
 	key: 1,
 	class: "mw-sidebar__body"
-}, C = {
+}, S = {
 	key: 2,
 	class: "mw-sidebar__foot"
-}, w = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}, C = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "AppSidebar",
 	props: {
 		variant: { default: "dark" },
@@ -70,45 +70,45 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 	},
 	setup(e) {
 		let a = e, o = t(() => {
-			let e = _(a.variant, a.colors);
+			let e = g(a.variant, a.colors);
 			return a.width && (e["--mw-sidebar-width"] = a.width), e;
 		});
 		return (t, a) => (d(), r("aside", {
-			class: s(["mw-sidebar", `mw-sidebar--${e.variant}`]),
-			style: c(o.value)
+			class: c(["mw-sidebar", `mw-sidebar--${e.variant}`]),
+			style: l(o.value)
 		}, [
-			t.$slots.head ? (d(), r("div", b, [m(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
-			i("nav", x, [m(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.body ? (d(), r("div", S, [m(t.$slots, "body", {}, void 0, !0)])) : n("", !0),
-			t.$slots.foot ? (d(), r("div", C, [m(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
+			t.$slots.head ? (d(), r("div", y, [m(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
+			i("nav", b, [m(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.body ? (d(), r("div", x, [m(t.$slots, "body", {}, void 0, !0)])) : n("", !0),
+			t.$slots.foot ? (d(), r("div", S, [m(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
 		], 6));
 	}
-}), [["__scopeId", "data-v-23c3c7f3"]]), T = { class: "mw-footer__start" }, E = { class: "mw-footer__center" }, D = { class: "mw-footer__end" }, O = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-23c3c7f3"]]), w = { class: "mw-footer__start" }, T = { class: "mw-footer__center" }, E = { class: "mw-footer__end" }, D = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "AppFooter",
 	props: {
 		variant: { default: "transparent" },
 		colors: {}
 	},
 	setup(e) {
-		let n = e, a = t(() => _(n.variant, n.colors));
+		let n = e, a = t(() => g(n.variant, n.colors));
 		return (t, n) => (d(), r("footer", {
-			class: s(["mw-footer", `mw-footer--${e.variant}`]),
-			style: c(a.value)
+			class: c(["mw-footer", `mw-footer--${e.variant}`]),
+			style: l(a.value)
 		}, [
-			i("div", T, [m(t.$slots, "start", {}, void 0, !0)]),
-			i("div", E, [m(t.$slots, "default", {}, void 0, !0)]),
-			i("div", D, [m(t.$slots, "end", {}, void 0, !0)])
+			i("div", w, [m(t.$slots, "start", {}, void 0, !0)]),
+			i("div", T, [m(t.$slots, "default", {}, void 0, !0)]),
+			i("div", E, [m(t.$slots, "end", {}, void 0, !0)])
 		], 6));
 	}
-}), [["__scopeId", "data-v-c646b8e1"]]), k = {
+}), [["__scopeId", "data-v-c646b8e1"]]), O = {
 	class: "mw-mode",
 	role: "group",
 	"aria-label": "Colour mode"
-}, A = [
+}, k = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], j = { "aria-hidden": "true" }, M = { class: "mw-mode__label" }, N = /*#__PURE__*/ v(/* @__PURE__ */ a({
+], A = { "aria-hidden": "true" }, j = { class: "mw-mode__label" }, M = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "ColorModeControl",
 	props: {
 		modelValue: {},
@@ -127,18 +127,18 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 		}, a = {
 			light: "☀",
 			dark: "☾",
-			system: "◐"
+			system: "🖵"
 		};
-		return (o, c) => (d(), r("div", k, [(d(!0), r(e, null, p(t.modes, (e) => (d(), r("button", {
+		return (o, s) => (d(), r("div", O, [(d(!0), r(e, null, p(t.modes, (e) => (d(), r("button", {
 			key: e,
 			type: "button",
-			class: s(["mw-mode__btn", { "is-active": t.modelValue === e }]),
+			class: c(["mw-mode__btn", { "is-active": t.modelValue === e }]),
 			"aria-pressed": t.modelValue === e,
 			title: n[e],
 			onClick: (t) => o.$emit("update:modelValue", e)
-		}, [i("span", j, h(a[e]), 1), i("span", M, h(n[e]), 1)], 10, A))), 128))]));
+		}, [i("span", A, h(a[e]), 1), i("span", j, h(n[e]), 1)], 10, k))), 128))]));
 	}
-}), [["__scopeId", "data-v-e4a6bf1d"]]), P = ["type", "disabled"], F = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-186f8312"]]), N = ["type", "disabled"], P = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "UiButton",
 	props: {
 		variant: { default: "primary" },
@@ -152,26 +152,26 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 		return (t, n) => (d(), r("button", {
 			type: e.type,
 			disabled: e.disabled,
-			class: s(["mw-btn", `mw-btn--${e.variant}`])
-		}, [m(t.$slots, "default", {}, void 0, !0)], 10, P));
+			class: c(["mw-btn", `mw-btn--${e.variant}`])
+		}, [m(t.$slots, "default", {}, void 0, !0)], 10, N));
 	}
-}), [["__scopeId", "data-v-299de2c3"]]), I = { class: "mw-card" }, L = {
+}), [["__scopeId", "data-v-299de2c3"]]), F = { class: "mw-card" }, I = {
 	key: 0,
 	class: "mw-card__header"
-}, R = { class: "mw-card__title" }, z = { class: "mw-card__body" }, B = {
+}, L = { class: "mw-card__title" }, R = { class: "mw-card__body" }, z = {
 	key: 1,
 	class: "mw-card__footer"
-}, se = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}, B = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "UiCard",
 	props: { title: {} },
 	setup(e) {
-		return (t, a) => (d(), r("section", I, [
-			e.title || t.$slots.header ? (d(), r("header", L, [m(t.$slots, "header", {}, () => [i("h3", R, h(e.title), 1)], !0)])) : n("", !0),
-			i("div", z, [m(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.footer ? (d(), r("footer", B, [m(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
+		return (t, a) => (d(), r("section", F, [
+			e.title || t.$slots.header ? (d(), r("header", I, [m(t.$slots, "header", {}, () => [i("h3", L, h(e.title), 1)], !0)])) : n("", !0),
+			i("div", R, [m(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.footer ? (d(), r("footer", z, [m(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-fd2fd7ab"]]), V = { class: "mw-select" }, H = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-fd2fd7ab"]]), V = { class: "mw-select" }, H = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	inheritAttrs: !1,
 	__name: "UiSelect",
 	props: {
@@ -180,8 +180,8 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 	},
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = ee(e, "modelValue");
-		return (e, n) => (d(), r("div", V, [g(i("select", o(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [m(e.$slots, "default", {}, void 0, !0)], 16), [[te, t.value]]), n[1] ||= i("svg", {
+		let t = te(e, "modelValue");
+		return (e, n) => (d(), r("div", V, [ie(i("select", s(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [m(e.$slots, "default", {}, void 0, !0)], 16), [[ne, t.value]]), n[1] ||= i("svg", {
 			class: "mw-select__chevron",
 			xmlns: "http://www.w3.org/2000/svg",
 			width: "12",
@@ -190,7 +190,7 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 			"aria-hidden": "true"
 		}, [i("path", { d: "M1 1l5 5 5-5" })], -1)]));
 	}
-}), [["__scopeId", "data-v-b9468387"]]), U = ["role"], W = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-b9468387"]]), U = ["role"], W = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "UiNotice",
 	props: { type: {} },
 	setup(e) {
@@ -199,15 +199,15 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 			if (n.type === "ok") return "status";
 		});
 		return (t, n) => (d(), r("p", {
-			class: s(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
+			class: c(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
 			role: i.value
 		}, [m(t.$slots, "default", {}, void 0, !0)], 10, U));
 	}
-}), [["__scopeId", "data-v-6f53d0be"]]), G = ["disabled", "aria-current"], K = {
+}), [["__scopeId", "data-v-6f53d0be"]]), le = ["disabled", "aria-current"], ue = {
 	key: 0,
 	class: "sidebar-item__icon",
 	"aria-hidden": "true"
-}, ce = { class: "sidebar-item__label" }, le = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}, G = { class: "sidebar-item__label" }, de = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "SidebarItem",
 	props: {
 		label: {},
@@ -224,12 +224,57 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 	setup(e) {
 		return (t, a) => (d(), r("button", {
 			type: "button",
-			class: s(["sidebar-item", { "is-active": e.active }]),
+			class: c(["sidebar-item", { "is-active": e.active }]),
 			disabled: e.disabled,
 			"aria-current": e.active ? "page" : void 0
-		}, [e.icon ? (d(), r("span", K, h(e.icon), 1)) : n("", !0), i("span", ce, h(e.label), 1)], 10, G));
+		}, [e.icon ? (d(), r("span", ue, h(e.icon), 1)) : n("", !0), i("span", G, h(e.label), 1)], 10, le));
 	}
-}), [["__scopeId", "data-v-e15afdf7"]]), ue = ["title"], de = /*#__PURE__*/ v(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-e15afdf7"]]), fe = ["aria-label"], pe = ["aria-current", "onClick"], me = /*#__PURE__*/ _(/* @__PURE__ */ o({
+	__name: "AppTabNav",
+	props: {
+		tabs: {},
+		modelValue: {},
+		ariaLabel: {}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let i = n;
+		return (n, a) => (d(), r("nav", {
+			class: "mw-tab-nav",
+			"aria-label": t.ariaLabel
+		}, [(d(!0), r(e, null, p(t.tabs, (e) => (d(), r("button", {
+			key: e.id,
+			type: "button",
+			class: c(["mw-tab-nav__tab", { "mw-tab-nav__tab--active": t.modelValue === e.id }]),
+			"aria-current": t.modelValue === e.id ? "page" : void 0,
+			onClick: (t) => i("update:modelValue", e.id)
+		}, h(e.label), 11, pe))), 128))], 8, fe));
+	}
+}), [["__scopeId", "data-v-88758ede"]]), he = { class: "ca-root" }, ge = ["title"], _e = ["title", "aria-label"], ve = {
+	key: 0,
+	class: "ca-icon",
+	viewBox: "0 0 24 24",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+}, ye = {
+	key: 1,
+	class: "ca-icon",
+	viewBox: "0 0 24 24",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round",
+	"aria-hidden": "true"
+}, be = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "CopyableAddress",
 	props: {
 		address: {},
@@ -237,44 +282,81 @@ var re = { class: "mw-header__brand" }, ie = { class: "mw-header__center" }, ae
 			type: Boolean,
 			default: !0
 		},
-		chars: { default: () => [6, 4] }
+		chars: { default: () => [6, 4] },
+		label: { default: "Copy" }
 	},
 	setup(e) {
-		let n = e, i = f(!1), a = t(() => {
-			if (i.value) return "Copied!";
+		let n = e, o = f(!1), s = t(() => {
 			if (!n.truncate) return n.address;
 			let [e, t] = n.chars;
 			return `${n.address.slice(0, e)}…${n.address.slice(-t)}`;
 		});
-		async function o() {
-			await navigator.clipboard.writeText(n.address), i.value = !0, setTimeout(() => {
-				i.value = !1;
+		async function l() {
+			await navigator.clipboard.writeText(n.address), o.value = !0, setTimeout(() => {
+				o.value = !1;
 			}, 1500);
 		}
-		return (t, n) => (d(), r("button", {
+		return (t, n) => (d(), r("span", he, [i("span", {
+			class: "ca-value",
+			title: e.address
+		}, [m(t.$slots, "default", {}, () => [a(h(s.value), 1)], !0)], 8, ge), i("button", {
 			type: "button",
-			class: s(["ca-root", { "ca-root--copied": i.value }]),
-			title: e.address,
-			onClick: o
-		}, h(a.value), 11, ue));
+			class: c(["ca-copy", { "ca-copy--copied": o.value }]),
+			title: o.value ? "Copied!" : e.label,
+			"aria-label": o.value ? "Copied" : e.label,
+			onClick: l
+		}, [o.value ? (d(), r("svg", ve, [...n[0] ||= [i("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (d(), r("svg", ye, [...n[1] ||= [i("rect", {
+			x: "9",
+			y: "9",
+			width: "13",
+			height: "13",
+			rx: "2",
+			ry: "2"
+		}, null, -1), i("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }, null, -1)]]))], 10, _e)]));
+	}
+}), [["__scopeId", "data-v-08c3420b"]]), xe = ["href", "title"], Se = /*#__PURE__*/ _(/* @__PURE__ */ o({
+	__name: "ExplorerLink",
+	props: {
+		href: {},
+		value: {},
+		truncate: {
+			type: Boolean,
+			default: !0
+		},
+		chars: { default: () => [6, 4] }
+	},
+	setup(e) {
+		let n = e, i = t(() => {
+			if (!n.value) return "";
+			if (!n.truncate) return n.value;
+			let [e, t] = n.chars;
+			return `${n.value.slice(0, e)}…${n.value.slice(-t)}`;
+		});
+		return (t, n) => (d(), r("a", {
+			class: "el-root",
+			href: e.href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			title: e.value
+		}, [m(t.$slots, "default", {}, () => [a(h(i.value), 1)], !0)], 8, xe));
 	}
-}), [["__scopeId", "data-v-e2d23de9"]]), fe = /* @__PURE__ */ new Set([
+}), [["__scopeId", "data-v-7a44607e"]]), Ce = /* @__PURE__ */ new Set([
 	"operational",
 	"degraded",
 	"down",
 	"unknown"
 ]);
-function q(e) {
-	return typeof e == "string" && fe.has(e);
+function K(e) {
+	return typeof e == "string" && Ce.has(e);
 }
-function J(e) {
+function q(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e;
-	return !q(t.overall) || typeof t.generated_at != "string" || !Array.isArray(t.groups) ? null : e;
+	return !K(t.overall) || typeof t.generated_at != "string" || !Array.isArray(t.groups) ? null : e;
 }
 //#endregion
 //#region src/components/StatusWidget.vue?vue&type=script&setup=true&lang.ts
-var pe = ["href", "title"], me = { class: "status-widget__label" }, he = /*#__PURE__*/ v(/* @__PURE__ */ a({
+var we = ["href", "title"], Te = { class: "status-widget__label" }, Ee = /*#__PURE__*/ _(/* @__PURE__ */ o({
 	__name: "StatusWidget",
 	props: {
 		apiUrl: { default: "https://status.meddleware.co.uk/api/status" },
@@ -292,44 +374,54 @@ var pe = ["href", "title"], me = { class: "status-widget__label" }, he = /*#__PU
 			degraded: "Degraded",
 			down: "Major outage",
 			unknown: "Status unknown"
-		}, o = f("ok"), c = f("All systems operational"), p = null;
-		async function m() {
+		}, o = f("ok"), s = f("All systems operational"), l = null;
+		async function p() {
 			try {
 				let e = await fetch(t.apiUrl);
 				if (!e.ok) throw Error(`HTTP ${e.status}`);
-				let r = J(await e.json());
+				let r = q(await e.json());
 				if (!r) throw Error("unexpected response shape");
-				o.value = n[r.overall], c.value = a[r.overall];
+				o.value = n[r.overall], s.value = a[r.overall];
 			} catch {
-				o.value = "error", c.value = "Status unavailable";
+				o.value = "error", s.value = "Status unavailable";
 			}
 		}
-		return l(() => {
-			m(), p = setInterval(m, t.pollInterval);
+		return ee(() => {
+			p(), l = setInterval(p, t.pollInterval);
 		}), u(() => {
-			p !== null && clearInterval(p);
+			l !== null && clearInterval(l);
 		}), (t, n) => (d(), r("a", {
 			href: e.href,
 			target: "_blank",
 			rel: "noopener",
-			class: s(["status-widget", `status-widget--${o.value}`]),
-			title: `Platform status: ${c.value}`
+			class: c(["status-widget", `status-widget--${o.value}`]),
+			title: `Platform status: ${s.value}`
 		}, [n[0] ||= i("span", {
 			class: "status-widget__dot",
 			"aria-hidden": "true"
-		}, null, -1), i("span", me, h(c.value), 1)], 10, pe));
+		}, null, -1), i("span", Te, h(s.value), 1)], 10, we));
 	}
-}), [["__scopeId", "data-v-20197983"]]), Y = "mw-color-mode", X = f("system"), Z = !1;
-function ge() {
+}), [["__scopeId", "data-v-20197983"]]), J = {
+	mainnet: "https://suivision.xyz",
+	testnet: "https://testnet.suivision.xyz",
+	devnet: "https://devnet.suivision.xyz"
+};
+function De(e, t, n = "testnet") {
+	return `${J[n] ?? J.testnet}/${e}/${t}`;
+}
+//#endregion
+//#region src/composables/useColorMode.ts
+var Y = "mw-color-mode", X = f("system"), Z = !1;
+function Oe() {
 	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 function Q(e) {
-	return e === "dark" || e === "system" && ge();
+	return e === "dark" || e === "system" && Oe();
 }
 function $(e) {
 	typeof document > "u" || document.documentElement.setAttribute("data-theme", Q(e) ? "dark" : "light");
 }
-function _e(e = "system") {
+function ke(e = "system") {
 	if (!Z) {
 		Z = !0;
 		let t = null;
@@ -338,7 +430,7 @@ function _e(e = "system") {
 		} catch {}
 		X.value = t ?? e, $(X.value), typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
 			X.value === "system" && $("system");
-		}), ne(X, (e) => {
+		}), re(X, (e) => {
 			$(e);
 			try {
 				typeof localStorage < "u" && localStorage.setItem(Y, e);
@@ -359,4 +451,4 @@ function _e(e = "system") {
 	};
 }
 //#endregion
-export { O as AppFooter, y as AppHeader, w as AppSidebar, N as ColorModeControl, de as CopyableAddress, le as SidebarItem, he as StatusWidget, F as UiButton, se as UiCard, W as UiNotice, H as UiSelect, q as isStatusLevel, J as parseSnapshot, _e as useColorMode };
+export { D as AppFooter, v as AppHeader, C as AppSidebar, me as AppTabNav, M as ColorModeControl, be as CopyableAddress, Se as ExplorerLink, de as SidebarItem, Ee as StatusWidget, P as UiButton, B as UiCard, W as UiNotice, H as UiSelect, K as isStatusLevel, q as parseSnapshot, De as suiExplorerUrl, ke as useColorMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/ui",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Shared Vue 3 component library for @meddleware UIs \u2014 layout shell (header/sidebar/footer), colour-mode control, and primitives. Built on @meddleware/design-tokens.",
   "license": "0BSD",
   "type": "module",
@@ -23,7 +23,8 @@
   ],
   "scripts": {
     "build": "rm -rf dist && vue-tsc -p tsconfig.build.json && vite build",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "test": "vitest run"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -35,6 +36,7 @@
     "@vitejs/plugin-vue": "^6.0.8",
     "typescript": "^6.0.0",
     "vite": "^8.2.2",
+    "vitest": "~4.1.11",
     "vue": "^3.5.42",
     "vue-tsc": "~3.3.11"
   },