@meddleware/ui 0.1.34 → 0.1.36

package/dist/components/UiStepper.css

@@ -0,0 +1 @@
+@layer mw.reset;@layer mw.components{.ui-stepper[data-v-8a6485e2]{margin:0 0 var(--space-md);padding:0;list-style:none;display:flex}.ui-stepper--vertical[data-v-8a6485e2]{gap:var(--space-xs);flex-direction:column;margin:0}.ui-stepper__step[data-v-8a6485e2]{align-items:center;gap:var(--space-2xs);flex-direction:column;flex:1 1 0;min-width:0;display:flex;position:relative}.ui-stepper--vertical .ui-stepper__step[data-v-8a6485e2]{align-items:center;gap:var(--space-xs);flex-direction:row}.ui-stepper--horizontal .ui-stepper__step[data-v-8a6485e2]:not(:first-child):before{content:"";top:var(--space-xs);height:var(--space-4xs);background:var(--border);z-index:0;position:absolute;left:-50%;right:50%}.ui-stepper--horizontal .ui-stepper__step.is-done[data-v-8a6485e2]:before,.ui-stepper--horizontal .ui-stepper__step.is-active[data-v-8a6485e2]:before{background:var(--accent)}.ui-stepper__badge[data-v-8a6485e2]{z-index:var(--z-raised);width:var(--space-md);height:var(--space-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);border:var(--space-4xs) solid var(--border);background:var(--surface);color:var(--muted);cursor:default;transition:background-color var(--transition-base), border-color var(--transition-base);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-family:inherit;line-height:1;display:flex;position:relative}button.ui-stepper__badge[data-v-8a6485e2]{cursor:pointer}button.ui-stepper__badge[data-v-8a6485e2]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.is-done .ui-stepper__badge[data-v-8a6485e2]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.is-active .ui-stepper__badge[data-v-8a6485e2],.is-busy .ui-stepper__badge[data-v-8a6485e2]{background:color-mix(in srgb, var(--accent) 12%, var(--surface));border-color:var(--accent);color:var(--accent)}.is-error .ui-stepper__badge[data-v-8a6485e2]{background:color-mix(in srgb, var(--danger) 12%, var(--surface));border-color:var(--danger);color:var(--danger)}.ui-stepper__label[data-v-8a6485e2]{font-size:var(--font-size-sm);text-align:center;color:var(--muted);max-width:100%;line-height:var(--leading-tight)}.ui-stepper--horizontal .ui-stepper__label[data-v-8a6485e2]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ui-stepper--vertical .ui-stepper__label[data-v-8a6485e2]{text-align:start}.is-done .ui-stepper__label[data-v-8a6485e2],.is-active .ui-stepper__label[data-v-8a6485e2],.is-busy .ui-stepper__label[data-v-8a6485e2],.is-error .ui-stepper__label[data-v-8a6485e2]{color:var(--text)}.is-active .ui-stepper__label[data-v-8a6485e2],.is-busy .ui-stepper__label[data-v-8a6485e2]{font-weight:var(--font-weight-semibold)}}

package/dist/components/UiStepper.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./UiStepper.vue_vue_type_script_setup_true_lang.js";
+import "./UiStepper.css";
+//#region src/components/UiStepper.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-8a6485e2"]]);
+//#endregion
+export { n as default };

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

@@ -1,15 +1,23 @@
+export type StepStatus = 'done' | 'busy' | 'error' | 'pending';
 export interface StepperStep {
     id: string;
     label: string;
+    /** Explicit state, overriding the one derived from `modelValue`. */
+    status?: StepStatus;
 }
 type __VLS_Props = {
     steps: StepperStep[];
-    modelValue: number;
+    /** Index of the current step in a wizard (ignored for steps that have a `status`). */
+    modelValue?: number;
+    orientation?: 'horizontal' | 'vertical';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((index: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    modelValue: number;
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiStepper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, toDisplayString as u } from "vue";
+//#region src/components/UiStepper.vue?vue&type=script&setup=true&lang.ts
+var d = ["aria-current"], f = ["aria-label", "onClick"], p = {
+	key: 1,
+	class: "ui-stepper__badge",
+	"aria-hidden": "true"
+}, m = {
+	key: 0,
+	class: "mw-spinner"
+}, h = { class: "ui-stepper__label" }, g = {
+	key: 2,
+	class: "mw-visually-hidden"
+}, _ = /*@__PURE__*/ o({
+	__name: "UiStepper",
+	props: {
+		steps: {},
+		modelValue: { default: 0 },
+		orientation: { default: "horizontal" }
+	},
+	emits: ["update:modelValue"],
+	setup(o, { emit: _ }) {
+		let v = o, y = _, b = t(() => v.steps.map((e, t) => e.status ?? (t < v.modelValue ? "done" : t === v.modelValue ? "active" : "upcoming"))), x = {
+			done: "done",
+			busy: "in progress",
+			error: "failed",
+			pending: "not started"
+		}, S = {
+			done: "✓",
+			error: "✗"
+		};
+		function C(e) {
+			!v.steps[e]?.status && e < v.modelValue && y("update:modelValue", e);
+		}
+		return (t, _) => (c(), r("ol", {
+			class: s(["ui-stepper", `ui-stepper--${o.orientation}`]),
+			role: "list"
+		}, [(c(!0), r(e, null, l(o.steps, (t, o) => (c(), r("li", {
+			key: t.id,
+			class: s(["ui-stepper__step", `is-${b.value[o]}`]),
+			"aria-current": b.value[o] === "active" ? "step" : void 0
+		}, [
+			!t.status && b.value[o] === "done" ? (c(), r("button", {
+				key: 0,
+				type: "button",
+				class: "ui-stepper__badge",
+				"aria-label": `Back to ${t.label}`,
+				onClick: (e) => C(o)
+			}, "✓", 8, f)) : (c(), r("span", p, [b.value[o] === "busy" ? (c(), r("span", m)) : (c(), r(e, { key: 1 }, [a(u(S[b.value[o]] ?? o + 1), 1)], 64))])),
+			i("span", h, u(t.label), 1),
+			t.status && x[b.value[o]] ? (c(), r("span", g, ", " + u(x[b.value[o]]), 1)) : n("", !0)
+		], 10, d))), 128))], 2));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/components/UiTabPanel.css

@@ -0,0 +1 @@
+@layer mw.reset;@layer mw.components{.mw-tab-panel[data-v-add194c8]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}}

package/dist/components/UiTabPanel.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./UiTabPanel.vue_vue_type_script_setup_true_lang.js";
+import "./UiTabPanel.css";
+//#region src/components/UiTabPanel.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-add194c8"]]);
+//#endregion
+export { n as default };

package/dist/components/UiTabPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import { tabIds as e } from "../tabs.js";
+import { computed as t, createElementBlock as n, defineComponent as r, openBlock as i, renderSlot as a } from "vue";
+//#region src/components/UiTabPanel.vue?vue&type=script&setup=true&lang.ts
+var o = ["id", "aria-labelledby"], s = /*@__PURE__*/ r({
+	__name: "UiTabPanel",
+	props: {
+		idPrefix: {},
+		tab: {}
+	},
+	setup(r) {
+		let s = r, c = t(() => e(s.idPrefix, s.tab));
+		return (e, t) => (i(), n("section", {
+			id: c.value.panel,
+			role: "tabpanel",
+			"aria-labelledby": c.value.tab,
+			tabindex: "0",
+			class: "mw-tab-panel"
+		}, [a(e.$slots, "default", {}, void 0, !0)], 8, o));
+	}
+});
+//#endregion
+export { s as default };

package/dist/components/UiTextField.js

@@ -0,0 +1,5 @@
+import e from "./UiTextField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/UiTextField.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    id: string;
+    label: string;
+    type?: 'text' | 'url' | 'number' | 'search' | 'email' | 'password';
+    /** Render a textarea of this many rows. */
+    rows?: number;
+    hint?: string;
+    error?: string | null;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    'label-suffix'?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    type: "number" | "text" | "search" | "email" | "password" | "url";
+    error: string | null;
+    hint: string;
+    rows: 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/UiTextField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import e from "./UiFormField.js";
+import t from "./UiInput.js";
+import n from "./UiTextarea.js";
+import { createBlock as r, createSlots as i, defineComponent as a, mergeModels as o, mergeProps as s, openBlock as c, renderSlot as l, useModel as u, withCtx as d } from "vue";
+//#region src/components/UiTextField.vue?vue&type=script&setup=true&lang.ts
+var f = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "UiTextField",
+	props: /*@__PURE__*/ o({
+		id: {},
+		label: {},
+		type: { default: "text" },
+		rows: { default: void 0 },
+		hint: { default: void 0 },
+		error: { default: null }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(a) {
+		let o = u(a, "modelValue");
+		return (u, f) => (c(), r(e, {
+			id: a.id,
+			label: a.label,
+			hint: a.hint,
+			error: a.error
+		}, i({
+			default: d(({ attrs: e }) => [a.rows ? (c(), r(n, s({
+				key: 0,
+				modelValue: o.value,
+				"onUpdate:modelValue": f[0] ||= (e) => o.value = e
+			}, {
+				...e,
+				...u.$attrs
+			}, { rows: a.rows }), null, 16, ["modelValue", "rows"])) : (c(), r(t, s({
+				key: 1,
+				modelValue: o.value,
+				"onUpdate:modelValue": f[1] ||= (e) => o.value = e,
+				autocomplete: "off"
+			}, {
+				...e,
+				...u.$attrs
+			}, { type: a.type }), null, 16, ["modelValue", "type"]))]),
+			_: 2
+		}, [u.$slots["label-suffix"] ? {
+			name: "label-suffix",
+			fn: d(() => [l(u.$slots, "label-suffix")]),
+			key: "0"
+		} : void 0]), 1032, [
+			"id",
+			"label",
+			"hint",
+			"error"
+		]));
+	}
+});
+//#endregion
+export { f as default };

package/dist/components/UiTextarea.css

@@ -0,0 +1 @@
+@layer mw.reset;@layer mw.components{.mw-textarea[data-v-a5067b5e]{width:100%;padding:var(--space-2xs) var(--space-xs);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font:inherit;resize:vertical}.mw-textarea[data-v-a5067b5e]::placeholder{color:var(--muted)}.mw-textarea[data-v-a5067b5e]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.mw-textarea[aria-invalid=true][data-v-a5067b5e]{border-color:var(--danger)}.mw-textarea[data-v-a5067b5e]:disabled{filter:grayscale(.6);cursor:not-allowed}}

package/dist/components/UiTextarea.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./UiTextarea.vue_vue_type_script_setup_true_lang.js";
+import "./UiTextarea.css";
+//#region src/components/UiTextarea.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-a5067b5e"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/UiTextarea.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,19 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, useModel as r, vModelText as i, withDirectives as a } from "vue";
+//#region src/components/UiTextarea.vue?vue&type=script&setup=true&lang.ts
+var o = /*@__PURE__*/ t({
+	__name: "UiTextarea",
+	props: {
+		modelValue: {},
+		modelModifiers: {}
+	},
+	emits: ["update:modelValue"],
+	setup(t) {
+		let o = r(t, "modelValue");
+		return (t, r) => a((n(), e("textarea", {
+			"onUpdate:modelValue": r[0] ||= (e) => o.value = e,
+			class: "mw-textarea"
+		}, null, 512)), [[i, o.value]]);
+	}
+});
+//#endregion
+export { o as default };

package/dist/components/UiToolIntro.css

@@ -0,0 +1 @@
+@layer mw.reset;@layer mw.components{.mw-tool-intro[data-v-48ed04fc]{margin:var(--space-3xs) 0 var(--space-sm);color:var(--muted)}}

package/dist/components/UiToolIntro.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./UiToolIntro.vue_vue_type_script_setup_true_lang.js";
+import "./UiToolIntro.css";
+//#region src/components/UiToolIntro.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-48ed04fc"]]);
+//#endregion
+export { n as default };

package/dist/components/UiToolIntro.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,10 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/UiToolIntro.vue?vue&type=script&setup=true&lang.ts
+var i = { class: "mw-tool-intro" }, a = /*@__PURE__*/ t({
+	__name: "UiToolIntro",
+	setup(t) {
+		return (t, a) => (n(), e("p", i, [r(t.$slots, "default", {}, void 0, !0)]));
+	}
+});
+//#endregion
+export { a as default };

package/dist/components/UiToolbar.css

@@ -0,0 +1 @@
+@layer mw.reset;@layer mw.components{.mw-toolbar[data-v-d09c20c7]{align-items:center;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-2xs);border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;margin:0;display:flex}}

package/dist/components/UiToolbar.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./UiToolbar.vue_vue_type_script_setup_true_lang.js";
+import "./UiToolbar.css";
+//#region src/components/UiToolbar.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-d09c20c7"]]);
+//#endregion
+export { n as default };

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

@@ -4,12 +4,15 @@ export interface ToolbarAction {
     disabled?: boolean;
 }
 type __VLS_Props = {
-    actions: ToolbarAction[];
+    actions: ToolbarAction[]; /** Names the toolbar for assistive technology. */
+    label?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     action: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onAction?: ((id: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/UiToolbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import e from "./UiToolbarButton.js";
+import { Fragment as t, createBlock as n, createElementBlock as r, createTextVNode as i, defineComponent as a, onBeforeUnmount as o, onMounted as s, onUpdated as c, openBlock as l, ref as u, renderList as d, toDisplayString as f, withCtx as p } from "vue";
+//#region src/components/UiToolbar.vue?vue&type=script&setup=true&lang.ts
+var m = ["aria-label"], h = /*@__PURE__*/ a({
+	__name: "UiToolbar",
+	props: {
+		actions: {},
+		label: { default: "Actions" }
+	},
+	emits: ["action"],
+	setup(a, { emit: h }) {
+		let g = h, _ = u(null), v = () => Array.from(_.value?.querySelectorAll("button:not(:disabled)") ?? []);
+		function y(e) {
+			let t = v(), n = t.indexOf(document.activeElement);
+			if (n < 0) return;
+			let r = t.length - 1, i = e.key === "ArrowRight" ? n === r ? 0 : n + 1 : e.key === "ArrowLeft" ? n === 0 ? r : n - 1 : e.key === "Home" ? 0 : e.key === "End" ? r : -1;
+			i < 0 || (e.preventDefault(), t.forEach((e, t) => e.tabIndex = t === i ? 0 : -1), t[i]?.focus());
+		}
+		function b() {
+			let e = v(), t = e.find((e) => e.tabIndex === 0) ?? e[0];
+			e.forEach((e) => e.tabIndex = e === t ? 0 : -1);
+		}
+		s(() => {
+			b(), _.value?.addEventListener("keydown", y), _.value?.addEventListener("focusin", x);
+		}), o(() => {
+			_.value?.removeEventListener("keydown", y), _.value?.removeEventListener("focusin", x);
+		}), c(b);
+		function x(e) {
+			let t = v(), n = e.target;
+			t.includes(n) && t.forEach((e) => e.tabIndex = e === n ? 0 : -1);
+		}
+		return (o, s) => (l(), r("div", {
+			ref_key: "bar",
+			ref: _,
+			class: "mw-toolbar",
+			role: "toolbar",
+			"aria-label": a.label
+		}, [(l(!0), r(t, null, d(a.actions, (t) => (l(), n(e, {
+			key: t.id,
+			disabled: t.disabled,
+			onClick: (e) => g("action", t.id)
+		}, {
+			default: p(() => [i(f(t.label), 1)]),
+			_: 2
+		}, 1032, ["disabled", "onClick"]))), 128))], 8, m));
+	}
+});
+//#endregion
+export { h as default };

package/dist/components/UiToolbarButton.css

@@ -0,0 +1 @@
+@layer mw.reset;@layer mw.components{.mw-toolbar-btn[data-v-c46bd947]{align-items:center;gap:var(--space-3xs);padding:var(--space-3xs) var(--space-2xs);min-height:var(--space-md);font-size:var(--font-size-sm);background:var(--lift);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast), border-color var(--duration-fast);display:inline-flex}.mw-toolbar-btn[data-v-c46bd947]:hover:not(:disabled){background:var(--surface);border-color:var(--accent)}.mw-toolbar-btn[data-v-c46bd947]:disabled{filter:grayscale(.6);cursor:not-allowed}.mw-toolbar-btn[data-v-c46bd947]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}}

package/dist/components/UiToolbarButton.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./UiToolbarButton.vue_vue_type_script_setup_true_lang.js";
+import "./UiToolbarButton.css";
+//#region src/components/UiToolbarButton.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-c46bd947"]]);
+//#endregion
+export { n as default };

package/dist/components/UiToolbarButton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,13 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/components/UiToolbarButton.vue?vue&type=script&setup=true&lang.ts
+var i = {
+	type: "button",
+	class: "mw-toolbar-btn"
+}, a = /*@__PURE__*/ t({
+	__name: "UiToolbarButton",
+	setup(t) {
+		return (t, a) => (n(), e("button", i, [r(t.$slots, "default", {}, void 0, !0)]));
+	}
+});
+//#endregion
+export { a as default };

package/dist/composables/useColorMode.js

@@ -0,0 +1,46 @@
+import { effectScope as e, ref as t, watch as n } from "vue";
+//#region src/composables/useColorMode.ts
+var r = "mw-color-mode", i = t("system"), a = !1;
+function o() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function s(e) {
+	return e === "dark" || e === "system" && o();
+}
+function c(e) {
+	typeof document < "u" && document.documentElement.setAttribute("data-theme", s(e) ? "dark" : "light");
+}
+function l(t = "system") {
+	if (!a) {
+		a = !0;
+		let o = null;
+		try {
+			let e = typeof localStorage < "u" ? localStorage.getItem(r) : null;
+			(e === "light" || e === "dark" || e === "system") && (o = e);
+		} catch {}
+		i.value = o ?? t, c(i.value), typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+			i.value === "system" && c("system");
+		}), e(!0).run(() => {
+			n(i, (e) => {
+				c(e);
+				try {
+					typeof localStorage < "u" && localStorage.setItem(r, e);
+				} catch {}
+			});
+		});
+	}
+	function o(e) {
+		i.value = e;
+	}
+	function l() {
+		o(i.value === "light" ? "dark" : i.value === "dark" ? "system" : "light");
+	}
+	return {
+		mode: i,
+		set: o,
+		cycle: l,
+		isDark: () => s(i.value)
+	};
+}
+//#endregion
+export { l as useColorMode };

package/dist/composables/useNow.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'vue';
+/**
+ * The current time in milliseconds, refreshed every `intervalMs` (default 1 s) while the calling scope is alive. A relative-time label
+ * ("Refreshed 12s ago") reads it so it ticks on its own; the timer stops with the component.
+ */
+export declare function useNow(intervalMs?: number): Ref<number>;

package/dist/composables/useNow.js

@@ -0,0 +1,12 @@
+import { getCurrentScope as e, onScopeDispose as t, ref as n } from "vue";
+//#region src/composables/useNow.ts
+function r(r = 1e3) {
+	let i = n(Date.now());
+	if (typeof window > "u") return i;
+	let a = setInterval(() => {
+		i.value = Date.now();
+	}, r);
+	return e() && t(() => clearInterval(a)), i;
+}
+//#endregion
+export { r as useNow };

package/dist/composables/usePager.d.ts

@@ -0,0 +1,28 @@
+import { type Ref } from 'vue';
+/** A page of a keyset-paginated list: the items and an opaque cursor for the next page (absent or null on the last). */
+export interface PageOf<T> {
+    items: T[];
+    next_cursor?: string | null;
+}
+export interface Pager<T> {
+    items: Ref<T[]>;
+    loading: Ref<boolean>;
+    error: Ref<string | null>;
+    /** Zero-based index of the page being shown. */
+    index: Ref<number>;
+    hasNext: Ref<boolean>;
+    /** Start again from the first page (after a filter changes). */
+    reset: () => Promise<void>;
+    /** Fetch the current page again. */
+    reload: () => Promise<void>;
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+}
+/**
+ * Keyset pagination for a list API that returns a page and an opaque cursor for the next one. It keeps the cursors already seen so
+ * Previous works, and drops answers that arrive out of order. Pair it with `UiPager`.
+ *
+ * @param load fetches the page at a cursor (`null` for the first page).
+ * @param describeError turns a failure into the sentence shown to people (default: the error's message).
+ */
+export declare function usePager<T>(load: (cursor: string | null) => Promise<PageOf<T>>, describeError?: (e: unknown) => string): Pager<T>;

package/dist/composables/usePager.js

@@ -0,0 +1,36 @@
+import { ref as e } from "vue";
+import { errorMessage as t } from "@meddleware/web-utils";
+//#region src/composables/usePager.ts
+function n(n, r = t) {
+	let i = e([]), a = e(!1), o = e(null), s = e(0), c = e(!1), l = [null], u = 0;
+	async function d(e) {
+		let t = ++u;
+		a.value = !0;
+		try {
+			let r = await n(l[e] ?? null);
+			if (t !== u) return;
+			i.value = r.items;
+			let a = r.next_cursor ?? null;
+			c.value = a !== null, a && (l[e + 1] = a), s.value = e, o.value = null;
+		} catch (e) {
+			t === u && (o.value = r(e));
+		} finally {
+			t === u && (a.value = !1);
+		}
+	}
+	return {
+		items: i,
+		loading: a,
+		error: o,
+		index: s,
+		hasNext: c,
+		reset() {
+			return l = [null], d(0);
+		},
+		reload: () => d(s.value),
+		next: () => c.value ? d(s.value + 1) : Promise.resolve(),
+		prev: () => s.value > 0 ? d(s.value - 1) : Promise.resolve()
+	};
+}
+//#endregion
+export { n as usePager };

package/dist/composables/useSeason.js

@@ -0,0 +1,8 @@
+//#region src/composables/useSeason.ts
+function e() {
+	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 { e as useSeason };

package/dist/composables/useStatusSnapshot.d.ts

@@ -0,0 +1,28 @@
+import { type Ref } from 'vue';
+import { type StatusSnapshot } from '@meddleware/web-utils';
+/** The shortest poll interval honoured, so a tiny `intervalMs` cannot hammer the status endpoint. */
+export declare const MIN_STATUS_POLL_MS = 15000;
+export interface UseStatusSnapshotOptions {
+    /** URL of the `GET /api/status` endpoint. */
+    url: string;
+    /** Poll interval in milliseconds (default 60 000; values below 15 000 are raised to it). */
+    intervalMs?: number;
+    /** Time allowed for one request, headers and body (default 10 000). */
+    timeoutMs?: number;
+}
+export interface StatusSnapshotState {
+    /** The latest valid snapshot, kept across a failed poll (null until the first success). */
+    snapshot: Ref<StatusSnapshot | null>;
+    /** The last poll's failure, or null when it succeeded. */
+    error: Ref<string | null>;
+    /** True until the first answer (or failure) arrives. */
+    loading: Ref<boolean>;
+    /** Poll now. */
+    refresh: () => Promise<void>;
+}
+/**
+ * Poll the platform status endpoint: once on mount, then every `intervalMs` while the tab is visible (a hidden tab catches up when it
+ * becomes visible again). Renders exactly what the API returns: a response that is not a valid snapshot is an error, never "healthy".
+ * An older, slower poll never overwrites a newer one. Must be called from a component's `setup`.
+ */
+export declare function useStatusSnapshot(options: UseStatusSnapshotOptions): StatusSnapshotState;

package/dist/composables/useStatusSnapshot.js

@@ -0,0 +1,38 @@
+import { onMounted as e, onScopeDispose as t, ref as n } from "vue";
+import { createGeneration as r, errorMessage as i, fetchJson as a, parseSnapshot as o } from "@meddleware/web-utils";
+//#region src/composables/useStatusSnapshot.ts
+var s = 15e3;
+function c(c) {
+	let l = n(null), u = n(null), d = n(!0), f = r();
+	async function p() {
+		let e = f.begin();
+		try {
+			let t = o(await a(c.url, { timeoutMs: c.timeoutMs ?? 1e4 }));
+			if (!t) throw Error("unexpected response shape");
+			if (!e()) return;
+			l.value = t, u.value = null;
+		} catch (t) {
+			if (!e()) return;
+			u.value = i(t);
+		} finally {
+			e() && (d.value = !1);
+		}
+	}
+	let m = () => {
+		document.hidden || p();
+	};
+	return e(() => {
+		p();
+		let e = setInterval(m, Math.max(c.intervalMs ?? 6e4, s));
+		document.addEventListener("visibilitychange", m), t(() => {
+			clearInterval(e), document.removeEventListener("visibilitychange", m);
+		});
+	}), {
+		snapshot: l,
+		error: u,
+		loading: d,
+		refresh: p
+	};
+}
+//#endregion
+export { s as MIN_STATUS_POLL_MS, c as useStatusSnapshot };