blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessTour.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,12 @@
 import e from "./BlessButton.js";
 import { scrollBehavior as t } from "../composables/useMedia.js";
 import { useFloating as n } from "../composables/useFloating.js";
-import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, openBlock as _, ref as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C, withKeys as w, withModifiers as T } from "vue";
+import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, toDisplayString as b, unref as x, useModel as S, watch as C, withCtx as w, withKeys as T, withModifiers as E } from "vue";
 //#region src/components/BlessTour.vue?vue&type=script&setup=true&lang.ts
-var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
+var D = ["aria-label"], O = { class: "bless-tour__count" }, k = {
 	key: 0,
 	class: "bless-tour__title"
-}, k = { class: "bless-tour__text" }, A = { class: "bless-tour__actions" }, j = /*@__PURE__*/ f({
+}, A = { class: "bless-tour__text" }, j = { class: "bless-tour__actions" }, M = /*@__PURE__*/ f({
 	name: "BlessTour",
 	__name: "BlessTour",
 	props: /*@__PURE__*/ p({
@@ -27,34 +27,37 @@ var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
 	}),
 	emits: /*@__PURE__*/ p(["finish", "skip"], ["update:open", "update:step"]),
 	setup(f, { emit: p }) {
-		let j = f, M = x(f, "open"), N = x(f, "step"), P = p, F = a(() => ({
+		let M = f, N = S(f, "open"), P = S(f, "step"), F = p, I = a(() => ({
 			next: "Next",
 			prev: "Back",
 			done: "Done",
 			skip: "Skip",
-			...j.labels
-		})), I = a(() => j.steps[N.value]), L = a(() => N.value >= j.steps.length - 1), R = v(null), z = v(), B = v(null), { x: V, y: H, side: U, update: W } = n(R, z, M, () => ({
-			placement: I.value?.placement ?? "bottom",
+			step: (e) => `Step ${e}`,
+			...M.labels
+		})), L = a(() => M.steps[P.value]), R = a(() => P.value >= M.steps.length - 1), z = y(null), B = y(), V = y(null), { x: H, y: U, side: W, update: G } = n(z, B, N, () => ({
+			placement: L.value?.placement ?? "bottom",
 			offset: 12
 		}));
-		function G() {
-			let e = I.value?.target ? document.querySelector(I.value.target) : null;
-			R.value = e, B.value = e?.getBoundingClientRect() ?? null, e?.scrollIntoView?.({
+		function K() {
+			let e = L.value?.target ? document.querySelector(L.value.target) : null;
+			z.value = e, V.value = e?.getBoundingClientRect() ?? null, e?.scrollIntoView?.({
 				block: "center",
 				behavior: t()
 			}), m(() => {
-				W(), B.value = e?.getBoundingClientRect() ?? null, z.value?.focus();
+				G(), V.value = e?.getBoundingClientRect() ?? null, B.value?.focus();
 			});
 		}
-		let K = null;
-		S(M, (e) => {
-			e ? K = document.activeElement : m(() => K?.focus?.());
-		}), S([M, N], ([e]) => e && G(), { immediate: !0 });
-		function q(e) {
-			M.value = !1, P(e ? "finish" : "skip");
+		let q = null;
+		C(N, (e) => {
+			e ? q = document.activeElement : m(() => q?.focus?.());
+		}), C([N, P], ([e]) => e && K(), { immediate: !0 });
+		function J(e) {
+			N.value = !1, F(e ? "finish" : "skip");
 		}
-		let J = a(() => {
-			let e = B.value;
+		let Y = y(!1);
+		_(() => Y.value = !0);
+		let X = a(() => {
+			let e = V.value;
 			return e ? {
 				top: `${e.top - 6}px`,
 				left: `${e.left - 6}px`,
@@ -62,57 +65,60 @@ var E = ["aria-label"], D = { class: "bless-tour__count" }, O = {
 				height: `${e.height + 12}px`
 			} : void 0;
 		});
-		return (t, n) => (_(), o(i, { to: "body" }, [M.value && I.value ? (_(), c(r, { key: 0 }, [f.spotlight ? (_(), c("div", {
+		return (t, n) => Y.value ? (v(), o(i, {
 			key: 0,
-			class: h(["bless-tour__spot", { "bless-tour__spot--none": !J.value }]),
-			style: g(J.value),
+			to: "body"
+		}, [N.value && L.value ? (v(), c(r, { key: 0 }, [f.spotlight ? (v(), c("div", {
+			key: 0,
+			class: h(["bless-tour__spot", { "bless-tour__spot--none": !X.value }]),
+			style: g(X.value),
 			"aria-hidden": "true"
 		}, null, 6)) : s("", !0), l("div", {
 			ref_key: "panel",
-			ref: z,
-			class: h(["bless-tour", [`bless-tour--${b(U)}`, { "bless-tour--centred": !R.value }]]),
+			ref: B,
+			class: h(["bless-tour", [`bless-tour--${x(W)}`, { "bless-tour--centred": !z.value }]]),
 			role: "dialog",
 			"aria-modal": "false",
-			"aria-label": I.value.title ?? `Step ${N.value + 1}`,
+			"aria-label": L.value.title ?? I.value.step(P.value + 1),
 			tabindex: "-1",
-			style: g(R.value ? {
-				left: `${b(V)}px`,
-				top: `${b(H)}px`
+			style: g(z.value ? {
+				left: `${x(H)}px`,
+				top: `${x(U)}px`
 			} : void 0),
-			onKeydown: n[3] ||= w(T((e) => q(!1), ["prevent"]), ["esc"])
+			onKeydown: n[3] ||= T(E((e) => J(!1), ["prevent"]), ["esc"])
 		}, [
-			l("span", D, y(N.value + 1) + " / " + y(f.steps.length), 1),
-			I.value.title ? (_(), c("strong", O, y(I.value.title), 1)) : s("", !0),
-			l("p", k, y(I.value.text), 1),
-			l("div", A, [
+			l("span", O, b(P.value + 1) + " / " + b(f.steps.length), 1),
+			L.value.title ? (v(), c("strong", k, b(L.value.title), 1)) : s("", !0),
+			l("p", A, b(L.value.text), 1),
+			l("div", j, [
 				d(e, {
 					size: "sm",
 					variant: "ghost",
-					onClick: n[0] ||= (e) => q(!1)
+					onClick: n[0] ||= (e) => J(!1)
 				}, {
-					default: C(() => [u(y(F.value.skip), 1)]),
+					default: w(() => [u(b(I.value.skip), 1)]),
 					_: 1
 				}),
 				n[4] ||= l("span", { style: { flex: "1" } }, null, -1),
 				d(e, {
 					size: "sm",
 					variant: "outline",
-					disabled: N.value === 0,
-					onClick: n[1] ||= (e) => N.value--
+					disabled: P.value === 0,
+					onClick: n[1] ||= (e) => P.value--
 				}, {
-					default: C(() => [u(y(F.value.prev), 1)]),
+					default: w(() => [u(b(I.value.prev), 1)]),
 					_: 1
 				}, 8, ["disabled"]),
 				d(e, {
 					size: "sm",
-					onClick: n[2] ||= (e) => L.value ? q(!0) : N.value++
+					onClick: n[2] ||= (e) => R.value ? J(!0) : P.value++
 				}, {
-					default: C(() => [u(y(L.value ? F.value.done : F.value.next), 1)]),
+					default: w(() => [u(b(R.value ? I.value.done : I.value.next), 1)]),
 					_: 1
 				})
 			])
-		], 46, E)], 64)) : s("", !0)]));
+		], 46, D)], 64)) : s("", !0)])) : s("", !0);
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

package/dist/components/BlessTreemap.css

@@ -0,0 +1 @@
+.bless-treemap{gap:var(--bless-space-2);width:100%;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);flex-direction:column;display:flex}.bless-treemap__path{align-items:center;gap:var(--bless-space-2);display:flex}.bless-treemap__crumb{color:var(--bless-color-accent-text);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.bless-treemap__here{font-weight:var(--bless-font-weight-bold,700)}.bless-treemap__box{position:relative;overflow:hidden}.bless-treemap__tile{box-sizing:border-box;padding:var(--bless-space-2);border:1px solid var(--bless-color-bg);background:color-mix(in srgb, var(--_c) 24%, var(--bless-color-surface));color:var(--bless-color-text);font:inherit;text-align:start;cursor:default;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;margin:0;display:flex;position:absolute;overflow:hidden}.bless-treemap__tile--group{cursor:pointer;box-shadow:inset 3px 0 0 var(--_c)}.bless-treemap__tile:hover{background:color-mix(in srgb, var(--_c) 38%, var(--bless-color-surface))}.bless-treemap__tile:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px;z-index:1}.bless-treemap__name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:var(--bless-font-weight-bold,700);overflow:hidden}.bless-treemap__value{font-size:var(--bless-text-xs)}

package/dist/components/BlessTreemap.js

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

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

@@ -0,0 +1,46 @@
+import { TreemapNode } from '../composables/treemap';
+export type { TreemapNode as BlessTreemapNode } from '../composables/treemap';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    data: TreemapNode[];
+    height?: number;
+    /** text for a size, e.g. `(v) => v + " MB"` */
+    format?: (v: number) => string;
+    /** name of the top level in the path, and of the whole chart for screen readers */
+    label?: string;
+    labels?: Partial<{
+        tile: (label: string, value: string, share: string, children: number) => string;
+        path: string;
+        up: string;
+        hint: string;
+    }>;
+} & {
+    /** ids from the top down to the level being shown */
+    path?: string[];
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (node: TreemapNode, path: string[]) => any;
+    "update:path": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    data: TreemapNode[];
+    height?: number;
+    /** text for a size, e.g. `(v) => v + " MB"` */
+    format?: (v: number) => string;
+    /** name of the top level in the path, and of the whole chart for screen readers */
+    label?: string;
+    labels?: Partial<{
+        tile: (label: string, value: string, share: string, children: number) => string;
+        path: string;
+        up: string;
+        hint: string;
+    }>;
+} & {
+    /** ids from the top down to the level being shown */
+    path?: string[];
+}> & Readonly<{
+    onSelect?: ((node: TreemapNode, path: string[]) => any) | undefined;
+    "onUpdate:path"?: ((value: string[]) => any) | undefined;
+}>, {
+    label: string;
+    height: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessTreemap.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,137 @@
+import { neighbour as e, squarify as t, totalOf as n } from "../composables/treemap.js";
+import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, useModel as y } from "vue";
+//#region src/components/BlessTreemap.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "bless-treemap" }, x = ["aria-label"], S = ["onClick"], C = {
+	key: 1,
+	class: "bless-treemap__here",
+	"aria-current": "location"
+}, w = ["aria-label"], T = [
+	"tabindex",
+	"aria-label",
+	"title",
+	"onClick",
+	"onFocus",
+	"onKeydown"
+], E = { class: "bless-treemap__name" }, D = {
+	key: 0,
+	class: "bless-treemap__value"
+}, O = /*@__PURE__*/ c({
+	name: "BlessTreemap",
+	__name: "BlessTreemap",
+	props: /*@__PURE__*/ l({
+		data: {},
+		height: { default: 320 },
+		format: {},
+		label: { default: "All" },
+		labels: {}
+	}, {
+		path: { default: () => [] },
+		pathModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["select"], ["update:path"]),
+	setup(c, { emit: l }) {
+		let O = c, k = y(c, "path"), A = l, j = i(() => ({
+			tile: (e, t, n, r) => `${e}, ${t}, ${n}${r ? `, contains ${r} items, Enter opens` : ""}`,
+			path: "Path",
+			up: "Up one level",
+			hint: "Arrow keys move between tiles, Enter opens or selects, Backspace goes up.",
+			...O.labels
+		})), M = i(() => O.format ?? ((e) => new Intl.NumberFormat().format(e))), N = (e) => `${e < .01 ? "<1" : Math.round(e * 100)}%`, P = g(), F = g(640), I;
+		m(() => {
+			let e = () => F.value = P.value?.clientWidth || F.value;
+			e(), typeof ResizeObserver == "function" && P.value && (I = new ResizeObserver(e), I.observe(P.value));
+		}), p(() => I?.disconnect());
+		let L = i(() => {
+			let e = [], t = O.data;
+			for (let n of k.value) {
+				let r = t.find((e) => e.id === n);
+				if (!r?.children) break;
+				e.push(r), t = r.children;
+			}
+			return e;
+		}), R = i(() => (L.value.at(-1)?.children ?? O.data).filter((e) => n(e) > 0)), z = i(() => R.value.reduce((e, t) => e + n(t), 0)), B = i(() => t(R.value.map(n), F.value, O.height)), V = (e, t) => {
+			let n = L.value[0], r = e.color ?? n?.color ?? `chart-${(n ? O.data.indexOf(n) : t) % 5 + 1}`;
+			return /^[a-z0-9-]+$/i.test(r) ? `var(--bless-color-${r})` : r;
+		}, H = i(() => R.value.map((e, t) => {
+			let r = B.value[t], i = n(e);
+			return {
+				node: e,
+				v: i,
+				r,
+				color: V(e, t),
+				big: r.w >= 64 && r.h >= 34,
+				tall: r.h >= 54,
+				name: j.value.tile(e.label, M.value(i), N(i / (z.value || 1)), e.children?.length ?? 0)
+			};
+		})), U = g(0), W = i(() => Math.min(U.value, Math.max(0, H.value.length - 1))), G = (e) => {
+			U.value = e, u(() => P.value?.querySelectorAll(".bless-treemap__tile")[e]?.focus());
+		};
+		function K(e) {
+			let t = H.value[e], n = [...k.value.slice(0, L.value.length), t.node.id];
+			t.node.children?.length && (k.value = n, U.value = 0), A("select", t.node, n);
+		}
+		function q(e = L.value.length - 1) {
+			if (e < 0) return;
+			let t = L.value[e]?.id;
+			k.value = k.value.slice(0, e), u(() => G(Math.max(0, R.value.findIndex((e) => e.id === t))));
+		}
+		function J(t, n) {
+			let r = {
+				ArrowLeft: "left",
+				ArrowRight: "right",
+				ArrowUp: "up",
+				ArrowDown: "down"
+			}[n.key];
+			r ? (n.preventDefault(), G(e(B.value, t, r))) : n.key === "Home" ? (n.preventDefault(), G(0)) : n.key === "End" ? (n.preventDefault(), G(H.value.length - 1)) : n.key === "Backspace" && L.value.length && (n.preventDefault(), q());
+		}
+		let Y = "bless-treemap-hint";
+		return (e, t) => (h(), o("div", b, [
+			L.value.length ? (h(), o("nav", {
+				key: 0,
+				class: "bless-treemap__path",
+				"aria-label": j.value.path
+			}, [s("button", {
+				type: "button",
+				class: "bless-treemap__crumb",
+				onClick: t[0] ||= (e) => q(0)
+			}, v(c.label), 1), (h(!0), o(r, null, _(L.value, (e, n) => (h(), o(r, { key: e.id }, [t[1] ||= s("span", { "aria-hidden": "true" }, "›", -1), n < L.value.length - 1 ? (h(), o("button", {
+				key: 0,
+				type: "button",
+				class: "bless-treemap__crumb",
+				onClick: (e) => q(n + 1)
+			}, v(e.label), 9, S)) : (h(), o("span", C, v(e.label), 1))], 64))), 128))], 8, x)) : a("", !0),
+			s("div", {
+				ref_key: "box",
+				ref: P,
+				class: "bless-treemap__box",
+				role: "group",
+				"aria-label": L.value.length ? L.value.at(-1).label : c.label,
+				style: f({ height: `${c.height}px` })
+			}, [(h(!0), o(r, null, _(H.value, (e, t) => (h(), o("button", {
+				key: e.node.id,
+				type: "button",
+				class: d(["bless-treemap__tile", { "bless-treemap__tile--group": e.node.children?.length }]),
+				style: f({
+					left: `${e.r.x}px`,
+					top: `${e.r.y}px`,
+					width: `${e.r.w}px`,
+					height: `${e.r.h}px`,
+					"--_c": e.color
+				}),
+				tabindex: W.value === t ? 0 : -1,
+				"aria-label": e.name,
+				"aria-describedby": Y,
+				title: e.big ? void 0 : e.name,
+				onClick: (e) => K(t),
+				onFocus: (e) => U.value = t,
+				onKeydown: (e) => J(t, e)
+			}, [e.big ? (h(), o(r, { key: 0 }, [s("span", E, v(e.node.label), 1), e.tall ? (h(), o("span", D, v(M.value(e.v)), 1)) : a("", !0)], 64)) : a("", !0)], 46, T))), 128))], 12, w),
+			s("span", {
+				id: Y,
+				hidden: ""
+			}, v(j.value.hint), 1)
+		]));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -19,6 +19,17 @@ type __VLS_Props = {
     maxSize?: number;
     label?: string;
     hint?: string;
+    /** button text, item buttons and the messages said as files finish */
+    labels?: Partial<{
+        clear: string;
+        upload: string;
+        tooLarge: string;
+        failed: string;
+        uploaded: (name: string) => string;
+        failedFile: (name: string, why: string) => string;
+        cancel: (name: string) => string;
+        remove: (name: string) => string;
+    }>;
 };
 declare var __VLS_13: {
     start: () => void;

package/dist/components/BlessUploader.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import e from "./BlessButton.js";
 import t from "./BlessProgress.js";
 import n from "./BlessFileInput.js";
-import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, nextTick as d, normalizeClass as f, onBeforeUnmount as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, withCtx as y } from "vue";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, withCtx as b } from "vue";
 //#region src/components/BlessUploader.vue?vue&type=script&setup=true&lang.ts
-var b = { class: "bless-uploader__name" }, x = { class: "bless-uploader__meta" }, S = ["aria-label", "onClick"], C = {
+var x = { class: "bless-uploader__name" }, S = { class: "bless-uploader__meta" }, C = ["aria-label", "onClick"], w = {
 	class: "bless-uploader__live",
 	"aria-live": "polite"
-}, w = {
+}, T = {
 	key: 1,
 	class: "bless-uploader__actions"
-}, T = /*@__PURE__*/ u({
+}, E = /*@__PURE__*/ d({
 	name: "BlessUploader",
 	__name: "BlessUploader",
 	props: {
@@ -27,75 +27,86 @@ var b = { class: "bless-uploader__name" }, x = { class: "bless-uploader__meta" }
 		},
 		maxSize: {},
 		label: { default: "Drop files here or click to browse" },
-		hint: {}
+		hint: {},
+		labels: {}
 	},
 	emits: [
 		"upload",
 		"done",
 		"error"
 	],
-	setup(u, { expose: T, emit: E }) {
-		let D = u, O = E, k = h([]), A = h([]), j = 0, M = h("");
-		function N(e) {
+	setup(d, { expose: E, emit: D }) {
+		let O = d, k = i(() => ({
+			clear: "Clear",
+			upload: "Upload",
+			tooLarge: "Too large",
+			failed: "Upload failed",
+			uploaded: (e) => `${e} uploaded`,
+			failedFile: (e, t) => `${e}: ${t}`,
+			cancel: (e) => `Cancel ${e}`,
+			remove: (e) => `Remove ${e}`,
+			...O.labels
+		})), A = D, j = g([]), M = g([]), N = 0, P = g("");
+		function F(e) {
 			for (let t of e) {
-				if (D.maxSize && t.size > D.maxSize) {
-					k.value.push({
-						id: ++j,
+				if (O.maxSize && t.size > O.maxSize) {
+					j.value.push({
+						id: ++N,
 						file: t,
 						progress: 0,
 						status: "error",
-						error: "Too large"
+						error: k.value.tooLarge
 					});
 					continue;
 				}
-				k.value.push({
-					id: ++j,
+				j.value.push({
+					id: ++N,
 					file: t,
 					progress: 0,
 					status: "queued"
 				});
 			}
-			A.value = [], D.auto && F();
+			M.value = [], O.auto && L();
 		}
-		function P(e) {
+		function I(e) {
 			e.status = "uploading";
 			let t = (t) => e.progress = Math.max(0, Math.min(100, t)), n = () => {
-				e.status = "done", e.progress = 100, M.value = `${e.file.name} uploaded`, O("done", e);
+				e.status = "done", e.progress = 100, P.value = k.value.uploaded(e.file.name), A("done", e);
 			}, r = (t) => {
-				e.status = "error", e.error = t ?? "Upload failed", M.value = `${e.file.name}: ${e.error}`, O("error", e);
+				e.status = "error", e.error = t ?? k.value.failed, P.value = k.value.failedFile(e.file.name, e.error), A("error", e);
 			};
-			if (!D.url) return void O("upload", e, t, n, r);
+			if (!O.url) return void A("upload", e, t, n, r);
 			let i = new XMLHttpRequest();
-			e.xhr = i, i.open("POST", D.url);
-			for (let [e, t] of Object.entries(D.headers ?? {})) i.setRequestHeader(e, t);
+			e.xhr = i, i.open("POST", O.url);
+			for (let [e, t] of Object.entries(O.headers ?? {})) i.setRequestHeader(e, t);
 			i.upload.onprogress = (e) => e.lengthComputable && t(e.loaded / e.total * 100), i.onload = () => i.status < 400 ? n() : r(`HTTP ${i.status}`), i.onerror = () => r(), i.onabort = () => e.status = "cancelled";
 			let a = new FormData();
-			a.append(D.field, e.file), i.send(a);
+			a.append(O.field, e.file), i.send(a);
 		}
-		let F = () => k.value.filter((e) => e.status === "queued").forEach(P), I = (e) => e.xhr ? e.xhr.abort() : e.status = "cancelled", L = h(), R = h();
-		async function z(e) {
-			let t = k.value.indexOf(e);
-			e.status === "uploading" && I(e), k.value = k.value.filter((t) => t !== e), await d();
-			let n = R.value?.querySelectorAll(".bless-uploader__x") ?? [];
-			(n[Math.min(t, n.length - 1)] ?? L.value?.querySelector("input[type=file]"))?.focus();
+		let L = () => j.value.filter((e) => e.status === "queued").forEach(I), R = (e) => e.xhr ? e.xhr.abort() : e.status = "cancelled", z = g(), B = g();
+		async function V(e) {
+			let t = j.value.indexOf(e);
+			e.status === "uploading" && R(e), j.value = j.value.filter((t) => t !== e), await f();
+			let n = B.value?.querySelectorAll(".bless-uploader__x") ?? [];
+			(n[Math.min(t, n.length - 1)] ?? z.value?.querySelector("input[type=file]"))?.focus();
 		}
-		let B = () => k.value = k.value.filter((e) => e.status === "uploading"), V = (e) => e < 1048576 ? `${(e / 1024).toFixed(0)} KB` : `${(e / 1048576).toFixed(1)} MB`;
-		return p(() => k.value.forEach((e) => e.status === "uploading" && e.xhr?.abort())), T({
-			start: F,
-			clear: B,
-			queue: k
-		}), (d, p) => (m(), o("div", {
+		let H = () => j.value = j.value.filter((e) => e.status === "uploading"), U = (e) => e < 1048576 ? `${(e / 1024).toFixed(0)} KB` : `${(e / 1048576).toFixed(1)} MB`;
+		return m(() => j.value.forEach((e) => e.status === "uploading" && e.xhr?.abort())), E({
+			start: L,
+			clear: H,
+			queue: j
+		}), (i, f) => (h(), s("div", {
 			ref_key: "root",
-			ref: L,
+			ref: z,
 			class: "bless-uploader"
 		}, [
-			l(n, {
-				modelValue: A.value,
-				"onUpdate:modelValue": [p[0] ||= (e) => A.value = e, N],
-				accept: u.accept,
-				multiple: u.multiple,
-				label: u.label,
-				hint: u.hint,
+			u(n, {
+				modelValue: M.value,
+				"onUpdate:modelValue": [f[0] ||= (e) => M.value = e, F],
+				accept: d.accept,
+				multiple: d.multiple,
+				label: d.label,
+				hint: d.hint,
 				list: !1
 			}, null, 8, [
 				"modelValue",
@@ -104,54 +115,54 @@ var b = { class: "bless-uploader__name" }, x = { class: "bless-uploader__meta" }
 				"label",
 				"hint"
 			]),
-			k.value.length ? (m(), o("ul", {
+			j.value.length ? (h(), s("ul", {
 				key: 0,
 				role: "list",
 				ref_key: "list",
-				ref: R,
+				ref: B,
 				class: "bless-uploader__list"
-			}, [(m(!0), o(r, null, g(k.value, (e) => (m(), o("li", {
+			}, [(h(!0), s(r, null, _(j.value, (e) => (h(), s("li", {
 				key: e.id,
-				class: f(["bless-uploader__item", `bless-uploader__item--${e.status}`])
+				class: p(["bless-uploader__item", `bless-uploader__item--${e.status}`])
 			}, [
-				s("span", b, v(e.file.name), 1),
-				s("span", x, v(e.error ?? (e.status === "done" ? "done" : e.status === "uploading" ? `${Math.round(e.progress)}%` : V(e.file.size))), 1),
-				e.status === "uploading" ? (m(), i(t, {
+				c("span", x, y(e.file.name), 1),
+				c("span", S, y(e.error ?? (e.status === "done" ? "done" : e.status === "uploading" ? `${Math.round(e.progress)}%` : U(e.file.size))), 1),
+				e.status === "uploading" ? (h(), a(t, {
 					key: 0,
 					value: e.progress,
 					size: "sm",
 					class: "bless-uploader__bar"
-				}, null, 8, ["value"])) : a("", !0),
-				s("button", {
+				}, null, 8, ["value"])) : o("", !0),
+				c("button", {
 					type: "button",
 					class: "bless-uploader__x",
-					"aria-label": `${e.status === "uploading" ? "Cancel" : "Remove"} ${e.file.name}`,
-					onClick: (t) => e.status === "uploading" ? I(e) : z(e)
-				}, " × ", 8, S)
-			], 2))), 128))], 512)) : a("", !0),
-			s("span", C, v(M.value), 1),
-			k.value.length ? (m(), o("div", w, [_(d.$slots, "actions", {
-				start: F,
-				clear: B,
-				queue: k.value
-			}, () => [l(e, {
+					"aria-label": (e.status === "uploading" ? k.value.cancel : k.value.remove)(e.file.name),
+					onClick: (t) => e.status === "uploading" ? R(e) : V(e)
+				}, " × ", 8, C)
+			], 2))), 128))], 512)) : o("", !0),
+			c("span", w, y(P.value), 1),
+			j.value.length ? (h(), s("div", T, [v(i.$slots, "actions", {
+				start: L,
+				clear: H,
+				queue: j.value
+			}, () => [u(e, {
 				size: "sm",
 				variant: "outline",
-				onClick: B
+				onClick: H
 			}, {
-				default: y(() => [...p[1] ||= [c("Clear", -1)]]),
+				default: b(() => [l(y(k.value.clear), 1)]),
 				_: 1
-			}), u.auto ? a("", !0) : (m(), i(e, {
+			}), d.auto ? o("", !0) : (h(), a(e, {
 				key: 0,
 				size: "sm",
-				disabled: !k.value.some((e) => e.status === "queued"),
-				onClick: F
+				disabled: !j.value.some((e) => e.status === "queued"),
+				onClick: L
 			}, {
-				default: y(() => [...p[2] ||= [c("Upload", -1)]]),
+				default: b(() => [l(y(k.value.upload), 1)]),
 				_: 1
-			}, 8, ["disabled"]))])])) : a("", !0)
+			}, 8, ["disabled"]))])])) : o("", !0)
 		], 512));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/composables/annotate.d.ts

@@ -0,0 +1,35 @@
+/** A mark on an image. All numbers are fractions (0–1) of the image, so they survive any size. */
+export interface Region {
+    id: string;
+    x: number;
+    y: number;
+    /** present on a box, absent on a pin */
+    w?: number;
+    h?: number;
+    label: string;
+}
+/** the smallest side of a box, as a fraction of the image */
+export declare const MIN_SIDE = 0.02;
+export declare const isBox: (r: Region) => r is Region & {
+    w: number;
+    h: number;
+};
+/** The box between two points, kept inside the image. */
+export declare function boxFrom(a: {
+    x: number;
+    y: number;
+}, b: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** `r` moved by (dx, dy), stopping at the image edges. */
+export declare function moveRegion(r: Region, dx: number, dy: number): Region;
+/** A box grown by (dw, dh) from its top-left corner; a pin is returned as it is. */
+export declare function resizeRegion(r: Region, dw: number, dh: number): Region;
+/** The first `r1`, `r2`… not already used. */
+export declare function nextId(regions: readonly Region[]): string;