@olenbetong/synergi-react 2.3.8 → 2.4.0

package/es/components/ImageEditor/plugins/cropPlugin/CropContext.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useCropTool } from "./useCropTool.js";
+let CropContext = createContext(null);
+export function CropProvider({ imageUrl, onApply, onCancel, children }) {
+    let state = useCropTool(imageUrl, true);
+    return _jsx(CropContext.Provider, { value: { ...state, imageUrl, onApply, onCancel }, children: children });
+}
+export function useCropContext() {
+    let ctx = useContext(CropContext);
+    if (!ctx)
+        throw new Error("useCropContext must be used within CropProvider");
+    return ctx;
+}

package/es/components/ImageEditor/plugins/cropPlugin/CropOverlay.d.ts

@@ -0,0 +1,2 @@
+/** Canvas-area overlay for the crop tool. Reads all state from CropContext. */
+export declare function CropOverlay(): import("react/jsx-runtime").JSX.Element;

package/es/components/ImageEditor/plugins/cropPlugin/CropOverlay.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, CircularProgress, Typography } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { CropCanvas } from "../../CropCanvas.js";
+import { DragHandle } from "../../DragHandle.js";
+import { EdgeHandle } from "../../EdgeHandle.js";
+import { useCropContext } from "./CropContext.js";
+/** Canvas-area overlay for the crop tool. Reads all state from CropContext. */
+export function CropOverlay() {
+    let { imageUrl, activeCorners, scale, displaySize, canvasRef, cvReady, cvError, cropping, error, handleCanvasReady, updateCorner, } = useCropContext();
+    return (_jsxs("div", { className: "crop-root", children: [_jsxs("div", { className: "crop-inner", children: [_jsx(CropCanvas, { ref: canvasRef, imageUrl: imageUrl, corners: activeCorners, onReady: handleCanvasReady }), displaySize.width > 0 &&
+                        activeCorners.map((corner, i) => (_jsx(DragHandle, { x: corner.x * scale, y: corner.y * scale, onChange: (x, y) => updateCorner(i, x, y), containerWidth: displaySize.width, containerHeight: displaySize.height }, i))), displaySize.width > 0 &&
+                        (() => {
+                            let [tl, tr, br, bl] = activeCorners;
+                            let s = scale;
+                            return (_jsxs(_Fragment, { children: [_jsx(EdgeHandle, { x: ((tl.x + tr.x) / 2) * s, y: ((tl.y + tr.y) / 2) * s, axis: "y", onChange: (dx, dy) => {
+                                            updateCorner(0, tl.x * s + dx, tl.y * s + dy);
+                                            updateCorner(1, tr.x * s + dx, tr.y * s + dy);
+                                        } }), _jsx(EdgeHandle, { x: ((tr.x + br.x) / 2) * s, y: ((tr.y + br.y) / 2) * s, axis: "x", onChange: (dx, dy) => {
+                                            updateCorner(1, tr.x * s + dx, tr.y * s + dy);
+                                            updateCorner(2, br.x * s + dx, br.y * s + dy);
+                                        } }), _jsx(EdgeHandle, { x: ((br.x + bl.x) / 2) * s, y: ((br.y + bl.y) / 2) * s, axis: "y", onChange: (dx, dy) => {
+                                            updateCorner(2, br.x * s + dx, br.y * s + dy);
+                                            updateCorner(3, bl.x * s + dx, bl.y * s + dy);
+                                        } }), _jsx(EdgeHandle, { x: ((bl.x + tl.x) / 2) * s, y: ((bl.y + tl.y) / 2) * s, axis: "x", onChange: (dx, dy) => {
+                                            updateCorner(3, bl.x * s + dx, bl.y * s + dy);
+                                            updateCorner(0, tl.x * s + dx, tl.y * s + dy);
+                                        } })] }));
+                        })()] }), !cvReady && !cvError && (_jsxs("div", { className: "crop-loading", children: [_jsx(CircularProgress, { size: 18, color: "inherit" }), _jsx(Typography, { variant: "body2", children: getLocalizedString("Loading OpenCV…") })] })), cvError && (_jsx("div", { className: "crop-loading", children: _jsx(Alert, { severity: "error", sx: { fontSize: "0.8rem" }, children: getLocalizedString("Crop tool failed to load") }) })), (error || cropping) && (_jsx("div", { className: "crop-loading", children: cropping ? (_jsx(CircularProgress, { size: 18, color: "inherit" })) : (_jsx(Alert, { severity: "error", sx: { fontSize: "0.8rem" }, children: error })) }))] }));
+}

package/es/components/ImageEditor/plugins/cropPlugin/CropToolbar.d.ts

@@ -0,0 +1,2 @@
+/** Toolbar shown while the crop tool is active. Reads state from CropContext. */
+export declare function CropToolbar(): import("react/jsx-runtime").JSX.Element;

package/es/components/ImageEditor/plugins/cropPlugin/CropToolbar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { Button, CircularProgress } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useCropContext } from "./CropContext.js";
+/** Toolbar shown while the crop tool is active. Reads state from CropContext. */
+export function CropToolbar() {
+    let { applyCrop, cropping, cvReady, cvError, onApply, onCancel } = useCropContext();
+    async function handleApply() {
+        let result = await applyCrop();
+        if (result)
+            onApply(result.blob, result.actions);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "image-editor__toolbar-group", children: _jsx(Button, { startIcon: _jsx(CloseIcon, {}), onClick: onCancel, color: "inherit", disabled: cropping, children: getLocalizedString("Cancel") }) }), _jsx("div", { className: "image-editor__toolbar-group", children: _jsx(Button, { variant: "contained", startIcon: cropping ? _jsx(CircularProgress, { size: 18, color: "inherit" }) : _jsx(CheckIcon, {}), onClick: handleApply, disabled: cropping || !cvReady || !!cvError, children: getLocalizedString("Apply crop") }) })] }));
+}

package/es/components/ImageEditor/plugins/cropPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import type { ToolPlugin } from "../../types.js";
+import { CropProvider } from "./CropContext.js";
+import { CropOverlay } from "./CropOverlay.js";
+import { CropToolbar } from "./CropToolbar.js";
+export { CropOverlay, CropProvider, CropToolbar };
+export declare const cropPlugin: ToolPlugin;

package/es/components/ImageEditor/plugins/cropPlugin/index.js

@@ -0,0 +1,16 @@
+import CropIcon from "@mui/icons-material/Crop";
+import { CropProvider } from "./CropContext.js";
+import { CropOverlay } from "./CropOverlay.js";
+import { CropToolbar } from "./CropToolbar.js";
+import { replayCrop } from "./useCropTool.js";
+export { CropOverlay, CropProvider, CropToolbar };
+export const cropPlugin = {
+    type: "tool",
+    id: "crop",
+    label: "Crop",
+    Icon: CropIcon,
+    Provider: CropProvider,
+    Overlay: CropOverlay,
+    Toolbar: CropToolbar,
+    actions: [{ type: "crop", apply: replayCrop }],
+};

package/es/components/ImageEditor/plugins/cropPlugin/useCropTool.d.ts

@@ -0,0 +1,34 @@
+import type { CropCanvasHandle } from "../../CropCanvas.js";
+import type { EditAction } from "../../types.js";
+import { type Quad } from "../../useEdgeDetection.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 declare function useCropTool(imageUrl: string, enabled: boolean): CropToolState;
+/**
+ * Standalone replay handler for the "crop" action type.
+ * Corners are stored as relative (0–1) values so they work at any resolution.
+ */
+export declare function replayCrop(imageUrl: string, params: Record<string, unknown>): Promise<Blob>;

package/es/components/ImageEditor/plugins/cropPlugin/useCropTool.js

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fullImageQuad, useEdgeDetection } from "../../useEdgeDetection.js";
+import { loadOpenCV, useOpenCV } from "../../useOpenCV.js";
+/**
+ * Manages all state and logic for the perspective crop tool.
+ * Loads OpenCV lazily, runs edge detection, and performs the warp.
+ */
+export function useCropTool(imageUrl, enabled) {
+    let { cv, ready: cvReady, error: cvError } = useOpenCV(enabled);
+    let [corners, setCorners] = useState(null);
+    let [canvasPixelSize, setCanvasPixelSize] = useState({ width: 1, height: 1 });
+    let [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+    let [canvasEl, setCanvasEl] = useState(null);
+    let [cropping, setCropping] = useState(false);
+    let [error, setError] = useState(null);
+    let canvasRef = useRef(null);
+    let prevSuggested = useRef(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 = corners ?? fullImageQuad(canvasPixelSize.width, canvasPixelSize.height);
+    let scale = displaySize.width > 0 ? displaySize.width / canvasPixelSize.width : 1;
+    let handleCanvasReady = useCallback((canvas, w, h) => {
+        setCanvasEl(canvas);
+        setCanvasPixelSize({ width: w, height: h });
+        setDisplaySize({ width: canvas.clientWidth, height: canvas.clientHeight });
+    }, []);
+    function updateCorner(index, screenX, screenY) {
+        let pixelX = screenX / scale;
+        let pixelY = screenY / scale;
+        setCorners((prev) => {
+            let next = [...(prev ?? activeCorners)];
+            next[index] = { x: pixelX, y: pixelY };
+            return next;
+        });
+    }
+    async function applyCrop() {
+        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);
+            let actions = [{ 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, imageUrl, relCorners) {
+    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,
+            }));
+            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, srcCanvas, corners) {
+    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((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, params) {
+    await loadOpenCV();
+    let relCorners = params.corners;
+    return cropImageAtFullResolution(window.cv, imageUrl, relCorners);
+}

package/es/components/ImageEditor/plugins/redactPlugin/RedactContext.d.ts

@@ -0,0 +1,10 @@
+import type { EditAction, ToolProviderProps } from "../../types.js";
+import { type RedactToolState } from "./useRedactTool.js";
+interface RedactContextValue extends RedactToolState {
+    imageUrl: string;
+    onApply: (blob: Blob, actions: EditAction[]) => void;
+    onCancel: () => void;
+}
+export declare function RedactProvider({ imageUrl, onApply, onCancel, children }: ToolProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useRedactContext(): RedactContextValue;
+export {};

package/es/components/ImageEditor/plugins/redactPlugin/RedactContext.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useRedactTool } from "./useRedactTool.js";
+let RedactContext = createContext(null);
+export function RedactProvider({ imageUrl, onApply, onCancel, children }) {
+    let state = useRedactTool(imageUrl);
+    return _jsx(RedactContext.Provider, { value: { ...state, imageUrl, onApply, onCancel }, children: children });
+}
+export function useRedactContext() {
+    let ctx = useContext(RedactContext);
+    if (!ctx)
+        throw new Error("useRedactContext must be used within RedactProvider");
+    return ctx;
+}

package/es/components/ImageEditor/plugins/redactPlugin/RedactOverlay.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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 declare function RedactOverlay(): import("react/jsx-runtime").JSX.Element;

package/es/components/ImageEditor/plugins/redactPlugin/RedactOverlay.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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) {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        let b = e.currentTarget.getBoundingClientRect();
+        startDrawing((e.clientX - b.left) / zoom, (e.clientY - b.top) / zoom);
+    }
+    function onPointerMove(e) {
+        if (!(e.buttons & 1))
+            return;
+        let b = e.currentTarget.getBoundingClientRect();
+        updateDrawing((e.clientX - b.left) / zoom, (e.clientY - b.top) / zoom);
+    }
+    return (_jsx("div", { className: "redact-root", children: _jsxs("div", { className: "redact-inner", children: [_jsx("img", { src: imageUrl, alt: "", className: "redact-image", onLoad: handleImageLoad, draggable: false }), displaySize.width > 0 && (_jsxs("svg", { className: "redact-svg", width: displaySize.width, height: displaySize.height, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: finishDrawing, children: [_jsxs("defs", { children: [_jsx("filter", { id: "redact-blur", x: "-50%", y: "-50%", width: "200%", height: "200%", children: _jsx("feGaussianBlur", { stdDeviation: "20" }) }), rects.map((_, i) => (_jsx("clipPath", { id: `redact-clip-${i}`, children: _jsx("rect", { x: rects[i].x, y: rects[i].y, width: rects[i].w, height: rects[i].h }) }, i))), inProgress && (_jsx("clipPath", { id: "redact-clip-inprogress", children: _jsx("rect", { x: inProgress.x, y: inProgress.y, width: inProgress.w, height: inProgress.h }) }))] }), rects.map((r, i) => (_jsxs("g", { children: [_jsx("image", { href: imageUrl, width: displaySize.width, height: displaySize.height, filter: "url(#redact-blur)", clipPath: `url(#redact-clip-${i})`, style: { pointerEvents: "none" } }), _jsx("rect", { x: r.x, y: r.y, width: r.w, height: r.h, fill: "rgba(128,128,128,0.85)", style: { pointerEvents: "none" } }), _jsx("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);
+                                    } })] }, i))), inProgress && (_jsxs(_Fragment, { children: [_jsx("image", { href: imageUrl, width: displaySize.width, height: displaySize.height, filter: "url(#redact-blur)", clipPath: "url(#redact-clip-inprogress)", style: { pointerEvents: "none" } }), _jsx("rect", { x: inProgress.x, y: inProgress.y, width: inProgress.w, height: inProgress.h, fill: "rgba(128,128,128,0.85)", style: { pointerEvents: "none" } }), _jsx("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" } })] }))] }))] }) }));
+}

package/es/components/ImageEditor/plugins/redactPlugin/RedactToolbar.d.ts

@@ -0,0 +1,2 @@
+/** Toolbar shown while the redact tool is active. Reads state from RedactContext. */
+export declare function RedactToolbar(): import("react/jsx-runtime").JSX.Element;

package/es/components/ImageEditor/plugins/redactPlugin/RedactToolbar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 (_jsxs(_Fragment, { children: [_jsxs("div", { className: "image-editor__toolbar-group", children: [_jsx(Button, { startIcon: _jsx(CloseIcon, {}), onClick: onCancel, color: "inherit", disabled: applying, children: getLocalizedString("Cancel") }), _jsx(Button, { startIcon: _jsx(DeleteSweepIcon, {}), onClick: clearAll, color: "inherit", disabled: applying || rects.length === 0, children: getLocalizedString("Clear all") })] }), _jsx("div", { className: "image-editor__toolbar-group", children: _jsx(Button, { variant: "contained", startIcon: applying ? _jsx(CircularProgress, { size: 18, color: "inherit" }) : _jsx(CheckIcon, {}), onClick: handleApply, disabled: applying, children: rects.length === 0 ? getLocalizedString("Done") : getLocalizedString("Apply redact") }) })] }));
+}

package/es/components/ImageEditor/plugins/redactPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import type { ToolPlugin } from "../../types.js";
+import { RedactProvider } from "./RedactContext.js";
+import { RedactOverlay } from "./RedactOverlay.js";
+import { RedactToolbar } from "./RedactToolbar.js";
+export { RedactOverlay, RedactProvider, RedactToolbar };
+export declare const redactPlugin: ToolPlugin;

package/es/components/ImageEditor/plugins/redactPlugin/index.js

@@ -0,0 +1,16 @@
+import HideSourceIcon from "@mui/icons-material/HideSource";
+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 = {
+    type: "tool",
+    id: "redact",
+    label: "Redact",
+    Icon: HideSourceIcon,
+    Provider: RedactProvider,
+    Overlay: RedactOverlay,
+    Toolbar: RedactToolbar,
+    actions: [{ type: "redact-blur", apply: replayRedactBlur }],
+};

package/es/components/ImageEditor/plugins/redactPlugin/useRedactTool.d.ts

@@ -0,0 +1,49 @@
+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 declare function useRedactTool(imageUrl: string): RedactToolState;
+/** Standalone replay handler for the "redact-blur" action type. */
+export declare function replayRedactBlur(imageUrl: string, params: Record<string, unknown>): Promise<Blob>;
+/** Normalises a drawing into a positional rect (min x/y, positive w/h). */
+export declare function normRect(d: {
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+}): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export {};

package/es/components/ImageEditor/plugins/redactPlugin/useRedactTool.js

@@ -0,0 +1,142 @@
+import { useCallback, useRef, useState } from "react";
+/** Manages state and logic for the blur-redaction tool. */
+export function useRedactTool(imageUrl) {
+    let [rects, setRects] = useState([]);
+    let [drawing, setDrawing] = useState(null);
+    let [displaySize, setDisplaySize] = useState({ width: 0, height: 0 });
+    let imageUrlRef = useRef(imageUrl);
+    imageUrlRef.current = imageUrl;
+    let handleImageLoad = useCallback((e) => {
+        let img = e.currentTarget;
+        setDisplaySize({ width: img.clientWidth, height: img.clientHeight });
+    }, []);
+    function startDrawing(x, y) {
+        setDrawing({ startX: x, startY: y, currentX: x, currentY: y });
+    }
+    function updateDrawing(x, y) {
+        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) {
+        setRects((prev) => prev.filter((_, i) => i !== index));
+    }
+    function clearAll() {
+        setRects([]);
+    }
+    async function applyRedact() {
+        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((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 = 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) {
+    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, params) {
+    let { x, y, w, h } = params;
+    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, img, x, y, w, h) {
+    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) {
+    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/es/components/ImageEditor/plugins/rotatePlugin.d.ts

@@ -0,0 +1,3 @@
+import type { ActionPlugin } from "../types.js";
+export declare const rotateCcwPlugin: ActionPlugin;
+export declare const rotateCwPlugin: ActionPlugin;

package/es/components/ImageEditor/plugins/rotatePlugin.js

@@ -0,0 +1,39 @@
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+function rotateBlob(imageUrl, direction) {
+    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 = {
+    type: "action",
+    id: "rotate-ccw",
+    label: "Rotate left",
+    Icon: RotateLeftIcon,
+    execute: (url) => rotateBlob(url, "ccw"),
+};
+export const rotateCwPlugin = {
+    type: "action",
+    id: "rotate-cw",
+    label: "Rotate right",
+    Icon: RotateRightIcon,
+    execute: (url) => rotateBlob(url, "cw"),
+};