blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessKanban.vue_vue_type_script_setup_true_lang.js

@@ -1,165 +1,195 @@
 import { logicalKey as e } from "../composables/rtl.js";
-import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, nextTick as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, useId as h, useModel as g } from "vue";
+import { useAutoScroll as t } from "../composables/useAutoScroll.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, useId as v, useModel as y } from "vue";
 //#region src/components/BlessKanban.vue?vue&type=script&setup=true&lang.ts
-var _ = ["aria-label"], v = ["data-kanban-col", "aria-label"], y = { class: "bless-kanban__head" }, b = { class: "bless-kanban__title" }, x = { class: "bless-kanban__count" }, S = [
+var b = ["aria-label"], x = ["data-kanban-col", "aria-label"], S = { class: "bless-kanban__head" }, C = { class: "bless-kanban__title" }, w = { class: "bless-kanban__count" }, T = [
 	"data-grip",
 	"aria-label",
+	"aria-roledescription",
 	"aria-pressed",
 	"onPointerdown",
 	"onKeydown"
-], C = { class: "bless-kanban__body" }, w = {
+], E = { class: "bless-kanban__body" }, D = {
 	class: "bless-kanban__live",
 	"aria-live": "polite"
-}, T = /*@__PURE__*/ o({
+}, O = /*@__PURE__*/ c({
 	name: "BlessKanban",
 	__name: "BlessKanban",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ l({
 		rowKey: { type: Function },
-		label: {}
+		label: {},
+		labels: {}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ s(["move"], ["update:modelValue"]),
-	setup(o, { emit: s }) {
-		let T = g(o, "modelValue"), E = s, D = d(), O = d(""), k = `${h()}-hint`, A = d(null), j = d(null), M = d(null), N = [], P = {
+	emits: /*@__PURE__*/ l(["move"], ["update:modelValue"]),
+	setup(c, { emit: l }) {
+		let O = c, k = r(() => ({
+			card: (e, t) => `Move card ${e} of ${t}`,
+			moved: (e, t, n) => `Moved to ${e}, position ${t} of ${n}`,
+			position: (e, t, n) => `${e}, position ${t} of ${n}`,
+			dropped: (e, t) => `Dropped in ${e}, position ${t}`,
+			full: (e) => `${e} is full`,
+			grabbed: "Grabbed. Up and down move it in the column, left and right to another column, Space drops it, Escape cancels.",
+			cancelled: "Cancelled, order restored",
+			hint: "Press Space to grab a card. Up and down move it in its column, left and right to another column. Space drops it, Escape cancels.",
+			roleDescription: "sortable card",
+			...O.labels
+		})), A = y(c, "modelValue"), j = l, M = m(), N = m(""), P = `${v()}-hint`, F = m(null), I = m(null), L = m(null), R = [], z = {
 			col: 0,
 			index: 0
-		}, F = (e, t) => {
-			let n = T.value[e];
+		}, B = (e, t) => {
+			let n = A.value[e];
 			return e !== t && n.limit != null && n.items.length >= n.limit;
 		};
-		function I(e, t, n, r) {
-			let i = T.value.map((e) => ({
+		function V(e, t, n, r) {
+			let i = A.value.map((e) => ({
 				...e,
 				items: e.items.slice()
 			})), [a] = i[e].items.splice(t, 1);
-			i[n].items.splice(r, 0, a), T.value = i, E("move", a, {
-				column: T.value[e].id,
+			i[n].items.splice(r, 0, a), A.value = i, j("move", a, {
+				column: A.value[e].id,
 				index: t
 			}, {
-				column: T.value[n].id,
+				column: A.value[n].id,
 				index: r
 			});
 		}
-		function L(e, t) {
+		function H(e, t) {
 			for (let n of document.elementsFromPoint(e, t)) {
 				let e = n.closest?.("[data-kanban-col]");
-				if (e && D.value?.contains(e)) return e;
+				if (e && M.value?.contains(e)) return e;
 			}
 			return null;
 		}
-		function R(e) {
-			if (!A.value) return;
-			let t = L(e.clientX, e.clientY);
-			if (!t) return void (j.value = null);
-			let n = Number(t.dataset.kanbanCol);
-			if (F(n, A.value.col)) return void (j.value = null);
-			let r = Array.from(t.querySelectorAll("[data-kanban-card]")).filter((t) => {
-				let n = t.getBoundingClientRect();
-				return n.top + n.height / 2 < e.clientY;
+		let U = {
+			x: 0,
+			y: 0
+		}, W = t(() => M.value, () => K(U.x, U.y));
+		f(W.stop);
+		function G(e) {
+			U = {
+				x: e.clientX,
+				y: e.clientY
+			}, W.point(e.clientX, e.clientY), K(e.clientX, e.clientY);
+		}
+		function K(e, t) {
+			if (!F.value) return;
+			let n = H(e, t);
+			if (!n) return void (I.value = null);
+			let r = Number(n.dataset.kanbanCol);
+			if (B(r, F.value.col)) return void (I.value = null);
+			let i = Array.from(n.querySelectorAll("[data-kanban-card]")).filter((e) => {
+				let n = e.getBoundingClientRect();
+				return n.top + n.height / 2 < t;
 			}).length;
-			j.value = {
-				col: n,
-				index: r
+			I.value = {
+				col: r,
+				index: i
 			};
 		}
-		function z(e, t, n) {
-			n.button || (n.currentTarget.setPointerCapture?.(n.pointerId), A.value = {
+		function q(e, t, n) {
+			n.button || (n.currentTarget.setPointerCapture?.(n.pointerId), F.value = {
 				col: e,
 				index: t
-			}, j.value = {
+			}, I.value = {
 				col: e,
 				index: t
-			});
+			}, U = {
+				x: n.clientX,
+				y: n.clientY
+			}, W.point(n.clientX, n.clientY), W.start());
 		}
-		function B() {
-			let e = A.value, t = j.value;
-			if (A.value = j.value = null, !e || !t) return;
+		function J() {
+			let e = F.value, t = I.value;
+			if (W.stop(), F.value = I.value = null, !e || !t) return;
 			let n = t.col === e.col && t.index > e.index ? t.index - 1 : t.index;
-			(t.col !== e.col || n !== e.index) && (I(e.col, e.index, t.col, n), O.value = `Moved to ${T.value[t.col].title}, position ${n + 1} of ${T.value[t.col].items.length}`);
+			(t.col !== e.col || n !== e.index) && (V(e.col, e.index, t.col, n), N.value = k.value.moved(A.value[t.col].title, n + 1, A.value[t.col].items.length));
 		}
-		let V = () => A.value = j.value = null, H = (e, t) => c(() => D.value?.querySelector(`[data-grip="${e}:${t}"]`)?.focus());
-		function U(e, t, n, r) {
-			let i = T.value.length;
+		let Y = () => {
+			W.stop(), F.value = I.value = null;
+		}, X = (e, t) => u(() => M.value?.querySelector(`[data-grip="${e}:${t}"]`)?.focus());
+		function Z(e, t, n, r) {
+			let i = A.value.length;
 			if (n < 0 || n >= i) return;
-			if (F(n, e)) {
-				O.value = `${T.value[n].title} is full`;
+			if (B(n, e)) {
+				N.value = k.value.full(A.value[n].title);
 				return;
 			}
-			let a = T.value[n].items.length - +(n === e);
-			r = Math.min(Math.max(r, 0), a), (n !== e || r !== t) && (I(e, t, n, r), M.value = {
+			let a = A.value[n].items.length - +(n === e);
+			r = Math.min(Math.max(r, 0), a), (n !== e || r !== t) && (V(e, t, n, r), L.value = {
 				col: n,
 				index: r
-			}, O.value = `${T.value[n].title}, position ${r + 1} of ${T.value[n].items.length}`, H(n, r));
+			}, N.value = k.value.position(A.value[n].title, r + 1, A.value[n].items.length), X(n, r));
 		}
-		function W(t, n, r) {
-			let i = e(r), a = M.value;
-			r.key === " " || r.key === "Enter" ? (r.preventDefault(), a ? (M.value = null, O.value = `Dropped in ${T.value[t].title}, position ${n + 1}`) : (M.value = {
+		function Q(t, n, r) {
+			let i = e(r), a = L.value;
+			r.key === " " || r.key === "Enter" ? (r.preventDefault(), a ? (L.value = null, N.value = k.value.dropped(A.value[t].title, n + 1)) : (L.value = {
 				col: t,
 				index: n
-			}, P = {
+			}, z = {
 				col: t,
 				index: n
-			}, N = T.value.map((e) => ({
+			}, R = A.value.map((e) => ({
 				...e,
 				items: e.items.slice()
-			})), O.value = "Grabbed. Up and down move it in the column, left and right to another column, Space drops it, Escape cancels.")) : r.key === "Escape" && a ? (r.preventDefault(), T.value = N, M.value = null, O.value = "Cancelled, order restored", H(P.col, P.index)) : a && (i === "ArrowUp" ? (r.preventDefault(), U(t, n, t, n - 1)) : i === "ArrowDown" ? (r.preventDefault(), U(t, n, t, n + 1)) : i === "ArrowLeft" ? (r.preventDefault(), U(t, n, t - 1, n)) : i === "ArrowRight" && (r.preventDefault(), U(t, n, t + 1, n)));
+			})), N.value = k.value.grabbed)) : r.key === "Escape" && a ? (r.preventDefault(), A.value = R, L.value = null, N.value = k.value.cancelled, X(z.col, z.index)) : a && (i === "ArrowUp" ? (r.preventDefault(), Z(t, n, t, n - 1)) : i === "ArrowDown" ? (r.preventDefault(), Z(t, n, t, n + 1)) : i === "ArrowLeft" ? (r.preventDefault(), Z(t, n, t - 1, n)) : i === "ArrowRight" && (r.preventDefault(), Z(t, n, t + 1, n)));
 		}
-		let G = () => requestAnimationFrame(() => {
-			M.value && !D.value?.contains(document.activeElement) && (M.value = null);
-		}), K = (e, t) => {
-			let n = j.value;
-			return !n || n.col !== e || !A.value ? null : n.index === t ? "before" : null;
-		}, q = (e) => j.value?.col === e && A.value && j.value.index >= T.value[e].items.length;
-		return (e, s) => (u(), r("div", {
+		let ee = () => requestAnimationFrame(() => {
+			L.value && !M.value?.contains(document.activeElement) && (L.value = null);
+		}), $ = (e, t) => {
+			let n = I.value;
+			return !n || n.col !== e || !F.value ? null : n.index === t ? "before" : null;
+		}, te = (e) => I.value?.col === e && F.value && I.value.index >= A.value[e].items.length;
+		return (e, t) => (p(), a("div", {
 			ref_key: "root",
-			ref: D,
+			ref: M,
 			class: "bless-kanban",
 			role: "group",
-			"aria-label": o.label ?? "Board"
+			"aria-label": c.label ?? "Board"
 		}, [
-			(u(!0), r(t, null, f(T.value, (c, d) => (u(), r("section", {
-				key: c.id,
-				class: l(["bless-kanban__col", { "bless-kanban__col--full": c.limit != null && c.items.length >= c.limit }]),
-				"data-kanban-col": d,
-				"aria-label": c.title
-			}, [i("header", y, [p(e.$slots, "header", { column: c }, () => [i("h3", b, m(c.title), 1)]), i("span", x, [a(m(c.items.length), 1), c.limit == null ? n("", !0) : (u(), r(t, { key: 0 }, [a(" / " + m(c.limit), 1)], 64))])]), i("ul", {
-				class: l(["bless-kanban__list", { "bless-kanban__list--end": q(d) }]),
+			(p(!0), a(n, null, h(A.value, (r, l) => (p(), a("section", {
+				key: r.id,
+				class: d(["bless-kanban__col", { "bless-kanban__col--full": r.limit != null && r.items.length >= r.limit }]),
+				"data-kanban-col": l,
+				"aria-label": r.title
+			}, [o("header", S, [g(e.$slots, "header", { column: r }, () => [o("h3", C, _(r.title), 1)]), o("span", w, [s(_(r.items.length), 1), r.limit == null ? i("", !0) : (p(), a(n, { key: 0 }, [s(" / " + _(r.limit), 1)], 64))])]), o("ul", {
+				class: d(["bless-kanban__list", { "bless-kanban__list--end": te(l) }]),
 				role: "list"
-			}, [(u(!0), r(t, null, f(c.items, (t, n) => (u(), r("li", {
-				key: o.rowKey ? o.rowKey(t) : n,
+			}, [(p(!0), a(n, null, h(r.items, (n, i) => (p(), a("li", {
+				key: c.rowKey ? c.rowKey(n) : i,
 				"data-kanban-card": "",
-				class: l(["bless-kanban__card", [{
-					"bless-kanban__card--drag": A.value?.col === d && A.value.index === n,
-					"bless-kanban__card--held": M.value?.col === d && M.value.index === n
-				}, K(d, n) && `bless-kanban__card--${K(d, n)}`]])
-			}, [i("button", {
+				class: d(["bless-kanban__card", [{
+					"bless-kanban__card--drag": F.value?.col === l && F.value.index === i,
+					"bless-kanban__card--held": L.value?.col === l && L.value.index === i
+				}, $(l, i) && `bless-kanban__card--${$(l, i)}`]])
+			}, [o("button", {
 				type: "button",
 				class: "bless-kanban__grip",
-				"data-grip": `${d}:${n}`,
-				"aria-label": `Move card ${n + 1} of ${c.title}`,
-				"aria-roledescription": "sortable card",
-				"aria-pressed": M.value?.col === d && M.value.index === n,
-				"aria-describedby": k,
-				onPointerdown: (e) => z(d, n, e),
-				onPointermove: R,
-				onPointerup: B,
-				onPointercancel: V,
-				onKeydown: (e) => W(d, n, e),
-				onBlur: G
-			}, [...s[0] ||= [i("span", { "aria-hidden": "true" }, "⋮⋮", -1)]], 40, S), i("div", C, [p(e.$slots, "card", {
-				item: t,
-				column: c,
-				index: n
-			}, () => [a(m(t), 1)])])], 2))), 128))], 2)], 10, v))), 128)),
-			i("span", {
-				id: k,
+				"data-grip": `${l}:${i}`,
+				"aria-label": k.value.card(i + 1, r.title),
+				"aria-roledescription": k.value.roleDescription,
+				"aria-pressed": L.value?.col === l && L.value.index === i,
+				"aria-describedby": P,
+				onPointerdown: (e) => q(l, i, e),
+				onPointermove: G,
+				onPointerup: J,
+				onPointercancel: Y,
+				onKeydown: (e) => Q(l, i, e),
+				onBlur: ee
+			}, [...t[0] ||= [o("span", { "aria-hidden": "true" }, "⋮⋮", -1)]], 40, T), o("div", E, [g(e.$slots, "card", {
+				item: n,
+				column: r,
+				index: i
+			}, () => [s(_(n), 1)])])], 2))), 128))], 2)], 10, x))), 128)),
+			o("span", {
+				id: P,
 				hidden: ""
-			}, "Press Space to grab a card. Up and down move it in its column, left and right to another column. Space drops it, Escape cancels."),
-			i("span", w, m(O.value), 1)
-		], 8, _));
+			}, _(k.value.hint), 1),
+			o("span", D, _(N.value), 1)
+		], 8, b));
 	}
 });
 //#endregion
-export { T as default };
+export { O as default };

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

@@ -2,9 +2,11 @@ type __VLS_Props = {
     height?: string;
     position?: "top" | "bottom";
     color?: "accent" | "text";
+    label?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     color: "accent" | "text";
+    label: string;
     position: "top" | "bottom";
     height: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessLoadingBar.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,18 @@
 import { loadingBarState as e, useLoadingBar as t } from "../composables/useLoadingBar.js";
 import { createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, unref as c } from "vue";
 //#region src/components/BlessLoadingBar.vue?vue&type=script&setup=true&lang.ts
-var l = ["aria-valuenow", "aria-hidden"], u = /*@__PURE__*/ i({
+var l = [
+	"aria-valuenow",
+	"aria-label",
+	"aria-hidden"
+], u = /*@__PURE__*/ i({
 	name: "BlessLoadingBar",
 	__name: "BlessLoadingBar",
 	props: {
 		height: { default: "3px" },
 		position: { default: "top" },
-		color: { default: "accent" }
+		color: { default: "accent" },
+		label: { default: "Loading" }
 	},
 	setup(i) {
 		return t(), (t, u) => (s(), n("div", {
@@ -24,7 +29,7 @@ var l = ["aria-valuenow", "aria-hidden"], u = /*@__PURE__*/ i({
 			"aria-valuenow": c(e).active ? Math.round(c(e).progress) : void 0,
 			"aria-valuemin": "0",
 			"aria-valuemax": "100",
-			"aria-label": "Loading",
+			"aria-label": i.label,
 			"aria-hidden": c(e).active ? void 0 : "true"
 		}, [...u[0] ||= [r("span", { class: "bless-loadingbar__bar" }, null, -1)]], 14, l));
 	}

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

@@ -8,6 +8,10 @@ type __VLS_Props = {
     /** show the Pause button (needed when it moves for more than five seconds, WCAG 2.2.2) */
     controls?: boolean;
     label?: string;
+    labels?: Partial<{
+        play: string;
+        pause: string;
+    }>;
 };
 type __VLS_ModelProps = {
     /** true while paused by the button */

package/dist/components/BlessMarquee.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,14 @@
 import { reducedMotion as e } from "../composables/useMedia.js";
-import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, normalizeStyle as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useModel as m } from "vue";
+import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, useModel as h } from "vue";
 //#region src/components/BlessMarquee.vue?vue&type=script&setup=true&lang.ts
-var h = ["aria-label"], g = { class: "bless-marquee__viewport" }, _ = { class: "bless-marquee__track" }, v = {
+var g = ["aria-label"], _ = { class: "bless-marquee__viewport" }, v = { class: "bless-marquee__track" }, y = {
 	class: "bless-marquee__run",
 	"aria-hidden": "true",
 	inert: ""
-}, y = ["aria-pressed"], b = /*@__PURE__*/ i({
+}, b = ["aria-pressed"], x = /*@__PURE__*/ a({
 	name: "BlessMarquee",
 	__name: "BlessMarquee",
-	props: /*@__PURE__*/ a({
+	props: /*@__PURE__*/ o({
 		speed: { default: 40 },
 		reverse: { type: Boolean },
 		pauseOnHover: {
@@ -19,7 +19,8 @@ var h = ["aria-label"], g = { class: "bless-marquee__viewport" }, _ = { class: "
 			type: Boolean,
 			default: !0
 		},
-		label: { default: "Scrolling items" }
+		label: { default: "Scrolling items" },
+		labels: {}
 	}, {
 		paused: {
 			type: Boolean,
@@ -28,37 +29,41 @@ var h = ["aria-label"], g = { class: "bless-marquee__viewport" }, _ = { class: "
 		pausedModifiers: {}
 	}),
 	emits: ["update:paused"],
-	setup(i) {
-		let a = i, b = m(i, "paused"), x = d(), S = d(!1), C = d(20), w;
-		function T() {
-			let e = x.value?.scrollWidth ?? 0;
-			C.value = e && a.speed > 0 ? e / a.speed : 20;
+	setup(a) {
+		let o = a, x = t(() => ({
+			play: "Play",
+			pause: "Pause",
+			...o.labels
+		})), S = h(a, "paused"), C = f(), w = f(!1), T = f(20), E;
+		function D() {
+			let e = C.value?.scrollWidth ?? 0;
+			T.value = e && o.speed > 0 ? e / o.speed : 20;
 		}
-		return l(() => {
-			S.value = e(), T(), typeof ResizeObserver < "u" && x.value && (w = new ResizeObserver(T), w.observe(x.value));
-		}), c(() => w?.disconnect()), (e, a) => (u(), n("div", {
-			class: o(["bless-marquee", {
-				"bless-marquee--paused": b.value,
-				"bless-marquee--hover": i.pauseOnHover,
-				"bless-marquee--still": S.value,
-				"bless-marquee--reverse": i.reverse
+		return u(() => {
+			w.value = e(), D(), typeof ResizeObserver < "u" && C.value && (E = new ResizeObserver(D), E.observe(C.value));
+		}), l(() => E?.disconnect()), (e, t) => (d(), r("div", {
+			class: s(["bless-marquee", {
+				"bless-marquee--paused": S.value,
+				"bless-marquee--hover": a.pauseOnHover,
+				"bless-marquee--still": w.value,
+				"bless-marquee--reverse": a.reverse
 			}]),
 			role: "group",
 			"aria-roledescription": "marquee",
-			"aria-label": i.label,
-			style: s({ "--bless-marquee-time": `${C.value}s` })
-		}, [r("div", g, [r("div", _, [r("div", {
+			"aria-label": a.label,
+			style: c({ "--bless-marquee-time": `${T.value}s` })
+		}, [i("div", _, [i("div", v, [i("div", {
 			ref_key: "run",
-			ref: x,
+			ref: C,
 			class: "bless-marquee__run"
-		}, [f(e.$slots, "default")], 512), r("div", v, [f(e.$slots, "default")])])]), i.controls && !S.value ? (u(), n("button", {
+		}, [p(e.$slots, "default")], 512), i("div", y, [p(e.$slots, "default")])])]), a.controls && !w.value ? (d(), r("button", {
 			key: 0,
 			type: "button",
 			class: "bless-marquee__btn",
-			"aria-pressed": b.value,
-			onClick: a[0] ||= (e) => b.value = !b.value
-		}, p(b.value ? "Play" : "Pause"), 9, y)) : t("", !0)], 14, h));
+			"aria-pressed": S.value,
+			onClick: t[0] ||= (e) => S.value = !S.value
+		}, m(S.value ? x.value.play : x.value.pause), 9, b)) : n("", !0)], 14, g));
 	}
 });
 //#endregion
-export { b as default };
+export { x as default };

package/dist/components/BlessNodeGraph.css

@@ -0,0 +1 @@
+.bless-graph{flex-direction:column;width:100%;display:flex;position:relative}.bless-graph>.bless-canvas{flex:1}.bless-graph__edges{pointer-events:none;width:1px;height:1px;position:absolute;top:0;left:0;overflow:visible}.bless-graph__edge{fill:none;stroke:var(--bless-color-text-muted);stroke-width:2px}.bless-graph__edge--sel{stroke:var(--bless-color-accent);stroke-width:3px}.bless-graph__edge--preview{stroke:var(--bless-color-accent);stroke-dasharray:6 4}.bless-graph__arrow{fill:var(--bless-color-text-muted)}.bless-graph__edge-hit{fill:none;stroke:#0000;stroke-width:14px;pointer-events:stroke;cursor:pointer}.bless-graph__node{box-sizing:border-box;padding:0 var(--bless-space-3);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);cursor:grab;touch-action:none;justify-content:center;align-items:center;display:flex;position:absolute}.bless-graph__node:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-graph__node--sel{border-color:var(--bless-color-accent)}.bless-graph__node--target{outline:2px dashed var(--bless-color-accent);outline-offset:2px}.bless-graph__node--drag{cursor:grabbing}.bless-graph__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bless-graph__port{background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-text-muted);width:12px;height:12px;margin-top:-6px;position:absolute;top:50%}.bless-graph__port--in{left:-7px}.bless-graph__port--out{cursor:crosshair;touch-action:none;right:-7px}.bless-graph__port--out:hover{border-color:var(--bless-color-accent)}.bless-graph__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessNodeGraph.js

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

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

@@ -0,0 +1,110 @@
+import { CanvasView } from './BlessInfiniteCanvas.vue';
+import { GraphEdge as Edge } from '../composables/graph';
+export interface BlessGraphNode {
+    id: string;
+    x: number;
+    y: number;
+    label: string;
+}
+export type { GraphEdge as BlessGraphEdge } from '../composables/graph';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
+    /** size used for ports and links; put content that fits it in the `#node` slot */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /** snap dragged nodes to this grid, px; 0 is free */
+    snap?: number;
+    /** refuse a link that would close a loop */
+    acyclic?: boolean;
+    /** off: nodes can be selected and the view moved, nothing is dragged, linked or removed */
+    editable?: boolean;
+    grid?: boolean;
+    controls?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    label?: string;
+    labels?: Partial<{
+        node: (label: string, to: string[], from: string[]) => string;
+        linkFrom: (from: string) => string;
+        linkTo: (from: string, to: string, exists: boolean) => string;
+        linked: (from: string, to: string) => string;
+        unlinked: (from: string, to: string) => string;
+        refused: (from: string, to: string, why: "self" | "exists" | "cycle") => string;
+        cancelled: string;
+        removed: (label: string) => string;
+        hint: string;
+    }>;
+} & {
+    nodes?: BlessGraphNode[];
+    edges?: Edge[];
+    selected?: string | null;
+    view?: CanvasView;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    disconnect: (edge: Edge) => any;
+    remove: (id: string) => any;
+    "update:selected": (value: string | null) => any;
+    move: (id: string, x: number, y: number) => any;
+    "update:view": (value: CanvasView) => any;
+    "update:nodes": (value: BlessGraphNode[]) => any;
+    "update:edges": (value: Edge[]) => any;
+    connect: (edge: Edge) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** size used for ports and links; put content that fits it in the `#node` slot */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /** snap dragged nodes to this grid, px; 0 is free */
+    snap?: number;
+    /** refuse a link that would close a loop */
+    acyclic?: boolean;
+    /** off: nodes can be selected and the view moved, nothing is dragged, linked or removed */
+    editable?: boolean;
+    grid?: boolean;
+    controls?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    label?: string;
+    labels?: Partial<{
+        node: (label: string, to: string[], from: string[]) => string;
+        linkFrom: (from: string) => string;
+        linkTo: (from: string, to: string, exists: boolean) => string;
+        linked: (from: string, to: string) => string;
+        unlinked: (from: string, to: string) => string;
+        refused: (from: string, to: string, why: "self" | "exists" | "cycle") => string;
+        cancelled: string;
+        removed: (label: string) => string;
+        hint: string;
+    }>;
+} & {
+    nodes?: BlessGraphNode[];
+    edges?: Edge[];
+    selected?: string | null;
+    view?: CanvasView;
+}> & Readonly<{
+    onDisconnect?: ((edge: Edge) => any) | undefined;
+    onRemove?: ((id: string) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    onMove?: ((id: string, x: number, y: number) => any) | undefined;
+    "onUpdate:view"?: ((value: CanvasView) => any) | undefined;
+    "onUpdate:nodes"?: ((value: BlessGraphNode[]) => any) | undefined;
+    "onUpdate:edges"?: ((value: Edge[]) => any) | undefined;
+    onConnect?: ((edge: Edge) => any) | undefined;
+}>, {
+    label: string;
+    grid: boolean;
+    controls: boolean;
+    editable: boolean;
+    nodeWidth: number;
+    nodeHeight: number;
+    snap: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    node?: (props: {
+        node: BlessGraphNode;
+        selected: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};