blessing-ui 0.1.0 → 0.2.0

package/dist/components/BlessCodeBlock.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,134 @@
+import { Fragment as e, computed as t, createCommentVNode 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, openBlock as d, ref as f, renderList as p, renderSlot as m, toDisplayString as h, unref as g, useId as _, useModel as v } from "vue";
+//#region src/components/BlessCodeBlock.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "bless-code" }, b = {
+	key: 0,
+	class: "bless-code__head"
+}, x = ["aria-label"], S = [
+	"id",
+	"aria-selected",
+	"aria-controls",
+	"tabindex",
+	"onClick"
+], C = {
+	key: 1,
+	class: "bless-code__name"
+}, w = {
+	key: 2,
+	class: "bless-code__lang"
+}, T = [
+	"id",
+	"role",
+	"aria-labelledby",
+	"aria-label"
+], E = {
+	key: 0,
+	class: "bless-code__no",
+	"aria-hidden": "true"
+}, D = {
+	class: "bless-code__live",
+	"aria-live": "polite"
+}, O = /*@__PURE__*/ o({
+	name: "BlessCodeBlock",
+	__name: "BlessCodeBlock",
+	props: /*@__PURE__*/ s({
+		code: {},
+		lang: {},
+		filename: {},
+		files: {},
+		lines: {},
+		lineNumbers: { type: Boolean },
+		copy: {
+			type: Boolean,
+			default: !0
+		},
+		wrap: { type: Boolean },
+		label: { default: "Code" }
+	}, {
+		active: { default: 0 },
+		activeModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["copy"], ["update:active"]),
+	setup(o, { emit: s }) {
+		let O = o, k = v(o, "active"), A = s, j = _(), M = t(() => (O.files?.length ? O.files[Math.min(k.value, O.files.length - 1)] : void 0) ?? {
+			name: O.filename ?? "",
+			code: O.code ?? "",
+			lang: O.lang
+		}), N = t(() => M.value.lang ?? O.lang), P = t(() => {
+			let e = /* @__PURE__ */ new Set();
+			if (Array.isArray(O.lines)) O.lines.forEach((t) => e.add(t));
+			else for (let t of (O.lines ?? "").split(",")) {
+				let [n, r] = t.split("-").map((e) => parseInt(e, 10));
+				if (n) for (let t = n; t <= (r ?? n); t++) e.add(t);
+			}
+			return e;
+		}), F = t(() => M.value.code.replace(/\n$/, "").split("\n").map((e, t) => ({
+			n: t + 1,
+			text: e,
+			hl: P.value.has(t + 1)
+		}))), I = f();
+		function L(e) {
+			let t = O.files?.length ?? 0, n = e.key === "ArrowRight" ? k.value + 1 : e.key === "ArrowLeft" ? k.value - 1 : e.key === "Home" ? 0 : e.key === "End" ? t - 1 : null;
+			n != null && (e.preventDefault(), k.value = (n + t) % t, c(() => I.value?.querySelectorAll("[role=\"tab\"]")[k.value]?.focus()));
+		}
+		let R = f(!1), z;
+		async function B() {
+			let e = M.value.code;
+			try {
+				await navigator.clipboard.writeText(e);
+			} catch {
+				let t = document.createElement("textarea");
+				t.value = e, t.style.position = "fixed", t.style.opacity = "0", document.body.append(t), t.select(), document.execCommand("copy"), t.remove();
+			}
+			A("copy", e), R.value = !0, clearTimeout(z), z = setTimeout(() => R.value = !1, 2e3);
+		}
+		return u(() => clearTimeout(z)), (t, s) => (d(), r("figure", y, [
+			o.files?.length || o.filename || N.value || o.copy ? (d(), r("figcaption", b, [
+				o.files?.length ? (d(), r("div", {
+					key: 0,
+					ref_key: "tabs",
+					ref: I,
+					class: "bless-code__tabs",
+					role: "tablist",
+					"aria-label": o.label
+				}, [(d(!0), r(e, null, p(o.files, (e, t) => (d(), r("button", {
+					id: `${g(j)}-t${t}`,
+					key: e.name,
+					type: "button",
+					role: "tab",
+					class: "bless-code__tab",
+					"aria-selected": t === k.value,
+					"aria-controls": `${g(j)}-p`,
+					tabindex: t === k.value ? 0 : -1,
+					onClick: (e) => k.value = t,
+					onKeydown: L
+				}, h(e.name), 41, S))), 128))], 8, x)) : o.filename ? (d(), r("span", C, h(o.filename), 1)) : n("", !0),
+				s[0] ||= i("span", { class: "bless-code__spacer" }, null, -1),
+				N.value ? (d(), r("span", w, h(N.value), 1)) : n("", !0),
+				o.copy ? (d(), r("button", {
+					key: 3,
+					type: "button",
+					class: "bless-code__copy",
+					onClick: B
+				}, h(R.value ? "Copied" : "Copy"), 1)) : n("", !0)
+			])) : n("", !0),
+			i("div", {
+				id: `${g(j)}-p`,
+				class: "bless-code__scroll",
+				tabindex: "0",
+				role: o.files?.length ? "tabpanel" : "region",
+				"aria-labelledby": o.files?.length ? `${g(j)}-t${k.value}` : void 0,
+				"aria-label": o.files?.length ? void 0 : M.value.name || o.label
+			}, [m(t.$slots, "code", {
+				code: M.value.code,
+				lang: N.value,
+				lines: F.value
+			}, () => [i("pre", { class: l(["bless-code__pre", { "bless-code__pre--wrap": o.wrap }]) }, [i("code", null, [(d(!0), r(e, null, p(F.value, (e) => (d(), r("span", {
+				key: e.n,
+				class: l(["bless-code__line", { "bless-code__line--hl": e.hl }])
+			}, [o.lineNumbers ? (d(), r("span", E, h(e.n), 1)) : n("", !0), a(h(e.text) + "\n", 1)], 2))), 128))])], 2)])], 8, T),
+			i("span", D, h(R.value ? "Copied to clipboard" : ""), 1)
+		]));
+	}
+});
+//#endregion
+export { O as default };

package/dist/components/BlessCountUp.css

@@ -0,0 +1 @@
+.bless-countup{font-variant-numeric:tabular-nums;position:relative}.bless-countup--odometer .bless-countup__visual{display:inline-flex}.bless-countup__digit{height:1lh;display:inline-block;overflow:hidden}.bless-countup__reel{translate:0 calc(var(--bless-digit) * -1lh);transition:translate var(--bless-duration-slow) var(--bless-ease-out);flex-direction:column;display:flex}.bless-countup__reel i{height:1lh;font-style:normal}.bless-countup__final{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.bless-countup__reel{transition:none}}

package/dist/components/BlessCountUp.js

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

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    value: number;
+    /** milliseconds to travel from the shown number to `value` */
+    duration?: number;
+    locale?: string;
+    /** `Intl.NumberFormat` options: `{ style: "currency", currency: "IDR" }` */
+    options?: Intl.NumberFormatOptions;
+    /** start at 0 and count up when first shown; off shows `value` straight away */
+    appear?: boolean;
+    /** roll each digit in its own column, like an odometer */
+    odometer?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    duration: number;
+    appear: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessCountUp.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { Fragment as t, computed as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, watch as h } from "vue";
+//#region src/components/BlessCountUp.vue?vue&type=script&setup=true&lang.ts
+var g = {
+	class: "bless-countup__visual",
+	"aria-hidden": "true"
+}, _ = {
+	key: 0,
+	class: "bless-countup__digit"
+}, v = { key: 1 }, y = { class: "bless-countup__final" }, b = /*@__PURE__*/ o({
+	name: "BlessCountUp",
+	__name: "BlessCountUp",
+	props: {
+		value: {},
+		duration: { default: 800 },
+		locale: {},
+		options: {},
+		appear: {
+			type: Boolean,
+			default: !0
+		},
+		odometer: { type: Boolean }
+	},
+	setup(o) {
+		let b = o, x = f(b.appear ? 0 : b.value), S = n(() => new Intl.NumberFormat(b.locale, b.options)), C = n(() => {
+			let e = b.options ?? {};
+			return e.style === "currency" || e.style === "percent" || e.minimumFractionDigits != null || e.maximumFractionDigits != null || !Number.isInteger(b.value) ? S.value.resolvedOptions().maximumFractionDigits ?? 0 : 0;
+		}), w = (e) => S.value.format(e), T = (e) => Math.round(e * 10 ** C.value) / 10 ** C.value, E = n(() => w(b.value)), D = n(() => Array.from(w(x.value))), O = 0;
+		function k(t) {
+			cancelAnimationFrame(O);
+			let n = x.value;
+			if (e() || !b.duration || n === t) {
+				x.value = t;
+				return;
+			}
+			let r = performance.now(), i = (e) => {
+				let a = Math.min(1, (e - r) / b.duration);
+				x.value = T(n + (t - n) * (1 - (1 - a) ** 3)), a < 1 ? O = requestAnimationFrame(i) : x.value = t;
+			};
+			O = requestAnimationFrame(i);
+		}
+		return u(() => b.appear && k(b.value)), h(() => b.value, (e) => k(e)), l(() => cancelAnimationFrame(O)), (e, n) => (d(), r("span", { class: s(["bless-countup", { "bless-countup--odometer": o.odometer }]) }, [i("span", g, [o.odometer ? (d(!0), r(t, { key: 0 }, p(D.value, (e, n) => (d(), r(t, { key: n }, [/\d/.test(e) ? (d(), r("span", _, [i("span", {
+			class: "bless-countup__reel",
+			style: c({ "--bless-digit": e })
+		}, [(d(), r(t, null, p(10, (e) => i("i", { key: e }, m(e - 1), 1)), 64))], 4)])) : (d(), r("span", v, m(e), 1))], 64))), 128)) : (d(), r(t, { key: 1 }, [a(m(w(x.value)), 1)], 64))]), i("span", y, m(E.value), 1)], 2));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/BlessCropper.css

@@ -0,0 +1 @@
+.bless-cropper{font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);position:relative}.bless-cropper__stage{touch-action:none;-webkit-user-select:none;user-select:none;background:var(--bless-color-surface);position:relative;overflow:hidden}.bless-cropper__canvas{width:100%;height:auto;display:block}.bless-cropper__frame{box-sizing:border-box;border:2px solid var(--bless-color-bg);outline:1px solid var(--bless-color-text);box-shadow:0 0 0 9999px color-mix(in srgb, var(--bless-color-bg) 55%, transparent);cursor:move;touch-action:none;position:absolute}.bless-cropper__frame:focus-visible{outline:2px solid var(--bless-color-accent)}.bless-cropper__handle{background:var(--bless-color-bg);border:1px solid var(--bless-color-text);touch-action:none;width:12px;height:12px;position:absolute}.bless-cropper__handle--nw{cursor:nwse-resize;inset-block-start:-7px;inset-inline-start:-7px}.bless-cropper__handle--ne{cursor:nesw-resize;inset-block-start:-7px;inset-inline-end:-7px}.bless-cropper__handle--se{cursor:nwse-resize;inset-block-end:-7px;inset-inline-end:-7px}.bless-cropper__handle--sw{cursor:nesw-resize;inset-block-end:-7px;inset-inline-start:-7px}.bless-cropper__handle--n,.bless-cropper__handle--s{cursor:ns-resize;inset-inline-start:calc(50% - 6px)}.bless-cropper__handle--n{inset-block-start:-7px}.bless-cropper__handle--s{inset-block-end:-7px}.bless-cropper__handle--e,.bless-cropper__handle--w{cursor:ew-resize;inset-block-start:calc(50% - 6px)}.bless-cropper__handle--e{inset-inline-end:-7px}.bless-cropper__handle--w{inset-inline-start:-7px}.bless-cropper__foot{justify-content:space-between;align-items:center;gap:var(--bless-space-2);margin-top:var(--bless-space-2);color:var(--bless-color-text-muted);font-size:var(--bless-text-xs);display:flex}.bless-cropper__controls{gap:var(--bless-space-1);display:inline-flex}.bless-cropper__error{color:var(--bless-color-danger-text);margin:0}.bless-cropper__live{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}

package/dist/components/BlessCropper.js

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

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

@@ -0,0 +1,54 @@
+import { CropBox } from '../composables/cropBox';
+export interface BlessCropRect {
+    /** pixels of the full-size image after `rotation` has been applied */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: 0 | 90 | 180 | 270;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    src: string;
+    /** width / height of the result, e.g. `1` or `16 / 9`; leave out to crop freely */
+    aspect?: number;
+    /** `anonymous` lets `toBlob` read images from another origin that sends CORS headers */
+    crossorigin?: "anonymous" | "use-credentials";
+    /** show the rotate buttons */
+    controls?: boolean;
+    label?: string;
+} & {
+    modelValue?: BlessCropRect | null;
+}, {
+    toBlob: (o?: {
+        type?: string;
+        quality?: number;
+        maxWidth?: number;
+    }) => Promise<Blob | null>;
+    rotate: (d: 90 | -90) => 0 | 90 | 180 | 270;
+    reset: () => CropBox;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: BlessCropRect | null) => any;
+    error: () => any;
+    ready: () => any;
+}, string, import('vue').PublicProps, Readonly<{
+    src: string;
+    /** width / height of the result, e.g. `1` or `16 / 9`; leave out to crop freely */
+    aspect?: number;
+    /** `anonymous` lets `toBlob` read images from another origin that sends CORS headers */
+    crossorigin?: "anonymous" | "use-credentials";
+    /** show the rotate buttons */
+    controls?: boolean;
+    label?: string;
+} & {
+    modelValue?: BlessCropRect | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: BlessCropRect | null) => any) | undefined;
+    onError?: (() => any) | undefined;
+    onReady?: (() => any) | undefined;
+}>, {
+    label: string;
+    controls: boolean;
+    crossorigin: "anonymous" | "use-credentials";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/BlessCropper.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,212 @@
+import e from "./BlessButton.js";
+import { initialBox as t, moveBox as n, resizeBox as r, scaleBox as i } from "../composables/cropBox.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as ee, onBeforeUnmount as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, useId as S, useModel as C, watch as w, withCtx as T } from "vue";
+//#region src/components/BlessCropper.vue?vue&type=script&setup=true&lang.ts
+var te = { class: "bless-cropper" }, ne = {
+	key: 0,
+	class: "bless-cropper__error",
+	role: "alert"
+}, re = ["aria-busy"], E = ["aria-label", "aria-describedby"], D = ["onPointerdown"], O = {
+	key: 2,
+	class: "bless-cropper__foot"
+}, k = ["id"], ie = {
+	key: 0,
+	class: "bless-cropper__controls"
+}, ae = {
+	class: "bless-cropper__live",
+	"aria-live": "polite"
+}, A = /*@__PURE__*/ f({
+	name: "BlessCropper",
+	__name: "BlessCropper",
+	props: /*@__PURE__*/ p({
+		src: {},
+		aspect: {},
+		crossorigin: { default: "anonymous" },
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		label: { default: "Crop area" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ p(["ready", "error"], ["update:modelValue"]),
+	setup(f, { expose: p, emit: A }) {
+		let j = f, M = C(f, "modelValue"), N = A, P = S(), F = v(), I = v(), L = v(null), R = v(!1), z = v(0), B = v({
+			l: 0,
+			t: 0,
+			r: 1,
+			b: 1
+		}), V = v(""), H = o(() => {
+			let e = L.value;
+			return e ? z.value % 180 ? {
+				w: e.naturalHeight,
+				h: e.naturalWidth
+			} : {
+				w: e.naturalWidth,
+				h: e.naturalHeight
+			} : {
+				w: 0,
+				h: 0
+			};
+		}), U = o(() => j.aspect && H.value.w ? j.aspect * H.value.h / H.value.w : 0), W = o(() => {
+			let { w: e, h: t } = H.value;
+			if (!e) return null;
+			let n = B.value;
+			return {
+				x: Math.round(n.l * e),
+				y: Math.round(n.t * t),
+				width: Math.round((n.r - n.l) * e),
+				height: Math.round((n.b - n.t) * t),
+				rotation: z.value
+			};
+		});
+		w(W, (e) => e && (M.value = e));
+		function G(e, t) {
+			let n = L.value, r = e.getContext("2d");
+			n && r && (e.width = Math.max(1, Math.round(H.value.w * t)), e.height = Math.max(1, Math.round(H.value.h * t)), r.translate(e.width / 2, e.height / 2), r.rotate(z.value * Math.PI / 180), r.drawImage(n, -n.naturalWidth * t / 2, -n.naturalHeight * t / 2, n.naturalWidth * t, n.naturalHeight * t));
+		}
+		let K = () => B.value = t(U.value);
+		w(() => [L.value, z.value], () => m(() => I.value && G(I.value, Math.min(1, 1024 / Math.max(H.value.w, H.value.h))))), w(() => [
+			L.value,
+			z.value,
+			j.aspect
+		], K);
+		let q;
+		w(() => [j.src, j.crossorigin], ([e, t]) => {
+			L.value = null, R.value = !1;
+			let n = new Image();
+			q = n, n.crossOrigin = t, n.onload = () => {
+				q === n && (L.value = n, N("ready"));
+			}, n.onerror = () => {
+				q === n && (R.value = !0, N("error"));
+			}, n.src = e;
+		}, { immediate: !0 }), g(() => q = void 0);
+		let J = (e) => z.value = (z.value + e + 360) % 360, Y = null, X = (e) => {
+			let t = F.value.getBoundingClientRect();
+			return {
+				x: (e.clientX - t.left) / t.width,
+				y: (e.clientY - t.top) / t.height
+			};
+		};
+		function Z(e, t) {
+			t.button || (t.currentTarget.setPointerCapture?.(t.pointerId), t.stopPropagation(), Y = {
+				h: e,
+				box: B.value,
+				...X(t)
+			});
+		}
+		function Q(e) {
+			if (!Y) return;
+			let t = X(e);
+			B.value = Y.h ? r(Y.box, Y.h, t.x, t.y, U.value) : n(Y.box, t.x - Y.x, t.y - Y.y);
+		}
+		let $ = () => Y = null;
+		function oe(e) {
+			let t = e.shiftKey ? .1 : .01, r = {
+				ArrowLeft: [-t, 0],
+				ArrowRight: [t, 0],
+				ArrowUp: [0, -t],
+				ArrowDown: [0, t]
+			};
+			if (r[e.key]) B.value = n(B.value, ...r[e.key]);
+			else if (e.key === "+" || e.key === "=") B.value = i(B.value, t * 2);
+			else if (e.key === "-" || e.key === "_") B.value = i(B.value, -t * 2);
+			else return;
+			e.preventDefault();
+			let a = W.value;
+			V.value = `${a.width} by ${a.height} pixels, from ${a.x}, ${a.y}`;
+		}
+		let se = o(() => U.value ? [
+			"nw",
+			"ne",
+			"se",
+			"sw"
+		] : [
+			"nw",
+			"n",
+			"ne",
+			"e",
+			"se",
+			"s",
+			"sw",
+			"w"
+		]), ce = o(() => ({
+			left: `${B.value.l * 100}%`,
+			top: `${B.value.t * 100}%`,
+			width: `${(B.value.r - B.value.l) * 100}%`,
+			height: `${(B.value.b - B.value.t) * 100}%`
+		}));
+		function le(e = {}) {
+			let t = W.value;
+			if (!t || !L.value) return Promise.resolve(null);
+			let n = document.createElement("canvas");
+			G(n, 1);
+			let r = e.maxWidth && t.width > e.maxWidth ? e.maxWidth / t.width : 1, i = document.createElement("canvas");
+			return i.width = Math.max(1, Math.round(t.width * r)), i.height = Math.max(1, Math.round(t.height * r)), i.getContext("2d")?.drawImage(n, t.x, t.y, t.width, t.height, 0, 0, i.width, i.height), new Promise((t) => i.toBlob(t, e.type ?? "image/png", e.quality));
+		}
+		return p({
+			toBlob: le,
+			rotate: J,
+			reset: K
+		}), (t, n) => (_(), c("div", te, [
+			R.value ? (_(), c("p", ne, "The image could not be loaded.")) : (_(), c("div", {
+				key: 1,
+				ref_key: "stage",
+				ref: F,
+				class: "bless-cropper__stage",
+				"aria-busy": !L.value
+			}, [l("canvas", {
+				ref_key: "canvas",
+				ref: I,
+				class: "bless-cropper__canvas",
+				"aria-hidden": "true"
+			}, null, 512), L.value ? (_(), c("div", {
+				key: 0,
+				class: "bless-cropper__frame",
+				tabindex: "0",
+				role: "group",
+				"aria-label": f.label,
+				"aria-describedby": `${x(P)}-hint`,
+				style: ee(ce.value),
+				onPointerdown: n[0] ||= (e) => Z(null, e),
+				onPointermove: Q,
+				onPointerup: $,
+				onPointercancel: $,
+				onKeydown: oe
+			}, [(_(!0), c(a, null, y(se.value, (e) => (_(), c("span", {
+				key: e,
+				class: h(["bless-cropper__handle", `bless-cropper__handle--${e}`]),
+				"aria-hidden": "true",
+				onPointerdown: (t) => Z(e, t),
+				onPointermove: Q,
+				onPointerup: $,
+				onPointercancel: $
+			}, null, 42, D))), 128))], 44, E)) : s("", !0)], 8, re)),
+			L.value ? (_(), c("div", O, [l("span", {
+				id: `${x(P)}-hint`,
+				class: "bless-cropper__readout"
+			}, b(W.value?.width) + " × " + b(W.value?.height) + " px · arrows move, + − resize", 9, k), f.controls ? (_(), c("span", ie, [d(e, {
+				size: "sm",
+				variant: "ghost",
+				"aria-label": "Rotate left",
+				onClick: n[1] ||= (e) => J(-90)
+			}, {
+				default: T(() => [...n[3] ||= [u("↺", -1)]]),
+				_: 1
+			}), d(e, {
+				size: "sm",
+				variant: "ghost",
+				"aria-label": "Rotate right",
+				onClick: n[2] ||= (e) => J(90)
+			}, {
+				default: T(() => [...n[4] ||= [u("↻", -1)]]),
+				_: 1
+			})])) : s("", !0)])) : s("", !0),
+			l("span", ae, b(V.value), 1)
+		]));
+	}
+});
+//#endregion
+export { A as default };

package/dist/components/BlessDiff.css

@@ -0,0 +1 @@
+.bless-diff{min-width:0;max-width:100%;font-family:var(--bless-font-sans);font-size:var(--bless-text-sm);color:var(--bless-color-text);border:var(--bless-border-width) solid var(--bless-color-border);margin:0}.bless-diff__head{justify-content:space-between;gap:var(--bless-space-3);padding:var(--bless-space-2) var(--bless-space-3);background:var(--bless-color-surface);border-bottom:var(--bless-border-width) solid var(--bless-color-border);display:flex}.bless-diff__count{gap:var(--bless-space-2);font-variant-numeric:tabular-nums;display:inline-flex}.bless-diff__plus{color:var(--bless-color-text);font-weight:600}.bless-diff__minus{color:var(--bless-color-danger-text);font-weight:600}.bless-diff__sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.bless-diff__scroll{overflow:auto}.bless-diff__scroll:focus-visible{outline:2px solid var(--bless-color-accent);outline-offset:-2px}.bless-diff__table{border-collapse:collapse;width:100%;font-family:var(--bless-font-mono,ui-monospace, monospace);font-size:var(--bless-text-sm)}.bless-diff .bless-diff__cols th{padding:var(--bless-space-1) var(--bless-space-3);text-align:start;font-family:var(--bless-font-sans);color:var(--bless-color-text-muted);font-weight:600}.bless-diff .bless-diff__table :is(td,th){padding:0 var(--bless-space-2);vertical-align:top;background:0 0;border:0}.bless-diff .bless-diff__table tr{background:0 0}.bless-diff__no{text-align:end;width:1%;min-width:3ch;color:var(--bless-color-text-muted);-webkit-user-select:none;user-select:none}.bless-diff__sign{-webkit-user-select:none;user-select:none;width:1%;font-weight:700}.bless-diff__text{white-space:pre}.bless-diff .bless-diff__row--add>td,.bless-diff .bless-diff__table td.bless-diff__cell--add{background:color-mix(in srgb, var(--bless-color-success) 24%, var(--bless-color-bg))}.bless-diff .bless-diff__row--del>td,.bless-diff .bless-diff__table td.bless-diff__cell--del{background:color-mix(in srgb, var(--bless-color-danger) 18%, var(--bless-color-bg))}.bless-diff .bless-diff__row--add>.bless-diff__no,.bless-diff .bless-diff__row--del>.bless-diff__no,.bless-diff .bless-diff__table td.bless-diff__cell--add+.bless-diff__no{color:var(--bless-color-text)}.bless-diff .bless-diff__table td.bless-diff__cell--empty{background:var(--bless-color-surface)}.bless-diff--split .bless-diff__text{border-inline-start:var(--bless-border-width) solid var(--bless-color-border);width:50%}.bless-diff .bless-diff__table .bless-diff__fold td{padding:var(--bless-space-1) var(--bless-space-3);background:var(--bless-color-surface);border-block:var(--bless-border-width) solid var(--bless-color-border)}.bless-diff__fold button{color:var(--bless-color-text-muted);font:inherit;font-family:var(--bless-font-sans);cursor:pointer;background:0 0;border:0;text-decoration:underline}.bless-diff__fold button:focus-visible{outline:2px solid var(--bless-color-accent)}

package/dist/components/BlessDiff.js

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

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /** the old text */
+    a: string;
+    /** the new text */
+    b: string;
+    mode?: "inline" | "split";
+    /** unchanged lines kept around each change; the rest fold away. Leave out to show everything */
+    context?: number;
+    lineNumbers?: boolean;
+    labelA?: string;
+    labelB?: string;
+    label?: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    mode: "inline" | "split";
+    lineNumbers: boolean;
+    labelA: string;
+    labelB: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;