@meddleware/ui 0.1.4 → 0.1.6

package/dist/base.css

@@ -1,2 +1,2 @@
-.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-5aa0ef5a]{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-5aa0ef5a]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-5aa0ef5a]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__foot[data-v-5aa0ef5a]{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}
+.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-5aa0ef5a]{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-5aa0ef5a]{border-bottom:1px solid var(--_border);padding:1rem}.mw-sidebar__nav[data-v-5aa0ef5a]{flex-direction:column;flex:auto;gap:.25rem;padding:.75rem;display:flex;overflow-y:auto}.mw-sidebar__foot[data-v-5aa0ef5a]{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}.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/StatusWidget.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    /** URL of the `GET /api/status` endpoint to poll. */
+    apiUrl?: string;
+    /** URL the widget links to (the human-readable status page). */
+    href?: string;
+    /** Poll interval in milliseconds. */
+    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;
+    pollInterval: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -7,6 +7,9 @@ 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 StatusWidget } from './components/StatusWidget.vue';
 export { useColorMode } from './composables/useColorMode.js';
 export type { ColorMode } from './composables/useColorMode.js';
 export type { PanelVariant, PanelColors } from './internal/panel.js';
+export { isStatusLevel, parseSnapshot } from './status.js';
+export type { StatusLevel, StatusComponent, StatusGroup, StatusSnapshot } from './status.js';

package/dist/status.d.ts

@@ -0,0 +1,27 @@
+/** Health state values returned by platform-probe's `/api/status` endpoint. */
+export type StatusLevel = 'operational' | 'degraded' | 'down' | 'unknown';
+/** A single monitored component within a group. */
+export interface StatusComponent {
+    name: string;
+    status: StatusLevel;
+}
+/** A logical capability group containing one or more components. */
+export interface StatusGroup {
+    name: string;
+    status: StatusLevel;
+    components: StatusComponent[];
+}
+/** The full snapshot returned by `GET /api/status`. */
+export interface StatusSnapshot {
+    generated_at: string;
+    overall: StatusLevel;
+    groups: StatusGroup[];
+}
+/** Type guard for `StatusLevel`. Validates that a raw value is one of the known status strings. */
+export declare function isStatusLevel(s: unknown): s is StatusLevel;
+/**
+ * Parse and validate a raw API response as a `StatusSnapshot`.
+ * Returns `null` if the required fields are absent or have unexpected types,
+ * so callers can treat an invalid response the same as a network error.
+ */
+export declare function parseSnapshot(raw: unknown): StatusSnapshot | null;

package/dist/ui.js

@@ -1,4 +1,4 @@
-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, openBlock as l, ref as ee, renderList as u, renderSlot as d, toDisplayString as f, useModel as p, vModelSelect as m, watch as te, withDirectives as ne } from "vue";
+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 ee, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, useModel as te, vModelSelect as ne, watch as re, withDirectives as ie } from "vue";
 //#region src/internal/panel.ts
 function h(e, t) {
 	let n;
@@ -24,7 +24,7 @@ function h(e, t) {
 }
 //#endregion
 //#region src/components/AppHeader.vue?vue&type=script&setup=true&lang.ts
-var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ = { class: "mw-header__actions" }, v = /*@__PURE__*/ a({
+var ae = { class: "mw-header__brand" }, oe = { class: "mw-header__center" }, se = { class: "mw-header__actions" }, g = /*@__PURE__*/ a({
 	__name: "AppHeader",
 	props: {
 		variant: { default: "dark" },
@@ -36,29 +36,29 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 	},
 	setup(e) {
 		let n = e, a = t(() => h(n.variant, n.colors));
-		return (t, n) => (l(), r("header", {
+		return (t, n) => (u(), r("header", {
 			class: s(["mw-header", [`mw-header--${e.variant}`, { "mw-header--sticky": e.sticky }]]),
 			style: c(a.value)
 		}, [
-			i("div", re, [d(t.$slots, "brand", {}, void 0, !0)]),
-			i("div", g, [d(t.$slots, "default", {}, void 0, !0)]),
-			i("div", _, [d(t.$slots, "actions", {}, void 0, !0)])
+			i("div", ae, [p(t.$slots, "brand", {}, void 0, !0)]),
+			i("div", oe, [p(t.$slots, "default", {}, void 0, !0)]),
+			i("div", se, [p(t.$slots, "actions", {}, void 0, !0)])
 		], 6));
 	}
-}), y = (e, t) => {
+}), _ = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, b = /*#__PURE__*/ y(v, [["__scopeId", "data-v-ad7cd1c5"]]), x = {
+}, v = /*#__PURE__*/ _(g, [["__scopeId", "data-v-ad7cd1c5"]]), y = {
 	key: 0,
 	class: "mw-sidebar__head"
-}, S = {
+}, b = {
 	class: "mw-sidebar__nav",
 	"aria-label": "Primary"
-}, C = {
+}, x = {
 	key: 1,
 	class: "mw-sidebar__foot"
-}, w = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}, S = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "AppSidebar",
 	props: {
 		variant: { default: "dark" },
@@ -70,16 +70,16 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 			let e = h(a.variant, a.colors);
 			return a.width && (e["--mw-sidebar-width"] = a.width), e;
 		});
-		return (t, a) => (l(), r("aside", {
+		return (t, a) => (u(), r("aside", {
 			class: s(["mw-sidebar", `mw-sidebar--${e.variant}`]),
 			style: c(o.value)
 		}, [
-			t.$slots.head ? (l(), r("div", x, [d(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
-			i("nav", S, [d(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.foot ? (l(), r("div", C, [d(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
+			t.$slots.head ? (u(), r("div", y, [p(t.$slots, "head", {}, void 0, !0)])) : n("", !0),
+			i("nav", b, [p(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.foot ? (u(), r("div", x, [p(t.$slots, "foot", {}, void 0, !0)])) : n("", !0)
 		], 6));
 	}
-}), [["__scopeId", "data-v-5aa0ef5a"]]), T = { class: "mw-footer__start" }, E = { class: "mw-footer__center" }, D = { class: "mw-footer__end" }, O = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-5aa0ef5a"]]), C = { class: "mw-footer__start" }, w = { class: "mw-footer__center" }, T = { class: "mw-footer__end" }, E = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "AppFooter",
 	props: {
 		variant: { default: "transparent" },
@@ -87,24 +87,24 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 	},
 	setup(e) {
 		let n = e, a = t(() => h(n.variant, n.colors));
-		return (t, n) => (l(), r("footer", {
+		return (t, n) => (u(), r("footer", {
 			class: s(["mw-footer", `mw-footer--${e.variant}`]),
 			style: c(a.value)
 		}, [
-			i("div", T, [d(t.$slots, "start", {}, void 0, !0)]),
-			i("div", E, [d(t.$slots, "default", {}, void 0, !0)]),
-			i("div", D, [d(t.$slots, "end", {}, void 0, !0)])
+			i("div", C, [p(t.$slots, "start", {}, void 0, !0)]),
+			i("div", w, [p(t.$slots, "default", {}, void 0, !0)]),
+			i("div", T, [p(t.$slots, "end", {}, void 0, !0)])
 		], 6));
 	}
-}), [["__scopeId", "data-v-c646b8e1"]]), k = {
+}), [["__scopeId", "data-v-c646b8e1"]]), D = {
 	class: "mw-mode",
 	role: "group",
 	"aria-label": "Colour mode"
-}, A = [
+}, O = [
 	"aria-pressed",
 	"title",
 	"onClick"
-], j = { "aria-hidden": "true" }, M = { class: "mw-mode__label" }, N = /*#__PURE__*/ y(/* @__PURE__ */ a({
+], k = { "aria-hidden": "true" }, A = { class: "mw-mode__label" }, j = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "ColorModeControl",
 	props: {
 		modelValue: {},
@@ -125,16 +125,16 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 			dark: "☾",
 			system: "◐"
 		};
-		return (o, c) => (l(), r("div", k, [(l(!0), r(e, null, u(t.modes, (e) => (l(), r("button", {
+		return (o, c) => (u(), r("div", D, [(u(!0), r(e, null, f(t.modes, (e) => (u(), r("button", {
 			key: e,
 			type: "button",
 			class: s(["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, f(a[e]), 1), i("span", M, f(n[e]), 1)], 10, A))), 128))]));
+		}, [i("span", k, m(a[e]), 1), i("span", A, m(n[e]), 1)], 10, O))), 128))]));
 	}
-}), [["__scopeId", "data-v-e4a6bf1d"]]), P = ["type", "disabled"], F = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-e4a6bf1d"]]), M = ["type", "disabled"], N = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "UiButton",
 	props: {
 		variant: { default: "primary" },
@@ -145,29 +145,29 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 		}
 	},
 	setup(e) {
-		return (t, n) => (l(), r("button", {
+		return (t, n) => (u(), r("button", {
 			type: e.type,
 			disabled: e.disabled,
 			class: s(["mw-btn", `mw-btn--${e.variant}`])
-		}, [d(t.$slots, "default", {}, void 0, !0)], 10, P));
+		}, [p(t.$slots, "default", {}, void 0, !0)], 10, M));
 	}
-}), [["__scopeId", "data-v-299de2c3"]]), ie = { class: "mw-card" }, I = {
+}), [["__scopeId", "data-v-299de2c3"]]), P = { class: "mw-card" }, F = {
 	key: 0,
 	class: "mw-card__header"
-}, L = { class: "mw-card__title" }, R = { class: "mw-card__body" }, z = {
+}, ce = { class: "mw-card__title" }, I = { class: "mw-card__body" }, L = {
 	key: 1,
 	class: "mw-card__footer"
-}, B = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}, R = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "UiCard",
 	props: { title: {} },
 	setup(e) {
-		return (t, a) => (l(), r("section", ie, [
-			e.title || t.$slots.header ? (l(), r("header", I, [d(t.$slots, "header", {}, () => [i("h3", L, f(e.title), 1)], !0)])) : n("", !0),
-			i("div", R, [d(t.$slots, "default", {}, void 0, !0)]),
-			t.$slots.footer ? (l(), r("footer", z, [d(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
+		return (t, a) => (u(), r("section", P, [
+			e.title || t.$slots.header ? (u(), r("header", F, [p(t.$slots, "header", {}, () => [i("h3", ce, m(e.title), 1)], !0)])) : n("", !0),
+			i("div", I, [p(t.$slots, "default", {}, void 0, !0)]),
+			t.$slots.footer ? (u(), r("footer", L, [p(t.$slots, "footer", {}, void 0, !0)])) : n("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-fd2fd7ab"]]), V = { class: "mw-select" }, H = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-fd2fd7ab"]]), z = { class: "mw-select" }, B = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	inheritAttrs: !1,
 	__name: "UiSelect",
 	props: {
@@ -176,8 +176,8 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 	},
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = p(e, "modelValue");
-		return (e, n) => (l(), r("div", V, [ne(i("select", o(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [d(e.$slots, "default", {}, void 0, !0)], 16), [[m, t.value]]), n[1] ||= i("svg", {
+		let t = te(e, "modelValue");
+		return (e, n) => (u(), r("div", z, [ie(i("select", o(e.$attrs, { "onUpdate:modelValue": n[0] ||= (e) => t.value = e }), [p(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",
@@ -186,7 +186,7 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 			"aria-hidden": "true"
 		}, [i("path", { d: "M1 1l5 5 5-5" })], -1)]));
 	}
-}), [["__scopeId", "data-v-b9468387"]]), U = ["role"], W = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}), [["__scopeId", "data-v-b9468387"]]), V = ["role"], H = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "UiNotice",
 	props: { type: {} },
 	setup(e) {
@@ -194,16 +194,16 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 			if (n.type === "error") return "alert";
 			if (n.type === "ok") return "status";
 		});
-		return (t, n) => (l(), r("p", {
+		return (t, n) => (u(), r("p", {
 			class: s(["mw-notice", e.type && e.type !== "info" ? `mw-notice--${e.type}` : ""]),
 			role: i.value
-		}, [d(t.$slots, "default", {}, void 0, !0)], 10, U));
+		}, [p(t.$slots, "default", {}, void 0, !0)], 10, V));
 	}
-}), [["__scopeId", "data-v-6f53d0be"]]), G = ["disabled", "aria-current"], K = {
+}), [["__scopeId", "data-v-6f53d0be"]]), U = ["disabled", "aria-current"], W = {
 	key: 0,
 	class: "sidebar-item__icon",
 	"aria-hidden": "true"
-}, q = { class: "sidebar-item__label" }, J = /*#__PURE__*/ y(/* @__PURE__ */ a({
+}, G = { class: "sidebar-item__label" }, le = /*#__PURE__*/ _(/* @__PURE__ */ a({
 	__name: "SidebarItem",
 	props: {
 		label: {},
@@ -218,24 +218,85 @@ var re = { class: "mw-header__brand" }, g = { class: "mw-header__center" }, _ =
 		}
 	},
 	setup(e) {
-		return (t, a) => (l(), r("button", {
+		return (t, a) => (u(), r("button", {
 			type: "button",
 			class: s(["sidebar-item", { "is-active": e.active }]),
 			disabled: e.disabled,
 			"aria-current": e.active ? "page" : void 0
-		}, [e.icon ? (l(), r("span", K, f(e.icon), 1)) : n("", !0), i("span", q, f(e.label), 1)], 10, G));
+		}, [e.icon ? (u(), r("span", W, m(e.icon), 1)) : n("", !0), i("span", G, m(e.label), 1)], 10, U));
 	}
-}), [["__scopeId", "data-v-e15afdf7"]]), Y = "mw-color-mode", X = ee("system"), Z = !1;
-function ae() {
+}), [["__scopeId", "data-v-e15afdf7"]]), ue = /* @__PURE__ */ new Set([
+	"operational",
+	"degraded",
+	"down",
+	"unknown"
+]);
+function K(e) {
+	return typeof e == "string" && ue.has(e);
+}
+function q(e) {
+	if (typeof e != "object" || !e) return null;
+	let t = 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 de = ["href", "title"], J = { class: "status-widget__label" }, fe = /*#__PURE__*/ _(/* @__PURE__ */ a({
+	__name: "StatusWidget",
+	props: {
+		apiUrl: { default: "https://status.meddleware.co.uk/api/status" },
+		href: { default: "https://status.meddleware.co.uk" },
+		pollInterval: { default: 6e4 }
+	},
+	setup(e) {
+		let t = e, n = {
+			operational: "ok",
+			degraded: "degraded",
+			down: "error",
+			unknown: "degraded"
+		}, a = {
+			operational: "All systems operational",
+			degraded: "Degraded",
+			down: "Major outage",
+			unknown: "Status unknown"
+		}, o = d("ok"), c = d("All systems operational"), f = null;
+		async function p() {
+			try {
+				let e = await fetch(t.apiUrl);
+				if (!e.ok) throw Error(`HTTP ${e.status}`);
+				let r = q(await e.json());
+				if (!r) throw Error("unexpected response shape");
+				o.value = n[r.overall], c.value = a[r.overall];
+			} catch {
+				o.value = "error", c.value = "Status unavailable";
+			}
+		}
+		return l(() => {
+			p(), f = setInterval(p, t.pollInterval);
+		}), ee(() => {
+			f !== null && clearInterval(f);
+		}), (t, n) => (u(), r("a", {
+			href: e.href,
+			target: "_blank",
+			rel: "noopener",
+			class: s(["status-widget", `status-widget--${o.value}`]),
+			title: `Platform status: ${c.value}`
+		}, [n[0] ||= i("span", {
+			class: "status-widget__dot",
+			"aria-hidden": "true"
+		}, null, -1), i("span", J, m(c.value), 1)], 10, de));
+	}
+}), [["__scopeId", "data-v-20197983"]]), Y = "mw-color-mode", X = d("system"), Z = !1;
+function pe() {
 	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 function Q(e) {
-	return e === "dark" || e === "system" && ae();
+	return e === "dark" || e === "system" && pe();
 }
 function $(e) {
 	typeof document > "u" || document.documentElement.setAttribute("data-theme", Q(e) ? "dark" : "light");
 }
-function oe(e = "system") {
+function me(e = "system") {
 	if (!Z) {
 		Z = !0;
 		let t = null;
@@ -244,7 +305,7 @@ function oe(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");
-		}), te(X, (e) => {
+		}), re(X, (e) => {
 			$(e);
 			try {
 				typeof localStorage < "u" && localStorage.setItem(Y, e);
@@ -265,4 +326,4 @@ function oe(e = "system") {
 	};
 }
 //#endregion
-export { O as AppFooter, b as AppHeader, w as AppSidebar, N as ColorModeControl, J as SidebarItem, F as UiButton, B as UiCard, W as UiNotice, H as UiSelect, oe as useColorMode };
+export { E as AppFooter, v as AppHeader, S as AppSidebar, j as ColorModeControl, le as SidebarItem, fe as StatusWidget, N as UiButton, R as UiCard, H as UiNotice, B as UiSelect, K as isStatusLevel, q as parseSnapshot, me as useColorMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meddleware/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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",