muse-image-editor 1.0.0

package/dist/ImageEditor.d.ts

@@ -0,0 +1,2 @@
+import type { ImageEditorProps } from './types';
+export declare function ImageEditor({ isOpen, onClose, onSave, onStepComplete, imageUrl, onGenerate, referenceImages, defaultReferenceIds, presets, initialHistory, imageResolution, title, }: ImageEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageEditor } from './ImageEditor';
+export type { ImageEditorProps, EditHistoryStep, EditorPreset, EditorReferenceImage, GenerateRequest, } from './types';
+export type { BrushStroke, UseMaskCanvasReturn } from './useMaskCanvas';
+export { useMaskCanvas, replayStrokes } from './useMaskCanvas';

package/dist/index.js

@@ -0,0 +1,714 @@
+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";
+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`;
+}
+function de(s, u, y, x, N) {
+  s.clearRect(0, 0, y, x);
+  for (const l of u) {
+    if (s.save(), l.tool === "eraser" ? (s.globalCompositeOperation = "destination-out", s.globalAlpha = 1) : (s.globalCompositeOperation = "source-over", s.globalAlpha = N), s.strokeStyle = "white", s.lineWidth = l.size, s.lineCap = "round", s.lineJoin = "round", s.beginPath(), l.points.length === 1) {
+      const g = l.points[0];
+      s.arc(g.x, g.y, l.size / 2, 0, Math.PI * 2), s.fillStyle = "white", s.fill();
+    } else {
+      s.moveTo(l.points[0].x, l.points[0].y);
+      for (let g = 1; g < l.points.length; g++)
+        s.lineTo(l.points[g].x, l.points[g].y);
+      s.stroke();
+    }
+    s.restore();
+  }
+}
+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;
+    if (!t) return { x: 0, y: 0 };
+    const i = t.getBoundingClientRect(), o = t.width / i.width, h = t.height / i.height;
+    return {
+      x: (n.clientX - i.left) * o,
+      y: (n.clientY - i.top) * h
+    };
+  }, []), O = C((n) => {
+    const t = S.current;
+    if (!t) return;
+    const i = t.getContext("2d");
+    i && de(i, 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);
+      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 = {
+      points: [t],
+      size: l,
+      tool: x
+    };
+    const i = S.current;
+    if (!i) return;
+    const o = i.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) => {
+    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 });
+      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");
+    !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) => {
+    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;
+      }), A([]);
+    }
+  }, [O]), X = C(() => {
+    j((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;
+    });
+  }, [O]), 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;
+    });
+  }, [O]), re = C(() => {
+    const n = S.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) => {
+    n.preventDefault();
+    const t = n.deltaY > 0 ? -0.1 : 0.1;
+    I((i) => Math.min(5, Math.max(0.1, i + 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());
+    };
+    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 Y = S.current;
+      if (Y) {
+        Y.width = v, Y.height = P;
+        const L = Y.getContext("2d");
+        L && L.clearRect(0, 0, v, P);
+      }
+      if (j([]), 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 (J > 0 && G > 0) {
+            const _ = Math.min(J / v, G / P, 1);
+            I(_);
+          } else
+            I(1);
+        } else
+          I(1);
+      }
+      i();
+    }, h.onerror = () => o(new Error("Failed to load image")), h.src = n;
+  }), []), oe = C(() => {
+    const n = a.current;
+    if (!n) return null;
+    const { width: t, height: i } = R;
+    if (t === 0 || i === 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));
+    }
+    return o.toDataURL("image/png");
+  }, [z, R]), e = C((n = 20) => {
+    const t = a.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;
+    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);
+    }
+    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 (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;
+    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);
+  return {
+    imageCanvasRef: a,
+    maskCanvasRef: S,
+    containerRef: w,
+    activeTool: x,
+    setActiveTool: N,
+    brushSize: l,
+    setBrushSize: g,
+    zoom: b,
+    pan: d,
+    handleZoomIn: ae,
+    handleZoomOut: ie,
+    handleWheel: se,
+    strokes: z,
+    redoStack: $,
+    handleUndo: X,
+    handleRedo: q,
+    handleClearMask: re,
+    handlePointerDown: ee,
+    handlePointerMove: te,
+    handlePointerUp: ne,
+    imageDimensions: R,
+    loadImage: le,
+    exportMaskedImage: oe,
+    exportCroppedRegion: e,
+    exportMask: m,
+    cursorStyle: p
+  };
+}
+const De = (s, u, y) => new Promise((x, N) => {
+  const l = new Image(), g = new Image();
+  let b = 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");
+    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);
+    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;
+    }
+    z.putImageData(A, 0, 0), x(E.toDataURL("image/png"));
+  }, d = () => {
+    ++b === 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++) {
+    let I = 0;
+    for (let d = -x; d <= x; d++)
+      I += s[b * u + Math.max(0, Math.min(u - 1, d))];
+    for (let d = 0; d < u; d++) {
+      N[b * 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];
+    }
+  }
+  const g = new Float32Array(u * y);
+  for (let b = 0; b < u; b++) {
+    let I = 0;
+    for (let d = -x; d <= x; d++)
+      I += N[Math.max(0, Math.min(y - 1, d)) * u + b];
+    for (let d = 0; d < y; d++) {
+      g[d * u + b] = 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];
+    }
+  }
+  return g;
+};
+function Ue({
+  isOpen: s,
+  onClose: u,
+  onSave: y,
+  onStepComplete: x,
+  imageUrl: N,
+  onGenerate: l,
+  referenceImages: g,
+  defaultReferenceIds: b,
+  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);
+  V(() => {
+    if (!s) {
+      X.current = !1;
+      return;
+    }
+    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));
+      return;
+    }
+    X.current || (X.current = !0, E(!0), a.loadImage(N).then(() => {
+      const e = a.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([{
+          index: 0,
+          label: "Original",
+          imageDataUrl: m.toDataURL("image/png"),
+          prompt: ""
+        }]), Z(0);
+      }
+      E(!1);
+    }).catch(() => E(!1)));
+  }, [s, N, d]), V(() => {
+    s && b && b.length > 0 && A(b);
+  }, [s, b]);
+  const q = C((e) => {
+    R((m) => {
+      const p = new Set(m);
+      return p.has(e) ? p.delete(e) : p.add(e), p;
+    });
+  }, []);
+  V(() => {
+    if (!s) return;
+    const e = (m) => {
+      m.key === "Escape" && u();
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [s, u]), V(() => {
+    if (s)
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = "";
+      };
+  }, [s]);
+  const re = C((e) => {
+    A((m) => m.includes(e) ? m.filter((p) => p !== e) : [...m, e]);
+  }, []), ae = C(
+    (e) => {
+      Z(e.index), a.loadImage(e.imageDataUrl, !0), K(e.prompt);
+    },
+    [a.loadImage]
+  ), ie = C(async () => {
+    if (!l || !f.trim()) return;
+    const e = S[M];
+    if (!e) return;
+    const m = a.strokes.length > 0 ? a.exportMaskedImage() : void 0;
+    ne(!0);
+    try {
+      const p = await l({
+        sourceImageDataUrl: e.imageDataUrl,
+        prompt: f.trim(),
+        maskedImageDataUrl: m || void 0,
+        selectedReferenceIds: $.length > 0 ? [...$] : void 0
+      });
+      let n = p;
+      if (z && m) {
+        const h = a.exportMask();
+        h && (n = await De(e.imageDataUrl, p, h));
+      }
+      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
+      };
+      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}`);
+    } finally {
+      ne(!1);
+    }
+  }, [f, S, M, a, $, l, z, x]), se = C(() => {
+    const e = S[M];
+    !e || M === 0 || y(e.imageDataUrl);
+  }, [S, M, y]), le = C((e) => {
+    K(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);
+    }
+    return Array.from(e.entries()).sort(([m], [p]) => m.localeCompare(p));
+  }, [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"}`,
+          title: "Brush (paint mask)",
+          children: [
+            /* @__PURE__ */ r(xe, { size: 16 }),
+            "Brush"
+          ]
+        }
+      ),
+      /* @__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"}`,
+          title: "Eraser (remove mask)",
+          children: [
+            /* @__PURE__ */ r(pe, { size: 16 }),
+            "Eraser"
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "w-px h-6 bg-zinc-700" }),
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r("span", { className: "text-xs text-zinc-500", children: "Size" }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            type: "range",
+            min: 4,
+            max: 500,
+            value: a.brushSize,
+            onChange: (e) => a.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("div", { className: "w-px h-6 bg-zinc-700" }),
+      /* @__PURE__ */ c(
+        "button",
+        {
+          onClick: a.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: [
+            /* @__PURE__ */ r(fe, { size: 14 }),
+            "Clear"
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "flex-1" }),
+      /* @__PURE__ */ r("span", { className: "text-sm text-zinc-400 font-medium", children: w }),
+      /* @__PURE__ */ r("div", { className: "flex-1" }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: a.handleUndo,
+          disabled: a.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 })
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: a.handleRedo,
+          disabled: a.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 })
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "w-px h-6 bg-zinc-700" }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: u,
+          className: "p-1.5 rounded text-zinc-400 hover:text-white hover:bg-zinc-700 transition-colors",
+          title: "Close editor",
+          children: /* @__PURE__ */ r(we, { size: 20 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: "flex-1 flex items-center justify-center bg-zinc-950 overflow-hidden relative",
+          onWheel: a.handleWheel,
+          children: [
+            /* @__PURE__ */ c(
+              "div",
+              {
+                ref: a.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,
+                  transformOrigin: "center center",
+                  position: "relative"
+                },
+                children: [
+                  /* @__PURE__ */ r(
+                    "canvas",
+                    {
+                      ref: a.imageCanvasRef,
+                      style: { position: "absolute", top: 0, left: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "canvas",
+                    {
+                      ref: a.maskCanvasRef,
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        cursor: a.cursorStyle
+                      },
+                      onPointerDown: a.handlePointerDown,
+                      onPointerMove: a.handlePointerMove,
+                      onPointerUp: a.handlePointerUp,
+                      onPointerCancel: a.handlePointerUp,
+                      onContextMenu: (e) => e.preventDefault()
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__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__ */ c("span", { className: "text-xs text-zinc-400 w-12 text-center", children: [
+                Math.round(a.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 }) })
+            ] }),
+            a.imageDimensions.width > 0 && /* @__PURE__ */ c("div", { className: "absolute bottom-4 left-4 text-xs text-zinc-600", children: [
+              a.imageDimensions.width,
+              " x ",
+              a.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" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ c("div", { className: "w-80 bg-zinc-900 border-l border-zinc-800 flex flex-col overflow-y-auto", children: [
+        g && g.length > 0 && oe.length > 0 && /* @__PURE__ */ c("div", { className: "border-b border-zinc-800", children: [
+          /* @__PURE__ */ r("div", { className: "px-3 pt-3 pb-1", children: /* @__PURE__ */ c("h3", { className: "text-xs font-semibold text-zinc-400 uppercase tracking-wider", children: [
+            "Reference Images",
+            $.length > 0 && /* @__PURE__ */ c("span", { className: "ml-2 text-[10px] text-zinc-500 normal-case font-normal", children: [
+              $.length,
+              " selected"
+            ] })
+          ] }) }),
+          oe.map(([e, m]) => {
+            const p = D.has(e), n = m.filter((t) => $.includes(t.id)).length;
+            return /* @__PURE__ */ c("div", { className: "border-t border-zinc-800/50", children: [
+              /* @__PURE__ */ c(
+                "button",
+                {
+                  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" }),
+                    /* @__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 }),
+                    n > 0 && /* @__PURE__ */ c("span", { className: "ml-auto text-[9px] text-blue-400", children: [
+                      n,
+                      " sel"
+                    ] })
+                  ]
+                }
+              ),
+              !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;
+                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"}`,
+                    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 }),
+                      /* @__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 })
+                    ]
+                  },
+                  t.id
+                );
+              }) })
+            ] }, e);
+          })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "p-3 border-b border-zinc-800", children: [
+          /* @__PURE__ */ r("h3", { className: "text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-2", children: "Prompt" }),
+          I && I.length > 0 && /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1.5 mb-2", children: I.map((e) => /* @__PURE__ */ r(
+            "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"}`,
+              children: e.label
+            },
+            e.id
+          )) }),
+          /* @__PURE__ */ c("div", { className: "relative", children: [
+            /\[(source|mask|image\d+)\]/i.test(f) && /* @__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)
+                  ),
+                  `
+`
+                ]
+              }
+            ),
+            /* @__PURE__ */ r(
+              "textarea",
+              {
+                value: f,
+                onChange: (e) => {
+                  K(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 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ c("p", { className: "text-[10px] text-zinc-500 mt-1", children: [
+            "Use [source] for the original image",
+            $.length > 0 && /* @__PURE__ */ c(ce, { children: [
+              ", ",
+              $.map((e, m) => `[image${m + 1}]`).join(", "),
+              " for references"
+            ] })
+          ] })
+        ] }),
+        l && /* @__PURE__ */ c("div", { className: "p-3 border-b border-zinc-800", children: [
+          /* @__PURE__ */ c("label", { className: "flex items-center gap-2 mb-2 cursor-pointer", children: [
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "checkbox",
+                checked: z,
+                onChange: (e) => j(e.target.checked),
+                className: "accent-indigo-500"
+              }
+            ),
+            /* @__PURE__ */ r("span", { className: "text-xs text-zinc-400", children: "Mask composite" }),
+            /* @__PURE__ */ r("span", { className: "text-[10px] text-zinc-600", children: "— only apply AI changes inside the mask" })
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              onClick: ie,
+              disabled: !f.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" }),
+                "Generating..."
+              ] }) : /* @__PURE__ */ c(ce, { children: [
+                /* @__PURE__ */ r(Ne, { size: 16 }),
+                "Generate Edit"
+              ] })
+            }
+          ),
+          /* @__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__ */ 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(
+            "button",
+            {
+              onClick: () => ae(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" }) }),
+                /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ r("p", { className: "text-xs font-medium truncate", children: e.index === 0 ? "Original" : e.label }),
+                  e.index > 0 && /* @__PURE__ */ c("p", { className: "text-[10px] text-zinc-500 truncate", children: [
+                    "Step ",
+                    e.index
+                  ] })
+                ] }),
+                M === e.index && /* @__PURE__ */ r(he, { size: 14, className: "text-indigo-400 flex-shrink-0" })
+              ]
+            },
+            e.index
+          )) })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "p-3 border-t border-zinc-800 flex gap-2", children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              onClick: u,
+              className: "flex-1 px-3 py-2 rounded text-sm font-medium bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700 transition-colors",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ c(
+            "button",
+            {
+              onClick: se,
+              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 }),
+                "Apply"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  Ue as ImageEditor,
+  de as replayStrokes,
+  Me as useMaskCanvas
+};

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+export interface GenerateRequest {
+    sourceImageDataUrl: string;
+    prompt: string;
+    maskedImageDataUrl?: string;
+    selectedReferenceIds?: string[];
+}
+export interface EditorReferenceImage {
+    id: string;
+    url: string;
+    name: string;
+    category?: string;
+    thumbnailUrl?: string;
+}
+export interface EditorPreset {
+    id: string;
+    label: string;
+    prompt: string;
+}
+export interface EditHistoryStep {
+    index: number;
+    label: string;
+    imageDataUrl: string;
+    prompt: string;
+    maskDataUrl?: string;
+}
+export interface ImageEditorProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (resultDataUrl: string) => void;
+    imageUrl: string;
+    onGenerate?: (request: GenerateRequest) => Promise<string>;
+    referenceImages?: EditorReferenceImage[];
+    defaultReferenceIds?: string[];
+    presets?: EditorPreset[];
+    initialHistory?: EditHistoryStep[];
+    onStepComplete?: (step: EditHistoryStep) => void;
+    title?: string;
+    imageResolution?: string;
+}

package/dist/useMaskCanvas.d.ts

@@ -0,0 +1,55 @@
+export interface BrushStroke {
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+    size: number;
+    tool: 'brush' | 'eraser';
+}
+interface UseMaskCanvasOptions {
+    /** Whether to register keyboard shortcuts (default: true). */
+    enableShortcuts?: boolean;
+    /** Whether the canvas is active/visible (controls shortcut registration). */
+    isActive?: boolean;
+}
+export interface UseMaskCanvasReturn {
+    imageCanvasRef: React.RefObject<HTMLCanvasElement | null>;
+    maskCanvasRef: React.RefObject<HTMLCanvasElement | null>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    activeTool: 'brush' | 'eraser';
+    setActiveTool: (tool: 'brush' | 'eraser') => void;
+    brushSize: number;
+    setBrushSize: (size: number | ((prev: number) => number)) => void;
+    zoom: number;
+    pan: {
+        x: number;
+        y: number;
+    };
+    handleZoomIn: () => void;
+    handleZoomOut: () => void;
+    handleWheel: (e: React.WheelEvent) => void;
+    strokes: BrushStroke[];
+    redoStack: BrushStroke[];
+    handleUndo: () => void;
+    handleRedo: () => void;
+    handleClearMask: () => void;
+    handlePointerDown: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handlePointerMove: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    handlePointerUp: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    imageDimensions: {
+        width: number;
+        height: number;
+    };
+    loadImage: (url: string, preserveView?: boolean) => Promise<void>;
+    exportMaskedImage: () => string | null;
+    exportCroppedRegion: (padding?: number) => string | null;
+    exportMask: () => HTMLCanvasElement | null;
+    cursorStyle: string;
+}
+/**
+ * Replay all strokes onto a canvas context at the given opacity.
+ * Clears the canvas first.
+ */
+export declare function replayStrokes(ctx: CanvasRenderingContext2D, strokeList: BrushStroke[], width: number, height: number, opacity: number): void;
+export declare function useMaskCanvas(options?: UseMaskCanvasOptions): UseMaskCanvasReturn;
+export {};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "muse-image-editor",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --outDir dist",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "lucide-react": ">=0.300.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "lucide-react": "^0.564.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}