blessing-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,61 @@
+type __VLS_Props = {
+    /** under this width (px of the view itself) the panes stack: one at a time */
+    breakpoint?: number;
+    min?: number;
+    max?: number;
+    /** remember the divider in localStorage under this key */
+    storageKey?: string;
+    /** text of the button that goes back from the detail when stacked */
+    backLabel?: string;
+    label?: string;
+};
+type __VLS_ModelProps = {
+    /** master pane width in % */
+    modelValue?: number;
+    /** when stacked: is the detail showing (true) or the list (false)? */
+    "detail"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {
+    open: () => boolean;
+    stacked: boolean;
+}, __VLS_3: {
+    stacked: boolean;
+}, __VLS_12: {
+    open: () => boolean;
+    stacked: boolean;
+}, __VLS_15: {
+    stacked: boolean;
+};
+type __VLS_Slots = {} & {
+    master?: (props: typeof __VLS_1) => any;
+} & {
+    detail?: (props: typeof __VLS_3) => any;
+} & {
+    master?: (props: typeof __VLS_12) => any;
+} & {
+    detail?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+    back: () => any;
+    "update:detail": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onBack?: (() => any) | undefined;
+    "onUpdate:detail"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    min: number;
+    max: number;
+    breakpoint: number;
+    backLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/BlessSplitView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,92 @@
+import e from "./BlessResizable.js";
+import { Fragment as t, createBlock as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, nextTick as c, normalizeClass as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, useModel as g, vShow as _, watch as v, withCtx as y, withDirectives as b } from "vue";
+//#region src/components/BlessSplitView.vue?vue&type=script&setup=true&lang.ts
+var x = /*@__PURE__*/ o({
+	name: "BlessSplitView",
+	__name: "BlessSplitView",
+	props: /*@__PURE__*/ s({
+		breakpoint: { default: 560 },
+		min: { default: 20 },
+		max: { default: 60 },
+		storageKey: {},
+		backLabel: { default: "Back" },
+		label: { default: "Resize list" }
+	}, {
+		modelValue: { default: 35 },
+		modelModifiers: {},
+		detail: {
+			type: Boolean,
+			default: !1
+		},
+		detailModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["back"], ["update:modelValue", "update:detail"]),
+	setup(o, { emit: s }) {
+		let x = o, S = g(o, "modelValue"), C = g(o, "detail"), w = s, T = p(), E = p(!1), D = p(), O = p();
+		function k() {
+			E.value = (T.value?.clientWidth ?? Infinity) < x.breakpoint;
+		}
+		let A;
+		d(() => {
+			if (x.storageKey) try {
+				let e = parseFloat(localStorage.getItem(x.storageKey) ?? "");
+				e >= x.min && e <= x.max && (S.value = e);
+			} catch {}
+			k(), typeof ResizeObserver < "u" && T.value && (A = new ResizeObserver(k), A.observe(T.value));
+		}), u(() => A?.disconnect()), v(S, (e) => {
+			if (x.storageKey) try {
+				localStorage.setItem(x.storageKey, String(e));
+			} catch {}
+		}), v(C, (e) => {
+			E.value && c(() => {
+				e ? D.value?.focus() : O.value?.focus();
+			});
+		});
+		function j() {
+			C.value = !1, w("back");
+		}
+		return (s, c) => (f(), r("div", {
+			ref_key: "root",
+			ref: T,
+			class: l(["bless-split", { "bless-split--stacked": E.value }])
+		}, [E.value ? (f(), r(t, { key: 0 }, [b(i("div", {
+			ref_key: "masterEl",
+			ref: O,
+			class: "bless-split__pane",
+			tabindex: "-1"
+		}, [m(s.$slots, "master", {
+			open: () => C.value = !0,
+			stacked: !0
+		})], 512), [[_, !C.value]]), b(i("div", {
+			ref_key: "detailEl",
+			ref: D,
+			class: "bless-split__pane",
+			tabindex: "-1"
+		}, [i("button", {
+			type: "button",
+			class: "bless-split__back",
+			onClick: j
+		}, [c[1] ||= i("span", { "aria-hidden": "true" }, "←", -1), a(" " + h(o.backLabel), 1)]), m(s.$slots, "detail", { stacked: !0 })], 512), [[_, C.value]])], 64)) : (f(), n(e, {
+			key: 1,
+			modelValue: S.value,
+			"onUpdate:modelValue": c[0] ||= (e) => S.value = e,
+			min: o.min,
+			max: o.max,
+			label: o.label
+		}, {
+			a: y(() => [m(s.$slots, "master", {
+				open: () => C.value = !0,
+				stacked: !1
+			})]),
+			b: y(() => [m(s.$slots, "detail", { stacked: !1 })]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"min",
+			"max",
+			"label"
+		]))], 2));
+	}
+});
+//#endregion
+export { x as default };

package/dist/components/BlessSwipeDeck.css

@@ -0,0 +1 @@
+.bless-deck{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-deck__stage{min-height:240px;display:grid;position:relative}.bless-deck__stage:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:4px}.bless-deck__card{padding:var(--bless-space-8) var(--bless-space-4) var(--bless-space-4);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);box-shadow:var(--bless-shadow-plate);translate:0 calc(var(--bless-deck-depth,0) * 8px);scale:calc(1 - var(--bless-deck-depth,0) * .04);transition:transform var(--bless-duration-slow) var(--bless-ease-out), translate var(--bless-duration-slow) var(--bless-ease-out), scale var(--bless-duration-slow) var(--bless-ease-out), opacity var(--bless-duration-slow) var(--bless-ease-out);-webkit-user-select:none;user-select:none;grid-area:1/1;position:relative}.bless-deck__card--top{z-index:3;cursor:grab;touch-action:none}.bless-deck__card:nth-child(2){z-index:2}.bless-deck__card:nth-child(3){z-index:1}.bless-deck-leave-active{z-index:4;pointer-events:none}.bless-deck-leave-to{opacity:0;translate:calc(var(--bless-deck-x) * 140%) calc(var(--bless-deck-y) * 140%)}.bless-deck-enter-from{opacity:0}.bless-deck__stamp{top:var(--bless-space-3);padding:0 var(--bless-space-2);text-transform:uppercase;pointer-events:none;opacity:0;border:2px solid;font-weight:700;position:absolute}.bless-deck__stamp--accept{inset-inline-start:var(--bless-space-3)}.bless-deck__stamp--reject{inset-inline-end:var(--bless-space-3)}.bless-deck__stamp--skip{inset-inline-start:50%;translate:-50%}.bless-deck__empty{color:var(--bless-color-text-muted);grid-area:1/1;place-items:center;display:grid}.bless-deck__controls{justify-content:center;gap:var(--bless-space-2);margin-top:var(--bless-space-4);flex-wrap:wrap;display:flex}.bless-deck__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.bless-deck__card{transition:none}}

package/dist/components/BlessSwipeDeck.js

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

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

@@ -0,0 +1,46 @@
+export type BlessSwipeDecision = "accept" | "reject" | "skip";
+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;
+        /** show the buttons under the deck */
+        controls?: boolean;
+        /** how far (px) a drag must travel to count */
+        threshold?: number;
+        labels?: Partial<Record<BlessSwipeDecision | "undo", string>>;
+    } & {
+        /** the cards still to decide, top of the deck first */
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        onDecide?: ((item: T, decision: BlessSwipeDecision) => any) | undefined;
+        onUndo?: ((item: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import('vue').ShallowUnwrapRef<{
+        accept: () => void;
+        reject: () => void;
+        skip: () => void;
+        undo: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        card?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    } & {
+        empty?: (props: {}) => any;
+    };
+    emit: (((evt: "decide", item: T, decision: BlessSwipeDecision) => void) & ((evt: "undo", item: T) => void)) & ((event: "update:modelValue", value: 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/BlessSwipeDeck.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,199 @@
+import e from "./BlessButton.js";
+import { Fragment as t, TransitionGroup as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, useModel as v, withCtx as y } from "vue";
+//#region src/components/BlessSwipeDeck.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-label"], x = [
+	"aria-hidden",
+	"inert",
+	"onPointerdown",
+	"onPointermove",
+	"onPointerup",
+	"onPointercancel"
+], S = {
+	key: 0,
+	class: "bless-deck__empty"
+}, C = {
+	key: 0,
+	class: "bless-deck__controls"
+}, w = {
+	class: "bless-deck__live",
+	"aria-live": "polite"
+}, T = /*@__PURE__*/ l({
+	name: "BlessSwipeDeck",
+	__name: "BlessSwipeDeck",
+	props: /*@__PURE__*/ u({
+		rowKey: {},
+		label: { default: "Cards" },
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		threshold: { default: 100 },
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["decide", "undo"], ["update:modelValue"]),
+	setup(l, { expose: u, emit: T }) {
+		let E = l, D = v(l, "modelValue"), O = T, k = r(() => ({
+			accept: "Accept",
+			reject: "Reject",
+			skip: "Skip",
+			undo: "Undo",
+			...E.labels
+		})), A = [], j = m(0), M = m(""), N = {
+			accept: [1, 0],
+			reject: [-1, 0],
+			skip: [0, -1]
+		}, P = m([0, 0]);
+		function F(e) {
+			let [t, ...n] = D.value;
+			t !== void 0 && (P.value = N[e], A.push({
+				item: t,
+				decision: e
+			}), j.value = A.length, D.value = n, O("decide", t, e), M.value = `${k.value[e]}. ${n.length} left.`);
+		}
+		function I() {
+			let e = A.pop();
+			e && (j.value = A.length, P.value = [0, 0], D.value = [e.item, ...D.value], O("undo", e.item), M.value = `${k.value.undo}. ${D.value.length} left.`);
+		}
+		u({
+			accept: () => F("accept"),
+			reject: () => F("reject"),
+			skip: () => F("skip"),
+			undo: I
+		});
+		let L = m(null);
+		function R(e) {
+			e.button || (e.currentTarget.setPointerCapture?.(e.pointerId), L.value = {
+				x: 0,
+				y: 0,
+				sx: e.clientX,
+				sy: e.clientY
+			});
+		}
+		function z(e) {
+			let t = L.value;
+			t && (t.x = e.clientX - t.sx, t.y = e.clientY - t.sy);
+		}
+		function B() {
+			let e = L.value;
+			if (!e) return;
+			let t = E.threshold, n = Math.abs(e.x), r = Math.abs(e.y), i = n >= r && n > t ? e.x > 0 ? "accept" : "reject" : r > n && e.y < -t ? "skip" : null;
+			i && F(i), L.value = null;
+		}
+		let V = r(() => {
+			let e = L.value;
+			if (!e) return {
+				accept: 0,
+				reject: 0,
+				skip: 0
+			};
+			let t = (e) => Math.min(1, Math.max(0, e / E.threshold));
+			return {
+				accept: t(e.x),
+				reject: t(-e.x),
+				skip: t(-e.y)
+			};
+		}), H = r(() => {
+			let e = L.value;
+			return e ? {
+				transform: `translate(${e.x}px, ${e.y}px) rotate(${e.x / 24}deg)`,
+				transition: "none"
+			} : void 0;
+		});
+		function U(e) {
+			let t = {
+				ArrowRight: "accept",
+				ArrowLeft: "reject",
+				ArrowUp: "skip"
+			};
+			t[e.key] ? (e.preventDefault(), F(t[e.key])) : (e.key === "Backspace" || (e.ctrlKey || e.metaKey) && e.key === "z") && (e.preventDefault(), I());
+		}
+		let W = r(() => D.value.slice(0, 3));
+		return (r, u) => (p(), a("div", {
+			class: "bless-deck",
+			style: f({
+				"--bless-deck-x": P.value[0],
+				"--bless-deck-y": P.value[1]
+			})
+		}, [
+			o("div", {
+				class: "bless-deck__stage",
+				tabindex: "0",
+				role: "group",
+				"aria-roledescription": "deck of cards",
+				"aria-label": `${l.label}, ${D.value.length} left. Right arrow ${k.value.accept}, left arrow ${k.value.reject}, up arrow ${k.value.skip}, Backspace ${k.value.undo}.`,
+				onKeydown: U
+			}, [c(n, { name: "bless-deck" }, {
+				default: y(() => [(p(!0), a(t, null, h(W.value, (e, n) => (p(), a("div", {
+					key: l.rowKey ? l.rowKey(e) : D.value.length - n,
+					class: d(["bless-deck__card", { "bless-deck__card--top": n === 0 }]),
+					style: f(n === 0 ? H.value : { "--bless-deck-depth": n }),
+					"aria-hidden": n > 0 || void 0,
+					inert: n > 0 || void 0,
+					onPointerdown: (e) => n === 0 && R(e),
+					onPointermove: (e) => n === 0 && z(e),
+					onPointerup: (e) => n === 0 && B(),
+					onPointercancel: (e) => n === 0 && (L.value = null)
+				}, [g(r.$slots, "card", {
+					item: e,
+					index: n
+				}, () => [s(_(e), 1)]), n === 0 ? (p(), a(t, { key: 0 }, [
+					o("span", {
+						class: "bless-deck__stamp bless-deck__stamp--accept",
+						"aria-hidden": "true",
+						style: f({ opacity: V.value.accept })
+					}, _(k.value.accept), 5),
+					o("span", {
+						class: "bless-deck__stamp bless-deck__stamp--reject",
+						"aria-hidden": "true",
+						style: f({ opacity: V.value.reject })
+					}, _(k.value.reject), 5),
+					o("span", {
+						class: "bless-deck__stamp bless-deck__stamp--skip",
+						"aria-hidden": "true",
+						style: f({ opacity: V.value.skip })
+					}, _(k.value.skip), 5)
+				], 64)) : i("", !0)], 46, x))), 128))]),
+				_: 3
+			}), D.value.length ? i("", !0) : (p(), a("div", S, [g(r.$slots, "empty", {}, () => [u[3] ||= s("No cards left", -1)])]))], 40, b),
+			l.controls ? (p(), a("div", C, [
+				c(e, {
+					variant: "outline",
+					disabled: !j.value,
+					onClick: I
+				}, {
+					default: y(() => [s(_(k.value.undo), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				c(e, {
+					variant: "outline",
+					disabled: !D.value.length,
+					onClick: u[0] ||= (e) => F("reject")
+				}, {
+					default: y(() => [s(_(k.value.reject), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				c(e, {
+					variant: "outline",
+					disabled: !D.value.length,
+					onClick: u[1] ||= (e) => F("skip")
+				}, {
+					default: y(() => [s(_(k.value.skip), 1)]),
+					_: 1
+				}, 8, ["disabled"]),
+				c(e, {
+					disabled: !D.value.length,
+					onClick: u[2] ||= (e) => F("accept")
+				}, {
+					default: y(() => [s(_(k.value.accept), 1)]),
+					_: 1
+				}, 8, ["disabled"])
+			])) : i("", !0),
+			o("span", w, _(M.value), 1)
+		], 4));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/BlessTimer.css

@@ -0,0 +1 @@
+.bless-timer{align-items:center;gap:var(--bless-space-2);font-family:var(--bless-font-sans);color:var(--bless-color-text);flex-direction:column;display:inline-flex;position:relative}.bless-timer__clock{font-size:calc(var(--bless-text-xl) * 1.6);font-variant-numeric:tabular-nums;font-weight:600;line-height:1}.bless-timer__phase{font-size:var(--bless-text-sm);color:var(--bless-color-text-muted)}.bless-timer--done .bless-timer__clock{color:var(--bless-color-danger-text)}.bless-timer__controls{gap:var(--bless-space-2);display:inline-flex}.bless-timer__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessTimer.js

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

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

@@ -0,0 +1,56 @@
+export interface BlessTimerPhase {
+    label: string;
+    seconds: number;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    /** `countdown` from `duration`, `stopwatch` up from 0, `interval` through `phases` */
+    mode?: "countdown" | "stopwatch" | "interval";
+    /** seconds, for a countdown */
+    duration?: number;
+    /** for `interval`: e.g. `[{ label: "Work", seconds: 25 }, { label: "Rest", seconds: 5 }]` */
+    phases?: BlessTimerPhase[];
+    /** how many times the phases repeat */
+    rounds?: number;
+    autostart?: boolean;
+    /** show Start / Pause / Reset */
+    controls?: boolean;
+    label?: string;
+} & {
+    running?: boolean;
+}, {
+    start: () => void;
+    pause: () => void;
+    reset: () => void;
+    toggle: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:running": (value: boolean) => any;
+    finish: () => any;
+    phase: (phase: BlessTimerPhase, index: number, round: number) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    /** `countdown` from `duration`, `stopwatch` up from 0, `interval` through `phases` */
+    mode?: "countdown" | "stopwatch" | "interval";
+    /** seconds, for a countdown */
+    duration?: number;
+    /** for `interval`: e.g. `[{ label: "Work", seconds: 25 }, { label: "Rest", seconds: 5 }]` */
+    phases?: BlessTimerPhase[];
+    /** how many times the phases repeat */
+    rounds?: number;
+    autostart?: boolean;
+    /** show Start / Pause / Reset */
+    controls?: boolean;
+    label?: string;
+} & {
+    running?: boolean;
+}> & Readonly<{
+    "onUpdate:running"?: ((value: boolean) => any) | undefined;
+    onFinish?: (() => any) | undefined;
+    onPhase?: ((phase: BlessTimerPhase, index: number, round: number) => any) | undefined;
+}>, {
+    label: string;
+    mode: "countdown" | "stopwatch" | "interval";
+    duration: number;
+    rounds: number;
+    controls: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessTimer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,130 @@
+import e from "./BlessButton.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, toDisplayString as m, useModel as h, watch as g, withCtx as _ } from "vue";
+//#region src/components/BlessTimer.vue?vue&type=script&setup=true&lang.ts
+var v = ["aria-label"], y = {
+	key: 0,
+	class: "bless-timer__phase"
+}, b = { class: "bless-timer__clock" }, x = {
+	key: 1,
+	class: "bless-timer__controls"
+}, S = {
+	class: "bless-timer__live",
+	"aria-live": "polite"
+}, C = /*@__PURE__*/ c({
+	name: "BlessTimer",
+	__name: "BlessTimer",
+	props: /*@__PURE__*/ l({
+		mode: { default: "countdown" },
+		duration: { default: 60 },
+		phases: {},
+		rounds: { default: 1 },
+		autostart: { type: Boolean },
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Timer" }
+	}, {
+		running: {
+			type: Boolean,
+			default: !1
+		},
+		runningModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["finish", "phase"], ["update:running"]),
+	setup(c, { expose: l, emit: C }) {
+		let w = c, T = h(c, "running"), E = C, D = p(0), O = p(!1), k = p(""), A = 0, j = 0, M, N = t(() => w.mode === "interval" ? w.phases ?? [] : [{
+			label: "",
+			seconds: w.duration
+		}]), P = t(() => w.mode === "interval" ? w.rounds : 1), F = t(() => N.value.reduce((e, t) => e + t.seconds, 0) * 1e3), I = t(() => F.value * P.value), L = t(() => {
+			if (w.mode === "stopwatch") return {
+				i: 0,
+				round: 1,
+				left: D.value
+			};
+			let e = Math.min(D.value, I.value), t = F.value ? e >= I.value ? F.value : e % F.value : 0, n = Math.min(P.value, Math.floor(e / (F.value || 1)) + 1), r = 0;
+			for (let i = 0; i < N.value.length; i++) {
+				let a = N.value[i].seconds * 1e3;
+				if (t < r + a || i === N.value.length - 1) return {
+					i,
+					round: e >= I.value ? P.value : n,
+					left: Math.max(0, r + a - t)
+				};
+				r += a;
+			}
+			return {
+				i: 0,
+				round: 1,
+				left: 0
+			};
+		}), R = (e) => String(e).padStart(2, "0"), z = (e, t) => {
+			let n = t ? Math.floor(e / 1e3) : Math.ceil(e / 1e3), r = Math.floor(n / 3600), i = Math.floor(n % 3600 / 60);
+			return `${r ? `${r}:${R(i)}` : R(i)}:${R(n % 60)}`;
+		}, B = t(() => z(L.value.left, w.mode === "stopwatch")), V = t(() => w.mode === "interval" ? N.value[L.value.i] : void 0), H = t(() => V.value ? `${V.value.label} · round ${L.value.round} of ${P.value}` : "");
+		function U() {
+			D.value = A + (performance.now() - j), w.mode !== "stopwatch" && D.value >= I.value && (D.value = I.value, W(), O.value = !0, T.value = !1, k.value = "Finished", E("finish"));
+		}
+		function W() {
+			clearInterval(M), M = void 0;
+		}
+		function G() {
+			M || w.mode !== "stopwatch" && !I.value || (O.value && J(), A = D.value, j = performance.now(), M = setInterval(U, 100));
+		}
+		function K() {
+			T.value = !0;
+		}
+		function q() {
+			T.value = !1;
+		}
+		function J() {
+			W(), D.value = 0, A = 0, O.value = !1, k.value = "", T.value && G();
+		}
+		return g(T, (e) => {
+			e ? G() : M && (U(), W());
+		}, { immediate: !1 }), w.autostart && (T.value = !0), g(() => [
+			w.mode,
+			w.duration,
+			w.phases,
+			w.rounds
+		], () => J()), g(() => `${L.value.i}:${L.value.round}`, (e, t) => {
+			let n = N.value[L.value.i];
+			t !== void 0 && n && w.mode === "interval" && T.value && (k.value = `${n.label}, round ${L.value.round} of ${P.value}`, E("phase", n, L.value.i, L.value.round));
+		}), d(W), l({
+			start: K,
+			pause: q,
+			reset: J,
+			toggle: () => T.value = !T.value
+		}), (t, l) => (f(), i("div", {
+			class: u(["bless-timer", { "bless-timer--done": O.value }]),
+			role: "timer",
+			"aria-label": c.label
+		}, [
+			H.value ? (f(), i("span", y, m(H.value), 1)) : r("", !0),
+			a("span", b, m(B.value), 1),
+			c.controls ? (f(), i("span", x, [T.value ? (f(), n(e, {
+				key: 1,
+				variant: "outline",
+				onClick: q
+			}, {
+				default: _(() => [...l[0] ||= [o("Pause", -1)]]),
+				_: 1
+			})) : (f(), n(e, {
+				key: 0,
+				onClick: K
+			}, {
+				default: _(() => [o(m(D.value && !O.value ? "Resume" : "Start"), 1)]),
+				_: 1
+			})), s(e, {
+				variant: "ghost",
+				disabled: !D.value,
+				onClick: J
+			}, {
+				default: _(() => [...l[1] ||= [o("Reset", -1)]]),
+				_: 1
+			}, 8, ["disabled"])])) : r("", !0),
+			a("span", S, m(k.value), 1)
+		], 10, v));
+	}
+});
+//#endregion
+export { C as default };

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;

package/dist/composables/cropBox.js

@@ -0,0 +1,39 @@
+//#region src/composables/cropBox.ts
+var e = .05, t = (e, t, n) => Math.min(Math.max(e, t), n);
+function n(e, t = .9) {
+	let n = t, r = t;
+	return e > 0 && (e > 1 ? r = n / e : n = r * e), {
+		l: (1 - n) / 2,
+		t: (1 - r) / 2,
+		r: (1 + n) / 2,
+		b: (1 + r) / 2
+	};
+}
+function r(e, n, r) {
+	let i = e.r - e.l, a = e.b - e.t, o = t(e.l + n, 0, 1 - i), s = t(e.t + r, 0, 1 - a);
+	return {
+		l: o,
+		t: s,
+		r: o + i,
+		b: s + a
+	};
+}
+function i(n, r, i, a, o = 0) {
+	let s = { ...n };
+	if (r.includes("w") && (s.l = t(i, 0, n.r - e)), r.includes("e") && (s.r = t(i, n.l + e, 1)), r.includes("n") && (s.t = t(a, 0, n.b - e)), r.includes("s") && (s.b = t(a, n.t + e, 1)), o > 0 && r.length === 2) {
+		let e = s.r - s.l, t = s.b - s.t, n = e / t > o ? t * o : e, i = e / t > o ? t : e / o;
+		r.includes("e") ? s.r = s.l + n : s.l = s.r - n, r.includes("s") ? s.b = s.t + i : s.t = s.b - i;
+	}
+	return s;
+}
+function a(n, r) {
+	let i = n.r - n.l, a = n.b - n.t, o = t((Math.min(i, a) + r) / Math.min(i, a), e / Math.min(i, a), 1 / Math.max(i, a)), s = i * o, c = a * o, l = t((n.l + n.r) / 2, s / 2, 1 - s / 2), u = t((n.t + n.b) / 2, c / 2, 1 - c / 2);
+	return {
+		l: l - s / 2,
+		t: u - c / 2,
+		r: l + s / 2,
+		b: u + c / 2
+	};
+}
+//#endregion
+export { e as MIN, n as initialBox, r as moveBox, i as resizeBox, a as scaleBox };