blessing-ui 0.1.0 → 0.2.0

package/dist/components/BlessDiff.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,148 @@
+import { diffLines as e } from "../composables/diffLines.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, toDisplayString as d } from "vue";
+//#region src/components/BlessDiff.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "bless-diff__head" }, p = { class: "bless-diff__title" }, m = { class: "bless-diff__count" }, h = { class: "bless-diff__plus" }, g = { class: "bless-diff__minus" }, _ = { class: "bless-diff__sr" }, v = ["aria-label"], y = { class: "bless-diff__table" }, b = {
+	key: 0,
+	class: "bless-diff__cols"
+}, x = {
+	key: 0,
+	"aria-hidden": "true"
+}, S = { scope: "col" }, C = {
+	key: 1,
+	"aria-hidden": "true"
+}, w = { scope: "col" }, T = {
+	key: 0,
+	class: "bless-diff__fold"
+}, E = ["colspan"], D = ["onClick"], O = {
+	key: 0,
+	class: "bless-diff__no",
+	"aria-hidden": "true"
+}, k = {
+	key: 1,
+	class: "bless-diff__no",
+	"aria-hidden": "true"
+}, A = ["aria-label"], j = { class: "bless-diff__text" }, M = {
+	key: 2,
+	class: "bless-diff__row"
+}, N = {
+	key: 0,
+	class: "bless-diff__no",
+	"aria-hidden": "true"
+}, P = ["aria-label"], F = /*@__PURE__*/ o({
+	name: "BlessDiff",
+	__name: "BlessDiff",
+	props: {
+		a: {},
+		b: {},
+		mode: { default: "inline" },
+		context: {},
+		lineNumbers: {
+			type: Boolean,
+			default: !0
+		},
+		labelA: { default: "Before" },
+		labelB: { default: "After" },
+		label: { default: "Changes" }
+	},
+	setup(o) {
+		let F = o, I = n(() => e(F.a, F.b)), L = n(() => I.value.filter((e) => e.type === "add").length), R = n(() => I.value.filter((e) => e.type === "del").length), z = l(/* @__PURE__ */ new Set()), B = n(() => {
+			let e = F.context;
+			if (e == null) return I.value.map((e) => ({
+				row: e,
+				hide: !1,
+				id: -1
+			}));
+			let t = I.value.map((e) => ({
+				row: e,
+				hide: !1,
+				id: -1
+			})), n = 0, r = 0;
+			for (; n < t.length;) {
+				if (t[n].row.type !== "same") {
+					n++;
+					continue;
+				}
+				let i = n;
+				for (; i < t.length && t[i].row.type === "same";) i++;
+				let a = n === 0 ? n : n + e, o = i === t.length ? i : i - e;
+				if (o - a > 1 && !z.value.has(r)) for (let e = a; e < o; e++) t[e].hide = !0, t[e].id = r;
+				r++, n = i;
+			}
+			return t;
+		}), V = n(() => {
+			let e = [], t = /* @__PURE__ */ new Set(), n = {
+				del: [],
+				add: []
+			}, r = () => {
+				if (F.mode === "inline") for (let t of [...n.del, ...n.add]) e.push({
+					kind: "row",
+					row: t
+				});
+				else {
+					let t = Math.max(n.del.length, n.add.length);
+					for (let r = 0; r < t; r++) e.push({
+						kind: "pair",
+						left: n.del[r],
+						right: n.add[r]
+					});
+				}
+				n.del = [], n.add = [];
+			};
+			for (let { row: i, hide: a, id: o } of B.value) a ? (r(), t.has(o) || (t.add(o), e.push({
+				kind: "fold",
+				id: o,
+				count: B.value.filter((e) => e.id === o && e.hide).length
+			}))) : i.type === "del" ? n.del.push(i) : i.type === "add" ? n.add.push(i) : (r(), e.push(F.mode === "inline" ? {
+				kind: "row",
+				row: i
+			} : {
+				kind: "pair",
+				left: i,
+				right: i
+			}));
+			return r(), e;
+		}), H = {
+			same: "",
+			add: "+",
+			del: "−"
+		}, U = {
+			same: "",
+			add: "added",
+			del: "removed"
+		}, W = (e) => z.value = new Set(z.value).add(e), G = n(() => (F.mode, 4));
+		return (e, n) => (c(), i("figure", { class: s(["bless-diff", `bless-diff--${o.mode}`]) }, [a("figcaption", f, [a("span", p, d(o.label), 1), a("span", m, [
+			a("span", h, "+" + d(L.value), 1),
+			a("span", g, "−" + d(R.value), 1),
+			a("span", _, d(L.value) + " lines added, " + d(R.value) + " removed", 1)
+		])]), a("div", {
+			class: "bless-diff__scroll",
+			tabindex: "0",
+			role: "region",
+			"aria-label": o.label
+		}, [a("table", y, [o.mode === "split" ? (c(), i("thead", b, [a("tr", null, [
+			o.lineNumbers ? (c(), i("th", x)) : r("", !0),
+			a("th", S, d(o.labelA), 1),
+			o.lineNumbers ? (c(), i("th", C)) : r("", !0),
+			a("th", w, d(o.labelB), 1)
+		])])) : r("", !0), a("tbody", null, [(c(!0), i(t, null, u(V.value, (e, n) => (c(), i(t, { key: n }, [e.kind === "fold" ? (c(), i("tr", T, [a("td", { colspan: G.value }, [a("button", {
+			type: "button",
+			onClick: (t) => W(e.id)
+		}, d(e.count) + " unchanged " + d(e.count === 1 ? "line" : "lines"), 9, D)], 8, E)])) : e.kind === "row" ? (c(), i("tr", {
+			key: 1,
+			class: s(`bless-diff__row bless-diff__row--${e.row.type}`)
+		}, [
+			o.lineNumbers ? (c(), i("td", O, d(e.row.a), 1)) : r("", !0),
+			o.lineNumbers ? (c(), i("td", k, d(e.row.b), 1)) : r("", !0),
+			a("td", {
+				class: "bless-diff__sign",
+				"aria-label": U[e.row.type] || void 0
+			}, d(H[e.row.type]), 9, A),
+			a("td", j, d(e.row.text), 1)
+		], 2)) : (c(), i("tr", M, [(c(!0), i(t, null, u([e.left, e.right], (e, n) => (c(), i(t, { key: n }, [o.lineNumbers ? (c(), i("td", N, d(n ? e?.b : e?.a), 1)) : r("", !0), a("td", {
+			class: s(["bless-diff__text", e && e.type !== "same" ? `bless-diff__cell--${e.type}` : e ? "" : "bless-diff__cell--empty"]),
+			"aria-label": e && e.type !== "same" ? `${U[e.type]}: ${e.text}` : void 0
+		}, d(e?.text), 11, P)], 64))), 128))]))], 64))), 128))])])], 8, v)], 2));
+	}
+});
+//#endregion
+export { F as default };

package/dist/components/BlessGantt.css

@@ -0,0 +1 @@
+.bless-gantt{min-width:0;max-width:100%;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-gantt__scroll{border:var(--bless-border-width) solid var(--bless-color-border);overflow:auto}.bless-gantt__body{width:max-content;min-width:100%;display:flex}.bless-gantt__labels{z-index:2;width:var(--bless-gantt-label);background:var(--bless-color-bg);border-inline-end:var(--bless-border-width) solid var(--bless-color-border);flex:none;position:sticky;inset-inline-start:0}.bless-gantt__label{box-sizing:border-box;padding:0 var(--bless-space-3);white-space:nowrap;text-overflow:ellipsis;border-top:var(--bless-border-width) solid var(--bless-color-border);align-items:center;display:flex;overflow:hidden}.bless-gantt__plot{flex:none;position:relative}.bless-gantt__head{height:56px;color:var(--bless-color-text-muted);font-size:var(--bless-text-xs)}.bless-gantt__months{height:28px;position:relative}.bless-gantt__month{box-sizing:border-box;padding:var(--bless-space-2) var(--bless-space-2) 0;white-space:nowrap;border-inline-start:var(--bless-border-width) solid var(--bless-color-border);height:100%;position:absolute;top:0;overflow:hidden}.bless-gantt__days{height:28px;display:flex}.bless-gantt__day{box-sizing:border-box;padding-top:var(--bless-space-2);text-align:center;font-variant-numeric:tabular-nums;flex:none}.bless-gantt__day--weekend{background:var(--bless-color-surface)}.bless-gantt__rows{border-top:var(--bless-border-width) solid var(--bless-color-border);background-image:linear-gradient(to right, var(--bless-color-border) 1px, transparent 1px);position:relative}.bless-gantt__today{background:var(--bless-color-accent);pointer-events:none;width:2px;position:absolute;inset-block:0}.bless-gantt__bar{box-sizing:border-box;border:var(--bless-border-width) solid var(--bless-color-text);background:var(--bless-color-bg);cursor:pointer;padding:0;position:absolute;overflow:hidden}.bless-gantt__done{background:var(--bless-color-text);height:100%;display:block}.bless-gantt__arrows{pointer-events:none;color:var(--bless-color-text);position:absolute;inset:0}.bless-gantt__arrows>path{fill:none;stroke:currentColor;stroke-width:1.5px}.bless-gantt__bar--edit{cursor:grab;touch-action:none}.bless-gantt__bar--drag{cursor:grabbing;opacity:.85}.bless-gantt__grip{cursor:ew-resize;background:color-mix(in srgb, var(--bless-color-text) 25%, transparent);width:8px;position:absolute;inset-block:0}.bless-gantt__grip--start{inset-inline-start:0}.bless-gantt__grip--end{inset-inline-end:0}.bless-gantt__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-gantt__bar:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-gantt__bar--on{border-color:var(--bless-color-accent);outline:2px solid var(--bless-color-accent)}

package/dist/components/BlessGantt.js

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

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

@@ -0,0 +1,69 @@
+export interface BlessGanttTask {
+    id: string | number;
+    label: string;
+    /** ISO dates, `YYYY-MM-DD`; the task covers both days */
+    start: string;
+    end: string;
+    /** 0 to 100 */
+    progress?: number;
+    /** ids of tasks that must finish first; an arrow runs from each to this one */
+    after?: (string | number)[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    /** width of one day in px; under 12 the day numbers are left out */
+    dayWidth?: number;
+    rowHeight?: number;
+    /** first and last day shown; defaults to the span of the tasks */
+    from?: string;
+    to?: string;
+    locale?: string;
+    /** width of the label column in px */
+    labelWidth?: number;
+    /** drag a bar to move it and its ends to resize it; Alt + arrows from the keyboard */
+    editable?: boolean;
+    label?: string;
+} & {
+    /** the schedule; with `editable`, moves and resizes come back through here */
+    tasks: BlessGanttTask[];
+    selected?: BlessGanttTask["id"] | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (task: BlessGanttTask) => any;
+    change: (task: BlessGanttTask, dates: {
+        start: string;
+        end: string;
+    }) => any;
+    "update:selected": (value: string | number | null) => any;
+    "update:tasks": (value: BlessGanttTask[]) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** width of one day in px; under 12 the day numbers are left out */
+    dayWidth?: number;
+    rowHeight?: number;
+    /** first and last day shown; defaults to the span of the tasks */
+    from?: string;
+    to?: string;
+    locale?: string;
+    /** width of the label column in px */
+    labelWidth?: number;
+    /** drag a bar to move it and its ends to resize it; Alt + arrows from the keyboard */
+    editable?: boolean;
+    label?: string;
+} & {
+    /** the schedule; with `editable`, moves and resizes come back through here */
+    tasks: BlessGanttTask[];
+    selected?: BlessGanttTask["id"] | null;
+}> & Readonly<{
+    onSelect?: ((task: BlessGanttTask) => any) | undefined;
+    onChange?: ((task: BlessGanttTask, dates: {
+        start: string;
+        end: string;
+    }) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | number | null) => any) | undefined;
+    "onUpdate:tasks"?: ((value: BlessGanttTask[]) => any) | undefined;
+}>, {
+    label: string;
+    dayWidth: number;
+    rowHeight: number;
+    labelWidth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessGantt.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,270 @@
+import { isoToday as e } from "../composables/date.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, useModel as m } from "vue";
+//#region src/components/BlessGantt.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "bless-gantt__labels" }, te = ["title"], _ = {
+	class: "bless-gantt__head",
+	"aria-hidden": "true"
+}, ne = { class: "bless-gantt__months" }, v = {
+	key: 0,
+	class: "bless-gantt__days"
+}, re = ["width", "height"], y = ["d"], b = [
+	"tabindex",
+	"aria-label",
+	"aria-pressed",
+	"onClick",
+	"onFocus",
+	"onKeydown",
+	"onPointerdown"
+], x = ["onPointerdown"], ie = ["onPointerdown"], S = {
+	class: "bless-gantt__live",
+	"aria-live": "polite"
+}, C = /*@__PURE__*/ o({
+	name: "BlessGantt",
+	__name: "BlessGantt",
+	props: /*@__PURE__*/ s({
+		dayWidth: { default: 28 },
+		rowHeight: { default: 36 },
+		from: {},
+		to: {},
+		locale: {},
+		labelWidth: { default: 160 },
+		editable: { type: Boolean },
+		label: { default: "Schedule" }
+	}, {
+		tasks: { required: !0 },
+		tasksModifiers: {},
+		selected: { default: null },
+		selectedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["select", "change"], ["update:tasks", "update:selected"]),
+	setup(o, { emit: s }) {
+		let C = o, w = m(o, "tasks"), T = m(o, "selected"), E = s, D = 864e5, O = (e) => {
+			let [t, n, r] = e.split("-").map(Number);
+			return Date.UTC(t, (n ?? 1) - 1, r ?? 1) / D;
+		}, k = (e) => /* @__PURE__ */ new Date(e * D), A = (e) => k(e).toISOString().slice(0, 10), j = d(null), M = (e) => {
+			let t = O(e.start), n = O(e.end), r = j.value;
+			return r && r.id === e.id && (r.mode === "move" ? (t = r.s + r.delta, n = r.e + r.delta) : r.mode === "start" ? t = Math.min(r.s + r.delta, r.e) : n = Math.max(r.e + r.delta, r.s)), {
+				s: t,
+				e: n
+			};
+		}, N = n(() => C.from ? O(C.from) : Math.min(...w.value.map((e) => M(e).s), O(e()))), P = n(() => C.to ? O(C.to) : Math.max(...w.value.map((e) => M(e).e), N.value)), F = n(() => Math.max(1, P.value - N.value + 1)), I = n(() => F.value * C.dayWidth), L = (e) => new Intl.DateTimeFormat(C.locale, {
+			...e,
+			timeZone: "UTC"
+		}), R = n(() => L({
+			month: "long",
+			year: "numeric"
+		})), z = n(() => L({
+			month: "short",
+			day: "numeric"
+		})), ae = n(() => {
+			let e = [];
+			for (let t = 0; t < F.value; t++) {
+				let n = k(N.value + t);
+				(!e.length || n.getUTCDate() === 1) && e.push({
+					text: R.value.format(n),
+					left: t * C.dayWidth,
+					width: 0
+				}), e.at(-1).width += C.dayWidth;
+			}
+			return e;
+		}), B = n(() => C.dayWidth < 12 ? [] : Array.from({ length: F.value }, (e, t) => {
+			let n = k(N.value + t), r = n.getUTCDay();
+			return {
+				n: n.getUTCDate(),
+				weekend: r === 0 || r === 6
+			};
+		})), V = (e) => {
+			let t = M(e), n = Math.max(t.s, N.value), r = Math.min(t.e, P.value);
+			return {
+				left: `${(n - N.value) * C.dayWidth}px`,
+				width: `${Math.max(1, r - n + 1) * C.dayWidth}px`
+			};
+		}, H = n(() => {
+			let t = O(e());
+			return t >= N.value && t <= P.value ? (t - N.value + .5) * C.dayWidth : null;
+		}), U = (e) => Math.min(100, Math.max(0, e.progress ?? 0)), oe = (e) => {
+			let t = M(e), n = (e.after ?? []).map((e) => w.value.find((t) => t.id === e)?.label).filter(Boolean);
+			return `${e.label}: ${z.value.format(k(t.s))} to ${z.value.format(k(t.e))}` + (e.progress == null ? "" : `, ${U(e)}% done`) + (n.length ? `, after ${n.join(" and ")}` : "");
+		}, W = n(() => {
+			let e = [], t = C.rowHeight;
+			return w.value.forEach((n, r) => {
+				for (let i of n.after ?? []) {
+					let a = w.value.findIndex((e) => e.id === i);
+					if (a < 0) continue;
+					let o = V(w.value[a]), s = V(n), c = parseFloat(o.left) + parseFloat(o.width), l = parseFloat(s.left), u = a * t + t / 2, d = r * t + t / 2, f = u + (d > u ? t / 2 : -t / 2);
+					e.push(l >= c + 12 ? `M${c} ${u}H${c + 6}V${d}H${l - 1}` : `M${c} ${u}H${c + 6}V${f}H${l - 8}V${d}H${l - 1}`);
+				}
+			}), e;
+		}), G = d(""), K = !1;
+		function q(e, t, n) {
+			C.editable && !n.button && (n.stopPropagation(), n.currentTarget.setPointerCapture?.(n.pointerId), j.value = {
+				id: e.id,
+				mode: t,
+				x0: n.clientX,
+				s: O(e.start),
+				e: O(e.end),
+				delta: 0
+			});
+		}
+		function J(e) {
+			let t = j.value;
+			t && (t.delta = Math.round((e.clientX - t.x0) / C.dayWidth));
+		}
+		function Y() {
+			let e = j.value;
+			if (!e || (j.value = null, K = e.delta !== 0, e.delta === 0)) return;
+			let t = w.value.find((t) => t.id === e.id), n = e.mode === "move" ? {
+				s: e.s + e.delta,
+				e: e.e + e.delta
+			} : e.mode === "start" ? {
+				s: Math.min(e.s + e.delta, e.e),
+				e: e.e
+			} : {
+				s: e.s,
+				e: Math.max(e.e + e.delta, e.s)
+			};
+			X(t, n.s, n.e);
+		}
+		function X(e, t, n) {
+			let r = {
+				start: A(t),
+				end: A(n)
+			};
+			w.value = w.value.map((t) => t.id === e.id ? {
+				...t,
+				...r
+			} : t), E("change", {
+				...e,
+				...r
+			}, r), G.value = `${e.label}: ${z.value.format(k(t))} to ${z.value.format(k(n))}`;
+		}
+		let Z = d(), Q = d(0);
+		function se(e, t) {
+			let n = t.key === "ArrowDown" ? e + 1 : t.key === "ArrowUp" ? e - 1 : t.key === "Home" ? 0 : t.key === "End" ? w.value.length - 1 : null;
+			if (n != null) {
+				t.preventDefault();
+				let e = Math.min(w.value.length - 1, Math.max(0, n));
+				Q.value = e, Z.value?.querySelectorAll(".bless-gantt__bar")[e]?.focus();
+			} else if (C.editable && t.altKey && (t.key === "ArrowLeft" || t.key === "ArrowRight")) {
+				t.preventDefault();
+				let n = w.value[e], r = t.key === "ArrowRight" ? 1 : -1;
+				t.shiftKey ? X(n, O(n.start), Math.max(O(n.start), O(n.end) + r)) : X(n, O(n.start) + r, O(n.end) + r);
+			} else (t.key === "Enter" || t.key === " ") && (t.preventDefault(), $(w.value[e]));
+		}
+		function $(e) {
+			if (K) return void (K = !1);
+			T.value = T.value === e.id ? null : e.id, E("select", e);
+		}
+		return (e, n) => (u(), i("div", {
+			ref_key: "root",
+			ref: Z,
+			class: "bless-gantt",
+			role: "group",
+			"aria-label": o.label
+		}, [a("div", g, [a("div", {
+			class: "bless-gantt__body",
+			style: l({ "--bless-gantt-label": `${o.labelWidth}px` })
+		}, [a("div", ee, [n[0] ||= a("div", {
+			class: "bless-gantt__corner",
+			style: { height: "56px" }
+		}, null, -1), (u(!0), i(t, null, f(w.value, (e) => (u(), i("div", {
+			key: e.id,
+			class: "bless-gantt__label",
+			style: l({ height: `${o.rowHeight}px` }),
+			title: e.label
+		}, p(e.label), 13, te))), 128))]), a("div", {
+			class: "bless-gantt__plot",
+			style: l({ width: `${I.value}px` })
+		}, [a("div", _, [a("div", ne, [(u(!0), i(t, null, f(ae.value, (e) => (u(), i("span", {
+			key: e.left,
+			class: "bless-gantt__month",
+			style: l({
+				left: `${e.left}px`,
+				width: `${e.width}px`
+			})
+		}, p(e.text), 5))), 128))]), B.value.length ? (u(), i("div", v, [(u(!0), i(t, null, f(B.value, (e, t) => (u(), i("span", {
+			key: t,
+			class: c(["bless-gantt__day", { "bless-gantt__day--weekend": e.weekend }]),
+			style: l({ width: `${o.dayWidth}px` })
+		}, p(e.n), 7))), 128))])) : r("", !0)]), a("div", {
+			class: "bless-gantt__rows",
+			style: l({
+				height: `${w.value.length * o.rowHeight}px`,
+				backgroundSize: `${o.dayWidth}px 100%`
+			})
+		}, [
+			H.value == null ? r("", !0) : (u(), i("span", {
+				key: 0,
+				class: "bless-gantt__today",
+				"aria-hidden": "true",
+				style: l({ left: `${H.value}px` })
+			}, null, 4)),
+			W.value.length ? (u(), i("svg", {
+				key: 1,
+				class: "bless-gantt__arrows",
+				width: I.value,
+				height: w.value.length * o.rowHeight,
+				"aria-hidden": "true"
+			}, [n[1] ||= a("defs", null, [a("marker", {
+				id: "bless-gantt-head",
+				viewBox: "0 0 8 8",
+				refX: "7",
+				refY: "4",
+				markerWidth: "7",
+				markerHeight: "7",
+				orient: "auto"
+			}, [a("path", {
+				d: "M0 0L8 4L0 8z",
+				fill: "currentColor"
+			})])], -1), (u(!0), i(t, null, f(W.value, (e, t) => (u(), i("path", {
+				key: t,
+				d: e,
+				"marker-end": "url(#bless-gantt-head)"
+			}, null, 8, y))), 128))], 8, re)) : r("", !0),
+			(u(!0), i(t, null, f(w.value, (e, n) => (u(), i("button", {
+				key: e.id,
+				type: "button",
+				class: c(["bless-gantt__bar", {
+					"bless-gantt__bar--on": T.value === e.id,
+					"bless-gantt__bar--edit": o.editable,
+					"bless-gantt__bar--drag": j.value?.id === e.id
+				}]),
+				style: l({
+					...V(e),
+					top: `${n * o.rowHeight + 6}px`,
+					height: `${o.rowHeight - 12}px`
+				}),
+				tabindex: n === Q.value ? 0 : -1,
+				"aria-label": oe(e),
+				"aria-pressed": T.value === e.id,
+				onClick: (t) => (Q.value = n, $(e)),
+				onFocus: (e) => Q.value = n,
+				onKeydown: (e) => se(n, e),
+				onPointerdown: (t) => q(e, "move", t),
+				onPointermove: J,
+				onPointerup: Y,
+				onPointercancel: Y
+			}, [o.editable ? (u(), i(t, { key: 0 }, [a("span", {
+				class: "bless-gantt__grip bless-gantt__grip--start",
+				"aria-hidden": "true",
+				onPointerdown: (t) => q(e, "start", t),
+				onPointermove: J,
+				onPointerup: Y,
+				onPointercancel: Y
+			}, null, 40, x), a("span", {
+				class: "bless-gantt__grip bless-gantt__grip--end",
+				"aria-hidden": "true",
+				onPointerdown: (t) => q(e, "end", t),
+				onPointermove: J,
+				onPointerup: Y,
+				onPointercancel: Y
+			}, null, 40, ie)], 64)) : r("", !0), e.progress == null ? r("", !0) : (u(), i("span", {
+				key: 1,
+				class: "bless-gantt__done",
+				style: l({ width: `${U(e)}%` })
+			}, null, 4))], 46, b))), 128))
+		], 4)], 4)], 4)]), a("span", S, p(G.value), 1)], 8, h));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BlessGauge.css

@@ -0,0 +1 @@
+.bless-gauge{align-items:center;gap:var(--bless-space-1);width:100%;max-width:240px;font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:inline-flex}.bless-gauge--linear{align-items:stretch;max-width:320px}.bless-gauge__svg{width:100%;height:auto;overflow:visible}.bless-gauge__track,.bless-gauge__band{fill:none;stroke-width:14px}.bless-gauge__track{stroke:var(--bless-color-border)}.bless-gauge__band{opacity:.85}.bless-gauge__needle{stroke:var(--bless-color-text);stroke-width:5px;stroke-linecap:butt}.bless-gauge__bar{background:var(--bless-color-border);height:14px;position:relative}.bless-gauge__seg{opacity:.85;position:absolute;inset-block:0}.bless-gauge__mark{background:var(--bless-color-text);outline:1px solid var(--bless-color-bg);width:4px;position:absolute;inset-block:-4px;translate:-50%}.bless-gauge__read{flex-direction:column;align-items:center;line-height:1.2;display:flex}.bless-gauge--arc .bless-gauge__read{margin-top:calc(var(--bless-space-8) * -1)}.bless-gauge__value{font-size:var(--bless-text-xl);font-variant-numeric:tabular-nums}.bless-gauge__label{font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}

package/dist/components/BlessGauge.js

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

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

@@ -0,0 +1,36 @@
+export interface BlessGaugeZone {
+    /** the zone runs up to this value; zones are sorted by it */
+    to: number;
+    /** a token name (`success`, `warning`, `danger`, `chart-1`…) or any CSS colour */
+    color?: string;
+    /** said after the value when the needle is in this zone: "Normal", "Too hot" */
+    label?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    value: number;
+    min?: number;
+    max?: number;
+    zones?: BlessGaugeZone[];
+    variant?: "arc" | "linear";
+    /** what is measured: names the meter for screen readers and shows under the number */
+    label?: string;
+    /** text for the value, e.g. `(v) => v + " °C"` */
+    format?: (v: number) => string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
+    value: number;
+    min?: number;
+    max?: number;
+    zones?: BlessGaugeZone[];
+    variant?: "arc" | "linear";
+    /** what is measured: names the meter for screen readers and shows under the number */
+    label?: string;
+    /** text for the value, e.g. `(v) => v + " °C"` */
+    format?: (v: number) => string;
+}> & Readonly<{}>, {
+    label: string;
+    variant: "arc" | "linear";
+    min: number;
+    max: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessGauge.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,100 @@
+import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, renderList as c, toDisplayString as l } from "vue";
+//#region src/components/BlessGauge.vue?vue&type=script&setup=true&lang.ts
+var u = [
+	"aria-label",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext"
+], d = {
+	key: 0,
+	class: "bless-gauge__svg",
+	viewBox: "0 0 200 118",
+	"aria-hidden": "true"
+}, f = ["d"], p = ["d"], m = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], h = {
+	key: 1,
+	class: "bless-gauge__bar",
+	"aria-hidden": "true"
+}, g = { class: "bless-gauge__read" }, _ = { class: "bless-gauge__value" }, v = { class: "bless-gauge__label" }, y = /*@__PURE__*/ i({
+	name: "BlessGauge",
+	__name: "BlessGauge",
+	props: {
+		value: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		zones: {},
+		variant: { default: "arc" },
+		label: { default: "Gauge" },
+		format: {}
+	},
+	setup(i) {
+		let y = i, b = t(() => y.max - y.min || 1), x = (e) => Math.min(1, Math.max(0, (e - y.min) / b.value)), S = t(() => x(y.value)), C = t(() => (y.format ?? String)(y.value)), w = (e) => e ? /^[a-z0-9-]+$/i.test(e) ? `var(--bless-color-${e})` : e : "currentColor", T = t(() => {
+			let e = [...y.zones ?? []].sort((e, t) => e.to - t.to), t = 0;
+			return e.map((e) => {
+				let n = x(e.to), r = {
+					from: t,
+					to: n,
+					color: w(e.color)
+				};
+				return t = n, r;
+			});
+		}), E = t(() => {
+			let e = [...y.zones ?? []].sort((e, t) => e.to - t.to);
+			return e.find((e) => y.value <= e.to) ?? e.at(-1);
+		}), D = (e, t = 80) => ({
+			x: +(100 - t * Math.cos(e * Math.PI)).toFixed(2),
+			y: +(100 - t * Math.sin(e * Math.PI)).toFixed(2)
+		}), O = (e, t) => {
+			let n = D(e), r = D(t);
+			return `M${n.x} ${n.y}A80 80 0 0 1 ${r.x} ${r.y}`;
+		}, k = t(() => ({
+			a: D(S.value, 58),
+			b: D(S.value, 90)
+		}));
+		return (t, y) => (s(), n("div", {
+			class: a(["bless-gauge", `bless-gauge--${i.variant}`]),
+			role: "meter",
+			"aria-label": i.label,
+			"aria-valuemin": i.min,
+			"aria-valuemax": i.max,
+			"aria-valuenow": Math.min(i.max, Math.max(i.min, i.value)),
+			"aria-valuetext": E.value?.label ? `${C.value}, ${E.value.label}` : C.value
+		}, [i.variant === "arc" ? (s(), n("svg", d, [
+			r("path", {
+				class: "bless-gauge__track",
+				d: O(0, 1)
+			}, null, 8, f),
+			(s(!0), n(e, null, c(T.value, (e, t) => (s(), n("path", {
+				key: t,
+				class: "bless-gauge__band",
+				d: O(e.from, e.to),
+				style: o({ stroke: e.color })
+			}, null, 12, p))), 128)),
+			r("line", {
+				class: "bless-gauge__needle",
+				x1: k.value.a.x,
+				y1: k.value.a.y,
+				x2: k.value.b.x,
+				y2: k.value.b.y
+			}, null, 8, m)
+		])) : (s(), n("div", h, [(s(!0), n(e, null, c(T.value, (e, t) => (s(), n("span", {
+			key: t,
+			class: "bless-gauge__seg",
+			style: o({
+				left: `${e.from * 100}%`,
+				width: `${(e.to - e.from) * 100}%`,
+				background: e.color
+			})
+		}, null, 4))), 128)), r("span", {
+			class: "bless-gauge__mark",
+			style: o({ left: `${S.value * 100}%` })
+		}, null, 4)])), r("div", g, [r("strong", _, l(C.value), 1), r("span", v, l(i.label), 1)])], 10, u));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/BlessHeatmapCalendar.css

@@ -0,0 +1 @@
+.bless-heat{font-family:var(--bless-font-sans);font-size:var(--bless-text-xs);color:var(--bless-color-text-muted)}.bless-heat__scroll{padding-bottom:var(--bless-space-1);overflow-x:auto}.bless-heat__grid{--bless-heat-size:12px;grid-template-columns:auto repeat(var(--bless-heat-weeks), var(--bless-heat-size));grid-template-rows:auto repeat(7, var(--bless-heat-size));align-items:center;gap:3px;width:max-content;display:grid}.bless-heat__month,.bless-heat__weekday{white-space:nowrap;line-height:1}.bless-heat__weekday{padding-inline-end:var(--bless-space-2)}.bless-heat__cell{width:var(--bless-heat-size,12px);height:var(--bless-heat-size,12px);border:var(--bless-border-width) solid var(--bless-color-border);background:color-mix(in srgb, var(--bless-color-text) calc(var(--bless-heat-l) * 85%), var(--bless-color-surface));cursor:pointer;padding:0;display:block}.bless-heat__cell:focus-visible,.bless-heat__cell--on{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-heat__swatch{cursor:default;display:inline-block}.bless-heat__foot{justify-content:space-between;align-items:center;gap:var(--bless-space-2);margin-top:var(--bless-space-2);flex-wrap:wrap;display:flex}.bless-heat__legend{align-items:center;gap:3px;display:inline-flex}.bless-heat__legend .bless-heat__cell{--bless-heat-size:12px}

package/dist/components/BlessHeatmapCalendar.js

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