@ryuzaki13/react-foundation-ui 0.1.0

package/dist/image/index.js

@@ -0,0 +1,500 @@
+import { r as e } from "../chunks/Grid-ByIIytjh.js";
+import { t } from "../chunks/Button-BZ_b-Kin.js";
+import { a as n } from "../chunks/Input-Ce2HXBUc.js";
+import { t as r } from "../chunks/InputFiles-Or2Nvfgk.js";
+import { i, n as a, r as o } from "../chunks/modal-DqVcZws_.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import h from "react-easy-crop";
+//#region src/image/ui/ImageCropper.tsx
+function g({ image: e, aspect: t = 1200 / 630, width: n, onCropComplete: r }) {
+	let [i, a] = m({
+		x: 0,
+		y: 0
+	}), [o, s] = m(1), l = u((e, t) => {
+		r?.(t);
+	}, [r]);
+	return /* @__PURE__ */ c("div", {
+		style: {
+			position: "relative",
+			width: n ?? "100%",
+			aspectRatio: t
+		},
+		children: /* @__PURE__ */ c(h, {
+			image: e,
+			crop: i,
+			zoom: o,
+			aspect: t,
+			onCropChange: a,
+			onZoomChange: s,
+			onCropComplete: l,
+			zoomSpeed: .1,
+			objectFit: "contain"
+		})
+	});
+}
+//#endregion
+//#region src/image/ui/ImagePlaceholder.tsx
+function _({ width: e = "100%", height: t = "100%", aspectRatio: n = "16 / 9", className: r }) {
+	return /* @__PURE__ */ c("div", {
+		style: {
+			width: e,
+			height: t,
+			aspectRatio: n
+		},
+		className: r,
+		children: /* @__PURE__ */ c("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__ */ l("g", {
+				fill: "var(--surface-0)",
+				children: [
+					/* @__PURE__ */ c("rect", {
+						x: "40",
+						y: "50",
+						width: "120",
+						height: "100",
+						rx: "10"
+					}),
+					/* @__PURE__ */ c("circle", {
+						cx: "60",
+						cy: "70",
+						r: "8",
+						fill: "var(--surface-2)"
+					}),
+					/* @__PURE__ */ c("path", {
+						d: "M50 130 L75 100 L100 130 Z",
+						fill: "var(--surface-2)"
+					}),
+					/* @__PURE__ */ c("path", {
+						d: "M90 130 L120 90 L150 130 Z",
+						fill: "var(--surface-2)"
+					}),
+					/* @__PURE__ */ c("line", {
+						x1: "160",
+						y1: "40",
+						x2: "40",
+						y2: "160",
+						stroke: "var(--surface-0)",
+						strokeWidth: "15",
+						strokeLinecap: "round"
+					}),
+					/* @__PURE__ */ c("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 v({ src: e, sources: t, alt: n, role: r, ariaLabel: i, caption: a, fallback: o, useFigure: u = !1, width: f = "100%", height: h = "100%", aspectRatio: g = "16 / 9", style: v, wrapperStyle: y, ...b }) {
+	let x = p(null), [S, C] = m(0), [w, T] = m(!1), [E, D] = m(!1), [O, k] = m(!1);
+	d(() => {
+		let e = new IntersectionObserver(([t]) => {
+			if (t.isIntersecting) {
+				let n = Math.round(t.boundingClientRect.width);
+				C(n), T(!0), e.disconnect();
+			}
+		}, {
+			rootMargin: "100px",
+			threshold: .01
+		});
+		return x.current && e.observe(x.current), () => e.disconnect();
+	}, []);
+	let A = S ? `${S}px` : "100vw", j = /* @__PURE__ */ c(_, {
+		width: f,
+		height: h,
+		aspectRatio: g
+	}), M = /* @__PURE__ */ l(s, { children: [
+		!E && !O && (o || j),
+		w && !O && /* @__PURE__ */ l("picture", { children: [t?.map((e) => /* @__PURE__ */ c("source", {
+			srcSet: e.srcSet,
+			type: e.type,
+			sizes: e.sizes ?? A
+		}, `${e.type ?? "source"}-${e.srcSet}`)), /* @__PURE__ */ c("img", {
+			src: e,
+			alt: n,
+			role: r,
+			"aria-label": i,
+			onLoad: () => D(!0),
+			onError: () => k(!0),
+			style: E ? {
+				width: "100%",
+				height: "100%",
+				objectFit: "cover",
+				...v
+			} : { display: "none" },
+			"aria-busy": !E,
+			width: "100%",
+			height: "100%",
+			...b
+		})] }),
+		O && j
+	] }), N = /* @__PURE__ */ c("div", {
+		ref: x,
+		style: {
+			width: f,
+			height: h,
+			aspectRatio: g,
+			...y
+		},
+		children: M
+	});
+	return u ? /* @__PURE__ */ l("figure", {
+		className: "relative",
+		children: [N, a && /* @__PURE__ */ c("figcaption", {
+			style: {
+				bottom: 2,
+				right: 2,
+				maxWidth: "calc(100% - 4px)"
+			},
+			className: "absolute paddingInlineMd textRight radiusSm fontSizeSm",
+			children: a
+		})]
+	}) : N;
+}
+//#endregion
+//#region src/image/ui/ImageSelection.tsx
+function y(e, t) {
+	return `${e.file.meta.name}-${e.file.meta.size}-${e.file.meta.lastModified}-${t}`;
+}
+function b({ value: e, defaultValue: t, disabled: n, onChange: r, onApply: i }) {
+	let a = e !== void 0, [o, s] = m(e ?? t ?? []), [c, l] = m(e), [d, p] = m(0), [h, g] = m({});
+	a && e !== c && (l(e), s(e ?? []));
+	let _ = u((e) => {
+		s((t) => e(t));
+	}, []), v = f(() => o.map((e) => e.file), [o]), b = o.length === 0 ? 0 : Math.min(d, o.length - 1), x = o[b], S = x ? y(x, b) : void 0, C = S ? h[S] ?? {
+		crop: {
+			x: 0,
+			y: 0
+		},
+		zoom: 1
+	} : {
+		crop: {
+			x: 0,
+			y: 0
+		},
+		zoom: 1
+	}, w = o.length > 0, T = !n && w && o.every((e) => e.alt.trim() && e.crop), E = u((e) => {
+		_((t) => e.map((e) => {
+			let n = t.find((t) => t.file.file === e.file);
+			return n ? {
+				...n,
+				file: e
+			} : {
+				file: e,
+				alt: ""
+			};
+		}));
+	}, [_]), D = u((e) => {
+		_((t) => t.map((t, n) => n === b ? {
+			...t,
+			alt: e
+		} : t));
+	}, [b, _]), O = u((e) => {
+		_((t) => t.map((t, n) => n === b ? {
+			...t,
+			crop: e
+		} : t));
+	}, [b, _]), k = u((e) => {
+		S && g((t) => ({
+			...t,
+			[S]: {
+				crop: e,
+				zoom: t[S]?.zoom ?? 1
+			}
+		}));
+	}, [S]), A = u((e) => {
+		S && g((t) => ({
+			...t,
+			[S]: {
+				crop: t[S]?.crop ?? {
+					x: 0,
+					y: 0
+				},
+				zoom: e
+			}
+		}));
+	}, [S]);
+	return {
+		value: o,
+		files: v,
+		activeIndex: b,
+		activeImage: x,
+		activeCropperState: C,
+		hasSelected: w,
+		canApply: T,
+		apply: u(() => {
+			r?.(o), i?.(o);
+		}, [
+			o,
+			i,
+			r
+		]),
+		setFiles: E,
+		setActiveIndex: p,
+		setActiveAlt: D,
+		setActiveCrop: O,
+		setActiveCropperCrop: k,
+		setActiveCropperZoom: A
+	};
+}
+function x() {
+	if (typeof __IMAGE_UPLOAD_MAX_BYTES__ == "number") return __IMAGE_UPLOAD_MAX_BYTES__;
+}
+function S(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"
+	};
+}
+function C({ aspect: t = 16 / 9, disabled: i, state: a }) {
+	let o = a.activeImage?.crop, [s, u] = m({});
+	return /* @__PURE__ */ l(e, {
+		gap: "md",
+		children: [
+			/* @__PURE__ */ c(r, {
+				label: "Файл изображения",
+				allowedMime: [
+					"image/jpeg",
+					"image/png",
+					"image/webp",
+					"image/avif"
+				],
+				value: a.files,
+				onChange: a.setFiles,
+				maxBytes: x(),
+				onReadError: (e) => console.log("e", e)
+			}),
+			a.hasSelected && a.activeImage && /* @__PURE__ */ l("div", { children: [
+				/* @__PURE__ */ c(e, {
+					templateColumns: "repeat(auto-fill, minmax(10em, 1fr))",
+					gap: "xs",
+					children: a.value.map((e, n) => {
+						let r = y(e, n);
+						return /* @__PURE__ */ c("button", {
+							type: "button",
+							disabled: i,
+							onClick: () => a.setActiveIndex(n),
+							style: {
+								padding: 0,
+								border: n === a.activeIndex ? "2px solid var(--border-accent)" : "2px solid transparent",
+								background: "transparent",
+								cursor: i ? "default" : "pointer"
+							},
+							children: /* @__PURE__ */ c("span", {
+								style: {
+									position: "relative",
+									display: "block",
+									width: "100%",
+									aspectRatio: t,
+									overflow: "hidden"
+								},
+								children: /* @__PURE__ */ c("img", {
+									src: e.file.dataUrl,
+									style: S(e, s[r], t),
+									onLoad: (e) => {
+										let t = e.currentTarget;
+										u((e) => ({
+											...e,
+											[r]: {
+												width: t.naturalWidth,
+												height: t.naturalHeight
+											}
+										}));
+									}
+								})
+							})
+						}, r);
+					})
+				}),
+				/* @__PURE__ */ l("div", { children: [
+					"Выберите область изображения",
+					" ",
+					o && (o.width < 1200 ? /* @__PURE__ */ l("code", {
+						className: "statusError",
+						children: [
+							o.width,
+							"x",
+							o.height,
+							" - низкое качество изображения!"
+						]
+					}) : /* @__PURE__ */ l("code", {
+						className: "statusSuccess",
+						children: [
+							o.width,
+							"x",
+							o.height
+						]
+					}))
+				] }),
+				/* @__PURE__ */ c("div", {
+					style: {
+						position: "relative",
+						width: "100%",
+						aspectRatio: t
+					},
+					children: /* @__PURE__ */ c(h, {
+						image: a.activeImage.file.dataUrl,
+						crop: a.activeCropperState.crop,
+						zoom: a.activeCropperState.zoom,
+						aspect: t,
+						onCropChange: a.setActiveCropperCrop,
+						onZoomChange: a.setActiveCropperZoom,
+						onCropComplete: (e, t) => a.setActiveCrop(t),
+						zoomSpeed: .1,
+						objectFit: "contain"
+					}, y(a.activeImage, a.activeIndex))
+				})
+			] }),
+			/* @__PURE__ */ c(n, {
+				required: !0,
+				disabled: !a.hasSelected || i,
+				label: "Краткое описание изображения",
+				placeholder: "",
+				value: a.activeImage?.alt ?? "",
+				onChange: a.setActiveAlt
+			})
+		]
+	});
+}
+function w({ aspect: e = 16 / 9, disabled: n, renderActions: r, ...i }) {
+	let a = b({
+		...i,
+		disabled: n
+	}), o = {
+		value: a.value,
+		activeIndex: a.activeIndex,
+		hasSelected: a.hasSelected,
+		canApply: a.canApply,
+		apply: a.apply
+	}, u = i.onChange !== void 0 || i.onApply !== void 0;
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(C, {
+		aspect: e,
+		disabled: n,
+		state: a
+	}), r ? r(o) : u && /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(t, {
+		disabled: !a.canApply,
+		tone: "success",
+		onClick: a.apply,
+		children: "Применить"
+	}) })] });
+}
+function T({ aspect: e = 16 / 9, disabled: n, isOpen: r = !0, onClose: s = () => {}, title: u = "Загрузка нового изображения", ...d }) {
+	let f = b({
+		...d,
+		disabled: n
+	});
+	return d.onChange !== void 0 || d.onApply !== void 0 ? /* @__PURE__ */ l(a, {
+		isOpen: r,
+		onClose: s,
+		title: u,
+		size: "xl",
+		children: [/* @__PURE__ */ c(o, {
+			scrollable: !0,
+			children: /* @__PURE__ */ c(C, {
+				aspect: e,
+				disabled: n,
+				state: f
+			})
+		}), /* @__PURE__ */ c(i, { children: /* @__PURE__ */ c(t, {
+			disabled: !f.canApply,
+			tone: "success",
+			onClick: f.apply,
+			children: "Применить"
+		}) })]
+	}) : /* @__PURE__ */ c(a, {
+		isOpen: r,
+		onClose: s,
+		title: u,
+		size: "xl",
+		children: /* @__PURE__ */ c(o, {
+			scrollable: !0,
+			children: /* @__PURE__ */ c(C, {
+				aspect: e,
+				disabled: n,
+				state: f
+			})
+		})
+	});
+}
+//#endregion
+//#region src/image/ui/ImageView.tsx
+var E = [
+	2880,
+	1920,
+	1280,
+	640,
+	320
+], D = ["avif", "webp"];
+function O(e) {
+	return e === "jpg" || e === "jpeg" ? "image/jpeg" : `image/${e}`;
+}
+function k(e) {
+	return e ? e.replace(/^\/+|\/+$/g, "") : "";
+}
+function A(e, t) {
+	let n = k(e);
+	return n ? `/${n}/${t}` : `/${t}`;
+}
+function j({ basePath: e, formats: t, variantWidths: n, hasSet: r }) {
+	return r ? t.map((t) => ({
+		srcSet: n.map((n) => `${e}@${n}.${t} ${n}w`).join(", "),
+		type: O(t)
+	})) : t.map((t) => ({
+		srcSet: `${e}.${t}`,
+		type: O(t)
+	}));
+}
+function M({ image: e, src: t, path: n, alt: r, formats: i = D, fallbackFormat: a, variantWidths: o = E, hasSet: s, aspectRatio: l, ...u }) {
+	let d = e?.filename ?? t;
+	if (!d) return /* @__PURE__ */ c(v, {
+		src: "",
+		alt: r ?? e?.alt,
+		...u
+	});
+	let f = e?.path ?? n, p = s ?? e?.hasSet ?? !0, m = i.length > 0 ? i : D, h = a ?? m[m.length - 1] ?? "webp", g = A(f, d), _ = l ?? (e?.width && e.height ? `${e.width} / ${e.height}` : void 0), y = j({
+		basePath: g,
+		formats: m,
+		variantWidths: o,
+		hasSet: p
+	});
+	return /* @__PURE__ */ c(v, {
+		src: `${g}.${h}`,
+		sources: y,
+		alt: r ?? e?.alt,
+		aspectRatio: _,
+		...u
+	});
+}
+//#endregion
+export { g as ImageCropper, _ as ImagePlaceholder, v as ImageRenderer, T as ImageSelectionModal, w as ImageSelectionPanel, M as ImageView };
+
+//# sourceMappingURL=index.js.map

package/dist/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/image/ui/ImageCropper.tsx","../../src/image/ui/ImagePlaceholder.tsx","../../src/image/ui/ImageRenderer.tsx","../../src/image/ui/ImageSelection.tsx","../../src/image/ui/ImageView.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nimport Cropper from \"react-easy-crop\";\n\nexport type CroppedAreaPixels = {\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n};\n\nexport function ImageCropper({\n\timage,\n\taspect = 1200 / 630,\n\twidth,\n\tonCropComplete\n}: {\n\timage: string;\n\taspect?: number;\n\twidth?: number;\n\tonCropComplete?: (croppedAreaPixels: CroppedAreaPixels) => void;\n}) {\n\tconst [crop, setCrop] = useState({ x: 0, y: 0 });\n\tconst [zoom, setZoom] = useState(1);\n\n\tconst handleCropComplete = useCallback(\n\t\t(_croppedArea: unknown, croppedAreaPixels: CroppedAreaPixels) => {\n\t\t\tonCropComplete?.(croppedAreaPixels);\n\t\t},\n\t\t[onCropComplete]\n\t);\n\n\treturn (\n\t\t<div style={{ position: \"relative\", width: width ?? \"100%\", aspectRatio: aspect }}>\n\t\t\t<Cropper\n\t\t\t\timage={image}\n\t\t\t\tcrop={crop}\n\t\t\t\tzoom={zoom}\n\t\t\t\taspect={aspect}\n\t\t\t\tonCropChange={setCrop}\n\t\t\t\tonZoomChange={setZoom}\n\t\t\t\tonCropComplete={handleCropComplete}\n\t\t\t\tzoomSpeed={0.1}\n\t\t\t\tobjectFit=\"contain\"\n\t\t\t/>\n\t\t</div>\n\t);\n}\n","interface ImagePlaceholderProps {\n\twidth?: number | string;\n\theight?: number | string;\n\taspectRatio?: string | \"unset\";\n\tclassName?: string;\n}\n\nexport function ImagePlaceholder({ width = \"100%\", height = \"100%\", aspectRatio = \"16 / 9\", className }: ImagePlaceholderProps) {\n\treturn (\n\t\t<div style={{ width, height, aspectRatio }} className={className}>\n\t\t\t<svg\n\t\t\t\twidth={width}\n\t\t\t\theight={height}\n\t\t\t\tviewBox=\"0 0 200 200\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\trole=\"img\"\n\t\t\t\tfill=\"none\"\n\t\t\t\trx=\"10\"\n\t\t\t\try=\"10\"\n\t\t\t\tstyle={{ display: \"block\" }}\n\t\t\t\taria-label=\"Изображение недоступно\">\n\t\t\t\t{/* <rect width=\"200\" height=\"200\" fill=\"var(--surface-2)\" rx=\"10\" ry=\"10\" /> */}\n\t\t\t\t<g fill=\"var(--surface-0)\">\n\t\t\t\t\t<rect x=\"40\" y=\"50\" width=\"120\" height=\"100\" rx=\"10\" />\n\n\t\t\t\t\t<circle cx=\"60\" cy=\"70\" r=\"8\" fill=\"var(--surface-2)\" />\n\n\t\t\t\t\t<path d=\"M50 130 L75 100 L100 130 Z\" fill=\"var(--surface-2)\" />\n\t\t\t\t\t<path d=\"M90 130 L120 90 L150 130 Z\" fill=\"var(--surface-2)\" />\n\n\t\t\t\t\t<line x1=\"160\" y1=\"40\" x2=\"40\" y2=\"160\" stroke=\"var(--surface-0)\" strokeWidth=\"15\" strokeLinecap=\"round\" />\n\t\t\t\t\t<line x1=\"160\" y1=\"40\" x2=\"40\" y2=\"160\" stroke=\"var(--surface-2)\" strokeWidth=\"5\" strokeLinecap=\"round\" />\n\t\t\t\t</g>\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n","import { type CSSProperties, type ImgHTMLAttributes, type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { ImagePlaceholder } from \"./ImagePlaceholder\";\n\nexport type ImageSource = {\n\tsrcSet: string;\n\ttype?: string;\n\tsizes?: string;\n};\n\nexport interface ImageRendererProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\"> {\n\tsrc: string;\n\tsources?: readonly ImageSource[];\n\talt?: string;\n\trole?: string;\n\tariaLabel?: string;\n\tcaption?: string;\n\tfallback?: ReactNode;\n\tuseFigure?: boolean;\n\taspectRatio?: string | \"unset\";\n\twrapperStyle?: CSSProperties;\n}\n\n/**\n * Базовый рендер изображения: lazy-появление, placeholder, обработка ошибки и figure/caption.\n * Компонент не знает, как устроено хранилище и какие форматы/размеры доступны.\n */\nexport function ImageRenderer({\n\tsrc,\n\tsources,\n\talt,\n\trole,\n\tariaLabel,\n\tcaption,\n\tfallback,\n\tuseFigure = false,\n\twidth = \"100%\",\n\theight = \"100%\",\n\taspectRatio = \"16 / 9\",\n\tstyle,\n\twrapperStyle,\n\t...imgProps\n}: ImageRendererProps) {\n\tconst wrapperRef = useRef<HTMLDivElement | null>(null);\n\tconst [containerWidth, setContainerWidth] = useState(0);\n\tconst [isVisible, setIsVisible] = useState(false);\n\tconst [hasLoaded, setHasLoaded] = useState(false);\n\tconst [hasError, setHasError] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst observer = new IntersectionObserver(\n\t\t\t([entry]) => {\n\t\t\t\tif (entry.isIntersecting) {\n\t\t\t\t\tconst parentWidth = Math.round(entry.boundingClientRect.width);\n\n\t\t\t\t\tsetContainerWidth(parentWidth);\n\t\t\t\t\tsetIsVisible(true);\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ rootMargin: \"100px\", threshold: 0.01 }\n\t\t);\n\n\t\tif (wrapperRef.current) {\n\t\t\tobserver.observe(wrapperRef.current);\n\t\t}\n\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\tconst sizesAttr = containerWidth ? `${containerWidth}px` : \"100vw\";\n\tconst defaultFallback = <ImagePlaceholder width={width} height={height} aspectRatio={aspectRatio} />;\n\n\tconst content = (\n\t\t<>\n\t\t\t{!hasLoaded && !hasError && (fallback || defaultFallback)}\n\t\t\t{isVisible && !hasError && (\n\t\t\t\t<picture>\n\t\t\t\t\t{sources?.map((source) => (\n\t\t\t\t\t\t<source\n\t\t\t\t\t\t\tkey={`${source.type ?? \"source\"}-${source.srcSet}`}\n\t\t\t\t\t\t\tsrcSet={source.srcSet}\n\t\t\t\t\t\t\ttype={source.type}\n\t\t\t\t\t\t\tsizes={source.sizes ?? sizesAttr}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\trole={role}\n\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\tonLoad={() => setHasLoaded(true)}\n\t\t\t\t\t\tonError={() => setHasError(true)}\n\t\t\t\t\t\tstyle={!hasLoaded ? { display: \"none\" } : { width: \"100%\", height: \"100%\", objectFit: \"cover\", ...style }}\n\t\t\t\t\t\taria-busy={!hasLoaded}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t{...imgProps}\n\t\t\t\t\t/>\n\t\t\t\t</picture>\n\t\t\t)}\n\t\t\t{hasError && defaultFallback}\n\t\t</>\n\t);\n\n\tconst wrapped = (\n\t\t<div ref={wrapperRef} style={{ width, height, aspectRatio, ...wrapperStyle }}>\n\t\t\t{content}\n\t\t</div>\n\t);\n\n\treturn useFigure ? (\n\t\t<figure className=\"relative\">\n\t\t\t{wrapped}\n\t\t\t{caption && (\n\t\t\t\t<figcaption\n\t\t\t\t\tstyle={{ bottom: 2, right: 2, maxWidth: \"calc(100% - 4px)\" }}\n\t\t\t\t\tclassName=\"absolute paddingInlineMd textRight radiusSm fontSizeSm\">\n\t\t\t\t\t{caption}\n\t\t\t\t</figcaption>\n\t\t\t)}\n\t\t</figure>\n\t) : (\n\t\twrapped\n\t);\n}\n","import { CSSProperties, ReactNode, useCallback, useMemo, useState } from \"react\";\n\nimport Cropper from \"react-easy-crop\";\n\nimport { ReadFileResult } from \"@ryuzaki13/react-foundation-lib/file\";\n\nimport { Button } from \"../../button\";\nimport { GridContainer } from \"../../grid\";\nimport { InputText } from \"../../input\";\nimport { InputFiles } from \"../../input-files\";\nimport { Modal, ModalContent, ModalFooter } from \"../../modal\";\n\nimport { CroppedAreaPixels } from \"./ImageCropper\";\n\ntype SelectedImageFile = Extract<ReadFileResult, { mode: \"data-url\" }>;\n\n/**\n * Данные одного выбранного изображения, которые нужны вызывающему коду:\n * исходный файл, пользовательское описание и выбранная область обрезки.\n */\nexport type SelectedImageData = {\n\tfile: SelectedImageFile;\n\talt: string;\n\tcrop?: CroppedAreaPixels;\n};\n\ninterface ImageSelectionPanelProps {\n\taspect?: number;\n\tdisabled?: boolean;\n\tvalue?: SelectedImageData[];\n\tdefaultValue?: SelectedImageData[];\n\tonChange?: (data: SelectedImageData[]) => void;\n\tonApply?: (data: SelectedImageData[]) => void;\n\trenderActions?: (data: ImageSelectionActionsData) => ReactNode;\n}\n\ninterface ImageSelectionModalProps extends ImageSelectionPanelProps {\n\tisOpen?: boolean;\n\tonClose?: () => void;\n\ttitle?: string;\n}\n\ninterface ImageSelectionActionsData {\n\tvalue: SelectedImageData[];\n\tactiveIndex: number;\n\thasSelected: boolean;\n\tcanApply: boolean;\n\tapply: () => void;\n}\n\ninterface ImageSelectionState extends ImageSelectionActionsData {\n\tfiles: SelectedImageFile[];\n\tactiveImage?: SelectedImageData;\n\tactiveCropperState: ImageCropperState;\n\tsetFiles: (files: SelectedImageFile[]) => void;\n\tsetActiveIndex: (index: number) => void;\n\tsetActiveAlt: (alt: string) => void;\n\tsetActiveCrop: (crop: CroppedAreaPixels) => void;\n\tsetActiveCropperCrop: (crop: CropperPoint) => void;\n\tsetActiveCropperZoom: (zoom: number) => void;\n}\n\ntype ImageSize = {\n\twidth: number;\n\theight: number;\n};\n\ntype CropperPoint = {\n\tx: number;\n\ty: number;\n};\n\ntype ImageCropperState = {\n\tcrop: CropperPoint;\n\tzoom: number;\n};\n\nfunction getImageKey(image: SelectedImageData, index: number) {\n\treturn `${image.file.meta.name}-${image.file.meta.size}-${image.file.meta.lastModified}-${index}`;\n}\n\n/**\n * Хранит черновик выбора изображений локально даже в controlled-режиме.\n * Это позволяет не дергать внешний onChange на каждый onCropComplete,\n * а отправлять готовый массив только при явном применении.\n */\nfunction useImageSelectionState({\n\tvalue,\n\tdefaultValue,\n\tdisabled,\n\tonChange,\n\tonApply\n}: Pick<ImageSelectionPanelProps, \"value\" | \"defaultValue\" | \"disabled\" | \"onChange\" | \"onApply\">): ImageSelectionState {\n\tconst isControlled = value !== undefined;\n\tconst [draftValue, setDraftValue] = useState<SelectedImageData[]>(value ?? defaultValue ?? []);\n\tconst [controlledValueSnapshot, setControlledValueSnapshot] = useState(value);\n\tconst [requestedActiveIndex, setActiveIndex] = useState(0);\n\tconst [cropperStateByImage, setCropperStateByImage] = useState<Record<string, ImageCropperState>>({});\n\n\tif (isControlled && value !== controlledValueSnapshot) {\n\t\tsetControlledValueSnapshot(value);\n\t\tsetDraftValue(value ?? []);\n\t}\n\n\tconst updateDraftValue = useCallback((updater: (currentValue: SelectedImageData[]) => SelectedImageData[]) => {\n\t\tsetDraftValue((currentValue) => updater(currentValue));\n\t}, []);\n\n\tconst files = useMemo(() => draftValue.map((image) => image.file), [draftValue]);\n\tconst activeIndex = draftValue.length === 0 ? 0 : Math.min(requestedActiveIndex, draftValue.length - 1);\n\tconst activeImage = draftValue[activeIndex];\n\tconst activeImageKey = activeImage ? getImageKey(activeImage, activeIndex) : undefined;\n\tconst activeCropperState = activeImageKey\n\t\t? (cropperStateByImage[activeImageKey] ?? { crop: { x: 0, y: 0 }, zoom: 1 })\n\t\t: { crop: { x: 0, y: 0 }, zoom: 1 };\n\tconst hasSelected = draftValue.length > 0;\n\tconst canApply = !disabled && hasSelected && draftValue.every((image) => image.alt.trim() && image.crop);\n\n\tconst setFiles = useCallback(\n\t\t(nextFiles: SelectedImageFile[]) => {\n\t\t\tupdateDraftValue((currentValue) =>\n\t\t\t\tnextFiles.map((file) => {\n\t\t\t\t\t// Сохраняем alt и crop при переключении, удалении и добавлении файлов.\n\t\t\t\t\tconst existingImage = currentValue.find((image) => image.file.file === file.file);\n\n\t\t\t\t\tif (existingImage) {\n\t\t\t\t\t\treturn { ...existingImage, file };\n\t\t\t\t\t}\n\n\t\t\t\t\treturn { file, alt: \"\" };\n\t\t\t\t})\n\t\t\t);\n\t\t},\n\t\t[updateDraftValue]\n\t);\n\n\tconst setActiveAlt = useCallback(\n\t\t(alt: string) => {\n\t\t\tupdateDraftValue((currentValue) => currentValue.map((image, index) => (index === activeIndex ? { ...image, alt } : image)));\n\t\t},\n\t\t[activeIndex, updateDraftValue]\n\t);\n\n\tconst setActiveCrop = useCallback(\n\t\t(crop: CroppedAreaPixels) => {\n\t\t\tupdateDraftValue((currentValue) => currentValue.map((image, index) => (index === activeIndex ? { ...image, crop } : image)));\n\t\t},\n\t\t[activeIndex, updateDraftValue]\n\t);\n\n\tconst setActiveCropperCrop = useCallback(\n\t\t(crop: CropperPoint) => {\n\t\t\tif (!activeImageKey) return;\n\n\t\t\tsetCropperStateByImage((currentState) => ({\n\t\t\t\t...currentState,\n\t\t\t\t[activeImageKey]: {\n\t\t\t\t\tcrop,\n\t\t\t\t\tzoom: currentState[activeImageKey]?.zoom ?? 1\n\t\t\t\t}\n\t\t\t}));\n\t\t},\n\t\t[activeImageKey]\n\t);\n\n\tconst setActiveCropperZoom = useCallback(\n\t\t(zoom: number) => {\n\t\t\tif (!activeImageKey) return;\n\n\t\t\tsetCropperStateByImage((currentState) => ({\n\t\t\t\t...currentState,\n\t\t\t\t[activeImageKey]: {\n\t\t\t\t\tcrop: currentState[activeImageKey]?.crop ?? { x: 0, y: 0 },\n\t\t\t\t\tzoom\n\t\t\t\t}\n\t\t\t}));\n\t\t},\n\t\t[activeImageKey]\n\t);\n\n\tconst apply = useCallback(() => {\n\t\tonChange?.(draftValue);\n\t\tonApply?.(draftValue);\n\t}, [draftValue, onApply, onChange]);\n\n\treturn {\n\t\tvalue: draftValue,\n\t\tfiles,\n\t\tactiveIndex,\n\t\tactiveImage,\n\t\tactiveCropperState,\n\t\thasSelected,\n\t\tcanApply,\n\t\tapply,\n\t\tsetFiles,\n\t\tsetActiveIndex,\n\t\tsetActiveAlt,\n\t\tsetActiveCrop,\n\t\tsetActiveCropperCrop,\n\t\tsetActiveCropperZoom\n\t};\n}\n\nfunction resolveImageUploadMaxBytes(): number | undefined {\n\tif (typeof __IMAGE_UPLOAD_MAX_BYTES__ !== \"number\") return undefined;\n\treturn __IMAGE_UPLOAD_MAX_BYTES__;\n}\n\nfunction getPreviewImageStyle(image: SelectedImageData, size: ImageSize | undefined, aspect: number): CSSProperties {\n\tif (!image.crop || !size) {\n\t\treturn {\n\t\t\twidth: \"100%\",\n\t\t\taspectRatio: aspect,\n\t\t\tobjectFit: \"cover\",\n\t\t\tdisplay: \"block\"\n\t\t};\n\t}\n\n\tconst crop = image.crop;\n\n\t// Миниатюра масштабирует исходник так, чтобы видимой оставалась только выбранная область crop.\n\treturn {\n\t\tposition: \"absolute\",\n\t\tleft: `${-(crop.x / crop.width) * 100}%`,\n\t\ttop: `${-(crop.y / crop.height) * 100}%`,\n\t\twidth: `${(size.width / crop.width) * 100}%`,\n\t\theight: `${(size.height / crop.height) * 100}%`,\n\t\tmaxWidth: \"none\"\n\t};\n}\n\nfunction ImageSelectionFields({ aspect = 16 / 9, disabled, state }: { aspect?: number; disabled?: boolean; state: ImageSelectionState }) {\n\tconst area = state.activeImage?.crop;\n\tconst [imageSizes, setImageSizes] = useState<Record<string, ImageSize>>({});\n\n\treturn (\n\t\t<GridContainer gap=\"md\">\n\t\t\t<InputFiles\n\t\t\t\tlabel=\"Файл изображения\"\n\t\t\t\tallowedMime={[\"image/jpeg\", \"image/png\", \"image/webp\", \"image/avif\"]}\n\t\t\t\tvalue={state.files}\n\t\t\t\tonChange={state.setFiles}\n\t\t\t\tmaxBytes={resolveImageUploadMaxBytes()}\n\t\t\t\tonReadError={(e) => console.log(\"e\", e)}\n\t\t\t/>\n\n\t\t\t{state.hasSelected && state.activeImage && (\n\t\t\t\t<div>\n\t\t\t\t\t<GridContainer templateColumns=\"repeat(auto-fill, minmax(10em, 1fr))\" gap=\"xs\">\n\t\t\t\t\t\t{state.value.map((image, index) => {\n\t\t\t\t\t\t\tconst imageKey = getImageKey(image, index);\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tkey={imageKey}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\t\t\tonClick={() => state.setActiveIndex(index)}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tpadding: 0,\n\t\t\t\t\t\t\t\t\t\tborder: index === state.activeIndex ? \"2px solid var(--border-accent)\" : \"2px solid transparent\",\n\t\t\t\t\t\t\t\t\t\tbackground: \"transparent\",\n\t\t\t\t\t\t\t\t\t\tcursor: disabled ? \"default\" : \"pointer\"\n\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tposition: \"relative\",\n\t\t\t\t\t\t\t\t\t\t\tdisplay: \"block\",\n\t\t\t\t\t\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\t\t\t\t\t\taspectRatio: aspect,\n\t\t\t\t\t\t\t\t\t\t\toverflow: \"hidden\"\n\t\t\t\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tsrc={image.file.dataUrl}\n\t\t\t\t\t\t\t\t\t\t\tstyle={getPreviewImageStyle(image, imageSizes[imageKey], aspect)}\n\t\t\t\t\t\t\t\t\t\t\tonLoad={(event) => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst target = event.currentTarget;\n\n\t\t\t\t\t\t\t\t\t\t\t\tsetImageSizes((currentSizes) => ({\n\t\t\t\t\t\t\t\t\t\t\t\t\t...currentSizes,\n\t\t\t\t\t\t\t\t\t\t\t\t\t[imageKey]: {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth: target.naturalWidth,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight: target.naturalHeight\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}));\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</GridContainer>\n\t\t\t\t\t<div>\n\t\t\t\t\t\tВыберите область изображения{\" \"}\n\t\t\t\t\t\t{area &&\n\t\t\t\t\t\t\t(area.width < 1200 ? (\n\t\t\t\t\t\t\t\t<code className=\"statusError\">\n\t\t\t\t\t\t\t\t\t{area.width}x{area.height} - низкое качество изображения!\n\t\t\t\t\t\t\t\t</code>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<code className=\"statusSuccess\">\n\t\t\t\t\t\t\t\t\t{area.width}x{area.height}\n\t\t\t\t\t\t\t\t</code>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div style={{ position: \"relative\", width: \"100%\", aspectRatio: aspect }}>\n\t\t\t\t\t\t<Cropper\n\t\t\t\t\t\t\tkey={getImageKey(state.activeImage, state.activeIndex)}\n\t\t\t\t\t\t\timage={state.activeImage.file.dataUrl}\n\t\t\t\t\t\t\tcrop={state.activeCropperState.crop}\n\t\t\t\t\t\t\tzoom={state.activeCropperState.zoom}\n\t\t\t\t\t\t\taspect={aspect}\n\t\t\t\t\t\t\tonCropChange={state.setActiveCropperCrop}\n\t\t\t\t\t\t\tonZoomChange={state.setActiveCropperZoom}\n\t\t\t\t\t\t\tonCropComplete={(_croppedArea, croppedAreaPixels) => state.setActiveCrop(croppedAreaPixels)}\n\t\t\t\t\t\t\tzoomSpeed={0.1}\n\t\t\t\t\t\t\tobjectFit=\"contain\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<InputText\n\t\t\t\trequired\n\t\t\t\tdisabled={!state.hasSelected || disabled}\n\t\t\t\tlabel=\"Краткое описание изображения\"\n\t\t\t\tplaceholder=\"\"\n\t\t\t\tvalue={state.activeImage?.alt ?? \"\"}\n\t\t\t\tonChange={state.setActiveAlt}\n\t\t\t/>\n\t\t</GridContainer>\n\t);\n}\n\nexport function ImageSelectionPanel({ aspect = 16 / 9, disabled, renderActions, ...props }: ImageSelectionPanelProps) {\n\tconst state = useImageSelectionState({ ...props, disabled });\n\tconst actionsData = {\n\t\tvalue: state.value,\n\t\tactiveIndex: state.activeIndex,\n\t\thasSelected: state.hasSelected,\n\t\tcanApply: state.canApply,\n\t\tapply: state.apply\n\t};\n\tconst hasApplyHandler = props.onChange !== undefined || props.onApply !== undefined;\n\n\treturn (\n\t\t<>\n\t\t\t<ImageSelectionFields aspect={aspect} disabled={disabled} state={state} />\n\t\t\t{renderActions\n\t\t\t\t? renderActions(actionsData)\n\t\t\t\t: hasApplyHandler && (\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Button disabled={!state.canApply} tone=\"success\" onClick={state.apply}>\n\t\t\t\t\t\t\t\tПрименить\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t</>\n\t);\n}\n\nexport function ImageSelectionModal({\n\taspect = 16 / 9,\n\tdisabled,\n\tisOpen = true,\n\tonClose = () => {},\n\ttitle = \"Загрузка нового изображения\",\n\t...props\n}: ImageSelectionModalProps) {\n\tconst state = useImageSelectionState({ ...props, disabled });\n\tconst hasApplyHandler = props.onChange !== undefined || props.onApply !== undefined;\n\n\tif (!hasApplyHandler) {\n\t\treturn (\n\t\t\t<Modal isOpen={isOpen} onClose={onClose} title={title} size=\"xl\">\n\t\t\t\t<ModalContent scrollable>\n\t\t\t\t\t<ImageSelectionFields aspect={aspect} disabled={disabled} state={state} />\n\t\t\t\t</ModalContent>\n\t\t\t</Modal>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Modal isOpen={isOpen} onClose={onClose} title={title} size=\"xl\">\n\t\t\t<ModalContent scrollable>\n\t\t\t\t<ImageSelectionFields aspect={aspect} disabled={disabled} state={state} />\n\t\t\t</ModalContent>\n\t\t\t<ModalFooter>\n\t\t\t\t<Button disabled={!state.canApply} tone=\"success\" onClick={state.apply}>\n\t\t\t\t\tПрименить\n\t\t\t\t</Button>\n\t\t\t</ModalFooter>\n\t\t</Modal>\n\t);\n}\n","import { type ImgHTMLAttributes, type ReactNode } from \"react\";\n\nimport { ImageRenderer, type ImageSource } from \"./ImageRenderer\";\n\nexport type ImageFormat = \"avif\" | \"webp\" | \"jpeg\" | \"jpg\" | \"png\";\n\nconst DEFAULT_SET_WIDTHS = [2880, 1920, 1280, 640, 320] as const;\nconst DEFAULT_SET_FORMATS = [\"avif\", \"webp\"] as const satisfies readonly ImageFormat[];\n\nexport type StoredImageData = {\n\tfilename: string;\n\tpath: string;\n\twidth?: number;\n\theight?: number;\n\talt?: string;\n\thasSet?: boolean;\n};\n\ninterface ImageViewProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\"> {\n\t/** Запись из таблицы Image. Предпочтительный способ передать изображение из БД. */\n\timage?: StoredImageData;\n\t/** Базовое имя файла из БД. Для новых изображений это md5 без расширения. */\n\tsrc?: string;\n\t/** Путь из БД относительно публичного корня, например `images/articles`. */\n\tpath?: string;\n\talt?: string;\n\trole?: string;\n\tariaLabel?: string;\n\tcaption?: string;\n\tfallback?: ReactNode;\n\tuseFigure?: boolean;\n\taspectRatio?: string | \"unset\";\n\t/** Форматы, которые реально лежат в хранилище для текущего изображения. */\n\tformats?: readonly ImageFormat[];\n\t/** Формат для img.src. Должен существовать в хранилище. */\n\tfallbackFormat?: ImageFormat;\n\t/** Набор размеров для файлов вида base@width.format. */\n\tvariantWidths?: readonly number[];\n\t/** Признак наличия responsive-набора. Если false, @size srcSet не строится. */\n\thasSet?: boolean;\n}\n\nfunction getImageMime(format: ImageFormat): string {\n\tif (format === \"jpg\" || format === \"jpeg\") {\n\t\treturn \"image/jpeg\";\n\t}\n\n\treturn `image/${format}`;\n}\n\nfunction normalizeImagePath(path?: string): string {\n\tif (!path) return \"\";\n\n\treturn path.replace(/^\\/+|\\/+$/g, \"\");\n}\n\nfunction buildImageBasePath(path: string | undefined, filename: string): string {\n\tconst normalizedPath = normalizeImagePath(path);\n\n\treturn normalizedPath ? `/${normalizedPath}/${filename}` : `/${filename}`;\n}\n\nfunction buildImageSources({\n\tbasePath,\n\tformats,\n\tvariantWidths,\n\thasSet\n}: {\n\tbasePath: string;\n\tformats: readonly ImageFormat[];\n\tvariantWidths: readonly number[];\n\thasSet: boolean;\n}): ImageSource[] {\n\tif (!hasSet) {\n\t\treturn formats.map((format) => ({\n\t\t\tsrcSet: `${basePath}.${format}`,\n\t\t\ttype: getImageMime(format)\n\t\t}));\n\t}\n\n\treturn formats.map((format) => ({\n\t\tsrcSet: variantWidths.map((width) => `${basePath}@${width}.${format} ${width}w`).join(\", \"),\n\t\ttype: getImageMime(format)\n\t}));\n}\n\n/**\n * Адаптер для изображений из таблицы Image.\n * Компонент строит пути только из данных БД: path + filename + формат/размер.\n */\nexport function ImageView({\n\timage,\n\tsrc,\n\tpath,\n\talt,\n\tformats = DEFAULT_SET_FORMATS,\n\tfallbackFormat,\n\tvariantWidths = DEFAULT_SET_WIDTHS,\n\thasSet,\n\taspectRatio,\n\t...props\n}: ImageViewProps) {\n\tconst filename = image?.filename ?? src;\n\n\tif (!filename) {\n\t\treturn <ImageRenderer src=\"\" alt={alt ?? image?.alt} {...props} />;\n\t}\n\n\tconst resolvedPath = image?.path ?? path;\n\tconst resolvedHasSet = hasSet ?? image?.hasSet ?? true;\n\tconst resolvedFormats = formats.length > 0 ? formats : DEFAULT_SET_FORMATS;\n\tconst resolvedFallbackFormat = fallbackFormat ?? resolvedFormats[resolvedFormats.length - 1] ?? \"webp\";\n\tconst basePath = buildImageBasePath(resolvedPath, filename);\n\tconst resolvedAspectRatio = aspectRatio ?? (image?.width && image.height ? `${image.width} / ${image.height}` : undefined);\n\tconst sources = buildImageSources({\n\t\tbasePath,\n\t\tformats: resolvedFormats,\n\t\tvariantWidths,\n\t\thasSet: resolvedHasSet\n\t});\n\n\treturn (\n\t\t<ImageRenderer\n\t\t\tsrc={`${basePath}.${resolvedFallbackFormat}`}\n\t\t\tsources={sources}\n\t\t\talt={alt ?? image?.alt}\n\t\t\taspectRatio={resolvedAspectRatio}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/dist/image/ui/ImageCropper.d.ts

@@ -0,0 +1,13 @@
+export type CroppedAreaPixels = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function ImageCropper({ image, aspect, width, onCropComplete }: {
+    image: string;
+    aspect?: number;
+    width?: number;
+    onCropComplete?: (croppedAreaPixels: CroppedAreaPixels) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ImageCropper.d.ts.map

package/dist/image/ui/ImageCropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../../src/image/ui/ImageCropper.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,MAAmB,EACnB,KAAK,EACL,cAAc,EACd,EAAE;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChE,+BA0BA"}

package/dist/image/ui/ImagePlaceholder.d.ts

@@ -0,0 +1,9 @@
+interface ImagePlaceholderProps {
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: string | "unset";
+    className?: string;
+}
+export declare function ImagePlaceholder({ width, height, aspectRatio, className }: ImagePlaceholderProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImagePlaceholder.d.ts.map

package/dist/image/ui/ImagePlaceholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePlaceholder.d.ts","sourceRoot":"","sources":["../../../src/image/ui/ImagePlaceholder.tsx"],"names":[],"mappings":"AAAA,UAAU,qBAAqB;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAc,EAAE,MAAe,EAAE,WAAsB,EAAE,SAAS,EAAE,EAAE,qBAAqB,+BA6B7H"}

package/dist/image/ui/ImageRenderer.d.ts

@@ -0,0 +1,24 @@
+import { type CSSProperties, type ImgHTMLAttributes, type ReactNode } from "react";
+export type ImageSource = {
+    srcSet: string;
+    type?: string;
+    sizes?: string;
+};
+export interface ImageRendererProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> {
+    src: string;
+    sources?: readonly ImageSource[];
+    alt?: string;
+    role?: string;
+    ariaLabel?: string;
+    caption?: string;
+    fallback?: ReactNode;
+    useFigure?: boolean;
+    aspectRatio?: string | "unset";
+    wrapperStyle?: CSSProperties;
+}
+/**
+ * Базовый рендер изображения: lazy-появление, placeholder, обработка ошибки и figure/caption.
+ * Компонент не знает, как устроено хранилище и какие форматы/размеры доступны.
+ */
+export declare function ImageRenderer({ src, sources, alt, role, ariaLabel, caption, fallback, useFigure, width, height, aspectRatio, style, wrapperStyle, ...imgProps }: ImageRendererProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageRenderer.d.ts.map

package/dist/image/ui/ImageRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../../src/image/ui/ImageRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIhH,MAAM,MAAM,WAAW,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,CAAC;IAC3F,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC7B,GAAG,EACH,OAAO,EACP,GAAG,EACH,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAc,EACd,MAAe,EACf,WAAsB,EACtB,KAAK,EACL,YAAY,EACZ,GAAG,QAAQ,EACX,EAAE,kBAAkB,+BAmFpB"}

package/dist/image/ui/ImageSelection.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { ReadFileResult } from "@ryuzaki13/react-foundation-lib/file";
+import { CroppedAreaPixels } from "./ImageCropper";
+type SelectedImageFile = Extract<ReadFileResult, {
+    mode: "data-url";
+}>;
+/**
+ * Данные одного выбранного изображения, которые нужны вызывающему коду:
+ * исходный файл, пользовательское описание и выбранная область обрезки.
+ */
+export type SelectedImageData = {
+    file: SelectedImageFile;
+    alt: string;
+    crop?: CroppedAreaPixels;
+};
+interface ImageSelectionPanelProps {
+    aspect?: number;
+    disabled?: boolean;
+    value?: SelectedImageData[];
+    defaultValue?: SelectedImageData[];
+    onChange?: (data: SelectedImageData[]) => void;
+    onApply?: (data: SelectedImageData[]) => void;
+    renderActions?: (data: ImageSelectionActionsData) => ReactNode;
+}
+interface ImageSelectionModalProps extends ImageSelectionPanelProps {
+    isOpen?: boolean;
+    onClose?: () => void;
+    title?: string;
+}
+interface ImageSelectionActionsData {
+    value: SelectedImageData[];
+    activeIndex: number;
+    hasSelected: boolean;
+    canApply: boolean;
+    apply: () => void;
+}
+export declare function ImageSelectionPanel({ aspect, disabled, renderActions, ...props }: ImageSelectionPanelProps): import("react").JSX.Element;
+export declare function ImageSelectionModal({ aspect, disabled, isOpen, onClose, title, ...props }: ImageSelectionModalProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageSelection.d.ts.map