blessing-ui 0.2.0 → 0.3.0

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.vue.d.ts

@@ -24,6 +24,12 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** 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[];
@@ -49,6 +55,12 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** 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[];

package/dist/components/BlessGantt.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,13 @@
 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"], _ = {
+var ee = ["aria-label"], h = { class: "bless-gantt__scroll" }, g = { class: "bless-gantt__labels" }, _ = ["title"], te = {
 	class: "bless-gantt__head",
 	"aria-hidden": "true"
-}, ne = { class: "bless-gantt__months" }, v = {
+}, v = { class: "bless-gantt__months" }, y = {
 	key: 0,
 	class: "bless-gantt__days"
-}, re = ["width", "height"], y = ["d"], b = [
+}, b = ["width", "height"], x = ["d"], ne = [
 	"tabindex",
 	"aria-label",
 	"aria-pressed",
@@ -15,7 +15,7 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 	"onFocus",
 	"onKeydown",
 	"onPointerdown"
-], x = ["onPointerdown"], ie = ["onPointerdown"], S = {
+], S = ["onPointerdown"], re = ["onPointerdown"], ie = {
 	class: "bless-gantt__live",
 	"aria-live": "polite"
 }, C = /*@__PURE__*/ o({
@@ -29,7 +29,8 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 		locale: {},
 		labelWidth: { default: 160 },
 		editable: { type: Boolean },
-		label: { default: "Schedule" }
+		label: { default: "Schedule" },
+		labels: {}
 	}, {
 		tasks: { required: !0 },
 		tasksModifiers: {},
@@ -38,82 +39,87 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 	}),
 	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 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) / 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 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
 			};
-		}, 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, {
+		}, 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"
-		}), R = n(() => L({
+		}), ae = n(() => R({
 			month: "long",
 			year: "numeric"
-		})), z = n(() => L({
+		})), z = n(() => R({
 			month: "short",
 			day: "numeric"
-		})), ae = n(() => {
+		})), oe = n(() => {
 			let e = [];
-			for (let t = 0; t < F.value; t++) {
-				let n = k(N.value + t);
+			for (let t = 0; t < I.value; t++) {
+				let n = A(P.value + t);
 				(!e.length || n.getUTCDate() === 1) && e.push({
-					text: R.value.format(n),
+					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: F.value }, (e, t) => {
-			let n = k(N.value + t), r = n.getUTCDay();
+		}), 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 = M(e), n = Math.max(t.s, N.value), r = Math.min(t.e, P.value);
+			let t = N(e), n = Math.max(t.s, P.value), r = Math.min(t.e, F.value);
 			return {
-				left: `${(n - N.value) * C.dayWidth}px`,
+				left: `${(n - P.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 ")}` : "");
+			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 w.value.forEach((n, r) => {
+			return T.value.forEach((n, r) => {
 				for (let i of n.after ?? []) {
-					let a = w.value.findIndex((e) => e.id === i);
+					let a = T.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);
+					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), j.value = {
+			C.editable && !n.button && (n.stopPropagation(), n.currentTarget.setPointerCapture?.(n.pointerId), M.value = {
 				id: e.id,
 				mode: t,
 				x0: n.clientX,
-				s: O(e.start),
-				e: O(e.end),
+				s: k(e.start),
+				e: k(e.end),
 				delta: 0
 			});
 		}
 		function J(e) {
-			let t = j.value;
+			let t = M.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" ? {
+			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" ? {
@@ -127,33 +133,33 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 		}
 		function X(e, t, n) {
 			let r = {
-				start: A(t),
-				end: A(n)
+				start: j(t),
+				end: j(n)
 			};
-			w.value = w.value.map((t) => t.id === e.id ? {
+			T.value = T.value.map((t) => t.id === e.id ? {
 				...t,
 				...r
-			} : t), E("change", {
+			} : t), D("change", {
 				...e,
 				...r
-			}, r), G.value = `${e.label}: ${z.value.format(k(t))} to ${z.value.format(k(n))}`;
+			}, 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 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;
+		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(w.value.length - 1, Math.max(0, n));
+				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 = 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]));
+				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);
-			T.value = T.value === e.id ? null : e.id, E("select", e);
+			E.value = E.value === e.id ? null : e.id, D("select", e);
 		}
 		return (e, n) => (u(), i("div", {
 			ref_key: "root",
@@ -161,35 +167,35 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 			class: "bless-gantt",
 			role: "group",
 			"aria-label": o.label
-		}, [a("div", g, [a("div", {
+		}, [a("div", h, [a("div", {
 			class: "bless-gantt__body",
 			style: l({ "--bless-gantt-label": `${o.labelWidth}px` })
-		}, [a("div", ee, [n[0] ||= a("div", {
+		}, [a("div", g, [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", {
+		}, 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, te))), 128))]), a("div", {
+		}, p(e.label), 13, _))), 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", {
+			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", v, [(u(!0), i(t, null, f(B.value, (e, t) => (u(), i("span", {
+		}, 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: `${w.value.length * o.rowHeight}px`,
+				height: `${T.value.length * o.rowHeight}px`,
 				backgroundSize: `${o.dayWidth}px 100%`
 			})
 		}, [
@@ -202,8 +208,8 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 			W.value.length ? (u(), i("svg", {
 				key: 1,
 				class: "bless-gantt__arrows",
-				width: I.value,
-				height: w.value.length * o.rowHeight,
+				width: L.value,
+				height: T.value.length * o.rowHeight,
 				"aria-hidden": "true"
 			}, [n[1] ||= a("defs", null, [a("marker", {
 				id: "bless-gantt-head",
@@ -220,14 +226,14 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 				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", {
+			}, 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": T.value === e.id,
+					"bless-gantt__bar--on": E.value === e.id,
 					"bless-gantt__bar--edit": o.editable,
-					"bless-gantt__bar--drag": j.value?.id === e.id
+					"bless-gantt__bar--drag": M.value?.id === e.id
 				}]),
 				style: l({
 					...V(e),
@@ -235,11 +241,11 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 					height: `${o.rowHeight - 12}px`
 				}),
 				tabindex: n === Q.value ? 0 : -1,
-				"aria-label": oe(e),
-				"aria-pressed": T.value === e.id,
+				"aria-label": se(e),
+				"aria-pressed": E.value === e.id,
 				onClick: (t) => (Q.value = n, $(e)),
 				onFocus: (e) => Q.value = n,
-				onKeydown: (e) => se(n, e),
+				onKeydown: (e) => ce(n, e),
 				onPointerdown: (t) => q(e, "move", t),
 				onPointermove: J,
 				onPointerup: Y,
@@ -251,19 +257,19 @@ var h = ["aria-label"], g = { class: "bless-gantt__scroll" }, ee = { class: "ble
 				onPointermove: J,
 				onPointerup: Y,
 				onPointercancel: Y
-			}, null, 40, x), a("span", {
+			}, 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, ie)], 64)) : r("", !0), e.progress == null ? r("", !0) : (u(), i("span", {
+			}, 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, b))), 128))
-		], 4)], 4)], 4)]), a("span", S, p(G.value), 1)], 8, h));
+			}, null, 4))], 46, ne))), 128))
+		], 4)], 4)], 4)]), a("span", ie, p(G.value), 1)], 8, ee));
 	}
 });
 //#endregion

package/dist/components/BlessInfiniteCanvas.css

@@ -0,0 +1 @@
+.bless-canvas{box-sizing:border-box;background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;min-height:240px;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative;overflow:hidden}.bless-canvas--grid{background-image:radial-gradient(circle, color-mix(in srgb, var(--bless-color-text-muted) 45%, transparent) 1px, transparent 1.5px)}.bless-canvas--pan{cursor:grabbing}.bless-canvas:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-canvas__layer{transform-origin:0 0;width:0;height:0;position:absolute;top:0;left:0}.bless-canvas__controls{gap:var(--bless-space-1);cursor:default;display:flex;position:absolute;inset-block-end:var(--bless-space-2);inset-inline-end:var(--bless-space-2)}.bless-canvas__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessInfiniteCanvas.js

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

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

@@ -0,0 +1,91 @@
+import { InjectionKey, Ref } from 'vue';
+import { CanvasView } from '../composables/canvasView';
+export type { CanvasView } from '../composables/canvasView';
+/** what a canvas hands to the things placed on it */
+export interface BlessCanvasContext {
+    view: Ref<CanvasView>;
+    /** a pointer position in the page -> a point in the canvas' own (world) coordinates */
+    toWorld: (clientX: number, clientY: number) => {
+        x: number;
+        y: number;
+    };
+}
+export declare const blessCanvasKey: InjectionKey<BlessCanvasContext>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    minZoom?: number;
+    maxZoom?: number;
+    /** draw a dot grid that moves and scales with the view */
+    grid?: boolean;
+    /** the + / − / fit buttons in the corner */
+    controls?: boolean;
+    /** turn the plain mouse wheel into zoom (otherwise it pans, and Ctrl+wheel or a pinch zooms) */
+    wheelZoom?: boolean;
+    label?: string;
+    labels?: Partial<{
+        zoomIn: string;
+        zoomOut: string;
+        reset: string;
+        zoom: (percent: number) => string;
+        hint: string;
+    }>;
+} & {
+    view?: CanvasView;
+}, {
+    zoomBy: (factor: number, at?: {
+        x: number;
+        y: number;
+    }) => void;
+    reset: () => void;
+    fit: (rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }, pad?: number) => void;
+    centerOn: (x: number, y: number) => void;
+    toWorld: (cx: number, cy: number) => {
+        x: number;
+        y: number;
+    };
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:view": (value: CanvasView) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    minZoom?: number;
+    maxZoom?: number;
+    /** draw a dot grid that moves and scales with the view */
+    grid?: boolean;
+    /** the + / − / fit buttons in the corner */
+    controls?: boolean;
+    /** turn the plain mouse wheel into zoom (otherwise it pans, and Ctrl+wheel or a pinch zooms) */
+    wheelZoom?: boolean;
+    label?: string;
+    labels?: Partial<{
+        zoomIn: string;
+        zoomOut: string;
+        reset: string;
+        zoom: (percent: number) => string;
+        hint: string;
+    }>;
+} & {
+    view?: CanvasView;
+}> & Readonly<{
+    "onUpdate:view"?: ((value: CanvasView) => any) | undefined;
+}>, {
+    label: string;
+    grid: boolean;
+    controls: boolean;
+    minZoom: number;
+    maxZoom: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        view: CanvasView;
+        zoom: number;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};