blessing-ui 0.2.0 → 0.3.0

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

@@ -1,3 +1,11 @@
+export interface BlessCommandScope {
+    /** the character that starts it when typed first: `@`, `#`, `>` */
+    key: string;
+    /** the `group` of the items it searches */
+    group: string;
+    /** what it is called in the chip and the hint; defaults to the group */
+    label?: string;
+}
 export interface BlessCommandItem {
     label: string;
     value: string;
@@ -18,9 +26,24 @@ type __VLS_Props = {
     /** render inline instead of inside a modal */
     inline?: boolean;
     filter?: (item: BlessCommandItem, query: string) => boolean;
+    /** prefixes that narrow the search to one group: `[{ key: "@", group: "People" }]` */
+    scopes?: BlessCommandScope[];
+    /** put the items chosen before at the top while the search is empty */
+    recent?: boolean;
+    recentLimit?: number;
+    /** keep the history in localStorage under this key (read after mount) */
+    persist?: string;
+    labels?: Partial<{
+        recent: string;
+        scope: (label: string) => string;
+        clearScope: string;
+        scopeHint: (parts: string[]) => string;
+    }>;
 };
 type __VLS_ModelProps = {
     "open"?: boolean;
+    /** values of the items chosen so far, most recent first */
+    "history"?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare var __VLS_14: {
@@ -34,14 +57,17 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (item: BlessCommandItem) => any;
     "update:open": (value: boolean) => any;
+    "update:history": (value: string[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((item: BlessCommandItem) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:history"?: ((value: string[]) => any) | undefined;
 }>, {
     label: string;
     placeholder: string;
     emptyText: string;
     hotkey: boolean;
+    recentLimit: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/BlessCommand.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,29 @@
 import e from "./BlessModal.js";
 import t from "./BlessKbd.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode 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, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as b, toDisplayString as x, unref as S, useId as C, useModel as w, vModelText as T, watch as E, withCtx as D, withDirectives as O } from "vue";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode 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, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as ee, toDisplayString as b, unref as x, useId as S, useModel as C, vModelText as w, watch as T, withCtx as E, withDirectives as te } from "vue";
 //#region src/components/BlessCommand.vue?vue&type=script&setup=true&lang.ts
-var k = { class: "bless-command__box" }, A = { class: "bless-command__search bless-lean--field" }, j = [
+var ne = { class: "bless-command__box" }, re = { class: "bless-command__search bless-lean--field" }, ie = ["title", "aria-label"], ae = [
 	"placeholder",
 	"aria-label",
 	"aria-controls",
-	"aria-activedescendant"
-], M = ["id", "aria-label"], ee = ["aria-labelledby"], N = ["id"], P = [
+	"aria-activedescendant",
+	"aria-describedby"
+], oe = ["id"], D = ["id", "aria-label"], O = ["aria-labelledby"], se = ["id"], ce = [
 	"id",
 	"aria-selected",
 	"aria-disabled",
 	"onMousemove",
 	"onClick"
-], F = {
+], k = {
 	class: "bless-command__mark",
 	"aria-hidden": "true"
-}, I = { class: "bless-command__label" }, L = {
+}, le = { class: "bless-command__label" }, ue = {
 	class: "bless-command__empty",
 	role: "status"
-}, R = {
-	key: 0,
+}, de = {
+	key: 1,
 	class: "bless-command__footer"
-}, z = /*@__PURE__*/ l({
+}, A = /*@__PURE__*/ l({
 	name: "BlessCommand",
 	__name: "BlessCommand",
 	props: /*@__PURE__*/ u({
@@ -35,120 +36,186 @@ var k = { class: "bless-command__box" }, A = { class: "bless-command__search ble
 			default: !0
 		},
 		inline: { type: Boolean },
-		filter: {}
+		filter: {},
+		scopes: {},
+		recent: { type: Boolean },
+		recentLimit: { default: 5 },
+		persist: {},
+		labels: {}
 	}, {
 		open: {
 			type: Boolean,
 			default: !1
 		},
-		openModifiers: {}
+		openModifiers: {},
+		history: { default: () => [] },
+		historyModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u(["select"], ["update:open"]),
+	emits: /*@__PURE__*/ u(["select"], ["update:open", "update:history"]),
 	setup(l, { emit: u }) {
-		let z = l, B = w(l, "open"), V = u, H = C(), U = _(""), W = _(0), G = _(), K = (e, t) => {
+		let A = l, j = r(() => ({
+			recent: "Recent",
+			scope: (e) => `Only in ${e}`,
+			clearScope: "Search everywhere",
+			scopeHint: (e) => `Type ${e.join(", ")}`,
+			...A.labels
+		})), M = C(l, "open"), N = C(l, "history"), P = u, F = S(), I = _(""), L = _(0), R = _(), z = (e, t) => {
 			let n = [e.label, ...e.keywords ?? []].join(" ").toLowerCase();
 			return t.split(/\s+/).every((e) => n.includes(e));
-		}, q = r(() => {
-			let e = U.value.trim().toLowerCase(), t = z.filter ?? K;
-			return z.items.filter((n) => !e || t(n, e));
-		}), J = r(() => {
+		}, B = _(null);
+		T(I, (e) => {
+			if (B.value || !A.scopes?.length) return;
+			let t = A.scopes.find((t) => e.startsWith(t.key));
+			t && (B.value = t, I.value = e.slice(t.key.length).replace(/^\s+/, ""));
+		});
+		let V = (e) => e.label ?? e.group;
+		function fe() {
+			B.value = null, f(() => R.value?.focus());
+		}
+		let H = r(() => A.scopes?.length && !B.value ? j.value.scopeHint(A.scopes.map((e) => `${e.key} ${V(e)}`)) : ""), U = r(() => {
+			let e = I.value.trim().toLowerCase(), t = A.filter ?? z;
+			return (B.value ? A.items.filter((e) => e.group === B.value.group) : A.items).filter((n) => !e || t(n, e));
+		}), W = r(() => !A.recent || I.value.trim() || B.value ? [] : N.value.map((e) => A.items.find((t) => t.value === e && !t.disabled)).filter((e) => !!e).slice(0, A.recentLimit)), G = r(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of q.value) e.set(t.group ?? "", [...e.get(t.group ?? "") ?? [], t]);
-			return [...e.entries()];
-		}), Y = r(() => J.value.flatMap(([, e]) => e)), X = r(() => Y.value[W.value] ? `${H}-${Y.value[W.value].value}` : void 0);
-		E(q, () => W.value = Math.max(0, Y.value.findIndex((e) => !e.disabled))), E(B, (e) => {
-			e && (U.value = "", f(() => f(() => G.value?.focus())));
+			for (let t of U.value) e.set(t.group ?? "", [...e.get(t.group ?? "") ?? [], t]);
+			let t = [...e.entries()].map(([e, t]) => ({
+				key: e,
+				label: e,
+				items: t,
+				recent: !1
+			}));
+			return W.value.length && t.unshift({
+				key: "\0recent",
+				label: j.value.recent,
+				items: W.value,
+				recent: !0
+			}), t;
+		}), K = r(() => G.value.flatMap((e) => e.items)), q = (e, t) => `${F}-${t ? "r-" : ""}${e.value}`, J = r(() => {
+			let e = 0;
+			for (let t of G.value) for (let n of t.items) if (e++ === L.value) return q(n, t.recent);
+		}), Y = (e) => G.value.slice(0, e).reduce((e, t) => e + t.items.length, 0);
+		T(U, () => L.value = Math.max(0, K.value.findIndex((e) => !e.disabled))), T(B, () => L.value = Math.max(0, K.value.findIndex((e) => !e.disabled))), T(M, (e) => {
+			e && (I.value = "", B.value = null, f(() => f(() => R.value?.focus())));
 		});
-		function Z(e) {
-			let t = Y.value.length;
+		function X(e) {
+			let t = K.value.length;
 			if (!t) return;
-			let n = W.value;
-			for (let r = 0; r < t && (n = (n + e + t) % t, Y.value[n].disabled); r++);
-			W.value = n, f(() => document.getElementById(X.value ?? "")?.scrollIntoView?.({ block: "nearest" }));
+			let n = L.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, K.value[n].disabled); r++);
+			L.value = n, f(() => document.getElementById(J.value ?? "")?.scrollIntoView?.({ block: "nearest" }));
+		}
+		let Z = r(() => A.persist ? `bless-command:${A.persist}` : null);
+		function pe(e) {
+			if (!A.recent) return;
+			let t = [e.value, ...N.value.filter((t) => t !== e.value)].slice(0, 20);
+			N.value = t;
+			try {
+				Z.value && localStorage.setItem(Z.value, JSON.stringify(t));
+			} catch {}
 		}
-		function Q(e = Y.value[W.value]) {
-			e && !e.disabled && (V("select", e), z.inline || (B.value = !1));
+		function Q(e = K.value[L.value]) {
+			e && !e.disabled && (pe(e), P("select", e), A.inline || (M.value = !1));
 		}
-		function te(e) {
-			e.key === "ArrowDown" ? (e.preventDefault(), Z(1)) : e.key === "ArrowUp" ? (e.preventDefault(), Z(-1)) : e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Home" ? (e.preventDefault(), W.value = 0) : e.key === "End" && (e.preventDefault(), W.value = Y.value.length - 1);
+		function me(e) {
+			e.key === "ArrowDown" ? (e.preventDefault(), X(1)) : e.key === "ArrowUp" ? (e.preventDefault(), X(-1)) : e.key === "Enter" ? (e.preventDefault(), Q()) : e.key === "Backspace" && !I.value && B.value ? (e.preventDefault(), B.value = null) : e.key === "Home" ? (e.preventDefault(), L.value = 0) : e.key === "End" && (e.preventDefault(), L.value = K.value.length - 1);
 		}
 		function $(e) {
-			e.target?.closest?.("[contenteditable]:not([contenteditable=\"false\"])") || z.hotkey && !z.inline && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), B.value = !B.value);
+			e.target?.closest?.("[contenteditable]:not([contenteditable=\"false\"])") || A.hotkey && !A.inline && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), M.value = !M.value);
 		}
-		return h(() => addEventListener("keydown", $)), m(() => removeEventListener("keydown", $)), (r, u) => (g(), i(b(l.inline ? "div" : e), d(l.inline ? {} : {
-			modelValue: B.value,
-			"onUpdate:modelValue": (e) => B.value = e,
+		return h(() => {
+			addEventListener("keydown", $);
+			try {
+				let e = Z.value && localStorage.getItem(Z.value), t = e ? JSON.parse(e) : null;
+				Array.isArray(t) && !N.value.length && (N.value = t.filter((e) => typeof e == "string"));
+			} catch {}
+		}), m(() => removeEventListener("keydown", $)), (r, u) => (g(), i(ee(l.inline ? "div" : e), d(l.inline ? {} : {
+			modelValue: M.value,
+			"onUpdate:modelValue": (e) => M.value = e,
 			size: "md"
 		}, { class: ["bless-command", { "bless-command--inline": l.inline }] }), {
-			default: D(() => [s("div", k, [
-				s("div", A, [
-					u[2] ||= s("span", {
+			default: E(() => [s("div", ne, [
+				s("div", re, [
+					u[3] ||= s("span", {
 						class: "bless-command__icon",
 						"aria-hidden": "true"
 					}, "⌕", -1),
-					O(s("input", {
+					B.value ? (g(), o("button", {
+						key: 0,
+						type: "button",
+						class: "bless-command__scope",
+						title: j.value.clearScope,
+						"aria-label": `${j.value.scope(V(B.value))}. ${j.value.clearScope}`,
+						onClick: fe
+					}, [c(b(V(B.value)) + " ", 1), u[1] ||= s("span", { "aria-hidden": "true" }, "×", -1)], 8, ie)) : a("", !0),
+					te(s("input", {
 						ref_key: "input",
-						ref: G,
-						"onUpdate:modelValue": u[0] ||= (e) => U.value = e,
+						ref: R,
+						"onUpdate:modelValue": u[0] ||= (e) => I.value = e,
 						type: "text",
 						class: "bless-command__input",
 						placeholder: l.placeholder,
 						role: "combobox",
-						"aria-label": l.label,
+						"aria-label": B.value ? `${l.label}: ${j.value.scope(V(B.value))}` : l.label,
 						"aria-autocomplete": "list",
 						"aria-expanded": !0,
-						"aria-controls": `${S(H)}-list`,
-						"aria-activedescendant": X.value,
+						"aria-controls": `${x(F)}-list`,
+						"aria-activedescendant": J.value,
+						"aria-describedby": H.value ? `${x(F)}-hint` : void 0,
 						autocomplete: "off",
 						spellcheck: "false",
-						onKeydown: te
-					}, null, 40, j), [[T, U.value]]),
-					l.inline ? a("", !0) : (g(), i(t, { key: 0 }, {
-						default: D(() => [...u[1] ||= [c("Esc", -1)]]),
+						onKeydown: me
+					}, null, 40, ae), [[w, I.value]]),
+					l.inline ? a("", !0) : (g(), i(t, { key: 1 }, {
+						default: E(() => [...u[2] ||= [c("Esc", -1)]]),
 						_: 1
 					}))
 				]),
+				H.value ? (g(), o("p", {
+					key: 0,
+					id: `${x(F)}-hint`,
+					class: "bless-command__hint"
+				}, b(H.value), 9, oe)) : a("", !0),
 				s("div", {
-					id: `${S(H)}-list`,
+					id: `${x(F)}-list`,
 					class: "bless-command__list",
 					role: "listbox",
 					"aria-label": l.label
-				}, [(g(!0), o(n, null, v(J.value, ([e, l]) => (g(), o("div", {
-					key: e,
+				}, [(g(!0), o(n, null, v(G.value, (e, l) => (g(), o("div", {
+					key: e.key,
 					role: "group",
-					"aria-labelledby": e ? `${S(H)}-g-${J.value.findIndex(([t]) => t === e)}` : void 0,
+					"aria-labelledby": e.label ? `${x(F)}-g-${l}` : void 0,
 					class: "bless-command__section"
-				}, [e ? (g(), o("div", {
+				}, [e.label ? (g(), o("div", {
 					key: 0,
-					id: `${S(H)}-g-${J.value.findIndex(([t]) => t === e)}`,
+					id: `${x(F)}-g-${l}`,
 					class: "bless-command__group",
 					"aria-hidden": "true"
-				}, x(e), 9, N)) : a("", !0), (g(!0), o(n, null, v(l, (e) => (g(), o("div", {
-					key: e.value,
-					id: `${S(H)}-${e.value}`,
-					class: p(["bless-command__item", { "bless-command__item--active": Y.value[W.value] === e }]),
+				}, b(e.label), 9, se)) : a("", !0), (g(!0), o(n, null, v(e.items, (n, u) => (g(), o("div", {
+					key: n.value,
+					id: q(n, e.recent),
+					class: p(["bless-command__item", { "bless-command__item--active": L.value === Y(l) + u }]),
 					role: "option",
-					"aria-selected": Y.value[W.value] === e,
-					"aria-disabled": e.disabled || void 0,
-					onMousemove: (t) => W.value = Y.value.indexOf(e),
-					onClick: (t) => Q(e)
+					"aria-selected": L.value === Y(l) + u,
+					"aria-disabled": n.disabled || void 0,
+					onMousemove: (e) => L.value = Y(l) + u,
+					onClick: (e) => Q(n)
 				}, [
-					s("span", F, x(e.icon ?? ""), 1),
-					s("span", I, [y(r.$slots, "item", { item: e }, () => [c(x(e.label), 1)])]),
-					e.shortcut ? (g(), i(t, {
+					s("span", k, b(n.icon ?? ""), 1),
+					s("span", le, [y(r.$slots, "item", { item: n }, () => [c(b(n.label), 1)])]),
+					n.shortcut ? (g(), i(t, {
 						key: 0,
 						class: "bless-command__shortcut"
 					}, {
-						default: D(() => [c(x(e.shortcut), 1)]),
+						default: E(() => [c(b(n.shortcut), 1)]),
 						_: 2
 					}, 1024)) : a("", !0)
-				], 42, P))), 128))], 8, ee))), 128))], 8, M),
-				s("p", L, x(Y.value.length ? "" : l.emptyText), 1),
-				r.$slots.footer ? (g(), o("div", R, [y(r.$slots, "footer")])) : a("", !0)
+				], 42, ce))), 128))], 8, O))), 128))], 8, D),
+				s("p", ue, b(K.value.length ? "" : l.emptyText), 1),
+				r.$slots.footer ? (g(), o("div", de, [y(r.$slots, "footer")])) : a("", !0)
 			])]),
 			_: 3
 		}, 16, ["class"]));
 	}
 });
 //#endregion
-export { z as default };
+export { A as default };

package/dist/components/BlessConfetti.css

@@ -0,0 +1 @@
+.bless-confetti{pointer-events:none;width:100vw;height:100vh;z-index:calc(var(--bless-z-modal) + 1);position:fixed;inset:0}

package/dist/components/BlessConfetti.js

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

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

@@ -0,0 +1,40 @@
+type __VLS_Props = {
+    /** pieces per burst */
+    count?: number;
+    /** token names (`chart-2`, `accent`…) or CSS colours */
+    colors?: string[];
+    /** milliseconds until the last piece has faded */
+    duration?: number;
+    /** width of the cone the pieces leave in, degrees; 360 is all around */
+    spread?: number;
+    /** launch strength, px per second */
+    power?: number;
+    gravity?: number;
+};
+declare function stop(): void;
+/**
+ * Throw a burst. `from` is a point in viewport px or an element to burst out of (default: the
+ * middle of the window); `angle` points the cone (default straight up). Does nothing under
+ * `prefers-reduced-motion`.
+ */
+declare function fire(from?: {
+    x: number;
+    y: number;
+} | HTMLElement, angle?: number): undefined;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
+    fire: typeof fire;
+    stop: typeof stop;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    done: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: (() => any) | undefined;
+}>, {
+    duration: number;
+    count: number;
+    colors: string[];
+    spread: number;
+    power: number;
+    gravity: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/BlessConfetti.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+import { reducedMotion as e } from "../composables/useMedia.js";
+import { burst as t, step as n } from "../composables/confetti.js";
+import { createElementBlock as r, defineComponent as i, onBeforeUnmount as a, openBlock as o, ref as s } from "vue";
+//#region src/components/BlessConfetti.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ i({
+	name: "BlessConfetti",
+	__name: "BlessConfetti",
+	props: {
+		count: { default: 90 },
+		colors: { default: () => [
+			"chart-1",
+			"chart-2",
+			"chart-3",
+			"chart-4",
+			"chart-5",
+			"warning"
+		] },
+		duration: { default: 2200 },
+		spread: { default: 80 },
+		power: { default: 900 },
+		gravity: { default: 1400 }
+	},
+	emits: ["done"],
+	setup(i, { expose: c, emit: l }) {
+		let u = i, d = l, f = s(), p = [], m = 0, h = 0, g = (e) => /^[a-z0-9-]+$/i.test(e) && f.value && getComputedStyle(f.value).getPropertyValue(`--bless-color-${e}`).trim() || e;
+		function _(e) {
+			let t = f.value, r = t?.getContext("2d");
+			if (!t || !r) return v();
+			let i = Math.min(.05, (e - h) / 1e3);
+			h = e, r.clearRect(0, 0, t.width, t.height);
+			let a = window.devicePixelRatio || 1;
+			for (let e of p) n(e, i, u.gravity, u.duration / 1e3), !(e.life <= 0) && (r.save(), r.globalAlpha = Math.min(1, e.life * 3), r.fillStyle = e.color, r.translate(e.x * a, e.y * a), r.rotate(e.rot), e.round ? (r.beginPath(), r.arc(0, 0, e.size * a / 2, 0, Math.PI * 2), r.fill()) : r.fillRect(-e.size * a / 2, -e.size * a / 3, e.size * a, e.size * a / 1.6), r.restore());
+			p = p.filter((e) => e.life > 0 && e.y < window.innerHeight + 40), p.length ? m = requestAnimationFrame(_) : (v(), d("done"));
+		}
+		function v() {
+			cancelAnimationFrame(m), m = 0, p = [];
+			let e = f.value;
+			e?.getContext("2d")?.clearRect(0, 0, e.width, e.height);
+		}
+		function y(n, r = 270) {
+			let i = f.value;
+			if (!i || e()) return void d("done");
+			let a = window.devicePixelRatio || 1;
+			i.width = window.innerWidth * a, i.height = window.innerHeight * a;
+			let o = {
+				x: window.innerWidth / 2,
+				y: window.innerHeight * .65
+			};
+			if (n instanceof HTMLElement) {
+				let e = n.getBoundingClientRect();
+				o = {
+					x: e.left + e.width / 2,
+					y: e.top + e.height / 2
+				};
+			} else n && (o = n);
+			p.push(...t({
+				count: u.count,
+				origin: o,
+				angle: r,
+				spread: u.spread,
+				power: u.power,
+				colors: u.colors.map(g)
+			})), m ||= (h = performance.now(), requestAnimationFrame(_));
+		}
+		return a(v), c({
+			fire: y,
+			stop: v
+		}), (e, t) => (o(), r("canvas", {
+			ref_key: "canvas",
+			ref: f,
+			class: "bless-confetti",
+			"aria-hidden": "true"
+		}, null, 512));
+	}
+});
+//#endregion
+export { c as default };

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

@@ -18,6 +18,14 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** show the rotate buttons */
     controls?: boolean;
     label?: string;
+    /** the crop readout said after a keystroke, the hint under the image and the rotate buttons */
+    labels?: Partial<{
+        size: (width: number, height: number, x: number, y: number) => string;
+        hint: string;
+        rotateLeft: string;
+        rotateRight: string;
+        loadError: string;
+    }>;
 } & {
     modelValue?: BlessCropRect | null;
 }, {
@@ -41,6 +49,14 @@ declare const __VLS_export: import('vue').DefineComponent<{
     /** show the rotate buttons */
     controls?: boolean;
     label?: string;
+    /** the crop readout said after a keystroke, the hint under the image and the rotate buttons */
+    labels?: Partial<{
+        size: (width: number, height: number, x: number, y: number) => string;
+        hint: string;
+        rotateLeft: string;
+        rotateRight: string;
+        loadError: string;
+    }>;
 } & {
     modelValue?: BlessCropRect | null;
 }> & Readonly<{