@meddleware/ui 0.1.27 → 0.1.29

package/dist/ui.js

@@ -1,30 +1,39 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as ee, onMounted as d, onUnmounted as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as te, toDisplayString as _, unref as v, useModel as ne, useSlots as re, vModelSelect as ie, watch as ae, withCtx as oe, withDirectives as se } from "vue";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onBeforeUnmount as d, onMounted as f, onUnmounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useCssVars as x, useId as S, useModel as C, useSlots as w, vModelSelect as T, watch as E, withCtx as D, withDirectives as O } from "vue";
 //#region src/internal/panel.ts
-function y(e, t) {
+function k(e, t) {
 	let n;
 	return n = e === "transparent" ? {
 		"--_bg": "transparent",
 		"--_surface": "transparent",
 		"--_text": "var(--text)",
 		"--_muted": "var(--muted)",
-		"--_border": "transparent"
+		"--_border": "transparent",
+		"--_ok": "var(--ok)",
+		"--_danger": "var(--danger)",
+		"--_info": "var(--info)"
 	} : e === "light" ? {
 		"--_bg": "var(--mw-panel-light-bg)",
 		"--_surface": "var(--mw-panel-light-surface)",
 		"--_text": "var(--mw-panel-light-text)",
 		"--_muted": "var(--mw-panel-light-muted)",
-		"--_border": "var(--mw-panel-light-border)"
+		"--_border": "var(--mw-panel-light-border)",
+		"--_ok": "var(--mw-panel-light-ok, #177542)",
+		"--_danger": "var(--mw-panel-light-danger, #b3261e)",
+		"--_info": "var(--mw-panel-light-info, #1558b5)"
 	} : {
 		"--_bg": "var(--mw-panel-dark-bg)",
 		"--_surface": "var(--mw-panel-dark-surface)",
 		"--_text": "var(--mw-panel-dark-text)",
 		"--_muted": "var(--mw-panel-dark-muted)",
-		"--_border": "var(--mw-panel-dark-border)"
-	}, t && (t.bg && (n["--_bg"] = t.bg), t.surface && (n["--_surface"] = t.surface), t.text && (n["--_text"] = t.text), t.muted && (n["--_muted"] = t.muted), t.border && (n["--_border"] = t.border)), n;
+		"--_border": "var(--mw-panel-dark-border)",
+		"--_ok": "var(--mw-panel-dark-ok, #5bb392)",
+		"--_danger": "var(--mw-panel-dark-danger, #f08a7e)",
+		"--_info": "var(--mw-panel-dark-info, #6ea8fe)"
+	}, t && (t.bg && (n["--_bg"] = t.bg), t.surface && (n["--_surface"] = t.surface), t.text && (n["--_text"] = t.text), t.muted && (n["--_muted"] = t.muted), t.border && (n["--_border"] = t.border), t.ok && (n["--_ok"] = t.ok), t.danger && (n["--_danger"] = t.danger), t.info && (n["--_info"] = t.info)), n;
 }
 //#endregion
 //#region src/components/AppHeader.vue?vue&type=script&setup=true&lang.ts
-var ce = { class: "mw-header__brand" }, le = { class: "mw-header__center" }, ue = { class: "mw-header__actions" }, de = /*@__PURE__*/ s({
+var A = /*@__PURE__*/ c({
 	__name: "AppHeader",
 	props: {
 		variant: { default: "dark" },
@@ -39,42 +48,40 @@ var ce = { class: "mw-header__brand" }, le = { class: "mw-header__center" }, ue
 		}
 	},
 	setup(e) {
-		let n = e, r = t(() => y(n.variant, n.colors)), o = m(!1), s = null;
-		return d(() => {
-			n.solidifyOnScroll && typeof window < "u" && (s = () => {
-				o.value = window.scrollY > 8;
-			}, s(), window.addEventListener("scroll", s, { passive: !0 }));
-		}), ee(() => {
-			s && window.removeEventListener("scroll", s);
-		}), (t, n) => (p(), i("header", {
-			class: l(["mw-header", [`mw-header--${e.variant}`, {
-				"mw-header--sticky": e.sticky,
-				"mw-header--scrolled": e.solidifyOnScroll && o.value
-			}]]),
-			style: u(r.value)
-		}, [
-			a("div", ce, [g(t.$slots, "brand", {}, void 0, !0)]),
-			a("div", le, [g(t.$slots, "default", {}, void 0, !0)]),
-			a("div", ue, [g(t.$slots, "actions", {}, void 0, !0)])
-		], 6));
-	}
-}), b = (e, t) => {
+		x((e) => ({
+			v207c6e6c: r.value["--_bg"],
+			f304fa44: r.value["--_surface"],
+			v25353d32: r.value["--_text"],
+			v2a36159c: r.value["--_muted"],
+			v65041df1: r.value["--_border"],
+			v20707ebe: r.value["--_ok"],
+			v49861e28: r.value["--_danger"],
+			v12e68073: r.value["--_info"]
+		}));
+		let n = e, r = t(() => k(n.variant, n.colors)), a = h(!1), o = null;
+		return f(() => {
+			n.solidifyOnScroll && typeof window < "u" && (o = () => {
+				a.value = window.scrollY > 8;
+			}, o(), window.addEventListener("scroll", o, { passive: !0 }));
+		}), d(() => {
+			o && window.removeEventListener("scroll", o);
+		}), (t, n) => (m(), i("header", { class: u(["mw-header", [`mw-header--${e.variant}`, {
+			"mw-header--sticky": e.sticky,
+			"mw-header--scrolled": e.solidifyOnScroll && a.value
+		}]]) }, [
+			_(t.$slots, "brand"),
+			_(t.$slots, "default"),
+			_(t.$slots, "actions")
+		], 2));
+	}
+}), j = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, x = /*#__PURE__*/ b(de, [["__scopeId", "data-v-a7df94dc"]]), S = {
-	key: 0,
-	class: "mw-sidebar__head"
-}, C = {
+}, ee = /*#__PURE__*/ j(A, [["__scopeId", "data-v-4c177b22"]]), te = {
 	class: "mw-sidebar__nav",
 	"aria-label": "Primary"
-}, w = {
-	key: 1,
-	class: "mw-sidebar__body"
-}, T = {
-	key: 2,
-	class: "mw-sidebar__foot"
-}, E = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, ne = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "AppSidebar",
 	props: {
 		variant: { default: "dark" },
@@ -82,24 +89,29 @@ var ce = { class: "mw-header__brand" }, le = { class: "mw-header__center" }, ue
 		width: {}
 	},
 	setup(e) {
-		let n = e, o = t(() => {
-			let e = y(n.variant, n.colors);
-			return n.width && (e["--mw-sidebar-width"] = n.width), e;
-		});
-		return (t, n) => (p(), i("aside", {
-			class: l(["mw-sidebar", `mw-sidebar--${e.variant}`]),
-			style: u(o.value)
-		}, [
-			t.$slots.head ? (p(), i("div", S, [g(t.$slots, "head", {}, void 0, !0)])) : r("", !0),
-			a("nav", C, [g(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.body ? (p(), i("div", w, [g(t.$slots, "body", {}, void 0, !0)])) : r("", !0),
-			t.$slots.foot ? (p(), i("div", T, [g(t.$slots, "foot", {}, void 0, !0)])) : r("", !0)
-		], 6));
-	}
-}), [["__scopeId", "data-v-a2b8405c"]]);
+		x((e) => ({
+			v71ead984: r.value["--_bg"],
+			fe385338: r.value["--_surface"],
+			v7d45f128: r.value["--_text"],
+			v130792a2: r.value["--_muted"],
+			d33b7caa: r.value["--_border"],
+			v71f0d15b: r.value["--_ok"],
+			v7ae441e2: r.value["--_danger"],
+			a1e36aa6: r.value["--_info"],
+			v4463291a: o.value
+		}));
+		let n = e, r = t(() => k(n.variant, n.colors)), o = t(() => n.width ?? "var(--mw-sidebar-width, 240px)");
+		return (t, n) => (m(), i("aside", { class: u(["mw-sidebar", `mw-sidebar--${e.variant}`]) }, [
+			_(t.$slots, "head", {}, void 0, !0),
+			a("nav", te, [_(t.$slots, "default", {}, void 0, !0)]),
+			_(t.$slots, "body", {}, void 0, !0),
+			_(t.$slots, "foot", {}, void 0, !0)
+		], 2));
+	}
+}), [["__scopeId", "data-v-30f2000a"]]);
 //#endregion
 //#region src/safe-href.ts
-function D(e) {
+function M(e) {
 	if (e) try {
 		let t = new URL(e);
 		if (t.protocol === "https:" || t.protocol === "http:" && (t.hostname === "localhost" || t.hostname === "127.0.0.1")) return e;
@@ -107,7 +119,11 @@ function D(e) {
 }
 //#endregion
 //#region src/components/AppFooter.vue?vue&type=script&setup=true&lang.ts
-var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = { class: "mw-footer__end" }, j = ["href"], M = ["href"], N = /*#__PURE__*/ b(/* @__PURE__ */ s({
+var re = {
+	key: 0,
+	class: "mw-footer__docs",
+	"aria-label": "Documentation"
+}, ie = ["href"], ae = ["href"], oe = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "AppFooter",
 	props: {
 		variant: { default: "transparent" },
@@ -116,42 +132,40 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 		devUrl: {}
 	},
 	setup(e) {
-		let n = e, o = t(() => y(n.variant, n.colors));
-		return (t, n) => (p(), i("footer", {
-			class: l(["mw-footer", `mw-footer--${e.variant}`]),
-			style: u(o.value)
-		}, [
-			a("div", O, [g(t.$slots, "start", {}, void 0, !0)]),
-			a("div", k, [g(t.$slots, "default", {}, void 0, !0)]),
-			a("div", A, [
-				g(t.$slots, "end", {}, void 0, !0),
-				e.docsUrl ? (p(), i("a", {
-					key: 0,
-					href: v(D)(e.docsUrl),
-					target: "_blank",
-					rel: "noopener noreferrer",
-					class: "mw-footer__docs-link"
-				}, "Documentation", 8, j)) : r("", !0),
-				e.devUrl ? (p(), i("a", {
-					key: 1,
-					href: v(D)(e.devUrl),
-					target: "_blank",
-					rel: "noopener noreferrer",
-					"aria-label": "Developer documentation",
-					class: "mw-footer__docs-link"
-				}, "Developer docs", 8, M)) : r("", !0)
-			])
-		], 6));
-	}
-}), [["__scopeId", "data-v-979579a9"]]), P = {
-	class: "mw-mode",
-	role: "group",
-	"aria-label": "Colour mode"
-}, F = [
+		x((e) => ({
+			v605673bd: a.value["--_bg"],
+			v08ecb7cb: a.value["--_surface"],
+			v796a1136: a.value["--_text"],
+			v4ed7a1c9: a.value["--_muted"],
+			v56d7d138: a.value["--_border"],
+			v605c6b94: a.value["--_ok"],
+			v8dd3d0ca: a.value["--_danger"],
+			v9e078ab4: a.value["--_info"]
+		}));
+		let n = e, a = t(() => k(n.variant, n.colors));
+		return (t, n) => (m(), i("footer", { class: u(["mw-footer", `mw-footer--${e.variant}`]) }, [
+			_(t.$slots, "start", {}, void 0, !0),
+			_(t.$slots, "default", {}, void 0, !0),
+			_(t.$slots, "end", {}, void 0, !0),
+			e.docsUrl || e.devUrl ? (m(), i("nav", re, [e.docsUrl ? (m(), i("a", {
+				key: 0,
+				href: b(M)(e.docsUrl),
+				target: "_blank",
+				rel: "noopener noreferrer"
+			}, "Documentation", 8, ie)) : r("", !0), e.devUrl ? (m(), i("a", {
+				key: 1,
+				href: b(M)(e.devUrl),
+				target: "_blank",
+				rel: "noopener noreferrer",
+				"aria-label": "Developer documentation"
+			}, "Developer docs", 8, ae)) : r("", !0)])) : r("", !0)
+		], 2));
+	}
+}), [["__scopeId", "data-v-6c5fa699"]]), se = { class: "mw-mode" }, ce = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], I = { "aria-hidden": "true" }, L = { class: "mw-mode__label" }, R = /*#__PURE__*/ b(/* @__PURE__ */ s({
+], le = { "aria-hidden": "true" }, ue = { class: "mw-mode__label" }, de = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "ColorModeControl",
 	props: {
 		modelValue: {},
@@ -172,16 +186,16 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 			dark: "☾",
 			system: "🖵"
 		};
-		return (o, s) => (p(), i("div", P, [(p(!0), i(e, null, h(t.modes, (e) => (p(), i("button", {
+		return (o, s) => (m(), i("fieldset", se, [s[0] ||= a("legend", { class: "mw-visually-hidden" }, "Colour mode", -1), (m(!0), i(e, null, g(t.modes, (e) => (m(), i("button", {
 			key: e,
 			type: "button",
-			class: l(["mw-mode__btn", { "is-active": t.modelValue === e }]),
+			class: u(["mw-mode__btn", { "is-active": t.modelValue === e }]),
 			"aria-pressed": t.modelValue === e,
 			title: n[e],
 			onClick: (t) => o.$emit("update:modelValue", e)
-		}, [a("span", I, _(r[e]), 1), a("span", L, _(n[e]), 1)], 10, F))), 128))]));
+		}, [a("span", le, y(r[e]), 1), a("span", ue, y(n[e]), 1)], 10, ce))), 128))]));
 	}
-}), [["__scopeId", "data-v-345f2b04"]]), z = ["type", "disabled"], B = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-e5cba7a7"]]), fe = ["type", "disabled"], pe = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiButton",
 	props: {
 		variant: { default: "primary" },
@@ -192,30 +206,29 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 		}
 	},
 	setup(e) {
-		return (t, n) => (p(), i("button", {
+		return (t, n) => (m(), i("button", {
 			type: e.type,
 			disabled: e.disabled,
-			class: l(["mw-btn", `mw-btn--${e.variant}`])
-		}, [g(t.$slots, "default", {}, void 0, !0)], 10, z));
+			class: u(["mw-btn", `mw-btn--${e.variant}`])
+		}, [_(t.$slots, "default", {}, void 0, !0)], 10, fe));
 	}
-}), [["__scopeId", "data-v-bc33cc23"]]), V = { class: "mw-card" }, H = {
+}), [["__scopeId", "data-v-bc33cc23"]]), me = { class: "mw-card" }, N = {
 	key: 0,
 	class: "mw-card__header"
-}, fe = { class: "mw-card__title" }, pe = { class: "mw-card__body" }, me = {
+}, P = { class: "mw-card__title" }, F = {
 	key: 1,
 	class: "mw-card__footer"
-}, he = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, I = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiCard",
 	props: { title: {} },
 	setup(e) {
-		return (t, n) => (p(), i("section", V, [
-			e.title || t.$slots.header ? (p(), i("header", H, [g(t.$slots, "header", {}, () => [a("h3", fe, _(e.title), 1)], !0)])) : r("", !0),
-			a("div", pe, [g(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.footer ? (p(), i("footer", me, [g(t.$slots, "footer", {}, void 0, !0)])) : r("", !0)
+		return (t, n) => (m(), i("section", me, [
+			e.title || t.$slots.header ? (m(), i("header", N, [_(t.$slots, "header", {}, () => [a("h3", P, y(e.title), 1)], !0)])) : r("", !0),
+			_(t.$slots, "default", {}, void 0, !0),
+			t.$slots.footer ? (m(), i("footer", F, [_(t.$slots, "footer", {}, void 0, !0)])) : r("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-883f87f5"]]), ge = { class: "mw-select" }, _e = /*#__PURE__*/ b(/* @__PURE__ */ s({
-	inheritAttrs: !1,
+}), [["__scopeId", "data-v-384b36cf"]]), L = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiSelect",
 	props: {
 		modelValue: {},
@@ -223,17 +236,13 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 	},
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = ne(e, "modelValue");
-		return (e, n) => (p(), i("div", ge, [se(a("select", c(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [g(e.$slots, "default", {}, void 0, !0)], 16), [[ie, t.value]]), n[1] ||= a("svg", {
-			class: "mw-select__chevron",
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "12",
-			height: "8",
-			viewBox: "0 0 12 8",
-			"aria-hidden": "true"
-		}, [a("path", { d: "M1 1l5 5 5-5" })], -1)]));
+		let t = C(e, "modelValue");
+		return (e, n) => O((m(), i("select", {
+			"onUpdate:modelValue": n[0] ||= (e) => t.value = e,
+			class: "mw-select"
+		}, [_(e.$slots, "default", {}, void 0, !0)], 512)), [[T, t.value]]);
 	}
-}), [["__scopeId", "data-v-3096db80"]]), ve = ["role"], ye = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-38fbd9b5"]]), R = ["role"], z = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiNotice",
 	props: { type: {} },
 	setup(e) {
@@ -241,16 +250,16 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 			if (n.type === "error") return "alert";
 			if (n.type === "ok") return "status";
 		});
-		return (t, n) => (p(), i("p", {
-			class: l(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
+		return (t, n) => (m(), i("p", {
+			class: u(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
 			role: r.value
-		}, [g(t.$slots, "default", {}, void 0, !0)], 10, ve));
+		}, [_(t.$slots, "default", {}, void 0, !0)], 10, R));
 	}
-}), [["__scopeId", "data-v-ee7fffb1"]]), be = ["disabled", "aria-current"], xe = {
+}), [["__scopeId", "data-v-ee7fffb1"]]), he = ["disabled", "aria-current"], ge = {
 	key: 0,
 	class: "sidebar-item__icon",
 	"aria-hidden": "true"
-}, Se = { class: "sidebar-item__label" }, Ce = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, _e = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "SidebarItem",
 	props: {
 		label: {},
@@ -265,52 +274,178 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 		}
 	},
 	setup(e) {
-		return (t, n) => (p(), i("button", {
+		return (t, n) => (m(), i("button", {
 			type: "button",
-			class: l(["sidebar-item", { "is-active": e.active }]),
+			class: u(["sidebar-item", { "is-active": e.active }]),
 			disabled: e.disabled,
 			"aria-current": e.active ? "page" : void 0
-		}, [e.icon ? (p(), i("span", xe, _(e.icon), 1)) : r("", !0), a("span", Se, _(e.label), 1)], 10, be));
+		}, [e.icon ? (m(), i("span", ge, y(e.icon), 1)) : r("", !0), o(" " + y(e.label), 1)], 10, he));
 	}
-}), [["__scopeId", "data-v-8da2d583"]]), we = ["aria-label"], Te = {
-	class: "sidebar-group__label",
-	"aria-hidden": "true"
-}, Ee = { class: "sidebar-group__items" }, De = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-c8ae7e5f"]]), ve = { class: "sidebar-group__label" }, ye = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "SidebarGroup",
 	props: {
 		label: {},
 		level: { default: 1 }
 	},
 	setup(e) {
-		return (t, n) => (p(), i("div", {
-			class: l(["sidebar-group", `sidebar-group--l${e.level}`]),
-			role: "group",
-			"aria-label": e.label
-		}, [a("div", Te, _(e.label), 1), a("div", Ee, [g(t.$slots, "default", {}, void 0, !0)])], 10, we));
+		return (t, n) => (m(), i("fieldset", { class: u(["sidebar-group", `sidebar-group--l${e.level}`]) }, [a("legend", ve, y(e.label), 1), _(t.$slots, "default", {}, void 0, !0)], 2));
 	}
-}), [["__scopeId", "data-v-c8f6c8b2"]]), Oe = ["aria-label"], ke = ["aria-current", "onClick"], Ae = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-95acc444"]]);
+//#endregion
+//#region src/tabs.ts
+function B(e, t) {
+	return {
+		tab: `${e}-tab-${t}`,
+		panel: `${e}-panel-${t}`
+	};
+}
+//#endregion
+//#region src/components/AppTabNav.vue?vue&type=script&setup=true&lang.ts
+var be = ["aria-label"], xe = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"onClick",
+	"onKeydown"
+], Se = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "AppTabNav",
 	props: {
 		tabs: {},
 		modelValue: {},
+		idPrefix: {},
 		ariaLabel: {},
-		variant: { default: "underline" }
+		variant: { default: "underline" },
+		size: { default: "md" },
+		allPanels: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let r = n;
-		return (n, a) => (p(), i("nav", {
-			class: l(["mw-tab-nav", { "mw-tab-nav--raised": t.variant === "raised" }]),
+		let r = t, o = n, s = [];
+		function c(e) {
+			let t = r.tabs[e];
+			t && (o("update:modelValue", t.id), s[e]?.focus());
+		}
+		function l(e, t) {
+			let n = r.tabs.length - 1, i = e.key === "ArrowRight" ? t === n ? 0 : t + 1 : e.key === "ArrowLeft" ? t === 0 ? n : t - 1 : e.key === "Home" ? 0 : e.key === "End" ? n : -1;
+			i < 0 || (e.preventDefault(), c(i));
+		}
+		return (n, r) => (m(), i("menu", {
+			role: "tablist",
+			class: u(["mw-tab-nav", {
+				"mw-tab-nav--raised": t.variant === "raised",
+				"mw-tab-nav--lg": t.size === "lg"
+			}]),
 			"aria-label": t.ariaLabel
-		}, [(p(!0), i(e, null, h(t.tabs, (e) => (p(), i("button", {
+		}, [(m(!0), i(e, null, g(t.tabs, (e, n) => (m(), i("li", {
 			key: e.id,
+			role: "presentation",
+			class: "mw-tab-nav__item"
+		}, [a("button", {
+			id: b(B)(t.idPrefix, e.id).tab,
+			ref_for: !0,
+			ref: (e) => {
+				s[n] = e;
+			},
 			type: "button",
-			class: l(["mw-tab-nav__tab", { "mw-tab-nav__tab--active": t.modelValue === e.id }]),
-			"aria-current": t.modelValue === e.id ? "page" : void 0,
-			onClick: (t) => r("update:modelValue", e.id)
-		}, _(e.label), 11, ke))), 128))], 10, Oe));
-	}
-}), [["__scopeId", "data-v-00b3c666"]]), je = { class: "ca-root" }, Me = ["title"], Ne = ["title", "aria-label"], Pe = {
+			role: "tab",
+			class: u(["mw-tab-nav__tab", { "mw-tab-nav__tab--active": t.modelValue === e.id }]),
+			"aria-selected": t.modelValue === e.id,
+			"aria-controls": t.allPanels || t.modelValue === e.id ? b(B)(t.idPrefix, e.id).panel : void 0,
+			tabindex: t.modelValue === e.id ? 0 : -1,
+			onClick: (t) => o("update:modelValue", e.id),
+			onKeydown: (e) => l(e, n)
+		}, y(e.label), 43, xe)]))), 128))], 10, be));
+	}
+}), [["__scopeId", "data-v-fbb7de4c"]]), Ce = ["id", "aria-labelledby"], we = /*#__PURE__*/ j(/* @__PURE__ */ c({
+	__name: "UiTabPanel",
+	props: {
+		idPrefix: {},
+		tab: {}
+	},
+	setup(e) {
+		let n = e, r = t(() => B(n.idPrefix, n.tab));
+		return (e, t) => (m(), i("section", {
+			id: r.value.panel,
+			role: "tabpanel",
+			"aria-labelledby": r.value.tab,
+			tabindex: "0",
+			class: "mw-tab-panel"
+		}, [_(e.$slots, "default", {}, void 0, !0)], 8, Ce));
+	}
+}), [["__scopeId", "data-v-add194c8"]]), Te = ["aria-labelledby"], Ee = { class: "mw-dialog__content" }, De = { class: "mw-dialog__header" }, Oe = ["id"], ke = ["aria-label"], Ae = {
+	key: 0,
+	class: "mw-dialog__actions"
+}, je = /*#__PURE__*/ j(/* @__PURE__ */ c({
+	__name: "UiDialog",
+	props: /*@__PURE__*/ l({
+		title: {},
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		closeLabel: { default: "Close" },
+		width: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["close"], ["update:open"]),
+	setup(e, { expose: n, emit: s }) {
+		x((e) => ({ ce627f2e: v.value }));
+		let c = C(e, "open"), l = e, u = s, p = h(null), g = S(), v = t(() => l.width ?? "min(420px, 90vw)"), w = typeof HTMLDialogElement < "u" && "closedBy" in HTMLDialogElement.prototype;
+		function T(e = "") {
+			p.value?.open && p.value.close(e);
+		}
+		function D(e) {
+			let t = p.value;
+			t && (e && !t.open ? t.showModal() : !e && t.open && t.close());
+		}
+		function O() {
+			p.value?.setAttribute("closedby", l.dismissible ? "any" : "none");
+		}
+		function k(e) {
+			l.dismissible && e.target === p.value && T();
+		}
+		function A(e) {
+			l.dismissible || e.preventDefault();
+		}
+		function j() {
+			c.value = !1, u("close", p.value?.returnValue ?? "");
+		}
+		return f(() => {
+			O(), w || p.value?.addEventListener("click", k), D(c.value);
+		}), d(() => {
+			p.value?.removeEventListener("click", k);
+		}), E(c, D, { flush: "post" }), E(() => l.dismissible, O), n({ close: T }), (t, n) => (m(), i("dialog", {
+			ref_key: "el",
+			ref: p,
+			class: "mw-dialog",
+			"aria-labelledby": b(g),
+			onCancel: A,
+			onClose: j
+		}, [a("article", Ee, [
+			a("header", De, [a("h2", {
+				id: b(g),
+				class: "mw-dialog__title"
+			}, [_(t.$slots, "title", {}, () => [o(y(e.title), 1)], !0)], 8, Oe), e.dismissible ? (m(), i("button", {
+				key: 0,
+				type: "button",
+				class: "mw-dialog__close",
+				"aria-label": e.closeLabel,
+				onClick: n[0] ||= (e) => T()
+			}, "×", 8, ke)) : r("", !0)]),
+			_(t.$slots, "default", {}, void 0, !0),
+			t.$slots.actions ? (m(), i("footer", Ae, [_(t.$slots, "actions", { close: T }, void 0, !0)])) : r("", !0)
+		])], 40, Te));
+	}
+}), [["__scopeId", "data-v-78973168"]]), Me = { class: "ca-root" }, Ne = ["title"], Pe = ["title", "aria-label"], Fe = {
 	key: 0,
 	class: "ca-icon",
 	viewBox: "0 0 24 24",
@@ -322,7 +457,7 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round",
 	"aria-hidden": "true"
-}, Fe = {
+}, Ie = {
 	key: 1,
 	class: "ca-icon",
 	viewBox: "0 0 24 24",
@@ -334,7 +469,7 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round",
 	"aria-hidden": "true"
-}, Ie = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, Le = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "CopyableAddress",
 	props: {
 		address: {},
@@ -346,35 +481,40 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 		label: { default: "Copy" }
 	},
 	setup(e) {
-		let n = e, r = m(!1), s = t(() => {
+		let n = e, r = h(!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 c() {
-			await navigator.clipboard.writeText(n.address), r.value = !0, setTimeout(() => {
+			try {
+				await navigator.clipboard.writeText(n.address);
+			} catch {
+				return;
+			}
+			r.value = !0, setTimeout(() => {
 				r.value = !1;
 			}, 1500);
 		}
-		return (t, n) => (p(), i("span", je, [a("span", {
+		return (t, n) => (m(), i("span", Me, [a("span", {
 			class: "ca-value",
 			title: e.address
-		}, [g(t.$slots, "default", {}, () => [o(_(s.value), 1)], !0)], 8, Me), a("button", {
+		}, [_(t.$slots, "default", {}, () => [o(y(s.value), 1)], !0)], 8, Ne), a("button", {
 			type: "button",
-			class: l(["ca-copy", { "ca-copy--copied": r.value }]),
+			class: u(["ca-copy", { "ca-copy--copied": r.value }]),
 			title: r.value ? "Copied!" : e.label,
 			"aria-label": r.value ? "Copied" : e.label,
 			onClick: c
-		}, [r.value ? (p(), i("svg", Pe, [...n[0] ||= [a("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (p(), i("svg", Fe, [...n[1] ||= [a("rect", {
+		}, [r.value ? (m(), i("svg", Fe, [...n[0] ||= [a("polyline", { points: "20 6 9 17 4 12" }, null, -1)]])) : (m(), i("svg", Ie, [...n[1] ||= [a("rect", {
 			x: "9",
 			y: "9",
 			width: "13",
 			height: "13",
 			rx: "2",
 			ry: "2"
-		}, null, -1), a("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, Ne)]));
+		}, null, -1), a("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, Pe)]));
 	}
-}), [["__scopeId", "data-v-b43dabdd"]]), Le = ["href", "title"], Re = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-56006bd1"]]), Re = ["href", "title"], ze = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "ExplorerLink",
 	props: {
 		href: {},
@@ -392,18 +532,18 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 			let [e, t] = n.chars;
 			return `${n.value.slice(0, e)}…${n.value.slice(-t)}`;
 		});
-		return (t, n) => (p(), i("a", {
+		return (t, n) => (m(), i("a", {
 			class: "el-root",
-			href: v(D)(e.href),
+			href: b(M)(e.href),
 			target: "_blank",
 			rel: "noopener noreferrer",
 			title: e.value
-		}, [g(t.$slots, "default", {}, () => [o(_(r.value), 1)], !0)], 8, Le));
+		}, [_(t.$slots, "default", {}, () => [o(y(r.value), 1)], !0)], 8, Re));
 	}
-}), [["__scopeId", "data-v-073d1bbe"]]), ze = { class: "copyright-line" }, Be = ["href", "aria-label"], Ve = { key: 0 }, He = { key: 1 }, Ue = {
+}), [["__scopeId", "data-v-073d1bbe"]]), Be = { class: "copyright-line" }, Ve = ["href", "aria-label"], He = { key: 0 }, Ue = { key: 1 }, We = {
 	key: 2,
 	class: "kopimi-symbol"
-}, We = { class: "text-content" }, Ge = { key: 0 }, Ke = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, Ge = { class: "text-content" }, Ke = { key: 0 }, qe = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "CopyrightLine",
 	props: {
 		organisationName: {},
@@ -414,14 +554,18 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 		symbolLabel: {}
 	},
 	setup(e) {
-		let n = e, s = t(() => n.symbolVariant), c = t(() => n.symbolHref || (s.value === "kopimi" ? "/legal/powr.broccoli-kopimi.pdf" : s.value === "copyleft" ? "/legal/copyleft.html" : "/legal/copyright.html")), l = t(() => n.symbolLabel || (s.value === "kopimi" ? "Kopimi legal notice" : s.value === "copyleft" ? "Copyleft legal notice" : "Copyright legal notice")), u = t(() => n.rightsStatement === "" ? "" : n.rightsStatement === "none" ? "No rights reserved." : n.rightsStatement === "all" || !n.rightsStatement ? "All rights reserved." : n.rightsStatement === "jam" ? "All jams preserved." : n.rightsStatement);
-		return (t, n) => (p(), i("small", ze, [a("a", {
-			href: c.value,
+		let n = e, s = t(() => n.symbolVariant);
+		function c(e) {
+			return /^\/(?![/\\])/.test(e) ? e : M(e);
+		}
+		let l = t(() => (n.symbolHref ? c(n.symbolHref) : void 0) || (s.value === "kopimi" ? "/legal/powr.broccoli-kopimi.pdf" : s.value === "copyleft" ? "/legal/copyleft.html" : "/legal/copyright.html")), u = t(() => n.symbolLabel || (s.value === "kopimi" ? "Kopimi legal notice" : s.value === "copyleft" ? "Copyleft legal notice" : "Copyright legal notice")), d = t(() => n.rightsStatement === "" ? "" : n.rightsStatement === "none" ? "No rights reserved." : n.rightsStatement === "all" || !n.rightsStatement ? "All rights reserved." : n.rightsStatement === "jam" ? "All jams preserved." : n.rightsStatement);
+		return (t, n) => (m(), i("small", Be, [a("a", {
+			href: l.value,
 			class: "symbol-link",
 			target: "_blank",
 			rel: "noopener noreferrer",
-			"aria-label": l.value
-		}, [s.value === "copyright" ? (p(), i("span", Ve, "©")) : s.value === "copyleft" ? (p(), i("span", He, "🄯")) : s.value === "kopimi" ? (p(), i("span", Ue, [...n[0] ||= [a("svg", {
+			"aria-label": u.value
+		}, [s.value === "copyright" ? (m(), i("span", He, "©")) : s.value === "copyleft" ? (m(), i("span", Ue, "🄯")) : s.value === "kopimi" ? (m(), i("span", We, [...n[0] ||= [a("svg", {
 			viewBox: "0 0 24 24",
 			width: "1em",
 			height: "1em",
@@ -441,58 +585,53 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 			"font-family": "system-ui, sans-serif",
 			"font-size": "11",
 			fill: "currentColor"
-		}, " C ")], -1)]])) : r("", !0)], 8, Be), a("span", We, [o(_(e.year) + " " + _(e.organisationName) + ".", 1), u.value ? (p(), i("span", Ge, _(`
-        ${u.value}`), 1)) : r("", !0)])]));
+		}, " C ")], -1)]])) : r("", !0)], 8, Ve), a("span", Ge, [o(y(e.year) + " " + y(e.organisationName) + ".", 1), d.value ? (m(), i("span", Ke, y(`
+        ${d.value}`), 1)) : r("", !0)])]));
 	}
-}), [["__scopeId", "data-v-44b327f4"]]), qe = {
+}), [["__scopeId", "data-v-464082bf"]]), Je = {
 	class: "ui-stepper",
 	role: "list"
-}, Je = {
-	key: 0,
-	"aria-hidden": "true"
-}, Ye = {
+}, Ye = ["aria-current"], Xe = ["aria-label", "onClick"], Ze = {
 	key: 1,
+	class: "ui-stepper__badge",
 	"aria-hidden": "true"
-}, Xe = { class: "ui-stepper__label" }, Ze = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, Qe = { class: "ui-stepper__label" }, $e = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiStepper",
 	props: {
 		steps: {},
 		modelValue: {}
 	},
 	emits: ["update:modelValue"],
-	setup(t, { emit: r }) {
-		let o = t, s = r;
-		function c(e) {
-			return e < o.modelValue ? "done" : e === o.modelValue ? "active" : "upcoming";
+	setup(t, { emit: n }) {
+		let r = t, o = n;
+		function s(e) {
+			return e < r.modelValue ? "done" : e === r.modelValue ? "active" : "upcoming";
 		}
-		function u(e) {
-			e < o.modelValue && s("update:modelValue", e);
+		function c(e) {
+			e < r.modelValue && o("update:modelValue", e);
 		}
-		return (r, o) => (p(), i("ol", qe, [(p(!0), i(e, null, h(t.steps, (e, t) => (p(), i("li", {
+		return (n, r) => (m(), i("ol", Je, [(m(!0), i(e, null, g(t.steps, (e, t) => (m(), i("li", {
 			key: e.id,
-			class: l(["ui-stepper__step", `is-${c(t)}`])
-		}, [(p(), n(te(c(t) === "done" ? "button" : "span"), {
+			class: u(["ui-stepper__step", `is-${s(t)}`]),
+			"aria-current": s(t) === "active" ? "step" : void 0
+		}, [s(t) === "done" ? (m(), i("button", {
+			key: 0,
+			type: "button",
 			class: "ui-stepper__badge",
-			type: c(t) === "done" ? "button" : void 0,
-			"aria-label": c(t) === "done" ? `Back to ${e.label}` : void 0,
-			"aria-current": c(t) === "active" ? "step" : void 0,
-			onClick: (e) => c(t) === "done" && u(t)
-		}, {
-			default: oe(() => [c(t) === "done" ? (p(), i("span", Je, "✓")) : (p(), i("span", Ye, _(t + 1), 1))]),
-			_: 2
-		}, 1032, [
-			"type",
-			"aria-label",
-			"aria-current",
-			"onClick"
-		])), a("span", Xe, _(e.label), 1)], 2))), 128))]));
-	}
-}), [["__scopeId", "data-v-33717fc3"]]), Qe = ["aria-label"], $e = ["title"], et = [
+			"aria-label": `Back to ${e.label}`,
+			onClick: (e) => c(t)
+		}, "✓", 8, Xe)) : (m(), i("span", Ze, y(t + 1), 1)), a("span", Qe, y(e.label), 1)], 10, Ye))), 128))]));
+	}
+}), [["__scopeId", "data-v-6f5db325"]]), et = { class: "mw-seg" }, tt = {
+	key: 0,
+	class: "mw-visually-hidden"
+}, nt = ["title"], rt = [
+	"name",
 	"value",
 	"checked",
 	"disabled",
 	"onChange"
-], tt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+], it = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiSegmentedControl",
 	props: {
 		options: {},
@@ -501,49 +640,43 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let r = n;
-		return (n, s) => (p(), i("div", {
-			class: "mw-seg",
-			role: "group",
-			"aria-label": t.ariaLabel
-		}, [(p(!0), i(e, null, h(t.options, (e) => (p(), i("label", {
+		let s = n, c = S();
+		return (n, l) => (m(), i("fieldset", et, [t.ariaLabel ? (m(), i("legend", tt, y(t.ariaLabel), 1)) : r("", !0), (m(!0), i(e, null, g(t.options, (e) => (m(), i("label", {
 			key: e.id,
-			class: l(["mw-seg__item", {
+			class: u(["mw-seg__item", {
 				"mw-seg__item--active": t.modelValue === e.id,
 				"mw-seg__item--disabled": e.disabled
 			}]),
 			title: e.title
 		}, [a("input", {
 			type: "radio",
+			name: b(c),
 			value: e.id,
 			checked: t.modelValue === e.id,
 			disabled: e.disabled,
-			onChange: (t) => r("update:modelValue", e.id)
-		}, null, 40, et), o(" " + _(e.label), 1)], 10, $e))), 128))], 8, Qe));
+			onChange: (t) => s("update:modelValue", e.id)
+		}, null, 40, rt), o(" " + y(e.label), 1)], 10, nt))), 128))]));
 	}
-}), [["__scopeId", "data-v-0dacb6ea"]]), nt = { class: "mw-field-hint" }, rt = ["aria-describedby"], it = ["id"], at = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-430ffdd6"]]), at = { class: "mw-field-hint" }, ot = ["aria-describedby"], st = ["id"], ct = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiFieldHint",
 	props: { fieldId: {} },
 	setup(e) {
 		function t(e) {
 			e.key === "Escape" && e.currentTarget.blur();
 		}
-		return (n, r) => (p(), i("span", nt, [a("button", {
+		return (n, r) => (m(), i("span", at, [a("button", {
 			type: "button",
 			class: "mw-field-hint__btn",
 			"aria-describedby": `${e.fieldId}-hint`,
 			"aria-label": "Help",
 			onKeydown: t
-		}, "?", 40, rt), a("span", {
+		}, "?", 40, ot), a("span", {
 			id: `${e.fieldId}-hint`,
 			role: "tooltip",
 			class: "mw-field-hint__tip"
-		}, [g(n.$slots, "default", {}, void 0, !0)], 8, it)]));
+		}, [_(n.$slots, "default", {}, void 0, !0)], 8, st)]));
 	}
-}), [["__scopeId", "data-v-29d9a629"]]), ot = { class: "mw-form-field" }, st = ["for"], ct = {
-	key: 0,
-	class: "mw-form-field__hint"
-}, lt = ["id"], ut = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-29d9a629"]]), lt = { class: "mw-form-field" }, ut = ["for"], dt = ["id"], ft = ["id"], pt = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiFormField",
 	props: {
 		id: {},
@@ -552,120 +685,183 @@ var O = { class: "mw-footer__start" }, k = { class: "mw-footer__center" }, A = {
 		hint: {}
 	},
 	setup(e) {
-		let n = e, s = t(() => `${n.id}-err`), c = t(() => ({
+		let n = e, o = t(() => `${n.id}-err`), s = t(() => `${n.id}-hint-text`), c = t(() => ({
 			id: n.id,
 			"aria-invalid": n.error ? !0 : void 0,
-			"aria-describedby": n.error ? s.value : void 0
+			"aria-describedby": n.error ? o.value : n.hint ? s.value : void 0
 		}));
-		return (t, n) => (p(), i("div", ot, [
-			a("label", { for: e.id }, [o(_(e.label), 1), g(t.$slots, "label-suffix", {}, void 0, !0)], 8, st),
-			g(t.$slots, "default", { attrs: c.value }, void 0, !0),
-			e.hint && !e.error ? (p(), i("p", ct, _(e.hint), 1)) : r("", !0),
-			e.error ? (p(), i("p", {
-				key: 1,
+		return (t, n) => (m(), i("p", lt, [
+			a("label", {
+				for: e.id,
+				class: "mw-form-field__label"
+			}, y(e.label), 9, ut),
+			_(t.$slots, "label-suffix"),
+			_(t.$slots, "default", { attrs: c.value }),
+			e.hint && !e.error ? (m(), i("small", {
+				key: 0,
 				id: s.value,
+				class: "mw-form-field__hint"
+			}, y(e.hint), 9, dt)) : r("", !0),
+			e.error ? (m(), i("small", {
+				key: 1,
+				id: o.value,
 				class: "mw-form-field__error"
-			}, _(e.error), 9, lt)) : r("", !0)
+			}, y(e.error), 9, ft)) : r("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-c22333c7"]]), dt = { class: "mw-panel" }, ft = {
-	key: 0,
-	class: "mw-panel__head"
-}, pt = { class: "mw-panel__body" }, mt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-5aef34d9"]]), mt = { class: "mw-tool-intro" }, ht = /*#__PURE__*/ j(/* @__PURE__ */ c({
+	__name: "UiToolIntro",
+	setup(e) {
+		return (e, t) => (m(), i("p", mt, [_(e.$slots, "default", {}, void 0, !0)]));
+	}
+}), [["__scopeId", "data-v-9a5436b9"]]), gt = { class: "mw-panel" }, _t = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiPanel",
-	props: { title: {} },
+	props: {
+		title: {},
+		level: { default: 2 }
+	},
 	setup(e) {
-		return (t, n) => (p(), i("div", dt, [e.title || t.$slots.head ? (p(), i("div", ft, [g(t.$slots, "head", {}, () => [o(_(e.title), 1)], !0)])) : r("", !0), a("div", pt, [g(t.$slots, "default", {}, void 0, !0)])]));
+		let a = e, s = w(), c = t(() => !!(a.title || s.title));
+		return (t, a) => (m(), i("section", gt, [c.value ? (m(), n(v(`h${e.level}`), {
+			key: 0,
+			class: "mw-panel__title"
+		}, {
+			default: D(() => [_(t.$slots, "title", {}, () => [o(y(e.title), 1)], !0)]),
+			_: 3
+		})) : r("", !0), _(t.$slots, "default", {}, void 0, !0)]));
 	}
-}), [["__scopeId", "data-v-d112e62d"]]), ht = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-62fac524"]]), vt = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiBadge",
 	props: { variant: { default: "neutral" } },
 	setup(e) {
-		return (t, n) => (p(), i("span", { class: l(["mw-badge", `mw-badge--${e.variant}`]) }, [g(t.$slots, "default", {}, void 0, !0)], 2));
-	}
-}), [["__scopeId", "data-v-5aa44ef5"]]), gt = { class: "mw-toolbar" }, _t = /*#__PURE__*/ b(/* @__PURE__ */ s({
-	__name: "UiToolbar",
-	setup(e) {
-		return (e, t) => (p(), i("div", gt, [g(e.$slots, "default", {}, void 0, !0)]));
+		return (t, n) => (m(), i("span", { class: u(["mw-badge", `mw-badge--${e.variant}`]) }, [_(t.$slots, "default", {}, void 0, !0)], 2));
 	}
-}), [["__scopeId", "data-v-827466de"]]), vt = {
+}), [["__scopeId", "data-v-5aa44ef5"]]), yt = {
 	type: "button",
 	class: "mw-toolbar-btn"
-}, yt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, V = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiToolbarButton",
 	setup(e) {
-		return (e, t) => (p(), i("button", vt, [g(e.$slots, "default", {}, void 0, !0)]));
+		return (e, t) => (m(), i("button", yt, [_(e.$slots, "default", {}, void 0, !0)]));
 	}
-}), [["__scopeId", "data-v-d5f19134"]]), bt = { class: "mw-stat-grid" }, xt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-d5f19134"]]), bt = { class: "mw-toolbar" }, xt = /*#__PURE__*/ j(/* @__PURE__ */ c({
+	__name: "UiToolbar",
+	props: { actions: {} },
+	emits: ["action"],
+	setup(t, { emit: n }) {
+		let r = n;
+		return (n, a) => (m(), i("menu", bt, [(m(!0), i(e, null, g(t.actions, (e) => (m(), i("li", { key: e.id }, [s(V, {
+			disabled: e.disabled,
+			onClick: (t) => r("action", e.id)
+		}, {
+			default: D(() => [o(y(e.label), 1)]),
+			_: 2
+		}, 1032, ["disabled", "onClick"])]))), 128))]));
+	}
+}), [["__scopeId", "data-v-170c8eb5"]]), St = { class: "mw-stat-grid" }, Ct = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiStatGrid",
 	setup(e) {
-		return (e, t) => (p(), i("div", bt, [g(e.$slots, "default", {}, void 0, !0)]));
+		return (e, t) => (m(), i("dl", St, [_(e.$slots, "default", {}, void 0, !0)]));
 	}
-}), [["__scopeId", "data-v-f481948b"]]), St = { class: "mw-stat-grid__label" }, Ct = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-3608575d"]]), wt = { class: "mw-stat-grid__label" }, Tt = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiStatRow",
 	props: {
 		label: {},
 		align: { default: "right" }
 	},
 	setup(t) {
-		return (n, r) => (p(), i(e, null, [a("span", St, _(t.label), 1), a("span", { class: l(["mw-stat-grid__value", { "mw-stat-grid__value--left": t.align === "left" }]) }, [g(n.$slots, "default", {}, void 0, !0)], 2)], 64));
+		return (n, r) => (m(), i(e, null, [a("dt", wt, y(t.label), 1), a("dd", { class: u(["mw-stat-grid__value", { "mw-stat-grid__value--left": t.align === "left" }]) }, [_(n.$slots, "default", {}, void 0, !0)], 2)], 64));
 	}
-}), [["__scopeId", "data-v-4c872fab"]]), wt = { class: "mw-data-table-wrap" }, Tt = { class: "mw-data-table" }, Et = {
+}), [["__scopeId", "data-v-829f7772"]]), Et = { class: "mw-data-table-wrap" }, Dt = { class: "mw-data-table" }, Ot = {
 	key: 0,
 	class: "mw-data-table__empty"
-}, Dt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, kt = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiDataTable",
 	props: { empty: {} },
 	setup(e) {
-		let t = re();
-		return (n, o) => (p(), i("div", wt, [a("table", Tt, [a("thead", null, [a("tr", null, [g(n.$slots, "head", {}, void 0, !0)])]), a("tbody", null, [g(n.$slots, "default", {}, void 0, !0)])]), e.empty && !t.default ? (p(), i("p", Et, _(e.empty), 1)) : r("", !0)]));
-	}
-}), [["__scopeId", "data-v-fc20cb49"]]), Ot = { class: "mw-statusbar" }, kt = /*#__PURE__*/ b(/* @__PURE__ */ s({
-	__name: "UiStatusBar",
-	setup(e) {
-		return (e, t) => (p(), i("footer", Ot, [g(e.$slots, "default", {}, void 0, !0)]));
+		let t = w();
+		return (n, o) => (m(), i("div", Et, [a("table", Dt, [a("thead", null, [a("tr", null, [_(n.$slots, "head", {}, void 0, !0)])]), a("tbody", null, [_(n.$slots, "default", {}, void 0, !0)])]), e.empty && !t.default ? (m(), i("p", Ot, y(e.empty), 1)) : r("", !0)]));
 	}
-}), [["__scopeId", "data-v-890bec3f"]]), At = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-de139c21"]]), H = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiStatusDot",
 	props: { status: { default: "ok" } },
 	setup(e) {
-		return (t, n) => (p(), i("span", {
-			class: l(["mw-status-dot", `mw-status-dot--${e.status}`]),
+		return (t, n) => (m(), i("span", {
+			class: u(["mw-status-dot", `mw-status-dot--${e.status}`]),
 			"aria-hidden": "true"
 		}, null, 2));
 	}
-}), [["__scopeId", "data-v-62e9a7cc"]]), jt = {
+}), [["__scopeId", "data-v-62e9a7cc"]]), At = {
+	role: "list",
+	class: "mw-statusbar",
+	"aria-label": "Status"
+}, jt = { key: 0 }, Mt = { class: "mw-visually-hidden" }, Nt = { key: 0 }, Pt = {
+	key: 1,
+	class: "mw-statusbar__pending"
+}, Ft = { key: 0 }, It = {
+	key: 1,
+	class: "mw-statusbar__pending"
+}, Lt = /*#__PURE__*/ j(/* @__PURE__ */ c({
+	__name: "UiStatusBar",
+	props: {
+		network: {},
+		healthy: {
+			type: Boolean,
+			default: !0
+		},
+		epoch: {},
+		lastRefresh: {}
+	},
+	setup(n) {
+		let c = n, l = t(() => c.network ? c.network.charAt(0).toUpperCase() + c.network.slice(1) : "");
+		function u(e) {
+			let t = Math.floor((Date.now() - e.getTime()) / 1e3);
+			return t < 5 ? "just now" : t < 60 ? `${t}s ago` : `${Math.floor(t / 60)}m ago`;
+		}
+		return (t, c) => (m(), i("ul", At, [
+			n.network ? (m(), i("li", jt, [
+				s(H, { status: n.healthy ? "ok" : "error" }, null, 8, ["status"]),
+				o(" " + y(l.value) + " ", 1),
+				a("span", Mt, "(" + y(n.healthy ? "status OK" : "status error") + ")", 1)
+			])) : r("", !0),
+			n.epoch === void 0 ? r("", !0) : (m(), i(e, { key: 1 }, [n.epoch === null ? (m(), i("li", Pt, "Epoch —")) : (m(), i("li", Nt, "Epoch " + y(n.epoch), 1))], 64)),
+			n.lastRefresh === void 0 ? r("", !0) : (m(), i(e, { key: 2 }, [n.lastRefresh ? (m(), i("li", Ft, "Refreshed " + y(u(n.lastRefresh)), 1)) : (m(), i("li", It, "Loading…"))], 64)),
+			_(t.$slots, "default", {}, void 0, !0)
+		]));
+	}
+}), [["__scopeId", "data-v-cb4a19b8"]]), Rt = {
 	class: "mw-feed",
 	role: "list"
-}, Mt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}, zt = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiActivityFeed",
 	setup(e) {
-		return (e, t) => (p(), i("ul", jt, [g(e.$slots, "default", {}, void 0, !0)]));
+		return (e, t) => (m(), i("ul", Rt, [_(e.$slots, "default", {}, void 0, !0)]));
 	}
-}), [["__scopeId", "data-v-9e578c9d"]]), Nt = { class: "mw-feed__item" }, Pt = { class: "mw-feed__type" }, Ft = { class: "mw-feed__time" }, It = /*#__PURE__*/ b(/* @__PURE__ */ s({
+}), [["__scopeId", "data-v-9e578c9d"]]), Bt = { class: "mw-feed__item" }, Vt = ["datetime"], Ht = {
+	key: 1,
+	class: "mw-feed__meta"
+}, Ut = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "UiActivityItem",
 	props: {
 		type: {},
-		time: {}
+		time: {},
+		datetime: {}
 	},
 	setup(e) {
-		return (t, n) => (p(), i("li", Nt, [
-			n[0] ||= a("span", {
-				class: "mw-feed__dot",
-				"aria-hidden": "true"
-			}, null, -1),
-			a("span", Pt, [g(t.$slots, "type", {}, () => [o(_(e.type), 1)], !0)]),
-			a("span", Ft, [g(t.$slots, "time", {}, () => [o(_(e.time), 1)], !0)])
-		]));
+		return (t, n) => (m(), i("li", Bt, [_(t.$slots, "type", {}, () => [o(y(e.type), 1)], !0), e.datetime ? (m(), i("time", {
+			key: 0,
+			class: "mw-feed__meta",
+			datetime: e.datetime
+		}, [_(t.$slots, "time", {}, () => [o(y(e.time), 1)], !0)], 8, Vt)) : (m(), i("small", Ht, [_(t.$slots, "time", {}, () => [o(y(e.time), 1)], !0)]))]));
 	}
-}), [["__scopeId", "data-v-f662c634"]]), Lt = /* @__PURE__ */ new Set([
+}), [["__scopeId", "data-v-797b66a9"]]), Wt = /* @__PURE__ */ new Set([
 	"operational",
 	"degraded",
 	"down",
 	"unknown"
 ]);
 function U(e) {
-	return typeof e == "string" && Lt.has(e);
+	return typeof e == "string" && Wt.has(e);
 }
 function W(e) {
 	return U(e) ? e : "unknown";
@@ -673,7 +869,7 @@ function W(e) {
 function G(e) {
 	return typeof e != "string" || e.trim() === "" ? "" : e.replace(/[<>&"]/g, "");
 }
-function Rt(e) {
+function Gt(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e, n = G(t.name);
 	return n ? {
@@ -681,11 +877,11 @@ function Rt(e) {
 		status: W(t.status)
 	} : null;
 }
-function zt(e) {
+function Kt(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e, n = G(t.name);
 	if (!n) return null;
-	let r = Array.isArray(t.components) ? t.components.map(Rt).filter((e) => e !== null) : [];
+	let r = Array.isArray(t.components) ? t.components.map(Gt).filter((e) => e !== null) : [];
 	return {
 		name: n,
 		status: W(t.status),
@@ -696,7 +892,7 @@ function K(e) {
 	if (typeof e != "object" || !e) return null;
 	let t = e;
 	if (!U(t.overall) || typeof t.generated_at != "string" || !Array.isArray(t.groups)) return null;
-	let n = t.groups.map(zt).filter((e) => e !== null);
+	let n = t.groups.map(Kt).filter((e) => e !== null);
 	return {
 		generated_at: t.generated_at,
 		overall: t.overall,
@@ -705,7 +901,7 @@ function K(e) {
 }
 //#endregion
 //#region src/components/StatusWidget.vue?vue&type=script&setup=true&lang.ts
-var q = ["href", "title"], Bt = { class: "status-widget__label" }, Vt = /*#__PURE__*/ b(/* @__PURE__ */ s({
+var q = ["href", "title"], qt = /*#__PURE__*/ j(/* @__PURE__ */ c({
 	__name: "StatusWidget",
 	props: {
 		apiUrl: { default: "https://status.meddleware.co.uk/api/status" },
@@ -723,63 +919,61 @@ var q = ["href", "title"], Bt = { class: "status-widget__label" }, Vt = /*#__PUR
 			degraded: "Degraded",
 			down: "Major outage",
 			unknown: "Status unknown"
-		}, o = m("ok"), s = m("All systems operational"), c = null;
-		async function u() {
+		}, a = h("ok"), o = h("All systems operational"), s = null;
+		async function c() {
 			try {
-				let e = await fetch(t.apiUrl);
+				let e = await fetch(t.apiUrl, { signal: AbortSignal.timeout(1e4) });
 				if (!e.ok) throw Error(`HTTP ${e.status}`);
 				let i = K(await e.json());
 				if (!i) throw Error("unexpected response shape");
-				o.value = n[i.overall], s.value = r[i.overall];
+				a.value = n[i.overall], o.value = r[i.overall];
 			} catch {
-				o.value = "error", s.value = "Status unavailable";
+				a.value = "error", o.value = "Status unavailable";
 			}
 		}
-		return d(() => {
-			u(), c = setInterval(u, t.pollInterval);
-		}), f(() => {
-			c !== null && clearInterval(c);
-		}), (t, n) => (p(), i("a", {
-			href: v(D)(e.href),
+		return f(() => {
+			c(), s = setInterval(c, t.pollInterval);
+		}), p(() => {
+			s !== null && clearInterval(s);
+		}), (t, n) => (m(), i("a", {
+			href: b(M)(e.href),
 			target: "_blank",
 			rel: "noopener noreferrer",
-			class: l(["status-widget", `status-widget--${o.value}`]),
-			title: `Platform status: ${s.value}`
-		}, [n[0] ||= a("span", {
-			class: "status-widget__dot",
-			"aria-hidden": "true"
-		}, null, -1), a("span", Bt, _(s.value), 1)], 10, q));
+			class: u(["status-widget", `status-widget--${a.value}`]),
+			title: `Platform status: ${o.value}`
+		}, y(o.value), 11, q));
 	}
-}), [["__scopeId", "data-v-6436368e"]]), J = {
+}), [["__scopeId", "data-v-57682f53"]]), J = {
 	mainnet: "https://suivision.xyz",
 	testnet: "https://testnet.suivision.xyz",
 	devnet: "https://devnet.suivision.xyz"
 };
-function Ht(e, t, n = "testnet") {
-	return `${J[n] ?? J.testnet}/${e}/${t}`;
+function Jt(e, t, n = "testnet") {
+	return `${J[n] ?? J.testnet}/${e}/${encodeURIComponent(t)}`;
 }
 //#endregion
 //#region src/composables/useColorMode.ts
-var Y = "mw-color-mode", X = m("system"), Z = !1;
-function Ut() {
+var Y = "mw-color-mode", X = h("system"), Z = !1;
+function Yt() {
 	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 function Q(e) {
-	return e === "dark" || e === "system" && Ut();
+	return e === "dark" || e === "system" && Yt();
 }
 function $(e) {
 	typeof document < "u" && document.documentElement.setAttribute("data-theme", Q(e) ? "dark" : "light");
 }
-function Wt(e = "system") {
+function Xt(e = "system") {
 	if (!Z) {
 		Z = !0;
 		let t = null;
 		try {
-			t = typeof localStorage < "u" ? localStorage.getItem(Y) : null;
+			let e = typeof localStorage < "u" ? localStorage.getItem(Y) : null;
+			(e === "light" || e === "dark" || e === "system") && (t = e);
 		} 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");
-		}), ae(X, (e) => {
+		}), E(X, (e) => {
 			$(e);
 			try {
 				typeof localStorage < "u" && localStorage.setItem(Y, e);
@@ -801,10 +995,10 @@ function Wt(e = "system") {
 }
 //#endregion
 //#region src/composables/useSeason.ts
-function Gt() {
+function Zt() {
 	if (typeof document > "u") return;
 	let e = (/* @__PURE__ */ new Date()).getMonth(), t = e >= 2 && e <= 4 ? "spring" : e >= 5 && e <= 7 ? "summer" : e >= 8 && e <= 10 ? "autumn" : "winter";
 	document.documentElement.dataset.season = t;
 }
 //#endregion
-export { N as AppFooter, x as AppHeader, E as AppSidebar, Ae as AppTabNav, R as ColorModeControl, Ie as CopyableAddress, Ke as CopyrightLine, Re as ExplorerLink, De as SidebarGroup, Ce as SidebarItem, Vt as StatusWidget, Mt as UiActivityFeed, It as UiActivityItem, ht as UiBadge, B as UiButton, he as UiCard, Dt as UiDataTable, at as UiFieldHint, ut as UiFormField, ye as UiNotice, mt as UiPanel, tt as UiSegmentedControl, _e as UiSelect, xt as UiStatGrid, Ct as UiStatRow, kt as UiStatusBar, At as UiStatusDot, Ze as UiStepper, _t as UiToolbar, yt as UiToolbarButton, U as isStatusLevel, K as parseSnapshot, D as safeHref, Ht as suiExplorerUrl, Wt as useColorMode, Gt as useSeason };
+export { oe as AppFooter, ee as AppHeader, ne as AppSidebar, Se as AppTabNav, de as ColorModeControl, Le as CopyableAddress, qe as CopyrightLine, ze as ExplorerLink, ye as SidebarGroup, _e as SidebarItem, qt as StatusWidget, zt as UiActivityFeed, Ut as UiActivityItem, vt as UiBadge, pe as UiButton, I as UiCard, kt as UiDataTable, je as UiDialog, ct as UiFieldHint, pt as UiFormField, z as UiNotice, _t as UiPanel, it as UiSegmentedControl, L as UiSelect, Ct as UiStatGrid, Tt as UiStatRow, Lt as UiStatusBar, H as UiStatusDot, $e as UiStepper, we as UiTabPanel, ht as UiToolIntro, xt as UiToolbar, V as UiToolbarButton, U as isStatusLevel, K as parseSnapshot, M as safeHref, Jt as suiExplorerUrl, B as tabIds, Xt as useColorMode, Zt as useSeason };