blessing-ui 0.1.0 → 0.3.0

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;

package/dist/composables/annotate.js

@@ -0,0 +1,33 @@
+//#region src/composables/annotate.ts
+var e = .02, t = (e) => e.w != null && e.h != null, n = (e, t, n) => Math.min(n, Math.max(t, e)), r = (e) => Math.round(e * 1e4) / 1e4;
+function i(e, t) {
+	let i = n(Math.min(e.x, t.x), 0, 1), a = n(Math.min(e.y, t.y), 0, 1), o = n(Math.max(e.x, t.x), 0, 1), s = n(Math.max(e.y, t.y), 0, 1);
+	return {
+		x: r(i),
+		y: r(a),
+		w: r(o - i),
+		h: r(s - a)
+	};
+}
+function a(e, t, i) {
+	let a = e.w ?? 0, o = e.h ?? 0;
+	return {
+		...e,
+		x: r(n(e.x + t, 0, 1 - a)),
+		y: r(n(e.y + i, 0, 1 - o))
+	};
+}
+function o(i, a, o) {
+	return t(i) ? {
+		...i,
+		w: r(n(i.w + a, e, 1 - i.x)),
+		h: r(n(i.h + o, e, 1 - i.y))
+	} : i;
+}
+function s(e) {
+	let t = new Set(e.map((e) => e.id)), n = 1;
+	for (; t.has(`r${n}`);) n++;
+	return `r${n}`;
+}
+//#endregion
+export { e as MIN_SIDE, i as boxFrom, t as isBox, a as moveRegion, s as nextId, o as resizeRegion };

package/dist/composables/canvasView.d.ts

@@ -0,0 +1,21 @@
+export interface CanvasView {
+    /** where the world's origin sits inside the viewport, px */
+    x: number;
+    y: number;
+    zoom: number;
+}
+export declare const clampZoom: (z: number, min: number, max: number) => number;
+/** The world point under a viewport point (px relative to the viewport's top-left). */
+export declare const toWorld: (v: CanvasView, px: number, py: number) => {
+    x: number;
+    y: number;
+};
+/** Zoom by `factor` keeping the world point under (`px`, `py`) where it is. */
+export declare function zoomAt(v: CanvasView, factor: number, px: number, py: number, min: number, max: number): CanvasView;
+/** The view that shows a world rectangle centred in a viewport of `w` × `h`, with `pad` px around. */
+export declare function fitRect(r: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, w: number, h: number, min: number, max: number, pad?: number): CanvasView;

package/dist/composables/canvasView.js

@@ -0,0 +1,23 @@
+//#region src/composables/canvasView.ts
+var e = (e, t, n) => Math.min(n, Math.max(t, e)), t = (e, t, n) => ({
+	x: (t - e.x) / e.zoom,
+	y: (n - e.y) / e.zoom
+});
+function n(t, n, r, i, a, o) {
+	let s = e(t.zoom * n, a, o), c = s / t.zoom;
+	return {
+		zoom: s,
+		x: r - (r - t.x) * c,
+		y: i - (i - t.y) * c
+	};
+}
+function r(t, n, r, i, a, o = 32) {
+	let s = e(Math.min((n - o * 2) / (t.width || 1), (r - o * 2) / (t.height || 1)), i, a);
+	return {
+		zoom: s,
+		x: (n - t.width * s) / 2 - t.x * s,
+		y: (r - t.height * s) / 2 - t.y * s
+	};
+}
+//#endregion
+export { e as clampZoom, r as fitRect, t as toWorld, n as zoomAt };

package/dist/composables/confetti.d.ts

@@ -0,0 +1,32 @@
+export interface Particle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    size: number;
+    rot: number;
+    vr: number;
+    color: string;
+    round: boolean;
+    /** 0..1 of its life left; fades out over the last part */
+    life: number;
+}
+export interface BurstOptions {
+    count: number;
+    /** viewport px */
+    origin: {
+        x: number;
+        y: number;
+    };
+    /** where the burst points, degrees, 0 = right, 270 = up */
+    angle: number;
+    /** total width of the cone, degrees */
+    spread: number;
+    /** px per second at launch (the strongest piece) */
+    power: number;
+    colors: string[];
+}
+/** The pieces of one burst; `rand` is injected so a test can fix it. */
+export declare function burst(o: BurstOptions, rand?: () => number): Particle[];
+/** Advance a piece by `dt` seconds: gravity pulls down, the air slows it, it fades near the end. */
+export declare function step(p: Particle, dt: number, gravity: number, lifetime: number): void;

package/dist/composables/confetti.js

@@ -0,0 +1,23 @@
+//#region src/composables/confetti.ts
+function e(e, t = Math.random) {
+	return Array.from({ length: e.count }, (n, r) => {
+		let i = (e.angle + (t() - .5) * e.spread) * Math.PI / 180, a = e.power * (.45 + t() * .55);
+		return {
+			x: e.origin.x,
+			y: e.origin.y,
+			vx: Math.cos(i) * a,
+			vy: Math.sin(i) * a,
+			size: 5 + t() * 6,
+			rot: t() * Math.PI * 2,
+			vr: (t() - .5) * 12,
+			color: e.colors[r % e.colors.length],
+			round: t() < .3,
+			life: 1
+		};
+	});
+}
+function t(e, t, n, r) {
+	e.vx *= 1 - 1.6 * t, e.vy = e.vy * (1 - 1.6 * t) + n * t, e.x += e.vx * t, e.y += e.vy * t, e.rot += e.vr * t, e.life -= t / r;
+}
+//#endregion
+export { e as burst, t as step };

package/dist/composables/cropBox.d.ts

@@ -0,0 +1,22 @@
+/** A crop box as fractions (0..1) of the displayed image: left, top, right, bottom. */
+export interface CropBox {
+    l: number;
+    t: number;
+    r: number;
+    b: number;
+}
+export declare const MIN = 0.05;
+/**
+ * Largest centred box covering `fill` of the image. `ratio` is width / height in fractions
+ * (pixel aspect × image height / image width); 0 means free.
+ */
+export declare function initialBox(ratio: number, fill?: number): CropBox;
+/** Shift the whole box by (dx, dy) fractions, stopping at the image edge. */
+export declare function moveBox(box: CropBox, dx: number, dy: number): CropBox;
+/**
+ * Drag the handle `h` ("n", "se", …) to the point (x, y). The opposite edges stay put; with a
+ * `ratio` (corners only) the box keeps its shape by giving up the longer side.
+ */
+export declare function resizeBox(box: CropBox, h: string, x: number, y: number, ratio?: number): CropBox;
+/** Grow (+) or shrink (−) around the centre by `d` of the image, keeping shape and staying inside. */
+export declare function scaleBox(box: CropBox, d: number): CropBox;