@ai-matrx/capture 0.5.2 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @ai-matrx/capture
 
+## 0.5.4 — 2026-09-01
+
+- Persisted-media editing now has an explicit fresh-byte port (`resolveEditBlob`). The package creates and owns an editor-private object URL instead of reusing a viewer URL that the host byte cache may evict and revoke while the decoded viewer frame remains visible.
+- Both camera chromes revoke the editor-private URL on every close/save/unmount path and surface a visible retry remedy when byte preparation fails. Exact fail-first coverage reproduces a stale viewer URL and proves the editor consumes fresh bytes.
+
+## 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

@@ -727,6 +727,16 @@ function invalidateMedia(key) {
   if (entry?.revoke && entry.url) URL.revokeObjectURL(entry.url);
   notify(key);
 }
+async function prepareMediaForEdit(item) {
+  if (item.resolveEditBlob) {
+    const blob = await item.resolveEditBlob();
+    if (blob.size === 0) throw new Error("media snapshot was empty");
+    return { url: URL.createObjectURL(blob), revoke: true };
+  }
+  const url = item.src ?? getMediaUrl(item);
+  if (!url) throw new Error("media item has no editable source");
+  return { url, revoke: false };
+}
 function useMediaUrl(item) {
   const [, bump] = (0, import_react2.useState)(0);
   const key = item?.key ?? null;
@@ -1230,6 +1240,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 +1257,8 @@ function ImageEditSheet({
       setWorkingSrc(null);
       setAspect("free");
       setCrop(FULL_CROP);
+      setImageReady(false);
+      setTransforming(false);
       setSaving(false);
       setEditError(null);
     }
@@ -1253,21 +1267,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 +1322,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 +1412,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 +1445,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 +1473,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 +1502,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 +1551,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 +1567,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 +1578,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" })
@@ -1549,6 +1614,10 @@ function CameraCapture({
   const [optionsOpen, setOptionsOpen] = (0, import_react5.useState)(false);
   const [viewerKey, setViewerKey] = (0, import_react5.useState)(null);
   const [editTarget, setEditTarget] = (0, import_react5.useState)(null);
+  const [editPreparing, setEditPreparing] = (0, import_react5.useState)(false);
+  const [editPreparationError, setEditPreparationError] = (0, import_react5.useState)(
+    null
+  );
   const [gridOn, setGridOn] = (0, import_react5.useState)(false);
   const [timerSetting, setTimerSetting] = (0, import_react5.useState)(0);
   const [aspect, setAspect] = (0, import_react5.useState)("full");
@@ -1573,6 +1642,12 @@ function CameraCapture({
   (0, import_react5.useEffect)(() => {
     onReviewOpenChange?.(reviewOpen);
   }, [reviewOpen, onReviewOpenChange]);
+  (0, import_react5.useEffect)(
+    () => () => {
+      if (editTarget?.revoke) URL.revokeObjectURL(editTarget.url);
+    },
+    [editTarget]
+  );
   const clearCountdown = (0, import_react5.useCallback)(() => {
     if (countdownRef.current) clearInterval(countdownRef.current);
     countdownRef.current = null;
@@ -1886,8 +1961,16 @@ function CameraCapture({
           invalidateMedia(item.key);
         } : void 0,
         onEdit: media.onReplacePhoto ? (item) => {
-          const url = getMediaUrl(item);
-          if (url) setEditTarget({ key: item.key, url });
+          if (editPreparing) return;
+          setEditPreparing(true);
+          setEditPreparationError(null);
+          void prepareMediaForEdit(item).then(
+            (prepared) => setEditTarget({ key: item.key, ...prepared })
+          ).catch(
+            () => setEditPreparationError(
+              "This photo could not be prepared for editing. Try again."
+            )
+          ).finally(() => setEditPreparing(false));
         } : void 0
       }
     ),
@@ -1908,6 +1991,14 @@ function CameraCapture({
         }
       }
     ),
+    editPreparationError && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "p",
+      {
+        role: "alert",
+        className: "fixed inset-x-4 bottom-24 z-[70] rounded-xl bg-black/85 px-4 py-3 text-center text-sm text-[#FF6961]",
+        children: editPreparationError
+      }
+    ),
     slots.overlays
   ] });
 }
@@ -2206,7 +2297,9 @@ function CameraCaptureV3({
   slots = {}
 }) {
   const [viewerKey, setViewerKey] = (0, import_react8.useState)(null);
-  const [editTarget, setEditTarget] = (0, import_react8.useState)(
+  const [editTarget, setEditTarget] = (0, import_react8.useState)(null);
+  const [editPreparing, setEditPreparing] = (0, import_react8.useState)(false);
+  const [editPreparationError, setEditPreparationError] = (0, import_react8.useState)(
     null
   );
   const [gridOn, setGridOn] = (0, import_react8.useState)(false);
@@ -2220,6 +2313,12 @@ function CameraCaptureV3({
   (0, import_react8.useEffect)(() => {
     onReviewOpenChange?.(reviewOpen);
   }, [reviewOpen, onReviewOpenChange]);
+  (0, import_react8.useEffect)(
+    () => () => {
+      if (editTarget?.revoke) URL.revokeObjectURL(editTarget.url);
+    },
+    [editTarget]
+  );
   const clearCountdown = (0, import_react8.useCallback)(() => {
     if (countdownRef.current) clearInterval(countdownRef.current);
     countdownRef.current = null;
@@ -2438,8 +2537,16 @@ function CameraCaptureV3({
           invalidateMedia(item.key);
         } : void 0,
         onEdit: media.onReplacePhoto ? (item) => {
-          const url = getMediaUrl(item);
-          if (url) setEditTarget({ key: item.key, url });
+          if (editPreparing) return;
+          setEditPreparing(true);
+          setEditPreparationError(null);
+          void prepareMediaForEdit(item).then(
+            (prepared) => setEditTarget({ key: item.key, ...prepared })
+          ).catch(
+            () => setEditPreparationError(
+              "This photo could not be prepared for editing. Try again."
+            )
+          ).finally(() => setEditPreparing(false));
         } : void 0
       }
     ),
@@ -2460,6 +2567,14 @@ function CameraCaptureV3({
         }
       }
     ),
+    editPreparationError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "p",
+      {
+        role: "alert",
+        className: "fixed inset-x-4 bottom-24 z-[70] rounded-xl bg-black/85 px-4 py-3 text-center text-sm text-[#FF6961]",
+        children: editPreparationError
+      }
+    ),
     slots.overlays
   ] });
 }