@wordpress/image-cropper 1.0.1-next.6deb34194.0

package/build-module/provider/use-image-cropper.js

@@ -0,0 +1,167 @@
+// packages/image-cropper/src/provider/use-image-cropper.ts
+import { dequal } from "dequal";
+import { useMemo, useState, useCallback } from "@wordpress/element";
+import { MIN_ZOOM } from "../constants";
+import {
+  getCroppedImage as getCroppedImageUtil,
+  normalizeRotation
+} from "../utils";
+var DEFAULT_INITIAL_STATE = {
+  crop: {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100
+  },
+  zoom: MIN_ZOOM,
+  rotation: 0,
+  aspectRatio: 1,
+  flip: {
+    horizontal: false,
+    vertical: false
+  }
+};
+var DEFAULT_CROP_MEDIA_POSITION = {
+  x: 0,
+  y: 0
+};
+var DEFAULT_CROPPER_STATE = {
+  crop: DEFAULT_CROP_MEDIA_POSITION,
+  croppedArea: DEFAULT_INITIAL_STATE.crop,
+  croppedAreaPixels: null,
+  zoom: DEFAULT_INITIAL_STATE.zoom,
+  rotation: DEFAULT_INITIAL_STATE.rotation,
+  flip: DEFAULT_INITIAL_STATE.flip,
+  aspectRatio: DEFAULT_INITIAL_STATE.aspectRatio,
+  mediaSize: null
+};
+function useCropper() {
+  const [cropperState, setInternalCropperState] = useState(
+    DEFAULT_CROPPER_STATE
+  );
+  const [resetState, setInternalResetState] = useState(null);
+  const setCropperState = useCallback(
+    (newState) => {
+      setInternalCropperState((prev) => {
+        const updates = typeof newState === "function" ? newState(prev) : newState;
+        const normalizedUpdates = { ...updates };
+        if ("rotation" in normalizedUpdates && normalizedUpdates.rotation !== void 0) {
+          normalizedUpdates.rotation = normalizeRotation(
+            normalizedUpdates.rotation
+          );
+        }
+        return { ...prev, ...normalizedUpdates };
+      });
+    },
+    []
+  );
+  const setResetState = useCallback(
+    (newResetState = null) => {
+      if (!newResetState) {
+        setInternalResetState(null);
+        setCropperState(DEFAULT_CROPPER_STATE);
+        return;
+      }
+      if (typeof newResetState === "object") {
+        const initialState = {
+          ...DEFAULT_INITIAL_STATE,
+          ...newResetState
+        };
+        setInternalResetState(initialState);
+        setCropperState(initialState);
+      }
+    },
+    [setCropperState, setInternalResetState]
+  );
+  const reset = useCallback(() => {
+    if (resetState) {
+      const resetUpdates = {
+        // Reset media position to center
+        crop: { x: 0, y: 0 },
+        // Reset cropped area pixels (will be recalculated)
+        croppedAreaPixels: null
+      };
+      if (resetState.crop) {
+        resetUpdates.croppedArea = resetState.crop;
+      }
+      if (resetState.zoom !== void 0) {
+        resetUpdates.zoom = resetState.zoom;
+      }
+      if (resetState.rotation !== void 0) {
+        resetUpdates.rotation = resetState.rotation;
+      }
+      if (resetState.aspectRatio !== void 0) {
+        resetUpdates.aspectRatio = resetState.aspectRatio;
+      }
+      if (resetState.flip !== void 0) {
+        resetUpdates.flip = resetState.flip;
+      }
+      setCropperState(resetUpdates);
+    } else {
+      setCropperState({ ...DEFAULT_CROPPER_STATE });
+    }
+  }, [resetState, setCropperState]);
+  const isDirty = useMemo(() => {
+    if (resetState) {
+      const currentState2 = {
+        crop: cropperState.croppedAreaPixels || cropperState.croppedArea,
+        zoom: cropperState.zoom,
+        rotation: normalizeRotation(cropperState.rotation),
+        aspectRatio: cropperState.aspectRatio,
+        flip: cropperState.flip
+      };
+      return false === dequal(currentState2, resetState);
+    }
+    const currentState = {
+      crop: cropperState.croppedArea,
+      zoom: cropperState.zoom,
+      rotation: normalizeRotation(cropperState.rotation),
+      aspectRatio: cropperState.aspectRatio,
+      flip: cropperState.flip
+    };
+    return false === dequal(currentState, DEFAULT_INITIAL_STATE);
+  }, [cropperState, resetState]);
+  const getCroppedImage = useCallback(
+    async (src) => {
+      if (!cropperState.croppedAreaPixels) {
+        return null;
+      }
+      return getCroppedImageUtil(
+        src,
+        cropperState.croppedAreaPixels,
+        cropperState.rotation,
+        cropperState.flip
+      );
+    },
+    [
+      cropperState.croppedAreaPixels,
+      cropperState.rotation,
+      cropperState.flip
+    ]
+  );
+  return useMemo(
+    () => ({
+      cropperState,
+      setCropperState,
+      resetState,
+      setResetState,
+      isDirty,
+      reset,
+      getCroppedImage
+    }),
+    [
+      cropperState,
+      setCropperState,
+      resetState,
+      setResetState,
+      isDirty,
+      reset,
+      getCroppedImage
+    ]
+  );
+}
+export {
+  DEFAULT_INITIAL_STATE,
+  useCropper as default
+};
+//# sourceMappingURL=use-image-cropper.js.map

package/build-module/provider/use-image-cropper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/provider/use-image-cropper.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { dequal } from 'dequal';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { Point, ImageCropperState, CropperState } from '../types';\nimport { MIN_ZOOM } from '../constants';\nimport {\n\tgetCroppedImage as getCroppedImageUtil,\n\tnormalizeRotation,\n} from '../utils';\n\nexport const DEFAULT_INITIAL_STATE: Required< ImageCropperState > = {\n\tcrop: {\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: 100,\n\t\theight: 100,\n\t},\n\tzoom: MIN_ZOOM,\n\trotation: 0,\n\taspectRatio: 1,\n\tflip: {\n\t\thorizontal: false,\n\t\tvertical: false,\n\t},\n};\n\nconst DEFAULT_CROP_MEDIA_POSITION: Point = {\n\tx: 0,\n\ty: 0,\n};\n\nconst DEFAULT_CROPPER_STATE: CropperState = {\n\tcrop: DEFAULT_CROP_MEDIA_POSITION,\n\tcroppedArea: DEFAULT_INITIAL_STATE.crop,\n\tcroppedAreaPixels: null,\n\tzoom: DEFAULT_INITIAL_STATE.zoom,\n\trotation: DEFAULT_INITIAL_STATE.rotation,\n\tflip: DEFAULT_INITIAL_STATE.flip,\n\taspectRatio: DEFAULT_INITIAL_STATE.aspectRatio,\n\tmediaSize: null,\n};\n\nexport default function useCropper() {\n\tconst [ cropperState, setInternalCropperState ] = useState< CropperState >(\n\t\tDEFAULT_CROPPER_STATE\n\t);\n\tconst [ resetState, setInternalResetState ] =\n\t\tuseState< ImageCropperState | null >( null );\n\n\t// Unified setter that supports both partial updates and function updates\n\tconst setCropperState = useCallback(\n\t\t(\n\t\t\tnewState:\n\t\t\t\t| Partial< CropperState >\n\t\t\t\t| ( ( prev: CropperState ) => Partial< CropperState > )\n\t\t) => {\n\t\t\tsetInternalCropperState( ( prev ) => {\n\t\t\t\tconst updates =\n\t\t\t\t\ttypeof newState === 'function'\n\t\t\t\t\t\t? newState( prev )\n\t\t\t\t\t\t: newState;\n\n\t\t\t\t// Apply normalization to rotation if it's being updated\n\t\t\t\tconst normalizedUpdates = { ...updates };\n\t\t\t\tif (\n\t\t\t\t\t'rotation' in normalizedUpdates &&\n\t\t\t\t\tnormalizedUpdates.rotation !== undefined\n\t\t\t\t) {\n\t\t\t\t\tnormalizedUpdates.rotation = normalizeRotation(\n\t\t\t\t\t\tnormalizedUpdates.rotation\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn { ...prev, ...normalizedUpdates };\n\t\t\t} );\n\t\t},\n\t\t[]\n\t);\n\n\tconst setResetState = useCallback(\n\t\t( newResetState: Partial< ImageCropperState > | null = null ) => {\n\t\t\t// If null, wipe the reset state and reset the cropper state to the default state.\n\t\t\tif ( ! newResetState ) {\n\t\t\t\tsetInternalResetState( null );\n\t\t\t\tsetCropperState( DEFAULT_CROPPER_STATE );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( typeof newResetState === 'object' ) {\n\t\t\t\tconst initialState = {\n\t\t\t\t\t...DEFAULT_INITIAL_STATE,\n\t\t\t\t\t...newResetState,\n\t\t\t\t};\n\t\t\t\tsetInternalResetState( initialState );\n\t\t\t\tsetCropperState( initialState );\n\t\t\t}\n\t\t},\n\t\t[ setCropperState, setInternalResetState ]\n\t);\n\n\t/*\n\t * Resets the cropper state.\n\t */\n\tconst reset = useCallback( () => {\n\t\tif ( resetState ) {\n\t\t\t// Convert ImageCropperState to CropperState updates\n\t\t\tconst resetUpdates: Partial< CropperState > = {\n\t\t\t\t// Reset media position to center\n\t\t\t\tcrop: { x: 0, y: 0 },\n\t\t\t\t// Reset cropped area pixels (will be recalculated)\n\t\t\t\tcroppedAreaPixels: null,\n\t\t\t};\n\n\t\t\t// Set the cropped area from resetState (this is the target crop area)\n\t\t\tif ( resetState.crop ) {\n\t\t\t\tresetUpdates.croppedArea = resetState.crop;\n\t\t\t}\n\t\t\tif ( resetState.zoom !== undefined ) {\n\t\t\t\tresetUpdates.zoom = resetState.zoom;\n\t\t\t}\n\t\t\tif ( resetState.rotation !== undefined ) {\n\t\t\t\tresetUpdates.rotation = resetState.rotation;\n\t\t\t}\n\t\t\tif ( resetState.aspectRatio !== undefined ) {\n\t\t\t\tresetUpdates.aspectRatio = resetState.aspectRatio;\n\t\t\t}\n\t\t\tif ( resetState.flip !== undefined ) {\n\t\t\t\tresetUpdates.flip = resetState.flip;\n\t\t\t}\n\n\t\t\tsetCropperState( resetUpdates );\n\t\t} else {\n\t\t\tsetCropperState( { ...DEFAULT_CROPPER_STATE } );\n\t\t}\n\t}, [ resetState, setCropperState ] );\n\n\t/*\n\t * Returns true if the cropper state is dirty.\n\t * Compare against reset state if available, otherwise against default state.\n\t */\n\tconst isDirty = useMemo( () => {\n\t\tif ( resetState ) {\n\t\t\t// Compare the relevant cropper properties against reset state\n\t\t\tconst currentState = {\n\t\t\t\tcrop:\n\t\t\t\t\tcropperState.croppedAreaPixels || cropperState.croppedArea,\n\t\t\t\tzoom: cropperState.zoom,\n\t\t\t\trotation: normalizeRotation( cropperState.rotation ),\n\t\t\t\taspectRatio: cropperState.aspectRatio,\n\t\t\t\tflip: cropperState.flip,\n\t\t\t};\n\t\t\treturn false === dequal( currentState, resetState );\n\t\t}\n\n\t\t// Compare against default state using percentage values\n\t\tconst currentState = {\n\t\t\tcrop: cropperState.croppedArea,\n\t\t\tzoom: cropperState.zoom,\n\t\t\trotation: normalizeRotation( cropperState.rotation ),\n\t\t\taspectRatio: cropperState.aspectRatio,\n\t\t\tflip: cropperState.flip,\n\t\t};\n\t\treturn false === dequal( currentState, DEFAULT_INITIAL_STATE );\n\t}, [ cropperState, resetState ] );\n\n\t/**\n\t * Returns the cropped image.\n\t *\n\t * @param {string} src - The source of the image to crop.\n\t * @return {Promise<string | null>} A promise that resolves to the cropped image.\n\t */\n\tconst getCroppedImage = useCallback(\n\t\tasync ( src: string ) => {\n\t\t\tif ( ! cropperState.croppedAreaPixels ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn getCroppedImageUtil(\n\t\t\t\tsrc,\n\t\t\t\tcropperState.croppedAreaPixels,\n\t\t\t\tcropperState.rotation,\n\t\t\t\tcropperState.flip\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tcropperState.croppedAreaPixels,\n\t\t\tcropperState.rotation,\n\t\t\tcropperState.flip,\n\t\t]\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tcropperState,\n\t\t\tsetCropperState,\n\t\t\tresetState,\n\t\t\tsetResetState,\n\t\t\tisDirty,\n\t\t\treset,\n\t\t\tgetCroppedImage,\n\t\t} ),\n\t\t[\n\t\t\tcropperState,\n\t\t\tsetCropperState,\n\t\t\tresetState,\n\t\t\tsetResetState,\n\t\t\tisDirty,\n\t\t\treset,\n\t\t\tgetCroppedImage,\n\t\t]\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,cAAc;AAKvB,SAAS,SAAS,UAAU,mBAAmB;AAM/C,SAAS,gBAAgB;AACzB;AAAA,EACC,mBAAmB;AAAA,EACnB;AAAA,OACM;AAEA,IAAM,wBAAuD;AAAA,EACnE,MAAM;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACT;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,aAAa;AAAA,EACb,MAAM;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,EACX;AACD;AAEA,IAAM,8BAAqC;AAAA,EAC1C,GAAG;AAAA,EACH,GAAG;AACJ;AAEA,IAAM,wBAAsC;AAAA,EAC3C,MAAM;AAAA,EACN,aAAa,sBAAsB;AAAA,EACnC,mBAAmB;AAAA,EACnB,MAAM,sBAAsB;AAAA,EAC5B,UAAU,sBAAsB;AAAA,EAChC,MAAM,sBAAsB;AAAA,EAC5B,aAAa,sBAAsB;AAAA,EACnC,WAAW;AACZ;AAEe,SAAR,aAA8B;AACpC,QAAM,CAAE,cAAc,uBAAwB,IAAI;AAAA,IACjD;AAAA,EACD;AACA,QAAM,CAAE,YAAY,qBAAsB,IACzC,SAAsC,IAAK;AAG5C,QAAM,kBAAkB;AAAA,IACvB,CACC,aAGI;AACJ,8BAAyB,CAAE,SAAU;AACpC,cAAM,UACL,OAAO,aAAa,aACjB,SAAU,IAAK,IACf;AAGJ,cAAM,oBAAoB,EAAE,GAAG,QAAQ;AACvC,YACC,cAAc,qBACd,kBAAkB,aAAa,QAC9B;AACD,4BAAkB,WAAW;AAAA,YAC5B,kBAAkB;AAAA,UACnB;AAAA,QACD;AAEA,eAAO,EAAE,GAAG,MAAM,GAAG,kBAAkB;AAAA,MACxC,CAAE;AAAA,IACH;AAAA,IACA,CAAC;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACrB,CAAE,gBAAqD,SAAU;AAEhE,UAAK,CAAE,eAAgB;AACtB,8BAAuB,IAAK;AAC5B,wBAAiB,qBAAsB;AACvC;AAAA,MACD;AACA,UAAK,OAAO,kBAAkB,UAAW;AACxC,cAAM,eAAe;AAAA,UACpB,GAAG;AAAA,UACH,GAAG;AAAA,QACJ;AACA,8BAAuB,YAAa;AACpC,wBAAiB,YAAa;AAAA,MAC/B;AAAA,IACD;AAAA,IACA,CAAE,iBAAiB,qBAAsB;AAAA,EAC1C;AAKA,QAAM,QAAQ,YAAa,MAAM;AAChC,QAAK,YAAa;AAEjB,YAAM,eAAwC;AAAA;AAAA,QAE7C,MAAM,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA;AAAA,QAEnB,mBAAmB;AAAA,MACpB;AAGA,UAAK,WAAW,MAAO;AACtB,qBAAa,cAAc,WAAW;AAAA,MACvC;AACA,UAAK,WAAW,SAAS,QAAY;AACpC,qBAAa,OAAO,WAAW;AAAA,MAChC;AACA,UAAK,WAAW,aAAa,QAAY;AACxC,qBAAa,WAAW,WAAW;AAAA,MACpC;AACA,UAAK,WAAW,gBAAgB,QAAY;AAC3C,qBAAa,cAAc,WAAW;AAAA,MACvC;AACA,UAAK,WAAW,SAAS,QAAY;AACpC,qBAAa,OAAO,WAAW;AAAA,MAChC;AAEA,sBAAiB,YAAa;AAAA,IAC/B,OAAO;AACN,sBAAiB,EAAE,GAAG,sBAAsB,CAAE;AAAA,IAC/C;AAAA,EACD,GAAG,CAAE,YAAY,eAAgB,CAAE;AAMnC,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAK,YAAa;AAEjB,YAAMA,gBAAe;AAAA,QACpB,MACC,aAAa,qBAAqB,aAAa;AAAA,QAChD,MAAM,aAAa;AAAA,QACnB,UAAU,kBAAmB,aAAa,QAAS;AAAA,QACnD,aAAa,aAAa;AAAA,QAC1B,MAAM,aAAa;AAAA,MACpB;AACA,aAAO,UAAU,OAAQA,eAAc,UAAW;AAAA,IACnD;AAGA,UAAM,eAAe;AAAA,MACpB,MAAM,aAAa;AAAA,MACnB,MAAM,aAAa;AAAA,MACnB,UAAU,kBAAmB,aAAa,QAAS;AAAA,MACnD,aAAa,aAAa;AAAA,MAC1B,MAAM,aAAa;AAAA,IACpB;AACA,WAAO,UAAU,OAAQ,cAAc,qBAAsB;AAAA,EAC9D,GAAG,CAAE,cAAc,UAAW,CAAE;AAQhC,QAAM,kBAAkB;AAAA,IACvB,OAAQ,QAAiB;AACxB,UAAK,CAAE,aAAa,mBAAoB;AACvC,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN;AAAA,QACA,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MACd;AAAA,IACD;AAAA,IACA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IACd;AAAA,EACD;AAEA,SAAO;AAAA,IACN,OAAQ;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
+  "names": ["currentState"]
+}

package/build-module/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/build-module/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/utils.js

@@ -0,0 +1,78 @@
+// packages/image-cropper/src/utils.ts
+var normalizeRotation = (rotation) => {
+  if (rotation >= 0) {
+    return rotation % 360;
+  }
+  return (360 + rotation % 360) % 360;
+};
+var createImage = (url) => new Promise((resolve, reject) => {
+  const image = new Image();
+  image.addEventListener("load", () => resolve(image));
+  image.addEventListener("error", (error) => reject(error));
+  image.setAttribute("crossOrigin", "anonymous");
+  image.src = url;
+});
+function getRadianAngle(degreeValue) {
+  return degreeValue * Math.PI / 180;
+}
+function rotateSize(width, height, rotation) {
+  const rotRad = getRadianAngle(rotation);
+  return {
+    width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+  };
+}
+async function getCroppedImage(imageSrc, pixelCrop, rotation = 0, flip = { horizontal: false, vertical: false }) {
+  try {
+    const image = await createImage(imageSrc);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return null;
+    }
+    const rotRad = getRadianAngle(rotation);
+    const { width: boundingBoxWidth, height: boundingBoxHeight } = rotateSize(image.width, image.height, rotation);
+    canvas.width = boundingBoxWidth;
+    canvas.height = boundingBoxHeight;
+    ctx.translate(boundingBoxWidth / 2, boundingBoxHeight / 2);
+    ctx.rotate(rotRad);
+    ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
+    ctx.translate(-image.width / 2, -image.height / 2);
+    ctx.drawImage(image, 0, 0);
+    const croppedCanvas = document.createElement("canvas");
+    const croppedCtx = croppedCanvas.getContext("2d");
+    if (!croppedCtx) {
+      return null;
+    }
+    croppedCanvas.width = pixelCrop.width;
+    croppedCanvas.height = pixelCrop.height;
+    croppedCtx.drawImage(
+      canvas,
+      pixelCrop.x,
+      pixelCrop.y,
+      pixelCrop.width,
+      pixelCrop.height,
+      0,
+      0,
+      pixelCrop.width,
+      pixelCrop.height
+    );
+    return new Promise((resolve) => {
+      croppedCanvas.toBlob((file) => {
+        if (file) {
+          resolve(URL.createObjectURL(file));
+        }
+      }, "image/jpeg");
+    });
+  } catch {
+    return null;
+  }
+}
+export {
+  createImage,
+  getCroppedImage,
+  getRadianAngle,
+  normalizeRotation,
+  rotateSize
+};
+//# sourceMappingURL=utils.js.map

package/build-module/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utils.ts"],
+  "sourcesContent": ["/**\n * Normalizes a rotation value to be within the range of 0-360 degrees.\n * So a rotation of -90 becomes 270, -45 becomes 315, etc.\n * This is required because the `/media/edit` calculates the rotation value\n * by subtracting the rotation value from 0. ImageMagick rotates clockwise only and will subtract the rotation value from 360.\n * It's utterly confusing, and probably in need of a refactor.\n *\n * @param {number} rotation - The rotation value to normalize.\n * @return {number} The normalized rotation value.\n */\nexport const normalizeRotation = ( rotation: number ) => {\n\tif ( rotation >= 0 ) {\n\t\treturn rotation % 360;\n\t}\n\n\t// For negative rotations, convert to positive clockwise equivalent\n\treturn ( 360 + ( rotation % 360 ) ) % 360;\n};\n\n/**\n * Creates an image from a URL.\n *\n * @param {string} url - The URL of the image to create.\n * @return {Promise<HTMLImageElement>} A promise that resolves to the image.\n */\nexport const createImage = ( url: string ) =>\n\tnew Promise( ( resolve, reject ) => {\n\t\tconst image = new Image();\n\t\timage.addEventListener( 'load', () => resolve( image ) );\n\t\timage.addEventListener( 'error', ( error ) => reject( error ) );\n\t\timage.setAttribute( 'crossOrigin', 'anonymous' );\n\t\timage.src = url;\n\t} );\n\n/**\n * Converts a degree value to a radian value.\n *\n * @param {number} degreeValue - The degree value to convert.\n * @return {number} The radian value.\n */\nexport function getRadianAngle( degreeValue: number ) {\n\treturn ( degreeValue * Math.PI ) / 180;\n}\n\n/**\n * Returns the new bounding area of a rotated rectangle.\n *\n * @param {number} width    - The width of the rectangle.\n * @param {number} height   - The height of the rectangle.\n * @param {number} rotation - The rotation of the rectangle.\n * @return {Object} The new bounding area of the rotated rectangle.\n */\nexport function rotateSize( width: number, height: number, rotation: number ) {\n\tconst rotRad = getRadianAngle( rotation );\n\n\treturn {\n\t\twidth:\n\t\t\tMath.abs( Math.cos( rotRad ) * width ) +\n\t\t\tMath.abs( Math.sin( rotRad ) * height ),\n\t\theight:\n\t\t\tMath.abs( Math.sin( rotRad ) * width ) +\n\t\t\tMath.abs( Math.cos( rotRad ) * height ),\n\t};\n}\n\n/**\n * Crops an image to a given area.\n *\n * @param {string} imageSrc         - The source of the image to crop.\n * @param {Object} pixelCrop        - The area to crop.\n * @param          pixelCrop.x\n * @param          pixelCrop.y\n * @param          pixelCrop.width\n * @param          pixelCrop.height\n * @param {number} rotation         - The rotation of the image.\n * @param {Object} flip             - The flip of the image.\n * @return {Promise<string | null>} A promise that resolves to the cropped image.\n */\nexport async function getCroppedImage(\n\timageSrc: string,\n\tpixelCrop: { x: number; y: number; width: number; height: number },\n\trotation = 0,\n\tflip = { horizontal: false, vertical: false }\n): Promise< string | null > {\n\ttry {\n\t\tconst image = ( await createImage( imageSrc ) ) as HTMLImageElement;\n\t\tconst canvas = document.createElement( 'canvas' );\n\t\tconst ctx = canvas.getContext( '2d' );\n\n\t\tif ( ! ctx ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Calculate the rotation angle in radians.\n\t\tconst rotRad = getRadianAngle( rotation );\n\n\t\tconst { width: boundingBoxWidth, height: boundingBoxHeight } =\n\t\t\trotateSize( image.width, image.height, rotation );\n\n\t\t// Set canvas size to match the bounding box.\n\t\tcanvas.width = boundingBoxWidth;\n\t\tcanvas.height = boundingBoxHeight;\n\n\t\t// Translate and draw canvas context to a central location to allow rotating and flipping around the center.\n\t\tctx.translate( boundingBoxWidth / 2, boundingBoxHeight / 2 );\n\t\tctx.rotate( rotRad );\n\t\tctx.scale( flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1 );\n\t\tctx.translate( -image.width / 2, -image.height / 2 );\n\t\tctx.drawImage( image, 0, 0 );\n\n\t\tconst croppedCanvas = document.createElement( 'canvas' );\n\t\tconst croppedCtx = croppedCanvas.getContext( '2d' );\n\n\t\tif ( ! croppedCtx ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Set the size of the cropped canvas.\n\t\tcroppedCanvas.width = pixelCrop.width;\n\t\tcroppedCanvas.height = pixelCrop.height;\n\n\t\t// Draw the cropped image onto the new canvas.\n\t\tcroppedCtx.drawImage(\n\t\t\tcanvas,\n\t\t\tpixelCrop.x,\n\t\t\tpixelCrop.y,\n\t\t\tpixelCrop.width,\n\t\t\tpixelCrop.height,\n\t\t\t0,\n\t\t\t0,\n\t\t\tpixelCrop.width,\n\t\t\tpixelCrop.height\n\t\t);\n\n\t\t// Return as a blob.\n\t\treturn new Promise( ( resolve ) => {\n\t\t\tcroppedCanvas.toBlob( ( file ) => {\n\t\t\t\tif ( file ) {\n\t\t\t\t\tresolve( URL.createObjectURL( file ) );\n\t\t\t\t}\n\t\t\t}, 'image/jpeg' );\n\t\t} );\n\t} catch {\n\t\treturn null;\n\t}\n}\n"],
+  "mappings": ";AAUO,IAAM,oBAAoB,CAAE,aAAsB;AACxD,MAAK,YAAY,GAAI;AACpB,WAAO,WAAW;AAAA,EACnB;AAGA,UAAS,MAAQ,WAAW,OAAU;AACvC;AAQO,IAAM,cAAc,CAAE,QAC5B,IAAI,QAAS,CAAE,SAAS,WAAY;AACnC,QAAM,QAAQ,IAAI,MAAM;AACxB,QAAM,iBAAkB,QAAQ,MAAM,QAAS,KAAM,CAAE;AACvD,QAAM,iBAAkB,SAAS,CAAE,UAAW,OAAQ,KAAM,CAAE;AAC9D,QAAM,aAAc,eAAe,WAAY;AAC/C,QAAM,MAAM;AACb,CAAE;AAQI,SAAS,eAAgB,aAAsB;AACrD,SAAS,cAAc,KAAK,KAAO;AACpC;AAUO,SAAS,WAAY,OAAe,QAAgB,UAAmB;AAC7E,QAAM,SAAS,eAAgB,QAAS;AAExC,SAAO;AAAA,IACN,OACC,KAAK,IAAK,KAAK,IAAK,MAAO,IAAI,KAAM,IACrC,KAAK,IAAK,KAAK,IAAK,MAAO,IAAI,MAAO;AAAA,IACvC,QACC,KAAK,IAAK,KAAK,IAAK,MAAO,IAAI,KAAM,IACrC,KAAK,IAAK,KAAK,IAAK,MAAO,IAAI,MAAO;AAAA,EACxC;AACD;AAeA,eAAsB,gBACrB,UACA,WACA,WAAW,GACX,OAAO,EAAE,YAAY,OAAO,UAAU,MAAM,GACjB;AAC3B,MAAI;AACH,UAAM,QAAU,MAAM,YAAa,QAAS;AAC5C,UAAM,SAAS,SAAS,cAAe,QAAS;AAChD,UAAM,MAAM,OAAO,WAAY,IAAK;AAEpC,QAAK,CAAE,KAAM;AACZ,aAAO;AAAA,IACR;AAGA,UAAM,SAAS,eAAgB,QAAS;AAExC,UAAM,EAAE,OAAO,kBAAkB,QAAQ,kBAAkB,IAC1D,WAAY,MAAM,OAAO,MAAM,QAAQ,QAAS;AAGjD,WAAO,QAAQ;AACf,WAAO,SAAS;AAGhB,QAAI,UAAW,mBAAmB,GAAG,oBAAoB,CAAE;AAC3D,QAAI,OAAQ,MAAO;AACnB,QAAI,MAAO,KAAK,aAAa,KAAK,GAAG,KAAK,WAAW,KAAK,CAAE;AAC5D,QAAI,UAAW,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,SAAS,CAAE;AACnD,QAAI,UAAW,OAAO,GAAG,CAAE;AAE3B,UAAM,gBAAgB,SAAS,cAAe,QAAS;AACvD,UAAM,aAAa,cAAc,WAAY,IAAK;AAElD,QAAK,CAAE,YAAa;AACnB,aAAO;AAAA,IACR;AAGA,kBAAc,QAAQ,UAAU;AAChC,kBAAc,SAAS,UAAU;AAGjC,eAAW;AAAA,MACV;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,IACX;AAGA,WAAO,IAAI,QAAS,CAAE,YAAa;AAClC,oBAAc,OAAQ,CAAE,SAAU;AACjC,YAAK,MAAO;AACX,kBAAS,IAAI,gBAAiB,IAAK,CAAE;AAAA,QACtC;AAAA,MACD,GAAG,YAAa;AAAA,IACjB,CAAE;AAAA,EACH,QAAQ;AACP,WAAO;AAAA,EACR;AACD;",
+  "names": []
+}

package/build-types/components/image-cropper/index.d.ts

@@ -0,0 +1,3 @@
+import type { ImageCropperProps } from '../../types';
+export default function ImageCropper({ src, onLoad, minZoom, maxZoom, ...props }: ImageCropperProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/image-cropper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image-cropper/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAQ,iBAAiB,EAAoB,MAAM,aAAa,CAAC;AAG7E,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,GAAG,EACH,MAAM,EACN,OAAkB,EAClB,OAAkB,EAClB,GAAG,KAAK,EACR,EAAE,iBAAiB,+BA4DnB"}

package/build-types/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MIN_ZOOM = 1;
+export declare const MAX_ZOOM = 5;
+export declare const DEFAULT_ASPECT_RATIO_SLUG = "original";
+//# sourceMappingURL=constants.d.ts.map

package/build-types/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,yBAAyB,aAAa,CAAC"}

package/build-types/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ImageCropper } from './components/image-cropper';
+export { useImageCropper, default as ImageCropperProvider } from './provider';
+export * from './types';
+export { normalizeRotation } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAC9E,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/build-types/provider/index.d.ts

@@ -0,0 +1,7 @@
+import type { ImageCropperContextValue } from '../types';
+export declare const ImageCropperContext: import("react").Context<ImageCropperContextValue>;
+export default function ImageCropperProvider({ children, }: {
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare const useImageCropper: () => ImageCropperContextValue;
+//# sourceMappingURL=index.d.ts.map

package/build-types/provider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAGzD,eAAO,MAAM,mBAAmB,mDAiB7B,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAE,EAC7C,QAAQ,GACR,EAAE;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,+BAaA;AAED,eAAO,MAAM,eAAe,gCAM3B,CAAC"}

package/build-types/provider/use-image-cropper.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import type { ImageCropperState, CropperState } from '../types';
+export declare const DEFAULT_INITIAL_STATE: Required<ImageCropperState>;
+export default function useCropper(): {
+    cropperState: CropperState;
+    setCropperState: (newState: Partial<CropperState> | ((prev: CropperState) => Partial<CropperState>)) => void;
+    resetState: ImageCropperState | null;
+    setResetState: (newResetState?: Partial<ImageCropperState> | null) => void;
+    isDirty: boolean;
+    reset: () => void;
+    getCroppedImage: (src: string) => Promise<string | null>;
+};
+//# sourceMappingURL=use-image-cropper.d.ts.map

package/build-types/provider/use-image-cropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-cropper.d.ts","sourceRoot":"","sources":["../../src/provider/use-image-cropper.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,KAAK,EAAS,iBAAiB,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAOvE,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAE,iBAAiB,CAc9D,CAAC;AAkBF,MAAM,CAAC,OAAO,UAAU,UAAU;;gCAW5B,OAAO,CAAE,YAAY,CAAE,GACvB,CAAE,CAAE,IAAI,EAAE,YAAY,KAAM,OAAO,CAAE,YAAY,CAAE,CAAE;;oCA0BxC,OAAO,CAAE,iBAAiB,CAAE,GAAG,IAAI;;;2BA2FvC,MAAM;EAsCpB"}

package/build-types/stories/index.story.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import ImageCropper from '../components/image-cropper';
+import type { ImageCropperProps } from '../types';
+import './style.css';
+declare const _default: {
+    title: string;
+    component: typeof ImageCropper;
+};
+export default _default;
+export declare const Default: {
+    render: (args: ImageCropperProps) => import("react").JSX.Element;
+    args: {
+        src: string;
+        minZoom: number;
+        maxZoom: number;
+    };
+};
+export declare const WithControls: {
+    render: (args: ImageCropperProps) => import("react").JSX.Element;
+    args: {
+        src: string;
+        minZoom: number;
+        maxZoom: number;
+    };
+};
+//# sourceMappingURL=index.story.d.ts.map

package/build-types/stories/index.story.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../src/stories/index.story.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,UAAU,CAAC;AAE7D,OAAO,aAAa,CAAC;;;;;AAErB,wBAGE;AAcF,eAAO,MAAM,OAAO;mBAZa,iBAAiB;;;;;;CAmBjD,CAAC;AAmLF,eAAO,MAAM,YAAY;mBAjLa,iBAAiB;;;;;;CAwLtD,CAAC"}

package/build-types/types.d.ts

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import type { Point, Area, MediaSize } from 'react-easy-crop';
+export type { Point, Area, MediaSize };
+export type Flip = {
+    horizontal: boolean;
+    vertical: boolean;
+};
+export interface ImageCropperState {
+    rotation?: number;
+    crop?: Area;
+    zoom?: number;
+    flip?: Flip;
+    aspectRatio?: number;
+}
+export interface CropperState {
+    crop: Point;
+    croppedArea?: Area;
+    croppedAreaPixels?: Area | null;
+    zoom: number;
+    rotation: number;
+    flip: Flip;
+    aspectRatio: number;
+    mediaSize: MediaSize | null;
+}
+export interface ImageCropperProps {
+    src: string;
+    onLoad?: (mediaSize: MediaSize) => void;
+    minZoom?: number;
+    maxZoom?: number;
+}
+export interface ImageCropperContextValue {
+    cropperState: CropperState;
+    setCropperState: (newState: Partial<CropperState> | ((prev: CropperState) => Partial<CropperState>)) => void;
+    resetState: ImageCropperState | null;
+    setResetState: (newResetState: Partial<ImageCropperState> | null) => void;
+    isDirty: boolean;
+    reset: () => void;
+    getCroppedImage: (src: string) => Promise<string | null>;
+}
+//# sourceMappingURL=types.d.ts.map

package/build-types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG9D,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAEvC,MAAM,MAAM,IAAI,GAAG;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC5B,IAAI,EAAE,KAAK,CAAC;IACZ,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,iBAAiB,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAiB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAE,SAAS,EAAE,SAAS,KAAM,IAAI,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACxC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,CAChB,QAAQ,EACL,OAAO,CAAE,YAAY,CAAE,GACvB,CAAE,CAAE,IAAI,EAAE,YAAY,KAAM,OAAO,CAAE,YAAY,CAAE,CAAE,KACpD,IAAI,CAAC;IACV,UAAU,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACrC,aAAa,EAAE,CACd,aAAa,EAAE,OAAO,CAAE,iBAAiB,CAAE,GAAG,IAAI,KAC9C,IAAI,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,eAAe,EAAE,CAAE,GAAG,EAAE,MAAM,KAAM,OAAO,CAAE,MAAM,GAAG,IAAI,CAAE,CAAC;CAC7D"}

package/build-types/utils.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Normalizes a rotation value to be within the range of 0-360 degrees.
+ * So a rotation of -90 becomes 270, -45 becomes 315, etc.
+ * This is required because the `/media/edit` calculates the rotation value
+ * by subtracting the rotation value from 0. ImageMagick rotates clockwise only and will subtract the rotation value from 360.
+ * It's utterly confusing, and probably in need of a refactor.
+ *
+ * @param {number} rotation - The rotation value to normalize.
+ * @return {number} The normalized rotation value.
+ */
+export declare const normalizeRotation: (rotation: number) => number;
+/**
+ * Creates an image from a URL.
+ *
+ * @param {string} url - The URL of the image to create.
+ * @return {Promise<HTMLImageElement>} A promise that resolves to the image.
+ */
+export declare const createImage: (url: string) => Promise<unknown>;
+/**
+ * Converts a degree value to a radian value.
+ *
+ * @param {number} degreeValue - The degree value to convert.
+ * @return {number} The radian value.
+ */
+export declare function getRadianAngle(degreeValue: number): number;
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ *
+ * @param {number} width    - The width of the rectangle.
+ * @param {number} height   - The height of the rectangle.
+ * @param {number} rotation - The rotation of the rectangle.
+ * @return {Object} The new bounding area of the rotated rectangle.
+ */
+export declare function rotateSize(width: number, height: number, rotation: number): {
+    width: number;
+    height: number;
+};
+/**
+ * Crops an image to a given area.
+ *
+ * @param {string} imageSrc         - The source of the image to crop.
+ * @param {Object} pixelCrop        - The area to crop.
+ * @param          pixelCrop.x
+ * @param          pixelCrop.y
+ * @param          pixelCrop.width
+ * @param          pixelCrop.height
+ * @param {number} rotation         - The rotation of the image.
+ * @param {Object} flip             - The flip of the image.
+ * @return {Promise<string | null>} A promise that resolves to the cropped image.
+ */
+export declare function getCroppedImage(imageSrc: string, pixelCrop: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, rotation?: number, flip?: {
+    horizontal: boolean;
+    vertical: boolean;
+}): Promise<string | null>;
+//# sourceMappingURL=utils.d.ts.map

package/build-types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,GAAK,UAAU,MAAM,WAOlD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAK,KAAK,MAAM,qBAOpC,CAAC;AAEL;;;;;GAKG;AACH,wBAAgB,cAAc,CAAE,WAAW,EAAE,MAAM,UAElD;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;;;EAW1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAsB,eAAe,CACpC,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAClE,QAAQ,SAAI,EACZ,IAAI;;;CAAyC,GAC3C,OAAO,CAAE,MAAM,GAAG,IAAI,CAAE,CA8D1B"}

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@wordpress/image-cropper",
+	"version": "1.0.1-next.6deb34194.0",
+	"description": "A basic image cropper component.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"image cropper",
+		"cropper"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/image-cropper/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/image-cropper"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"types": "./build-types/index.d.ts",
+			"import": "./build-module/index.js",
+			"require": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"react-native": "src/index",
+	"types": "build-types",
+	"sideEffects": false,
+	"dependencies": {
+		"@wordpress/element": "^6.36.1-next.6deb34194.0",
+		"clsx": "^2.1.1",
+		"dequal": "^2.0.3",
+		"react-easy-crop": "^5.4.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
+}

package/src/components/image-cropper/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import Cropper from 'react-easy-crop';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useImageCropper } from '../../provider';
+import type { Area, ImageCropperProps, MediaSize, Point } from '../../types';
+import { MIN_ZOOM, MAX_ZOOM } from '../../constants';
+
+export default function ImageCropper( {
+	src,
+	onLoad,
+	minZoom = MIN_ZOOM,
+	maxZoom = MAX_ZOOM,
+	...props
+}: ImageCropperProps ) {
+	const { cropperState, setCropperState } = useImageCropper();
+	const { crop, zoom, rotation, aspectRatio, flip } = cropperState;
+
+	const setCrop = ( newCrop: Point ) => setCropperState( { crop: newCrop } );
+	const setZoom = ( newZoom: number ) => setCropperState( { zoom: newZoom } );
+	const setRotation = ( newRotation: number ) =>
+		setCropperState( { rotation: newRotation } );
+	const setMediaSize = ( newMediaSize: MediaSize ) =>
+		setCropperState( { mediaSize: newMediaSize } );
+
+	/**
+	 * Handles the crop complete event, when a user stops interacting with the cropper.
+	 * Updates the cropped area in percentages and pixels.
+	 *
+	 * @param {Area} areaPercentage - The area percentage.
+	 * @param {Area} areaPixels     - The area pixels.
+	 */
+	const onCropComplete = useCallback(
+		( areaPercentage: Area, areaPixels: Area ) => {
+			setCropperState( {
+				croppedArea: areaPercentage,
+				croppedAreaPixels: areaPixels,
+			} );
+		},
+		[ setCropperState ]
+	);
+
+	return (
+		<Cropper
+			classes={ {
+				containerClassName: 'image-cropper__container',
+				cropAreaClassName: 'image-cropper__crop-area',
+				mediaClassName: 'image-cropper__image',
+			} }
+			minZoom={ minZoom }
+			maxZoom={ maxZoom }
+			rotation={ rotation }
+			image={ src }
+			setMediaSize={ setMediaSize }
+			crop={ crop }
+			zoom={ zoom }
+			aspect={ aspectRatio }
+			onCropChange={ setCrop }
+			onZoomChange={ setZoom }
+			onCropComplete={ onCropComplete }
+			onMediaLoaded={ ( loadedMediaSize: MediaSize ) => {
+				onLoad?.( loadedMediaSize );
+			} }
+			onRotationChange={ setRotation }
+			transform={ [
+				`translate(${ crop.x }px, ${ crop.y }px)`,
+				`rotateZ(${ rotation }deg)`,
+				`rotateY(${ flip.horizontal ? 180 : 0 }deg)`,
+				`rotateX(${ flip.vertical ? 180 : 0 }deg)`,
+				`scale(${ zoom })`,
+			].join( ' ' ) }
+			{ ...props }
+		/>
+	);
+}

package/src/constants.ts

@@ -0,0 +1,3 @@
+export const MIN_ZOOM = 1;
+export const MAX_ZOOM = 5;
+export const DEFAULT_ASPECT_RATIO_SLUG = 'original';

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as ImageCropper } from './components/image-cropper';
+export { useImageCropper, default as ImageCropperProvider } from './provider';
+export * from './types';
+export { normalizeRotation } from './utils';