muse-image-editor 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs as c, jsx as r, Fragment as ce } from "react/jsx-runtime";
 import ge, { useState as U, useRef as B, useCallback as C, useEffect as V } from "react";
-import { Paintbrush as xe, Eraser as pe, Trash2 as fe, Undo2 as be, Redo2 as ve, X as we, ZoomOut as ze, ZoomIn as ye, Loader2 as me, ChevronRight as ke, ChevronDown as Ce, Sparkles as Ne, Check as he } from "lucide-react";
+import { Paintbrush as xe, Eraser as pe, Trash2 as fe, Undo2 as be, Redo2 as ve, X as we, ZoomOut as ze, ZoomIn as ye, Loader2 as he, ChevronRight as ke, ChevronDown as Ce, Sparkles as Ne, Check as me } from "lucide-react";
 function Ie(s, u) {
   const y = Math.max(4, s * u), x = y / 2, N = y + 2, l = N / 2, g = `<svg xmlns='http://www.w3.org/2000/svg' width='${N}' height='${N}'><circle cx='${l}' cy='${l}' r='${x}' fill='none' stroke='white' stroke-width='1.5'/><circle cx='${l}' cy='${l}' r='${x}' fill='none' stroke='black' stroke-width='0.75'/></svg>`;
   return `url("data:image/svg+xml,${encodeURIComponent(g)}") ${N / 2} ${N / 2}, crosshair`;
@@ -21,183 +21,183 @@ function de(s, u, y, x, N) {
   }
 }
 function Me(s = {}) {
-  const { enableShortcuts: u = !0, isActive: y = !0 } = s, [x, N] = U("brush"), [l, g] = U(24), [b, I] = U(1), [d, k] = U({ x: 0, y: 0 }), w = B(null), a = B(null), S = B(null), T = B(!1), M = B(null), Z = B(!1), F = B({ x: 0, y: 0 }), E = B({ x: 0, y: 0 }), [z, j] = U([]), [$, A] = U([]), D = B(null), [R, f] = U({ width: 0, height: 0 }), K = C((n) => {
-    const t = S.current;
+  const { enableShortcuts: u = !0, isActive: y = !0 } = s, [x, N] = U("brush"), [l, g] = U(24), [v, I] = U(1), [d, k] = U({ x: 0, y: 0 }), w = B(null), i = B(null), R = B(null), T = B(!1), M = B(null), Z = B(!1), O = B({ x: 0, y: 0 }), E = B({ x: 0, y: 0 }), [z, W] = U([]), [$, A] = U([]), S = B(null), [P, b] = U({ width: 0, height: 0 }), H = C((n) => {
+    const t = R.current;
     if (!t) return { x: 0, y: 0 };
-    const i = t.getBoundingClientRect(), o = t.width / i.width, h = t.height / i.height;
+    const a = t.getBoundingClientRect(), o = t.width / a.width, m = t.height / a.height;
     return {
-      x: (n.clientX - i.left) * o,
-      y: (n.clientY - i.top) * h
+      x: (n.clientX - a.left) * o,
+      y: (n.clientY - a.top) * m
     };
-  }, []), O = C((n) => {
-    const t = S.current;
+  }, []), K = C((n) => {
+    const t = R.current;
     if (!t) return;
-    const i = t.getContext("2d");
-    i && de(i, n, t.width, t.height, 0.5);
+    const a = t.getContext("2d");
+    a && de(a, n, t.width, t.height, 0.5);
   }, []), ee = C((n) => {
     if (n.button === 1) {
-      n.preventDefault(), Z.current = !0, F.current = { x: n.clientX, y: n.clientY }, E.current = { ...d }, n.target.setPointerCapture(n.pointerId);
+      n.preventDefault(), Z.current = !0, O.current = { x: n.clientX, y: n.clientY }, E.current = { ...d }, n.target.setPointerCapture(n.pointerId);
       return;
     }
     if (n.button !== 0) return;
     n.preventDefault(), n.target.setPointerCapture(n.pointerId), T.current = !0;
-    const t = K(n);
-    M.current = t, D.current = {
+    const t = H(n);
+    M.current = t, S.current = {
       points: [t],
       size: l,
       tool: x
     };
-    const i = S.current;
-    if (!i) return;
-    const o = i.getContext("2d");
+    const a = R.current;
+    if (!a) return;
+    const o = a.getContext("2d");
     o && (o.save(), x === "eraser" ? (o.globalCompositeOperation = "destination-out", o.globalAlpha = 1) : (o.globalCompositeOperation = "source-over", o.globalAlpha = 0.5), o.fillStyle = "white", o.beginPath(), o.arc(t.x, t.y, l / 2, 0, Math.PI * 2), o.fill(), o.restore());
-  }, [x, l, K, d]), te = C((n) => {
+  }, [x, l, H, d]), te = C((n) => {
     if (Z.current) {
-      const h = n.clientX - F.current.x, v = n.clientY - F.current.y;
-      k({ x: E.current.x + h, y: E.current.y + v });
+      const m = n.clientX - O.current.x, p = n.clientY - O.current.y;
+      k({ x: E.current.x + m, y: E.current.y + p });
       return;
     }
-    if (!T.current || !D.current) return;
-    const t = K(n);
-    D.current.points.push(t);
-    const i = S.current;
-    if (!i) return;
-    const o = i.getContext("2d");
+    if (!T.current || !S.current) return;
+    const t = H(n);
+    S.current.points.push(t);
+    const a = R.current;
+    if (!a) return;
+    const o = a.getContext("2d");
     !o || !M.current || (o.save(), x === "eraser" ? (o.globalCompositeOperation = "destination-out", o.globalAlpha = 1) : (o.globalCompositeOperation = "source-over", o.globalAlpha = 0.5), o.strokeStyle = "white", o.lineWidth = l, o.lineCap = "round", o.lineJoin = "round", o.beginPath(), o.moveTo(M.current.x, M.current.y), o.lineTo(t.x, t.y), o.stroke(), o.restore(), M.current = t);
-  }, [x, l, K]), ne = C((n) => {
+  }, [x, l, H]), ne = C((n) => {
     if (Z.current) {
       Z.current = !1;
       return;
     }
-    if (T.current && (T.current = !1, M.current = null, D.current)) {
-      const t = D.current;
-      D.current = null, j((i) => {
-        const o = [...i, t];
-        return O(o), o;
+    if (T.current && (T.current = !1, M.current = null, S.current)) {
+      const t = S.current;
+      S.current = null, W((a) => {
+        const o = [...a, t];
+        return K(o), o;
       }), A([]);
     }
-  }, [O]), X = C(() => {
-    j((n) => {
+  }, [K]), X = C(() => {
+    W((n) => {
       if (n.length === 0) return n;
       const t = n[n.length - 1];
       A((o) => [t, ...o]);
-      const i = n.slice(0, -1);
-      return O(i), i;
+      const a = n.slice(0, -1);
+      return K(a), a;
     });
-  }, [O]), q = C(() => {
+  }, [K]), q = C(() => {
     A((n) => {
       if (n.length === 0) return n;
-      const [t, ...i] = n;
-      return j((o) => {
-        const h = [...o, t];
-        return O(h), h;
-      }), i;
+      const [t, ...a] = n;
+      return W((o) => {
+        const m = [...o, t];
+        return K(m), m;
+      }), a;
     });
-  }, [O]), re = C(() => {
-    const n = S.current;
+  }, [K]), re = C(() => {
+    const n = R.current;
     if (!n) return;
     const t = n.getContext("2d");
-    t && t.clearRect(0, 0, n.width, n.height), j([]), A([]);
-  }, []), ae = C(() => I((n) => Math.min(5, n + 0.25)), []), ie = C(() => I((n) => Math.max(0.1, n - 0.25)), []), se = C((n) => {
+    t && t.clearRect(0, 0, n.width, n.height), W([]), A([]);
+  }, []), ie = C(() => I((n) => Math.min(5, n + 0.25)), []), ae = C(() => I((n) => Math.max(0.1, n - 0.25)), []), se = C((n) => {
     n.preventDefault();
     const t = n.deltaY > 0 ? -0.1 : 0.1;
-    I((i) => Math.min(5, Math.max(0.1, i + t)));
+    I((a) => Math.min(5, Math.max(0.1, a + t)));
   }, []);
   V(() => {
     if (!u || !y) return;
     const n = (t) => {
-      t.key === "[" ? (t.preventDefault(), g((i) => Math.max(4, i - 4))) : t.key === "]" ? (t.preventDefault(), g((i) => Math.min(100, i + 4))) : t.key === "z" && (t.ctrlKey || t.metaKey) && t.shiftKey ? (t.preventDefault(), q()) : t.key === "z" && (t.ctrlKey || t.metaKey) && !t.shiftKey && (t.preventDefault(), X());
+      t.key === "[" ? (t.preventDefault(), g((a) => Math.max(4, a - 4))) : t.key === "]" ? (t.preventDefault(), g((a) => Math.min(100, a + 4))) : t.key === "z" && (t.ctrlKey || t.metaKey) && t.shiftKey ? (t.preventDefault(), q()) : t.key === "z" && (t.ctrlKey || t.metaKey) && !t.shiftKey && (t.preventDefault(), X());
     };
     return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
   }, [u, y, X, q]);
-  const le = C((n, t) => new Promise((i, o) => {
-    const h = new Image();
-    h.crossOrigin = "anonymous", h.onload = () => {
-      const v = h.naturalWidth, P = h.naturalHeight;
-      f({ width: v, height: P });
-      const W = a.current;
-      if (W) {
-        W.width = v, W.height = P;
-        const L = W.getContext("2d");
-        L && (L.clearRect(0, 0, v, P), L.drawImage(h, 0, 0));
+  const le = C((n, t) => new Promise((a, o) => {
+    const m = new Image();
+    m.crossOrigin = "anonymous", m.onload = () => {
+      const p = m.naturalWidth, D = m.naturalHeight;
+      b({ width: p, height: D });
+      const j = i.current;
+      if (j) {
+        j.width = p, j.height = D;
+        const L = j.getContext("2d");
+        L && (L.clearRect(0, 0, p, D), L.drawImage(m, 0, 0));
       }
-      const Y = S.current;
+      const Y = R.current;
       if (Y) {
-        Y.width = v, Y.height = P;
+        Y.width = p, Y.height = D;
         const L = Y.getContext("2d");
-        L && L.clearRect(0, 0, v, P);
+        L && L.clearRect(0, 0, p, D);
       }
-      if (j([]), A([]), !t) {
+      if (W([]), A([]), !t) {
         k({ x: 0, y: 0 });
         const L = w.current;
-        if (L && v > 0 && P > 0) {
-          const H = L.getBoundingClientRect(), Q = 40, J = H.width - Q, G = H.height - Q;
+        if (L && p > 0 && D > 0) {
+          const F = L.getBoundingClientRect(), Q = 40, J = F.width - Q, G = F.height - Q;
           if (J > 0 && G > 0) {
-            const _ = Math.min(J / v, G / P, 1);
+            const _ = Math.min(J / p, G / D, 1);
             I(_);
           } else
             I(1);
         } else
           I(1);
       }
-      i();
-    }, h.onerror = () => o(new Error("Failed to load image")), h.src = n;
+      a();
+    }, m.onerror = () => o(new Error("Failed to load image")), m.src = n;
   }), []), oe = C(() => {
-    const n = a.current;
+    const n = i.current;
     if (!n) return null;
-    const { width: t, height: i } = R;
-    if (t === 0 || i === 0) return null;
+    const { width: t, height: a } = P;
+    if (t === 0 || a === 0) return null;
     const o = document.createElement("canvas");
-    o.width = t, o.height = i;
-    const h = o.getContext("2d");
-    if (!h) return null;
-    if (h.drawImage(n, 0, 0), z.length > 0) {
-      const v = document.createElement("canvas");
-      v.width = t, v.height = i;
-      const P = v.getContext("2d");
-      P && (de(P, z, t, i, 1), h.drawImage(v, 0, 0));
+    o.width = t, o.height = a;
+    const m = o.getContext("2d");
+    if (!m) return null;
+    if (m.drawImage(n, 0, 0), z.length > 0) {
+      const p = document.createElement("canvas");
+      p.width = t, p.height = a;
+      const D = p.getContext("2d");
+      D && (de(D, z, t, a, 1), m.drawImage(p, 0, 0));
     }
     return o.toDataURL("image/png");
-  }, [z, R]), e = C((n = 20) => {
-    const t = a.current;
+  }, [z, P]), e = C((n = 20) => {
+    const t = i.current;
     if (!t || z.length === 0) return null;
-    const { width: i, height: o } = R;
-    if (i === 0 || o === 0) return null;
-    let h = 1 / 0, v = 1 / 0, P = -1 / 0, W = -1 / 0;
+    const { width: a, height: o } = P;
+    if (a === 0 || o === 0) return null;
+    let m = 1 / 0, p = 1 / 0, D = -1 / 0, j = -1 / 0;
     for (const J of z) {
       if (J.tool === "eraser") continue;
       const G = J.size / 2;
       for (const _ of J.points)
-        h = Math.min(h, _.x - G), v = Math.min(v, _.y - G), P = Math.max(P, _.x + G), W = Math.max(W, _.y + G);
+        m = Math.min(m, _.x - G), p = Math.min(p, _.y - G), D = Math.max(D, _.x + G), j = Math.max(j, _.y + G);
     }
-    if (h === 1 / 0) return null;
-    h = Math.max(0, Math.floor(h - n)), v = Math.max(0, Math.floor(v - n)), P = Math.min(i, Math.ceil(P + n)), W = Math.min(o, Math.ceil(W + n));
-    const Y = P - h, L = W - v;
+    if (m === 1 / 0) return null;
+    m = Math.max(0, Math.floor(m - n)), p = Math.max(0, Math.floor(p - n)), D = Math.min(a, Math.ceil(D + n)), j = Math.min(o, Math.ceil(j + n));
+    const Y = D - m, L = j - p;
     if (Y <= 0 || L <= 0) return null;
-    const H = document.createElement("canvas");
-    H.width = Y, H.height = L;
-    const Q = H.getContext("2d");
-    return Q ? (Q.drawImage(t, h, v, Y, L, 0, 0, Y, L), H.toDataURL("image/png")) : null;
-  }, [z, R]), m = C(() => {
-    const { width: n, height: t } = R;
+    const F = document.createElement("canvas");
+    F.width = Y, F.height = L;
+    const Q = F.getContext("2d");
+    return Q ? (Q.drawImage(t, m, p, Y, L, 0, 0, Y, L), F.toDataURL("image/png")) : null;
+  }, [z, P]), h = C(() => {
+    const { width: n, height: t } = P;
     if (n === 0 || t === 0 || z.length === 0) return null;
-    const i = document.createElement("canvas");
-    i.width = n, i.height = t;
-    const o = i.getContext("2d");
-    return o ? (de(o, z, n, t, 1), i) : null;
-  }, [z, R]), p = Ie(l, b);
+    const a = document.createElement("canvas");
+    a.width = n, a.height = t;
+    const o = a.getContext("2d");
+    return o ? (de(o, z, n, t, 1), a) : null;
+  }, [z, P]), f = Ie(l, v);
   return {
-    imageCanvasRef: a,
-    maskCanvasRef: S,
+    imageCanvasRef: i,
+    maskCanvasRef: R,
     containerRef: w,
     activeTool: x,
     setActiveTool: N,
     brushSize: l,
     setBrushSize: g,
-    zoom: b,
+    zoom: v,
     pan: d,
-    handleZoomIn: ae,
-    handleZoomOut: ie,
+    handleZoomIn: ie,
+    handleZoomOut: ae,
     handleWheel: se,
     strokes: z,
     redoStack: $,
@@ -207,58 +207,58 @@ function Me(s = {}) {
     handlePointerDown: ee,
     handlePointerMove: te,
     handlePointerUp: ne,
-    imageDimensions: R,
+    imageDimensions: P,
     loadImage: le,
     exportMaskedImage: oe,
     exportCroppedRegion: e,
-    exportMask: m,
-    cursorStyle: p
+    exportMask: h,
+    cursorStyle: f
   };
 }
 const De = (s, u, y) => new Promise((x, N) => {
   const l = new Image(), g = new Image();
-  let b = 0;
+  let v = 0;
   const I = () => {
-    const k = y.width, w = y.height, S = y.getContext("2d").getImageData(0, 0, k, w), T = new Float32Array(k * w);
-    for (let D = 0; D < k * w; D++)
-      T[D] = S.data[D * 4] / 255;
-    const M = 8, Z = ue(T, k, w, M), F = ue(Z, k, w, M), E = document.createElement("canvas");
+    const k = y.width, w = y.height, R = y.getContext("2d").getImageData(0, 0, k, w), T = new Float32Array(k * w);
+    for (let S = 0; S < k * w; S++)
+      T[S] = R.data[S * 4] / 255;
+    const M = 8, Z = ue(T, k, w, M), O = ue(Z, k, w, M), E = document.createElement("canvas");
     E.width = k, E.height = w;
     const z = E.getContext("2d");
     z.drawImage(l, 0, 0, k, w);
-    const j = z.getImageData(0, 0, k, w);
+    const W = z.getImageData(0, 0, k, w);
     z.clearRect(0, 0, k, w), z.drawImage(g, 0, 0, k, w);
     const $ = z.getImageData(0, 0, k, w), A = z.createImageData(k, w);
-    for (let D = 0; D < k * w; D++) {
-      const R = F[D], f = D * 4;
-      A.data[f] = Math.round(j.data[f] * (1 - R) + $.data[f] * R), A.data[f + 1] = Math.round(j.data[f + 1] * (1 - R) + $.data[f + 1] * R), A.data[f + 2] = Math.round(j.data[f + 2] * (1 - R) + $.data[f + 2] * R), A.data[f + 3] = 255;
+    for (let S = 0; S < k * w; S++) {
+      const P = O[S], b = S * 4;
+      A.data[b] = Math.round(W.data[b] * (1 - P) + $.data[b] * P), A.data[b + 1] = Math.round(W.data[b + 1] * (1 - P) + $.data[b + 1] * P), A.data[b + 2] = Math.round(W.data[b + 2] * (1 - P) + $.data[b + 2] * P), A.data[b + 3] = 255;
     }
     z.putImageData(A, 0, 0), x(E.toDataURL("image/png"));
   }, d = () => {
-    ++b === 2 && I();
+    ++v === 2 && I();
   };
   l.onload = d, l.onerror = N, l.src = s, g.onload = d, g.onerror = N, g.src = u;
 }), ue = (s, u, y, x) => {
   const N = new Float32Array(u * y), l = x * 2 + 1;
-  for (let b = 0; b < y; b++) {
+  for (let v = 0; v < y; v++) {
     let I = 0;
     for (let d = -x; d <= x; d++)
-      I += s[b * u + Math.max(0, Math.min(u - 1, d))];
+      I += s[v * u + Math.max(0, Math.min(u - 1, d))];
     for (let d = 0; d < u; d++) {
-      N[b * u + d] = I / l;
+      N[v * u + d] = I / l;
       const k = Math.min(u - 1, d + x + 1), w = Math.max(0, d - x);
-      I += s[b * u + k] - s[b * u + w];
+      I += s[v * u + k] - s[v * u + w];
     }
   }
   const g = new Float32Array(u * y);
-  for (let b = 0; b < u; b++) {
+  for (let v = 0; v < u; v++) {
     let I = 0;
     for (let d = -x; d <= x; d++)
-      I += N[Math.max(0, Math.min(y - 1, d)) * u + b];
+      I += N[Math.max(0, Math.min(y - 1, d)) * u + v];
     for (let d = 0; d < y; d++) {
-      g[d * u + b] = I / l;
+      g[d * u + v] = I / l;
       const k = Math.min(y - 1, d + x + 1), w = Math.max(0, d - x);
-      I += N[k * u + b] - N[w * u + b];
+      I += N[k * u + v] - N[w * u + v];
     }
   }
   return g;
@@ -271,13 +271,13 @@ function Ue({
   imageUrl: N,
   onGenerate: l,
   referenceImages: g,
-  defaultReferenceIds: b,
+  defaultReferenceIds: v,
   presets: I,
   initialHistory: d,
   imageResolution: k,
   title: w = "Image Editor"
 }) {
-  const a = Me({ isActive: s }), [S, T] = U([]), [M, Z] = U(0), [F, E] = U(!0), [z, j] = U(!1), [$, A] = U([]), [D, R] = U(/* @__PURE__ */ new Set()), [f, K] = U(""), [O, ee] = U(null), [te, ne] = U(!1), X = B(!1);
+  const i = Me({ isActive: s }), [R, T] = U([]), [M, Z] = U(0), [O, E] = U(!0), [z, W] = U(!1), [$, A] = U([]), [S, P] = U(/* @__PURE__ */ new Set()), [b, H] = U(""), [K, ee] = U(null), [te, ne] = U(!1), X = B(!1);
   V(() => {
     if (!s) {
       X.current = !1;
@@ -286,37 +286,37 @@ function Ue({
     if (d && d.length > 0 && !X.current) {
       X.current = !0, T(d);
       const e = d[d.length - 1];
-      Z(e.index), E(!0), a.loadImage(e.imageDataUrl).then(() => E(!1)).catch(() => E(!1));
+      Z(e.index), E(!0), i.loadImage(e.imageDataUrl).then(() => E(!1)).catch(() => E(!1));
       return;
     }
-    X.current || (X.current = !0, E(!0), a.loadImage(N).then(() => {
-      const e = a.imageCanvasRef.current;
+    X.current || (X.current = !0, E(!0), i.loadImage(N).then(() => {
+      const e = i.imageCanvasRef.current;
       if (e) {
-        const m = document.createElement("canvas");
-        m.width = e.width, m.height = e.height;
-        const p = m.getContext("2d");
-        p && p.drawImage(e, 0, 0), T([{
+        const h = document.createElement("canvas");
+        h.width = e.width, h.height = e.height;
+        const f = h.getContext("2d");
+        f && f.drawImage(e, 0, 0), T([{
           index: 0,
           label: "Original",
-          imageDataUrl: m.toDataURL("image/png"),
+          imageDataUrl: h.toDataURL("image/png"),
           prompt: ""
         }]), Z(0);
       }
       E(!1);
     }).catch(() => E(!1)));
   }, [s, N, d]), V(() => {
-    s && b && b.length > 0 && A(b);
-  }, [s, b]);
+    s && v && v.length > 0 && A(v);
+  }, [s, v]);
   const q = C((e) => {
-    R((m) => {
-      const p = new Set(m);
-      return p.has(e) ? p.delete(e) : p.add(e), p;
+    P((h) => {
+      const f = new Set(h);
+      return f.has(e) ? f.delete(e) : f.add(e), f;
     });
   }, []);
   V(() => {
     if (!s) return;
-    const e = (m) => {
-      m.key === "Escape" && u();
+    const e = (h) => {
+      h.key === "Escape" && u();
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
   }, [s, u]), V(() => {
@@ -326,66 +326,68 @@ function Ue({
       };
   }, [s]);
   const re = C((e) => {
-    A((m) => m.includes(e) ? m.filter((p) => p !== e) : [...m, e]);
-  }, []), ae = C(
+    A((h) => h.includes(e) ? h.filter((f) => f !== e) : [...h, e]);
+  }, []), ie = C(
     (e) => {
-      Z(e.index), a.loadImage(e.imageDataUrl, !0), K(e.prompt);
+      Z(e.index), i.loadImage(e.imageDataUrl, !0), H(e.prompt);
     },
-    [a.loadImage]
-  ), ie = C(async () => {
-    if (!l || !f.trim()) return;
-    const e = S[M];
+    [i.loadImage]
+  ), ae = C(async () => {
+    if (!l || !b.trim()) return;
+    const e = R[M];
     if (!e) return;
-    const m = a.strokes.length > 0 ? a.exportMaskedImage() : void 0;
+    const h = i.strokes.length > 0 ? i.exportMaskedImage() : void 0;
     ne(!0);
     try {
-      const p = await l({
+      const { width: f, height: n } = i.imageDimensions, t = await l({
         sourceImageDataUrl: e.imageDataUrl,
-        prompt: f.trim(),
-        maskedImageDataUrl: m || void 0,
-        selectedReferenceIds: $.length > 0 ? [...$] : void 0
+        prompt: b.trim(),
+        maskedImageDataUrl: h || void 0,
+        selectedReferenceIds: $.length > 0 ? [...$] : void 0,
+        sourceWidth: f,
+        sourceHeight: n
       });
-      let n = p;
-      if (z && m) {
-        const h = a.exportMask();
-        h && (n = await De(e.imageDataUrl, p, h));
+      let a = t;
+      if (z && h) {
+        const D = i.exportMask();
+        D && (a = await De(e.imageDataUrl, t, D));
       }
-      const t = S.slice(0, M + 1), i = t.length, o = {
-        index: i,
-        label: f.trim().slice(0, 40),
-        imageDataUrl: n,
-        prompt: f.trim(),
-        maskDataUrl: m || void 0
+      const o = R.slice(0, M + 1), m = o.length, p = {
+        index: m,
+        label: b.trim().slice(0, 40),
+        imageDataUrl: a,
+        prompt: b.trim(),
+        maskDataUrl: h || void 0
       };
-      T([...t, o]), Z(i), a.loadImage(n, !0), x && x(o);
-    } catch (p) {
-      console.error("[ImageEditor] Edit failed:", p), alert(`Edit failed: ${p.message || p}`);
+      T([...o, p]), Z(m), i.loadImage(a, !0), x && x(p);
+    } catch (f) {
+      console.error("[ImageEditor] Edit failed:", f), alert(`Edit failed: ${f.message || f}`);
     } finally {
       ne(!1);
     }
-  }, [f, S, M, a, $, l, z, x]), se = C(() => {
-    const e = S[M];
+  }, [b, R, M, i, $, l, z, x]), se = C(() => {
+    const e = R[M];
     !e || M === 0 || y(e.imageDataUrl);
-  }, [S, M, y]), le = C((e) => {
-    K(e.prompt), ee(e.id);
+  }, [R, M, y]), le = C((e) => {
+    H(e.prompt), ee(e.id);
   }, []);
   if (!s) return null;
   const oe = ge.useMemo(() => {
     if (!g || g.length === 0) return [];
     const e = /* @__PURE__ */ new Map();
-    for (const m of g) {
-      const p = m.category ?? "general";
-      e.has(p) || e.set(p, []), e.get(p).push(m);
+    for (const h of g) {
+      const f = h.category ?? "general";
+      e.has(f) || e.set(f, []), e.get(f).push(h);
     }
-    return Array.from(e.entries()).sort(([m], [p]) => m.localeCompare(p));
+    return Array.from(e.entries()).sort(([h], [f]) => h.localeCompare(f));
   }, [g]);
   return /* @__PURE__ */ c("div", { className: "fixed inset-0 z-50 bg-black/90 flex flex-col", children: [
     /* @__PURE__ */ c("div", { className: "flex items-center gap-3 px-4 py-2.5 bg-zinc-900 border-b border-zinc-800", children: [
       /* @__PURE__ */ c(
         "button",
         {
-          onClick: () => a.setActiveTool("brush"),
-          className: `flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium transition-colors ${a.activeTool === "brush" ? "bg-purple-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`,
+          onClick: () => i.setActiveTool("brush"),
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium transition-colors ${i.activeTool === "brush" ? "bg-purple-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`,
           title: "Brush (paint mask)",
           children: [
             /* @__PURE__ */ r(xe, { size: 16 }),
@@ -396,8 +398,8 @@ function Ue({
       /* @__PURE__ */ c(
         "button",
         {
-          onClick: () => a.setActiveTool("eraser"),
-          className: `flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium transition-colors ${a.activeTool === "eraser" ? "bg-purple-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`,
+          onClick: () => i.setActiveTool("eraser"),
+          className: `flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium transition-colors ${i.activeTool === "eraser" ? "bg-purple-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`,
           title: "Eraser (remove mask)",
           children: [
             /* @__PURE__ */ r(pe, { size: 16 }),
@@ -414,18 +416,18 @@ function Ue({
             type: "range",
             min: 4,
             max: 500,
-            value: a.brushSize,
-            onChange: (e) => a.setBrushSize(Number(e.target.value)),
+            value: i.brushSize,
+            onChange: (e) => i.setBrushSize(Number(e.target.value)),
             className: "w-28 accent-purple-500"
           }
         ),
-        /* @__PURE__ */ r("span", { className: "text-xs text-zinc-400 w-8 text-right", children: a.brushSize })
+        /* @__PURE__ */ r("span", { className: "text-xs text-zinc-400 w-8 text-right", children: i.brushSize })
       ] }),
       /* @__PURE__ */ r("div", { className: "w-px h-6 bg-zinc-700" }),
       /* @__PURE__ */ c(
         "button",
         {
-          onClick: a.handleClearMask,
+          onClick: i.handleClearMask,
           className: "flex items-center gap-1.5 px-3 py-1.5 rounded text-sm text-zinc-400 bg-zinc-800 hover:text-zinc-200 hover:bg-zinc-700 transition-colors",
           title: "Clear mask",
           children: [
@@ -440,8 +442,8 @@ function Ue({
       /* @__PURE__ */ r(
         "button",
         {
-          onClick: a.handleUndo,
-          disabled: a.strokes.length === 0,
+          onClick: i.handleUndo,
+          disabled: i.strokes.length === 0,
           className: "p-1.5 rounded text-zinc-400 hover:text-zinc-200 disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
           title: "Undo (Ctrl+Z)",
           children: /* @__PURE__ */ r(be, { size: 18 })
@@ -450,8 +452,8 @@ function Ue({
       /* @__PURE__ */ r(
         "button",
         {
-          onClick: a.handleRedo,
-          disabled: a.redoStack.length === 0,
+          onClick: i.handleRedo,
+          disabled: i.redoStack.length === 0,
           className: "p-1.5 rounded text-zinc-400 hover:text-zinc-200 disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
           title: "Redo (Ctrl+Shift+Z)",
           children: /* @__PURE__ */ r(ve, { size: 18 })
@@ -473,16 +475,16 @@ function Ue({
         "div",
         {
           className: "flex-1 flex items-center justify-center bg-zinc-950 overflow-hidden relative",
-          onWheel: a.handleWheel,
+          onWheel: i.handleWheel,
           children: [
             /* @__PURE__ */ c(
               "div",
               {
-                ref: a.containerRef,
+                ref: i.containerRef,
                 style: {
-                  transform: `translate(${a.pan.x}px, ${a.pan.y}px) scale(${a.zoom})`,
-                  width: a.imageDimensions.width > 0 ? a.imageDimensions.width : void 0,
-                  height: a.imageDimensions.height > 0 ? a.imageDimensions.height : void 0,
+                  transform: `translate(${i.pan.x}px, ${i.pan.y}px) scale(${i.zoom})`,
+                  width: i.imageDimensions.width > 0 ? i.imageDimensions.width : void 0,
+                  height: i.imageDimensions.height > 0 ? i.imageDimensions.height : void 0,
                   transformOrigin: "center center",
                   position: "relative"
                 },
@@ -490,24 +492,24 @@ function Ue({
                   /* @__PURE__ */ r(
                     "canvas",
                     {
-                      ref: a.imageCanvasRef,
+                      ref: i.imageCanvasRef,
                       style: { position: "absolute", top: 0, left: 0 }
                     }
                   ),
                   /* @__PURE__ */ r(
                     "canvas",
                     {
-                      ref: a.maskCanvasRef,
+                      ref: i.maskCanvasRef,
                       style: {
                         position: "absolute",
                         top: 0,
                         left: 0,
-                        cursor: a.cursorStyle
+                        cursor: i.cursorStyle
                       },
-                      onPointerDown: a.handlePointerDown,
-                      onPointerMove: a.handlePointerMove,
-                      onPointerUp: a.handlePointerUp,
-                      onPointerCancel: a.handlePointerUp,
+                      onPointerDown: i.handlePointerDown,
+                      onPointerMove: i.handlePointerMove,
+                      onPointerUp: i.handlePointerUp,
+                      onPointerCancel: i.handlePointerUp,
                       onContextMenu: (e) => e.preventDefault()
                     }
                   )
@@ -515,19 +517,19 @@ function Ue({
               }
             ),
             /* @__PURE__ */ c("div", { className: "absolute bottom-4 right-4 flex items-center gap-1 bg-zinc-900/80 rounded-lg px-2 py-1 border border-zinc-800", children: [
-              /* @__PURE__ */ r("button", { onClick: a.handleZoomOut, className: "p-1 text-zinc-400 hover:text-white transition-colors", title: "Zoom out", children: /* @__PURE__ */ r(ze, { size: 16 }) }),
+              /* @__PURE__ */ r("button", { onClick: i.handleZoomOut, className: "p-1 text-zinc-400 hover:text-white transition-colors", title: "Zoom out", children: /* @__PURE__ */ r(ze, { size: 16 }) }),
               /* @__PURE__ */ c("span", { className: "text-xs text-zinc-400 w-12 text-center", children: [
-                Math.round(a.zoom * 100),
+                Math.round(i.zoom * 100),
                 "%"
               ] }),
-              /* @__PURE__ */ r("button", { onClick: a.handleZoomIn, className: "p-1 text-zinc-400 hover:text-white transition-colors", title: "Zoom in", children: /* @__PURE__ */ r(ye, { size: 16 }) })
+              /* @__PURE__ */ r("button", { onClick: i.handleZoomIn, className: "p-1 text-zinc-400 hover:text-white transition-colors", title: "Zoom in", children: /* @__PURE__ */ r(ye, { size: 16 }) })
             ] }),
-            a.imageDimensions.width > 0 && /* @__PURE__ */ c("div", { className: "absolute bottom-4 left-4 text-xs text-zinc-600", children: [
-              a.imageDimensions.width,
+            i.imageDimensions.width > 0 && /* @__PURE__ */ c("div", { className: "absolute bottom-4 left-4 text-xs text-zinc-600", children: [
+              i.imageDimensions.width,
               " x ",
-              a.imageDimensions.height
+              i.imageDimensions.height
             ] }),
-            F && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950", children: /* @__PURE__ */ r(me, { size: 24, className: "text-zinc-500 animate-spin" }) })
+            O && /* @__PURE__ */ r("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950", children: /* @__PURE__ */ r(he, { size: 24, className: "text-zinc-500 animate-spin" }) })
           ]
         }
       ),
@@ -540,8 +542,8 @@ function Ue({
               " selected"
             ] })
           ] }) }),
-          oe.map(([e, m]) => {
-            const p = D.has(e), n = m.filter((t) => $.includes(t.id)).length;
+          oe.map(([e, h]) => {
+            const f = S.has(e), n = h.filter((t) => $.includes(t.id)).length;
             return /* @__PURE__ */ c("div", { className: "border-t border-zinc-800/50", children: [
               /* @__PURE__ */ c(
                 "button",
@@ -549,9 +551,9 @@ function Ue({
                   onClick: () => q(e),
                   className: "flex items-center gap-1.5 w-full px-3 py-1.5 text-left hover:bg-zinc-800/30 transition-colors",
                   children: [
-                    p ? /* @__PURE__ */ r(ke, { size: 12, className: "text-zinc-600" }) : /* @__PURE__ */ r(Ce, { size: 12, className: "text-zinc-600" }),
+                    f ? /* @__PURE__ */ r(ke, { size: 12, className: "text-zinc-600" }) : /* @__PURE__ */ r(Ce, { size: 12, className: "text-zinc-600" }),
                     /* @__PURE__ */ r("span", { className: "text-[11px] font-medium text-zinc-400 capitalize", children: e }),
-                    /* @__PURE__ */ r("span", { className: "text-[10px] text-zinc-600", children: m.length }),
+                    /* @__PURE__ */ r("span", { className: "text-[10px] text-zinc-600", children: h.length }),
                     n > 0 && /* @__PURE__ */ c("span", { className: "ml-auto text-[9px] text-blue-400", children: [
                       n,
                       " sel"
@@ -559,17 +561,17 @@ function Ue({
                   ]
                 }
               ),
-              !p && /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-1.5 px-3 pb-2", children: m.map((t) => {
-                const i = t.thumbnailUrl ?? t.url, o = t.name || t.category || "ref", h = $.indexOf(t.id), v = h !== -1;
+              !f && /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-1.5 px-3 pb-2", children: h.map((t) => {
+                const a = t.thumbnailUrl ?? t.url, o = t.name || t.category || "ref", m = $.indexOf(t.id), p = m !== -1;
                 return /* @__PURE__ */ c(
                   "button",
                   {
                     onClick: () => re(t.id),
-                    className: `relative rounded overflow-hidden aspect-square border-2 transition-colors ${v ? "border-blue-500" : "border-transparent hover:border-zinc-600"}`,
+                    className: `relative rounded overflow-hidden aspect-square border-2 transition-colors ${p ? "border-blue-500" : "border-transparent hover:border-zinc-600"}`,
                     title: t.name || o,
                     children: [
-                      i && /* @__PURE__ */ r("img", { src: i, alt: o, className: "w-full h-full object-cover" }),
-                      v && /* @__PURE__ */ r("span", { className: "absolute top-0.5 right-0.5 w-4 h-4 flex items-center justify-center text-[9px] font-bold bg-blue-600 text-white rounded-full leading-none", children: h + 1 }),
+                      a && /* @__PURE__ */ r("img", { src: a, alt: o, className: "w-full h-full object-cover" }),
+                      p && /* @__PURE__ */ r("span", { className: "absolute top-0.5 right-0.5 w-4 h-4 flex items-center justify-center text-[9px] font-bold bg-blue-600 text-white rounded-full leading-none", children: m + 1 }),
                       /* @__PURE__ */ r("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 text-[8px] text-zinc-300 px-1 py-0.5 text-center truncate", children: o })
                     ]
                   },
@@ -585,20 +587,20 @@ function Ue({
             "button",
             {
               onClick: () => le(e),
-              className: `px-2 py-1 rounded text-xs font-medium transition-colors ${O === e.id ? "bg-indigo-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700"}`,
+              className: `px-2 py-1 rounded text-xs font-medium transition-colors ${K === e.id ? "bg-indigo-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700"}`,
               children: e.label
             },
             e.id
           )) }),
           /* @__PURE__ */ c("div", { className: "relative", children: [
-            /\[(source|mask|image\d+)\]/i.test(f) && /* @__PURE__ */ c(
+            /\[(source|mask|image\d+)\]/i.test(b) && /* @__PURE__ */ c(
               "div",
               {
                 className: "absolute inset-0 px-2.5 py-2 text-sm whitespace-pre-wrap break-words overflow-hidden pointer-events-none rounded",
                 style: { lineHeight: "1.5" },
                 children: [
-                  f.split(/(\[(?:source|mask|image\d+)\])/gi).map(
-                    (e, m) => /^\[(?:source|mask|image\d+)\]$/i.test(e) ? /* @__PURE__ */ r("span", { className: "bg-blue-500/30 text-blue-300 rounded px-0.5 font-semibold", children: e }, m) : /* @__PURE__ */ r("span", { children: e }, m)
+                  b.split(/(\[(?:source|mask|image\d+)\])/gi).map(
+                    (e, h) => /^\[(?:source|mask|image\d+)\]$/i.test(e) ? /* @__PURE__ */ r("span", { className: "bg-blue-500/30 text-blue-300 rounded px-0.5 font-semibold", children: e }, h) : /* @__PURE__ */ r("span", { children: e }, h)
                   ),
                   `
 `
@@ -608,14 +610,14 @@ function Ue({
             /* @__PURE__ */ r(
               "textarea",
               {
-                value: f,
+                value: b,
                 onChange: (e) => {
-                  K(e.target.value), ee(null);
+                  H(e.target.value), ee(null);
                 },
                 placeholder: "Describe what to edit or change...",
                 rows: 3,
-                className: `w-full bg-zinc-800 border border-zinc-700 rounded px-2.5 py-2 text-sm placeholder-zinc-600 resize-none focus:outline-none focus:border-indigo-500 ${/\[(source|mask|image\d+)\]/i.test(f) ? "text-transparent caret-zinc-200" : "text-zinc-200"}`,
-                style: { lineHeight: "1.5", background: /\[(source|mask|image\d+)\]/i.test(f) ? "rgba(39,39,42,0.95)" : void 0 }
+                className: `w-full bg-zinc-800 border border-zinc-700 rounded px-2.5 py-2 text-sm placeholder-zinc-600 resize-none focus:outline-none focus:border-indigo-500 ${/\[(source|mask|image\d+)\]/i.test(b) ? "text-transparent caret-zinc-200" : "text-zinc-200"}`,
+                style: { lineHeight: "1.5", background: /\[(source|mask|image\d+)\]/i.test(b) ? "rgba(39,39,42,0.95)" : void 0 }
               }
             )
           ] }),
@@ -623,7 +625,7 @@ function Ue({
             "Use [source] for the original image",
             $.length > 0 && /* @__PURE__ */ c(ce, { children: [
               ", ",
-              $.map((e, m) => `[image${m + 1}]`).join(", "),
+              $.map((e, h) => `[image${h + 1}]`).join(", "),
               " for references"
             ] })
           ] })
@@ -635,7 +637,7 @@ function Ue({
               {
                 type: "checkbox",
                 checked: z,
-                onChange: (e) => j(e.target.checked),
+                onChange: (e) => W(e.target.checked),
                 className: "accent-indigo-500"
               }
             ),
@@ -645,11 +647,11 @@ function Ue({
           /* @__PURE__ */ r(
             "button",
             {
-              onClick: ie,
-              disabled: !f.trim() || te,
+              onClick: ae,
+              disabled: !b.trim() || te,
               className: "w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors bg-indigo-600 text-white hover:bg-indigo-500 disabled:opacity-40 disabled:cursor-not-allowed",
               children: te ? /* @__PURE__ */ c(ce, { children: [
-                /* @__PURE__ */ r(me, { size: 16, className: "animate-spin" }),
+                /* @__PURE__ */ r(he, { size: 16, className: "animate-spin" }),
                 "Generating..."
               ] }) : /* @__PURE__ */ c(ce, { children: [
                 /* @__PURE__ */ r(Ne, { size: 16 }),
@@ -657,14 +659,14 @@ function Ue({
               ] })
             }
           ),
-          /* @__PURE__ */ r("p", { className: "text-[10px] text-zinc-600 mt-1.5 text-center", children: f.trim() ? a.strokes.length === 0 ? "Ready — paint a mask for targeted edits" : "Ready to generate" : "Enter a prompt or pick a preset" })
+          /* @__PURE__ */ r("p", { className: "text-[10px] text-zinc-600 mt-1.5 text-center", children: b.trim() ? i.strokes.length === 0 ? "Ready — paint a mask for targeted edits" : "Ready to generate" : "Enter a prompt or pick a preset" })
         ] }),
         /* @__PURE__ */ c("div", { className: "p-3 flex-1 min-h-0 overflow-y-auto", children: [
           /* @__PURE__ */ r("h3", { className: "text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-2", children: "Edit History" }),
-          /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: S.map((e) => /* @__PURE__ */ c(
+          /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: R.map((e) => /* @__PURE__ */ c(
             "button",
             {
-              onClick: () => ae(e),
+              onClick: () => ie(e),
               className: `flex items-center gap-2 px-2.5 py-2 rounded text-left transition-colors ${M === e.index ? "bg-indigo-600/20 border border-indigo-500 text-zinc-200" : "bg-zinc-800/50 border border-transparent text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800"}`,
               children: [
                 /* @__PURE__ */ r("div", { className: "w-8 h-8 rounded overflow-hidden flex-shrink-0 bg-zinc-700", children: /* @__PURE__ */ r("img", { src: e.imageDataUrl, alt: e.label, className: "w-full h-full object-cover" }) }),
@@ -675,7 +677,7 @@ function Ue({
                     e.index
                   ] })
                 ] }),
-                M === e.index && /* @__PURE__ */ r(he, { size: 14, className: "text-indigo-400 flex-shrink-0" })
+                M === e.index && /* @__PURE__ */ r(me, { size: 14, className: "text-indigo-400 flex-shrink-0" })
               ]
             },
             e.index
@@ -697,7 +699,7 @@ function Ue({
               disabled: M === 0,
               className: "flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded text-sm font-semibold bg-green-600 text-white hover:bg-green-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
               children: [
-                /* @__PURE__ */ r(he, { size: 14 }),
+                /* @__PURE__ */ r(me, { size: 14 }),
                 "Apply"
               ]
             }

package/dist/types.d.ts

@@ -3,6 +3,8 @@ export interface GenerateRequest {
     prompt: string;
     maskedImageDataUrl?: string;
     selectedReferenceIds?: string[];
+    sourceWidth?: number;
+    sourceHeight?: number;
 }
 export interface EditorReferenceImage {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muse-image-editor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",