import { n as e } from "../chunks/button-BsvHGWPc.js";
import { r as t } from "../chunks/grid-dI94AAbi.js";
import { i as n, n as r, r as i } from "../chunks/modal-DLRYn-Lr.js";
import { s as a } from "../chunks/input-CCdBtl-C.js";
import { t as o } from "../chunks/input-files-TXdXrSAs.js";
import { Suspense as s, lazy as c, useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
import _ from "react-easy-crop";
//#region src/image/lib/buildImageSrcSet.ts
function v(e) {
	return e.map((e) => "width" in e ? `${e.src} ${e.width}w` : `${e.src} ${e.density}x`).join(", ");
}
//#endregion
//#region src/image/lib/buildImageSources.ts
function y(e, t) {
	return (e ?? []).map((e) => ({
		srcSet: v(e.candidates),
		type: e.type,
		sizes: e.sizes ?? t
	})).filter((e) => e.srcSet.length > 0);
}
//#endregion
//#region src/image/ui/ImageCropper.tsx
var b = {
	x: 0,
	y: 0
};
function x({ image: e, aspect: t = 16 / 9, width: n = "100%", className: r, style: i, crop: a, defaultCrop: o = b, zoom: s, defaultZoom: c = 1, minZoom: u = 1, maxZoom: d = 3, zoomSpeed: f = .1, objectFit: m = "contain", disabled: g = !1, onCropChange: v, onZoomChange: y, onCropComplete: x }) {
	let [S, C] = p(o), [w, T] = p(c), E = a ?? S, D = s ?? w, O = l((e) => {
		g || (a === void 0 && C(e), v?.(e));
	}, [
		a,
		g,
		v
	]), k = l((e) => {
		g || (s === void 0 && T(e), y?.(e));
	}, [
		g,
		y,
		s
	]), A = l((e, t) => {
		g || x?.(t, e);
	}, [g, x]);
	return /* @__PURE__ */ h("div", {
		className: r,
		style: {
			position: "relative",
			width: n,
			aspectRatio: t,
			pointerEvents: g ? "none" : void 0,
			...i
		},
		children: /* @__PURE__ */ h(_, {
			image: e,
			crop: E,
			zoom: D,
			aspect: t,
			minZoom: u,
			maxZoom: d,
			zoomSpeed: f,
			objectFit: m,
			onCropChange: O,
			onZoomChange: k,
			onCropComplete: A,
			cropperProps: { "aria-disabled": g || void 0 }
		})
	});
}
//#endregion
//#region src/image/ui/ImagePlaceholder.tsx
function S({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", className: r }) {
	return /* @__PURE__ */ h("div", {
		style: {
			width: e,
			height: t,
			aspectRatio: n
		},
		className: r,
		children: /* @__PURE__ */ h("svg", {
			width: e,
			height: t,
			viewBox: "0 0 200 200",
			xmlns: "http://www.w3.org/2000/svg",
			role: "img",
			fill: "none",
			rx: "10",
			ry: "10",
			style: { display: "block" },
			"aria-label": "Изображение недоступно",
			children: /* @__PURE__ */ g("g", {
				fill: "var(--surface-0)",
				children: [
					/* @__PURE__ */ h("rect", {
						x: "40",
						y: "50",
						width: "120",
						height: "100",
						rx: "10"
					}),
					/* @__PURE__ */ h("circle", {
						cx: "60",
						cy: "70",
						r: "8",
						fill: "var(--surface-2)"
					}),
					/* @__PURE__ */ h("path", {
						d: "M50 130 L75 100 L100 130 Z",
						fill: "var(--surface-2)"
					}),
					/* @__PURE__ */ h("path", {
						d: "M90 130 L120 90 L150 130 Z",
						fill: "var(--surface-2)"
					}),
					/* @__PURE__ */ h("line", {
						x1: "160",
						y1: "40",
						x2: "40",
						y2: "160",
						stroke: "var(--surface-0)",
						strokeWidth: "15",
						strokeLinecap: "round"
					}),
					/* @__PURE__ */ h("line", {
						x1: "160",
						y1: "40",
						x2: "40",
						y2: "160",
						stroke: "var(--surface-2)",
						strokeWidth: "5",
						strokeLinecap: "round"
					})
				]
			})
		})
	});
}
//#endregion
//#region src/image/ui/ImageRenderer.tsx
function C({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fallback: o, useFigure: s = !1, layout: c = "cover", width: l = "100%", height: d = "100%", aspectRatio: _, intrinsicWidth: v, intrinsicHeight: y, onLoad: b, onError: x, style: C, wrapperStyle: w, ...T }) {
	let E = f(null), [D, O] = p(0), [k, A] = p(!1), [j, M] = p(!1), [N, P] = p(!1);
	u(() => {
		if (typeof IntersectionObserver > "u") {
			let e = window.setTimeout(() => A(!0), 0);
			return () => window.clearTimeout(e);
		}
		let e = new IntersectionObserver(([t]) => {
			if (t.isIntersecting) {
				let n = Math.round(t.boundingClientRect.width);
				O(n), A(!0), e.disconnect();
			}
		}, {
			rootMargin: "100px",
			threshold: .01
		});
		return E.current && e.observe(E.current), () => e.disconnect();
	}, []);
	let F = c === "intrinsic", I = F ? "auto" : d, L = v && y ? `${v} / ${y}` : void 0, R = F ? L ?? _ ?? "auto" : _ ?? "16 / 9", z = F && R !== "auto" && R !== "unset" ? "100%" : I, B = D ? `${D}px` : "100vw", V = /* @__PURE__ */ h(S, {
		width: l,
		height: z,
		aspectRatio: R
	}), H = F ? {
		...C,
		display: "block",
		width: "100%",
		height: "auto",
		objectFit: void 0
	} : {
		display: "block",
		width: "100%",
		height: "100%",
		objectFit: c,
		...C
	}, U = /* @__PURE__ */ g(m, { children: [
		!j && !N && (o || V),
		k && !N && /* @__PURE__ */ g("picture", { children: [t?.map((e) => /* @__PURE__ */ h("source", {
			srcSet: e.srcSet,
			type: e.type,
			sizes: e.sizes ?? B
		}, `${e.type ?? "source"}-${e.srcSet}`)), /* @__PURE__ */ h("img", {
			src: e,
			alt: n,
			role: r,
			"aria-label": i,
			onLoad: (e) => {
				M(!0), b?.(e);
			},
			onError: (e) => {
				P(!0), x?.(e);
			},
			style: j ? H : { display: "none" },
			"aria-busy": !j,
			width: v,
			height: y,
			...T
		})] }),
		N && V
	] }), W = /* @__PURE__ */ h("div", {
		ref: E,
		style: {
			width: l,
			height: I,
			aspectRatio: R,
			...w
		},
		children: U
	});
	return s ? /* @__PURE__ */ g("figure", {
		className: "relative",
		children: [W, a && /* @__PURE__ */ h("figcaption", {
			style: {
				bottom: 2,
				right: 2,
				maxWidth: "calc(100% - 4px)"
			},
			className: "absolute paddingInlineMd textRight radiusSm fontSizeSm",
			children: a
		})]
	}) : W;
}
//#endregion
//#region src/image/lib/getImageSelectionKey.ts
function w(e, t) {
	return `${e.file.meta.name}-${e.file.meta.size}-${e.file.meta.lastModified}-${t}`;
}
//#endregion
//#region src/image/model/useImageSelectionState.ts
var T = {
	crop: {
		x: 0,
		y: 0
	},
	zoom: 1
};
function E({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i }) {
	let [a, o] = p(t ?? []), [s, c] = p(0), [u, f] = p({}), m = e ?? a, h = l((t) => {
		let n = t(m);
		e === void 0 && o(n), r?.(n);
	}, [
		r,
		m,
		e
	]), g = d(() => m.map((e) => e.file), [m]), _ = m.length === 0 ? 0 : Math.min(s, m.length - 1), v = m[_], y = v ? w(v, _) : void 0, b = y ? u[y] ?? T : T, x = m.length > 0, S = !n && x && m.every((e) => e.alt.trim() && e.crop), C = l((e) => {
		h((t) => e.map((e) => {
			let n = t.find((t) => t.file.file === e.file);
			return n ? {
				...n,
				file: e
			} : {
				file: e,
				alt: ""
			};
		}));
	}, [h]), E = l((e) => {
		h((t) => t.map((t, n) => n === _ ? {
			...t,
			alt: e
		} : t));
	}, [_, h]), D = l((e) => {
		h((t) => t.map((t, n) => n === _ ? {
			...t,
			crop: e
		} : t));
	}, [_, h]), O = l((e) => {
		y && f((t) => ({
			...t,
			[y]: {
				crop: e,
				zoom: t[y]?.zoom ?? 1
			}
		}));
	}, [y]), k = l((e) => {
		y && f((t) => ({
			...t,
			[y]: {
				crop: t[y]?.crop ?? {
					x: 0,
					y: 0
				},
				zoom: e
			}
		}));
	}, [y]);
	return {
		value: m,
		files: g,
		activeIndex: _,
		activeImage: v,
		activeCropperState: b,
		hasSelected: x,
		canApply: S,
		apply: l(() => {
			i?.(m);
		}, [i, m]),
		setFiles: C,
		setActiveIndex: c,
		setActiveAlt: E,
		setActiveCrop: D,
		setActiveCropperCrop: O,
		setActiveCropperZoom: k
	};
}
//#endregion
//#region src/image/lib/getImageCropPreviewStyle.ts
function D(e, t, n) {
	if (!e.crop || !t) return {
		width: "100%",
		aspectRatio: n,
		objectFit: "cover",
		display: "block"
	};
	let r = e.crop;
	return {
		position: "absolute",
		left: `${-(r.x / r.width) * 100}%`,
		top: `${-(r.y / r.height) * 100}%`,
		width: `${t.width / r.width * 100}%`,
		height: `${t.height / r.height * 100}%`,
		maxWidth: "none"
	};
}
//#endregion
//#region src/image/ui/ImageSelectionFields.tsx
var O = [
	"image/jpeg",
	"image/png",
	"image/webp",
	"image/avif"
];
function k({ aspect: e = 16 / 9, disabled: n, allowedMime: r = O, maxBytes: i, minimumCropWidth: s, onReadError: c, state: l }) {
	let u = l.activeImage?.crop, [d, f] = p({});
	return /* @__PURE__ */ g(t, {
		gap: "md",
		children: [
			/* @__PURE__ */ h(o, {
				label: "Файл изображения",
				allowedMime: r,
				value: l.files,
				onChange: l.setFiles,
				maxBytes: i,
				disabled: n,
				onReadError: c
			}),
			l.hasSelected && l.activeImage && /* @__PURE__ */ g("div", { children: [
				/* @__PURE__ */ h(t, {
					templateColumns: "repeat(auto-fill, minmax(10em, 1fr))",
					gap: "xs",
					children: l.value.map((t, r) => {
						let i = w(t, r);
						return /* @__PURE__ */ h("button", {
							type: "button",
							disabled: n,
							onClick: () => l.setActiveIndex(r),
							style: {
								padding: 0,
								border: r === l.activeIndex ? "2px solid var(--border-accent)" : "2px solid transparent",
								background: "transparent",
								cursor: n ? "default" : "pointer"
							},
							children: /* @__PURE__ */ h("span", {
								style: {
									position: "relative",
									display: "block",
									width: "100%",
									aspectRatio: e,
									overflow: "hidden"
								},
								children: /* @__PURE__ */ h("img", {
									src: t.file.dataUrl,
									alt: t.alt || `Предпросмотр изображения ${r + 1}`,
									style: D(t, d[i], e),
									onLoad: (e) => {
										let t = e.currentTarget;
										f((e) => ({
											...e,
											[i]: {
												width: t.naturalWidth,
												height: t.naturalHeight
											}
										}));
									}
								})
							})
						}, i);
					})
				}),
				/* @__PURE__ */ g("div", { children: [
					"Выберите область изображения",
					" ",
					u && /* @__PURE__ */ g("code", {
						className: s && u.width < s ? "statusError" : "statusSuccess",
						children: [
							u.width,
							"x",
							u.height,
							s && u.width < s ? " — недостаточная ширина" : ""
						]
					})
				] }),
				/* @__PURE__ */ h(x, {
					image: l.activeImage.file.dataUrl,
					crop: l.activeCropperState.crop,
					zoom: l.activeCropperState.zoom,
					aspect: e,
					disabled: n,
					onCropChange: l.setActiveCropperCrop,
					onZoomChange: l.setActiveCropperZoom,
					onCropComplete: l.setActiveCrop
				}, w(l.activeImage, l.activeIndex))
			] }),
			/* @__PURE__ */ h(a, {
				required: !0,
				disabled: !l.hasSelected || n,
				label: "Краткое описание изображения",
				placeholder: "",
				value: l.activeImage?.alt ?? "",
				onChange: l.setActiveAlt
			})
		]
	});
}
//#endregion
//#region src/image/ui/ImageSelectionModal.tsx
function A({ disabled: t, isOpen: a = !0, onClose: o = () => {}, title: s = "Загрузка нового изображения", ...c }) {
	let l = E({
		...c,
		disabled: t
	});
	return c.onApply ? /* @__PURE__ */ g(r, {
		isOpen: a,
		onClose: o,
		title: s,
		size: "xl",
		children: [/* @__PURE__ */ h(i, {
			scrollable: !0,
			children: /* @__PURE__ */ h(k, {
				...c,
				disabled: t,
				state: l
			})
		}), /* @__PURE__ */ h(n, { children: /* @__PURE__ */ h(e, {
			disabled: !l.canApply,
			tone: "success",
			onClick: l.apply,
			children: "Применить"
		}) })]
	}) : /* @__PURE__ */ h(r, {
		isOpen: a,
		onClose: o,
		title: s,
		size: "xl",
		children: /* @__PURE__ */ h(i, {
			scrollable: !0,
			children: /* @__PURE__ */ h(k, {
				...c,
				disabled: t,
				state: l
			})
		})
	});
}
//#endregion
//#region src/image/ui/ImageSelectionPanel.tsx
function j({ disabled: t, renderActions: n, ...r }) {
	let i = E({
		...r,
		disabled: t
	}), a = {
		value: i.value,
		activeIndex: i.activeIndex,
		hasSelected: i.hasSelected,
		canApply: i.canApply,
		apply: i.apply
	};
	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(k, {
		...r,
		disabled: t,
		state: i
	}), n ? n(a) : r.onApply && /* @__PURE__ */ h("div", { children: /* @__PURE__ */ h(e, {
		disabled: !i.canApply,
		tone: "success",
		onClick: i.apply,
		children: "Применить"
	}) })] });
}
//#endregion
//#region src/image/ui/ImageView.tsx
function M({ image: e, alt: t, sizes: n, aspectRatio: r, ...i }) {
	let a = y(e.sources, n), o = e.candidates ? v(e.candidates) : void 0, s = r ?? (e.intrinsicWidth && e.intrinsicHeight ? `${e.intrinsicWidth} / ${e.intrinsicHeight}` : void 0);
	return /* @__PURE__ */ h(C, {
		...i,
		src: e.src,
		srcSet: o || void 0,
		sources: a,
		sizes: n,
		alt: t ?? e.alt,
		intrinsicWidth: e.intrinsicWidth,
		intrinsicHeight: e.intrinsicHeight,
		aspectRatio: s
	});
}
//#endregion
//#region src/image/ui/ImageViewer.tsx
var N = c(() => import("../chunks/ImageViewerRuntime-HGBWp9NM.js"));
function P(e) {
	let [t, n] = p(!1), r = l(() => n(!0), []);
	return typeof document < "u" && (e.open || t) ? /* @__PURE__ */ h(s, {
		fallback: null,
		children: /* @__PURE__ */ h(N, {
			...e,
			onRuntimeMounted: r
		})
	}) : null;
}
//#endregion
export { x as ImageCropper, S as ImagePlaceholder, C as ImageRenderer, A as ImageSelectionModal, j as ImageSelectionPanel, M as ImageView, P as ImageViewer, y as buildImageSources, v as buildImageSrcSet };

//# sourceMappingURL=index.js.map