blessing-ui 0.2.0 → 0.3.0

package/dist/components/BlessRangeCalendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,217 @@
+import e from "./BlessButton.js";
+import { addDays as t, addMonths as n, fromISO as r, isoToday as i, toISO as a } from "../composables/date.js";
+import { applyRange as o, blocks as s, rangeBetween as c } from "../composables/dayBlocks.js";
+import { Fragment as l, computed as u, createCommentVNode as ee, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as te, normalizeClass as ne, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as C, useId as re, useModel as ie, withCtx as w } from "vue";
+//#region src/components/BlessRangeCalendar.vue?vue&type=script&setup=true&lang.ts
+var T = ["aria-label"], ae = { class: "bless-range__bar" }, oe = {
+	class: "bless-range__title",
+	"aria-live": "polite"
+}, se = ["aria-label"], ce = {
+	class: "bless-range__row",
+	role: "row"
+}, le = {
+	key: 0,
+	class: "bless-range__gap",
+	role: "gridcell",
+	"aria-hidden": "true"
+}, ue = [
+	"id",
+	"data-day",
+	"aria-selected",
+	"aria-disabled",
+	"aria-label",
+	"aria-current",
+	"tabindex",
+	"onPointerdown",
+	"onKeydown",
+	"onFocus"
+], E = { class: "bless-range__foot" }, D = { class: "bless-range__summary" }, O = {
+	class: "bless-range__live",
+	"aria-live": "polite"
+}, k = /*@__PURE__*/ h({
+	name: "BlessRangeCalendar",
+	__name: "BlessRangeCalendar",
+	props: /*@__PURE__*/ g({
+		weekStart: { default: 1 },
+		locale: { default: "en" },
+		min: {},
+		max: {},
+		disabledDates: {},
+		month: {},
+		label: { default: "Days" },
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g(["change"], ["update:modelValue"]),
+	setup(h, { emit: g }) {
+		let k = h, A = ie(h, "modelValue"), j = g, M = u(() => ({
+			prev: "Previous month",
+			next: "Next month",
+			clear: "Clear all",
+			summary: (e, t) => e ? `${e} day${e === 1 ? "" : "s"} in ${t} block${t === 1 ? "" : "s"}` : "No days chosen",
+			selected: (e) => `${e} chosen`,
+			cleared: (e) => `${e} cleared`,
+			hint: "Arrow keys move, Space toggles a day, hold Shift and press arrows to paint, Page Up and Down change month.",
+			...k.labels
+		})), N = re(), P = `${N}-hint`, F = y(k.month ? r(`${k.month}-01`) : A.value[0] ? r(`${A.value[0].slice(0, 7)}-01`) : null), I = y(""), L = y("");
+		_(() => {
+			I.value = i(), F.value ??= r(`${I.value.slice(0, 7)}-01`), L.value = R(F.value);
+		});
+		let R = (e) => a(new Date(e.getFullYear(), e.getMonth(), 1)), z = u(() => new Intl.DateTimeFormat(k.locale, {
+			month: "long",
+			year: "numeric"
+		})), B = u(() => new Intl.DateTimeFormat(k.locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		})), V = u(() => new Intl.DateTimeFormat(k.locale, { weekday: "short" })), H = u(() => Array.from({ length: 7 }, (e, n) => V.value.format(t(new Date(2023, 0, 1 + k.weekStart + n), 0)))), U = (e) => k.min != null && e < k.min || k.max != null && e > k.max || !!k.disabledDates?.(e), W = u(() => new Set(A.value)), G = u(() => {
+			let e = F.value;
+			if (!e) return [];
+			let t = (new Date(e.getFullYear(), e.getMonth(), 1).getDay() - k.weekStart + 7) % 7, n = new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate(), r = [...Array(t).fill(null), ...Array.from({ length: n }, (t, n) => a(new Date(e.getFullYear(), e.getMonth(), n + 1)))];
+			for (; r.length % 7;) r.push(null);
+			return Array.from({ length: r.length / 7 }, (e, t) => r.slice(t * 7, t * 7 + 7));
+		}), K = y(null), q = u(() => K.value ? new Set(c(K.value.from, K.value.to)) : null), J = y("");
+		function Y(e, t) {
+			let n = o(A.value, e, t, (e) => !U(e));
+			n.join() !== A.value.join() && (A.value = n, j("change", s(n)));
+		}
+		let de = (e, t) => document.elementFromPoint(e, t)?.closest("[data-day]")?.dataset.day;
+		function fe(e, t) {
+			t.button || U(e) || (t.currentTarget.setPointerCapture?.(t.pointerId), L.value = e, K.value = {
+				from: e,
+				to: e,
+				mode: W.value.has(e) ? "clear" : "set"
+			});
+		}
+		function pe(e) {
+			let t = K.value, n = t && de(e.clientX, e.clientY);
+			t && n && (K.value = {
+				...t,
+				to: n
+			});
+		}
+		function me() {
+			let e = K.value;
+			K.value = null, e && (Y(c(e.from, e.to), e.mode), J.value = (e.mode === "set" ? M.value.selected : M.value.cleared)(e.from === e.to ? B.value.format(r(e.from)) : `${e.from} – ${e.to}`));
+		}
+		let X = null, he = (e) => te(() => document.getElementById(`${N}-${e}`)?.focus());
+		function Z(e) {
+			let t = r(e);
+			(!F.value || t.getMonth() !== F.value.getMonth() || t.getFullYear() !== F.value.getFullYear()) && (F.value = new Date(t.getFullYear(), t.getMonth(), 1)), L.value = e, he(e);
+		}
+		function ge(e, i) {
+			let o = {
+				ArrowLeft: -1,
+				ArrowRight: 1,
+				ArrowUp: -7,
+				ArrowDown: 7
+			}[i.key];
+			if (o) {
+				i.preventDefault();
+				let n = a(t(r(e), o));
+				i.shiftKey ? (X ??= W.value.has(e) ? "clear" : "set", Y([e, n], X)) : X = null, Z(n);
+			} else if (i.key === " " || i.key === "Enter") {
+				if (i.preventDefault(), U(e)) return;
+				let t = W.value.has(e) ? "clear" : "set";
+				Y([e], t), J.value = (t === "set" ? M.value.selected : M.value.cleared)(B.value.format(r(e)));
+			} else if (i.key === "PageDown" || i.key === "PageUp") {
+				i.preventDefault();
+				let t = n(r(e), i.key === "PageDown" ? 1 : -1), o = new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+				Z(a(new Date(t.getFullYear(), t.getMonth(), Math.min(r(e).getDate(), o))));
+			} else if (i.key === "Home" || i.key === "End") {
+				i.preventDefault();
+				let n = (r(e).getDay() - k.weekStart + 7) % 7;
+				Z(a(t(r(e), i.key === "Home" ? -n : 6 - n)));
+			}
+		}
+		let _e = (e) => e.key === "Shift" && (X = null), Q = (e) => {
+			F.value && (F.value = n(F.value, e), L.value = R(F.value));
+		}, $ = u(() => s(A.value)), ve = u(() => M.value.summary(A.value.length, $.value.length)), ye = u(() => G.value.flat().includes(L.value) ? L.value : R(F.value ?? /* @__PURE__ */ new Date()));
+		return (t, n) => (v(), d("div", {
+			class: "bless-range",
+			role: "group",
+			"aria-label": h.label
+		}, [
+			f("div", ae, [
+				m(e, {
+					size: "sm",
+					variant: "ghost",
+					"aria-label": M.value.prev,
+					onClick: n[0] ||= (e) => Q(-1)
+				}, {
+					default: w(() => [...n[4] ||= [p("‹", -1)]]),
+					_: 1
+				}, 8, ["aria-label"]),
+				f("strong", oe, S(F.value ? z.value.format(F.value) : ""), 1),
+				m(e, {
+					size: "sm",
+					variant: "ghost",
+					"aria-label": M.value.next,
+					onClick: n[1] ||= (e) => Q(1)
+				}, {
+					default: w(() => [...n[5] ||= [p("›", -1)]]),
+					_: 1
+				}, 8, ["aria-label"])
+			]),
+			F.value ? (v(), d("div", {
+				key: 0,
+				class: "bless-range__grid",
+				role: "grid",
+				"aria-label": `${h.label}, ${z.value.format(F.value)}`,
+				"aria-describedby": P,
+				"aria-multiselectable": "true",
+				onKeyup: _e
+			}, [f("div", ce, [(v(!0), d(l, null, b(H.value, (e) => (v(), d("span", {
+				key: e,
+				class: "bless-range__head",
+				role: "columnheader"
+			}, S(e), 1))), 128))]), (v(!0), d(l, null, b(G.value, (e, t) => (v(), d("div", {
+				key: t,
+				class: "bless-range__row",
+				role: "row"
+			}, [(v(!0), d(l, null, b(e, (e, t) => (v(), d(l, { key: t }, [e ? (v(), d("button", {
+				key: 1,
+				id: `${C(N)}-${e}`,
+				type: "button",
+				role: "gridcell",
+				class: ne(["bless-range__day", {
+					"bless-range__day--on": W.value.has(e),
+					"bless-range__day--set": K.value?.mode === "set" && q.value?.has(e),
+					"bless-range__day--clear": K.value?.mode === "clear" && q.value?.has(e),
+					"bless-range__day--today": e === I.value
+				}]),
+				"data-day": e,
+				"aria-selected": W.value.has(e),
+				"aria-disabled": U(e) || void 0,
+				"aria-label": B.value.format(C(r)(e)),
+				"aria-current": e === I.value ? "date" : void 0,
+				tabindex: ye.value === e ? 0 : -1,
+				onPointerdown: (t) => fe(e, t),
+				onPointermove: pe,
+				onPointerup: me,
+				onPointercancel: n[2] ||= (e) => K.value = null,
+				onKeydown: (t) => ge(e, t),
+				onFocus: (t) => L.value = e
+			}, S(Number(e.slice(8))), 43, ue)) : (v(), d("span", le))], 64))), 128))]))), 128))], 40, se)) : ee("", !0),
+			f("div", E, [f("span", D, [x(t.$slots, "summary", { blocks: $.value }, () => [p(S(ve.value), 1)])]), m(e, {
+				size: "sm",
+				variant: "outline",
+				disabled: !A.value.length,
+				onClick: n[3] ||= (e) => (A.value = [], j("change", []))
+			}, {
+				default: w(() => [p(S(M.value.clear), 1)]),
+				_: 1
+			}, 8, ["disabled"])]),
+			f("span", {
+				id: P,
+				hidden: ""
+			}, S(M.value.hint), 1),
+			f("span", O, S(J.value), 1)
+		], 8, T));
+	}
+});
+//#endregion
+export { k as default };

package/dist/components/BlessScheduler.css

@@ -0,0 +1 @@
+.bless-sched{gap:var(--bless-space-2);font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);display:grid;position:relative}.bless-sched__bar{align-items:center;gap:var(--bless-space-2);flex-wrap:wrap;display:flex}.bless-sched__title{margin-inline-start:var(--bless-space-2)}.bless-sched__add{margin-inline-start:auto}.bless-sched__scroll{border:var(--bless-border-width) solid var(--bless-color-border);max-height:560px;overflow:auto}.bless-sched__head,.bless-sched__body{grid-template-columns:56px 1fr;min-width:560px;display:grid}.bless-sched__head{z-index:3;background:var(--bless-color-bg);border-bottom:var(--bless-border-width) solid var(--bless-color-border);grid-template-columns:56px repeat(var(--_n), minmax(0, 1fr));position:sticky;top:0}.bless-sched__day{padding:var(--bless-space-1) var(--bless-space-2);text-align:center;font-weight:var(--bless-font-weight-bold,700)}.bless-sched__day--today{color:var(--bless-color-accent-text)}.bless-sched__gutter{border-inline-end:var(--bless-border-width) solid var(--bless-color-border);color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);position:relative}.bless-sched__hour{position:absolute;inset-inline-end:var(--bless-space-2);translate:0 -50%}.bless-sched__cols{grid-template-columns:repeat(var(--_n), minmax(0, 1fr));background-image:repeating-linear-gradient(to bottom, var(--bless-color-border) 0 1px, transparent 1px var(--_h));outline:none;display:grid;position:relative}.bless-sched__col{border-inline-start:var(--bless-border-width) solid var(--bless-color-border);touch-action:pan-y;cursor:crosshair;position:relative}.bless-sched__event{box-sizing:border-box;padding:2px var(--bless-space-2);background:color-mix(in srgb, var(--bless-color-accent) 20%, var(--bless-color-bg));border:var(--bless-border-width) solid var(--bless-color-accent);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-inline-start-width:4px;flex-direction:column;display:flex;position:absolute;overflow:hidden}.bless-sched__event--sel{outline:2px solid var(--bless-color-text);outline-offset:1px;z-index:2}.bless-sched__event:focus-visible{outline:3px solid var(--bless-color-text);outline-offset:1px;z-index:2}.bless-sched__event--draft{pointer-events:none;border-style:dashed;left:1px;right:1px}.bless-sched__etitle{text-overflow:ellipsis;white-space:nowrap;font-weight:var(--bless-font-weight-bold,700);overflow:hidden}.bless-sched__etime{font-size:var(--bless-text-xs)}.bless-sched__foot{inset-inline:0;cursor:ns-resize;height:8px;position:absolute;bottom:0}.bless-sched__edit{align-items:center;gap:var(--bless-space-3);flex-wrap:wrap;display:flex}.bless-sched__field{align-items:center;gap:var(--bless-space-2);display:flex}.bless-sched__input{min-height:32px;padding:var(--bless-space-1) var(--bless-space-2);background:var(--bless-color-bg);border:var(--bless-border-width) solid var(--bless-color-border);color:inherit;font:inherit}.bless-sched__input:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:1px}.bless-sched__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessScheduler.js

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

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

@@ -0,0 +1,95 @@
+import { ScheduleEvent } from '../composables/schedule';
+export type { ScheduleEvent as BlessScheduleEvent } from '../composables/schedule';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    view?: "day" | "week";
+    /** 0 = Sunday, 1 = Monday */
+    weekStart?: 0 | 1;
+    /** first and last hour shown (0–24) */
+    dayStart?: number;
+    dayEnd?: number;
+    /** minutes events snap to */
+    snap?: number;
+    /** px per hour */
+    hourHeight?: number;
+    locale?: string;
+    editable?: boolean;
+    label?: string;
+    labels?: Partial<{
+        prev: string;
+        next: string;
+        today: string;
+        add: string;
+        remove: string;
+        title: string;
+        newEvent: string;
+        eventName: (title: string, day: string, from: string, to: string) => string;
+        moved: (title: string, day: string, from: string, to: string) => string;
+        added: (title: string) => string;
+        removed: (title: string) => string;
+        hint: string;
+    }>;
+} & {
+    modelValue?: ScheduleEvent[];
+    /** any day in the period shown */
+    date?: string | null;
+    selected?: string | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (event: ScheduleEvent) => any;
+    "update:modelValue": (value: ScheduleEvent[]) => any;
+    create: (event: ScheduleEvent) => any;
+    remove: (event: ScheduleEvent) => any;
+    "update:selected": (value: string | null) => any;
+    "update:date": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    view?: "day" | "week";
+    /** 0 = Sunday, 1 = Monday */
+    weekStart?: 0 | 1;
+    /** first and last hour shown (0–24) */
+    dayStart?: number;
+    dayEnd?: number;
+    /** minutes events snap to */
+    snap?: number;
+    /** px per hour */
+    hourHeight?: number;
+    locale?: string;
+    editable?: boolean;
+    label?: string;
+    labels?: Partial<{
+        prev: string;
+        next: string;
+        today: string;
+        add: string;
+        remove: string;
+        title: string;
+        newEvent: string;
+        eventName: (title: string, day: string, from: string, to: string) => string;
+        moved: (title: string, day: string, from: string, to: string) => string;
+        added: (title: string) => string;
+        removed: (title: string) => string;
+        hint: string;
+    }>;
+} & {
+    modelValue?: ScheduleEvent[];
+    /** any day in the period shown */
+    date?: string | null;
+    selected?: string | null;
+}> & Readonly<{
+    onChange?: ((event: ScheduleEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ScheduleEvent[]) => any) | undefined;
+    onCreate?: ((event: ScheduleEvent) => any) | undefined;
+    onRemove?: ((event: ScheduleEvent) => any) | undefined;
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    "onUpdate:date"?: ((value: string | null) => any) | undefined;
+}>, {
+    label: string;
+    view: "day" | "week";
+    weekStart: 0 | 1;
+    locale: string;
+    editable: boolean;
+    snap: number;
+    dayStart: number;
+    dayEnd: number;
+    hourHeight: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessScheduler.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,347 @@
+import e from "./BlessButton.js";
+import { addDays as t, fromISO as n, isoToday as r, toISO as i } from "../composables/date.js";
+import { fmtTime as ee, layoutDay as te, moveEvent as a, nextEventId as ne, resizeEvent as o, snapTo as s, weekOf as re } from "../composables/schedule.js";
+import { Fragment as c, computed as l, createBlock as ie, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onMounted as ae, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, useId as oe, useModel as T, withCtx as E } from "vue";
+//#region src/components/BlessScheduler.vue?vue&type=script&setup=true&lang.ts
+var se = ["aria-label"], ce = { class: "bless-sched__bar" }, le = {
+	class: "bless-sched__title",
+	"aria-live": "polite"
+}, ue = {
+	key: 0,
+	class: "bless-sched__scroll"
+}, de = { class: "bless-sched__body" }, fe = ["aria-label", "onPointerdown"], pe = [
+	"data-event",
+	"aria-pressed",
+	"aria-label",
+	"tabindex",
+	"onPointerdown",
+	"onKeydown",
+	"onFocus"
+], me = { class: "bless-sched__etitle" }, he = { class: "bless-sched__etime" }, ge = ["onPointerdown"], _e = {
+	key: 1,
+	class: "bless-sched__edit"
+}, ve = { class: "bless-sched__field" }, ye = ["value"], be = { class: "bless-sched__when" }, xe = {
+	class: "bless-sched__live",
+	"aria-live": "polite"
+}, D = /*@__PURE__*/ h({
+	name: "BlessScheduler",
+	__name: "BlessScheduler",
+	props: /*@__PURE__*/ g({
+		view: { default: "week" },
+		weekStart: { default: 1 },
+		dayStart: { default: 7 },
+		dayEnd: { default: 20 },
+		snap: { default: 15 },
+		hourHeight: { default: 48 },
+		locale: { default: "en" },
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Schedule" },
+		labels: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {},
+		date: { default: null },
+		dateModifiers: {},
+		selected: { default: null },
+		selectedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ g([
+		"create",
+		"change",
+		"remove"
+	], [
+		"update:modelValue",
+		"update:date",
+		"update:selected"
+	]),
+	setup(h, { emit: g }) {
+		let D = h, O = T(h, "modelValue"), k = T(h, "date"), A = T(h, "selected"), j = g, M = l(() => ({
+			prev: "Previous",
+			next: "Next",
+			today: "Today",
+			add: "Add event",
+			remove: "Remove",
+			title: "Title",
+			newEvent: "New event",
+			eventName: (e, t, n, r) => `${e}, ${t}, ${n} to ${r}`,
+			moved: (e, t, n, r) => `${e}: ${t}, ${n} to ${r}`,
+			added: (e) => `${e} added`,
+			removed: (e) => `${e} removed`,
+			hint: "Arrow keys move the event, Alt with up or down changes its length, Delete removes it.",
+			...D.labels
+		})), N = `${oe()}-hint`, P = x(""), F = x(), I = x(), L = l(() => k.value ?? O.value[0]?.date ?? null), R = x("");
+		ae(() => {
+			R.value = r(), L.value || (k.value = R.value);
+		});
+		let z = l(() => D.dayStart * 60), B = l(() => D.dayEnd * 60), V = (e) => (e - z.value) / 60 * D.hourHeight, H = l(() => (D.dayEnd - D.dayStart) * D.hourHeight), Se = l(() => Array.from({ length: D.dayEnd - D.dayStart }, (e, t) => D.dayStart + t)), U = l(() => {
+			if (!L.value) return [];
+			if (D.view === "day") return [L.value];
+			let e = n(re(L.value, D.weekStart));
+			return Array.from({ length: 7 }, (n, r) => i(t(e, r)));
+		}), Ce = l(() => new Intl.DateTimeFormat(D.locale, {
+			weekday: "short",
+			day: "numeric"
+		})), we = l(() => new Intl.DateTimeFormat(D.locale, {
+			weekday: "long",
+			day: "numeric",
+			month: "long"
+		})), W = l(() => new Intl.DateTimeFormat(D.locale, {
+			day: "numeric",
+			month: "short",
+			year: "numeric"
+		})), Te = l(() => {
+			let e = U.value;
+			return e.length ? e.length === 1 ? W.value.format(n(e[0])) : `${W.value.format(n(e[0]))} – ${W.value.format(n(e.at(-1)))}` : "";
+		}), G = (e) => ee(e, D.locale), K = (e) => we.value.format(n(e)), Ee = (e) => O.value.filter((t) => t.date === e), De = l(() => new Map(U.value.map((e) => [e, te(Ee(e))]))), Oe = (e) => M.value.eventName(e.title, K(e.date), G(e.start), G(e.end)), q = l(() => O.value.find((e) => e.id === A.value)), J = (e) => {
+			O.value = O.value.map((t) => t.id === e.id ? e : t), j("change", e);
+		}, ke = (e) => P.value = M.value.moved(e.title, K(e.date), G(e.start), G(e.end));
+		function Ae(e) {
+			let t = {
+				id: ne(O.value),
+				title: M.value.newEvent,
+				...e
+			};
+			O.value = [...O.value, t], A.value = t.id, j("create", t), P.value = M.value.added(t.title), _(() => F.value?.select());
+		}
+		function je() {
+			let e = U.value[0];
+			if (!e) return;
+			let t = Math.min(z.value + 60, B.value - 60);
+			Ae({
+				date: e,
+				start: t,
+				end: Math.min(t + 60, B.value)
+			});
+		}
+		function Me(e) {
+			let t = O.value.indexOf(e), n = O.value.filter((t) => t !== e);
+			O.value = n, j("remove", e), P.value = M.value.removed(e.title), A.value = n[Math.min(t, n.length - 1)]?.id ?? null, _(() => A.value ? Ne(A.value) : I.value?.focus());
+		}
+		let Ne = (e) => I.value?.querySelector(`[data-event="${CSS.escape(e)}"]`)?.focus(), Pe = (e) => {
+			let t = I.value.getBoundingClientRect();
+			return Math.min(B.value, Math.max(z.value, s(z.value + (e - t.top) / D.hourHeight * 60, D.snap)));
+		}, Y = (e) => {
+			let t = I.value.getBoundingClientRect(), n = U.value.length;
+			return Math.min(n - 1, Math.max(0, Math.floor((e - t.left) / (t.width || 1) * n)));
+		}, X = null, Z = x(null);
+		function Fe(e, t) {
+			if (t.button || !D.editable || t.target !== t.currentTarget) return;
+			A.value = null, t.currentTarget.setPointerCapture?.(t.pointerId);
+			let n = Pe(t.clientY);
+			X = {
+				kind: "make",
+				date: e,
+				a: n
+			}, Z.value = {
+				date: e,
+				start: n,
+				end: n
+			};
+		}
+		function Ie(e, t, n) {
+			t.button || (t.stopPropagation(), A.value = e.id, D.editable && (t.currentTarget.setPointerCapture?.(t.pointerId), X = n === "move" ? {
+				kind: n,
+				e,
+				y: t.clientY,
+				col: Y(t.clientX)
+			} : {
+				kind: n,
+				e,
+				y: t.clientY
+			}));
+		}
+		function Le(e) {
+			let t = X;
+			if (t) {
+				if (t.kind === "make") {
+					let n = Pe(e.clientY);
+					Z.value = {
+						date: t.date,
+						start: Math.min(t.a, n),
+						end: Math.max(t.a, n)
+					};
+				} else if (t.kind === "move") {
+					let n = s((e.clientY - t.y) / D.hourHeight * 60, D.snap);
+					J(a(t.e, n, Y(e.clientX) - t.col, z.value, B.value));
+				} else {
+					let n = s((e.clientY - t.y) / D.hourHeight * 60, D.snap);
+					J(o(t.e, n, D.snap, B.value));
+				}
+			}
+		}
+		function Re() {
+			let e = X, t = Z.value;
+			if (X = null, Z.value = null, e?.kind === "make" && t && t.end - t.start >= D.snap) Ae(t);
+			else if (e && e.kind !== "make") {
+				let t = O.value.find((t) => t.id === e.e.id);
+				t && ke(t);
+			}
+		}
+		function ze(e, t) {
+			if (t.target.closest("input")) return;
+			let n = {
+				ArrowUp: [-1, 0],
+				ArrowDown: [1, 0],
+				ArrowLeft: [0, -1],
+				ArrowRight: [0, 1]
+			}[t.key];
+			if (n && D.editable) {
+				t.preventDefault();
+				let r;
+				r = t.altKey ? o(e, n[0] * D.snap, D.snap, B.value) : a(e, n[0] * D.snap, D.view === "week" ? n[1] : 0, z.value, B.value), U.value.includes(r.date) || (r = {
+					...r,
+					date: e.date
+				}), J(r), ke(r), r.date !== e.date && _(() => Ne(e.id));
+			} else (t.key === "Delete" || t.key === "Backspace") && D.editable ? (t.preventDefault(), Me(e)) : (t.key === "Enter" || t.key === " ") && (t.preventDefault(), A.value = e.id, _(() => F.value?.focus()));
+		}
+		let Be = (e) => {
+			L.value && (k.value = i(t(n(L.value), e * (D.view === "week" ? 7 : 1))));
+		}, Ve = l(() => A.value ?? O.value.find((e) => U.value.includes(e.date))?.id), Q = (e) => ({
+			top: `${V(e.start)}px`,
+			height: `${V(e.end) - V(e.start)}px`
+		}), $ = (e, t) => De.value.get(e)?.get(t) ?? {
+			lane: 0,
+			lanes: 1
+		};
+		return (t, i) => (b(), d("div", {
+			class: "bless-sched",
+			role: "group",
+			"aria-label": h.label
+		}, [
+			f("div", ce, [
+				m(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": M.value.prev,
+					onClick: i[0] ||= (e) => Be(-1)
+				}, {
+					default: E(() => [...i[5] ||= [p("‹", -1)]]),
+					_: 1
+				}, 8, ["aria-label"]),
+				m(e, {
+					size: "sm",
+					variant: "outline",
+					onClick: i[1] ||= (e) => k.value = w(r)()
+				}, {
+					default: E(() => [p(C(M.value.today), 1)]),
+					_: 1
+				}),
+				m(e, {
+					size: "sm",
+					variant: "outline",
+					"aria-label": M.value.next,
+					onClick: i[2] ||= (e) => Be(1)
+				}, {
+					default: E(() => [...i[6] ||= [p("›", -1)]]),
+					_: 1
+				}, 8, ["aria-label"]),
+				f("strong", le, C(Te.value), 1),
+				h.editable ? (b(), ie(e, {
+					key: 0,
+					size: "sm",
+					class: "bless-sched__add",
+					onClick: je
+				}, {
+					default: E(() => [p(C(M.value.add), 1)]),
+					_: 1
+				})) : u("", !0)
+			]),
+			U.value.length ? (b(), d("div", ue, [f("div", {
+				class: "bless-sched__head",
+				style: y({ "--_n": U.value.length })
+			}, [i[7] ||= f("span", { class: "bless-sched__corner" }, null, -1), (b(!0), d(c, null, S(U.value, (e) => (b(), d("span", {
+				key: e,
+				class: v(["bless-sched__day", { "bless-sched__day--today": e === R.value }])
+			}, C(Ce.value.format(w(n)(e))), 3))), 128))], 4), f("div", de, [f("div", {
+				class: "bless-sched__gutter",
+				"aria-hidden": "true",
+				style: y({ height: `${H.value}px` })
+			}, [(b(!0), d(c, null, S(Se.value, (e) => (b(), d("span", {
+				key: e,
+				class: "bless-sched__hour",
+				style: y({ top: `${V(e * 60)}px` })
+			}, C(G(e * 60)), 5))), 128))], 4), f("div", {
+				ref_key: "cols",
+				ref: I,
+				class: "bless-sched__cols",
+				style: y({
+					height: `${H.value}px`,
+					"--_n": U.value.length,
+					"--_h": `${h.hourHeight}px`
+				}),
+				tabindex: "-1",
+				"aria-describedby": N,
+				onPointermove: Le,
+				onPointerup: Re,
+				onPointercancel: Re
+			}, [(b(!0), d(c, null, S(U.value, (e) => (b(), d("div", {
+				key: e,
+				class: "bless-sched__col",
+				role: "group",
+				"aria-label": K(e),
+				onPointerdown: (t) => Fe(e, t)
+			}, [(b(!0), d(c, null, S(Ee(e), (t) => (b(), d("div", {
+				key: t.id,
+				class: v(["bless-sched__event", { "bless-sched__event--sel": A.value === t.id }]),
+				style: y({
+					...Q(t),
+					left: `calc(${$(e, t.id).lane / $(e, t.id).lanes * 100}% + 1px)`,
+					width: `calc(${100 / $(e, t.id).lanes}% - 3px)`
+				}),
+				"data-event": t.id,
+				role: "button",
+				"aria-pressed": A.value === t.id,
+				"aria-label": Oe(t),
+				tabindex: Ve.value === t.id ? 0 : -1,
+				onPointerdown: (e) => Ie(t, e, "move"),
+				onKeydown: (e) => ze(t, e),
+				onFocus: (e) => A.value = t.id
+			}, [
+				f("span", me, C(t.title), 1),
+				f("span", he, C(G(t.start)) + "–" + C(G(t.end)), 1),
+				h.editable ? (b(), d("span", {
+					key: 0,
+					class: "bless-sched__foot",
+					"aria-hidden": "true",
+					onPointerdown: (e) => Ie(t, e, "size")
+				}, null, 40, ge)) : u("", !0)
+			], 46, pe))), 128)), Z.value && Z.value.date === e ? (b(), d("div", {
+				key: 0,
+				class: "bless-sched__event bless-sched__event--draft",
+				style: y(Q(Z.value))
+			}, null, 4)) : u("", !0)], 40, fe))), 128))], 36)])])) : u("", !0),
+			q.value && h.editable ? (b(), d("div", _e, [
+				f("label", ve, [f("span", null, C(M.value.title), 1), f("input", {
+					ref_key: "titleInput",
+					ref: F,
+					class: "bless-sched__input",
+					type: "text",
+					value: q.value.title,
+					onInput: i[3] ||= (e) => J({
+						...q.value,
+						title: e.target.value
+					})
+				}, null, 40, ye)]),
+				f("span", be, C(K(q.value.date)) + ", " + C(G(q.value.start)) + "–" + C(G(q.value.end)), 1),
+				m(e, {
+					size: "sm",
+					variant: "outline",
+					onClick: i[4] ||= (e) => Me(q.value)
+				}, {
+					default: E(() => [p(C(M.value.remove), 1)]),
+					_: 1
+				})
+			])) : u("", !0),
+			f("span", {
+				id: N,
+				hidden: ""
+			}, C(M.value.hint), 1),
+			f("span", xe, C(P.value), 1)
+		], 8, se));
+	}
+});
+//#endregion
+export { D as default };

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

@@ -6,6 +6,16 @@ type __VLS_Props = {
     disabled?: boolean;
     label?: string;
     placeholder?: string;
+    /** button wording and the messages said while recording or on a refusal */
+    labels?: Partial<{
+        button: (label: string, combo: string) => string;
+        pressKeys: string;
+        recording: string;
+        set: (combo: string) => string;
+        needsModifier: (combo: string) => string;
+        usedBy: (combo: string, by: string) => string;
+        taken: (combo: string) => string;
+    }>;
 };
 declare function start(): void;
 type __VLS_ModelProps = {