@pixerate/editor-react 0.59.0 → 0.60.0

package/dist/image-editor/index.cjs

@@ -140,11 +140,11 @@ function useImageEditor(options = {}) {
     [controller]
   );
   const applyInpaintedImage = (0, import_react.useCallback)(
-    (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
+    (newDataUrl, options2) => controller.applyInpaintedImage(newDataUrl, options2),
     [controller]
   );
   const applyBackgroundRemovedImage = (0, import_react.useCallback)(
-    (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
+    (newDataUrl, options2) => controller.applyBackgroundRemovedImage(newDataUrl, options2),
     [controller]
   );
   return (0, import_react.useMemo)(
@@ -673,13 +673,23 @@ var Thumbnail = ({
     }
   );
 };
-var LayersPanel = ({ controller, thumbnailSize = 32, className }) => {
+var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", className }) => {
   const [, setTick] = (0, import_react5.useState)(0);
   (0, import_react5.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = (0, import_react5.useState)(null);
   const [renaming, setRenaming] = (0, import_react5.useState)(null);
   const [menu, setMenu] = (0, import_react5.useState)(null);
   const [drag, setDrag] = (0, import_react5.useState)(null);
+  const [psdNotes, setPsdNotes] = (0, import_react5.useState)([]);
+  const fileInput = (0, import_react5.useRef)(null);
+  const psdTask = async (fn) => {
+    try {
+      setError(null);
+      setPsdNotes(await fn());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
   const commitNext = (0, import_react5.useRef)(true);
   const state = controller.getState();
   const rows = (0, import_image_editor6.layerPanelRows)(state.layers, state.activeLayerId);
@@ -739,7 +749,31 @@ var LayersPanel = ({ controller, thumbnailSize = 32, className }) => {
           },
           children: "\u22EF"
         }
-      )
+      ),
+      psd && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: iconButton, onClick: () => psdTask(async () => (await (0, import_image_editor6.downloadPsd)(controller, psdFileName)).warnings), children: "Export PSD" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            ref: fileInput,
+            type: "file",
+            accept: import_image_editor6.PSD_FILE_ACCEPT,
+            className: "hidden",
+            "data-testid": "psd-file-input",
+            "aria-label": "Open a PSD file",
+            onChange: (e) => {
+              const file = e.currentTarget.files?.[0];
+              e.currentTarget.value = "";
+              if (file) psdTask(() => (0, import_image_editor6.openPsdFile)(controller, file));
+            }
+          }
+        )
+      ] })
+    ] }),
+    psdNotes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "rounded bg-amber-900/30 text-amber-200 px-2 py-1 space-y-0.5", "data-testid": "psd-warnings", "aria-label": "PSD warnings", children: [
+      psdNotes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: n }, n)),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
     ] }),
     active && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
@@ -1137,6 +1171,22 @@ var SelectionOptionsBar = ({
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        "Sample",
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "select",
+          {
+            "aria-label": "Sample from",
+            value: options.sample ?? "composite",
+            onChange: (e) => set({ sample: e.target.value }),
+            className: "bg-slate-800 border border-slate-700 rounded px-1 py-0.5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "active-layer", children: "Active layer" })
+            ]
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
@@ -1367,6 +1417,8 @@ var ImageEditor = ({
   const [isInpainting, setIsInpainting] = (0, import_react9.useState)(false);
   const [aiError, setAiError] = (0, import_react9.useState)(null);
   const [aiSuccess, setAiSuccess] = (0, import_react9.useState)(null);
+  const [aiTarget, setAiTarget] = (0, import_react9.useState)("auto");
+  const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -1378,10 +1430,10 @@ var ImageEditor = ({
     setAiSuccess(null);
     setIsRemovingBg(true);
     try {
-      const imageDataUrl = await editor.toSourceDataURL();
+      const imageDataUrl = await controller.toAIInputDataURL(aiOptions);
       const result = await effectiveOnRemoveBg({ imageDataUrl });
       if (typeof result === "string") {
-        await editor.applyBackgroundRemovedImage(result);
+        await editor.applyBackgroundRemovedImage(result, aiOptions);
         setAiSuccess("Background removed successfully!");
       } else {
         setAiSuccess("Background removal complete.");
@@ -1405,7 +1457,7 @@ var ImageEditor = ({
     setAiSuccess(null);
     setIsInpainting(true);
     try {
-      const imageDataUrl = await editor.toSourceDataURL();
+      const imageDataUrl = await controller.toAIInputDataURL(aiOptions);
       const maskDataUrl = await editor.toMaskDataURL({
         useAnnotations: inpaintMaskMode === "annotations",
         useCrop: inpaintMaskMode === "crop"
@@ -1417,7 +1469,7 @@ var ImageEditor = ({
         cropBox: inpaintMaskMode === "crop" ? editor.state.crop : null
       });
       if (typeof result === "string") {
-        await editor.applyInpaintedImage(result);
+        await editor.applyInpaintedImage(result, aiOptions);
         setAiSuccess("Inpainting applied successfully!");
       } else {
         setAiSuccess("Inpainting complete.");
@@ -2550,6 +2602,23 @@ var ImageEditor = ({
               /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
             activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Results go to" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  "select",
+                  {
+                    "aria-label": "AI result target",
+                    value: aiTarget,
+                    onChange: (e) => setAiTarget(e.target.value),
+                    className: "bg-slate-800 border border-slate-700 rounded px-1.5 py-1",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "replace", children: "Replace image" })
+                    ]
+                  }
+                )
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [