blessing-ui 0.1.0 → 0.3.0

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 };

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

@@ -0,0 +1,38 @@
+type __VLS_Props = {
+    /** counts by ISO date: `{ "2026-09-27": 4 }`; missing days are 0 */
+    data?: Record<string, number>;
+    /** last day shown, ISO; defaults to today */
+    end?: string;
+    weeks?: number;
+    /** first row of each column: 0 Sunday, 1 Monday */
+    weekStart?: 0 | 1;
+    /** intensity steps above zero */
+    levels?: number;
+    /** the count that fills the darkest step; defaults to the largest value in `data` */
+    max?: number;
+    locale?: string;
+    /** what is counted, singular: "contribution" */
+    unit?: string;
+    legend?: boolean;
+    label?: string;
+};
+type __VLS_ModelProps = {
+    /** the picked day */
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    label: string;
+    data: Record<string, number>;
+    legend: boolean;
+    weekStart: 0 | 1;
+    unit: string;
+    weeks: number;
+    levels: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessHeatmapCalendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,146 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { addDays as t, fromISO as n, isoToday as r, toISO as i } from "../composables/date.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, useModel as b } from "vue";
+//#region src/components/BlessHeatmapCalendar.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-label"], S = { class: "bless-heat__scroll" }, C = [
+	"data-date",
+	"data-level",
+	"tabindex",
+	"aria-label",
+	"aria-pressed",
+	"onClick",
+	"onKeydown",
+	"onFocus",
+	"onMouseenter"
+], w = { class: "bless-heat__foot" }, T = {
+	class: "bless-heat__readout",
+	"aria-live": "polite"
+}, E = {
+	key: 0,
+	class: "bless-heat__legend",
+	"aria-hidden": "true"
+}, D = /*@__PURE__*/ d({
+	name: "BlessHeatmapCalendar",
+	__name: "BlessHeatmapCalendar",
+	props: /*@__PURE__*/ f({
+		data: { default: () => ({}) },
+		end: {},
+		weeks: { default: 53 },
+		weekStart: { default: 1 },
+		levels: { default: 4 },
+		max: {},
+		locale: {},
+		unit: { default: "contribution" },
+		legend: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Activity" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d) {
+		let f = d, D = b(d, "modelValue"), O = o(() => n(f.end ?? r())), k = o(() => {
+			let e = (O.value.getDay() - f.weekStart + 7) % 7;
+			return t(O.value, -e - (f.weeks - 1) * 7);
+		}), A = o(() => f.max ?? Math.max(1, ...Object.values(f.data))), j = o(() => new Intl.DateTimeFormat(f.locale, {
+			weekday: "short",
+			year: "numeric",
+			month: "short",
+			day: "numeric"
+		})), M = o(() => new Intl.DateTimeFormat(f.locale, { month: "short" })), N = (e) => `${e} ${f.unit}${e === 1 ? "" : "s"}`, P = o(() => {
+			let e = [];
+			for (let n = 0; n < f.weeks * 7; n++) {
+				let r = t(k.value, n), a = i(r), o = f.data[a] ?? 0;
+				e.push({
+					iso: a,
+					v: o,
+					level: o > 0 ? Math.min(f.levels, Math.max(1, Math.ceil(o / A.value * f.levels))) : 0,
+					text: `${N(o)} on ${j.value.format(r)}`,
+					shown: r <= O.value
+				});
+			}
+			return e;
+		}), F = o(() => P.value.reduce((e, t) => e + (t.shown ? t.v : 0), 0)), I = o(() => Array.from({ length: f.weeks }, (e, n) => {
+			let r = t(k.value, n * 7), i = t(r, -7);
+			return n === 0 || r.getMonth() !== i.getMonth() ? M.value.format(r) : "";
+		})), L = o(() => Array.from({ length: 7 }, (e, n) => n % 2 ? new Intl.DateTimeFormat(f.locale, { weekday: "short" }).format(t(k.value, n)) : "")), R = _(""), z = _(), B = o(() => i(O.value)), V = _(null), H = o(() => D.value ?? V.value ?? B.value), U = o(() => i(k.value));
+		function W(e) {
+			e < U.value || e > B.value || (V.value = e, p(() => z.value?.querySelector(`[data-date="${e}"]`)?.focus()));
+		}
+		function G(r, a) {
+			let o = e(a), s = n(r), c = {
+				ArrowUp: -1,
+				ArrowDown: 1,
+				ArrowLeft: -7,
+				ArrowRight: 7
+			};
+			o in c ? (a.preventDefault(), W(i(t(s, c[o])))) : o === "Home" ? (a.preventDefault(), W(U.value)) : o === "End" && (a.preventDefault(), W(B.value));
+		}
+		return (e, t) => (g(), c("div", {
+			ref_key: "root",
+			ref: z,
+			class: "bless-heat",
+			role: "group",
+			"aria-label": d.label
+		}, [l("div", S, [l("div", {
+			class: "bless-heat__grid",
+			style: h({
+				"--bless-heat-weeks": d.weeks,
+				"--bless-heat-levels": d.levels
+			})
+		}, [
+			(g(!0), c(a, null, v(I.value, (e, t) => (g(), c("span", {
+				key: `m${t}`,
+				class: "bless-heat__month",
+				"aria-hidden": "true",
+				style: h({
+					gridColumn: t + 2,
+					gridRow: 1
+				})
+			}, y(e), 5))), 128)),
+			(g(!0), c(a, null, v(L.value, (e, t) => (g(), c("span", {
+				key: `d${t}`,
+				class: "bless-heat__weekday",
+				"aria-hidden": "true",
+				style: h({
+					gridColumn: 1,
+					gridRow: t + 2
+				})
+			}, y(e), 5))), 128)),
+			(g(!0), c(a, null, v(P.value, (e, n) => (g(), c(a, { key: e.iso }, [e.shown ? (g(), c("button", {
+				key: 0,
+				type: "button",
+				class: m(["bless-heat__cell", { "bless-heat__cell--on": D.value === e.iso }]),
+				style: h({
+					gridColumn: Math.floor(n / 7) + 2,
+					gridRow: n % 7 + 2,
+					"--bless-heat-l": e.level / d.levels
+				}),
+				"data-date": e.iso,
+				"data-level": e.level,
+				tabindex: H.value === e.iso ? 0 : -1,
+				"aria-label": e.text,
+				"aria-pressed": D.value === e.iso,
+				onClick: (t) => D.value = D.value === e.iso ? null : e.iso,
+				onKeydown: (t) => G(e.iso, t),
+				onFocus: (t) => (V.value = e.iso, R.value = e.text),
+				onMouseenter: (t) => R.value = e.text,
+				onMouseleave: t[0] ||= (e) => R.value = "",
+				onBlur: t[1] ||= (e) => R.value = ""
+			}, null, 46, C)) : s("", !0)], 64))), 128))
+		], 4)]), l("div", w, [l("span", T, y(R.value || `${N(F.value)} in ${d.weeks} weeks`), 1), d.legend ? (g(), c("span", E, [
+			t[2] ||= u(" Less ", -1),
+			(g(!0), c(a, null, v(d.levels + 1, (e) => (g(), c("i", {
+				key: e,
+				class: "bless-heat__cell bless-heat__swatch",
+				style: h({ "--bless-heat-l": (e - 1) / d.levels })
+			}, null, 4))), 128)),
+			t[3] ||= u(" More ", -1)
+		])) : s("", !0)])], 8, x));
+	}
+});
+//#endregion
+export { D as default };

package/dist/components/BlessHotspots.css

@@ -0,0 +1 @@
+.bless-hotspots{line-height:0;display:block;position:relative}.bless-hotspots--edit{cursor:crosshair}.bless-hotspots__img{width:100%;height:auto;display:block}.bless-hotspots__spot{line-height:normal;position:absolute;transform:translate(-50%,-50%)}.bless-hotspots__pin{box-sizing:border-box;min-width:24px;height:24px;padding:0 var(--bless-space-1);border:2px solid var(--bless-color-bg);background:var(--bless-color-text);color:var(--bless-color-on-text);font:inherit;font-size:var(--bless-text-xs);cursor:pointer;touch-action:none;font-weight:600}.bless-hotspots--edit .bless-hotspots__pin{cursor:grab}.bless-hotspots__pin--on{background:var(--bless-color-accent);color:var(--bless-color-on-accent)}.bless-hotspots__pin:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}

package/dist/components/BlessHotspots.js

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

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

@@ -0,0 +1,49 @@
+export interface BlessHotspot {
+    id: string | number;
+    /** position in percent of the stage, 0 to 100 */
+    x: number;
+    y: number;
+    /** names the pin for screen readers, and is the popover's text without a `#spot` slot */
+    label: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <S extends BlessHotspot = BlessHotspot>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+        /** an image to pin onto; leave out and use the default slot for a diagram or anything else */
+        src?: string;
+        alt?: string;
+        /** click the stage to add a pin, drag to move one, Delete to remove it, arrows to nudge it */
+        editable?: boolean;
+        placement?: "top" | "bottom" | "left" | "right";
+    } & {
+        modelValue?: S[];
+        /** id of the pin whose popover is open */
+        active?: S["id"] | null;
+    }) & {
+        onAdd?: ((spot: S) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: S[]) => any) | undefined;
+        onRemove?: ((spot: S) => any) | undefined;
+        "onUpdate:active"?: ((value: S["id"] | null) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    } & {
+        spot?: (props: {
+            spot: S;
+            index: number;
+        }) => any;
+    };
+    emit: (((evt: "add", spot: S) => void) & ((evt: "remove", spot: S) => void)) & (((event: "update:modelValue", value: S[]) => void) & ((event: "update:active", value: S["id"] | null) => void));
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessHotspots.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,127 @@
+import e from "./BlessPopover.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, useModel as g, withCtx as _ } from "vue";
+//#region src/components/BlessHotspots.vue?vue&type=script&setup=true&lang.ts
+var v = ["src", "alt"], y = [
+	"aria-label",
+	"aria-keyshortcuts",
+	"onPointerdown",
+	"onKeydown"
+], b = /*@__PURE__*/ s({
+	name: "BlessHotspots",
+	__name: "BlessHotspots",
+	props: /*@__PURE__*/ c({
+		src: {},
+		alt: { default: "" },
+		editable: { type: Boolean },
+		placement: { default: "top" }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {},
+		active: { default: null },
+		activeModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["add", "remove"], ["update:modelValue", "update:active"]),
+	setup(s, { emit: c }) {
+		let b = s, x = g(s, "modelValue"), S = g(s, "active"), C = c, w = f(), T = (e) => Math.min(100, Math.max(0, e)), E = (e) => {
+			let t = w.value.getBoundingClientRect();
+			return {
+				x: T((e.clientX - t.left) / t.width * 100),
+				y: T((e.clientY - t.top) / t.height * 100)
+			};
+		}, D = (e, t) => {
+			let n = x.value.slice();
+			n[e] = {
+				...n[e],
+				...t
+			}, x.value = n;
+		}, O = 0;
+		function k(e) {
+			if (!b.editable || e.target.closest(".bless-hotspots__spot")) return;
+			let t = {
+				id: `spot-${Date.now()}-${O++}`,
+				...E(e),
+				label: `Spot ${x.value.length + 1}`
+			};
+			x.value = [...x.value, t], S.value = t.id, C("add", t);
+		}
+		let A = null, j = !1;
+		function M(e, t) {
+			b.editable && !t.button && (t.currentTarget.setPointerCapture?.(t.pointerId), A = {
+				i: e,
+				x: t.clientX,
+				y: t.clientY,
+				moved: !1
+			});
+		}
+		function N(e) {
+			A && (!A.moved && Math.hypot(e.clientX - A.x, e.clientY - A.y) < 4 || (A.moved = !0, D(A.i, E(e))));
+		}
+		function P() {
+			j = !!A?.moved, A = null;
+		}
+		function F(e) {
+			j && (j = !1, e.stopPropagation());
+		}
+		function I(e, t) {
+			if (!b.editable) return;
+			let n = t.shiftKey ? 5 : 1, r = {
+				ArrowLeft: [-n, 0],
+				ArrowRight: [n, 0],
+				ArrowUp: [0, -n],
+				ArrowDown: [0, n]
+			}, i = x.value[e];
+			r[t.key] ? (t.preventDefault(), D(e, {
+				x: T(i.x + r[t.key][0]),
+				y: T(i.y + r[t.key][1])
+			})) : (t.key === "Delete" || t.key === "Backspace") && (t.preventDefault(), x.value = x.value.filter((t, n) => n !== e), S.value === i.id && (S.value = null), C("remove", i));
+		}
+		return (c, f) => (d(), r("div", {
+			ref_key: "stage",
+			ref: w,
+			class: l(["bless-hotspots", { "bless-hotspots--edit": s.editable }]),
+			onClick: k
+		}, [m(c.$slots, "default", {}, () => [s.src ? (d(), r("img", {
+			key: 0,
+			src: s.src,
+			alt: s.alt,
+			class: "bless-hotspots__img",
+			draggable: "false"
+		}, null, 8, v)) : n("", !0)]), (d(!0), r(t, null, p(x.value, (t, n) => (d(), r("span", {
+			key: t.id,
+			class: "bless-hotspots__spot",
+			style: u({
+				left: `${t.x}%`,
+				top: `${t.y}%`
+			}),
+			onClickCapture: F
+		}, [o(e, {
+			arrow: "",
+			placement: s.placement,
+			open: S.value === t.id,
+			"onUpdate:open": (e) => S.value = e ? t.id : S.value === t.id ? null : S.value
+		}, {
+			trigger: _(() => [i("button", {
+				type: "button",
+				class: l(["bless-hotspots__pin", { "bless-hotspots__pin--on": S.value === t.id }]),
+				"aria-label": t.label,
+				"aria-keyshortcuts": s.editable ? "Delete" : void 0,
+				onPointerdown: (e) => M(n, e),
+				onPointermove: N,
+				onPointerup: P,
+				onPointercancel: P,
+				onKeydown: (e) => I(n, e)
+			}, h(n + 1), 43, y)]),
+			default: _(() => [m(c.$slots, "spot", {
+				spot: t,
+				index: n
+			}, () => [a(h(t.label), 1)])]),
+			_: 2
+		}, 1032, [
+			"placement",
+			"open",
+			"onUpdate:open"
+		])], 36))), 128))], 2));
+	}
+});
+//#endregion
+export { b as default };

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;
+    };
+};