blessing-ui 0.1.0 → 0.2.0

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/BlessKanban.css

@@ -0,0 +1 @@
+.bless-kanban{gap:var(--bless-space-3);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);grid-auto-columns:minmax(220px,1fr);grid-auto-flow:column;align-items:start;display:grid;position:relative;overflow-x:auto}.bless-kanban__col{min-width:0;padding:var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border)}.bless-kanban__head{justify-content:space-between;align-items:baseline;gap:var(--bless-space-2);padding:var(--bless-space-1) var(--bless-space-1) var(--bless-space-2);display:flex}.bless-kanban__title{font-size:var(--bless-text-sm);margin:0;font-weight:600}.bless-kanban__count{color:var(--bless-color-text-muted);font-size:var(--bless-text-xs)}.bless-kanban__col--full .bless-kanban__count{color:var(--bless-color-danger-text)}.bless-kanban__list{gap:var(--bless-space-2);padding:0 0 var(--bless-space-3);min-height:2rem;margin:0;list-style:none;display:grid}.bless-kanban__list--end{box-shadow:inset 0 -2px 0 var(--bless-color-accent)}.bless-kanban__card{align-items:flex-start;gap:var(--bless-space-2);padding:var(--bless-space-2);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-kanban__card--drag{opacity:.4}.bless-kanban__card--held{border-color:var(--bless-color-accent)}.bless-kanban__card--before{box-shadow:0 -5px 0 -3px var(--bless-color-accent);border-top-color:var(--bless-color-accent)}.bless-kanban__grip{padding:0 var(--bless-space-1);color:var(--bless-color-text-muted);font:inherit;letter-spacing:-3px;cursor:grab;touch-action:none;background:0 0;border:0;flex:none}.bless-kanban__grip:active{cursor:grabbing}.bless-kanban__grip:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-kanban__body{flex:1;min-width:0}.bless-kanban__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessKanban.js

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

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

@@ -0,0 +1,55 @@
+export interface BlessKanbanColumn<T = unknown> {
+    id: string;
+    title: string;
+    items: T[];
+    /** most cards the column takes; a full column refuses drops */
+    limit?: number;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T>(__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<({
+        rowKey?: (item: T) => string | number;
+        label?: string;
+    } & {
+        modelValue?: BlessKanbanColumn<T>[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: BlessKanbanColumn<T>[]) => any) | undefined;
+        onMove?: ((item: T, from: {
+            column: string;
+            index: number;
+        }, to: {
+            column: string;
+            index: number;
+        }) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        header?: (props: {
+            column: BlessKanbanColumn<T>;
+        }) => any;
+    } & {
+        card?: (props: {
+            item: T;
+            column: BlessKanbanColumn<T>;
+            index: number;
+        }) => any;
+    };
+    emit: ((evt: "move", item: T, from: {
+        column: string;
+        index: number;
+    }, to: {
+        column: string;
+        index: number;
+    }) => void) & ((event: "update:modelValue", value: BlessKanbanColumn<T>[]) => 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/BlessKanban.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,165 @@
+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";
+//#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 = [
+	"data-grip",
+	"aria-label",
+	"aria-pressed",
+	"onPointerdown",
+	"onKeydown"
+], C = { class: "bless-kanban__body" }, w = {
+	class: "bless-kanban__live",
+	"aria-live": "polite"
+}, T = /*@__PURE__*/ o({
+	name: "BlessKanban",
+	__name: "BlessKanban",
+	props: /*@__PURE__*/ s({
+		rowKey: { type: Function },
+		label: {}
+	}, {
+		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 = {
+			col: 0,
+			index: 0
+		}, F = (e, t) => {
+			let n = T.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) => ({
+				...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,
+				index: t
+			}, {
+				column: T.value[n].id,
+				index: r
+			});
+		}
+		function L(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;
+			}
+			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;
+			}).length;
+			j.value = {
+				col: n,
+				index: r
+			};
+		}
+		function z(e, t, n) {
+			n.button || (n.currentTarget.setPointerCapture?.(n.pointerId), A.value = {
+				col: e,
+				index: t
+			}, j.value = {
+				col: e,
+				index: t
+			});
+		}
+		function B() {
+			let e = A.value, t = j.value;
+			if (A.value = j.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}`);
+		}
+		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;
+			if (n < 0 || n >= i) return;
+			if (F(n, e)) {
+				O.value = `${T.value[n].title} is full`;
+				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 = {
+				col: n,
+				index: r
+			}, O.value = `${T.value[n].title}, position ${r + 1} of ${T.value[n].items.length}`, H(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 = {
+				col: t,
+				index: n
+			}, P = {
+				col: t,
+				index: n
+			}, N = T.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)));
+		}
+		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", {
+			ref_key: "root",
+			ref: D,
+			class: "bless-kanban",
+			role: "group",
+			"aria-label": o.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) }]),
+				role: "list"
+			}, [(u(!0), r(t, null, f(c.items, (t, n) => (u(), r("li", {
+				key: o.rowKey ? o.rowKey(t) : n,
+				"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", {
+				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,
+				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, _));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/BlessLoupe.css

@@ -0,0 +1 @@
+.bless-loupe{cursor:zoom-in;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;max-width:100%;line-height:0;display:inline-block;position:relative}.bless-loupe:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-loupe__img{max-width:100%;height:auto;display:block}.bless-loupe__lens{z-index:1;pointer-events:none;background-repeat:no-repeat;background-color:var(--bless-color-surface);border:2px solid var(--bless-color-bg);outline:1px solid var(--bless-color-text);box-shadow:var(--bless-shadow-plate);position:absolute}

package/dist/components/BlessLoupe.js

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

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    src: string;
+    alt: string;
+    /** a larger version of the same picture for the lens; defaults to `src` */
+    zoomSrc?: string;
+    /** magnification */
+    zoom?: number;
+    /** side of the square lens, in px */
+    size?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+    zoom: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;