@feugene/granularity-media 0.1.0

package/README.md

@@ -0,0 +1,80 @@
+# `@feugene/granularity-media`
+
+Работа с изображением и камерой для `@feugene/granularity`. Первый компонент —
+`GrImageCrop`: пользователь выбирает кадр, приложение получает готовый `Blob`.
+
+```bash
+yarn add @feugene/granularity-media
+```
+
+Своих зависимостей у пакета нет: кадрирование держится на Canvas и браузерных
+API, а не на библиотеке. Наружу объявлены только peer — ядро, пресет и Vue.
+
+## Быстрый старт
+
+```vue
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import { GrImageCrop } from '@feugene/granularity-media'
+
+const file = ref<File | null>(null)
+const cropper = useTemplateRef('cropper')
+
+async function save() {
+  const blob = await cropper.value?.crop()
+  if (blob)
+    await fetch('/api/avatar', { method: 'POST', body: blob })
+}
+</script>
+
+<template>
+  <GrImageCrop ref="cropper" :src="file" shape="circle" :output="{ width: 256, height: 256 }" />
+  <button @click="save">Сохранить</button>
+</template>
+```
+
+## Рамка неподвижна, двигается картинка
+
+Обратная модель — рамка ездит по изображению — требует двух жестов вместо
+одного, а её угловые ручки на телефоне меньше пальца. Здесь жест один: тянуть
+картинку, а увеличение живёт отдельным контролом (по умолчанию `GrSlider` ядра,
+заменяется слотом `#controls`).
+
+Соотношение сторон кадра задаёт приложение (`aspectRatio`), а не пользователь:
+место, куда картинка потом встанет, известно заранее.
+
+## Кадр считается в пикселях исходника
+
+Без `output` результат получает размер захваченной области **исходного файла**, а
+не окна на экране: окно почти всегда меньше картинки, и вывод по нему молча
+ополовинил бы разрешение. Нужен точный размер — он задаётся явно.
+
+## Что внутри
+
+| | |
+| --- | --- |
+| **Жест** | перетаскивание на `useDragGesture` ядра: оборванный жест откатывается, а не коммитит |
+| **Клавиатура** | стрелки двигают кадр, `+`/`-` меняют увеличение, `Home` сбрасывает |
+| **Экспорт** | `crop()` отдаёт `Blob`; тип и качество — `output.type`, `output.quality` |
+| **Формы кадра** | прямоугольник и круг (`shape="circle"` — маска показа, результат остаётся прямоугольным) |
+| **Серверный рендер** | браузерного API в `setup` нет, оборачивать в `<ClientOnly>` не нужно |
+
+## Подключение к сборке
+
+Провайдер — рядом с ядром, резолвер — **перед** жадным `GranularityResolver()`:
+
+```ts
+presetGranularNode({
+  providers: [granularityProvider, granularityMediaProvider],
+  components: ['@feugene/granularity-media:GrImageCrop'],
+})
+```
+
+Локали подключаются тем же `createFintI18n`, что и словари ядра — блок
+`GR_MEDIA_I18N_BLOCK`.
+
+## Документация
+
+- [`docs/components.md`](./docs/components.md) — состав пакета;
+- [`docs/components/GrImageCrop.md`](./docs/components/GrImageCrop.md) — страница компонента;
+- [`docs/keyboard.md`](./docs/keyboard.md), [`docs/ssr.md`](./docs/ssr.md) — сквозные правила пакета.

package/dist/chunks/config-CrV_FDnM.js

@@ -0,0 +1,38 @@
+import { defineGranularComponent as e } from "@feugene/unocss-preset-granular/contract";
+//#region src/internal/classTokens.ts
+function t(e) {
+	return e.split(/\s+/).filter(Boolean);
+}
+//#endregion
+//#region src/components/GrImageCrop/grImageCropStyles.ts
+var n = "grid gap-2", r = "relative w-full select-none overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]", i = "pointer-events-none absolute left-1/2 top-1/2 max-w-none origin-center", a = "pointer-events-none absolute inset-0 m-auto aspect-square rounded-[var(--gr-radius-full)] border border-[var(--gr-image-crop-guide,var(--gr-brd))] shadow-[0_0_0_9999px_var(--gr-image-crop-mask,rgb(0_0_0/0.55))]", o = "pointer-events-none absolute inset-0 border border-[var(--gr-image-crop-guide,var(--gr-brd))]", s = "transition-transform duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-out)]", c = "flex items-center gap-3", l = "flex items-center justify-center text-[var(--gr-muted-fg)]", u = {
+	xs: "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]",
+	sm: "text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]",
+	md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]",
+	lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]"
+}, d = {
+	xs: "min-h-32",
+	sm: "min-h-40",
+	md: "min-h-48",
+	lg: "min-h-56"
+}, f = [
+	...t(n),
+	...t(r),
+	...t(i),
+	...t(s),
+	...t(a),
+	...t(o),
+	...t(c),
+	...t(l),
+	...Object.values(u).flatMap(t),
+	...Object.values(d).flatMap(t)
+], p = e(import.meta.url, {
+	name: "GrImageCrop",
+	safelist: f,
+	dependencies: [{
+		provider: "@feugene/granularity",
+		components: ["GrSlider"]
+	}]
+});
+//#endregion
+export { f as a, o as c, u as d, r as f, l as i, n as l, a as n, i as o, c as r, s, p as t, d as u };

package/dist/chunks/en-BrjpU7lq.js

@@ -0,0 +1,13 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+//#region src/i18n/locales/en.json
+var t = /* @__PURE__ */ e({
+	default: () => r,
+	imageCrop: () => n
+}), n = {
+	label: "Image crop",
+	frame: "Frame: arrow keys move the image, plus and minus zoom",
+	empty: "No image selected",
+	zoom: "Zoom"
+}, r = { imageCrop: n };
+//#endregion
+export { t as n, r as t };

package/dist/chunks/es-BdTkuOLs.js

@@ -0,0 +1,13 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+//#region src/i18n/locales/es.json
+var t = /* @__PURE__ */ e({
+	default: () => r,
+	imageCrop: () => n
+}), n = {
+	label: "Recorte de imagen",
+	frame: "Marco: las flechas mueven la imagen, más y menos ajustan el zoom",
+	empty: "Ninguna imagen seleccionada",
+	zoom: "Zoom"
+}, r = { imageCrop: n };
+//#endregion
+export { t as n, r as t };

package/dist/chunks/rolldown-runtime-Dy4uBu1J.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t };

package/dist/chunks/ru-ByR24Aqk.js

@@ -0,0 +1,13 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+//#region src/i18n/locales/ru.json
+var t = /* @__PURE__ */ e({
+	default: () => r,
+	imageCrop: () => n
+}), n = {
+	label: "Кадрирование изображения",
+	frame: "Кадр: стрелки двигают изображение, плюс и минус меняют увеличение",
+	empty: "Изображение не выбрано",
+	zoom: "Увеличение"
+}, r = { imageCrop: n };
+//#endregion
+export { t as n, r as t };

package/dist/chunks/ru-C4IsSzR5.js

@@ -0,0 +1,4 @@
+//#region src/i18n/messages/const.ts
+var e = "grMedia", t = { en: { [e]: async () => import("./en-BrjpU7lq.js").then((e) => e.n) } }, n = { es: { [e]: async () => import("./es-BdTkuOLs.js").then((e) => e.n) } }, r = { ru: { [e]: async () => import("./ru-ByR24Aqk.js").then((e) => e.n) } };
+//#endregion
+export { e as i, n, t as r, r as t };

package/dist/components/GrImageCrop/chunks/GrImageCrop-DYM2vZHV.js

@@ -0,0 +1,271 @@
+import { c as e, d as t, f as n, i as r, l as i, n as a, o, r as s, s as c, u as l } from "../../../chunks/config-CrV_FDnM.js";
+import { Fragment as u, computed as d, createCommentVNode as ee, createElementBlock as f, createElementVNode as p, createVNode as te, defineComponent as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as ne, openBlock as v, ref as y, renderSlot as b, shallowRef as x, toDisplayString as re, unref as S, watch as ie } from "vue";
+import ae from "@feugene/granularity/components/GrSlider";
+import { useDragGesture as oe } from "@feugene/granularity/composables/useDragGesture";
+import { useGrComponentSize as se } from "@feugene/granularity/composables/useGrComponentConfig";
+import { useGranularityTranslations as ce } from "@feugene/granularity/composables/useGranularityTranslations";
+//#region src/components/GrImageCrop/cropGeometry.ts
+function C(e, t) {
+	return e.width <= 0 || e.height <= 0 ? 1 : Math.max(t.width / e.width, t.height / e.height);
+}
+function w(e, t, n) {
+	let r = C(e, t) * n;
+	return {
+		width: e.width * r,
+		height: e.height * r
+	};
+}
+function T(e, t, n) {
+	let r = w(e, t, n);
+	return {
+		x: Math.max(0, (r.width - t.width) / 2),
+		y: Math.max(0, (r.height - t.height) / 2)
+	};
+}
+function E(e, t, n, r) {
+	let i = T(t, n, r);
+	return {
+		x: Math.min(i.x, Math.max(-i.x, e.x)),
+		y: Math.min(i.y, Math.max(-i.y, e.y))
+	};
+}
+function D(e, t, n, r) {
+	let i = C(e, t) * n;
+	if (i <= 0) return {
+		sx: 0,
+		sy: 0,
+		sw: 0,
+		sh: 0
+	};
+	let a = E(r, e, t, n), o = w(e, t, n);
+	return {
+		sx: (o.width - t.width) / 2 / i - a.x / i,
+		sy: (o.height - t.height) / 2 / i - a.y / i,
+		sw: t.width / i,
+		sh: t.height / i
+	};
+}
+function O(e, t) {
+	return {
+		width: e,
+		height: e / (t > 0 ? t : 1)
+	};
+}
+//#endregion
+//#region src/components/GrImageCrop/GrImageCrop.vue?vue&type=script&setup=true&lang.ts
+var le = ["aria-label"], ue = [
+	"tabindex",
+	"aria-label",
+	"aria-disabled"
+], de = ["src"], k = 12, A = .15, j = /* @__PURE__ */ m({
+	__name: "GrImageCrop",
+	props: {
+		src: { default: null },
+		aspectRatio: { default: 1 },
+		shape: { default: "rect" },
+		zoom: { default: 1 },
+		maxZoom: { default: 4 },
+		output: { default: void 0 },
+		size: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:zoom",
+		"change",
+		"load",
+		"error"
+	],
+	setup(m, { expose: C, emit: w }) {
+		let T = m, j = w, { t: M } = ce(), N = se(() => T.size, { component: "GrImageCrop" }), P = y(null), F = x(null), I = y({
+			width: 0,
+			height: 0
+		}), L = y(0), R = y({
+			x: 0,
+			y: 0
+		}), z = y(null), B = d(() => O(L.value, T.aspectRatio)), V = d(() => F.value !== null && I.value.width > 0), H = d(() => Math.min(T.maxZoom, Math.max(1, T.zoom))), fe = d(() => {
+			let e = B.value.width > 0 && I.value.width > 0 ? Math.max(B.value.width / I.value.width, B.value.height / I.value.height) * H.value : 1;
+			return {
+				width: `${I.value.width}px`,
+				height: `${I.value.height}px`,
+				transform: `translate(-50%, -50%) translate(${R.value.x}px, ${R.value.y}px) scale(${e})`
+			};
+		});
+		function U() {
+			return D(I.value, B.value, H.value, R.value);
+		}
+		function W() {
+			V.value && j("change", U());
+		}
+		function G(e, t) {
+			T.disabled || !V.value || (R.value = E({
+				x: R.value.x + e,
+				y: R.value.y + t
+			}, I.value, B.value, H.value), W());
+		}
+		function K(e) {
+			if (T.disabled) return;
+			let t = Math.min(T.maxZoom, Math.max(1, e));
+			j("update:zoom", t), R.value = E(R.value, I.value, B.value, t), W();
+		}
+		function q() {
+			R.value = {
+				x: 0,
+				y: 0
+			}, j("update:zoom", 1), W();
+		}
+		let J = y({
+			x: 0,
+			y: 0
+		}), Y = y({
+			x: 0,
+			y: 0
+		}), X = oe({
+			disabled: () => T.disabled || !V.value,
+			onStart: (e) => {
+				J.value = {
+					x: e.clientX,
+					y: e.clientY
+				}, Y.value = { ...R.value };
+			},
+			onMove: (e) => {
+				R.value = E({
+					x: Y.value.x + (e.clientX - J.value.x),
+					y: Y.value.y + (e.clientY - J.value.y)
+				}, I.value, B.value, H.value);
+			},
+			onEnd: () => W(),
+			onCancel: () => {
+				R.value = Y.value;
+			}
+		});
+		function pe(e) {
+			T.disabled || !V.value || (e.preventDefault(), K(H.value + (e.deltaY < 0 ? A : -.15)));
+		}
+		function me(e) {
+			let t = {
+				ArrowLeft: () => G(k, 0),
+				ArrowRight: () => G(-12, 0),
+				ArrowUp: () => G(0, k),
+				ArrowDown: () => G(0, -12),
+				"+": () => K(H.value + A),
+				"=": () => K(H.value + A),
+				"-": () => K(H.value - A),
+				Home: () => q()
+			}[e.key];
+			t && (e.preventDefault(), t());
+		}
+		function Z() {
+			z.value &&= (URL.revokeObjectURL(z.value), null);
+		}
+		function he(e) {
+			if (!e) return null;
+			if (typeof e == "string") return e;
+			let t = URL.createObjectURL(e);
+			return z.value = t, t;
+		}
+		function Q(e) {
+			Z();
+			let t = he(e);
+			if (!t) {
+				F.value = null, I.value = {
+					width: 0,
+					height: 0
+				};
+				return;
+			}
+			let n = new Image();
+			n.crossOrigin = "anonymous", n.addEventListener("load", () => {
+				F.value = n, I.value = {
+					width: n.naturalWidth,
+					height: n.naturalHeight
+				}, R.value = {
+					x: 0,
+					y: 0
+				}, j("load", { ...I.value }), W();
+			}), n.addEventListener("error", (e) => j("error", e)), n.src = t;
+		}
+		let $ = null;
+		ne(() => {
+			P.value && (L.value = P.value.clientWidth, $ = new ResizeObserver(([e]) => {
+				L.value = e?.contentRect.width ?? 0, R.value = E(R.value, I.value, B.value, H.value);
+			}), $.observe(P.value)), Q(T.src);
+		}), _(() => {
+			$?.disconnect(), $ = null, Z();
+		}), ie(() => T.src, (e) => Q(e));
+		async function ge() {
+			let e = F.value;
+			if (!e || !V.value) return null;
+			let t = U(), n = document.createElement("canvas");
+			n.width = Math.max(1, Math.round(T.output?.width ?? t.sw)), n.height = Math.max(1, Math.round(T.output?.height ?? t.sh));
+			let r = n.getContext("2d");
+			if (!r) return null;
+			r.drawImage(e, t.sx, t.sy, t.sw, t.sh, 0, 0, n.width, n.height);
+			try {
+				return await new Promise((e) => {
+					n.toBlob(e, T.output?.type ?? "image/png", T.output?.quality);
+				});
+			} catch (e) {
+				return typeof process < "u" && process.env.NODE_ENV !== "production" && console.warn("[granularity-media] GrImageCrop: экспорт кадра запрещён политикой источника. Картинка приехала с другого домена без заголовка `Access-Control-Allow-Origin`, и холст стал непригоден для чтения."), j("error", e), null;
+			}
+		}
+		return C({
+			crop: ge,
+			reset: q,
+			rect: U
+		}), (d, _) => (v(), f("div", {
+			class: h(S(i)),
+			role: "group",
+			"aria-label": m.ariaLabel ?? S(M)("grMedia.imageCrop.label", "Image crop")
+		}, [p("div", {
+			ref_key: "viewportEl",
+			ref: P,
+			role: "application",
+			class: h([S(n), V.value ? "" : [S(r), S(l)[S(N)]]]),
+			style: g(V.value ? { aspectRatio: String(m.aspectRatio) } : void 0),
+			tabindex: m.disabled || !V.value ? -1 : 0,
+			"aria-label": S(M)("grMedia.imageCrop.frame", "Frame: arrow keys move the image, plus and minus zoom"),
+			"aria-disabled": m.disabled || void 0,
+			onPointerdown: _[0] ||= (...e) => S(X).start && S(X).start(...e),
+			onWheel: pe,
+			onKeydown: me
+		}, [V.value ? (v(), f(u, { key: 0 }, [p("img", {
+			src: F.value.src,
+			alt: "",
+			class: h([S(o), S(X).isDragging.value ? "" : S(c)]),
+			style: g(fe.value)
+		}, null, 14, de), m.shape === "circle" ? (v(), f("div", {
+			key: 0,
+			class: h(S(a))
+		}, null, 2)) : (v(), f("div", {
+			key: 1,
+			class: h(S(e))
+		}, null, 2))], 64)) : b(d.$slots, "empty", {}, () => [p("span", { class: h(S(t)[S(N)]) }, re(S(M)("grMedia.imageCrop.empty", "No image selected")), 3)], void 0, 1)], 46, ue), V.value ? (v(), f("div", {
+			key: 0,
+			class: h(S(s))
+		}, [b(d.$slots, "controls", {
+			zoom: H.value,
+			setZoom: K
+		}, () => [te(S(ae), {
+			"model-value": H.value,
+			min: 1,
+			max: m.maxZoom,
+			step: .01,
+			size: S(N),
+			disabled: m.disabled,
+			"aria-label": S(M)("grMedia.imageCrop.zoom", "Zoom"),
+			"onUpdate:modelValue": _[1] ||= (e) => K(Number(e))
+		}, null, 8, [
+			"model-value",
+			"max",
+			"size",
+			"disabled",
+			"aria-label"
+		])])], 2)) : ee("", !0)], 10, le));
+	}
+});
+//#endregion
+export { w as a, D as i, E as n, T as o, C as r, O as s, j as t };

package/dist/components/GrImageCrop/index.js

@@ -0,0 +1,3 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./chunks/GrImageCrop-DYM2vZHV.js";
+import { a as s, t as c } from "../../chunks/config-CrV_FDnM.js";
+export { o as GrImageCrop, o as default, n as clampOffset, i as coverScale, t as cropRect, e as displaySize, c as grImageCropConfig, s as grImageCropSafelist, r as offsetBounds, a as viewportFor };

package/dist/granular-provider-node.js

@@ -0,0 +1,2 @@
+import e, { GRANULARITY_MEDIA_PROVIDER_ID as t, createGranularityMediaProvider as n, granularityMediaComponentConfigs as r } from "./granular-provider.js";
+export { t as GRANULARITY_MEDIA_PROVIDER_ID, n as createGranularityMediaProvider, e as default, e as granularityMediaProvider, r as granularityMediaComponentConfigs };

package/dist/granular-provider.js

@@ -0,0 +1,17 @@
+import { t as e } from "./chunks/config-CrV_FDnM.js";
+import { defineGranularProvider as t, resolvePackageBaseUrl as n } from "@feugene/unocss-preset-granular/contract";
+import { granularityProvider as r } from "@feugene/granularity/granular-provider";
+//#region src/granular-provider/shared.ts
+var i = "@feugene/granularity-media", a = { GrImageCrop: e };
+function o(e, n) {
+	return t({
+		id: i,
+		contractVersion: 1,
+		packageBaseUrl: n,
+		components: Object.values(a),
+		dependencies: [e]
+	});
+}
+var s = o(r, n(import.meta.url, 0));
+//#endregion
+export { i as GRANULARITY_MEDIA_PROVIDER_ID, o as createGranularityMediaProvider, s as default, s as granularityMediaProvider, a as granularityMediaComponentConfigs };

package/dist/i18n/all.js

@@ -0,0 +1,9 @@
+import { n as e, r as t, t as n } from "../chunks/ru-C4IsSzR5.js";
+//#region src/i18n/all.ts
+var r = [
+	t,
+	n,
+	e
+];
+//#endregion
+export { r as all, r as default };

package/dist/i18n/index.js

@@ -0,0 +1,12 @@
+import { t as e } from "../chunks/en-BrjpU7lq.js";
+import { t } from "../chunks/es-BdTkuOLs.js";
+import { t as n } from "../chunks/ru-ByR24Aqk.js";
+import { i as r, n as i, r as a, t as o } from "../chunks/ru-C4IsSzR5.js";
+//#region src/i18n/index.ts
+var s = {
+	en: e,
+	es: t,
+	ru: n
+};
+//#endregion
+export { r as GR_MEDIA_I18N_BLOCK, a as en, i as es, s as grMediaMessages, o as ru };

package/dist/index.js

@@ -0,0 +1,3 @@
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./components/GrImageCrop/chunks/GrImageCrop-DYM2vZHV.js";
+import { a as s, t as c } from "./chunks/config-CrV_FDnM.js";
+export { o as GrImageCrop, n as clampOffset, i as coverScale, t as cropRect, e as displaySize, c as grImageCropConfig, s as grImageCropSafelist, r as offsetBounds, a as viewportFor };

package/dist/resolver.js

@@ -0,0 +1,12 @@
+import { createGranularResolver as e } from "@feugene/unplugin-granularity";
+//#region src/componentNames.ts
+var t = ["GrImageCrop"], n = "@feugene/granularity-media";
+function r() {
+	return e({
+		packageName: n,
+		components: t,
+		importStyle: !1
+	});
+}
+//#endregion
+export { n as GRANULARITY_MEDIA_PACKAGE_NAME, r as GranularityMediaResolver };

package/dist/types/__tests__/componentDefaults.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/componentDocs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/componentTokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/emitNaming.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/envGuard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/gateCoverage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/localeCompleteness.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/registry.generated.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/__tests__/styleTokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/componentNames.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Имена компонентов пакета — одним списком без единого импорта.
+ *
+ * Модуль читают и `resolver.ts` (whitelist авто-импорта), и `vite.config.ts`
+ * (раскладка чанков и ассетов). Отдельным файлом именно поэтому: конфиг сборки
+ * исполняется до сборки, и тянуть в него `resolver.ts` значило бы грузить
+ * `unplugin-vue-components` на этапе чтения конфига.
+ *
+ * Список генерируется `yarn generate:registry` — руками не писать.
+ */
+export declare const GRANULARITY_MEDIA_COMPONENTS: readonly ["GrImageCrop"];
+export type GranularityMediaComponentName = typeof GRANULARITY_MEDIA_COMPONENTS[number];

package/dist/types/components/GrImageCrop/GrImageCrop.vue.d.ts

@@ -0,0 +1,130 @@
+import type { GrCropRect } from './cropGeometry';
+import type { GrImageCropShape, GrImageCropSize } from './grImageCropStyles';
+export interface GrImageCropOutput {
+    /** Ширина результата. По умолчанию — ширина захваченной области исходника. */
+    width?: number;
+    height?: number;
+    /** MIME результата: `image/png` (по умолчанию), `image/jpeg`, `image/webp`. */
+    type?: string;
+    quality?: number;
+}
+export interface GrImageCropProps {
+    /** Файл из `GrFileUpload`, blob из камеры или готовый адрес. */
+    src?: string | File | Blob | null;
+    /** Отношение ширины кадра к высоте: `1` — аватар, `16 / 9` — обложка. */
+    aspectRatio?: number;
+    shape?: GrImageCropShape;
+    /** Увеличение относительно вписанного кадра. Не меньше единицы. */
+    zoom?: number;
+    maxZoom?: number;
+    output?: GrImageCropOutput;
+    size?: GrImageCropSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+}
+export interface GrImageCropEmits {
+    (e: 'update:zoom', value: number): void;
+    /** Кадр изменился: сдвиг, увеличение или новая картинка. */
+    (e: 'change', rect: GrCropRect): void;
+    (e: 'load', size: {
+        width: number;
+        height: number;
+    }): void;
+    (e: 'error', error: unknown): void;
+}
+type __VLS_Slots = {
+    /** Замена встроенного слайдера увеличения. */
+    controls?: (props: {
+        zoom: number;
+        setZoom: (value: number) => void;
+    }) => unknown;
+    /** Что показать, пока картинки нет. */
+    empty?: () => unknown;
+};
+declare function currentRect(): GrCropRect;
+declare function reset(): void;
+/**
+ * Кадр в виде картинки.
+ *
+ * Размер по умолчанию — сама захваченная область в пикселях **исходника**, а не
+ * окна на экране: окно вдвое меньше картинки на любом ноутбуке, и вывод по нему
+ * молча ополовинил бы разрешение аватара.
+ */
+declare function toBlob(): Promise<Blob | null>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrImageCropProps>, {
+    src: null;
+    aspectRatio: number;
+    shape: string;
+    zoom: number;
+    maxZoom: number;
+    output: undefined;
+    size: undefined;
+    disabled: boolean;
+    ariaLabel: undefined;
+}>>, {
+    crop: typeof toBlob;
+    reset: typeof reset;
+    rect: typeof currentRect;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:zoom": (value: number) => void;
+    change: (rect: GrCropRect) => void;
+    load: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    error: (error: unknown) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrImageCropProps>, {
+    src: null;
+    aspectRatio: number;
+    shape: string;
+    zoom: number;
+    maxZoom: number;
+    output: undefined;
+    size: undefined;
+    disabled: boolean;
+    ariaLabel: undefined;
+}>>> & Readonly<{
+    "onUpdate:zoom"?: ((value: number) => any) | undefined;
+    onChange?: ((rect: GrCropRect) => any) | undefined;
+    onLoad?: ((size: {
+        width: number;
+        height: number;
+    }) => any) | undefined;
+    onError?: ((error: unknown) => any) | undefined;
+}>, {
+    src: string | File | Blob | null;
+    aspectRatio: number;
+    shape: GrImageCropShape;
+    zoom: number;
+    maxZoom: number;
+    output: GrImageCropOutput;
+    size: GrImageCropSize;
+    disabled: boolean;
+    ariaLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/components/GrImageCrop/__tests__/GrImageCrop.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/GrImageCrop/__tests__/cropGeometry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/GrImageCrop/config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Слайдер увеличения — `GrSlider` ядра, и ребро объявлено: пресет подмешивает
+ * safelist и CSS только тем компонентам, что попали в селекцию, и без графа
+ * потребитель, выбравший один `GrImageCrop`, получил бы дорожку без ползунка.
+ *
+ * Слот `#controls` этого не отменяет: подмену делает потребитель, а по
+ * умолчанию слайдер рендерится.
+ */
+export declare const grImageCropConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrImageCrop">;

package/dist/types/components/GrImageCrop/cropGeometry.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Геометрия кропа: где именно вырезается кадр.
+ *
+ * Модель — «рамка неподвижна, двигается изображение»: окно кропа занимает весь
+ * видимый прямоугольник, а пользователь тянет и масштабирует картинку под ним.
+ * Обратная модель (рамка ездит по картинке) требует от пользователя двух
+ * жестов вместо одного и на телефоне промахивается по ручкам рамки.
+ *
+ * Всё здесь — чистые функции над числами: ни DOM, ни canvas. Кроп ошибается
+ * незаметно (кадр съезжает на пару процентов, и это видно только на результате),
+ * поэтому арифметика вынесена туда, где её можно проверить без рендера.
+ */
+export interface GrCropSize {
+    width: number;
+    height: number;
+}
+export interface GrCropOffset {
+    x: number;
+    y: number;
+}
+/** Прямоугольник исходного изображения, попадающий в кадр. */
+export interface GrCropRect {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+}
+/**
+ * Масштаб, при котором изображение покрывает окно целиком.
+ *
+ * Именно `max`, а не `min`: при `min` картинка вписалась бы внутрь окна и по
+ * краям остались бы поля, то есть кадр содержал бы пустоту, которой в исходнике
+ * нет.
+ */
+export declare function coverScale(image: GrCropSize, viewport: GrCropSize): number;
+/** Размер изображения на экране при данном увеличении. */
+export declare function displaySize(image: GrCropSize, viewport: GrCropSize, zoom: number): GrCropSize;
+/**
+ * Насколько изображение может съехать, не обнажив край окна.
+ *
+ * Предел считается от **отображаемого** размера, а не от исходного: при
+ * увеличении запас растёт, и жёсткая граница в пикселях исходника заперла бы
+ * увеличенную картинку в центре.
+ */
+export declare function offsetBounds(image: GrCropSize, viewport: GrCropSize, zoom: number): GrCropOffset;
+/** Смещение, подрезанное до пределов: за ними в кадр попала бы пустота. */
+export declare function clampOffset(offset: GrCropOffset, image: GrCropSize, viewport: GrCropSize, zoom: number): GrCropOffset;
+/**
+ * Область исходного изображения под окном кропа.
+ *
+ * Смещение подрезается здесь же, а не доверяется вызывающему: `zoom` меняется
+ * колесом и слайдером, и уменьшение всегда сокращает пределы — смещение,
+ * законное миг назад, после него выводит кадр за край.
+ */
+export declare function cropRect(image: GrCropSize, viewport: GrCropSize, zoom: number, offset: GrCropOffset): GrCropRect;
+/**
+ * Высота окна при заданном соотношении сторон.
+ *
+ * Соотношение задаётся числом, а не строкой `'16:9'`: строку пришлось бы
+ * разбирать в рантайме, а ошибка формата всплыла бы уже на экране.
+ */
+export declare function viewportFor(width: number, aspectRatio: number): GrCropSize;

package/dist/types/components/GrImageCrop/defaults.d.ts

@@ -0,0 +1,16 @@
+import type { GrImageCropSize } from './grImageCropStyles';
+/**
+ * Настраиваемые через `GrConfigProvider` пропы.
+ *
+ * Аугментация реестра идёт по месту объявления — через
+ * `@feugene/granularity/composables/useGrComponentConfig`, а не через реэкспорт:
+ * иначе слияние отваливается молча.
+ */
+export interface GrImageCropConfigurableProps {
+    size?: GrImageCropSize;
+}
+declare module '@feugene/granularity/composables/useGrComponentConfig' {
+    interface GrComponentDefaultsRegistry {
+        GrImageCrop?: GrImageCropConfigurableProps;
+    }
+}

package/dist/types/components/GrImageCrop/grImageCropStyles.d.ts

@@ -0,0 +1,42 @@
+export type GrImageCropSize = 'xs' | 'sm' | 'md' | 'lg';
+export type GrImageCropShape = 'rect' | 'circle';
+export declare const rootClass = "grid gap-2";
+/**
+ * Окно кадра. `touch-none` не косметика: без него браузер уводит вертикальный
+ * drag в прокрутку страницы, и картинка тянется только по горизонтали.
+ */
+export declare const viewportClass = "relative w-full select-none overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] touch-none focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export declare const imageClass = "pointer-events-none absolute left-1/2 top-1/2 max-w-none origin-center";
+/**
+ * Затемнение вне круга — тенью наружу, а не вторым слоем с вырезом: вырез
+ * потребовал бы маски, а `mask-image` в presetMini не выражается и уехал бы в
+ * собственный CSS-файл ради одного правила.
+ *
+ * Граница круга обязательна и не декоративна: на тёмной теме затемнение чёрным
+ * поверх почти чёрного фона не читается вовсе, и пользователь не видит, что
+ * попадёт в кадр. Линия работает в обеих темах.
+ */
+export declare const circleMaskClass = "pointer-events-none absolute inset-0 m-auto aspect-square rounded-[var(--gr-radius-full)] border border-[var(--gr-image-crop-guide,var(--gr-brd))] shadow-[0_0_0_9999px_var(--gr-image-crop-mask,rgb(0_0_0/0.55))]";
+export declare const rectGuideClass = "pointer-events-none absolute inset-0 border border-[var(--gr-image-crop-guide,var(--gr-brd))]";
+/**
+ * Плавность включается только вне жеста: под пальцем картинка обязана идти
+ * след в след, а вот шаг слайдера и клавиши без перехода выглядят рывком.
+ */
+export declare const imageTransitionClass = "transition-transform duration-[var(--gr-duration-fast)] ease-[var(--gr-ease-out)]";
+export declare const controlsClass = "flex items-center gap-3";
+export declare const emptyClass = "flex items-center justify-center text-[var(--gr-muted-fg)]";
+/** Кегль подписи и подсказки: контрольная шкала, парой с межстрочным. */
+export declare const sizeTextClass: {
+    readonly xs: "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]";
+    readonly sm: "text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]";
+    readonly md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]";
+    readonly lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]";
+};
+/** Минимальная высота пустого состояния — по той же шкале, что кегль. */
+export declare const sizeEmptyClass: {
+    readonly xs: "min-h-32";
+    readonly sm: "min-h-40";
+    readonly md: "min-h-48";
+    readonly lg: "min-h-56";
+};
+export declare const grImageCropSafelist: string[];

package/dist/types/components/GrImageCrop/index.d.ts

@@ -0,0 +1,9 @@
+export { default } from './GrImageCrop.vue';
+export { default as GrImageCrop } from './GrImageCrop.vue';
+export { grImageCropConfig } from './config';
+export type { GrImageCropConfigurableProps } from './defaults';
+export type { GrCropOffset, GrCropRect, GrCropSize } from './cropGeometry';
+export { clampOffset, coverScale, cropRect, displaySize, offsetBounds, viewportFor } from './cropGeometry';
+export { grImageCropSafelist } from './grImageCropStyles';
+export type { GrImageCropShape, GrImageCropSize } from './grImageCropStyles';
+export type { GrImageCropEmits, GrImageCropOutput, GrImageCropProps } from './GrImageCrop.vue';

package/dist/types/granular-provider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './shared';
+export declare const granularityMediaProvider: import("@feugene/unocss-preset-granular/contract").GranularProvider;
+export default granularityMediaProvider;

package/dist/types/granular-provider/node.d.ts

@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';

package/dist/types/granular-provider/shared.d.ts

@@ -0,0 +1,27 @@
+import { type GranularComponentDescriptor, type GranularProvider } from '@feugene/unocss-preset-granular/contract';
+/** Идентификатор провайдера — совпадает с именем пакета. */
+export declare const GRANULARITY_MEDIA_PROVIDER_ID = "@feugene/granularity-media";
+/**
+ * Реестр компонентов пакета — именованной мапой, а не инлайн-массивом.
+ *
+ * Именно по нему гейт реестров сверяет состав с файловой системой, а
+ * генератор — раскладывает компонент по четырём спискам.
+ */
+export declare const granularityMediaComponentConfigs: {
+    GrImageCrop: GranularComponentDescriptor<"GrImageCrop">;
+};
+export type GranularityMediaComponentName = keyof typeof granularityMediaComponentConfigs;
+/**
+ * Собирает granular-provider пакета.
+ *
+ * Принимает `granularityProvider` снаружи — в зависимости от entry это будет
+ * browser- или node-вариант провайдера `@feugene/granularity`. Это важно,
+ * чтобы у пресета был ровно один инстанс с данным `id`.
+ *
+ * `packageBaseUrl` тоже приходит снаружи, из самого entry, и это не церемония:
+ * он считается от `import.meta.url`, а этот модуль бандлер волен и вынести в
+ * общий чанк, и заинлайнить в entry — то есть положить на разную глубину.
+ * Промах на уровень даёт `dist/components/<Name>/`, которых нет, пресет молча
+ * пропускает скан, и в CSS остаётся только то, что перечислено в safelist.
+ */
+export declare function createGranularityMediaProvider(granularityProvider: GranularProvider, packageBaseUrl: string): GranularProvider;

package/dist/types/i18n/all.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Все локали пакета одним списком.
+ *
+ * Подключается через subpath `@feugene/granularity-media/i18n/all` и уместен
+ * там, где размер бандла не важен: витрина, e2e, инструменты локализации. В
+ * приложении лучше импортировать нужные языки поимённо из
+ * `@feugene/granularity-media/i18n` — тогда лишние отсеет tree-shaking.
+ */
+import type { LocaleLoaderCollection } from '@feugene/fint-i18n/core';
+export declare const all: LocaleLoaderCollection[];
+export default all;

package/dist/types/i18n/index.d.ts

@@ -0,0 +1,28 @@
+export declare const grMediaMessages: {
+    readonly en: {
+        imageCrop: {
+            label: string;
+            frame: string;
+            empty: string;
+            zoom: string;
+        };
+    };
+    readonly es: {
+        imageCrop: {
+            label: string;
+            frame: string;
+            empty: string;
+            zoom: string;
+        };
+    };
+    readonly ru: {
+        imageCrop: {
+            label: string;
+            frame: string;
+            empty: string;
+            zoom: string;
+        };
+    };
+};
+export type GrMediaLocale = keyof typeof grMediaMessages;
+export * from './messages';

package/dist/types/i18n/messages/const.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Блок словаря пакета.
+ *
+ * Свой, а не `gr` ядра: `fint-i18n` изолирует ключи по блокам, и словарь
+ * companion-пакета, севший на чужой блок, столкнётся с ним при первом же
+ * совпадении верхнего ключа — молча, потому что мержатся они по одному имени.
+ */
+export declare const GR_MEDIA_I18N_BLOCK = "grMedia";

package/dist/types/i18n/messages/en.d.ts

@@ -0,0 +1,21 @@
+export declare const en: {
+    en: {
+        grMedia: () => Promise<{
+            default: {
+                imageCrop: {
+                    label: string;
+                    frame: string;
+                    empty: string;
+                    zoom: string;
+                };
+            };
+            imageCrop: {
+                label: string;
+                frame: string;
+                empty: string;
+                zoom: string;
+            };
+        }>;
+    };
+};
+export default en;

package/dist/types/i18n/messages/es.d.ts

@@ -0,0 +1,21 @@
+export declare const es: {
+    es: {
+        grMedia: () => Promise<{
+            default: {
+                imageCrop: {
+                    label: string;
+                    frame: string;
+                    empty: string;
+                    zoom: string;
+                };
+            };
+            imageCrop: {
+                label: string;
+                frame: string;
+                empty: string;
+                zoom: string;
+            };
+        }>;
+    };
+};
+export default es;

package/dist/types/i18n/messages/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Локали пакета в форме, которую понимает `fint-i18n`.
+ *
+ * Блок — свой (`grMedia`), а не `gr` ядра: чужой блок companion-пакету брать
+ * нельзя, иначе словари столкнутся на первом же совпавшем верхнем ключе. Ключи
+ * компонентов выглядят как `grMedia.imageCrop.apply`.
+ *
+ * ```ts
+ * import { en, GR_MEDIA_I18N_BLOCK, ru } from '@feugene/granularity-media/i18n'
+ * import { en as coreEn, GRANULARITY_I18N_BLOCK, ru as coreRu } from '@feugene/granularity/i18n'
+ *
+ * const i18n = createFintI18n({ locale: 'ru', loaders: [coreEn, coreRu, en, ru] })
+ * i18n.registerBlocks([GRANULARITY_I18N_BLOCK, GR_MEDIA_I18N_BLOCK])
+ * ```
+ *
+ * Нужны все языки разом (демо, e2e, инструменты) — есть агрегат
+ * `@feugene/granularity-media/i18n/all`.
+ */
+export { GR_MEDIA_I18N_BLOCK } from './const';
+export { en } from './en';
+export { es } from './es';
+export { ru } from './ru';

package/dist/types/i18n/messages/ru.d.ts

@@ -0,0 +1,21 @@
+export declare const ru: {
+    ru: {
+        grMedia: () => Promise<{
+            default: {
+                imageCrop: {
+                    label: string;
+                    frame: string;
+                    empty: string;
+                    zoom: string;
+                };
+            };
+            imageCrop: {
+                label: string;
+                frame: string;
+                empty: string;
+                zoom: string;
+            };
+        }>;
+    };
+};
+export default ru;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components/GrImageCrop';

package/dist/types/internal/classTokens.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Разбор строки классов на токены для safelist.
+ *
+ * Своя копия двух строк, а не импорт из ядра: в его публичной поверхности
+ * этого хелпера нет, и расширять её ради `split` дороже, чем повторить.
+ */
+export declare function splitClassTokens(value: string): string[];

package/dist/types/resolver.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentResolver } from 'unplugin-vue-components/types';
+/**
+ * Имя npm-пакета — источника компонентов. Совпадает с `package.json#name`.
+ */
+export declare const GRANULARITY_MEDIA_PACKAGE_NAME = "@feugene/granularity-media";
+/**
+ * Резолвер `unplugin-vue-components` для `@feugene/granularity-media`.
+ *
+ * Построен на общей фабрике `createGranularResolver` из
+ * `@feugene/unplugin-granularity`. Резолвит компоненты пакета на их
+ * гранулярные subpath-экспорты. CSS компонента импортируется его же чанком
+ * (`libInjectCss` + `sideEffects: ["**\/*.css"]`), поэтому отдельный
+ * `styles.css`-side-effect не нужен (`importStyle: false`).
+ *
+ * ⚠️ Ставьте этот резолвер **перед** жадным `GranularityResolver()` ядра —
+ * иначе core-резолвер (совпадает с любым `Gr*`) перехватит `GrImageCrop`
+ * и импортирует его из несуществующего пути в `@feugene/granularity`.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import Components from 'unplugin-vue-components/vite'
+ * import { GranularityResolver } from '@feugene/unplugin-granularity'
+ * import { GranularityMediaResolver } from '@feugene/granularity-media/resolver'
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     Components({
+ *       resolvers: [
+ *         GranularityMediaResolver(), // whitelist — раньше…
+ *         GranularityResolver(),      // …жадного Gr*-резолвера ядра
+ *       ],
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+export declare function GranularityMediaResolver(): ComponentResolver;

package/package.json

@@ -0,0 +1,129 @@
+{
+  "name": "@feugene/granularity-media",
+  "description": "Media components for @feugene/granularity: image cropping, camera capture, code scanning and video playback.",
+  "version": "0.1.0",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": {
+    "name": "Evgeniy Fureev",
+    "url": "https://github.com/efureev"
+  },
+  "homepage": "https://efureev.github.io/granularity",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/efureev/granularity.git",
+    "directory": "packages/granularity-media"
+  },
+  "bugs": {
+    "url": "https://github.com/efureev/granularity/issues"
+  },
+  "keywords": [
+    "granularity",
+    "design-system",
+    "vue",
+    "image-crop",
+    "avatar",
+    "camera",
+    "barcode",
+    "video"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/GrImageCrop": {
+      "types": "./dist/types/components/GrImageCrop/index.d.ts",
+      "import": "./dist/components/GrImageCrop/index.js"
+    },
+    "./i18n": {
+      "types": "./dist/types/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js"
+    },
+    "./i18n/all": {
+      "types": "./dist/types/i18n/all.d.ts",
+      "import": "./dist/i18n/all.js"
+    },
+    "./granular-provider": {
+      "types": "./dist/types/granular-provider/index.d.ts",
+      "import": "./dist/granular-provider.js"
+    },
+    "./granular-provider/node": {
+      "types": "./dist/types/granular-provider/node.d.ts",
+      "import": "./dist/granular-provider-node.js"
+    },
+    "./resolver": {
+      "types": "./dist/types/resolver.d.ts",
+      "import": "./dist/resolver.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@feugene/fint-i18n": "^0.6.0",
+    "@feugene/granularity": ">=0.31.0 <1.0.0",
+    "@feugene/unocss-preset-granular": "^0.11.0",
+    "@feugene/unplugin-granularity": ">=0.4.0 <1.0.0",
+    "unplugin-vue-components": ">=0.26.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@feugene/fint-i18n": {
+      "optional": true
+    },
+    "@feugene/unplugin-granularity": {
+      "optional": true
+    },
+    "unplugin-vue-components": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && gr-check-dist-dev-guard && vue-tsc -p tsconfig.build.json",
+    "dev": "vite build --watch",
+    "doctor": "granular doctor ./granular.options.mjs --strict",
+    "generate:registry": "node scripts/generate-registry.mjs",
+    "lint": "eslint . --cache",
+    "lint:fix": "eslint . --cache --fix",
+    "test": "vitest --config vitest.config.ts",
+    "test:run": "vitest run --config vitest.config.ts",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "check:messages": "fint-i18n-check-messages src/i18n/locales"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^9.1.0",
+    "@feugene/fint-i18n": "^0.6.0",
+    "@feugene/granularity": "^0.31.0",
+    "@feugene/granularity-test-kit": "^0.7.2",
+    "@feugene/unocss-preset-granular": "^0.11.0",
+    "@feugene/unplugin-granularity": "^0.6.0",
+    "@types/node": "^26.1.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.4.11",
+    "axe-core": "~4.12.1",
+    "eslint": "^10.7.0",
+    "globals": "^16.5.0",
+    "jsdom": "^29.1.1",
+    "typescript": "^6.0.2",
+    "unplugin-vue-components": "^32.0.0",
+    "vite": "^8.1.5",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.40",
+    "vue-tsc": "^3.3.7"
+  }
+}