@ai-matrx/capture 0.5.2 → 0.5.4

package/dist/react.d.cts

@@ -231,6 +231,9 @@ interface CaptureMediaItem {
     /** Async URL resolution for persisted items. Called at most once per key
      *  while cached; concurrent callers share the in-flight promise. */
     resolve?: () => Promise<ResolvedMedia>;
+    /** Fresh bytes for pixel editing. Persisted hosts should provide this
+     *  instead of asking the editor to borrow a cache-owned viewer URL. */
+    resolveEditBlob?: () => Promise<Blob>;
     /** Upload/processing state — the filmstrip renders it honestly. */
     status?: "ready" | "uploading" | "error";
     /** Accent ring on the filmstrip tile (e.g. a delineator frame). */

package/dist/react.d.ts

@@ -231,6 +231,9 @@ interface CaptureMediaItem {
     /** Async URL resolution for persisted items. Called at most once per key
      *  while cached; concurrent callers share the in-flight promise. */
     resolve?: () => Promise<ResolvedMedia>;
+    /** Fresh bytes for pixel editing. Persisted hosts should provide this
+     *  instead of asking the editor to borrow a cache-owned viewer URL. */
+    resolveEditBlob?: () => Promise<Blob>;
     /** Upload/processing state — the filmstrip renders it honestly. */
     status?: "ready" | "uploading" | "error";
     /** Accent ring on the filmstrip tile (e.g. a delineator frame). */

package/dist/react.js

@@ -661,6 +661,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] = useState2(0);
   const key = item?.key ?? null;
@@ -1175,6 +1185,8 @@ function ImageEditSheet({
   const [workingSrc, setWorkingSrc] = useState4(null);
   const [aspect, setAspect] = useState4("free");
   const [crop, setCrop] = useState4(FULL_CROP);
+  const [imageReady, setImageReady] = useState4(false);
+  const [transforming, setTransforming] = useState4(false);
   const [saving, setSaving] = useState4(false);
   const [editError, setEditError] = useState4(null);
   const stageRef = useRef2(null);
@@ -1190,6 +1202,8 @@ function ImageEditSheet({
       setWorkingSrc(null);
       setAspect("free");
       setCrop(FULL_CROP);
+      setImageReady(false);
+      setTransforming(false);
       setSaving(false);
       setEditError(null);
     }
@@ -1198,21 +1212,53 @@ function ImageEditSheet({
   const bake = useCallback3(
     (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."
               );
@@ -1221,26 +1267,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 = useCallback3((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;
@@ -1305,7 +1357,10 @@ function ImageEditSheet({
   }, []);
   const save = useCallback3(() => {
     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 {
@@ -1335,7 +1390,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__ */ jsxs9("div", { className: "absolute inset-0 z-50 flex flex-col bg-black", children: [
     /* @__PURE__ */ jsxs9(
@@ -1363,12 +1418,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__ */ jsx11(CheckIcon, { className: "h-5 w-5" }),
-                "Save"
+                saving ? "Saving\u2026" : transforming || !imageReady ? "Loading\u2026" : "Save"
               ]
             }
           )
@@ -1391,6 +1447,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"
             }
           ),
@@ -1434,6 +1496,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",
@@ -1449,6 +1512,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__ */ jsx11(RotateCcwIcon, { className: "h-5 w-5" })
@@ -1459,6 +1523,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__ */ jsx11(FlipHorizontal2Icon, { className: "h-5 w-5" })
@@ -1494,6 +1559,10 @@ function CameraCapture({
   const [optionsOpen, setOptionsOpen] = useState5(false);
   const [viewerKey, setViewerKey] = useState5(null);
   const [editTarget, setEditTarget] = useState5(null);
+  const [editPreparing, setEditPreparing] = useState5(false);
+  const [editPreparationError, setEditPreparationError] = useState5(
+    null
+  );
   const [gridOn, setGridOn] = useState5(false);
   const [timerSetting, setTimerSetting] = useState5(0);
   const [aspect, setAspect] = useState5("full");
@@ -1518,6 +1587,12 @@ function CameraCapture({
   useEffect5(() => {
     onReviewOpenChange?.(reviewOpen);
   }, [reviewOpen, onReviewOpenChange]);
+  useEffect5(
+    () => () => {
+      if (editTarget?.revoke) URL.revokeObjectURL(editTarget.url);
+    },
+    [editTarget]
+  );
   const clearCountdown = useCallback4(() => {
     if (countdownRef.current) clearInterval(countdownRef.current);
     countdownRef.current = null;
@@ -1831,8 +1906,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
       }
     ),
@@ -1853,6 +1936,14 @@ function CameraCapture({
         }
       }
     ),
+    editPreparationError && /* @__PURE__ */ jsx12(
+      "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
   ] });
 }
@@ -2151,7 +2242,9 @@ function CameraCaptureV3({
   slots = {}
 }) {
   const [viewerKey, setViewerKey] = useState8(null);
-  const [editTarget, setEditTarget] = useState8(
+  const [editTarget, setEditTarget] = useState8(null);
+  const [editPreparing, setEditPreparing] = useState8(false);
+  const [editPreparationError, setEditPreparationError] = useState8(
     null
   );
   const [gridOn, setGridOn] = useState8(false);
@@ -2165,6 +2258,12 @@ function CameraCaptureV3({
   useEffect7(() => {
     onReviewOpenChange?.(reviewOpen);
   }, [reviewOpen, onReviewOpenChange]);
+  useEffect7(
+    () => () => {
+      if (editTarget?.revoke) URL.revokeObjectURL(editTarget.url);
+    },
+    [editTarget]
+  );
   const clearCountdown = useCallback6(() => {
     if (countdownRef.current) clearInterval(countdownRef.current);
     countdownRef.current = null;
@@ -2383,8 +2482,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
       }
     ),
@@ -2405,6 +2512,14 @@ function CameraCaptureV3({
         }
       }
     ),
+    editPreparationError && /* @__PURE__ */ jsx15(
+      "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
   ] });
 }