@haklex/rich-plugin-image-editor 0.42.1 → 0.43.0

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { Circle, Crop, Hash, ImageOff, MoveUpRight, PaintBucket, Pen, Redo2, Square, Type, Undo2 } from "lucide-react";
+import { Circle, Crop, Grid3x3, Hash, ImageOff, MapPin, MoveUpRight, PaintBucket, Pen, Pencil, Redo2, Square, Type, Undo2, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { ReactCrop } from "react-image-crop";
 import { MarkerArea, Renderer, TextMarkerEditor } from "@markerjs/markerjs3";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { dismissTopDialog, presentDialog } from "@haklex/rich-editor-ui";
 import { useImagePreprocess } from "@haklex/rich-editor/plugins";
-import { presentDialog } from "@haklex/rich-editor-ui";
 import { usePortalTheme } from "@haklex/rich-style-token";
 //#region src/annotation.ts
 var MARKER_TYPE_BY_TOOL = {
@@ -17,7 +17,7 @@ var MARKER_TYPE_BY_TOOL = {
 	text: "TextMarker"
 };
 function isAnnotationTool(tool) {
-	return tool !== "crop";
+	return tool !== "crop" && tool !== "mosaic";
 }
 var SWATCH_COLORS = [
 	"#ef4444",
@@ -71,19 +71,29 @@ var toolRail = "_1257qq29";
 var toolButton = "_1257qq2a";
 var toolButtonActive = "_1257qq2b";
 var canvasArea = "_1257qq2d";
+var cropSurface = "_1257qq2e";
+var cropImage = "_1257qq2f";
 var annotationSurface = "_1257qq2g";
 var optionsBar = "_1257qq2h";
 var swatch = "_1257qq2i";
 var swatchActive = "_1257qq2j";
 var optionButton = "_1257qq2k";
+var optionButtonActive = "_1257qq2l";
 var optionDivider = "_1257qq2n";
 var errorState = "_1257qq2o";
 var attribution = "_1257qq2p";
-var footer = "_1257qq2q";
+var footer$1 = "_1257qq2q";
 var footerSpacer = "_1257qq2r";
-var ghostButton = "_1257qq2t _1257qq2s";
-var secondaryButton = "_1257qq2v _1257qq2s";
-var primaryButton = "_1257qq2w _1257qq2s";
+var ghostButton = "_1257qq2u _1257qq2t";
+var topBarGhostButton = "_1257qq2v _1257qq2u _1257qq2t";
+var secondaryButton = "_1257qq2w _1257qq2t";
+var primaryButton = "_1257qq2x _1257qq2t";
+var segmentButton = "_1257qq2y _1257qq2k";
+var rangeField = "_1257qq2z";
+var rangeInput = "_1257qq210";
+var rangeValue = "_1257qq211";
+var sizeControl = "_1257qq212";
+var sizeSelect = "_1257qq213";
 //#endregion
 //#region src/AnnotationSurface.tsx
 var TEXT_TOOLS = /* @__PURE__ */ new Set(["counter", "text"]);
@@ -325,6 +335,228 @@ async function canvasToObjectUrl(canvas) {
 	return URL.createObjectURL(blob);
 }
 //#endregion
+//#region src/edit-summary.ts
+function buildEditSummary({ cropped, marks, mosaics, resizedTo }) {
+	const parts = [];
+	if (cropped) parts.push("Cropped");
+	if (marks > 0) parts.push(`${marks} mark${marks > 1 ? "s" : ""}`);
+	if (mosaics > 0) parts.push(`${mosaics} mosaic`);
+	if (resizedTo) parts.push(`${resizedTo.width} × ${resizedTo.height}`);
+	return parts.join(" · ");
+}
+//#endregion
+//#region src/mosaic.ts
+var MOSAIC_STRENGTH_RANGE = {
+	blur: {
+		max: 48,
+		min: 12
+	},
+	pixelate: {
+		max: 48,
+		min: 8
+	}
+};
+var MOSAIC_DEFAULT_STRENGTH = {
+	blur: 20,
+	pixelate: 16
+};
+function clampMosaicStrength(mode, value) {
+	const { max, min } = MOSAIC_STRENGTH_RANGE[mode];
+	return Math.min(Math.max(Math.round(value), min), max);
+}
+function mosaicSampleSize(rect, block) {
+	return {
+		height: Math.max(1, Math.round(rect.height / block)),
+		width: Math.max(1, Math.round(rect.width / block))
+	};
+}
+async function applyMosaic(sourceUrl, area, mode, block) {
+	const canvas = await sourceToCanvas(sourceUrl);
+	const rect = clampCropRect(area, canvas.width, canvas.height);
+	if (rect.width === 0 || rect.height === 0) throw new Error("Mosaic region is empty");
+	const sample = mosaicSampleSize(rect, block);
+	const small = document.createElement("canvas");
+	small.width = sample.width;
+	small.height = sample.height;
+	const smallCtx = small.getContext("2d");
+	const ctx = canvas.getContext("2d");
+	if (!smallCtx || !ctx) throw new Error("Canvas 2d context unavailable");
+	const smooth = mode === "blur";
+	smallCtx.imageSmoothingEnabled = smooth;
+	smallCtx.imageSmoothingQuality = "high";
+	smallCtx.drawImage(canvas, rect.x, rect.y, rect.width, rect.height, 0, 0, sample.width, sample.height);
+	ctx.imageSmoothingEnabled = smooth;
+	ctx.imageSmoothingQuality = "high";
+	ctx.drawImage(small, 0, 0, sample.width, sample.height, rect.x, rect.y, rect.width, rect.height);
+	return canvasToObjectUrl(canvas);
+}
+//#endregion
+//#region src/MosaicOptionsBar.tsx
+var MODES = [{
+	id: "pixelate",
+	label: "Pixelate"
+}, {
+	id: "blur",
+	label: "Blur"
+}];
+var MosaicOptionsBar = ({ canUndo, mode, onModeChange, onStrengthChange, onUndo, strength }) => {
+	const range = MOSAIC_STRENGTH_RANGE[mode];
+	return /* @__PURE__ */ jsxs("div", {
+		className: optionsBar,
+		children: [
+			MODES.map((item) => /* @__PURE__ */ jsx("button", {
+				"aria-pressed": mode === item.id,
+				type: "button",
+				className: mode === item.id ? `${segmentButton} ${optionButtonActive}` : segmentButton,
+				onClick: () => onModeChange(item.id),
+				children: item.label
+			}, item.id)),
+			/* @__PURE__ */ jsx("div", { className: optionDivider }),
+			/* @__PURE__ */ jsxs("label", {
+				className: rangeField,
+				children: [
+					mode === "blur" ? "Radius" : "Block size",
+					/* @__PURE__ */ jsx("input", {
+						className: rangeInput,
+						max: range.max,
+						min: range.min,
+						type: "range",
+						value: strength,
+						onChange: (event) => onStrengthChange(Number(event.currentTarget.value))
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: rangeValue,
+						children: [strength, " px"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: optionDivider }),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Undo",
+				className: optionButton,
+				disabled: !canUndo,
+				title: "Undo",
+				type: "button",
+				onClick: onUndo,
+				children: /* @__PURE__ */ jsx(Undo2, { size: 16 })
+			})
+		]
+	});
+};
+//#endregion
+//#region src/resize.ts
+var LONG_EDGE_PRESETS = [
+	3840,
+	2560,
+	1920,
+	1280
+];
+function canShrinkTo(size, longEdge) {
+	return longEdge < Math.max(size.width, size.height);
+}
+function scaleToLongEdge(size, longEdge) {
+	if (!canShrinkTo(size, longEdge)) return size;
+	const ratio = longEdge / Math.max(size.width, size.height);
+	return {
+		height: Math.max(1, Math.round(size.height * ratio)),
+		width: Math.max(1, Math.round(size.width * ratio))
+	};
+}
+function scaleCanvasToLongEdge(source, longEdge) {
+	const target = scaleToLongEdge({
+		height: source.height,
+		width: source.width
+	}, longEdge);
+	if (target.width === source.width && target.height === source.height) return source;
+	const canvas = document.createElement("canvas");
+	canvas.width = target.width;
+	canvas.height = target.height;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Canvas 2d context unavailable");
+	ctx.imageSmoothingEnabled = true;
+	ctx.imageSmoothingQuality = "high";
+	ctx.drawImage(source, 0, 0, target.width, target.height);
+	return canvas;
+}
+//#endregion
+//#region src/OutputSizeControl.tsx
+var CUSTOM = "custom";
+function useOutputSize(size) {
+	const [mode, setMode] = useState("original");
+	const [presetEdge, setPresetEdge] = useState(null);
+	const [customEdge, setCustomEdge] = useState("");
+	const requested = mode === "custom" ? Number(customEdge) : presetEdge;
+	const maxLongEdge = requested && size && canShrinkTo(size, requested) ? requested : null;
+	return {
+		controlProps: {
+			customEdge,
+			maxLongEdge,
+			mode,
+			size,
+			onCustomEdgeChange: setCustomEdge,
+			onModeChange: (nextMode, edge) => {
+				setMode(nextMode);
+				setPresetEdge(edge);
+			}
+		},
+		maxLongEdge
+	};
+}
+var OutputSizeControl = ({ customEdge, maxLongEdge, mode, onCustomEdgeChange, onModeChange, size }) => {
+	const output = size && maxLongEdge !== null ? scaleToLongEdge(size, maxLongEdge) : size;
+	return /* @__PURE__ */ jsxs("div", {
+		className: sizeControl,
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				className: rangeField,
+				children: ["Long edge", /* @__PURE__ */ jsxs("select", {
+					className: sizeSelect,
+					disabled: !size,
+					value: mode === "preset" ? String(maxLongEdge) : mode,
+					onChange: (event) => {
+						const { value } = event.currentTarget;
+						if (value === "original") onModeChange("original", null);
+						else if (value === CUSTOM) onModeChange("custom", null);
+						else onModeChange("preset", Number(value));
+					},
+					children: [
+						/* @__PURE__ */ jsx("option", {
+							value: "original",
+							children: "Original"
+						}),
+						LONG_EDGE_PRESETS.map((edge) => /* @__PURE__ */ jsxs("option", {
+							disabled: !size || !canShrinkTo(size, edge),
+							value: edge,
+							children: [edge, " px"]
+						}, edge)),
+						/* @__PURE__ */ jsx("option", {
+							value: CUSTOM,
+							children: "Custom…"
+						})
+					]
+				})]
+			}),
+			mode === "custom" && /* @__PURE__ */ jsx("input", {
+				"aria-label": "Custom long edge in pixels",
+				className: "_1257qq214",
+				inputMode: "numeric",
+				placeholder: "1600",
+				value: customEdge,
+				onChange: (event) => onCustomEdgeChange(event.currentTarget.value.replaceAll(/\D/g, ""))
+			}),
+			output && /* @__PURE__ */ jsxs("span", {
+				className: "_1257qq215",
+				children: [
+					"→ ",
+					output.width,
+					" × ",
+					output.height
+				]
+			})
+		]
+	});
+};
+//#endregion
 //#region src/build-result.ts
 async function buildResult(original, canvas) {
 	if (!canvas) return original;
@@ -357,14 +589,15 @@ async function applyCropRebase(sourceUrl, rect, markerState) {
 		} : null
 	};
 }
-async function exportResult({ hasRebasedBitmap, markerState, original, pendingCropRect, sourceUrl }) {
+async function exportResult({ hasRebasedBitmap, markerState, maxLongEdge, original, pendingCropRect, sourceUrl }) {
 	const hasMarkers = markerState !== null && markerState.markers.length > 0;
 	let canvas = null;
 	if (hasMarkers && markerState) {
 		canvas = await rasterizeAnnotations(sourceUrl, markerState);
 		if (pendingCropRect) canvas = cropCanvas(canvas, pendingCropRect);
 	} else if (pendingCropRect) canvas = await extractCrop(sourceUrl, pendingCropRect);
-	else if (hasRebasedBitmap) canvas = await sourceToCanvas(sourceUrl);
+	else if (hasRebasedBitmap || maxLongEdge !== null) canvas = await sourceToCanvas(sourceUrl);
+	if (canvas && maxLongEdge !== null) canvas = scaleCanvasToLongEdge(canvas, maxLongEdge);
 	return buildResult(original, canvas);
 }
 //#endregion
@@ -418,6 +651,85 @@ var ToolOptionsBar = ({ canRedo, canUndo, onRedo, onStrokeColorChange, onStrokeW
 	]
 });
 //#endregion
+//#region src/ToolRail.tsx
+var TOOLS = [
+	{
+		icon: Crop,
+		id: "crop",
+		label: "Crop"
+	},
+	{
+		icon: MoveUpRight,
+		id: "arrow",
+		label: "Arrow"
+	},
+	{
+		icon: Pen,
+		id: "pen",
+		label: "Pen"
+	},
+	{
+		icon: Square,
+		id: "rect",
+		label: "Rectangle"
+	},
+	{
+		icon: Circle,
+		id: "ellipse",
+		label: "Ellipse"
+	},
+	{
+		icon: Type,
+		id: "text",
+		label: "Text"
+	},
+	{
+		icon: Hash,
+		id: "counter",
+		label: "Counter"
+	},
+	{
+		icon: PaintBucket,
+		id: "cover",
+		label: "Cover"
+	},
+	{
+		icon: Grid3x3,
+		id: "mosaic",
+		label: "Mosaic"
+	}
+];
+var ToolRail = ({ activeTool, disabled, onSelect }) => /* @__PURE__ */ jsx("div", {
+	className: toolRail,
+	children: TOOLS.map((tool, index) => /* @__PURE__ */ jsxs("span", {
+		className: toolGroup,
+		children: [/* @__PURE__ */ jsx("button", {
+			"aria-label": tool.label,
+			"aria-pressed": activeTool === tool.id,
+			disabled,
+			title: tool.label,
+			type: "button",
+			className: activeTool === tool.id ? `${toolButton} ${toolButtonActive}` : toolButton,
+			onClick: () => onSelect(tool.id),
+			children: /* @__PURE__ */ jsx(tool.icon, { size: 18 })
+		}), index === 0 && /* @__PURE__ */ jsx("div", { className: "_1257qq2c" })]
+	}, tool.id))
+});
+//#endregion
+//#region src/useEscapeDismissesTopDialog.ts
+function useEscapeDismissesTopDialog() {
+	useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			dismissTopDialog();
+		};
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => document.removeEventListener("keydown", handleKeyDown, true);
+	}, []);
+}
+//#endregion
 //#region src/useImageEditorState.ts
 var FULL_IMAGE_CROP = {
 	height: 100,
@@ -433,12 +745,25 @@ function useImageEditorState(objectUrl) {
 	const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
 	const [naturalSize, setNaturalSize] = useState(null);
 	const markerStateRef = useRef(null);
+	const [mosaicHistory, setMosaicHistory] = useState([]);
 	const rebasedUrlRef = useRef(null);
 	rebasedUrlRef.current = rebasedBitmapUrl;
-	useEffect(() => () => {
-		if (rebasedUrlRef.current) URL.revokeObjectURL(rebasedUrlRef.current);
+	const mosaicHistoryRef = useRef(mosaicHistory);
+	mosaicHistoryRef.current = mosaicHistory;
+	const mountedRef = useRef(false);
+	useEffect(() => {
+		mountedRef.current = true;
+		return () => {
+			mountedRef.current = false;
+			if (rebasedUrlRef.current) URL.revokeObjectURL(rebasedUrlRef.current);
+			for (const url of mosaicHistoryRef.current) if (url) URL.revokeObjectURL(url);
+		};
 	}, []);
 	const sourceUrl = rebasedBitmapUrl ?? objectUrl;
+	const sourceUrlRef = useRef(sourceUrl);
+	sourceUrlRef.current = sourceUrl;
+	const [mosaicBusy, setMosaicBusy] = useState(false);
+	const mosaicBusyRef = useRef(false);
 	const hasPendingCrop = croppedAreaPixels !== null && naturalSize !== null && croppedAreaPixels.width >= 1 && croppedAreaPixels.height >= 1 && !isFullImageCrop(croppedAreaPixels, naturalSize.width, naturalSize.height);
 	const resetCrop = () => {
 		setCrop(FULL_IMAGE_CROP);
@@ -450,6 +775,8 @@ function useImageEditorState(objectUrl) {
 		try {
 			const rebase = await applyCropRebase(sourceUrl, rect, markerStateRef.current);
 			if (rebasedBitmapUrl) URL.revokeObjectURL(rebasedBitmapUrl);
+			for (const url of mosaicHistory) if (url) URL.revokeObjectURL(url);
+			setMosaicHistory([]);
 			setRebasedBitmapUrl(rebase.bitmapUrl);
 			markerStateRef.current = rebase.markerState;
 			resetCrop();
@@ -460,13 +787,44 @@ function useImageEditorState(objectUrl) {
 			setActiveTool(tool);
 		} catch {}
 	};
+	const applyMosaicArea = async (area, mode, block) => {
+		if (!naturalSize || mosaicBusyRef.current) return;
+		const rect = clampCropRect(area, naturalSize.width, naturalSize.height);
+		if (rect.width < 1 || rect.height < 1) return;
+		mosaicBusyRef.current = true;
+		setMosaicBusy(true);
+		try {
+			const bitmapUrl = await applyMosaic(sourceUrlRef.current, rect, mode, block);
+			if (!mountedRef.current) {
+				URL.revokeObjectURL(bitmapUrl);
+				return;
+			}
+			const previous = rebasedUrlRef.current;
+			rebasedUrlRef.current = bitmapUrl;
+			setMosaicHistory((history) => [...history, previous]);
+			setRebasedBitmapUrl(bitmapUrl);
+		} finally {
+			mosaicBusyRef.current = false;
+			if (mountedRef.current) setMosaicBusy(false);
+		}
+	};
+	const undoMosaic = () => {
+		if (mosaicHistory.length === 0 || mosaicBusyRef.current) return;
+		const previous = mosaicHistory.at(-1) ?? null;
+		if (rebasedBitmapUrl) URL.revokeObjectURL(rebasedBitmapUrl);
+		setMosaicHistory(mosaicHistory.slice(0, -1));
+		setRebasedBitmapUrl(previous);
+	};
 	return {
 		activeTool,
+		applyMosaicArea,
 		confirmCropAndSwitch,
 		crop,
 		croppedAreaPixels,
 		hasPendingCrop,
 		markerStateRef,
+		mosaicBusy,
+		mosaicCount: mosaicHistory.length,
 		naturalSize,
 		rebasedBitmapUrl,
 		resetCrop,
@@ -474,84 +832,75 @@ function useImageEditorState(objectUrl) {
 		setCrop,
 		setCroppedAreaPixels,
 		setNaturalSize,
-		sourceUrl
+		sourceUrl,
+		undoMosaic
 	};
 }
 //#endregion
 //#region src/ImageEditModal.tsx
-var TOOLS = [
-	{
-		icon: Crop,
-		id: "crop",
-		label: "Crop"
-	},
-	{
-		icon: MoveUpRight,
-		id: "arrow",
-		label: "Arrow"
-	},
-	{
-		icon: Pen,
-		id: "pen",
-		label: "Pen"
-	},
-	{
-		icon: Square,
-		id: "rect",
-		label: "Rectangle"
-	},
-	{
-		icon: Circle,
-		id: "ellipse",
-		label: "Ellipse"
-	},
-	{
-		icon: Type,
-		id: "text",
-		label: "Text"
-	},
-	{
-		icon: Hash,
-		id: "counter",
-		label: "Counter"
-	},
-	{
-		icon: PaintBucket,
-		id: "cover",
-		label: "Cover"
-	}
-];
-var ImageEditModal = ({ file, onCancel, onConfirm, onSkip }) => {
+var ImageEditModal = ({ file, onCancel, onConfirm }) => {
 	const [objectUrl, setObjectUrl] = useState("");
 	const [decodeError, setDecodeError] = useState(false);
 	const [exporting, setExporting] = useState(false);
+	const [errorMessage, setErrorMessage] = useState(null);
 	const [strokeColor, setStrokeColor] = useState(SWATCH_COLORS[0]);
 	const [strokeWidth, setStrokeWidth] = useState(STROKE_WIDTHS[1]);
 	const [history, setHistory] = useState({
 		canRedo: false,
 		canUndo: false
 	});
+	const [mosaicMode, setMosaicMode] = useState("pixelate");
+	const [mosaicStrength, setMosaicStrength] = useState(MOSAIC_DEFAULT_STRENGTH.pixelate);
+	const [mosaicCrop, setMosaicCrop] = useState();
+	const [originalSize, setOriginalSize] = useState(null);
 	const imgRef = useRef(null);
 	const counterRef = useRef(1);
 	const annotationApiRef = useRef(null);
 	const editor = useImageEditorState(objectUrl);
+	useEscapeDismissesTopDialog();
 	const { hasPendingCrop, markerStateRef, sourceUrl } = editor;
 	useEffect(() => {
 		const url = URL.createObjectURL(file);
 		setObjectUrl(url);
 		return () => URL.revokeObjectURL(url);
 	}, [file]);
+	const pendingCropRect = editor.activeTool === "crop" && hasPendingCrop ? editor.croppedAreaPixels : null;
+	const { controlProps: outputSizeProps, maxLongEdge } = useOutputSize(pendingCropRect ?? editor.naturalSize);
 	const handleImageLoad = (event) => {
 		const { naturalHeight, naturalWidth } = event.currentTarget;
 		editor.setNaturalSize({
 			height: naturalHeight,
 			width: naturalWidth
 		});
+		setOriginalSize((size) => size ?? {
+			height: naturalHeight,
+			width: naturalWidth
+		});
 	};
-	const handleCropComplete = (pixelCrop) => {
+	const toNatural = (pixelCrop) => {
 		const img = imgRef.current;
-		if (!img || img.width === 0 || img.height === 0) return;
-		editor.setCroppedAreaPixels(displayedToNatural(pixelCrop, img.naturalWidth / img.width, img.naturalHeight / img.height));
+		if (!img || img.width === 0 || img.height === 0) return null;
+		return {
+			rect: displayedToNatural(pixelCrop, img.naturalWidth / img.width, img.naturalHeight / img.height),
+			scale: img.naturalWidth / img.width
+		};
+	};
+	const handleCropComplete = (pixelCrop) => {
+		const natural = toNatural(pixelCrop);
+		if (natural) editor.setCroppedAreaPixels(natural.rect);
+	};
+	const handleMosaicComplete = (pixelCrop) => {
+		const natural = toNatural(pixelCrop);
+		setMosaicCrop(void 0);
+		if (!natural || pixelCrop.width < 2 || pixelCrop.height < 2) return;
+		editor.applyMosaicArea(natural.rect, mosaicMode, mosaicStrength * natural.scale).then(() => setErrorMessage(null)).catch((error) => {
+			console.error("[ImageEditModal] mosaic failed", error);
+			setErrorMessage("Could not apply mosaic to this area");
+		});
+	};
+	const handleMosaicModeChange = (mode) => {
+		setMosaicMode(mode);
+		setMosaicStrength(clampMosaicStrength(mode, mosaicStrength));
 	};
 	const handleToolClick = (tool) => {
 		if (tool === editor.activeTool) return;
@@ -561,23 +910,105 @@ var ImageEditModal = ({ file, onCancel, onConfirm, onSkip }) => {
 		}
 		editor.setActiveTool(tool);
 	};
+	const buildSummary = (output) => {
+		if (output === file) return "";
+		const size = pendingCropRect ?? editor.naturalSize;
+		return buildEditSummary({
+			cropped: pendingCropRect !== null || originalSize !== null && size !== null && (size.width !== originalSize.width || size.height !== originalSize.height),
+			marks: markerStateRef.current?.markers.length ?? 0,
+			mosaics: editor.mosaicCount,
+			resizedTo: maxLongEdge !== null && size ? scaleToLongEdge(size, maxLongEdge) : null
+		});
+	};
 	const handleConfirm = async () => {
 		setExporting(true);
+		setErrorMessage(null);
 		try {
-			const pendingCropRect = editor.activeTool === "crop" && hasPendingCrop ? editor.croppedAreaPixels : null;
-			onConfirm(await exportResult({
+			const output = await exportResult({
 				hasRebasedBitmap: editor.rebasedBitmapUrl !== null,
 				markerState: markerStateRef.current,
+				maxLongEdge,
 				original: file,
 				pendingCropRect,
 				sourceUrl
-			}));
-		} catch {
-			onSkip();
-		} finally {
+			});
+			onConfirm({
+				file: output,
+				summary: buildSummary(output)
+			});
+		} catch (error) {
+			console.error("[ImageEditModal] export failed", error);
+			setErrorMessage("Could not export the edited image. Try again or discard edits.");
 			setExporting(false);
 		}
 	};
+	const renderOptions = () => {
+		if (decodeError) return null;
+		if (editor.activeTool === "crop") return /* @__PURE__ */ jsx("button", {
+			className: topBarGhostButton,
+			disabled: !hasPendingCrop,
+			type: "button",
+			onClick: editor.resetCrop,
+			children: "Reset crop"
+		});
+		if (editor.activeTool === "mosaic") return /* @__PURE__ */ jsx(MosaicOptionsBar, {
+			canUndo: editor.mosaicCount > 0 && !editor.mosaicBusy,
+			mode: mosaicMode,
+			strength: mosaicStrength,
+			onModeChange: handleMosaicModeChange,
+			onStrengthChange: (value) => setMosaicStrength(clampMosaicStrength(mosaicMode, value)),
+			onUndo: editor.undoMosaic
+		});
+		return /* @__PURE__ */ jsx(ToolOptionsBar, {
+			canRedo: history.canRedo,
+			canUndo: history.canUndo,
+			showStrokeWidth: STROKE_TOOLS.has(editor.activeTool),
+			strokeColor,
+			strokeWidth,
+			onRedo: () => annotationApiRef.current?.redo(),
+			onStrokeColorChange: setStrokeColor,
+			onStrokeWidthChange: setStrokeWidth,
+			onUndo: () => annotationApiRef.current?.undo()
+		});
+	};
+	const renderCanvas = () => {
+		if (decodeError) return /* @__PURE__ */ jsxs("div", {
+			className: errorState,
+			children: [/* @__PURE__ */ jsx(ImageOff, { size: 24 }), /* @__PURE__ */ jsx("span", { children: "This image could not be displayed for editing." })]
+		});
+		if (!sourceUrl) return null;
+		if (isAnnotationTool(editor.activeTool)) return /* @__PURE__ */ jsx(AnnotationSurface, {
+			apiRef: annotationApiRef,
+			counterRef,
+			sourceUrl,
+			stateRef: markerStateRef,
+			strokeColor,
+			strokeWidth,
+			tool: editor.activeTool,
+			onDecodeError: () => setDecodeError(true),
+			onHistoryChange: (canUndo, canRedo) => setHistory({
+				canRedo,
+				canUndo
+			})
+		});
+		const isMosaic = editor.activeTool === "mosaic";
+		return /* @__PURE__ */ jsx(ReactCrop, {
+			className: cropSurface,
+			crop: isMosaic ? mosaicCrop : editor.crop,
+			disabled: isMosaic && editor.mosaicBusy,
+			keepSelection: !isMosaic,
+			onComplete: isMosaic ? handleMosaicComplete : handleCropComplete,
+			onChange: (_, percentCrop) => isMosaic ? setMosaicCrop(percentCrop) : editor.setCrop(percentCrop),
+			children: /* @__PURE__ */ jsx("img", {
+				alt: file.name,
+				className: cropImage,
+				ref: imgRef,
+				src: sourceUrl,
+				onError: () => setDecodeError(true),
+				onLoad: handleImageLoad
+			})
+		});
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: root,
 		children: [
@@ -588,75 +1019,18 @@ var ImageEditModal = ({ file, onCancel, onConfirm, onSkip }) => {
 					children: "Edit image"
 				}), /* @__PURE__ */ jsx("div", {
 					className: topBarControls,
-					children: !decodeError && (editor.activeTool === "crop" ? /* @__PURE__ */ jsx("button", {
-						className: "_1257qq2u _1257qq2t _1257qq2s",
-						disabled: !hasPendingCrop,
-						type: "button",
-						onClick: editor.resetCrop,
-						children: "Reset crop"
-					}) : /* @__PURE__ */ jsx(ToolOptionsBar, {
-						canRedo: history.canRedo,
-						canUndo: history.canUndo,
-						showStrokeWidth: STROKE_TOOLS.has(editor.activeTool),
-						strokeColor,
-						strokeWidth,
-						onRedo: () => annotationApiRef.current?.redo(),
-						onStrokeColorChange: setStrokeColor,
-						onStrokeWidthChange: setStrokeWidth,
-						onUndo: () => annotationApiRef.current?.undo()
-					}))
+					children: renderOptions()
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: body,
-				children: [/* @__PURE__ */ jsx("div", {
-					className: toolRail,
-					children: TOOLS.map((tool, index) => /* @__PURE__ */ jsxs("span", {
-						className: toolGroup,
-						children: [/* @__PURE__ */ jsx("button", {
-							"aria-label": tool.label,
-							"aria-pressed": editor.activeTool === tool.id,
-							disabled: decodeError,
-							title: tool.label,
-							type: "button",
-							className: editor.activeTool === tool.id ? `${toolButton} ${toolButtonActive}` : toolButton,
-							onClick: () => handleToolClick(tool.id),
-							children: /* @__PURE__ */ jsx(tool.icon, { size: 18 })
-						}), index === 0 && /* @__PURE__ */ jsx("div", { className: "_1257qq2c" })]
-					}, tool.id))
+				children: [/* @__PURE__ */ jsx(ToolRail, {
+					activeTool: editor.activeTool,
+					disabled: decodeError,
+					onSelect: handleToolClick
 				}), /* @__PURE__ */ jsxs("div", {
 					className: canvasArea,
-					children: [decodeError ? /* @__PURE__ */ jsxs("div", {
-						className: errorState,
-						children: [/* @__PURE__ */ jsx(ImageOff, { size: 24 }), /* @__PURE__ */ jsx("span", { children: "This image could not be displayed for editing." })]
-					}) : sourceUrl && (isAnnotationTool(editor.activeTool) ? /* @__PURE__ */ jsx(AnnotationSurface, {
-						apiRef: annotationApiRef,
-						counterRef,
-						sourceUrl,
-						stateRef: markerStateRef,
-						strokeColor,
-						strokeWidth,
-						tool: editor.activeTool,
-						onDecodeError: () => setDecodeError(true),
-						onHistoryChange: (canUndo, canRedo) => setHistory({
-							canRedo,
-							canUndo
-						})
-					}) : /* @__PURE__ */ jsx(ReactCrop, {
-						keepSelection: true,
-						className: "_1257qq2e",
-						crop: editor.crop,
-						onChange: (_, percentCrop) => editor.setCrop(percentCrop),
-						onComplete: handleCropComplete,
-						children: /* @__PURE__ */ jsx("img", {
-							alt: file.name,
-							className: "_1257qq2f",
-							ref: imgRef,
-							src: sourceUrl,
-							onError: () => setDecodeError(true),
-							onLoad: handleImageLoad
-						})
-					})), /* @__PURE__ */ jsx("a", {
+					children: [renderCanvas(), /* @__PURE__ */ jsx("a", {
 						className: attribution,
 						href: "https://markerjs.com",
 						rel: "noreferrer",
@@ -666,27 +1040,326 @@ var ImageEditModal = ({ file, onCancel, onConfirm, onSkip }) => {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: footer,
+				className: footer$1,
 				children: [
+					/* @__PURE__ */ jsx(OutputSizeControl, { ...outputSizeProps }),
+					/* @__PURE__ */ jsx("div", {
+						className: footerSpacer,
+						children: errorMessage && /* @__PURE__ */ jsx("span", {
+							className: "_1257qq2s",
+							role: "alert",
+							children: errorMessage
+						})
+					}),
 					/* @__PURE__ */ jsx("button", {
-						className: ghostButton,
+						className: secondaryButton,
 						type: "button",
-						onClick: onSkip,
-						children: "Upload without editing"
+						onClick: onCancel,
+						children: "Discard edits"
 					}),
-					/* @__PURE__ */ jsx("div", { className: footerSpacer }),
 					/* @__PURE__ */ jsx("button", {
-						className: secondaryButton,
+						className: primaryButton,
+						disabled: decodeError || exporting || editor.mosaicBusy,
+						type: "button",
+						onClick: handleConfirm,
+						children: "Done"
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/insert-sheet-model.ts
+var FLATTENED_BY_CANVAS = /* @__PURE__ */ new Set(["image/gif", "image/svg+xml"]);
+function isEditableImage(file) {
+	return !FLATTENED_BY_CANVAS.has(file.type);
+}
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${Math.round(bytes / 1024)} KB`;
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+async function finalizeRows(rows, removeGps, stripGps) {
+	const failedIds = [];
+	return {
+		failedIds,
+		files: (await Promise.all(rows.map(async (row) => {
+			if (row.current !== row.original || !removeGps || !row.gps) return row.current;
+			try {
+				if (!stripGps) throw new Error("No GPS stripper configured");
+				return await stripGps(row.original);
+			} catch {
+				failedIds.push(row.id);
+				return null;
+			}
+		}))).filter((file) => file !== null)
+	};
+}
+//#endregion
+//#region src/sheet.css.ts
+var sheetPopup = "_1us6jj40";
+var sheet = "_1us6jj41";
+var rows = "_1us6jj42";
+var row = "_1us6jj43";
+var rowFailed = "_1us6jj44";
+var thumb = "_1us6jj45";
+var rowBody = "_1us6jj46";
+var rowTitle = "_1us6jj47";
+var fileName = "_1us6jj48";
+var meta = "_1us6jj4a";
+var footer = "_1us6jj4h";
+var hint = "_1us6jj4i";
+var iconButton = "_1us6jj4j";
+//#endregion
+//#region src/SheetRowItem.tsx
+function useImageInfo(file) {
+	const [info, setInfo] = useState(null);
+	const [failed, setFailed] = useState(false);
+	useEffect(() => {
+		const url = URL.createObjectURL(file);
+		let active = true;
+		setFailed(false);
+		const image = new Image();
+		image.onload = () => {
+			if (active) setInfo({
+				height: image.naturalHeight,
+				url,
+				width: image.naturalWidth
+			});
+		};
+		image.onerror = () => {
+			if (active) setFailed(true);
+		};
+		image.src = url;
+		return () => {
+			active = false;
+			URL.revokeObjectURL(url);
+		};
+	}, [file]);
+	return {
+		failed,
+		info
+	};
+}
+var SheetRowItem = ({ failed, onEdit, onRemove, row: row$1 }) => {
+	const { failed: decodeFailed, info } = useImageInfo(row$1.current);
+	const edited = row$1.current !== row$1.original;
+	const editable = isEditableImage(row$1.current) && !decodeFailed;
+	const type = row$1.current.type.replace("image/", "").toUpperCase();
+	const meta$1 = [
+		info ? `${info.width} × ${info.height}` : null,
+		formatBytes(row$1.current.size),
+		type || null
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: failed ? `${row} ${rowFailed}` : row,
+		children: [
+			info ? /* @__PURE__ */ jsx("img", {
+				alt: "",
+				className: thumb,
+				src: info.url
+			}) : /* @__PURE__ */ jsx("div", { className: thumb }),
+			/* @__PURE__ */ jsxs("div", {
+				className: rowBody,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: rowTitle,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: fileName,
+							title: row$1.original.name,
+							children: row$1.original.name
+						}), edited && /* @__PURE__ */ jsx("span", {
+							className: "_1us6jj49",
+							children: "Edited"
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: meta,
+						children: meta$1
+					}),
+					edited && row$1.summary && /* @__PURE__ */ jsx("span", {
+						className: "_1us6jj4a",
+						children: row$1.summary
+					}),
+					!edited && row$1.gps && /* @__PURE__ */ jsxs("span", {
+						className: "_1us6jj4b",
+						children: [/* @__PURE__ */ jsx(MapPin, {
+							"aria-hidden": true,
+							size: 13
+						}), "Has location"]
+					}),
+					!isEditableImage(row$1.current) && /* @__PURE__ */ jsx("span", {
+						className: "_1us6jj4a",
+						children: "Animated or vector — editing would flatten it"
+					}),
+					failed && /* @__PURE__ */ jsx("span", {
+						className: "_1us6jj4c",
+						children: "Could not remove location from this image"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				className: secondaryButton,
+				disabled: !editable,
+				type: "button",
+				onClick: onEdit,
+				children: [/* @__PURE__ */ jsx(Pencil, {
+					"aria-hidden": true,
+					size: 14,
+					style: { marginRight: 6 }
+				}), edited ? "Re-edit" : "Edit…"]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": `Remove ${row$1.original.name}`,
+				className: iconButton,
+				title: "Remove",
+				type: "button",
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(X, {
+					"aria-hidden": true,
+					size: 16
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ImageInsertSheet.tsx
+function mapUrl({ latitude, longitude }) {
+	return `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`;
+}
+function withDetectedGps(rows, files, found) {
+	return rows.map((row) => {
+		const index = files.indexOf(row.original);
+		return index === -1 ? row : {
+			...row,
+			gps: found[index] ?? null
+		};
+	});
+}
+var ImageInsertSheet = ({ files, onCancel, onEdit, onInsert, privacy }) => {
+	const [rows$1, setRows] = useState(() => files.map((file, index) => ({
+		current: file,
+		gps: null,
+		id: `${index}-${file.name}`,
+		original: file,
+		summary: ""
+	})));
+	const [removeGps, setRemoveGps] = useState(true);
+	const [failedIds, setFailedIds] = useState([]);
+	const [inserting, setInserting] = useState(false);
+	useEscapeDismissesTopDialog();
+	const detectionRef = useRef(Promise.resolve([]));
+	useEffect(() => {
+		if (!privacy) return;
+		let active = true;
+		const detection = Promise.all(files.map((file) => privacy.detectGps(file).catch(() => null)));
+		detectionRef.current = detection;
+		detection.then((found) => {
+			if (active) setRows((current) => withDetectedGps(current, files, found));
+		});
+		return () => {
+			active = false;
+		};
+	}, [files, privacy]);
+	const gpsRows = rows$1.filter((row) => row.gps && row.current === row.original);
+	const blocked = removeGps && failedIds.some((id) => gpsRows.some((row) => row.id === id));
+	const handleRemove = (id) => {
+		const next = rows$1.filter((row) => row.id !== id);
+		if (next.length === 0) {
+			onCancel();
+			return;
+		}
+		setRows(next);
+	};
+	const handleEdit = async (target) => {
+		const result = await onEdit(target.current);
+		if (!result || result.file === target.current) return;
+		setRows((current) => current.map((row) => row.id === target.id ? {
+			...row,
+			current: result.file,
+			summary: [row.summary, result.summary].filter(Boolean).join(" · ")
+		} : row));
+	};
+	const handleInsert = async () => {
+		setInserting(true);
+		const found = await detectionRef.current;
+		const result = await finalizeRows(withDetectedGps(rows$1, files, found), removeGps, privacy?.stripGps);
+		setInserting(false);
+		if (result.failedIds.length > 0) {
+			setFailedIds(result.failedIds);
+			return;
+		}
+		onInsert(result.files);
+	};
+	const single = rows$1.length === 1 ? gpsRows[0] : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: sheet,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: rows,
+				children: rows$1.map((row) => /* @__PURE__ */ jsx(SheetRowItem, {
+					failed: removeGps && failedIds.includes(row.id),
+					row,
+					onEdit: () => void handleEdit(row),
+					onRemove: () => handleRemove(row.id)
+				}, row.id))
+			}),
+			gpsRows.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "_1us6jj4d",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "_1us6jj4e",
+						children: [/* @__PURE__ */ jsx(MapPin, {
+							"aria-hidden": true,
+							color: "#d97706",
+							size: 16
+						}), single ? "This photo records where it was taken" : `${gpsRows.length} of ${rows$1.length} record where they were taken`]
+					}),
+					single?.gps && /* @__PURE__ */ jsxs("div", {
+						className: "_1us6jj4f",
+						children: [/* @__PURE__ */ jsxs("span", { children: [
+							single.gps.latitude.toFixed(4),
+							", ",
+							single.gps.longitude.toFixed(4)
+						] }), /* @__PURE__ */ jsx("a", {
+							href: mapUrl(single.gps),
+							rel: "noreferrer",
+							target: "_blank",
+							children: "View on map"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("label", {
+						className: "_1us6jj4g",
+						children: [/* @__PURE__ */ jsx("input", {
+							checked: removeGps,
+							type: "checkbox",
+							onChange: (event) => setRemoveGps(event.currentTarget.checked)
+						}), "Remove location before upload"]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: footer,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: hint,
+						children: blocked ? "Remove the flagged images or keep their location to continue" : "Edited images drop all metadata"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: ghostButton,
 						type: "button",
 						onClick: onCancel,
 						children: "Cancel"
 					}),
 					/* @__PURE__ */ jsx("button", {
+						autoFocus: true,
 						className: primaryButton,
-						disabled: decodeError || exporting,
+						disabled: inserting || blocked,
 						type: "button",
-						onClick: handleConfirm,
-						children: "Upload"
+						onClick: () => void handleInsert(),
+						children: rows$1.length > 1 ? `Insert ${rows$1.length} images` : "Insert"
 					})
 				]
 			})
@@ -695,14 +1368,16 @@ var ImageEditModal = ({ file, onCancel, onConfirm, onSkip }) => {
 };
 //#endregion
 //#region src/ImageEditModalPlugin.tsx
-var ImageEditModalPlugin = () => {
+var ImageEditModalPlugin = ({ privacy }) => {
 	const preprocess = useImagePreprocess();
 	const portalTheme = usePortalTheme();
 	const portalThemeRef = useRef(portalTheme);
 	portalThemeRef.current = portalTheme;
+	const privacyRef = useRef(privacy);
+	privacyRef.current = privacy;
 	useEffect(() => {
 		if (!preprocess) return;
-		const fn = (file) => new Promise((resolve) => {
+		const openEditor = (file) => new Promise((resolve) => {
 			let settled = false;
 			const settle = (result) => {
 				if (settled) return;
@@ -717,19 +1392,46 @@ var ImageEditModalPlugin = () => {
 						settle(null);
 						dismiss();
 					},
-					onConfirm: (edited) => {
-						settle(edited);
+					onConfirm: (result) => {
+						settle(result);
+						dismiss();
+					}
+				}),
+				onClose: () => settle(null),
+				portalClassName: portalThemeRef.current.className,
+				showCloseButton: false,
+				theme: portalThemeRef.current.theme
+			});
+		});
+		const fn = (files) => new Promise((resolve) => {
+			let settled = false;
+			const settle = (result) => {
+				if (settled) return;
+				settled = true;
+				resolve(result);
+			};
+			const dismiss = presentDialog({
+				className: sheetPopup,
+				clickOutsideToDismiss: false,
+				content: () => /* @__PURE__ */ jsx(ImageInsertSheet, {
+					files,
+					privacy: privacyRef.current,
+					onEdit: openEditor,
+					onCancel: () => {
+						settle(null);
 						dismiss();
 					},
-					onSkip: () => {
-						settle("skip");
+					onInsert: (result) => {
+						settle(result);
 						dismiss();
 					}
 				}),
+				description: "Check before it goes up. Nothing is uploaded yet.",
 				onClose: () => settle(null),
 				portalClassName: portalThemeRef.current.className,
 				showCloseButton: false,
-				theme: portalThemeRef.current.theme
+				theme: portalThemeRef.current.theme,
+				title: files.length > 1 ? "Insert images" : "Insert image"
 			});
 		});
 		return preprocess.register(fn);
@@ -737,4 +1439,4 @@ var ImageEditModalPlugin = () => {
 	return null;
 };
 //#endregion
-export { ImageEditModal, ImageEditModalPlugin };
+export { ImageEditModal, ImageEditModalPlugin, ImageInsertSheet };