@wordpress/block-editor 15.9.1-next.6deb34194.0 → 15.9.1-next.738bb1424.0

package/build/components/iframe/use-scale-canvas.cjs

@@ -0,0 +1,292 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/iframe/use-scale-canvas.js
+var use_scale_canvas_exports = {};
+__export(use_scale_canvas_exports, {
+  useScaleCanvas: () => useScaleCanvas
+});
+module.exports = __toCommonJS(use_scale_canvas_exports);
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+function calculateScale({
+  frameSize,
+  containerWidth,
+  maxContainerWidth,
+  scaleContainerWidth
+}) {
+  return (Math.min(containerWidth, maxContainerWidth) - frameSize * 2) / scaleContainerWidth;
+}
+function computeScrollHeightNext(transitionFrom, transitionTo) {
+  const { scaleValue: prevScale, scrollHeight: prevScrollHeight } = transitionFrom;
+  const { frameSize, scaleValue } = transitionTo;
+  return prevScrollHeight * (scaleValue / prevScale) + frameSize * 2;
+}
+function computeScrollTopNext(transitionFrom, transitionTo) {
+  const {
+    containerHeight: prevContainerHeight,
+    frameSize: prevFrameSize,
+    scaleValue: prevScale,
+    scrollTop: prevScrollTop
+  } = transitionFrom;
+  const { containerHeight, frameSize, scaleValue, scrollHeight } = transitionTo;
+  let scrollTopNext = prevScrollTop;
+  scrollTopNext = (scrollTopNext + prevContainerHeight / 2 - prevFrameSize) / prevScale - prevContainerHeight / 2;
+  scrollTopNext = (scrollTopNext + containerHeight / 2) * scaleValue + frameSize - containerHeight / 2;
+  scrollTopNext = prevScrollTop <= prevFrameSize ? 0 : scrollTopNext;
+  const maxScrollTop = scrollHeight - containerHeight;
+  return Math.round(
+    Math.min(Math.max(0, scrollTopNext), Math.max(0, maxScrollTop))
+  );
+}
+function getAnimationKeyframes(transitionFrom, transitionTo) {
+  const {
+    scaleValue: prevScale,
+    frameSize: prevFrameSize,
+    scrollTop
+  } = transitionFrom;
+  const { scaleValue, frameSize, scrollTop: scrollTopNext } = transitionTo;
+  return [
+    {
+      translate: `0 0`,
+      scale: prevScale,
+      paddingTop: `${prevFrameSize / prevScale}px`,
+      paddingBottom: `${prevFrameSize / prevScale}px`
+    },
+    {
+      translate: `0 ${scrollTop - scrollTopNext}px`,
+      scale: scaleValue,
+      paddingTop: `${frameSize / scaleValue}px`,
+      paddingBottom: `${frameSize / scaleValue}px`
+    }
+  ];
+}
+function useScaleCanvas({
+  frameSize,
+  iframeDocument,
+  maxContainerWidth = 750,
+  scale
+}) {
+  const [contentResizeListener, { height: contentHeight }] = (0, import_compose.useResizeObserver)();
+  const [
+    containerResizeListener,
+    { width: containerWidth, height: containerHeight }
+  ] = (0, import_compose.useResizeObserver)();
+  const initialContainerWidthRef = (0, import_element.useRef)(0);
+  const isZoomedOut = scale !== 1;
+  const prefersReducedMotion = (0, import_compose.useReducedMotion)();
+  const isAutoScaled = scale === "auto-scaled";
+  const startAnimationRef = (0, import_element.useRef)(false);
+  const animationRef = (0, import_element.useRef)(null);
+  (0, import_element.useEffect)(() => {
+    if (!isZoomedOut) {
+      initialContainerWidthRef.current = containerWidth;
+    }
+  }, [containerWidth, isZoomedOut]);
+  const scaleContainerWidth = Math.max(
+    initialContainerWidthRef.current,
+    containerWidth
+  );
+  const scaleValue = isAutoScaled ? calculateScale({
+    frameSize,
+    containerWidth,
+    maxContainerWidth,
+    scaleContainerWidth
+  }) : scale;
+  const transitionFromRef = (0, import_element.useRef)({
+    scaleValue,
+    frameSize,
+    containerHeight: 0,
+    scrollTop: 0,
+    scrollHeight: 0
+  });
+  const transitionToRef = (0, import_element.useRef)({
+    scaleValue,
+    frameSize,
+    containerHeight: 0,
+    scrollTop: 0,
+    scrollHeight: 0
+  });
+  const startZoomOutAnimation = (0, import_element.useCallback)(() => {
+    const { scrollTop } = transitionFromRef.current;
+    const { scrollTop: scrollTopNext } = transitionToRef.current;
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top",
+      `${scrollTop}px`
+    );
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top-next",
+      `${scrollTopNext}px`
+    );
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-overflow-behavior",
+      transitionFromRef.current.scrollHeight === transitionFromRef.current.containerHeight ? "auto" : "scroll"
+    );
+    iframeDocument.documentElement.classList.add("zoom-out-animation");
+    return iframeDocument.documentElement.animate(
+      getAnimationKeyframes(
+        transitionFromRef.current,
+        transitionToRef.current
+      ),
+      {
+        easing: "cubic-bezier(0.46, 0.03, 0.52, 0.96)",
+        duration: 400
+      }
+    );
+  }, [iframeDocument]);
+  const finishZoomOutAnimation = (0, import_element.useCallback)(() => {
+    startAnimationRef.current = false;
+    animationRef.current = null;
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-scale",
+      transitionToRef.current.scaleValue
+    );
+    iframeDocument.documentElement.style.setProperty(
+      "--wp-block-editor-iframe-zoom-out-frame-size",
+      `${transitionToRef.current.frameSize}px`
+    );
+    iframeDocument.documentElement.classList.remove("zoom-out-animation");
+    iframeDocument.documentElement.scrollTop = transitionToRef.current.scrollTop;
+    iframeDocument.documentElement.style.removeProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top"
+    );
+    iframeDocument.documentElement.style.removeProperty(
+      "--wp-block-editor-iframe-zoom-out-scroll-top-next"
+    );
+    iframeDocument.documentElement.style.removeProperty(
+      "--wp-block-editor-iframe-zoom-out-overflow-behavior"
+    );
+    transitionFromRef.current = transitionToRef.current;
+  }, [iframeDocument]);
+  const previousIsZoomedOut = (0, import_element.useRef)(false);
+  (0, import_element.useEffect)(() => {
+    const trigger = iframeDocument && previousIsZoomedOut.current !== isZoomedOut;
+    previousIsZoomedOut.current = isZoomedOut;
+    if (!trigger) {
+      return;
+    }
+    startAnimationRef.current = true;
+    if (!isZoomedOut) {
+      return;
+    }
+    iframeDocument.documentElement.classList.add("is-zoomed-out");
+    return () => {
+      iframeDocument.documentElement.classList.remove("is-zoomed-out");
+    };
+  }, [iframeDocument, isZoomedOut]);
+  (0, import_element.useEffect)(() => {
+    if (!iframeDocument) {
+      return;
+    }
+    if (isAutoScaled && transitionFromRef.current.scaleValue !== 1) {
+      transitionFromRef.current.scaleValue = calculateScale({
+        frameSize: transitionFromRef.current.frameSize,
+        containerWidth,
+        maxContainerWidth,
+        scaleContainerWidth: containerWidth
+      });
+    }
+    if (scaleValue < 1) {
+      if (!startAnimationRef.current) {
+        iframeDocument.documentElement.style.setProperty(
+          "--wp-block-editor-iframe-zoom-out-scale",
+          scaleValue
+        );
+        iframeDocument.documentElement.style.setProperty(
+          "--wp-block-editor-iframe-zoom-out-frame-size",
+          `${frameSize}px`
+        );
+      }
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-content-height",
+        `${contentHeight}px`
+      );
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-inner-height",
+        `${containerHeight}px`
+      );
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-container-width",
+        `${containerWidth}px`
+      );
+      iframeDocument.documentElement.style.setProperty(
+        "--wp-block-editor-iframe-zoom-out-scale-container-width",
+        `${scaleContainerWidth}px`
+      );
+    }
+    if (startAnimationRef.current) {
+      startAnimationRef.current = false;
+      if (animationRef.current) {
+        animationRef.current.reverse();
+        const tempTransitionFrom = transitionFromRef.current;
+        const tempTransitionTo = transitionToRef.current;
+        transitionFromRef.current = tempTransitionTo;
+        transitionToRef.current = tempTransitionFrom;
+      } else {
+        transitionFromRef.current.scrollTop = iframeDocument.documentElement.scrollTop;
+        transitionFromRef.current.scrollHeight = iframeDocument.documentElement.scrollHeight;
+        transitionFromRef.current.containerHeight = containerHeight;
+        transitionToRef.current = {
+          scaleValue,
+          frameSize,
+          containerHeight: iframeDocument.documentElement.clientHeight
+          // use clientHeight to get the actual height of the new container after zoom state changes have rendered, as it will be the most up-to-date.
+        };
+        transitionToRef.current.scrollHeight = computeScrollHeightNext(
+          transitionFromRef.current,
+          transitionToRef.current
+        );
+        transitionToRef.current.scrollTop = computeScrollTopNext(
+          transitionFromRef.current,
+          transitionToRef.current
+        );
+        animationRef.current = startZoomOutAnimation();
+        if (prefersReducedMotion) {
+          finishZoomOutAnimation();
+        } else {
+          animationRef.current.onfinish = finishZoomOutAnimation;
+        }
+      }
+    }
+  }, [
+    startZoomOutAnimation,
+    finishZoomOutAnimation,
+    prefersReducedMotion,
+    isAutoScaled,
+    scaleValue,
+    frameSize,
+    iframeDocument,
+    contentHeight,
+    containerWidth,
+    containerHeight,
+    maxContainerWidth,
+    scaleContainerWidth
+  ]);
+  return {
+    isZoomedOut,
+    scaleContainerWidth,
+    contentResizeListener,
+    containerResizeListener
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScaleCanvas
+});
+//# sourceMappingURL=use-scale-canvas.cjs.map

package/build/components/image-editor/aspect-ratio-dropdown.cjs

@@ -0,0 +1,151 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
+var aspect_ratio_dropdown_exports = {};
+__export(aspect_ratio_dropdown_exports, {
+  default: () => AspectRatioDropdown,
+  ratioToNumber: () => ratioToNumber
+});
+module.exports = __toCommonJS(aspect_ratio_dropdown_exports);
+var import_icons = require("@wordpress/icons");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_use_settings = require("../use-settings/index.cjs");
+var import_constants = require("./constants.cjs");
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AspectRatioGroup({
+  aspectRatios,
+  isDisabled,
+  label,
+  onClick,
+  value
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { label, children: aspectRatios.map(({ name, slug, ratio }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.MenuItem,
+    {
+      disabled: isDisabled,
+      onClick: () => {
+        onClick(ratio);
+      },
+      role: "menuitemradio",
+      isSelected: ratio === value,
+      icon: ratio === value ? import_icons.check : void 0,
+      children: name
+    },
+    slug
+  )) });
+}
+function ratioToNumber(str) {
+  const [a, b, ...rest] = str.split("/").map(Number);
+  if (a <= 0 || b <= 0 || Number.isNaN(a) || Number.isNaN(b) || rest.length) {
+    return NaN;
+  }
+  return b ? a / b : a;
+}
+function presetRatioAsNumber({ ratio, ...rest }) {
+  return {
+    ratio: ratioToNumber(ratio),
+    ...rest
+  };
+}
+function AspectRatioDropdown({ toggleProps }) {
+  const { isInProgress, aspect, setAspect, defaultAspect } = (0, import_context.useImageEditingContext)();
+  const [defaultRatios, themeRatios, showDefaultRatios] = (0, import_use_settings.useSettings)(
+    "dimensions.aspectRatios.default",
+    "dimensions.aspectRatios.theme",
+    "dimensions.defaultAspectRatios"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.DropdownMenu,
+    {
+      icon: import_icons.aspectRatio,
+      label: (0, import_i18n.__)("Aspect Ratio"),
+      popoverProps: import_constants.POPOVER_PROPS,
+      toggleProps,
+      children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          AspectRatioGroup,
+          {
+            isDisabled: isInProgress,
+            onClick: (newAspect) => {
+              setAspect(newAspect);
+              onClose();
+            },
+            value: aspect,
+            aspectRatios: [
+              // All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
+              {
+                slug: "original",
+                name: (0, import_i18n.__)("Original"),
+                ratio: defaultAspect
+              },
+              ...showDefaultRatios ? defaultRatios.map(presetRatioAsNumber).filter(({ ratio }) => ratio === 1) : []
+            ]
+          }
+        ),
+        themeRatios?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          AspectRatioGroup,
+          {
+            label: (0, import_i18n.__)("Theme"),
+            isDisabled: isInProgress,
+            onClick: (newAspect) => {
+              setAspect(newAspect);
+              onClose();
+            },
+            value: aspect,
+            aspectRatios: themeRatios
+          }
+        ),
+        showDefaultRatios && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          AspectRatioGroup,
+          {
+            label: (0, import_i18n.__)("Landscape"),
+            isDisabled: isInProgress,
+            onClick: (newAspect) => {
+              setAspect(newAspect);
+              onClose();
+            },
+            value: aspect,
+            aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({ ratio }) => ratio > 1)
+          }
+        ),
+        showDefaultRatios && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          AspectRatioGroup,
+          {
+            label: (0, import_i18n.__)("Portrait"),
+            isDisabled: isInProgress,
+            onClick: (newAspect) => {
+              setAspect(newAspect);
+              onClose();
+            },
+            value: aspect,
+            aspectRatios: defaultRatios.map(presetRatioAsNumber).filter(({ ratio }) => ratio < 1)
+          }
+        )
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ratioToNumber
+});
+//# sourceMappingURL=aspect-ratio-dropdown.cjs.map

package/build/components/image-editor/constants.cjs

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/image-editor/constants.js
+var constants_exports = {};
+__export(constants_exports, {
+  MAX_ZOOM: () => MAX_ZOOM,
+  MIN_ZOOM: () => MIN_ZOOM,
+  POPOVER_PROPS: () => POPOVER_PROPS
+});
+module.exports = __toCommonJS(constants_exports);
+var MIN_ZOOM = 100;
+var MAX_ZOOM = 300;
+var POPOVER_PROPS = {
+  placement: "bottom-start"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MAX_ZOOM,
+  MIN_ZOOM,
+  POPOVER_PROPS
+});
+//# sourceMappingURL=constants.cjs.map

package/build/components/image-editor/context.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/image-editor/context.js
+var context_exports = {};
+__export(context_exports, {
+  default: () => ImageEditingProvider,
+  useImageEditingContext: () => useImageEditingContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_element = require("@wordpress/element");
+var import_use_save_image = __toESM(require("./use-save-image.cjs"), 1);
+var import_use_transform_image = __toESM(require("./use-transform-image.cjs"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var ImageEditingContext = (0, import_element.createContext)({});
+ImageEditingContext.displayName = "ImageEditingContext";
+var useImageEditingContext = () => (0, import_element.useContext)(ImageEditingContext);
+function ImageEditingProvider({
+  id,
+  url,
+  naturalWidth,
+  naturalHeight,
+  onFinishEditing,
+  onSaveImage,
+  children
+}) {
+  const transformImage = (0, import_use_transform_image.default)({
+    url,
+    naturalWidth,
+    naturalHeight
+  });
+  const saveImage = (0, import_use_save_image.default)({
+    id,
+    url,
+    onSaveImage,
+    onFinishEditing,
+    ...transformImage
+  });
+  const providerValue = (0, import_element.useMemo)(
+    () => ({
+      ...transformImage,
+      ...saveImage
+    }),
+    [transformImage, saveImage]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageEditingContext.Provider, { value: providerValue, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useImageEditingContext
+});
+//# sourceMappingURL=context.cjs.map

package/build/components/image-editor/cropper.cjs

@@ -0,0 +1,82 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/image-editor/cropper.js
+var cropper_exports = {};
+__export(cropper_exports, {
+  default: () => ImageCropper
+});
+module.exports = __toCommonJS(cropper_exports);
+var import_clsx = __toESM(require("clsx"), 1);
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_image_cropper = require("@wordpress/image-cropper");
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ImageCropper({
+  url,
+  width,
+  height,
+  naturalHeight,
+  naturalWidth,
+  borderProps
+}) {
+  const { isInProgress, editedUrl, rotation } = (0, import_context.useImageEditingContext)();
+  const [contentResizeListener, { width: clientWidth }] = (0, import_compose.useResizeObserver)();
+  let editedHeight = height || clientWidth * naturalHeight / naturalWidth;
+  if (rotation % 180 === 90) {
+    editedHeight = clientWidth * naturalWidth / naturalHeight;
+  }
+  const area = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        "wp-block-image__crop-area",
+        borderProps?.className,
+        {
+          "is-applying": isInProgress
+        }
+      ),
+      style: {
+        ...borderProps?.style,
+        width: width || clientWidth,
+        height: editedHeight
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image_cropper.ImageCropper, { src: editedUrl || url }),
+        isInProgress && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    contentResizeListener,
+    area
+  ] });
+}
+//# sourceMappingURL=cropper.cjs.map

package/build/components/image-editor/form-controls.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/image-editor/form-controls.js
+var form_controls_exports = {};
+__export(form_controls_exports, {
+  default: () => FormControls
+});
+module.exports = __toCommonJS(form_controls_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_context = require("./context.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FormControls() {
+  const { isInProgress, apply, cancel } = (0, import_context.useImageEditingContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarButton, { onClick: apply, disabled: isInProgress, children: (0, import_i18n.__)("Apply") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarButton, { onClick: cancel, children: (0, import_i18n.__)("Cancel") })
+  ] });
+}
+//# sourceMappingURL=form-controls.cjs.map