@pixerate/editor-react 0.59.0 → 0.61.0

package/dist/image-editor/index.d.cts

@@ -1,4 +1,4 @@
-import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, AdjustmentKind, AdjustmentLayerInit, AdjustmentLayerUpdate, ImageHistogram, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ControlSpec, CurvePoint, AdjustmentLayer, SelectionToolOptions, SelectionMask } from '@pixerate/editor/image-editor';
+import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, AdjustmentKind, AdjustmentLayerInit, AdjustmentLayerUpdate, ImageHistogram, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, AIResultOptions, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ControlSpec, CurvePoint, AdjustmentLayer, SelectionToolOptions, SelectionMask } from '@pixerate/editor/image-editor';
 import React__default from 'react';
 
 interface UseImageEditorReturn {
@@ -56,8 +56,10 @@ interface UseImageEditorReturn {
         useCrop?: boolean;
     }) => Promise<string>;
     toSourceDataURL: (options?: Pick<ExportOptions, 'format' | 'quality'>) => Promise<string>;
-    applyInpaintedImage: (newDataUrl: string) => Promise<void>;
-    applyBackgroundRemovedImage: (newDataUrl: string) => Promise<void>;
+    /** In documents with several layers (or `target: 'new-layer'`) the result goes to a new layer. */
+    applyInpaintedImage: (newDataUrl: string, options?: AIResultOptions) => Promise<string | void>;
+    /** In documents with several layers (or `target: 'new-layer'`) the result's alpha masks the active layer. */
+    applyBackgroundRemovedImage: (newDataUrl: string, options?: AIResultOptions) => Promise<string | void>;
 }
 declare function useImageEditor(options?: ImageEditorOptions): UseImageEditorReturn;
 
@@ -160,6 +162,10 @@ interface LayersPanelProps {
     controller: ImageEditorController;
     /** Thumbnail size in px (default 32). */
     thumbnailSize?: number;
+    /** Show Open PSD / Export PSD (default true). */
+    psd?: boolean;
+    /** Base name of exported PSD files (default `image`). */
+    psdFileName?: string;
     className?: string;
 }
 /**

package/dist/image-editor/index.d.ts

@@ -1,4 +1,4 @@
-import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, AdjustmentKind, AdjustmentLayerInit, AdjustmentLayerUpdate, ImageHistogram, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ControlSpec, CurvePoint, AdjustmentLayer, SelectionToolOptions, SelectionMask } from '@pixerate/editor/image-editor';
+import { ImageEditorController, ImageEditorState, ImageEditorTool, CropBox, AspectRatio, ImageAdjustments, AdjustmentKind, AdjustmentLayerInit, AdjustmentLayerUpdate, ImageHistogram, DepthMaskOptions, CreateAnnotationPayload, Annotation, ImagePoint, ExportOptions, SerializedImageEditorState, AIResultOptions, ImageEditorOptions, InpaintHook, RemoveBackgroundHook, ImageEditorAIHooks, ControlSpec, CurvePoint, AdjustmentLayer, SelectionToolOptions, SelectionMask } from '@pixerate/editor/image-editor';
 import React__default from 'react';
 
 interface UseImageEditorReturn {
@@ -56,8 +56,10 @@ interface UseImageEditorReturn {
         useCrop?: boolean;
     }) => Promise<string>;
     toSourceDataURL: (options?: Pick<ExportOptions, 'format' | 'quality'>) => Promise<string>;
-    applyInpaintedImage: (newDataUrl: string) => Promise<void>;
-    applyBackgroundRemovedImage: (newDataUrl: string) => Promise<void>;
+    /** In documents with several layers (or `target: 'new-layer'`) the result goes to a new layer. */
+    applyInpaintedImage: (newDataUrl: string, options?: AIResultOptions) => Promise<string | void>;
+    /** In documents with several layers (or `target: 'new-layer'`) the result's alpha masks the active layer. */
+    applyBackgroundRemovedImage: (newDataUrl: string, options?: AIResultOptions) => Promise<string | void>;
 }
 declare function useImageEditor(options?: ImageEditorOptions): UseImageEditorReturn;
 
@@ -160,6 +162,10 @@ interface LayersPanelProps {
     controller: ImageEditorController;
     /** Thumbnail size in px (default 32). */
     thumbnailSize?: number;
+    /** Show Open PSD / Export PSD (default true). */
+    psd?: boolean;
+    /** Base name of exported PSD files (default `image`). */
+    psdFileName?: string;
     className?: string;
 }
 /**

package/dist/image-editor/index.js

@@ -10,7 +10,7 @@ import {
   SelectionOptionsBar,
   useImageEditor,
   useImageHistogram
-} from "../chunk-SYTV33TW.js";
+} from "../chunk-OSOGA2OJ.js";
 export {
   AdjustmentLayersPanel,
   BrushOptionsBar,

package/dist/index.cjs

@@ -3720,11 +3720,11 @@ function useImageEditor(options = {}) {
     [controller]
   );
   const applyInpaintedImage = (0, import_react34.useCallback)(
-    (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
+    (newDataUrl, options2) => controller.applyInpaintedImage(newDataUrl, options2),
     [controller]
   );
   const applyBackgroundRemovedImage = (0, import_react34.useCallback)(
-    (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
+    (newDataUrl, options2) => controller.applyBackgroundRemovedImage(newDataUrl, options2),
     [controller]
   );
   return (0, import_react34.useMemo)(
@@ -4253,13 +4253,23 @@ var Thumbnail = ({
     }
   );
 };
-var LayersPanel = ({ controller, thumbnailSize = 32, className }) => {
+var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", className }) => {
   const [, setTick] = (0, import_react38.useState)(0);
   (0, import_react38.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = (0, import_react38.useState)(null);
   const [renaming, setRenaming] = (0, import_react38.useState)(null);
   const [menu, setMenu] = (0, import_react38.useState)(null);
   const [drag, setDrag] = (0, import_react38.useState)(null);
+  const [psdNotes, setPsdNotes] = (0, import_react38.useState)([]);
+  const fileInput = (0, import_react38.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_react38.useRef)(true);
   const state = controller.getState();
   const rows = (0, import_image_editor6.layerPanelRows)(state.layers, state.activeLayerId);
@@ -4319,7 +4329,31 @@ var LayersPanel = ({ controller, thumbnailSize = 32, className }) => {
           },
           children: "\u22EF"
         }
-      )
+      ),
+      psd && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.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_runtime21.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_runtime21.jsx)("li", { children: n }, n)),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
     ] }),
     active && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "flex flex-col gap-0.5", children: [
@@ -4717,6 +4751,22 @@ var SelectionOptionsBar = ({
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        "Sample",
+        /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "active-layer", children: "Active layer" })
+            ]
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-2 text-slate-300", children: [
@@ -4947,6 +4997,8 @@ var ImageEditor = ({
   const [isInpainting, setIsInpainting] = (0, import_react42.useState)(false);
   const [aiError, setAiError] = (0, import_react42.useState)(null);
   const [aiSuccess, setAiSuccess] = (0, import_react42.useState)(null);
+  const [aiTarget, setAiTarget] = (0, import_react42.useState)("auto");
+  const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -4958,10 +5010,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.");
@@ -4985,7 +5037,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"
@@ -4997,7 +5049,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.");
@@ -6130,6 +6182,23 @@ var ImageEditor = ({
               /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
             activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Results go to" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "replace", children: "Replace image" })
+                    ]
+                  }
+                )
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsxs)("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [