@pixerate/editor-react 0.59.0 → 0.61.0

package/dist/{chunk-SYTV33TW.js → chunk-OSOGA2OJ.js}

@@ -96,11 +96,11 @@ function useImageEditor(options = {}) {
     [controller]
   );
   const applyInpaintedImage = useCallback(
-    (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
+    (newDataUrl, options2) => controller.applyInpaintedImage(newDataUrl, options2),
     [controller]
   );
   const applyBackgroundRemovedImage = useCallback(
-    (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
+    (newDataUrl, options2) => controller.applyBackgroundRemovedImage(newDataUrl, options2),
     [controller]
   );
   return useMemo(
@@ -629,14 +629,17 @@ var AdjustmentLayersPanel = ({ controller, layers: layersProp, histogram }) => {
 import { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 import {
   BLEND_MODES as BLEND_MODES2,
+  PSD_FILE_ACCEPT,
+  downloadPsd,
   dropPlacement,
   dropZone,
+  openPsdFile,
   layerBadge,
   layerMenu,
   layerPanelRows,
   runLayerMenuAction
 } from "@pixerate/editor/image-editor";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var iconButton = "px-1.5 py-0.5 rounded text-[10px] bg-slate-800 text-slate-300 hover:text-white disabled:opacity-40";
 var rowClass = (active) => `flex items-center gap-1.5 px-1.5 py-1 rounded cursor-pointer select-none ${active ? "bg-indigo-600/30 ring-1 ring-indigo-500" : "hover:bg-slate-800"}`;
 var Thumbnail = ({
@@ -671,13 +674,23 @@ var Thumbnail = ({
     }
   );
 };
-var LayersPanel = ({ controller, thumbnailSize = 32, className }) => {
+var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "image", className }) => {
   const [, setTick] = useState5(0);
   useEffect4(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = useState5(null);
   const [renaming, setRenaming] = useState5(null);
   const [menu, setMenu] = useState5(null);
   const [drag, setDrag] = useState5(null);
+  const [psdNotes, setPsdNotes] = useState5([]);
+  const fileInput = useRef3(null);
+  const psdTask = async (fn) => {
+    try {
+      setError(null);
+      setPsdNotes(await fn());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
   const commitNext = useRef3(true);
   const state = controller.getState();
   const rows = layerPanelRows(state.layers, state.activeLayerId);
@@ -737,7 +750,31 @@ var LayersPanel = ({ controller, thumbnailSize = 32, className }) => {
           },
           children: "\u22EF"
         }
-      )
+      ),
+      psd && /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, onClick: () => fileInput.current?.click(), children: "Open PSD\u2026" }),
+        /* @__PURE__ */ jsx5("button", { type: "button", className: iconButton, onClick: () => psdTask(async () => (await downloadPsd(controller, psdFileName)).warnings), children: "Export PSD" }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            ref: fileInput,
+            type: "file",
+            accept: 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(() => openPsdFile(controller, file));
+            }
+          }
+        )
+      ] })
+    ] }),
+    psdNotes.length > 0 && /* @__PURE__ */ jsxs5("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__ */ jsx5("li", { children: n }, n)),
+      /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5("button", { type: "button", className: "underline", onClick: () => setPsdNotes([]), children: "Dismiss" }) })
     ] }),
     active && /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1 items-center", "data-testid": "layer-properties", children: [
       /* @__PURE__ */ jsxs5("label", { className: "flex flex-col gap-0.5", children: [
@@ -1140,6 +1177,22 @@ var SelectionOptionsBar = ({
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
         /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: options.sampleMerged, onChange: (e) => set({ sampleMerged: e.target.checked }) }),
         "Sample adjusted image"
+      ] }),
+      /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
+        "Sample",
+        /* @__PURE__ */ jsxs7(
+          "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__ */ jsx7("option", { value: "composite", children: "All layers" }),
+              /* @__PURE__ */ jsx7("option", { value: "active-layer", children: "Active layer" })
+            ]
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-2 text-slate-300", children: [
@@ -1183,7 +1236,7 @@ import {
   adjustmentKindLabel as adjustmentKindLabel2,
   layerMaskFromSelection
 } from "@pixerate/editor/image-editor";
-import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_PARAMS = { radius: 8, smartRadius: false, smooth: 0, feather: 0, contrast: 0, shiftEdge: 0 };
 var button = "px-2 py-1 rounded-md border border-slate-800 bg-slate-950 text-[11px] text-slate-200 hover:text-white disabled:opacity-40";
 var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
@@ -1281,7 +1334,7 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
         /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.selectionFromLayerMask(target.id), children: "Load as Selection" }),
         /* @__PURE__ */ jsx8("button", { type: "button", className: button, disabled: !target.mask, onClick: () => controller.setAdjustmentLayerMask(target.id, null), children: "Remove Mask" })
       ] }),
-      target.mask && /* @__PURE__ */ jsxs8(Fragment, { children: [
+      target.mask && /* @__PURE__ */ jsxs8(Fragment2, { children: [
         /* @__PURE__ */ jsxs8("label", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ jsxs8("span", { className: "flex justify-between text-slate-400", children: [
             /* @__PURE__ */ jsx8("span", { children: "Density" }),
@@ -1332,7 +1385,7 @@ var RefineEdgePanel = ({ controller, selection, layers, className = "" }) => {
 };
 
 // src/image-editor/ImageEditor.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var ImageEditor = ({
   editor: externalEditor,
   src,
@@ -1375,6 +1428,8 @@ var ImageEditor = ({
   const [isInpainting, setIsInpainting] = useState9(false);
   const [aiError, setAiError] = useState9(null);
   const [aiSuccess, setAiSuccess] = useState9(null);
+  const [aiTarget, setAiTarget] = useState9("auto");
+  const aiOptions = aiTarget === "auto" ? {} : { target: aiTarget };
   const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
   const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
   const handleRemoveBackground = async () => {
@@ -1386,10 +1441,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.");
@@ -1413,7 +1468,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"
@@ -1425,7 +1480,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.");
@@ -2440,7 +2495,7 @@ var ImageEditor = ({
                 ),
                 /* @__PURE__ */ jsx9("span", { children: "Enable Depth / Alpha Mask" })
               ] }),
-              state.depthMask.enabled && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+              state.depthMask.enabled && /* @__PURE__ */ jsxs9(Fragment3, { children: [
                 /* @__PURE__ */ jsxs9("div", { children: [
                   /* @__PURE__ */ jsx9("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
                   /* @__PURE__ */ jsx9(
@@ -2558,6 +2613,23 @@ var ImageEditor = ({
               /* @__PURE__ */ jsx9(RefineEdgePanel, { controller, selection: state.selection ?? null, layers: state.adjustments.layers })
             ] }),
             activeTab === "ai" && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxs9("label", { className: "flex items-center justify-between gap-2 text-slate-300", children: [
+                /* @__PURE__ */ jsx9("span", { children: "Results go to" }),
+                /* @__PURE__ */ jsxs9(
+                  "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__ */ jsx9("option", { value: "auto", children: controller.isMultiLayer ? "Auto (new layer)" : "Auto (replace image)" }),
+                      /* @__PURE__ */ jsx9("option", { value: "new-layer", children: "New layer / mask" }),
+                      /* @__PURE__ */ jsx9("option", { value: "replace", children: "Replace image" })
+                    ]
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxs9("div", { className: "p-3 rounded-lg bg-slate-950/60 border border-slate-800 flex flex-col gap-2.5", children: [
                 /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
                   /* @__PURE__ */ jsxs9("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
@@ -2574,10 +2646,10 @@ var ImageEditor = ({
                     onClick: handleRemoveBackground,
                     disabled: isRemovingBg || isInpainting,
                     className: "mt-1 px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isRemovingBg ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                    children: isRemovingBg ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
                       /* @__PURE__ */ jsx9("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Removing Background..."
-                    ] }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                    ] }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
                       /* @__PURE__ */ jsx9("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx9("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Remove Background"
                     ] })
@@ -2648,10 +2720,10 @@ var ImageEditor = ({
                     onClick: handleInpaint,
                     disabled: isInpainting || isRemovingBg || !inpaintPrompt.trim(),
                     className: "mt-1 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 disabled:opacity-50 text-white font-medium shadow transition-colors flex items-center justify-center gap-2",
-                    children: isInpainting ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                    children: isInpainting ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
                       /* @__PURE__ */ jsx9("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
                       "Generating Inpaint..."
-                    ] }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                    ] }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
                       /* @__PURE__ */ jsx9("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx9("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }),
                       "Apply Inpainting"
                     ] })
@@ -2681,4 +2753,4 @@ export {
   RefineEdgePanel,
   ImageEditor
 };
-//# sourceMappingURL=chunk-SYTV33TW.js.map
+//# sourceMappingURL=chunk-OSOGA2OJ.js.map