@haklex/rich-plugin-image-editor 0.24.0

package/dist/AnnotationSurface.d.ts

@@ -0,0 +1,20 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { FC, RefObject } from 'react';
+import { AnnotationTool } from './annotation';
+export interface AnnotationApi {
+    redo: () => void;
+    undo: () => void;
+}
+export interface AnnotationSurfaceProps {
+    apiRef: RefObject<AnnotationApi | null>;
+    counterRef: RefObject<number>;
+    onDecodeError: () => void;
+    onHistoryChange: (canUndo: boolean, canRedo: boolean) => void;
+    sourceUrl: string;
+    stateRef: RefObject<AnnotationState | null>;
+    strokeColor: string;
+    strokeWidth: number;
+    tool: AnnotationTool;
+}
+export declare const AnnotationSurface: FC<AnnotationSurfaceProps>;
+//# sourceMappingURL=AnnotationSurface.d.ts.map

package/dist/AnnotationSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationSurface.d.ts","sourceRoot":"","sources":["../src/AnnotationSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,qBAAqB,CAAC;AAE7E,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAInD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC9B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,MAAM,CAAC;IAElB,QAAQ,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,cAAc,CAAC;CACtB;AAID,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA2LxD,CAAC"}

package/dist/ImageEditModal.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export interface ImageEditModalProps {
+    file: File;
+    onCancel: () => void;
+    onConfirm: (file: File) => void;
+    onSkip: () => void;
+}
+export declare const ImageEditModal: FC<ImageEditModalProps>;
+//# sourceMappingURL=ImageEditModal.d.ts.map

package/dist/ImageEditModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditModal.d.ts","sourceRoot":"","sources":["../src/ImageEditModal.tsx"],"names":[],"mappings":"AAAA,OAAO,qCAAqC,CAAC;AAa7C,OAAO,KAAK,EAAE,EAAE,EAAkB,MAAM,OAAO,CAAC;AA0BhD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA2LlD,CAAC"}

package/dist/ImageEditModalPlugin.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const ImageEditModalPlugin: FC;
+//# sourceMappingURL=ImageEditModalPlugin.d.ts.map

package/dist/ImageEditModalPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditModalPlugin.d.ts","sourceRoot":"","sources":["../src/ImageEditModalPlugin.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,eAAO,MAAM,oBAAoB,EAAE,EAkDlC,CAAC"}

package/dist/ToolOptionsBar.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+export interface ToolOptionsBarProps {
+    canRedo: boolean;
+    canUndo: boolean;
+    onRedo: () => void;
+    onStrokeColorChange: (color: string) => void;
+    onStrokeWidthChange: (width: number) => void;
+    onUndo: () => void;
+    showStrokeWidth: boolean;
+    strokeColor: string;
+    strokeWidth: number;
+}
+export declare const ToolOptionsBar: FC<ToolOptionsBarProps>;
+//# sourceMappingURL=ToolOptionsBar.d.ts.map

package/dist/ToolOptionsBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolOptionsBar.d.ts","sourceRoot":"","sources":["../src/ToolOptionsBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAoElD,CAAC"}

package/dist/annotation.d.ts

@@ -0,0 +1,10 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { EditorTool } from './useImageEditorState';
+export type AnnotationTool = Exclude<EditorTool, 'crop'>;
+export declare const MARKER_TYPE_BY_TOOL: Record<AnnotationTool, string>;
+export declare function isAnnotationTool(tool: EditorTool): tool is AnnotationTool;
+export declare const SWATCH_COLORS: readonly ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#171717", "#ffffff"];
+export declare const STROKE_WIDTHS: readonly [2, 4, 6];
+export declare const STROKE_TOOLS: ReadonlySet<AnnotationTool>;
+export declare function offsetMarkerState(state: AnnotationState, dx: number, dy: number): AnnotationState;
+//# sourceMappingURL=annotation.d.ts.map

package/dist/annotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../src/annotation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAA2B,MAAM,qBAAqB,CAAC;AAEpF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AAIzD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAQ9D,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,IAAI,cAAc,CAEzE;AAED,eAAO,MAAM,aAAa,6EAOhB,CAAC;AAEX,eAAO,MAAM,aAAa,oBAAqB,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,WAAW,CAAC,cAAc,CAKnD,CAAC;AA0BH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,eAAe,CAKjG"}

package/dist/build-result.d.ts

@@ -0,0 +1,2 @@
+export declare function buildResult(original: File, canvas?: HTMLCanvasElement | null): Promise<File>;
+//# sourceMappingURL=build-result.d.ts.map

package/dist/build-result.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-result.d.ts","sourceRoot":"","sources":["../src/build-result.ts"],"names":[],"mappings":"AAIA,wBAAsB,WAAW,CAC/B,QAAQ,EAAE,IAAI,EACd,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,GAChC,OAAO,CAAC,IAAI,CAAC,CAWf"}

package/dist/crop.d.ts

@@ -0,0 +1,16 @@
+export interface CropRect {
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+}
+export declare function clampCropRect(rect: CropRect, imageWidth: number, imageHeight: number): CropRect;
+export declare function isFullImageCrop(rect: CropRect, imageWidth: number, imageHeight: number): boolean;
+export declare function displayedToNatural(rect: CropRect, scaleX: number, scaleY: number): CropRect;
+export declare function pickExportMime(originalType: string): string;
+export declare function loadImage(imageSrc: string): Promise<HTMLImageElement>;
+export declare function extractCrop(imageSrc: string, areaPixels: CropRect): Promise<HTMLCanvasElement>;
+export declare function cropCanvas(source: HTMLCanvasElement, areaPixels: CropRect): HTMLCanvasElement;
+export declare function sourceToCanvas(imageSrc: string): Promise<HTMLCanvasElement>;
+export declare function canvasToObjectUrl(canvas: HTMLCanvasElement): Promise<string>;
+//# sourceMappingURL=crop.d.ts.map

package/dist/crop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crop.d.ts","sourceRoot":"","sources":["../src/crop.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAID,wBAAgB,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,QAAQ,CAM/F;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAQhG;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAO3F;AAID,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED,wBAAsB,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAM3E;AAkBD,wBAAsB,WAAW,CAC/B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,QAAQ,GACnB,OAAO,CAAC,iBAAiB,CAAC,CAG5B;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,QAAQ,GAAG,iBAAiB,CAE7F;AAED,wBAAsB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAQjF;AAGD,wBAAsB,iBAAiB,CAAC,MAAM,EAAE,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAQlF"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ImageEditModal, type ImageEditModalProps } from './ImageEditModal';
+export { ImageEditModalPlugin } from './ImageEditModalPlugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,740 @@
+import { Circle, Crop, Hash, ImageOff, MoveUpRight, PaintBucket, Pen, Redo2, Square, Type, Undo2 } 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 { 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 = {
+	arrow: "ArrowMarker",
+	counter: "TextMarker",
+	cover: "CoverMarker",
+	ellipse: "EllipseFrameMarker",
+	pen: "FreehandMarker",
+	rect: "FrameMarker",
+	text: "TextMarker"
+};
+function isAnnotationTool(tool) {
+	return tool !== "crop";
+}
+var SWATCH_COLORS = [
+	"#ef4444",
+	"#f59e0b",
+	"#22c55e",
+	"#3b82f6",
+	"#171717",
+	"#ffffff"
+];
+var STROKE_WIDTHS = [
+	2,
+	4,
+	6
+];
+var STROKE_TOOLS = new Set([
+	"arrow",
+	"ellipse",
+	"pen",
+	"rect"
+]);
+function offsetMarker(marker, dx, dy) {
+	const next = { ...marker };
+	if (typeof next.left === "number") next.left += dx;
+	if (typeof next.top === "number") next.top += dy;
+	if (typeof next.x1 === "number") next.x1 += dx;
+	if (typeof next.y1 === "number") next.y1 += dy;
+	if (typeof next.x2 === "number") next.x2 += dx;
+	if (typeof next.y2 === "number") next.y2 += dy;
+	if (Array.isArray(next.points)) next.points = next.points.map((point) => ({
+		x: point.x + dx,
+		y: point.y + dy
+	}));
+	return next;
+}
+function offsetMarkerState(state, dx, dy) {
+	return {
+		...state,
+		markers: state.markers.map((marker) => offsetMarker(marker, dx, dy))
+	};
+}
+//#endregion
+//#region src/styles.css.ts
+var fullscreenPopup = "_1257qq22";
+var root = "_1257qq23";
+var topBar = "_1257qq24";
+var topBarTitle = "_1257qq25";
+var topBarControls = "_1257qq26";
+var toolGroup = "_1257qq27";
+var body = "_1257qq28";
+var toolRail = "_1257qq29";
+var toolButton = "_1257qq2a";
+var toolButtonActive = "_1257qq2b";
+var canvasArea = "_1257qq2d";
+var annotationSurface = "_1257qq2g";
+var optionsBar = "_1257qq2h";
+var swatch = "_1257qq2i";
+var swatchActive = "_1257qq2j";
+var optionButton = "_1257qq2k";
+var optionDivider = "_1257qq2n";
+var errorState = "_1257qq2o";
+var attribution = "_1257qq2p";
+var footer = "_1257qq2q";
+var footerSpacer = "_1257qq2r";
+var ghostButton = "_1257qq2t _1257qq2s";
+var secondaryButton = "_1257qq2v _1257qq2s";
+var primaryButton = "_1257qq2w _1257qq2s";
+//#endregion
+//#region src/AnnotationSurface.tsx
+var TEXT_TOOLS = new Set(["counter", "text"]);
+var AnnotationSurface = ({ apiRef, counterRef, onDecodeError, onHistoryChange, sourceUrl, stateRef, strokeColor, strokeWidth, tool }) => {
+	const containerRef = useRef(null);
+	const areaRef = useRef(null);
+	const syncRef = useRef(() => {});
+	const [ready, setReady] = useState(false);
+	const settingsRef = useRef({
+		strokeColor,
+		strokeWidth,
+		tool
+	});
+	settingsRef.current = {
+		strokeColor,
+		strokeWidth,
+		tool
+	};
+	const callbacksRef = useRef({
+		onDecodeError,
+		onHistoryChange
+	});
+	callbacksRef.current = {
+		onDecodeError,
+		onHistoryChange
+	};
+	const styleEditorRef = useRef((editor, isNew) => {});
+	styleEditorRef.current = (editor, isNew) => {
+		const settings = settingsRef.current;
+		if (settings.tool === "cover") editor.fillColor = settings.strokeColor;
+		else if (editor.is(TextMarkerEditor)) {
+			editor.color = settings.strokeColor;
+			if (isNew && settings.tool === "counter") editor.marker.text = String(counterRef.current);
+		} else {
+			editor.strokeColor = settings.strokeColor;
+			editor.strokeWidth = settings.strokeWidth;
+		}
+	};
+	const armRef = useRef(() => {});
+	armRef.current = () => {
+		const area = areaRef.current;
+		if (!area) return;
+		const editor = area.createMarker(MARKER_TYPE_BY_TOOL[settingsRef.current.tool]);
+		if (editor) styleEditorRef.current(editor, true);
+	};
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let disposed = false;
+		const area = new MarkerArea();
+		const img = document.createElement("img");
+		img.crossOrigin = "anonymous";
+		img.src = sourceUrl;
+		const sync = () => {
+			stateRef.current = area.getState();
+			callbacksRef.current.onHistoryChange(area.isUndoPossible, area.isRedoPossible);
+		};
+		const handleCreate = () => {
+			if (settingsRef.current.tool === "counter") counterRef.current += 1;
+			sync();
+			if (!TEXT_TOOLS.has(settingsRef.current.tool)) armRef.current();
+		};
+		let pointerActive = false;
+		let armPending = false;
+		const tryArm = () => {
+			if (disposed) return;
+			if (area.currentMarkerEditor || area.selectedMarkerEditors.length > 0) return;
+			if (pointerActive) {
+				armPending = true;
+				return;
+			}
+			armRef.current();
+		};
+		const handlePointerDown = () => {
+			pointerActive = true;
+		};
+		const handlePointerRelease = () => {
+			pointerActive = false;
+			if (!armPending) return;
+			armPending = false;
+			setTimeout(tryArm, 0);
+		};
+		container.addEventListener("pointerdown", handlePointerDown, true);
+		window.addEventListener("pointerup", handlePointerRelease);
+		window.addEventListener("pointercancel", handlePointerRelease);
+		const handleDeselect = () => {
+			if (!TEXT_TOOLS.has(settingsRef.current.tool)) return;
+			setTimeout(tryArm, 0);
+		};
+		img.decode().then(() => {
+			if (disposed) return;
+			area.targetImage = img;
+			area.autoZoomOut = true;
+			area.addEventListener("markercreate", handleCreate);
+			area.addEventListener("markerchange", sync);
+			area.addEventListener("markerdelete", sync);
+			area.addEventListener("areastatechange", sync);
+			area.addEventListener("markerdeselect", handleDeselect);
+			container.append(area);
+			areaRef.current = area;
+			if (stateRef.current) area.restoreState(stateRef.current, false);
+			syncRef.current = sync;
+			setReady(true);
+		}).catch(() => {
+			if (!disposed) callbacksRef.current.onDecodeError();
+		});
+		return () => {
+			disposed = true;
+			container.removeEventListener("pointerdown", handlePointerDown, true);
+			window.removeEventListener("pointerup", handlePointerRelease);
+			window.removeEventListener("pointercancel", handlePointerRelease);
+			if (areaRef.current === area) {
+				stateRef.current = area.getState();
+				areaRef.current = null;
+			}
+			syncRef.current = () => {};
+			callbacksRef.current.onHistoryChange(false, false);
+			area.remove();
+			setReady(false);
+		};
+	}, [
+		sourceUrl,
+		stateRef,
+		counterRef
+	]);
+	useEffect(() => {
+		if (!ready) return;
+		armRef.current();
+	}, [ready, tool]);
+	useEffect(() => {
+		if (!ready) return;
+		const area = areaRef.current;
+		if (!area) return;
+		for (const editor of area.selectedMarkerEditors) styleEditorRef.current(editor, false);
+		syncRef.current();
+		armRef.current();
+	}, [
+		ready,
+		strokeColor,
+		strokeWidth
+	]);
+	useEffect(() => {
+		apiRef.current = {
+			redo: () => {
+				const area = areaRef.current;
+				if (!area) return;
+				area.redo();
+				syncRef.current();
+				armRef.current();
+			},
+			undo: () => {
+				const area = areaRef.current;
+				if (!area) return;
+				area.undo();
+				syncRef.current();
+				armRef.current();
+			}
+		};
+		return () => {
+			apiRef.current = null;
+		};
+	}, [apiRef]);
+	return /* @__PURE__ */ jsx("div", {
+		className: annotationSurface,
+		ref: containerRef
+	});
+};
+//#endregion
+//#region src/crop.ts
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function clampCropRect(rect, imageWidth, imageHeight) {
+	const left = clamp(Math.round(rect.x), 0, imageWidth);
+	const top = clamp(Math.round(rect.y), 0, imageHeight);
+	const right = clamp(Math.round(rect.x + rect.width), left, imageWidth);
+	return {
+		height: clamp(Math.round(rect.y + rect.height), top, imageHeight) - top,
+		width: right - left,
+		x: left,
+		y: top
+	};
+}
+function isFullImageCrop(rect, imageWidth, imageHeight) {
+	const clamped = clampCropRect(rect, imageWidth, imageHeight);
+	return clamped.x === 0 && clamped.y === 0 && clamped.width === imageWidth && clamped.height === imageHeight;
+}
+function displayedToNatural(rect, scaleX, scaleY) {
+	return {
+		height: rect.height * scaleY,
+		width: rect.width * scaleX,
+		x: rect.x * scaleX,
+		y: rect.y * scaleY
+	};
+}
+var CANVAS_ENCODABLE_TYPES = new Set([
+	"image/jpeg",
+	"image/png",
+	"image/webp"
+]);
+function pickExportMime(originalType) {
+	return CANVAS_ENCODABLE_TYPES.has(originalType) ? originalType : "image/png";
+}
+async function loadImage(imageSrc) {
+	const image = new Image();
+	image.crossOrigin = "anonymous";
+	image.src = imageSrc;
+	await image.decode();
+	return image;
+}
+function drawCrop(source, rect) {
+	if (rect.width === 0 || rect.height === 0) throw new Error("Crop region is empty");
+	const canvas = document.createElement("canvas");
+	canvas.width = rect.width;
+	canvas.height = rect.height;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Canvas 2d context unavailable");
+	ctx.drawImage(source, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
+	return canvas;
+}
+async function extractCrop(imageSrc, areaPixels) {
+	const image = await loadImage(imageSrc);
+	return drawCrop(image, clampCropRect(areaPixels, image.naturalWidth, image.naturalHeight));
+}
+function cropCanvas(source, areaPixels) {
+	return drawCrop(source, clampCropRect(areaPixels, source.width, source.height));
+}
+async function sourceToCanvas(imageSrc) {
+	const image = await loadImage(imageSrc);
+	return drawCrop(image, {
+		height: image.naturalHeight,
+		width: image.naturalWidth,
+		x: 0,
+		y: 0
+	});
+}
+async function canvasToObjectUrl(canvas) {
+	const blob = await new Promise((resolve, reject) => {
+		canvas.toBlob((result) => result ? resolve(result) : reject(/* @__PURE__ */ new Error("canvas.toBlob returned null")), "image/png");
+	});
+	return URL.createObjectURL(blob);
+}
+//#endregion
+//#region src/build-result.ts
+async function buildResult(original, canvas) {
+	if (!canvas) return original;
+	const type = pickExportMime(original.type);
+	const blob = await new Promise((resolve, reject) => {
+		canvas.toBlob((result) => result ? resolve(result) : reject(/* @__PURE__ */ new Error("canvas.toBlob returned null")), type);
+	});
+	return new File([blob], original.name, { type: blob.type || type });
+}
+//#endregion
+//#region src/rasterize.ts
+async function rasterizeAnnotations(imageSrc, state) {
+	const image = await loadImage(imageSrc);
+	const renderer = new Renderer();
+	renderer.targetImage = image;
+	renderer.naturalSize = true;
+	const canvas = document.createElement("canvas");
+	await renderer.rasterize(state, canvas);
+	return canvas;
+}
+//#endregion
+//#region src/pipeline.ts
+async function applyCropRebase(sourceUrl, rect, markerState) {
+	return {
+		bitmapUrl: await canvasToObjectUrl(await extractCrop(sourceUrl, rect)),
+		markerState: markerState ? {
+			...offsetMarkerState(markerState, -rect.x, -rect.y),
+			height: rect.height,
+			width: rect.width
+		} : null
+	};
+}
+async function exportResult({ hasRebasedBitmap, markerState, 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);
+	return buildResult(original, canvas);
+}
+//#endregion
+//#region src/ToolOptionsBar.tsx
+var ToolOptionsBar = ({ canRedo, canUndo, onRedo, onStrokeColorChange, onStrokeWidthChange, onUndo, showStrokeWidth, strokeColor, strokeWidth }) => /* @__PURE__ */ jsxs("div", {
+	className: optionsBar,
+	children: [
+		SWATCH_COLORS.map((color) => /* @__PURE__ */ jsx("button", {
+			"aria-label": `Color ${color}`,
+			"aria-pressed": strokeColor === color,
+			className: strokeColor === color ? `${swatch} ${swatchActive}` : swatch,
+			style: { backgroundColor: color },
+			title: color,
+			type: "button",
+			onClick: () => onStrokeColorChange(color)
+		}, color)),
+		showStrokeWidth && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "_1257qq2n" }), STROKE_WIDTHS.map((width) => /* @__PURE__ */ jsx("button", {
+			"aria-label": `Stroke width ${width}`,
+			"aria-pressed": strokeWidth === width,
+			title: `Stroke width ${width}px`,
+			type: "button",
+			className: strokeWidth === width ? `_1257qq2k _1257qq2l` : "_1257qq2k",
+			onClick: () => onStrokeWidthChange(width),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "_1257qq2m",
+				style: {
+					height: width + 4,
+					width: width + 4
+				}
+			})
+		}, width))] }),
+		/* @__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 })
+		}),
+		/* @__PURE__ */ jsx("button", {
+			"aria-label": "Redo",
+			className: optionButton,
+			disabled: !canRedo,
+			title: "Redo",
+			type: "button",
+			onClick: onRedo,
+			children: /* @__PURE__ */ jsx(Redo2, { size: 16 })
+		})
+	]
+});
+//#endregion
+//#region src/useImageEditorState.ts
+var FULL_IMAGE_CROP = {
+	height: 100,
+	unit: "%",
+	width: 100,
+	x: 0,
+	y: 0
+};
+function useImageEditorState(objectUrl) {
+	const [activeTool, setActiveTool] = useState("crop");
+	const [rebasedBitmapUrl, setRebasedBitmapUrl] = useState(null);
+	const [crop, setCrop] = useState(FULL_IMAGE_CROP);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+	const [naturalSize, setNaturalSize] = useState(null);
+	const markerStateRef = useRef(null);
+	const rebasedUrlRef = useRef(null);
+	rebasedUrlRef.current = rebasedBitmapUrl;
+	useEffect(() => () => {
+		if (rebasedUrlRef.current) URL.revokeObjectURL(rebasedUrlRef.current);
+	}, []);
+	const sourceUrl = rebasedBitmapUrl ?? objectUrl;
+	const hasPendingCrop = croppedAreaPixels !== null && naturalSize !== null && croppedAreaPixels.width >= 1 && croppedAreaPixels.height >= 1 && !isFullImageCrop(croppedAreaPixels, naturalSize.width, naturalSize.height);
+	const resetCrop = () => {
+		setCrop(FULL_IMAGE_CROP);
+		setCroppedAreaPixels(null);
+	};
+	const confirmCropAndSwitch = async (tool) => {
+		if (!croppedAreaPixels || !naturalSize) return;
+		const rect = clampCropRect(croppedAreaPixels, naturalSize.width, naturalSize.height);
+		try {
+			const rebase = await applyCropRebase(sourceUrl, rect, markerStateRef.current);
+			if (rebasedBitmapUrl) URL.revokeObjectURL(rebasedBitmapUrl);
+			setRebasedBitmapUrl(rebase.bitmapUrl);
+			markerStateRef.current = rebase.markerState;
+			resetCrop();
+			setNaturalSize({
+				height: rect.height,
+				width: rect.width
+			});
+			setActiveTool(tool);
+		} catch {}
+	};
+	return {
+		activeTool,
+		confirmCropAndSwitch,
+		crop,
+		croppedAreaPixels,
+		hasPendingCrop,
+		markerStateRef,
+		naturalSize,
+		rebasedBitmapUrl,
+		resetCrop,
+		setActiveTool,
+		setCrop,
+		setCroppedAreaPixels,
+		setNaturalSize,
+		sourceUrl
+	};
+}
+//#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 }) => {
+	const [objectUrl, setObjectUrl] = useState("");
+	const [decodeError, setDecodeError] = useState(false);
+	const [exporting, setExporting] = useState(false);
+	const [strokeColor, setStrokeColor] = useState(SWATCH_COLORS[0]);
+	const [strokeWidth, setStrokeWidth] = useState(STROKE_WIDTHS[1]);
+	const [history, setHistory] = useState({
+		canRedo: false,
+		canUndo: false
+	});
+	const imgRef = useRef(null);
+	const counterRef = useRef(1);
+	const annotationApiRef = useRef(null);
+	const editor = useImageEditorState(objectUrl);
+	const { hasPendingCrop, markerStateRef, sourceUrl } = editor;
+	useEffect(() => {
+		const url = URL.createObjectURL(file);
+		setObjectUrl(url);
+		return () => URL.revokeObjectURL(url);
+	}, [file]);
+	const handleImageLoad = (event) => {
+		const { naturalHeight, naturalWidth } = event.currentTarget;
+		editor.setNaturalSize({
+			height: naturalHeight,
+			width: naturalWidth
+		});
+	};
+	const handleCropComplete = (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));
+	};
+	const handleToolClick = (tool) => {
+		if (tool === editor.activeTool) return;
+		if (editor.activeTool === "crop" && hasPendingCrop) {
+			editor.confirmCropAndSwitch(tool);
+			return;
+		}
+		editor.setActiveTool(tool);
+	};
+	const handleConfirm = async () => {
+		setExporting(true);
+		try {
+			const pendingCropRect = editor.activeTool === "crop" && hasPendingCrop ? editor.croppedAreaPixels : null;
+			onConfirm(await exportResult({
+				hasRebasedBitmap: editor.rebasedBitmapUrl !== null,
+				markerState: markerStateRef.current,
+				original: file,
+				pendingCropRect,
+				sourceUrl
+			}));
+		} catch {
+			onSkip();
+		} finally {
+			setExporting(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: root,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: topBar,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: topBarTitle,
+					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()
+					}))
+				})]
+			}),
+			/* @__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))
+				}), /* @__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", {
+						className: attribution,
+						href: "https://markerjs.com",
+						rel: "noreferrer",
+						target: "_blank",
+						children: "marker.js"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: footer,
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						className: ghostButton,
+						type: "button",
+						onClick: onSkip,
+						children: "Upload without editing"
+					}),
+					/* @__PURE__ */ jsx("div", { className: footerSpacer }),
+					/* @__PURE__ */ jsx("button", {
+						className: secondaryButton,
+						type: "button",
+						onClick: onCancel,
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: primaryButton,
+						disabled: decodeError || exporting,
+						type: "button",
+						onClick: handleConfirm,
+						children: "Upload"
+					})
+				]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/ImageEditModalPlugin.tsx
+var ImageEditModalPlugin = () => {
+	const preprocess = useImagePreprocess();
+	const portalTheme = usePortalTheme();
+	const portalThemeRef = useRef(portalTheme);
+	portalThemeRef.current = portalTheme;
+	useEffect(() => {
+		if (!preprocess) return;
+		const fn = (file) => new Promise((resolve) => {
+			let settled = false;
+			const settle = (result) => {
+				if (settled) return;
+				settled = true;
+				resolve(result);
+			};
+			const dismiss = presentDialog({
+				className: fullscreenPopup,
+				content: () => /* @__PURE__ */ jsx(ImageEditModal, {
+					file,
+					onCancel: () => {
+						settle(null);
+						dismiss();
+					},
+					onConfirm: (edited) => {
+						settle(edited);
+						dismiss();
+					},
+					onSkip: () => {
+						settle("skip");
+						dismiss();
+					}
+				}),
+				onClose: () => settle(null),
+				portalClassName: portalThemeRef.current.className,
+				showCloseButton: false,
+				theme: portalThemeRef.current.theme
+			});
+		});
+		return preprocess.register(fn);
+	}, [preprocess]);
+	return null;
+};
+//#endregion
+export { ImageEditModal, ImageEditModalPlugin };

package/dist/pipeline.d.ts

@@ -0,0 +1,16 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { CropRect } from './crop';
+export interface CropRebase {
+    bitmapUrl: string;
+    markerState: AnnotationState | null;
+}
+export declare function applyCropRebase(sourceUrl: string, rect: CropRect, markerState: AnnotationState | null): Promise<CropRebase>;
+export interface ExportInput {
+    hasRebasedBitmap: boolean;
+    markerState: AnnotationState | null;
+    original: File;
+    pendingCropRect: CropRect | null;
+    sourceUrl: string;
+}
+export declare function exportResult({ hasRebasedBitmap, markerState, original, pendingCropRect, sourceUrl, }: ExportInput): Promise<File>;
+//# sourceMappingURL=pipeline.d.ts.map

package/dist/pipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline.d.ts","sourceRoot":"","sources":["../src/pipeline.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAIvC,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;CACrC;AAED,wBAAsB,eAAe,CACnC,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,QAAQ,EACd,WAAW,EAAE,eAAe,GAAG,IAAI,GAClC,OAAO,CAAC,UAAU,CAAC,CAarB;AAED,MAAM,WAAW,WAAW;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,IAAI,CAAC;IACf,eAAe,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAsB,YAAY,CAAC,EACjC,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,SAAS,GACV,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAa7B"}

package/dist/rasterize.d.ts

@@ -0,0 +1,3 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+export declare function rasterizeAnnotations(imageSrc: string, state: AnnotationState): Promise<HTMLCanvasElement>;
+//# sourceMappingURL=rasterize.d.ts.map

package/dist/rasterize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rasterize.d.ts","sourceRoot":"","sources":["../src/rasterize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAK3D,wBAAsB,oBAAoB,CACxC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,eAAe,GACrB,OAAO,CAAC,iBAAiB,CAAC,CAQ5B"}

package/dist/rich-plugin-image-editor.css

@@ -0,0 +1,2 @@
+@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:#0003;--rc-drag-bar-size:6px;--rc-border-color:#ffffffb3;--rc-focus-color:#08f}.ReactCrop{cursor:crosshair;max-width:100%;display:inline-block;position:relative}.ReactCrop *,.ReactCrop :before,.ReactCrop :after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit;overflow:hidden}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{max-width:100%;max-height:inherit;display:block}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px);position:absolute;top:0;bottom:0;left:0;right:0}.ReactCrop__crop-selection{cursor:move;position:absolute;top:0;left:0;transform:translateZ(0)}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";border:1px solid var(--rc-border-color);opacity:.3;position:absolute;top:-1px;bottom:-1px;left:-1px;right:-1px}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){color:#fff;background-image:linear-gradient(90deg,#fff 50%,#444 50%),linear-gradient(90deg,#fff 50%,#444 50%),linear-gradient(#fff 50%,#444 50%),linear-gradient(#fff 50%,#444 50%);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:10px 1px,10px 1px,1px 10px,1px 10px;animation:1s linear infinite marching-ants}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";background-color:#fff6;display:block;position:absolute}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6667%}.ReactCrop__drag-handle{width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color);position:absolute}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{cursor:nw-resize;top:0;left:0;transform:translate(-50%,-50%)}.ReactCrop .ord-n{cursor:n-resize;top:0;left:50%;transform:translate(-50%,-50%)}.ReactCrop .ord-ne{cursor:ne-resize;top:0;right:0;transform:translate(50%,-50%)}.ReactCrop .ord-e{cursor:e-resize;top:50%;right:0;transform:translate(50%,-50%)}.ReactCrop .ord-se{cursor:se-resize;bottom:0;right:0;transform:translate(50%,50%)}.ReactCrop .ord-s{cursor:s-resize;bottom:0;left:50%;transform:translate(-50%,50%)}.ReactCrop .ord-sw{cursor:sw-resize;bottom:0;left:0;transform:translate(-50%,50%)}.ReactCrop .ord-w{cursor:w-resize;top:50%;left:0;transform:translate(-50%,-50%)}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{width:100%;height:var(--rc-drag-bar-size);top:0;left:0;transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{width:var(--rc-drag-bar-size);height:100%;top:0;right:0;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{width:100%;height:var(--rc-drag-bar-size);bottom:0;left:0;transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{width:var(--rc-drag-bar-size);height:100%;top:0;left:0;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer:coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}:root{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark,[data-theme=dark]{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}._1lodjav0{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._1lodjav1{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#2563eb;--rc-quote-bg:#f5f5f5;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._1lodjav2{--rc-text:#000;--rc-text-secondary:#262626;--rc-text-tertiary:#737373;--rc-text-quaternary:#a3a3a3;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f5f5f5;--rc-fill:#e8e8e8;--rc-fill-secondary:#eee;--rc-fill-tertiary:#f5f5f5;--rc-fill-quaternary:#fafafa;--rc-border:#f5f5f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#404040;--rc-code-bg:#f5f5f5;--rc-hr-border:#e5e5e5;--rc-quote-border:#a3a3a3;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-family-kai:"楷体", KaiTi, STKaiti, "Kaiti SC", "LXGW WenKai", "霞鹜文楷", "Noto Serif CJK SC", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._1lodjav0,[data-theme=dark] ._1lodjav0,.dark._1lodjav0,[data-theme=dark]._1lodjav0,.dark ._1lodjav1,[data-theme=dark] ._1lodjav1,.dark._1lodjav1,[data-theme=dark]._1lodjav1,.dark ._1lodjav2,[data-theme=dark] ._1lodjav2,.dark._1lodjav2,[data-theme=dark]._1lodjav2{--rc-text:#fafafa;--rc-text-secondary:#a3a3a3;--rc-text-tertiary:#737373;--rc-text-quaternary:#525252;--rc-bg:#0a0a0a;--rc-bg-secondary:#171717;--rc-bg-tertiary:#262626;--rc-fill:#2a2a2a;--rc-fill-secondary:#222;--rc-fill-tertiary:#1a1a1a;--rc-fill-quaternary:#141414;--rc-border:#262626;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#d4d4d4;--rc-code-bg:#262626;--rc-hr-border:#262626;--rc-quote-border:#60a5fa;--rc-quote-bg:#262626;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}@keyframes _1257qq20{0%{opacity:0}to{opacity:1}}@keyframes _1257qq21{0%{opacity:1}to{opacity:0}}._1257qq22._1257qq22{border-radius:0;flex-direction:column;gap:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;margin:0;padding:0;display:flex;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden;transform:none}._1257qq22._1257qq22[data-open]{animation:.15s ease-out _1257qq20}._1257qq22._1257qq22[data-closed]{animation:.1s ease-in _1257qq21}._1257qq23{background-color:var(--rc-bg);min-height:0;color:var(--rc-text);font-family:var(--rc-font-family-sans);flex-direction:column;flex:1;display:flex}._1257qq24{border-bottom:1px solid var(--rc-border);flex-shrink:0;align-items:center;gap:12px;height:48px;padding:0 16px;display:flex}._1257qq25{font-size:14px;font-weight:600}._1257qq26{flex:1;align-items:center;gap:8px;min-width:0;display:flex}._1257qq27{display:contents}._1257qq28{flex:1;min-height:0;display:flex}._1257qq29{border-right:1px solid var(--rc-border);flex-direction:column;flex-shrink:0;align-items:center;gap:4px;width:56px;padding:12px 0;display:flex}._1257qq2a{border-radius:var(--rc-radius-sm);color:#737373;cursor:pointer;background-color:#0000;border:none;justify-content:center;align-items:center;width:36px;height:36px;display:flex}._1257qq2a:hover:not(:disabled){background-color:var(--rc-fill-secondary);color:var(--rc-text)}._1257qq2a:disabled{color:#a3a3a3;cursor:default;opacity:.55}._1257qq2b{background-color:var(--rc-fill);color:var(--rc-text)}._1257qq2b:hover:not(:disabled){background-color:var(--rc-fill)}._1257qq2c{background-color:var(--rc-border);width:28px;height:1px;margin:6px 0}._1257qq2d{background:repeating-conic-gradient(var(--rc-bg-tertiary) 0% 25%, var(--rc-bg) 0% 50%) 50% / 20px 20px;flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;padding:24px;display:flex;position:relative;overflow:hidden}._1257qq2e{max-width:100%;max-height:100%;box-shadow:var(--rc-shadow-modal)}._1257qq2f{max-width:100%;display:block}._1257qq2e .ReactCrop__child-wrapper>._1257qq2f{max-height:calc(100vh - 152px)}._1257qq2g{width:100%;min-width:0;height:100%;min-height:0;display:flex;position:relative}._1257qq2h{align-items:center;gap:6px;margin-left:auto;display:flex}._1257qq2i{cursor:pointer;border:1px solid #73737359;border-radius:50%;width:18px;height:18px;padding:0}._1257qq2j{box-shadow:0 0 0 2px var(--rc-bg), 0 0 0 4px #737373}._1257qq2k{border-radius:var(--rc-radius-sm);color:#737373;cursor:pointer;background-color:#0000;border:none;justify-content:center;align-items:center;width:26px;height:26px;padding:0;display:flex}._1257qq2k:hover:not(:disabled){background-color:var(--rc-fill-secondary);color:var(--rc-text)}._1257qq2k:disabled{color:#a3a3a3;cursor:default;opacity:.55}._1257qq2l{background-color:var(--rc-fill);color:var(--rc-text)}._1257qq2m{background-color:currentColor;border-radius:50%}._1257qq2n{background-color:var(--rc-border);width:1px;height:18px;margin:0 4px}._1257qq2o{border-radius:var(--rc-radius-md);background-color:var(--rc-bg);color:#737373;box-shadow:var(--rc-shadow-modal);flex-direction:column;align-items:center;gap:8px;padding:24px;font-size:13px;display:flex}._1257qq2p{color:#a3a3a3;font-size:11px;text-decoration:none;position:absolute;bottom:8px;right:10px}._1257qq2p:hover{color:#737373;text-decoration:underline}._1257qq2q{border-top:1px solid var(--rc-border);flex-shrink:0;align-items:center;gap:8px;height:56px;padding:0 16px;display:flex}._1257qq2r{flex:1}._1257qq2s{border-radius:var(--rc-radius-sm);cursor:pointer;justify-content:center;align-items:center;height:32px;padding:0 14px;font-size:13px;font-weight:500;display:inline-flex}._1257qq2s:disabled{opacity:.5;cursor:default}._1257qq2t{color:#737373;background-color:#0000;border:none}._1257qq2t:hover:not(:disabled){background-color:var(--rc-fill-secondary);color:var(--rc-text)}._1257qq2u{height:26px;margin-left:auto;padding:0 10px;font-size:12px}._1257qq2v{border:1px solid var(--rc-border);background-color:var(--rc-bg);color:var(--rc-text)}._1257qq2v:hover:not(:disabled){background-color:var(--rc-fill-secondary)}._1257qq2w{background-color:var(--rc-text);color:var(--rc-bg);border:1px solid #0000}._1257qq2w:hover:not(:disabled){opacity:.85}
+/*$vite$:1*/

package/dist/styles.css.d.ts

@@ -0,0 +1,32 @@
+declare const _fullscreenPopup: string;
+export { _fullscreenPopup as fullscreenPopup };
+export declare const root: string;
+export declare const topBar: string;
+export declare const topBarTitle: string;
+export declare const topBarControls: string;
+export declare const toolGroup: string;
+export declare const body: string;
+export declare const toolRail: string;
+export declare const toolButton: string;
+export declare const toolButtonActive: string;
+export declare const toolDivider: string;
+export declare const canvasArea: string;
+export declare const cropSurface: string;
+export declare const cropImage: string;
+export declare const annotationSurface: string;
+export declare const optionsBar: string;
+export declare const swatch: string;
+export declare const swatchActive: string;
+export declare const optionButton: string;
+export declare const optionButtonActive: string;
+export declare const strokeDot: string;
+export declare const optionDivider: string;
+export declare const errorState: string;
+export declare const attribution: string;
+export declare const footer: string;
+export declare const footerSpacer: string;
+export declare const ghostButton: string;
+export declare const topBarGhostButton: string;
+export declare const secondaryButton: string;
+export declare const primaryButton: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAcA,QAAA,MAAM,gBAAgB,QAAY,CAAC;AA2BnC,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC;AAE/C,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,WAAW,QAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,QAMzB,CAAC;AAEH,eAAO,MAAM,SAAS,QAEpB,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,QAAQ,QASnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAsBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAQ3B,CAAC;AAEH,eAAO,MAAM,WAAW,QAKtB,CAAC;AAEH,eAAO,MAAM,UAAU,QAYrB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAUH,eAAO,MAAM,iBAAiB,QAO5B,CAAC;AAEH,eAAO,MAAM,UAAU,QAKrB,CAAC;AAEH,eAAO,MAAM,MAAM,QAOjB,CAAC;AAEH,eAAO,MAAM,YAAY,QAEvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAuBvB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAG7B,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,aAAa,QAKxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAWrB,CAAC;AAEH,eAAO,MAAM,WAAW,QAatB,CAAC;AAEH,eAAO,MAAM,MAAM,QAQjB,CAAC;AAEH,eAAO,MAAM,YAAY,QAEvB,CAAC;AAoBH,eAAO,MAAM,WAAW,QAatB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAQ5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,aAAa,QAYxB,CAAC"}

package/dist/useImageEditorState.d.ts

@@ -0,0 +1,28 @@
+import { AnnotationState } from '@markerjs/markerjs3';
+import { RefObject } from 'react';
+import { Crop } from 'react-image-crop';
+import { CropRect } from './crop';
+export type EditorTool = 'crop' | 'arrow' | 'pen' | 'rect' | 'ellipse' | 'text' | 'counter' | 'cover';
+export interface ImageNaturalSize {
+    height: number;
+    width: number;
+}
+export declare const FULL_IMAGE_CROP: Crop;
+export interface ImageEditorState {
+    activeTool: EditorTool;
+    confirmCropAndSwitch: (tool: EditorTool) => Promise<void>;
+    crop: Crop;
+    croppedAreaPixels: CropRect | null;
+    hasPendingCrop: boolean;
+    markerStateRef: RefObject<AnnotationState | null>;
+    naturalSize: ImageNaturalSize | null;
+    rebasedBitmapUrl: string | null;
+    resetCrop: () => void;
+    setActiveTool: (tool: EditorTool) => void;
+    setCrop: (crop: Crop) => void;
+    setCroppedAreaPixels: (area: CropRect | null) => void;
+    setNaturalSize: (size: ImageNaturalSize | null) => void;
+    sourceUrl: string;
+}
+export declare function useImageEditorState(objectUrl: string): ImageEditorState;
+//# sourceMappingURL=useImageEditorState.d.ts.map

package/dist/useImageEditorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImageEditorState.d.ts","sourceRoot":"","sources":["../src/useImageEditorState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAIvC,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,OAAO,GACP,KAAK,GACL,MAAM,GACN,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,eAAe,EAAE,IAAyD,CAAC;AAExF,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,UAAU,CAAC;IAEvB,oBAAoB,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,IAAI,EAAE,IAAI,CAAC;IAEX,iBAAiB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,OAAO,CAAC;IAExB,cAAc,EAAE,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAClD,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAErC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,oBAAoB,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,MAAM,GAAG,gBAAgB,CAgEvE"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@haklex/rich-plugin-image-editor",
+  "version": "0.24.0",
+  "description": "Pre-upload image edit modal plugin (crop + annotate)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-plugin-image-editor"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-plugin-image-editor.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@markerjs/markerjs3": "^3.10.0",
+    "react-image-crop": "^11.0.10"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
+    "lucide-react": "^1.17.0",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "typescript": "^5.9.3",
+    "unplugin-dts": "^1.0.1",
+    "vite": "^8.0.14"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1.0.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-editor": "0.24.0",
+    "@haklex/rich-editor-ui": "0.24.0",
+    "@haklex/rich-style-token": "0.24.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}