@olenbetong/synergi-react 2.3.8 → 2.4.0

package/src/components/ImageEditor/plugins/cropPlugin/useCropTool.ts

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import type { CropCanvasHandle } from "../../CropCanvas.js";
+import type { EditAction } from "../../types.js";
+import { fullImageQuad, type Point, type Quad, useEdgeDetection } from "../../useEdgeDetection.js";
+import { loadOpenCV, useOpenCV } from "../../useOpenCV.js";
+
+export interface ApplyCropResult {
+	blob: Blob;
+	actions: EditAction[];
+}
+
+export interface CropToolState {
+	activeCorners: Quad;
+	scale: number;
+	displaySize: { width: number; height: number };
+	canvasRef: React.RefObject<CropCanvasHandle | null>;
+	cvReady: boolean;
+	cvError: Error | null;
+	cropping: boolean;
+	error: string | null;
+	debugImageUrl: string | null;
+	handleCanvasReady: (canvas: HTMLCanvasElement, w: number, h: number) => void;
+	updateCorner: (index: number, screenX: number, screenY: number) => void;
+	applyCrop: () => Promise<ApplyCropResult | null>;
+}
+
+/**
+ * Manages all state and logic for the perspective crop tool.
+ * Loads OpenCV lazily, runs edge detection, and performs the warp.
+ */
+export function useCropTool(imageUrl: string, enabled: boolean): CropToolState {
+	let { cv, ready: cvReady, error: cvError } = useOpenCV(enabled);
+	let [corners, setCorners] = useState<Quad | null>(null);
+	let [canvasPixelSize, setCanvasPixelSize] = useState({ width: 1, height: 1 });
+	let [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+	let [canvasEl, setCanvasEl] = useState<HTMLCanvasElement | null>(null);
+	let [cropping, setCropping] = useState(false);
+	let [error, setError] = useState<string | null>(null);
+	let canvasRef = useRef<CropCanvasHandle>(null);
+	let prevSuggested = useRef<Quad | null>(null);
+
+	let { corners: suggestedCorners, debugImageUrl } = useEdgeDetection(
+		cvReady ? cv : null,
+		canvasEl,
+		cvReady && enabled,
+	);
+
+	useEffect(() => {
+		if (suggestedCorners && suggestedCorners !== prevSuggested.current) {
+			prevSuggested.current = suggestedCorners;
+			setCorners(suggestedCorners);
+		}
+	}, [suggestedCorners]);
+
+	// Reset when the source image changes (e.g. after a previous crop or rotate)
+	useEffect(() => {
+		prevSuggested.current = null;
+		setCorners(null);
+		setCanvasEl(null);
+	}, [imageUrl]);
+
+	let activeCorners: Quad = corners ?? fullImageQuad(canvasPixelSize.width, canvasPixelSize.height);
+	let scale = displaySize.width > 0 ? displaySize.width / canvasPixelSize.width : 1;
+
+	let handleCanvasReady = useCallback((canvas: HTMLCanvasElement, w: number, h: number) => {
+		setCanvasEl(canvas);
+		setCanvasPixelSize({ width: w, height: h });
+		setDisplaySize({ width: canvas.clientWidth, height: canvas.clientHeight });
+	}, []);
+
+	function updateCorner(index: number, screenX: number, screenY: number) {
+		let pixelX = screenX / scale;
+		let pixelY = screenY / scale;
+		setCorners((prev) => {
+			let next = [...(prev ?? activeCorners)] as Quad;
+			next[index] = { x: pixelX, y: pixelY } as Point;
+			return next;
+		});
+	}
+
+	async function applyCrop(): Promise<ApplyCropResult | null> {
+		if (!cv) return null;
+		setCropping(true);
+		setError(null);
+		try {
+			// Store corners as relative (0–1) coords so replay is resolution-independent.
+			// The display canvas may be downscaled (MAX_DISPLAY_WIDTH), so we must map
+			// corners back to relative coords and then re-apply at full resolution.
+			let relCorners = activeCorners.map((c) => ({
+				x: c.x / canvasPixelSize.width,
+				y: c.y / canvasPixelSize.height,
+			}));
+			// Warp the original image at its native resolution to avoid quality loss.
+			let blob = await cropImageAtFullResolution(cv, imageUrl, relCorners as Quad);
+			let actions: EditAction[] = [{ type: "crop", params: { corners: relCorners } }];
+			return { blob, actions };
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Crop failed");
+			return null;
+		} finally {
+			setCropping(false);
+		}
+	}
+
+	return {
+		activeCorners,
+		scale,
+		displaySize,
+		canvasRef,
+		cvReady,
+		cvError,
+		cropping,
+		error,
+		debugImageUrl,
+		handleCanvasReady,
+		updateCorner,
+		applyCrop,
+	};
+}
+
+/** Loads the image at native resolution, maps relative corners, and warps. */
+// biome-ignore lint/suspicious/noExplicitAny: OpenCV.js types
+function cropImageAtFullResolution(cv: any, imageUrl: string, relCorners: Quad): Promise<Blob> {
+	return new Promise((resolve, reject) => {
+		let img = new Image();
+		img.onload = () => {
+			let canvas = document.createElement("canvas");
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			canvas.getContext("2d")!.drawImage(img, 0, 0);
+			let absCorners = relCorners.map((c) => ({
+				x: c.x * img.naturalWidth,
+				y: c.y * img.naturalHeight,
+			})) as Quad;
+			perspectiveCrop(cv, canvas, absCorners).then(resolve, reject);
+		};
+		img.onerror = () => reject(new Error("Failed to load image for crop"));
+		img.src = imageUrl;
+	});
+}
+
+/** Performs a perspective warp using OpenCV.js. */
+// biome-ignore lint/suspicious/noExplicitAny: OpenCV.js types
+function perspectiveCrop(cv: any, srcCanvas: HTMLCanvasElement, corners: Quad): Promise<Blob> {
+	let [tl, tr, br, bl] = corners;
+	let outW = Math.round(Math.max(Math.hypot(tr.x - tl.x, tr.y - tl.y), Math.hypot(br.x - bl.x, br.y - bl.y)));
+	let outH = Math.round(Math.max(Math.hypot(bl.x - tl.x, bl.y - tl.y), Math.hypot(br.x - tr.x, br.y - tr.y)));
+
+	let src = cv.imread(srcCanvas);
+	let dst = new cv.Mat();
+	let srcPts = cv.matFromArray(4, 1, cv.CV_32FC2, [tl.x, tl.y, tr.x, tr.y, br.x, br.y, bl.x, bl.y]);
+	let dstPts = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, outW, 0, outW, outH, 0, outH]);
+	let M = cv.getPerspectiveTransform(srcPts, dstPts);
+	cv.warpPerspective(src, dst, M, new cv.Size(outW, outH));
+
+	let outCanvas = document.createElement("canvas");
+	cv.imshow(outCanvas, dst);
+	for (let m of [src, dst, srcPts, dstPts, M]) m.delete();
+
+	return new Promise<Blob>((resolve, reject) => {
+		// PNG is lossless — critical for receipts and screenshots where JPEG
+		// compression would make text unreadable.
+		outCanvas.toBlob((b) => (b ? resolve(b) : reject(new Error("toBlob failed"))), "image/png");
+	});
+}
+
+/**
+ * Standalone replay handler for the "crop" action type.
+ * Corners are stored as relative (0–1) values so they work at any resolution.
+ */
+export async function replayCrop(imageUrl: string, params: Record<string, unknown>): Promise<Blob> {
+	await loadOpenCV();
+	let relCorners = params.corners as Quad;
+	return cropImageAtFullResolution(window.cv, imageUrl, relCorners);
+}

package/src/components/ImageEditor/plugins/redactPlugin/RedactContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+
+import type { EditAction, ToolProviderProps } from "../../types.js";
+import { type RedactToolState, useRedactTool } from "./useRedactTool.js";
+
+interface RedactContextValue extends RedactToolState {
+	imageUrl: string;
+	onApply: (blob: Blob, actions: EditAction[]) => void;
+	onCancel: () => void;
+}
+
+let RedactContext = createContext<RedactContextValue | null>(null);
+
+export function RedactProvider({ imageUrl, onApply, onCancel, children }: ToolProviderProps) {
+	let state = useRedactTool(imageUrl);
+	return <RedactContext.Provider value={{ ...state, imageUrl, onApply, onCancel }}>{children}</RedactContext.Provider>;
+}
+
+export function useRedactContext(): RedactContextValue {
+	let ctx = useContext(RedactContext);
+	if (!ctx) throw new Error("useRedactContext must be used within RedactProvider");
+	return ctx;
+}

package/src/components/ImageEditor/plugins/redactPlugin/RedactOverlay.tsx

@@ -0,0 +1,144 @@
+import { useZoom } from "../zoomPlugin/ZoomContext.js";
+import { useRedactContext } from "./RedactContext.js";
+import { normRect } from "./useRedactTool.js";
+
+/**
+ * Canvas-area overlay for the redact tool.
+ * Uses an SVG layer over the image for drawing; blur preview uses SVG feGaussianBlur
+ * so the live preview matches the final applied output.
+ */
+export function RedactOverlay() {
+	let {
+		imageUrl,
+		rects,
+		drawing,
+		displaySize,
+		handleImageLoad,
+		startDrawing,
+		updateDrawing,
+		finishDrawing,
+		deleteRect,
+	} = useRedactContext();
+
+	let { zoom } = useZoom();
+	let inProgress = drawing ? normRect(drawing) : null;
+
+	function onPointerDown(e: React.PointerEvent<SVGSVGElement>) {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		let b = e.currentTarget.getBoundingClientRect();
+		startDrawing((e.clientX - b.left) / zoom, (e.clientY - b.top) / zoom);
+	}
+
+	function onPointerMove(e: React.PointerEvent<SVGSVGElement>) {
+		if (!(e.buttons & 1)) return;
+		let b = e.currentTarget.getBoundingClientRect();
+		updateDrawing((e.clientX - b.left) / zoom, (e.clientY - b.top) / zoom);
+	}
+
+	return (
+		<div className="redact-root">
+			<div className="redact-inner">
+				<img src={imageUrl} alt="" className="redact-image" onLoad={handleImageLoad} draggable={false} />
+
+				{displaySize.width > 0 && (
+					<svg
+						className="redact-svg"
+						width={displaySize.width}
+						height={displaySize.height}
+						onPointerDown={onPointerDown}
+						onPointerMove={onPointerMove}
+						onPointerUp={finishDrawing}
+					>
+						<defs>
+							<filter id="redact-blur" x="-50%" y="-50%" width="200%" height="200%">
+								<feGaussianBlur stdDeviation="20" />
+							</filter>
+							{rects.map((_, i) => (
+								<clipPath key={i} id={`redact-clip-${i}`}>
+									<rect x={rects[i].x} y={rects[i].y} width={rects[i].w} height={rects[i].h} />
+								</clipPath>
+							))}
+							{inProgress && (
+								<clipPath id="redact-clip-inprogress">
+									<rect x={inProgress.x} y={inProgress.y} width={inProgress.w} height={inProgress.h} />
+								</clipPath>
+							)}
+						</defs>
+
+						{/* Blur each confirmed rect using the real image, clipped to the rect */}
+						{rects.map((r, i) => (
+							<g key={i}>
+								<image
+									href={imageUrl}
+									width={displaySize.width}
+									height={displaySize.height}
+									filter="url(#redact-blur)"
+									clipPath={`url(#redact-clip-${i})`}
+									style={{ pointerEvents: "none" }}
+								/>
+								{/* Semi-opaque overlay to prevent text from being readable through the blur */}
+								<rect
+									x={r.x}
+									y={r.y}
+									width={r.w}
+									height={r.h}
+									fill="rgba(128,128,128,0.85)"
+									style={{ pointerEvents: "none" }}
+								/>
+								{/* Dashed border + invisible hit area for deletion */}
+								<rect
+									x={r.x}
+									y={r.y}
+									width={r.w}
+									height={r.h}
+									fill="transparent"
+									stroke="rgba(255,255,255,0.6)"
+									strokeWidth={1.5}
+									strokeDasharray="5 3"
+									style={{ cursor: "pointer" }}
+									onClick={(e) => {
+										e.stopPropagation();
+										deleteRect(i);
+									}}
+								/>
+							</g>
+						))}
+
+						{/* In-progress rect */}
+						{inProgress && (
+							<>
+								<image
+									href={imageUrl}
+									width={displaySize.width}
+									height={displaySize.height}
+									filter="url(#redact-blur)"
+									clipPath="url(#redact-clip-inprogress)"
+									style={{ pointerEvents: "none" }}
+								/>
+								<rect
+									x={inProgress.x}
+									y={inProgress.y}
+									width={inProgress.w}
+									height={inProgress.h}
+									fill="rgba(128,128,128,0.85)"
+									style={{ pointerEvents: "none" }}
+								/>
+								<rect
+									x={inProgress.x}
+									y={inProgress.y}
+									width={inProgress.w}
+									height={inProgress.h}
+									fill="transparent"
+									stroke="rgba(255,255,255,0.6)"
+									strokeWidth={1.5}
+									strokeDasharray="5 3"
+									style={{ pointerEvents: "none" }}
+								/>
+							</>
+						)}
+					</svg>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/components/ImageEditor/plugins/redactPlugin/RedactToolbar.tsx

@@ -0,0 +1,56 @@
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
+import { Button, CircularProgress } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useState } from "react";
+
+import { useRedactContext } from "./RedactContext.js";
+
+/** Toolbar shown while the redact tool is active. Reads state from RedactContext. */
+export function RedactToolbar() {
+	let { rects, clearAll, applyRedact, onApply, onCancel } = useRedactContext();
+	let [applying, setApplying] = useState(false);
+
+	async function handleApply() {
+		if (rects.length === 0) {
+			onCancel();
+			return;
+		}
+		setApplying(true);
+		try {
+			let result = await applyRedact();
+			if (result) onApply(result.blob, result.actions);
+		} finally {
+			setApplying(false);
+		}
+	}
+
+	return (
+		<>
+			<div className="image-editor__toolbar-group">
+				<Button startIcon={<CloseIcon />} onClick={onCancel} color="inherit" disabled={applying}>
+					{getLocalizedString("Cancel")}
+				</Button>
+				<Button
+					startIcon={<DeleteSweepIcon />}
+					onClick={clearAll}
+					color="inherit"
+					disabled={applying || rects.length === 0}
+				>
+					{getLocalizedString("Clear all")}
+				</Button>
+			</div>
+			<div className="image-editor__toolbar-group">
+				<Button
+					variant="contained"
+					startIcon={applying ? <CircularProgress size={18} color="inherit" /> : <CheckIcon />}
+					onClick={handleApply}
+					disabled={applying}
+				>
+					{rects.length === 0 ? getLocalizedString("Done") : getLocalizedString("Apply redact")}
+				</Button>
+			</div>
+		</>
+	);
+}

package/src/components/ImageEditor/plugins/redactPlugin/index.ts

@@ -0,0 +1,20 @@
+import HideSourceIcon from "@mui/icons-material/HideSource";
+
+import type { ToolPlugin } from "../../types.js";
+import { RedactProvider } from "./RedactContext.js";
+import { RedactOverlay } from "./RedactOverlay.js";
+import { RedactToolbar } from "./RedactToolbar.js";
+import { replayRedactBlur } from "./useRedactTool.js";
+
+export { RedactOverlay, RedactProvider, RedactToolbar };
+
+export const redactPlugin: ToolPlugin = {
+	type: "tool",
+	id: "redact",
+	label: "Redact",
+	Icon: HideSourceIcon,
+	Provider: RedactProvider,
+	Overlay: RedactOverlay,
+	Toolbar: RedactToolbar,
+	actions: [{ type: "redact-blur", apply: replayRedactBlur }],
+};

package/src/components/ImageEditor/plugins/redactPlugin/useRedactTool.ts

@@ -0,0 +1,197 @@
+import { useCallback, useRef, useState } from "react";
+
+import type { EditAction } from "../../types.js";
+
+export interface RedactRect {
+	x: number;
+	y: number;
+	w: number;
+	h: number;
+}
+
+interface Drawing {
+	startX: number;
+	startY: number;
+	currentX: number;
+	currentY: number;
+}
+
+export interface ApplyRedactResult {
+	blob: Blob;
+	actions: EditAction[];
+}
+
+export interface RedactToolState {
+	rects: RedactRect[];
+	drawing: Drawing | null;
+	displaySize: { width: number; height: number };
+	handleImageLoad: (e: React.SyntheticEvent<HTMLImageElement>) => void;
+	startDrawing: (x: number, y: number) => void;
+	updateDrawing: (x: number, y: number) => void;
+	finishDrawing: () => void;
+	deleteRect: (index: number) => void;
+	clearAll: () => void;
+	applyRedact: () => Promise<ApplyRedactResult | null>;
+}
+
+/** Manages state and logic for the blur-redaction tool. */
+export function useRedactTool(imageUrl: string): RedactToolState {
+	let [rects, setRects] = useState<RedactRect[]>([]);
+	let [drawing, setDrawing] = useState<Drawing | null>(null);
+	let [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+	let imageUrlRef = useRef(imageUrl);
+	imageUrlRef.current = imageUrl;
+
+	let handleImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
+		let img = e.currentTarget;
+		setDisplaySize({ width: img.clientWidth, height: img.clientHeight });
+	}, []);
+
+	function startDrawing(x: number, y: number) {
+		setDrawing({ startX: x, startY: y, currentX: x, currentY: y });
+	}
+
+	function updateDrawing(x: number, y: number) {
+		setDrawing((d) => (d ? { ...d, currentX: x, currentY: y } : null));
+	}
+
+	function finishDrawing() {
+		setDrawing((d) => {
+			if (!d) return null;
+			let x = Math.min(d.startX, d.currentX);
+			let y = Math.min(d.startY, d.currentY);
+			let w = Math.abs(d.currentX - d.startX);
+			let h = Math.abs(d.currentY - d.startY);
+			if (w > 4 && h > 4) {
+				setRects((prev) => [...prev, { x, y, w, h }]);
+			}
+			return null;
+		});
+	}
+
+	function deleteRect(index: number) {
+		setRects((prev) => prev.filter((_, i) => i !== index));
+	}
+
+	function clearAll() {
+		setRects([]);
+	}
+
+	async function applyRedact(): Promise<ApplyRedactResult | null> {
+		if (rects.length === 0) return null;
+		let img = await loadImage(imageUrlRef.current);
+		let canvas = document.createElement("canvas");
+		canvas.width = img.naturalWidth;
+		canvas.height = img.naturalHeight;
+		let ctx = canvas.getContext("2d")!;
+		ctx.drawImage(img, 0, 0);
+
+		let scaleX = img.naturalWidth / displaySize.width;
+		let scaleY = img.naturalHeight / displaySize.height;
+
+		for (let r of rects) {
+			let nx = Math.round(r.x * scaleX);
+			let ny = Math.round(r.y * scaleY);
+			let nw = Math.round(r.w * scaleX);
+			let nh = Math.round(r.h * scaleY);
+			blurRegionOnCanvas(ctx, img, nx, ny, nw, nh);
+		}
+
+		let blob = await new Promise<Blob>((resolve, reject) => {
+			canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("toBlob failed"))), "image/jpeg", 0.92);
+		});
+		// Store natural-pixel coords so replay doesn't need display size.
+		let actions: EditAction[] = rects.map((r) => ({
+			type: "redact-blur",
+			params: {
+				x: Math.round(r.x * scaleX),
+				y: Math.round(r.y * scaleY),
+				w: Math.round(r.w * scaleX),
+				h: Math.round(r.h * scaleY),
+			},
+		}));
+		return { blob, actions };
+	}
+
+	return {
+		rects,
+		drawing,
+		displaySize,
+		handleImageLoad,
+		startDrawing,
+		updateDrawing,
+		finishDrawing,
+		deleteRect,
+		clearAll,
+		applyRedact,
+	};
+}
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		let img = new Image();
+		img.onload = () => resolve(img);
+		img.onerror = () => reject(new Error("Failed to load image"));
+		img.src = url;
+	});
+}
+
+/** Standalone replay handler for the "redact-blur" action type. */
+export function replayRedactBlur(imageUrl: string, params: Record<string, unknown>): Promise<Blob> {
+	let { x, y, w, h } = params as { x: number; y: number; w: number; h: number };
+
+	return new Promise((resolve, reject) => {
+		let img = new Image();
+		img.onload = () => {
+			let canvas = document.createElement("canvas");
+			canvas.width = img.naturalWidth;
+			canvas.height = img.naturalHeight;
+			let ctx = canvas.getContext("2d")!;
+			ctx.drawImage(img, 0, 0);
+			blurRegionOnCanvas(ctx, img, x, y, w, h);
+			canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("toBlob failed"))), "image/jpeg", 0.92);
+		};
+		img.onerror = () => reject(new Error("Failed to load image for redact replay"));
+		img.src = imageUrl;
+	});
+}
+
+/**
+ * Redacts a region by downscaling it to a tiny thumbnail then scaling back up.
+ * This produces a strong pixelation effect that is cross-browser (ctx.filter
+ * is unreliable in Firefox).
+ */
+function blurRegionOnCanvas(
+	ctx: CanvasRenderingContext2D,
+	img: HTMLImageElement,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+) {
+	if (w <= 0 || h <= 0) return;
+	// Scale down to ~5% — each output "pixel" covers a 20×20 block of the original.
+	let smallW = Math.max(1, Math.round(w / 20));
+	let smallH = Math.max(1, Math.round(h / 20));
+	let off = document.createElement("canvas");
+	off.width = smallW;
+	off.height = smallH;
+	let offCtx = off.getContext("2d")!;
+	offCtx.drawImage(img, x, y, w, h, 0, 0, smallW, smallH);
+	ctx.imageSmoothingEnabled = true;
+	ctx.imageSmoothingQuality = "low";
+	ctx.drawImage(off, 0, 0, smallW, smallH, x, y, w, h);
+	// Overlay a semi-opaque fill to prevent text from being readable through the pixelation.
+	ctx.fillStyle = "rgba(128, 128, 128, 0.85)";
+	ctx.fillRect(x, y, w, h);
+}
+
+/** Normalises a drawing into a positional rect (min x/y, positive w/h). */
+export function normRect(d: { startX: number; startY: number; currentX: number; currentY: number }) {
+	return {
+		x: Math.min(d.startX, d.currentX),
+		y: Math.min(d.startY, d.currentY),
+		w: Math.abs(d.currentX - d.startX),
+		h: Math.abs(d.currentY - d.startY),
+	};
+}

package/src/components/ImageEditor/plugins/rotatePlugin.ts

@@ -0,0 +1,43 @@
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+
+import type { ActionPlugin } from "../types.js";
+
+function rotateBlob(imageUrl: string, direction: "cw" | "ccw"): Promise<Blob> {
+	return new Promise((resolve, reject) => {
+		let img = new Image();
+		img.onload = () => {
+			let canvas = document.createElement("canvas");
+			canvas.width = img.naturalHeight;
+			canvas.height = img.naturalWidth;
+			let ctx = canvas.getContext("2d")!;
+			if (direction === "cw") {
+				ctx.translate(canvas.width, 0);
+				ctx.rotate(Math.PI / 2);
+			} else {
+				ctx.translate(0, canvas.height);
+				ctx.rotate(-Math.PI / 2);
+			}
+			ctx.drawImage(img, 0, 0);
+			canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("toBlob failed"))), "image/jpeg", 0.92);
+		};
+		img.onerror = () => reject(new Error("Failed to load image"));
+		img.src = imageUrl;
+	});
+}
+
+export const rotateCcwPlugin: ActionPlugin = {
+	type: "action",
+	id: "rotate-ccw",
+	label: "Rotate left",
+	Icon: RotateLeftIcon,
+	execute: (url) => rotateBlob(url, "ccw"),
+};
+
+export const rotateCwPlugin: ActionPlugin = {
+	type: "action",
+	id: "rotate-cw",
+	label: "Rotate right",
+	Icon: RotateRightIcon,
+	execute: (url) => rotateBlob(url, "cw"),
+};