@olenbetong/synergi-react 2.3.8 → 2.4.0

package/es/components/FilePond.d.ts

@@ -4,7 +4,7 @@ import "filepond/dist/filepond.css";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { type FilePondErrorDescription, type FilePondFile, type FilePondOptions, FileStatus, registerPlugin } from "filepond";
 import { type RefObject } from "react";
-export { registerPlugin, FileStatus };
+export { FileStatus, registerPlugin };
 type FilePondProps<T extends Record<string, unknown>> = React.HTMLProps<HTMLInputElement> & {
     dataObject: DataObject<T>;
     fields: Partial<T>;

package/es/components/FilePond.js

@@ -10,7 +10,7 @@ import FilePondPluginImagePreview from "filepond-plugin-image-preview";
 import FilePondPluginImageResize from "filepond-plugin-image-resize";
 import FilePondPluginImageTransform from "filepond-plugin-image-transform";
 import { useEffect, useMemo, useRef } from "react";
-export { registerPlugin, FileStatus };
+export { FileStatus, registerPlugin };
 registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImageResize, FilePondPluginImagePreview, FilePondPluginImageTransform);
 let isMostLikelyMobile = navigator.userAgent.match(/Android/i) ||
     navigator.userAgent.match(/iPhone/i) ||

package/es/components/ImageEditor/CropCanvas.d.ts

@@ -0,0 +1,16 @@
+import type { Quad } from "./useEdgeDetection.js";
+export interface CropCanvasHandle {
+    /** Returns a canvas with the clean image (no overlay) for use with cv.imread. */
+    getCleanCanvas(): HTMLCanvasElement | null;
+}
+interface Props {
+    imageUrl: string;
+    corners: Quad;
+    onReady?: (canvas: HTMLCanvasElement, width: number, height: number) => void;
+}
+/**
+ * Renders the image on a canvas with a perspective-crop overlay.
+ * Exposes `getImageData()` so callers can extract pixels for off-thread processing.
+ */
+export declare let CropCanvas: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<CropCanvasHandle>>;
+export {};

package/es/components/ImageEditor/CropCanvas.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+const MAX_DISPLAY_WIDTH = 1600;
+function drawOverlay(ctx, width, height, corners) {
+    let [tl, tr, br, bl] = corners;
+    ctx.save();
+    // Dark overlay with polygon cutout (even-odd fill rule creates a "window")
+    ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+    ctx.beginPath();
+    ctx.rect(0, 0, width, height);
+    ctx.moveTo(tl.x, tl.y);
+    ctx.lineTo(tr.x, tr.y);
+    ctx.lineTo(br.x, br.y);
+    ctx.lineTo(bl.x, bl.y);
+    ctx.closePath();
+    ctx.fill("evenodd");
+    // Selection border
+    ctx.strokeStyle = "#2196f3";
+    ctx.lineWidth = Math.max(2, width * 0.003);
+    ctx.beginPath();
+    ctx.moveTo(tl.x, tl.y);
+    ctx.lineTo(tr.x, tr.y);
+    ctx.lineTo(br.x, br.y);
+    ctx.lineTo(bl.x, bl.y);
+    ctx.closePath();
+    ctx.stroke();
+    ctx.restore();
+}
+/**
+ * Renders the image on a canvas with a perspective-crop overlay.
+ * Exposes `getImageData()` so callers can extract pixels for off-thread processing.
+ */
+export let CropCanvas = forwardRef(function CropCanvas({ imageUrl, corners, onReady }, ref) {
+    let canvasRef = useRef(null);
+    let imageRef = useRef(null);
+    useEffect(() => {
+        let img = new Image();
+        img.onload = () => {
+            imageRef.current = img;
+            let canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            let scale = Math.min(1, MAX_DISPLAY_WIDTH / img.naturalWidth);
+            canvas.width = Math.round(img.naturalWidth * scale);
+            canvas.height = Math.round(img.naturalHeight * scale);
+            let ctx = canvas.getContext("2d");
+            ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);
+            drawOverlay(ctx, canvas.width, canvas.height, corners);
+            onReady?.(canvas, canvas.width, canvas.height);
+        };
+        img.src = imageUrl;
+    }, [imageUrl]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Redraw overlay whenever corners change
+    useEffect(() => {
+        let canvas = canvasRef.current;
+        let img = imageRef.current;
+        if (!canvas || !img)
+            return;
+        let ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        drawOverlay(ctx, canvas.width, canvas.height, corners);
+    }, [corners]);
+    useImperativeHandle(ref, () => ({
+        getCleanCanvas() {
+            let canvas = canvasRef.current;
+            let img = imageRef.current;
+            if (!canvas || !img)
+                return null;
+            let clean = document.createElement("canvas");
+            clean.width = canvas.width;
+            clean.height = canvas.height;
+            clean.getContext("2d")?.drawImage(img, 0, 0, canvas.width, canvas.height);
+            return clean;
+        },
+    }));
+    return _jsx("canvas", { ref: canvasRef, style: { display: "block", maxWidth: "100%", height: "auto" } });
+});

package/es/components/ImageEditor/DragHandle.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    x: number;
+    y: number;
+    /** Called with new position in pixels (relative to container). */
+    onChange: (x: number, y: number) => void;
+    containerWidth: number;
+    containerHeight: number;
+}
+/**
+ * Absolutely-positioned draggable corner handle.
+ * Position is in CSS pixels relative to the nearest `position: relative` ancestor.
+ */
+export declare function DragHandle({ x, y, onChange, containerWidth, containerHeight }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/ImageEditor/DragHandle.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useZoom } from "./plugins/zoomPlugin/ZoomContext.js";
+/**
+ * Absolutely-positioned draggable corner handle.
+ * Position is in CSS pixels relative to the nearest `position: relative` ancestor.
+ */
+export function DragHandle({ x, y, onChange, containerWidth, containerHeight }) {
+    let { zoom } = useZoom();
+    function onPointerDown(e) {
+        e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    function onPointerMove(e) {
+        if (!(e.buttons & 1))
+            return;
+        let container = e.currentTarget.parentElement;
+        if (!container)
+            return;
+        // getBoundingClientRect() returns screen-space coords (affected by CSS transform/zoom).
+        // Divide by zoom to convert back to CSS-pixel space (the space onChange expects).
+        let rect = container.getBoundingClientRect();
+        let newX = Math.max(0, Math.min(containerWidth, (e.clientX - rect.left) / zoom));
+        let newY = Math.max(0, Math.min(containerHeight, (e.clientY - rect.top) / zoom));
+        onChange(newX, newY);
+    }
+    return (_jsx("div", { tabIndex: 0, role: "slider", "aria-label": "Corner handle", "aria-valuenow": Math.round(x), "aria-valuemin": 0, "aria-valuemax": containerWidth, className: "drag-handle", style: {
+            position: "absolute",
+            left: x,
+            top: y,
+            transform: "translate(-50%, -50%)",
+            width: 28,
+            height: 28,
+            borderRadius: "50%",
+            background: "rgba(33, 150, 243, 0.9)",
+            border: "3px solid white",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+            cursor: "grab",
+            touchAction: "none",
+            zIndex: 10,
+        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove }));
+}

package/es/components/ImageEditor/EdgeHandle.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** CSS-pixel position of the handle center, relative to the crop-inner container. */
+    x: number;
+    y: number;
+    /** Controls cursor style and handle orientation only — movement is unconstrained (delta-based). */
+    axis: "x" | "y";
+    /** Called with the pointer delta in CSS pixels so both corners can be shifted equally. */
+    onChange: (dx: number, dy: number) => void;
+}
+/**
+ * Absolutely-positioned draggable edge handle.
+ * Tracks the pointer delta so both corners on this edge move by the same amount,
+ * preserving the edge angle.
+ */
+export declare function EdgeHandle({ x, y, axis, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/ImageEditor/EdgeHandle.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useZoom } from "./plugins/zoomPlugin/ZoomContext.js";
+/**
+ * Absolutely-positioned draggable edge handle.
+ * Tracks the pointer delta so both corners on this edge move by the same amount,
+ * preserving the edge angle.
+ */
+export function EdgeHandle({ x, y, axis, onChange }) {
+    let { zoom } = useZoom();
+    let lastPos = useRef(null);
+    function onPointerDown(e) {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        lastPos.current = { x: e.clientX, y: e.clientY };
+    }
+    function onPointerMove(e) {
+        if (!(e.buttons & 1) || !lastPos.current)
+            return;
+        // Convert screen-space delta to CSS-pixel delta by dividing by zoom.
+        let dx = (e.clientX - lastPos.current.x) / zoom;
+        let dy = (e.clientY - lastPos.current.y) / zoom;
+        lastPos.current = { x: e.clientX, y: e.clientY };
+        onChange(dx, dy);
+    }
+    function onPointerUp() {
+        lastPos.current = null;
+    }
+    return (_jsx("div", { className: "edge-handle", style: {
+            position: "absolute",
+            left: x,
+            top: y,
+            transform: "translate(-50%, -50%)",
+            width: axis === "x" ? 6 : 32,
+            height: axis === "x" ? 32 : 6,
+            borderRadius: 3,
+            background: "rgba(33, 150, 243, 0.85)",
+            border: "2px solid white",
+            boxShadow: "0 2px 6px rgba(0,0,0,0.35)",
+            cursor: axis === "x" ? "ew-resize" : "ns-resize",
+            touchAction: "none",
+            zIndex: 9,
+        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp }));
+}

package/es/components/ImageEditor/ImageEditor.css

@@ -0,0 +1,224 @@
+.image-editor {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	background: #111;
+	color: white;
+}
+
+.image-editor__topbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 0.5rem 1rem;
+	background: rgba(0, 0, 0, 0.4);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.image-editor__canvas {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	overflow: hidden;
+}
+
+.image-editor__replay-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(0, 0, 0, 0.4);
+	color: white;
+	z-index: 10;
+	border-radius: 4px;
+}
+
+.image-editor__img {
+	max-width: 100%;
+	max-height: calc(100dvh - 160px); /* fallback when not inside zoom-canvas */
+	object-fit: contain;
+	border-radius: 4px;
+	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+	pointer-events: none;
+	user-select: none;
+}
+
+.image-editor__toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.75rem 1rem;
+	background: #1a1a1a;
+	border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.image-editor__toolbar-group {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	flex-wrap: wrap;
+}
+
+.image-editor__topbar-divider {
+	width: 1px;
+	height: 1.5rem;
+	background: rgba(255, 255, 255, 0.15);
+	flex-shrink: 0;
+}
+
+.image-editor__zoom-level {
+	font-size: 0.8125rem;
+	color: rgba(255, 255, 255, 0.6);
+	min-width: 3.25ch;
+	text-align: center;
+	font-variant-numeric: tabular-nums;
+}
+
+/* ── Zoom canvas ─────────────────────────────────────────────── */
+
+.zoom-canvas-root {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	touch-action: none;
+	cursor: grab;
+	user-select: none;
+	/* Named size container so descendants can use cqh/cqw units. */
+	container-type: size;
+	container-name: zoom-canvas;
+}
+
+.zoom-canvas-root:active {
+	cursor: grabbing;
+}
+
+.zoom-canvas-inner {
+	transform-origin: center;
+	padding: 1rem;
+}
+
+/*
+ * Size all editor content relative to the canvas container rather than the
+ * viewport. cqh/cqw refer to zoom-canvas-root which has known dimensions
+ * (position: absolute; inset: 0), bypassing the percentage-height chain problem.
+ *
+ * Subtract padding so the element fits within its visual parent:
+ *   • 2rem  = zoom-canvas-inner top + bottom padding (1rem each)
+ *   • 32px  = crop-root top + bottom padding (16px each)
+ *   • 4rem  = zoom-canvas-inner + redact-root padding (2 × 2rem)
+ */
+@container zoom-canvas (min-height: 1px) {
+	.image-editor__img {
+		max-height: calc(100cqh - 2rem);
+	}
+
+	.crop-root {
+		max-height: calc(100cqh - 2rem);
+	}
+
+	/* Canvas has an intrinsic aspect ratio from its width/height attrs,
+	   so both max constraints scale it to fit like an <img>. */
+	.crop-inner canvas {
+		max-height: calc(100cqh - 2rem - 32px);
+		width: auto;
+	}
+
+	.redact-image {
+		max-height: calc(100cqh - 4rem);
+	}
+}
+
+/* ── Crop plugin ─────────────────────────────────────────────── */
+
+.crop-root {
+	position: relative;
+	width: 100%;
+	max-width: 900px;
+	max-height: calc(100dvh - 160px); /* fallback when not inside zoom-canvas */
+	/* Handles at the image corners are 28px circles — reserve half their size as padding
+	   so they're never clipped at the edges. */
+	padding: 16px;
+	box-sizing: border-box;
+	background: #111;
+	touch-action: none;
+}
+
+.crop-inner {
+	position: relative;
+	display: inline-block;
+	line-height: 0; /* remove gap under canvas */
+}
+
+/* ── Redact plugin ───────────────────────────────────────────── */
+
+.redact-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	padding: 1rem;
+}
+
+.redact-inner {
+	position: relative;
+	display: inline-block;
+	line-height: 0;
+}
+
+.redact-image {
+	max-width: 100%;
+	max-height: calc(100dvh - 160px); /* fallback when not inside zoom-canvas */
+	display: block;
+	user-select: none;
+}
+
+.redact-svg {
+	position: absolute;
+	inset: 0;
+	cursor: crosshair;
+	touch-action: none;
+}
+
+/* ── Handle hit-area expansion ───────────────────────────────── */
+/* Invisible ::before expands the touch target without affecting layout */
+
+.drag-handle::before {
+	content: "";
+	position: absolute;
+	inset: -12px; /* 28px visual → 52px hit area */
+}
+
+.edge-handle::before {
+	content: "";
+	position: absolute;
+	/* Expand whichever dimension is thin (6px) to ≥44px hit area */
+	inset: -19px;
+}
+
+.crop-loading {
+	align-items: center;
+	justify-content: center;
+	gap: 0.75rem;
+	padding: 0.75rem 1rem;
+	color: rgba(255, 255, 255, 0.7);
+	position: absolute;
+	inset: auto 0 0 0;
+	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+}
+
+.LayoutSmall-root {
+	height: 100dvh;
+	overflow: hidden;
+}
+
+.LayoutSmall-root {
+	display: grid;
+	grid-template-rows: auto 1fr;
+}

package/es/components/ImageEditor/ImageEditor.d.ts

@@ -0,0 +1,24 @@
+import "./ImageEditor.css";
+import type { Plugin, ViewPlugin } from "./types.js";
+export type ImageEditorRef = {
+    /** Returns the current edited blob, or null if no edits have been applied since the last source image. */
+    getCurrentBlob: () => Blob | null;
+};
+interface Props {
+    imageUrl: string;
+    /** Called when the user clicks the Done button. When omitted, the Done button is not shown. */
+    onConfirm?: (blob: Blob) => void;
+    /** Called when the user wants to exit without saving. Shows a back button in the top bar. */
+    onCancel?: () => void;
+    plugins: Plugin[];
+    /** Optional view plugin (e.g. zoom/pan) that wraps the canvas and contributes top-bar controls. */
+    viewPlugin?: ViewPlugin;
+}
+/**
+ * Full-screen image editor shell.
+ * Does not know about specific tools — behaviour is entirely driven by the `plugins` prop.
+ * Tool plugins contribute an overlay and toolbar; action plugins execute immediately.
+ * Supports undo/redo: each applied transformation is recorded with its EditAction list.
+ */
+export declare const ImageEditor: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ImageEditorRef>>;
+export {};

package/es/components/ImageEditor/ImageEditor.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import CheckIcon from "@mui/icons-material/Check";
+import RedoIcon from "@mui/icons-material/Redo";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import UndoIcon from "@mui/icons-material/Undo";
+import { Button, CircularProgress, Fab, IconButton, Tooltip, useMediaQuery } from "@mui/material";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import "./ImageEditor.css";
+import { ResponsiveButton } from "./ResponsiveButton.js";
+import { useActiveTool } from "./useActiveTool.js";
+import { useImageHistory } from "./useImageHistory.js";
+/**
+ * Full-screen image editor shell.
+ * Does not know about specific tools — behaviour is entirely driven by the `plugins` prop.
+ * Tool plugins contribute an overlay and toolbar; action plugins execute immediately.
+ * Supports undo/redo: each applied transformation is recorded with its EditAction list.
+ */
+export const ImageEditor = forwardRef(function ImageEditor({ imageUrl, onConfirm, onCancel, plugins, viewPlugin }, ref) {
+    let registry = useMemo(() => buildActionRegistry(plugins), [plugins]);
+    let history = useImageHistory(imageUrl, registry);
+    let { activePlugin, activateTool, deactivateTool } = useActiveTool(plugins);
+    let [busy, setBusy] = useState(false);
+    let disabled = busy || history.replaying;
+    let isSmall = useMediaQuery("(max-width: 600px)");
+    useImperativeHandle(ref, () => ({
+        getCurrentBlob: () => history.currentBlob,
+    }));
+    async function executeAction(plugin) {
+        setBusy(true);
+        try {
+            let blob = await plugin.execute(history.currentImageUrl);
+            let actions = [{ type: plugin.id, params: {} }];
+            history.applyActions(blob, actions);
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    function handleToolApply(blob, actions) {
+        history.applyActions(blob, actions);
+        deactivateTool();
+    }
+    function confirm() {
+        if (!onConfirm)
+            return;
+        if (history.currentBlob) {
+            onConfirm(history.currentBlob);
+            return;
+        }
+        fetch(history.currentImageUrl)
+            .then((r) => r.blob())
+            .then(onConfirm);
+    }
+    let CanvasWrapper = viewPlugin?.CanvasWrapper;
+    let TopBarControls = viewPlugin?.TopBarControls;
+    let inner = (_jsxs("div", { className: "image-editor", children: [_jsxs("div", { className: "image-editor__topbar", children: [_jsxs("div", { className: "image-editor__toolbar-group", children: [onCancel && (_jsxs(_Fragment, { children: [_jsx(ResponsiveButton, { icon: _jsx(ArrowBackIcon, {}), label: getLocalizedString("Back"), onClick: onCancel, isSmall: isSmall }), _jsx("span", { className: "image-editor__topbar-divider", "aria-hidden": true })] })), _jsx(ResponsiveButton, { icon: _jsx(UndoIcon, {}), label: getLocalizedString("Undo"), onClick: history.undo, disabled: disabled || !history.canUndo || !!activePlugin, isSmall: isSmall }), _jsx(ResponsiveButton, { icon: _jsx(RedoIcon, {}), label: getLocalizedString("Redo"), onClick: history.redo, disabled: disabled || !history.canRedo || !!activePlugin, isSmall: isSmall }), _jsx(ResponsiveButton, { icon: _jsx(RestartAltIcon, {}), label: getLocalizedString("Reset"), onClick: history.reset, disabled: disabled || !history.canUndo || !!activePlugin, isSmall: isSmall })] }), TopBarControls && (_jsx("div", { className: "image-editor__toolbar-group", children: _jsx(TopBarControls, { disabled: disabled, isSmall: isSmall }) }))] }), _jsxs("div", { className: "image-editor__canvas", children: [CanvasWrapper ? (_jsx(CanvasWrapper, { panEnabled: !activePlugin, children: activePlugin ? (_jsx(ActiveOverlay, { plugin: activePlugin })) : (_jsx("img", { src: history.currentImageUrl, alt: getLocalizedString("Image to edit"), className: "image-editor__img" })) })) : activePlugin ? (_jsx(ActiveOverlay, { plugin: activePlugin })) : (_jsx("img", { src: history.currentImageUrl, alt: getLocalizedString("Image to edit"), className: "image-editor__img" })), !activePlugin && onConfirm && (_jsxs(Fab, { color: "primary", variant: isSmall ? "circular" : "extended", onClick: confirm, disabled: disabled, sx: { position: "absolute", bottom: "1rem", right: "1rem", zIndex: 5 }, children: [_jsx(CheckIcon, { sx: isSmall ? undefined : { mr: 1 } }), !isSmall && getLocalizedString("Done")] })), history.replaying && (_jsx("div", { className: "image-editor__replay-overlay", children: _jsx(CircularProgress, { color: "inherit" }) }))] }), _jsx("div", { className: "image-editor__toolbar", children: activePlugin ? (_jsx(ActiveToolbar, { plugin: activePlugin })) : (_jsx("div", { className: "image-editor__toolbar-group", children: plugins.map((p) => p.type === "tool" ? (_jsx(ToolButton, { plugin: p, busy: disabled, onActivate: () => activateTool(p.id), isSmall: isSmall }, p.id)) : (_jsx(ActionButton, { plugin: p, busy: disabled, onExecute: () => executeAction(p), isSmall: isSmall }, p.id))) })) })] }));
+    // Wrap with the active tool's provider so Overlay and Toolbar share context.
+    if (activePlugin) {
+        let ActiveProvider = activePlugin.Provider;
+        inner = (_jsx(ActiveProvider, { imageUrl: history.currentImageUrl, onApply: handleToolApply, onCancel: deactivateTool, children: inner }));
+    }
+    // Wrap with the view plugin's provider (outermost) so both CanvasWrapper and TopBarControls share state.
+    if (viewPlugin) {
+        let ViewProvider = viewPlugin.Provider;
+        return _jsx(ViewProvider, { children: inner });
+    }
+    return inner;
+});
+function ToolButton({ plugin, busy, onActivate, isSmall, }) {
+    let Icon = plugin.Icon;
+    if (isSmall) {
+        return (_jsx(Tooltip, { title: getLocalizedString(plugin.label), children: _jsx("span", { children: _jsx(IconButton, { onClick: onActivate, disabled: busy, color: "inherit", children: _jsx(Icon, {}) }) }) }));
+    }
+    return (_jsx(Button, { startIcon: _jsx(Icon, {}), onClick: onActivate, disabled: busy, variant: "outlined", color: "inherit", children: getLocalizedString(plugin.label) }));
+}
+function ActionButton({ plugin, busy, onExecute, isSmall, }) {
+    let Icon = plugin.Icon;
+    if (isSmall) {
+        return (_jsx(Tooltip, { title: getLocalizedString(plugin.label), children: _jsx("span", { children: _jsx(IconButton, { onClick: onExecute, disabled: busy, color: "inherit", children: busy ? _jsx(CircularProgress, { size: 18, color: "inherit" }) : _jsx(Icon, {}) }) }) }));
+    }
+    return (_jsx(Button, { startIcon: busy ? _jsx(CircularProgress, { size: 18, color: "inherit" }) : _jsx(Icon, {}), onClick: onExecute, disabled: busy, color: "inherit", children: getLocalizedString(plugin.label) }));
+}
+function ActiveOverlay({ plugin }) {
+    let Overlay = plugin.Overlay;
+    return _jsx(Overlay, {});
+}
+function ActiveToolbar({ plugin }) {
+    let Toolbar = plugin.Toolbar;
+    return _jsx(Toolbar, {});
+}
+/** Builds the action registry from all registered plugins. */
+function buildActionRegistry(plugins) {
+    let registry = new Map();
+    for (let plugin of plugins) {
+        if (plugin.type === "action") {
+            // Action plugins have no params — their execute function IS the replay handler.
+            registry.set(plugin.id, (imageUrl, _params) => plugin.execute(imageUrl));
+        }
+        else {
+            for (let action of plugin.actions) {
+                registry.set(action.type, action.apply);
+            }
+        }
+    }
+    return registry;
+}

package/es/components/ImageEditor/ResponsiveButton.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+interface Props {
+    icon: ReactNode;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    isSmall: boolean;
+}
+/** Renders a labelled Button on large screens and a Tooltip-wrapped IconButton on small ones. */
+export declare function ResponsiveButton({ icon, label, onClick, disabled, isSmall }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/ImageEditor/ResponsiveButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, IconButton, Tooltip } from "@mui/material";
+/** Renders a labelled Button on large screens and a Tooltip-wrapped IconButton on small ones. */
+export function ResponsiveButton({ icon, label, onClick, disabled, isSmall }) {
+    if (isSmall) {
+        return (_jsx(Tooltip, { title: label, children: _jsx("span", { children: _jsx(IconButton, { onClick: onClick, disabled: disabled, color: "inherit", size: "small", children: icon }) }) }));
+    }
+    return (_jsx(Button, { startIcon: icon, onClick: onClick, color: "inherit", disabled: disabled, children: label }));
+}

package/es/components/ImageEditor/defaultPlugins.d.ts

@@ -0,0 +1,4 @@
+/** Default set of image editing plugins in display order. */
+export declare const defaultPlugins: (import("./types.js").ToolPlugin | import("./types.js").ActionPlugin)[];
+/** Default view plugin providing zoom and pan. */
+export declare const defaultViewPlugin: import("./types.js").ViewPlugin;

package/es/components/ImageEditor/defaultPlugins.js

@@ -0,0 +1,8 @@
+import { cropPlugin } from "./plugins/cropPlugin/index.js";
+import { redactPlugin } from "./plugins/redactPlugin/index.js";
+import { rotateCcwPlugin, rotateCwPlugin } from "./plugins/rotatePlugin.js";
+import { zoomPlugin } from "./plugins/zoomPlugin/index.js";
+/** Default set of image editing plugins in display order. */
+export const defaultPlugins = [rotateCcwPlugin, rotateCwPlugin, cropPlugin, redactPlugin];
+/** Default view plugin providing zoom and pan. */
+export const defaultViewPlugin = zoomPlugin;

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

@@ -0,0 +1,6 @@
+export { defaultPlugins, defaultViewPlugin } from "./defaultPlugins.js";
+export type { ImageEditorRef } from "./ImageEditor.js";
+export { ImageEditor } from "./ImageEditor.js";
+export { cropPlugin } from "./plugins/cropPlugin/index.js";
+export { rotateCcwPlugin, rotateCwPlugin } from "./plugins/rotatePlugin.js";
+export type { ActionPlugin, EditAction, Plugin, ToolPlugin, ViewPlugin } from "./types.js";

package/es/components/ImageEditor/index.js

@@ -0,0 +1,4 @@
+export { defaultPlugins, defaultViewPlugin } from "./defaultPlugins.js";
+export { ImageEditor } from "./ImageEditor.js";
+export { cropPlugin } from "./plugins/cropPlugin/index.js";
+export { rotateCcwPlugin, rotateCwPlugin } from "./plugins/rotatePlugin.js";

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

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