refactor(image-cropper-web): resolve zoom updater in store

Move the SetStateAction resolution out of the container and into
ImageCropperStore.setZoom, which now accepts a value or updater and
resolves the functional form against its own zoom. The container drops
to setZoom={next => store.setZoom(next)}, making the store the single
owner of current zoom. The functional-updater contract stays on the
CropArea/ZoomContainer props (the wheel-zoom hook drives setZoom(prev
=> …) and the editor preview passes a no-op). Behavior unchanged.

Also sync the image-cropper openspec: the "No image available"
scenario now reflects the editable noImageCaption empty-state text.

Author: rahmanunver

packages/pluggableWidgets/image-cropper-web/openspec/specs/image-cropper/spec.md

@@ -25,7 +25,7 @@ same attribute via `setValue`.
 #### Scenario: No image available
 
 - **WHEN** the bound image status is not `Available` or has no value
-- **THEN** the widget SHALL render an empty state reading "No image"
+- **THEN** the widget SHALL render an empty state showing the configurable `noImageCaption` (default "No uploaded image to crop")
 
 #### Scenario: Read-only attribute
 

packages/pluggableWidgets/image-cropper-web/src/components/ImageCropperContainer.tsx

@@ -93,7 +93,7 @@ export const ImageCropperContainer = observer(function ImageCropperContainer(
                 zoom={store.zoom}
                 minZoom={Number(props.minZoom)}
                 maxZoom={Number(props.maxZoom)}
-                setZoom={next => store.setZoom(typeof next === "function" ? next(store.zoom) : next)}
+                setZoom={next => store.setZoom(next)}
                 zoomAnchor={store.zoomAnchor}
                 wheelZoomMode={props.zoomEnabled ? props.wheelZoomMode : "off"}
                 grayscale={store.grayscale}

packages/pluggableWidgets/image-cropper-web/src/stores/ImageCropperStore.ts

@@ -1,5 +1,6 @@
 import { ValueStatus } from "mendix";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
+import { type SetStateAction } from "react";
 import { type Crop, type PixelCrop } from "react-image-crop";
 import { DerivedPropsGate, SetupComponent } from "@mendix/widget-plugin-mobx-kit/main";
 import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
@@ -261,14 +262,18 @@ export class ImageCropperStore implements SetupComponent {
         }
     }
 
-    setZoom(next: number): void {
+    setZoom(next: SetStateAction<number>): void {
+        // Accept the React setState contract (value or updater). The wheel-zoom hook drives
+        // zoom with setZoom(prev => …), so the store — the owner of `zoom` — resolves the
+        // updater against its own value instead of leaking that into the container.
+        const value = typeof next === "function" ? next(this.zoom) : next;
         // Freeze the anchor at the current box center. Recomputing it only here (not while the
         // box moves) keeps the image stable during drags but still zooms into the box.
         const live = this.liveCrop;
         if (live && live.unit === "%") {
             this.zoomAnchor = { x: (live.x + live.width / 2) / 100, y: (live.y + live.height / 2) / 100 };
         }
-        this.zoom = next;
+        this.zoom = value;
         this.applyDebounced();
     }