@ai-matrx/capture 0.5.2 → 0.5.3

package/dist/react.js

@@ -1175,6 +1175,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 +1192,8 @@ function ImageEditSheet({
       setWorkingSrc(null);
       setAspect("free");
       setCrop(FULL_CROP);
+      setImageReady(false);
+      setTransforming(false);
       setSaving(false);
       setEditError(null);
     }
@@ -1198,21 +1202,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 +1257,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 +1347,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 +1380,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 +1408,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 +1437,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 +1486,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 +1502,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 +1513,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" })