blessing-ui 0.1.0 → 0.2.0

package/dist/components/BlessRadialMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,146 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { keepInside as t, polar as n, sectorAt as r } from "../composables/radial.js";
+import { Fragment as i, computed as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useId as S, useModel as C, watch as w, withModifiers as T } from "vue";
+//#region src/components/BlessRadialMenu.vue?vue&type=script&setup=true&lang.ts
+var E = ["id", "aria-label"], ee = {
+	class: "bless-radial__core",
+	"aria-hidden": "true"
+}, te = [
+	"aria-label",
+	"aria-disabled",
+	"tabindex",
+	"onClick",
+	"onPointerenter"
+], D = /*@__PURE__*/ l({
+	name: "BlessRadialMenu",
+	inheritAttrs: !1,
+	__name: "BlessRadialMenu",
+	props: /*@__PURE__*/ u({
+		items: {},
+		radius: { default: 84 },
+		holdMs: { default: 450 },
+		disabled: { type: Boolean },
+		label: { default: "Actions" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["select"], ["update:open"]),
+	setup(l, { emit: u }) {
+		let D = l, O = C(l, "open"), k = u, A = S(), j = _(), M = _(), N = _({
+			x: 0,
+			y: 0
+		}), P = _(null), F = !1, I, L = null, R = a(() => D.radius + 22), z = a(() => D.items.map((e, t) => n(t, D.items.length, D.radius))), B = a(() => D.items.map((e, t) => e.disabled ? -1 : t).filter((e) => e >= 0));
+		function V(e, n, r = !1) {
+			!D.disabled && D.items.length && (N.value = t(e, n, R.value, window.innerWidth, window.innerHeight), P.value = null, F = r, O.value = !0);
+		}
+		function H(e = !0) {
+			F = !1, O.value && (O.value = !1, e && (j.value?.querySelector("[tabindex],button,a,input") ?? j.value)?.focus?.());
+		}
+		function U(e) {
+			let t = D.items[e];
+			t && !t.disabled && (k("select", t), H());
+		}
+		function W(e) {
+			D.disabled || (e.preventDefault(), clearTimeout(I), O.value || V(e.clientX, e.clientY));
+		}
+		function G(e) {
+			D.disabled || e.pointerType === "mouse" || (L = {
+				x: e.clientX,
+				y: e.clientY
+			}, clearTimeout(I), I = setTimeout(() => {
+				L && V(L.x, L.y, !0);
+			}, D.holdMs));
+		}
+		function K(e) {
+			L && !O.value && Math.hypot(e.clientX - L.x, e.clientY - L.y) > 8 && (clearTimeout(I), L = null);
+		}
+		function q() {
+			clearTimeout(I), L = null;
+		}
+		function J(e) {
+			if (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") {
+				e.preventDefault();
+				let t = e.target.getBoundingClientRect();
+				V(t.left + t.width / 2, t.top + t.height / 2);
+			}
+		}
+		function Y(e) {
+			if (!O.value) return;
+			let t = r(e.clientX - N.value.x, e.clientY - N.value.y, D.items.length);
+			F && (P.value = t !== null && !D.items[t]?.disabled ? t : null);
+		}
+		function X() {
+			O.value && F && (F = !1, L = null, P.value !== null && U(P.value));
+		}
+		function Z(t) {
+			let n = e(t), r = B.value;
+			if (!r.length) return;
+			let i = P.value === null ? -1 : r.indexOf(P.value);
+			n === "ArrowRight" || n === "ArrowDown" ? (t.preventDefault(), Q(r[(i + 1) % r.length])) : n === "ArrowLeft" || n === "ArrowUp" ? (t.preventDefault(), Q(r[(i - 1 + r.length) % r.length])) : t.key === "Home" ? (t.preventDefault(), Q(r[0])) : t.key === "End" ? (t.preventDefault(), Q(r.at(-1))) : t.key === "Escape" ? (t.preventDefault(), t.stopPropagation(), H()) : t.key === "Tab" && H(!1);
+		}
+		function Q(e) {
+			P.value = e, f(() => M.value?.querySelectorAll("[role=\"menuitem\"]")[e]?.focus());
+		}
+		w(O, async (e) => {
+			await f();
+			let t = M.value;
+			t && typeof t.showPopover == "function" && (e ? (t.matches(":popover-open") || t.showPopover(), window.addEventListener("pointermove", Y), window.addEventListener("pointerup", X), window.addEventListener("pointercancel", X), window.addEventListener("pointerdown", $, !0), F || Q(B.value[0] ?? 0)) : (t.matches(":popover-open") && t.hidePopover(), window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", X), window.removeEventListener("pointercancel", X), window.removeEventListener("pointerdown", $, !0)));
+		});
+		function $(e) {
+			!M.value?.contains(e.target) && !F && H(!1);
+		}
+		return h(() => {
+			clearTimeout(I), window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", X), window.removeEventListener("pointercancel", X), window.removeEventListener("pointerdown", $, !0);
+		}), (e, t) => (g(), o(i, null, [s("div", d({
+			ref_key: "area",
+			ref: j,
+			class: "bless-radial__area"
+		}, e.$attrs, {
+			onContextmenu: W,
+			onPointerdown: G,
+			onPointermove: K,
+			onPointerup: q,
+			onPointercancel: q,
+			onKeydown: J
+		}), [y(e.$slots, "default")], 16), s("div", {
+			id: x(A),
+			ref_key: "panel",
+			ref: M,
+			popover: "manual",
+			class: "bless-radial",
+			role: "menu",
+			"aria-label": l.label,
+			style: m({
+				left: `${N.value.x - R.value}px`,
+				top: `${N.value.y - R.value}px`,
+				width: `${R.value * 2}px`,
+				height: `${R.value * 2}px`
+			}),
+			onKeydown: Z,
+			onContextmenu: t[0] ||= T(() => {}, ["prevent"])
+		}, [s("span", ee, b(P.value === null ? "" : l.items[P.value]?.label), 1), (g(!0), o(i, null, v(l.items, (t, n) => (g(), o("button", {
+			key: t.id,
+			type: "button",
+			role: "menuitem",
+			class: p(["bless-radial__item", { "bless-radial__item--on": P.value === n }]),
+			style: m({
+				left: `calc(50% + ${z.value[n].x}px)`,
+				top: `calc(50% + ${z.value[n].y}px)`
+			}),
+			"aria-label": t.label,
+			"aria-disabled": t.disabled || void 0,
+			tabindex: P.value === n ? 0 : -1,
+			onClick: (e) => U(n),
+			onPointerenter: (e) => !t.disabled && !x(F) && (P.value = n)
+		}, [y(e.$slots, "item", {
+			item: t,
+			index: n
+		}, () => [c(b(t.icon ?? t.label.slice(0, 1)), 1)])], 46, te))), 128))], 44, E)], 64));
+	}
+});
+//#endregion
+export { D as default };

package/dist/components/BlessShortcutRecorder.css

@@ -0,0 +1 @@
+.bless-shortcut{gap:var(--bless-space-1);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);flex-direction:column;display:inline-flex;position:relative}.bless-shortcut__btn{min-width:160px;min-height:36px;padding:var(--bless-space-1) var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:var(--bless-color-text);font:inherit;cursor:pointer;align-items:center;display:inline-flex}.bless-shortcut__btn:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-shortcut--rec .bless-shortcut__btn{border-color:var(--bless-color-accent)}.bless-shortcut--bad .bless-shortcut__btn{border-color:var(--bless-color-danger-text)}.bless-shortcut__btn:disabled{opacity:.5;cursor:not-allowed}.bless-shortcut__hint{color:var(--bless-color-text-muted)}.bless-shortcut__error{color:var(--bless-color-danger-text);font-size:var(--bless-text-xs);margin:0}.bless-shortcut__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessShortcutRecorder.js

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

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

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    /** combos already taken, as a list or `{ "Ctrl+K": "Open search" }` to say by what */
+    taken?: string[] | Record<string, string>;
+    /** accept a bare key such as `G`; off asks for Ctrl, Alt or Meta, or a function key */
+    allowBare?: boolean;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+};
+declare function start(): void;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    start: typeof start;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    conflict: (combo: string, by: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onConflict?: ((combo: string, by: string | undefined) => any) | undefined;
+}>, {
+    label: string;
+    placeholder: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessShortcutRecorder.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,116 @@
+import e from "./BlessKbd.js";
+import { isModifierKey as t, shortcutFromEvent as n, splitShortcut as r } from "../composables/shortcut.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, ref as p, toDisplayString as m, unref as h, useId as g, useModel as _ } from "vue";
+//#region src/components/BlessShortcutRecorder.vue?vue&type=script&setup=true&lang.ts
+var v = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid"
+], y = {
+	key: 0,
+	class: "bless-shortcut__hint"
+}, b = {
+	key: 2,
+	class: "bless-shortcut__hint"
+}, x = ["id"], S = {
+	class: "bless-shortcut__live",
+	"aria-live": "polite"
+}, C = /*@__PURE__*/ l({
+	name: "BlessShortcutRecorder",
+	__name: "BlessShortcutRecorder",
+	props: /*@__PURE__*/ u({
+		taken: {},
+		allowBare: { type: Boolean },
+		disabled: { type: Boolean },
+		label: { default: "Shortcut" },
+		placeholder: { default: "Not set" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["conflict"], ["update:modelValue"]),
+	setup(l, { expose: u, emit: C }) {
+		let w = l, T = _(l, "modelValue"), E = C, D = g(), O = p(!1), k = p(""), A = p(""), j = p(""), M = p(), N = (e) => Array.isArray(w.taken) ? w.taken.includes(e) ? "" : void 0 : w.taken?.[e], P = i(() => O.value ? k.value : T.value), F = i(() => P.value ? r(P.value) : []);
+		function I() {
+			w.disabled || (O.value = !0, k.value = "", A.value = "", j.value = "Recording. Press the keys you want. Escape cancels, Backspace clears.");
+		}
+		function L(e = "") {
+			O.value = !1, k.value = "", j.value = e;
+		}
+		let R = (e) => !w.allowBare && !/^(Ctrl|Alt|Meta)\+/.test(e.replace(/Shift\+/, "")) && !/^F\d{1,2}$/.test(e.split("+").at(-1));
+		function z(e) {
+			if (!O.value) {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), I());
+				return;
+			}
+			if (e.preventDefault(), e.stopPropagation(), t(e)) {
+				k.value = [
+					e.ctrlKey && "Ctrl",
+					e.altKey && "Alt",
+					e.shiftKey && "Shift",
+					e.metaKey && "Meta"
+				].filter(Boolean).join("+");
+				return;
+			}
+			let r = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey;
+			if (r && e.key === "Escape") return L("Cancelled");
+			if (r && (e.key === "Backspace" || e.key === "Delete")) return T.value = "", A.value = "", L("Cleared");
+			let i = n(e);
+			if (R(i)) {
+				k.value = i, A.value = `Add Ctrl, Alt or Meta to ${i}`, j.value = A.value;
+				return;
+			}
+			let a = N(i);
+			if (a !== void 0 && i !== T.value) {
+				k.value = i, A.value = a ? `${i} is already used by ${a}` : `${i} is already taken`, j.value = A.value, E("conflict", i, a || void 0);
+				return;
+			}
+			T.value = i, A.value = "", L(`Set to ${i}`);
+		}
+		function B(e) {
+			O.value && t(e) && !A.value && (k.value = [
+				e.ctrlKey && "Ctrl",
+				e.altKey && "Alt",
+				e.shiftKey && "Shift",
+				e.metaKey && "Meta"
+			].filter(Boolean).join("+"));
+		}
+		return u({
+			start: I,
+			focus: () => M.value?.focus()
+		}), (t, n) => (f(), s("div", { class: d(["bless-shortcut", {
+			"bless-shortcut--rec": O.value,
+			"bless-shortcut--bad": !!A.value
+		}]) }, [
+			c("button", {
+				id: h(D),
+				ref_key: "btn",
+				ref: M,
+				type: "button",
+				class: "bless-shortcut__btn",
+				disabled: l.disabled,
+				"aria-label": `${l.label}: ${T.value || "not set"}. Press Enter to change.`,
+				"aria-describedby": A.value ? `${h(D)}-err` : void 0,
+				"aria-invalid": !!A.value || void 0,
+				onClick: n[0] ||= (e) => O.value ? L() : I(),
+				onKeydown: z,
+				onKeyup: B,
+				onBlur: n[1] ||= (e) => O.value && L()
+			}, [O.value && !F.value.length ? (f(), s("span", y, "Press keys…")) : F.value.length ? (f(), a(e, {
+				key: 1,
+				keys: F.value
+			}, null, 8, ["keys"])) : (f(), s("span", b, m(l.placeholder), 1))], 40, v),
+			A.value ? (f(), s("p", {
+				key: 0,
+				id: `${h(D)}-err`,
+				class: "bless-shortcut__error",
+				role: "alert"
+			}, m(A.value), 9, x)) : o("", !0),
+			c("span", S, m(j.value), 1)
+		], 2));
+	}
+});
+//#endregion
+export { C as default };

package/dist/components/BlessSliderCaptcha.css

@@ -0,0 +1 @@
+.bless-captcha{max-width:360px;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-captcha__stage{border:var(--bless-border-width) solid var(--bless-color-border);background-color:var(--bless-color-surface);background-image:conic-gradient(var(--bless-color-border) 25%, transparent 0 50%, var(--bless-color-border) 0 75%, transparent 0);-webkit-user-select:none;user-select:none;background-size:24px 24px;position:relative;overflow:hidden}.bless-captcha__gap{background:color-mix(in srgb, var(--bless-color-text) 55%, transparent);box-shadow:inset 0 0 0 2px var(--bless-color-bg);position:absolute}.bless-captcha__piece{background-color:var(--bless-color-surface);background-image:conic-gradient(var(--bless-color-border) 25%, transparent 0 50%, var(--bless-color-border) 0 75%, transparent 0);border:2px solid var(--bless-color-bg);outline:1px solid var(--bless-color-text);box-shadow:var(--bless-shadow-plate);transition:left var(--bless-duration-slow) var(--bless-ease-out);background-size:24px 24px;position:absolute}.bless-captcha__piece--drag{transition:none}.bless-captcha__track{height:40px;margin-top:var(--bless-space-2);background:var(--bless-color-surface);border:var(--bless-border-width) solid var(--bless-color-border);color:var(--bless-color-text-muted);justify-content:center;align-items:center;display:flex;position:relative}.bless-captcha__handle{background:var(--bless-color-text);width:44px;color:var(--bless-color-on-text);font:inherit;cursor:grab;touch-action:none;transition:left var(--bless-duration-slow) var(--bless-ease-out), translate var(--bless-duration-slow) var(--bless-ease-out);border:0;position:absolute;top:-1px;bottom:-1px}.bless-captcha__handle--drag{cursor:grabbing;transition:none}.bless-captcha__handle:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}.bless-captcha--ok .bless-captcha__handle{background:var(--bless-color-accent);color:var(--bless-color-on-accent);cursor:default}.bless-captcha--fail .bless-captcha__track{border-color:var(--bless-color-danger-text)}.bless-captcha__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.bless-captcha__piece,.bless-captcha__handle{transition:none}}

package/dist/components/BlessSliderCaptcha.js

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

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    /** background picture; without it a checker pattern is drawn */
+    src?: string;
+    /** how close counts, as a fraction of the track (0.03 = 3%) */
+    tolerance?: number;
+    label?: string;
+};
+declare function reset(): void;
+type __VLS_ModelProps = {
+    /** true once solved; the widget then stays locked until `reset()` */
+    "verified"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    verify: (info: {
+        ms: number;
+    }) => any;
+    fail: () => any;
+    "update:verified": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onVerify?: ((info: {
+        ms: number;
+    }) => any) | undefined;
+    onFail?: (() => any) | undefined;
+    "onUpdate:verified"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    tolerance: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessSliderCaptcha.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,141 @@
+import { createElementBlock as e, createElementVNode as t, defineComponent as n, mergeModels as r, normalizeClass as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, toDisplayString as u, unref as d, useId as f, useModel as p } from "vue";
+//#region src/components/BlessSliderCaptcha.vue?vue&type=script&setup=true&lang.ts
+var m = ["id"], h = [
+	"aria-labelledby",
+	"aria-valuenow",
+	"aria-disabled"
+], g = { "aria-hidden": "true" }, _ = {
+	class: "bless-captcha__live",
+	"aria-live": "polite"
+}, v = .16, y = /*@__PURE__*/ n({
+	name: "BlessSliderCaptcha",
+	__name: "BlessSliderCaptcha",
+	props: /*@__PURE__*/ r({
+		src: {},
+		tolerance: { default: .03 },
+		label: { default: "Slide the piece into the gap" }
+	}, {
+		verified: {
+			type: Boolean,
+			default: !1
+		},
+		verifiedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ r(["verify", "fail"], ["update:verified"]),
+	setup(n, { expose: r, emit: y }) {
+		let b = n, x = p(n, "verified"), S = y, C = f(), w = l(), T = l(), E = l(), D = l(320), O = () => Math.round(D.value / 2), k = l(0), A = l({
+			at: .6,
+			y: .3
+		}), j = l(!1), M = l(!1), N = l(""), P = 0;
+		function F() {
+			A.value = {
+				at: .35 + Math.random() * .55,
+				y: .1 + Math.random() * .5
+			};
+		}
+		let I;
+		s(() => {
+			F();
+			let e = w.value;
+			e && (D.value = e.clientWidth || 320, typeof ResizeObserver < "u" && (I = new ResizeObserver(() => D.value = e.clientWidth || 320), I.observe(e)));
+		}), o(() => I?.disconnect());
+		let L = () => D.value * v, R = () => A.value.at * D.value * .84, z = () => A.value.y * (O() - L()), B = () => b.src ? {
+			backgroundImage: `url(${b.src})`,
+			backgroundSize: `${D.value}px ${O()}px`
+		} : {};
+		function V() {
+			x.value || (Math.abs(k.value - A.value.at) <= b.tolerance ? (x.value = !0, k.value = A.value.at, N.value = "Verified", S("verify", { ms: Math.round(performance.now() - P) })) : (M.value = !0, N.value = "Not quite, try again", S("fail"), k.value = 0, F(), setTimeout(() => M.value = !1, 400)));
+		}
+		function H() {
+			x.value = !1, M.value = !1, k.value = 0, N.value = "", F();
+		}
+		r({ reset: H });
+		let U = {
+			x: 0,
+			f: 0
+		};
+		function W(e) {
+			x.value || e.button || (e.currentTarget.setPointerCapture?.(e.pointerId), U = {
+				x: e.clientX,
+				f: k.value
+			}, j.value = !0, (!P || k.value === 0) && (P = performance.now()));
+		}
+		function G(e) {
+			if (!j.value) return;
+			let t = T.value?.clientWidth || 0, n = E.value?.offsetWidth || 0, r = t && n ? t - n : (w.value?.clientWidth || D.value) - L();
+			k.value = Math.min(1, Math.max(0, U.f + (e.clientX - U.x) / r));
+		}
+		function K() {
+			j.value && (j.value = !1, V());
+		}
+		function q(e) {
+			if (x.value) return;
+			let t = e.shiftKey ? .1 : .01;
+			e.key === "ArrowRight" || e.key === "ArrowLeft" ? (e.preventDefault(), k.value || (P = performance.now()), k.value = Math.min(1, Math.max(0, k.value + (e.key === "ArrowRight" ? t : -t)))) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), V());
+		}
+		return (r, o) => (c(), e("div", { class: i(["bless-captcha", {
+			"bless-captcha--ok": x.value,
+			"bless-captcha--fail": M.value
+		}]) }, [
+			t("div", {
+				ref_key: "stage",
+				ref: w,
+				class: "bless-captcha__stage",
+				style: a({
+					height: `${O()}px`,
+					...B()
+				}),
+				"aria-hidden": "true"
+			}, [t("span", {
+				class: "bless-captcha__gap",
+				style: a({
+					width: `${L()}px`,
+					height: `${L()}px`,
+					left: `${R()}px`,
+					top: `${z()}px`
+				})
+			}, null, 4), t("span", {
+				class: i(["bless-captcha__piece", { "bless-captcha__piece--drag": j.value }]),
+				style: a({
+					width: `${L()}px`,
+					height: `${L()}px`,
+					top: `${z()}px`,
+					left: `${k.value * (D.value - L())}px`,
+					...B(),
+					backgroundPosition: `-${R()}px -${z()}px`
+				})
+			}, null, 6)], 4),
+			t("div", {
+				ref_key: "track",
+				ref: T,
+				class: "bless-captcha__track"
+			}, [t("span", {
+				id: `${d(C)}-l`,
+				class: "bless-captcha__label"
+			}, u(x.value ? "Verified" : n.label), 9, m), t("button", {
+				ref_key: "handleEl",
+				ref: E,
+				type: "button",
+				class: i(["bless-captcha__handle", { "bless-captcha__handle--drag": j.value }]),
+				role: "slider",
+				"aria-labelledby": `${d(C)}-l`,
+				"aria-valuemin": "0",
+				"aria-valuemax": "100",
+				"aria-valuenow": Math.round(k.value * 100),
+				"aria-disabled": x.value || void 0,
+				style: a({
+					left: `${k.value * 100}%`,
+					translate: `${-k.value * 100}% 0`
+				}),
+				onPointerdown: W,
+				onPointermove: G,
+				onPointerup: K,
+				onPointercancel: K,
+				onKeydown: q
+			}, [t("span", g, u(x.value ? "✓" : "→"), 1)], 46, h)], 512),
+			t("span", _, u(N.value), 1)
+		], 2));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/BlessSortable.css

@@ -0,0 +1 @@
+.bless-sortable{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-sortable__list{gap:var(--bless-space-2);margin:0;padding:0;list-style:none;display:grid}.bless-sortable__list--grid{grid-template-columns:repeat(var(--bless-sortable-cols), minmax(0, 1fr))}.bless-sortable__item{align-items:center;gap:var(--bless-space-2);padding:var(--bless-space-2) var(--bless-space-3);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);display:flex}.bless-sortable__item--drag{opacity:.4}.bless-sortable__item--held{border-color:var(--bless-color-accent)}.bless-sortable__item--before{box-shadow:inset 0 2px 0 var(--bless-color-accent)}.bless-sortable__item--after{box-shadow:inset 0 -2px 0 var(--bless-color-accent)}.bless-sortable__list--grid .bless-sortable__item--before{box-shadow:inset 2px 0 0 var(--bless-color-accent)}.bless-sortable__list--grid .bless-sortable__item--after,[dir=rtl] .bless-sortable__list--grid .bless-sortable__item--before{box-shadow:inset -2px 0 0 var(--bless-color-accent)}[dir=rtl] .bless-sortable__list--grid .bless-sortable__item--after{box-shadow:inset 2px 0 0 var(--bless-color-accent)}.bless-sortable__grip{padding:var(--bless-space-1) var(--bless-space-2);color:var(--bless-color-text-muted);font:inherit;letter-spacing:-3px;cursor:grab;touch-action:none;background:0 0;border:0;flex:none}.bless-sortable__grip:active{cursor:grabbing}.bless-sortable__grip:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-sortable__body{flex:1;min-width:0}.bless-sortable__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessSortable.js

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

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

@@ -0,0 +1,33 @@
+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, index: number) => string | number;
+        label?: string;
+        /** lay the items out in this many equal columns (a grid); 1 is a list */
+        columns?: number;
+    } & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        onMove?: ((from: number, to: number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {
+            item: T;
+            index: number;
+        }) => any;
+    };
+    emit: ((evt: "move", from: number, to: number) => void) & ((event: "update:modelValue", value: T[]) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/BlessSortable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { logicalKey as e } from "../composables/rtl.js";
+import { moveItem as t, useSortable as n } from "../composables/useSortable.js";
+import { Fragment as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, useModel as y } from "vue";
+//#region src/components/BlessSortable.vue?vue&type=script&setup=true&lang.ts
+var b = ["aria-label"], x = [
+	"aria-label",
+	"aria-pressed",
+	"onPointerdown",
+	"onKeydown"
+], S = { class: "bless-sortable__body" }, C = {
+	class: "bless-sortable__live",
+	"aria-live": "polite"
+}, w = /*@__PURE__*/ s({
+	name: "BlessSortable",
+	__name: "BlessSortable",
+	props: /*@__PURE__*/ c({
+		rowKey: {},
+		label: { default: "Sortable" },
+		columns: { default: 1 }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["move"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let w = y(s, "modelValue"), T = c, E = p(), D = p(""), O = `${v()}-hint`, k = p(null), A = [], j = 0;
+		function M(e, n) {
+			e === n || n < 0 || n >= w.value.length || (w.value = t(w.value, e, n), T("move", e, n), D.value = `Moved to position ${n + 1} of ${w.value.length}`);
+		}
+		let N = n(E, M), { drag: P, over: F } = N, I = () => E.value?.querySelectorAll(".bless-sortable__grip") ?? [], L = (e) => l(() => I()[e]?.focus());
+		function R(t, n) {
+			let r = e(n);
+			if (n.key === " " || n.key === "Enter") n.preventDefault(), k.value == null ? (k.value = t, A = w.value.slice(), j = t, D.value = `Grabbed item ${t + 1} of ${w.value.length}. Arrow keys move it, Space drops it, Escape cancels.`) : (D.value = `Dropped at position ${k.value + 1} of ${w.value.length}`, k.value = null);
+			else if (n.key === "Escape" && k.value != null) n.preventDefault(), w.value = A, k.value = null, D.value = "Cancelled, order restored", L(j);
+			else if (k.value != null) {
+				let e = r === "ArrowUp" || r === "ArrowLeft" ? -1 : +(r === "ArrowDown" || r === "ArrowRight");
+				if (!e) return;
+				n.preventDefault(), M(k.value, k.value + e), k.value = Math.min(Math.max(k.value + e, 0), w.value.length - 1), L(k.value);
+			}
+		}
+		let z = () => requestAnimationFrame(() => {
+			k.value != null && !E.value?.contains(document.activeElement) && (k.value = null);
+		}), B = (e) => F.value === e && P.value != null && P.value !== e ? e > P.value ? "after" : "before" : null;
+		return (e, t) => (f(), i("div", {
+			ref_key: "root",
+			ref: E,
+			class: "bless-sortable"
+		}, [
+			a("ul", {
+				class: u(["bless-sortable__list", { "bless-sortable__list--grid": s.columns > 1 }]),
+				role: "list",
+				"aria-label": s.label,
+				style: d(s.columns > 1 ? { "--bless-sortable-cols": s.columns } : void 0)
+			}, [(f(!0), i(r, null, m(w.value, (n, r) => (f(), i("li", {
+				key: s.rowKey ? s.rowKey(n, r) : r,
+				"data-sortable-item": "",
+				class: u(["bless-sortable__item", [{
+					"bless-sortable__item--drag": _(P) === r,
+					"bless-sortable__item--held": k.value === r
+				}, B(r) && `bless-sortable__item--${B(r)}`]])
+			}, [a("button", {
+				type: "button",
+				class: "bless-sortable__grip",
+				"aria-label": `Reorder item ${r + 1}`,
+				"aria-roledescription": "sortable item",
+				"aria-pressed": k.value === r,
+				"aria-describedby": O,
+				onPointerdown: (e) => _(N).grab(r, e),
+				onPointermove: t[0] ||= (...e) => _(N).track && _(N).track(...e),
+				onPointerup: t[1] ||= (...e) => _(N).drop && _(N).drop(...e),
+				onPointercancel: t[2] ||= (...e) => _(N).cancel && _(N).cancel(...e),
+				onKeydown: (e) => R(r, e),
+				onBlur: z
+			}, [...t[3] ||= [a("span", { "aria-hidden": "true" }, "⋮⋮", -1)]], 40, x), a("span", S, [h(e.$slots, "default", {
+				item: n,
+				index: r
+			}, () => [o(g(n), 1)])])], 2))), 128))], 14, b),
+			a("span", {
+				id: O,
+				hidden: ""
+			}, "Press Space to grab, arrow keys to move, Space to drop, Escape to cancel."),
+			a("span", C, g(D.value), 1)
+		], 512));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/BlessSplitView.css

@@ -0,0 +1 @@
+.bless-split{min-width:0;height:100%;font-family:var(--bless-font-sans);color:var(--bless-color-text)}.bless-split--stacked .bless-split__pane{height:100%;overflow:auto}.bless-split__pane:focus{outline:none}.bless-split__pane:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-split__back{gap:var(--bless-space-1);margin:var(--bless-space-2);padding:var(--bless-space-1) var(--bless-space-2);border:var(--bless-border-width) solid var(--bless-color-border);background:var(--bless-color-bg);color:inherit;font:inherit;cursor:pointer;display:inline-flex}.bless-split__back:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:2px}[dir=rtl] .bless-split__back span{display:inline-block;transform:scaleX(-1)}

package/dist/components/BlessSplitView.js

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