blessing-ui 0.1.0 → 0.3.0

package/dist/components/BlessFileInput.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,8 @@ var x = ["for"], S = [
 		list: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		removeLabel: {}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
@@ -97,7 +98,7 @@ var x = ["for"], S = [
 			o("button", {
 				type: "button",
 				class: "bless-file__remove",
-				"aria-label": `Remove ${e.name}`,
+				"aria-label": (c.removeLabel ?? ((e) => `Remove ${e}`))(e.name),
 				onClick: (e) => R(t)
 			}, " × ", 8, O)
 		]))), 128))], 512)) : i("", !0)], 2));

package/dist/components/BlessFormula.css

@@ -0,0 +1 @@
+.bless-formula{gap:var(--bless-space-2);max-width:480px;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid}.bless-formula__label{font-weight:var(--bless-font-weight-bold,700)}.bless-formula__input{box-sizing:border-box;width:100%;min-height:36px;padding:var(--bless-space-1) var(--bless-space-3);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);color:var(--bless-color-text);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.bless-formula__input:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-formula--bad .bless-formula__input{border-color:var(--bless-color-danger)}.bless-formula__vars{gap:var(--bless-space-1);flex-wrap:wrap;display:flex}.bless-formula__chip{padding:2px var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border);color:inherit;font:inherit;font-size:var(--bless-text-xs);cursor:pointer}.bless-formula__chip[aria-pressed=true]{border-color:var(--bless-color-accent);color:var(--bless-color-accent-text)}.bless-formula__chip:focus-visible,.bless-formula__fix:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-formula__out{min-height:1.6em;margin:0}.bless-formula__value{font-weight:var(--bless-font-weight-bold,700)}.bless-formula__error{color:var(--bless-color-danger-text)}.bless-formula__fix{color:var(--bless-color-accent-text);font:inherit;cursor:pointer;background:0 0;border:0;margin-inline-start:var(--bless-space-2);padding:0;text-decoration:underline}

package/dist/components/BlessFormula.js

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

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

@@ -0,0 +1,53 @@
+import { FormulaError, FormulaFns } from '../composables/formula';
+export interface BlessFormulaVariable {
+    name: string;
+    /** what the chip says instead of the name */
+    label?: string;
+    value: number;
+}
+export type { FormulaError as BlessFormulaError } from '../composables/formula';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    variables?: BlessFormulaVariable[];
+    /** extra functions: `{ vat: (x) => x * 0.11 }` */
+    functions?: FormulaFns;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    locale?: string;
+    labels?: Partial<{
+        insert: string;
+        result: (value: string) => string;
+        error: (e: FormulaError) => string;
+        use: (name: string) => string;
+    }>;
+} & {
+    modelValue?: string;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    result: (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    variables?: BlessFormulaVariable[];
+    /** extra functions: `{ vat: (x) => x * 0.11 }` */
+    functions?: FormulaFns;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    locale?: string;
+    labels?: Partial<{
+        insert: string;
+        result: (value: string) => string;
+        error: (e: FormulaError) => string;
+        use: (name: string) => string;
+    }>;
+} & {
+    modelValue?: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onResult?: ((value: number | null) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+    variables: BlessFormulaVariable[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessFormula.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,111 @@
+import { evaluate as e, usedNames as t } from "../composables/formula.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, useId as _, useModel as v, vModelText as y, watch as b, withDirectives as x } from "vue";
+//#region src/components/BlessFormula.vue?vue&type=script&setup=true&lang.ts
+var S = ["for"], C = [
+	"id",
+	"placeholder",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], w = ["aria-label"], T = [
+	"aria-pressed",
+	"title",
+	"disabled",
+	"onClick"
+], E = ["id"], D = { class: "bless-formula__error" }, O = {
+	key: 1,
+	class: "bless-formula__value"
+}, k = /*@__PURE__*/ s({
+	name: "BlessFormula",
+	__name: "BlessFormula",
+	props: /*@__PURE__*/ c({
+		variables: { default: () => [] },
+		functions: {},
+		label: { default: "Formula" },
+		placeholder: { default: "price * qty" },
+		disabled: { type: Boolean },
+		locale: {},
+		labels: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["result"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let k = s, A = v(s, "modelValue"), j = c, M = r(() => ({
+			insert: "Insert a value",
+			result: (e) => `= ${e}`,
+			use: (e) => `Use “${e}”`,
+			error: (e) => {
+				switch (e.code) {
+					case "unexpected": return e.name ? `Unexpected “${e.name}” at position ${e.pos + 1}` : "The formula ends too soon";
+					case "unclosed": return "A bracket is not closed";
+					case "unknown-variable": return `Unknown value “${e.name}”${e.suggestion ? ` — did you mean “${e.suggestion}”?` : ""}`;
+					case "unknown-function": return `Unknown function “${e.name}”${e.suggestion ? ` — did you mean “${e.suggestion}”?` : ""}`;
+					case "arity": return `${e.name} needs a value to work on`;
+					case "divide-by-zero": return "Division by zero";
+					default: return "The result is not a number";
+				}
+			},
+			...k.labels
+		})), N = _(), P = p(), F = r(() => Object.fromEntries(k.variables.map((e) => [e.name, e.value]))), I = r(() => e(A.value, F.value, k.functions)), L = r(() => !I.value.ok && I.value.error.code === "empty"), R = r(() => I.value.ok || L.value ? null : I.value.error), z = r(() => I.value.ok ? new Intl.NumberFormat(k.locale, { maximumFractionDigits: 6 }).format(I.value.value) : ""), B = r(() => new Set(t(A.value))), V = () => j("result", I.value.ok ? I.value.value : null);
+		d(V), b(I, V);
+		async function H(e) {
+			let t = P.value, n = A.value, r = t?.selectionStart ?? n.length, i = t?.selectionEnd ?? n.length, a = /[A-Za-z0-9_.)]/, o = r > 0 && a.test(n[r - 1]) ? " " : "", s = i < n.length && a.test(n[i]) ? " " : "";
+			A.value = n.slice(0, r) + o + e + s + n.slice(i);
+			let c = r + o.length + e.length;
+			await l(), t?.focus(), t?.setSelectionRange(c, c);
+		}
+		function U(e) {
+			A.value = A.value.slice(0, e.pos) + e.suggestion + A.value.slice(e.pos + e.length), l(() => P.value?.focus());
+		}
+		return (e, t) => (f(), a("div", { class: u(["bless-formula", { "bless-formula--bad": R.value }]) }, [
+			o("label", {
+				class: "bless-formula__label",
+				for: `${g(N)}-in`
+			}, h(s.label), 9, S),
+			x(o("input", {
+				id: `${g(N)}-in`,
+				ref_key: "input",
+				ref: P,
+				"onUpdate:modelValue": t[0] ||= (e) => A.value = e,
+				class: "bless-formula__input",
+				type: "text",
+				spellcheck: "false",
+				autocomplete: "off",
+				autocapitalize: "off",
+				placeholder: s.placeholder,
+				disabled: s.disabled,
+				"aria-invalid": R.value ? !0 : void 0,
+				"aria-describedby": `${g(N)}-out`
+			}, null, 8, C), [[y, A.value]]),
+			s.variables.length ? (f(), a("div", {
+				key: 0,
+				class: "bless-formula__vars",
+				role: "group",
+				"aria-label": M.value.insert
+			}, [(f(!0), a(n, null, m(s.variables, (e) => (f(), a("button", {
+				key: e.name,
+				type: "button",
+				class: "bless-formula__chip",
+				"aria-pressed": B.value.has(e.name),
+				title: `${e.name} = ${e.value}`,
+				disabled: s.disabled,
+				onClick: (t) => H(e.name)
+			}, h(e.label ?? e.name), 9, T))), 128))], 8, w)) : i("", !0),
+			o("p", {
+				id: `${g(N)}-out`,
+				class: "bless-formula__out",
+				role: "status",
+				"aria-live": "polite"
+			}, [R.value ? (f(), a(n, { key: 0 }, [o("span", D, h(M.value.error(R.value)), 1), R.value.suggestion ? (f(), a("button", {
+				key: 0,
+				type: "button",
+				class: "bless-formula__fix",
+				onClick: t[1] ||= (e) => U(R.value)
+			}, h(M.value.use(R.value.suggestion)), 1)) : i("", !0)], 64)) : I.value.ok ? (f(), a("span", O, h(M.value.result(z.value)), 1)) : i("", !0)], 8, E)
+		], 2));
+	}
+});
+//#endregion
+export { k 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,81 @@
+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 sentence read for a bar and the one announced after an edit; dates arrive formatted */
+    labels?: Partial<{
+        span: (task: string, from: string, to: string) => string;
+        done: (percent: number) => string;
+        after: (names: string[]) => 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 sentence read for a bar and the one announced after an edit; dates arrive formatted */
+    labels?: Partial<{
+        span: (task: string, from: string, to: string) => string;
+        done: (percent: number) => string;
+        after: (names: string[]) => 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,276 @@
+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 ee = ["aria-label"], h = { class: "bless-gantt__scroll" }, g = { class: "bless-gantt__labels" }, _ = ["title"], te = {
+	class: "bless-gantt__head",
+	"aria-hidden": "true"
+}, v = { class: "bless-gantt__months" }, y = {
+	key: 0,
+	class: "bless-gantt__days"
+}, b = ["width", "height"], x = ["d"], ne = [
+	"tabindex",
+	"aria-label",
+	"aria-pressed",
+	"onClick",
+	"onFocus",
+	"onKeydown",
+	"onPointerdown"
+], S = ["onPointerdown"], re = ["onPointerdown"], ie = {
+	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" },
+		labels: {}
+	}, {
+		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 = n(() => ({
+			span: (e, t, n) => `${e}: ${t} to ${n}`,
+			done: (e) => `${e}% done`,
+			after: (e) => `after ${e.join(" and ")}`,
+			...C.labels
+		})), T = m(o, "tasks"), E = m(o, "selected"), D = s, O = 864e5, k = (e) => {
+			let [t, n, r] = e.split("-").map(Number);
+			return Date.UTC(t, (n ?? 1) - 1, r ?? 1) / O;
+		}, A = (e) => /* @__PURE__ */ new Date(e * O), j = (e) => A(e).toISOString().slice(0, 10), M = d(null), N = (e) => {
+			let t = k(e.start), n = k(e.end), r = M.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
+			};
+		}, P = n(() => C.from ? k(C.from) : Math.min(...T.value.map((e) => N(e).s), k(e()))), F = n(() => C.to ? k(C.to) : Math.max(...T.value.map((e) => N(e).e), P.value)), I = n(() => Math.max(1, F.value - P.value + 1)), L = n(() => I.value * C.dayWidth), R = (e) => new Intl.DateTimeFormat(C.locale, {
+			...e,
+			timeZone: "UTC"
+		}), ae = n(() => R({
+			month: "long",
+			year: "numeric"
+		})), z = n(() => R({
+			month: "short",
+			day: "numeric"
+		})), oe = n(() => {
+			let e = [];
+			for (let t = 0; t < I.value; t++) {
+				let n = A(P.value + t);
+				(!e.length || n.getUTCDate() === 1) && e.push({
+					text: ae.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: I.value }, (e, t) => {
+			let n = A(P.value + t), r = n.getUTCDay();
+			return {
+				n: n.getUTCDate(),
+				weekend: r === 0 || r === 6
+			};
+		})), V = (e) => {
+			let t = N(e), n = Math.max(t.s, P.value), r = Math.min(t.e, F.value);
+			return {
+				left: `${(n - P.value) * C.dayWidth}px`,
+				width: `${Math.max(1, r - n + 1) * C.dayWidth}px`
+			};
+		}, H = n(() => {
+			let t = k(e());
+			return t >= P.value && t <= F.value ? (t - P.value + .5) * C.dayWidth : null;
+		}), U = (e) => Math.min(100, Math.max(0, e.progress ?? 0)), se = (e) => {
+			let t = N(e), n = (e.after ?? []).map((e) => T.value.find((t) => t.id === e)?.label).filter(Boolean);
+			return w.value.span(e.label, z.value.format(A(t.s)), z.value.format(A(t.e))) + (e.progress == null ? "" : `, ${w.value.done(U(e))}`) + (n.length ? `, ${w.value.after(n)}` : "");
+		}, W = n(() => {
+			let e = [], t = C.rowHeight;
+			return T.value.forEach((n, r) => {
+				for (let i of n.after ?? []) {
+					let a = T.value.findIndex((e) => e.id === i);
+					if (a < 0) continue;
+					let o = V(T.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), M.value = {
+				id: e.id,
+				mode: t,
+				x0: n.clientX,
+				s: k(e.start),
+				e: k(e.end),
+				delta: 0
+			});
+		}
+		function J(e) {
+			let t = M.value;
+			t && (t.delta = Math.round((e.clientX - t.x0) / C.dayWidth));
+		}
+		function Y() {
+			let e = M.value;
+			if (!e || (M.value = null, K = e.delta !== 0, e.delta === 0)) return;
+			let t = T.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: j(t),
+				end: j(n)
+			};
+			T.value = T.value.map((t) => t.id === e.id ? {
+				...t,
+				...r
+			} : t), D("change", {
+				...e,
+				...r
+			}, r), G.value = w.value.span(e.label, z.value.format(A(t)), z.value.format(A(n)));
+		}
+		let Z = d(), Q = d(0);
+		function ce(e, t) {
+			let n = t.key === "ArrowDown" ? e + 1 : t.key === "ArrowUp" ? e - 1 : t.key === "Home" ? 0 : t.key === "End" ? T.value.length - 1 : null;
+			if (n != null) {
+				t.preventDefault();
+				let e = Math.min(T.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 = T.value[e], r = t.key === "ArrowRight" ? 1 : -1;
+				t.shiftKey ? X(n, k(n.start), Math.max(k(n.start), k(n.end) + r)) : X(n, k(n.start) + r, k(n.end) + r);
+			} else (t.key === "Enter" || t.key === " ") && (t.preventDefault(), $(T.value[e]));
+		}
+		function $(e) {
+			if (K) return void (K = !1);
+			E.value = E.value === e.id ? null : e.id, D("select", e);
+		}
+		return (e, n) => (u(), i("div", {
+			ref_key: "root",
+			ref: Z,
+			class: "bless-gantt",
+			role: "group",
+			"aria-label": o.label
+		}, [a("div", h, [a("div", {
+			class: "bless-gantt__body",
+			style: l({ "--bless-gantt-label": `${o.labelWidth}px` })
+		}, [a("div", g, [n[0] ||= a("div", {
+			class: "bless-gantt__corner",
+			style: { height: "56px" }
+		}, null, -1), (u(!0), i(t, null, f(T.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, _))), 128))]), a("div", {
+			class: "bless-gantt__plot",
+			style: l({ width: `${L.value}px` })
+		}, [a("div", te, [a("div", v, [(u(!0), i(t, null, f(oe.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", y, [(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: `${T.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: L.value,
+				height: T.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, x))), 128))], 8, b)) : r("", !0),
+			(u(!0), i(t, null, f(T.value, (e, n) => (u(), i("button", {
+				key: e.id,
+				type: "button",
+				class: c(["bless-gantt__bar", {
+					"bless-gantt__bar--on": E.value === e.id,
+					"bless-gantt__bar--edit": o.editable,
+					"bless-gantt__bar--drag": M.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": se(e),
+				"aria-pressed": E.value === e.id,
+				onClick: (t) => (Q.value = n, $(e)),
+				onFocus: (e) => Q.value = n,
+				onKeydown: (e) => ce(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, S), 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, re)], 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, ne))), 128))
+		], 4)], 4)], 4)]), a("span", ie, p(G.value), 1)], 8, ee));
+	}
+});
+//#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>;