@ai-matrx/capture 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @ai-matrx/capture
 
+## 0.5.3 — 2026-09-01
+
+- `ImageEditSheet` now keeps Save, crop presets, rotate, and flip unavailable while a newly baked bitmap is decoding, then enables them from the image's real `load` event. A transformed image can no longer hit the zero-dimension silent-return race and leave the editor stuck with no persistence or error.
+- Rotate and flip now bake the active crop selection into their output instead of discarding it. Exact fail-first coverage proves Square crop → Rotate → newly loaded bitmap → Save emits one edited blob.
+
 ## 0.5.2 — 2026-09-01
 
 - `CameraCapture` no longer wraps the injected recents thumbnail in its Open-library button. Persisted-media error fallbacks may own remedy buttons (for example, Copy URL); those controls now remain valid siblings, act without also opening the library, and the non-interactive thumbnail area still opens the library.

package/dist/react.cjs

@@ -1230,6 +1230,8 @@ function ImageEditSheet({
   const [workingSrc, setWorkingSrc] = (0, import_react4.useState)(null);
   const [aspect, setAspect] = (0, import_react4.useState)("free");
   const [crop, setCrop] = (0, import_react4.useState)(FULL_CROP);
+  const [imageReady, setImageReady] = (0, import_react4.useState)(false);
+  const [transforming, setTransforming] = (0, import_react4.useState)(false);
   const [saving, setSaving] = (0, import_react4.useState)(false);
   const [editError, setEditError] = (0, import_react4.useState)(null);
   const stageRef = (0, import_react4.useRef)(null);
@@ -1245,6 +1247,8 @@ function ImageEditSheet({
       setWorkingSrc(null);
       setAspect("free");
       setCrop(FULL_CROP);
+      setImageReady(false);
+      setTransforming(false);
       setSaving(false);
       setEditError(null);
     }
@@ -1253,21 +1257,53 @@ function ImageEditSheet({
   const bake = (0, import_react4.useCallback)(
     (op) => {
       const img = imgRef.current;
-      if (!img || img.naturalWidth === 0 || saving) return;
+      if (!img || !imageReady || img.naturalWidth === 0 || saving || transforming) {
+        setEditError("The image is still loading \u2014 wait a moment and try again.");
+        return;
+      }
+      setTransforming(true);
+      setEditError(null);
       try {
+        const sourceX = Math.round(crop.x * img.naturalWidth);
+        const sourceY = Math.round(crop.y * img.naturalHeight);
+        const sourceWidth = Math.max(
+          1,
+          Math.min(
+            img.naturalWidth - sourceX,
+            Math.round(crop.w * img.naturalWidth)
+          )
+        );
+        const sourceHeight = Math.max(
+          1,
+          Math.min(
+            img.naturalHeight - sourceY,
+            Math.round(crop.h * img.naturalHeight)
+          )
+        );
         const swap = op === "rotate-left";
         const canvas = document.createElement("canvas");
-        canvas.width = swap ? img.naturalHeight : img.naturalWidth;
-        canvas.height = swap ? img.naturalWidth : img.naturalHeight;
+        canvas.width = swap ? sourceHeight : sourceWidth;
+        canvas.height = swap ? sourceWidth : sourceHeight;
         const ctx = canvas.getContext("2d");
         if (!ctx) throw new Error("no 2d context");
         ctx.translate(canvas.width / 2, canvas.height / 2);
         if (swap) ctx.rotate(-Math.PI / 2);
         else ctx.scale(-1, 1);
-        ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+        ctx.drawImage(
+          img,
+          sourceX,
+          sourceY,
+          sourceWidth,
+          sourceHeight,
+          -sourceWidth / 2,
+          -sourceHeight / 2,
+          sourceWidth,
+          sourceHeight
+        );
         canvas.toBlob(
           (blob) => {
             if (!blob) {
+              setTransforming(false);
               setEditError(
                 "This image is too large to process on this device."
               );
@@ -1276,26 +1312,32 @@ function ImageEditSheet({
             revokeOwned();
             const url = URL.createObjectURL(blob);
             ownedUrlsRef.current.push(url);
+            setImageReady(false);
             setWorkingSrc(url);
             setCrop(FULL_CROP);
             setAspect("free");
+            setTransforming(false);
             setEditError(null);
           },
           "image/jpeg",
           0.95
         );
       } catch {
+        setTransforming(false);
         setEditError("This image could not be edited on this device.");
       }
     },
-    [saving, revokeOwned]
+    [crop, imageReady, saving, transforming, revokeOwned]
   );
   const applyAspect = (0, import_react4.useCallback)((preset) => {
+    const img = imgRef.current;
+    if (!img || img.naturalWidth === 0) {
+      setEditError("The image is still loading \u2014 wait a moment and try again.");
+      return;
+    }
     setAspect(preset);
     const ratio = ASPECTS.find((a) => a.id === preset)?.ratio ?? null;
     if (ratio === null) return;
-    const img = imgRef.current;
-    if (!img || img.naturalWidth === 0) return;
     const imageRatio = img.naturalWidth / img.naturalHeight;
     let w = 1;
     let h = 1;
@@ -1360,7 +1402,10 @@ function ImageEditSheet({
   }, []);
   const save = (0, import_react4.useCallback)(() => {
     const img = imgRef.current;
-    if (!img || img.naturalWidth === 0) return;
+    if (!img || !imageReady || img.naturalWidth === 0) {
+      setEditError("The image is still loading \u2014 wait a moment and try again.");
+      return;
+    }
     setSaving(true);
     setEditError(null);
     try {
@@ -1390,7 +1435,7 @@ function ImageEditSheet({
       setSaving(false);
       setEditError("Saving failed on this device \u2014 try again.");
     }
-  }, [crop, onSave, onClose]);
+  }, [crop, imageReady, onSave, onClose]);
   if (!open || !src) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute inset-0 z-50 flex flex-col bg-black", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -1418,12 +1463,13 @@ function ImageEditSheet({
             {
               type: "button",
               onClick: save,
-              disabled: saving,
+              disabled: saving || transforming || !imageReady,
               "aria-label": "Save edited image",
+              "aria-busy": saving || transforming || !imageReady,
               className: "flex h-11 items-center gap-1.5 rounded-full px-3 text-[15px] font-semibold text-[#FFCC00] disabled:opacity-50",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckIcon, { className: "h-5 w-5" }),
-                "Save"
+                saving ? "Saving\u2026" : transforming || !imageReady ? "Loading\u2026" : "Save"
               ]
             }
           )
@@ -1446,6 +1492,12 @@ function ImageEditSheet({
               src: workingSrc ?? src,
               alt: "Image being edited",
               draggable: false,
+              onLoad: () => setImageReady(true),
+              onError: () => {
+                setImageReady(false);
+                setTransforming(false);
+                setEditError("This image could not be loaded on this device.");
+              },
               className: "max-h-[62dvh] max-w-full select-none object-contain"
             }
           ),
@@ -1489,6 +1541,7 @@ function ImageEditSheet({
         {
           type: "button",
           onClick: () => applyAspect(a.id),
+          disabled: saving || transforming || !imageReady,
           "aria-pressed": aspect === a.id,
           className: cn(
             "touch-manipulation rounded-full px-3.5 py-1.5 text-[12px] font-semibold uppercase tracking-wide transition-colors",
@@ -1504,6 +1557,7 @@ function ImageEditSheet({
           {
             type: "button",
             onClick: () => bake("rotate-left"),
+            disabled: saving || transforming || !imageReady,
             "aria-label": "Rotate left",
             className: "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10 text-white",
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RotateCcwIcon, { className: "h-5 w-5" })
@@ -1514,6 +1568,7 @@ function ImageEditSheet({
           {
             type: "button",
             onClick: () => bake("flip"),
+            disabled: saving || transforming || !imageReady,
             "aria-label": "Flip horizontally",
             className: "flex h-12 w-12 touch-manipulation items-center justify-center rounded-full bg-white/10 text-white",
             children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FlipHorizontal2Icon, { className: "h-5 w-5" })