@pixerate/editor-react 0.7.0 → 0.9.0

package/dist/image-editor/index.cjs

@@ -0,0 +1,1428 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/image-editor/index.ts
+var image_editor_exports = {};
+__export(image_editor_exports, {
+  ImageEditor: () => ImageEditor,
+  useImageEditor: () => useImageEditor
+});
+module.exports = __toCommonJS(image_editor_exports);
+
+// src/image-editor/useImageEditor.ts
+var import_react = require("react");
+var import_editor = require("@pixerate/editor");
+function useImageEditor(options = {}) {
+  const controllerRef = (0, import_react.useRef)(null);
+  if (!controllerRef.current) {
+    controllerRef.current = new import_editor.ImageEditorController(options);
+  }
+  const controller = controllerRef.current;
+  const [state, setState] = (0, import_react.useState)(() => controller.getState());
+  const [historyTicks, setHistoryTicks] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const unsub = controller.subscribe((next) => {
+      setState(next);
+      setHistoryTicks((t) => t + 1);
+    });
+    return unsub;
+  }, [controller]);
+  (0, import_react.useEffect)(() => {
+    if (options.image && options.image !== state.sourceUrl) {
+      controller.loadImage(options.image);
+    }
+  }, [options.image, controller, state.sourceUrl]);
+  const setTool = (0, import_react.useCallback)((tool) => controller.setTool(tool), [controller]);
+  const setCrop = (0, import_react.useCallback)(
+    (crop, addToHistory = true) => controller.setCrop(crop, addToHistory),
+    [controller]
+  );
+  const applyCropPreset = (0, import_react.useCallback)((ratio) => controller.applyCropPreset(ratio), [controller]);
+  const resetCrop = (0, import_react.useCallback)(() => controller.resetCrop(), [controller]);
+  const rotate = (0, import_react.useCallback)((deg) => controller.rotate(deg), [controller]);
+  const setRotation = (0, import_react.useCallback)((deg) => controller.setRotation(deg), [controller]);
+  const flipHorizontal = (0, import_react.useCallback)(() => controller.flipHorizontal(), [controller]);
+  const flipVertical = (0, import_react.useCallback)(() => controller.flipVertical(), [controller]);
+  const setAdjustments = (0, import_react.useCallback)(
+    (partial, commitToHistory = true) => controller.setAdjustments(partial, commitToHistory),
+    [controller]
+  );
+  const resetAdjustments = (0, import_react.useCallback)(() => controller.resetAdjustments(), [controller]);
+  const setDepthMask = (0, import_react.useCallback)((partial) => controller.setDepthMask(partial), [controller]);
+  const resetDepthMask = (0, import_react.useCallback)(() => controller.resetDepthMask(), [controller]);
+  const addAnnotation = (0, import_react.useCallback)((ann) => controller.addAnnotation(ann), [controller]);
+  const updateAnnotation = (0, import_react.useCallback)(
+    (id, partial, commitToHistory = true) => controller.updateAnnotation(id, partial, commitToHistory),
+    [controller]
+  );
+  const removeAnnotation = (0, import_react.useCallback)((id) => controller.removeAnnotation(id), [controller]);
+  const clearAnnotations = (0, import_react.useCallback)(() => controller.clearAnnotations(), [controller]);
+  const selectAnnotation = (0, import_react.useCallback)((id) => controller.selectAnnotation(id), [controller]);
+  const undo = (0, import_react.useCallback)(() => controller.undo(), [controller]);
+  const redo = (0, import_react.useCallback)(() => controller.redo(), [controller]);
+  const reset = (0, import_react.useCallback)(() => controller.reset(), [controller]);
+  const zoomIn = (0, import_react.useCallback)((factor) => controller.zoomIn(factor), [controller]);
+  const zoomOut = (0, import_react.useCallback)((factor) => controller.zoomOut(factor), [controller]);
+  const resetZoom = (0, import_react.useCallback)(() => controller.resetZoom(), [controller]);
+  const setZoom = (0, import_react.useCallback)((zoom) => controller.setZoom(zoom), [controller]);
+  const setPan = (0, import_react.useCallback)((pan) => controller.setPan(pan), [controller]);
+  const setComparing = (0, import_react.useCallback)((comp) => controller.setComparing(comp), [controller]);
+  const loadImage = (0, import_react.useCallback)((src) => controller.loadImage(src), [controller]);
+  const toDataURL = (0, import_react.useCallback)((opts) => controller.toDataURL(opts), [controller]);
+  const toBlob = (0, import_react.useCallback)((opts) => controller.toBlob(opts), [controller]);
+  const toJSON = (0, import_react.useCallback)(() => controller.toJSON(), [controller]);
+  const loadJSON = (0, import_react.useCallback)((data) => controller.loadJSON(data), [controller]);
+  const renderMask = (0, import_react.useCallback)(
+    (opts) => controller.renderMask(opts),
+    [controller]
+  );
+  const toMaskDataURL = (0, import_react.useCallback)(
+    (opts) => controller.toMaskDataURL(opts),
+    [controller]
+  );
+  const applyInpaintedImage = (0, import_react.useCallback)(
+    (newDataUrl) => controller.applyInpaintedImage(newDataUrl),
+    [controller]
+  );
+  const applyBackgroundRemovedImage = (0, import_react.useCallback)(
+    (newDataUrl) => controller.applyBackgroundRemovedImage(newDataUrl),
+    [controller]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      controller,
+      state,
+      canUndo: controller.canUndo,
+      canRedo: controller.canRedo,
+      setTool,
+      setCrop,
+      applyCropPreset,
+      resetCrop,
+      rotate,
+      setRotation,
+      flipHorizontal,
+      flipVertical,
+      setAdjustments,
+      resetAdjustments,
+      setDepthMask,
+      resetDepthMask,
+      addAnnotation,
+      updateAnnotation,
+      removeAnnotation,
+      clearAnnotations,
+      selectAnnotation,
+      undo,
+      redo,
+      reset,
+      zoomIn,
+      zoomOut,
+      resetZoom,
+      setZoom,
+      setPan,
+      setComparing,
+      loadImage,
+      toDataURL,
+      toBlob,
+      toJSON,
+      loadJSON,
+      renderMask,
+      toMaskDataURL,
+      applyInpaintedImage,
+      applyBackgroundRemovedImage
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controller, state, historyTicks]
+  );
+}
+
+// src/image-editor/ImageEditor.tsx
+var import_react2 = require("react");
+var import_editor2 = require("@pixerate/editor");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ImageEditor = ({
+  editor: externalEditor,
+  src,
+  className = "",
+  style,
+  onSave,
+  exportOptions,
+  onInpaint,
+  onRemoveBackground,
+  aiHooks
+}) => {
+  const internalEditor = useImageEditor({ image: src });
+  const editor = externalEditor || internalEditor;
+  const { state, controller } = editor;
+  const canvasRef = (0, import_react2.useRef)(null);
+  const containerRef = (0, import_react2.useRef)(null);
+  const [activeTab, setActiveTab] = (0, import_react2.useState)("crop");
+  const [activeCropRatio, setActiveCropRatio] = (0, import_react2.useState)(null);
+  const [inpaintPrompt, setInpaintPrompt] = (0, import_react2.useState)("");
+  const [inpaintMaskMode, setInpaintMaskMode] = (0, import_react2.useState)("annotations");
+  const [isRemovingBg, setIsRemovingBg] = (0, import_react2.useState)(false);
+  const [isInpainting, setIsInpainting] = (0, import_react2.useState)(false);
+  const [aiError, setAiError] = (0, import_react2.useState)(null);
+  const [aiSuccess, setAiSuccess] = (0, import_react2.useState)(null);
+  const effectiveOnInpaint = onInpaint || aiHooks?.onInpaint;
+  const effectiveOnRemoveBg = onRemoveBackground || aiHooks?.onRemoveBackground;
+  const handleRemoveBackground = async () => {
+    if (!effectiveOnRemoveBg) {
+      setAiError("No background removal hook is configured.");
+      return;
+    }
+    setAiError(null);
+    setAiSuccess(null);
+    setIsRemovingBg(true);
+    try {
+      const imageDataUrl = await editor.toDataURL(exportOptions);
+      const result = await effectiveOnRemoveBg({ imageDataUrl });
+      if (typeof result === "string") {
+        await editor.applyBackgroundRemovedImage(result);
+        setAiSuccess("Background removed successfully!");
+      } else {
+        setAiSuccess("Background removal complete.");
+      }
+    } catch (err) {
+      setAiError(err?.message || "Failed to remove background.");
+    } finally {
+      setIsRemovingBg(false);
+    }
+  };
+  const handleInpaint = async () => {
+    if (!effectiveOnInpaint) {
+      setAiError("No inpainting hook is configured.");
+      return;
+    }
+    if (!inpaintPrompt.trim()) {
+      setAiError("Please enter an inpainting prompt.");
+      return;
+    }
+    setAiError(null);
+    setAiSuccess(null);
+    setIsInpainting(true);
+    try {
+      const imageDataUrl = await editor.toDataURL(exportOptions);
+      const maskDataUrl = await editor.toMaskDataURL({
+        useAnnotations: inpaintMaskMode === "annotations",
+        useCrop: inpaintMaskMode === "crop"
+      });
+      const result = await effectiveOnInpaint({
+        prompt: inpaintPrompt.trim(),
+        imageDataUrl,
+        maskDataUrl,
+        cropBox: inpaintMaskMode === "crop" ? editor.state.crop : null
+      });
+      if (typeof result === "string") {
+        await editor.applyInpaintedImage(result);
+        setAiSuccess("Inpainting applied successfully!");
+      } else {
+        setAiSuccess("Inpainting complete.");
+      }
+    } catch (err) {
+      setAiError(err?.message || "Failed to apply inpainting.");
+    } finally {
+      setIsInpainting(false);
+    }
+  };
+  const [activeColor, setActiveColor] = (0, import_react2.useState)("#ef4444");
+  const [strokeWidth, setStrokeWidth] = (0, import_react2.useState)(3);
+  const [fontSize, setFontSize] = (0, import_react2.useState)(24);
+  const [textInput, setTextInput] = (0, import_react2.useState)("");
+  const draftAnnotationRef = (0, import_react2.useRef)(null);
+  const draftCropRef = (0, import_react2.useRef)(null);
+  const cropDragInfoRef = (0, import_react2.useRef)(null);
+  const annotationDragInfoRef = (0, import_react2.useRef)(null);
+  const isDrawingRef = (0, import_react2.useRef)(false);
+  const currentPathRef = (0, import_react2.useRef)([]);
+  const dragStartPointRef = (0, import_react2.useRef)(null);
+  const renderCanvas = (0, import_react2.useCallback)(
+    async (draftAnnotation, draftCrop) => {
+      const canvas = canvasRef.current;
+      const container = containerRef.current;
+      if (!canvas || !container) return;
+      const vpWidth = container.clientWidth || 800;
+      const vpHeight = container.clientHeight || 500;
+      await controller.render(canvas, {
+        viewportWidth: vpWidth,
+        viewportHeight: vpHeight,
+        showCropOverlay: activeTab === "crop",
+        showSelectionOverlay: true,
+        interactive: true,
+        draftAnnotation: draftAnnotation !== void 0 ? draftAnnotation : draftAnnotationRef.current,
+        draftCrop: draftCrop !== void 0 ? draftCrop : draftCropRef.current
+      });
+    },
+    [controller, activeTab]
+  );
+  (0, import_react2.useEffect)(() => {
+    const raf = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+    const caf = typeof cancelAnimationFrame !== "undefined" ? cancelAnimationFrame : (id) => clearTimeout(id);
+    const animId = raf(() => {
+      renderCanvas();
+    });
+    return () => caf(animId);
+  }, [renderCanvas, state]);
+  (0, import_react2.useEffect)(() => {
+    if (activeTab === "crop" && editor.state.activeTool !== "crop") {
+      editor.setTool("crop");
+    }
+  }, [activeTab, editor]);
+  (0, import_react2.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        renderCanvas();
+      });
+      observer.observe(container);
+      return () => observer.disconnect();
+    } else {
+      const handleResize = () => renderCanvas();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [renderCanvas]);
+  const getCanvasEventPoint = (e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+    const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  };
+  const handleMouseDown = (e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const canvasPt = getCanvasEventPoint(e);
+    if (activeTab === "crop") {
+      const activeCrop = draftCropRef.current || state.crop || {
+        x: 0,
+        y: 0,
+        width: state.imageDimensions.width,
+        height: state.imageDimensions.height
+      };
+      const handle = (0, import_editor2.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+      const startImgPt = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+      if (handle) {
+        cropDragInfoRef.current = {
+          handle,
+          startCanvasPt: canvasPt,
+          startImgPt,
+          startCrop: activeCrop
+        };
+      } else {
+        cropDragInfoRef.current = {
+          handle: "new",
+          startCanvasPt: canvasPt,
+          startImgPt,
+          startCrop: { x: startImgPt.x, y: startImgPt.y, width: 0, height: 0 }
+        };
+      }
+      return;
+    }
+    if (activeTab === "annotate") {
+      const imgPt = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      dragStartPointRef.current = imgPt;
+      if (state.activeTool === "select") {
+        for (let i = state.annotations.length - 1; i >= 0; i--) {
+          const ann = state.annotations[i];
+          if ((0, import_editor2.hitTestAnnotation)(imgPt, ann)) {
+            editor.selectAnnotation(ann.id);
+            annotationDragInfoRef.current = {
+              annId: ann.id,
+              startImgPt: imgPt,
+              initialAnn: { ...ann }
+            };
+            return;
+          }
+        }
+        editor.selectAnnotation(null);
+        return;
+      }
+      if (state.activeTool === "pen") {
+        isDrawingRef.current = true;
+        currentPathRef.current = [imgPt];
+        const draft = {
+          id: "draft",
+          type: "pen",
+          x: 0,
+          y: 0,
+          points: [imgPt],
+          strokeColor: activeColor,
+          strokeWidth
+        };
+        draftAnnotationRef.current = draft;
+        renderCanvas(draft);
+      }
+    }
+  };
+  const handleMouseMove = (e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const canvasPt = getCanvasEventPoint(e);
+    if (activeTab === "crop") {
+      const drag = cropDragInfoRef.current;
+      if (drag) {
+        const currentImgPt = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, true);
+        let newCrop;
+        if (drag.handle === "new") {
+          const minX = Math.max(0, Math.min(drag.startImgPt.x, currentImgPt.x));
+          const minY = Math.max(0, Math.min(drag.startImgPt.y, currentImgPt.y));
+          const maxX = Math.min(state.imageDimensions.width, Math.max(drag.startImgPt.x, currentImgPt.x));
+          const maxY = Math.min(state.imageDimensions.height, Math.max(drag.startImgPt.y, currentImgPt.y));
+          newCrop = {
+            x: Math.round(minX),
+            y: Math.round(minY),
+            width: Math.round(Math.max(20, maxX - minX)),
+            height: Math.round(Math.max(20, maxY - minY))
+          };
+        } else {
+          newCrop = (0, import_editor2.calculateCropDrag)(
+            drag.startCrop,
+            drag.handle,
+            drag.startImgPt,
+            currentImgPt,
+            state.imageDimensions.width,
+            state.imageDimensions.height,
+            activeCropRatio
+          );
+        }
+        draftCropRef.current = newCrop;
+        renderCanvas(null, newCrop);
+      } else {
+        const activeCrop = draftCropRef.current || state.crop || {
+          x: 0,
+          y: 0,
+          width: state.imageDimensions.width,
+          height: state.imageDimensions.height
+        };
+        const handle = (0, import_editor2.hitTestCrop)(canvasPt, state, canvas.width, canvas.height, 14, activeCrop);
+        canvas.style.cursor = (0, import_editor2.getCropCursor)(handle);
+      }
+      return;
+    }
+    if (activeTab === "annotate") {
+      if (annotationDragInfoRef.current) {
+        const drag = annotationDragInfoRef.current;
+        const currentImgPt2 = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        const dx = currentImgPt2.x - drag.startImgPt.x;
+        const dy = currentImgPt2.y - drag.startImgPt.y;
+        editor.updateAnnotation(drag.annId, {
+          x: Math.round(drag.initialAnn.x + dx),
+          y: Math.round(drag.initialAnn.y + dy)
+        });
+        return;
+      }
+      const startPt = dragStartPointRef.current;
+      if (!startPt) {
+        if (state.activeTool === "select") {
+          const imgPt = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+          let hovered = false;
+          for (let i = state.annotations.length - 1; i >= 0; i--) {
+            if ((0, import_editor2.hitTestAnnotation)(imgPt, state.annotations[i])) {
+              hovered = true;
+              break;
+            }
+          }
+          canvas.style.cursor = hovered ? "move" : "default";
+        } else {
+          canvas.style.cursor = "crosshair";
+        }
+        return;
+      }
+      const currentImgPt = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+      if (state.activeTool === "pen" && isDrawingRef.current) {
+        currentPathRef.current.push(currentImgPt);
+        const draft = {
+          id: "draft",
+          type: "pen",
+          x: 0,
+          y: 0,
+          points: [...currentPathRef.current],
+          strokeColor: activeColor,
+          strokeWidth
+        };
+        draftAnnotationRef.current = draft;
+        renderCanvas(draft);
+      } else if (state.activeTool === "rect") {
+        const w = currentImgPt.x - startPt.x;
+        const h = currentImgPt.y - startPt.y;
+        const draft = {
+          id: "draft",
+          type: "rect",
+          x: Math.min(startPt.x, currentImgPt.x),
+          y: Math.min(startPt.y, currentImgPt.y),
+          width: Math.abs(w),
+          height: Math.abs(h),
+          strokeColor: activeColor,
+          strokeWidth
+        };
+        draftAnnotationRef.current = draft;
+        renderCanvas(draft);
+      } else if (state.activeTool === "circle") {
+        const rx = Math.abs(currentImgPt.x - startPt.x) / 2;
+        const ry = Math.abs(currentImgPt.y - startPt.y) / 2;
+        const draft = {
+          id: "draft",
+          type: "circle",
+          x: Math.min(startPt.x, currentImgPt.x) + rx,
+          y: Math.min(startPt.y, currentImgPt.y) + ry,
+          radiusX: rx,
+          radiusY: ry,
+          strokeColor: activeColor,
+          strokeWidth
+        };
+        draftAnnotationRef.current = draft;
+        renderCanvas(draft);
+      } else if (state.activeTool === "arrow") {
+        const draft = {
+          id: "draft",
+          type: "arrow",
+          x: startPt.x,
+          y: startPt.y,
+          endX: currentImgPt.x,
+          endY: currentImgPt.y,
+          strokeColor: activeColor,
+          strokeWidth
+        };
+        draftAnnotationRef.current = draft;
+        renderCanvas(draft);
+      } else if (state.activeTool === "line") {
+        const draft = {
+          id: "draft",
+          type: "line",
+          x: startPt.x,
+          y: startPt.y,
+          endX: currentImgPt.x,
+          endY: currentImgPt.y,
+          strokeColor: activeColor,
+          strokeWidth
+        };
+        draftAnnotationRef.current = draft;
+        renderCanvas(draft);
+      }
+    }
+  };
+  const handleMouseUp = (e) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const canvasPt = getCanvasEventPoint(e);
+    if (activeTab === "crop") {
+      if (cropDragInfoRef.current) {
+        if (draftCropRef.current && draftCropRef.current.width >= 20 && draftCropRef.current.height >= 20) {
+          editor.setCrop(draftCropRef.current, true);
+        }
+        cropDragInfoRef.current = null;
+        draftCropRef.current = null;
+        renderCanvas();
+      }
+      return;
+    }
+    if (activeTab === "annotate") {
+      if (annotationDragInfoRef.current) {
+        annotationDragInfoRef.current = null;
+        return;
+      }
+      const startPt = dragStartPointRef.current;
+      if (startPt) {
+        const currentImgPt = (0, import_editor2.canvasToImagePoint)(canvasPt, state, canvas.width, canvas.height, false);
+        if (state.activeTool === "pen" && isDrawingRef.current) {
+          if (currentPathRef.current.length > 1) {
+            editor.addAnnotation({
+              type: "pen",
+              x: 0,
+              y: 0,
+              points: [...currentPathRef.current],
+              strokeColor: activeColor,
+              strokeWidth
+            });
+          }
+          isDrawingRef.current = false;
+          currentPathRef.current = [];
+        } else if (state.activeTool === "rect") {
+          const w = Math.abs(currentImgPt.x - startPt.x);
+          const h = Math.abs(currentImgPt.y - startPt.y);
+          if (w > 4 && h > 4) {
+            editor.addAnnotation({
+              type: "rect",
+              x: Math.min(startPt.x, currentImgPt.x),
+              y: Math.min(startPt.y, currentImgPt.y),
+              width: w,
+              height: h,
+              strokeColor: activeColor,
+              strokeWidth
+            });
+          }
+        } else if (state.activeTool === "circle") {
+          const rx = Math.abs(currentImgPt.x - startPt.x) / 2;
+          const ry = Math.abs(currentImgPt.y - startPt.y) / 2;
+          if (rx > 4 && ry > 4) {
+            editor.addAnnotation({
+              type: "circle",
+              x: Math.min(startPt.x, currentImgPt.x) + rx,
+              y: Math.min(startPt.y, currentImgPt.y) + ry,
+              radiusX: rx,
+              radiusY: ry,
+              strokeColor: activeColor,
+              strokeWidth
+            });
+          }
+        } else if (state.activeTool === "arrow") {
+          if (Math.hypot(currentImgPt.x - startPt.x, currentImgPt.y - startPt.y) > 4) {
+            editor.addAnnotation({
+              type: "arrow",
+              x: startPt.x,
+              y: startPt.y,
+              endX: currentImgPt.x,
+              endY: currentImgPt.y,
+              strokeColor: activeColor,
+              strokeWidth
+            });
+          }
+        } else if (state.activeTool === "line") {
+          if (Math.hypot(currentImgPt.x - startPt.x, currentImgPt.y - startPt.y) > 4) {
+            editor.addAnnotation({
+              type: "line",
+              x: startPt.x,
+              y: startPt.y,
+              endX: currentImgPt.x,
+              endY: currentImgPt.y,
+              strokeColor: activeColor,
+              strokeWidth
+            });
+          }
+        }
+        draftAnnotationRef.current = null;
+        dragStartPointRef.current = null;
+        renderCanvas();
+      }
+    }
+  };
+  const handleAddText = () => {
+    if (!textInput.trim()) return;
+    editor.addAnnotation({
+      type: "text",
+      x: 50,
+      y: 50,
+      text: textInput.trim(),
+      fontSize,
+      color: activeColor
+    });
+    setTextInput("");
+  };
+  const handleExport = async () => {
+    const dataUrl = await editor.toDataURL(exportOptions);
+    if (onSave) {
+      onSave(dataUrl);
+    } else {
+      const link = document.createElement("a");
+      link.download = `edited-image-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("crop");
+                  editor.setTool("crop");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors ${activeTab === "crop" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: "Transform & Crop"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("adjust");
+                  editor.setTool("select");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors ${activeTab === "adjust" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: "Adjustments"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("annotate");
+                  editor.setTool("pen");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors ${activeTab === "annotate" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: "Annotations"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("depth");
+                  editor.setTool("select");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors ${activeTab === "depth" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: "Depth Mask"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setActiveTab("ai");
+                  editor.setTool("select");
+                },
+                className: `px-3 py-1.5 rounded-md font-medium transition-colors flex items-center gap-1.5 ${activeTab === "ai" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }) }),
+                  "AI Tools"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: !editor.canUndo,
+                onClick: () => editor.undo(),
+                className: "p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800",
+                title: "Undo",
+                children: "\u21A9"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                disabled: !editor.canRedo,
+                onClick: () => editor.redo(),
+                className: "p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-800",
+                title: "Redo",
+                children: "\u21AA"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => editor.reset(),
+                className: "px-2 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-400 hover:text-slate-200 hover:bg-slate-800",
+                children: "Reset"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => editor.zoomOut(),
+                className: "p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800",
+                title: "Zoom Out",
+                children: "-"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono text-slate-400 w-10 text-center", children: [
+              Math.round(state.zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => editor.zoomIn(),
+                className: "p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800",
+                title: "Zoom In",
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-px bg-slate-800 mx-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onMouseDown: () => editor.setComparing(true),
+                onMouseUp: () => editor.setComparing(false),
+                onMouseLeave: () => editor.setComparing(false),
+                className: "px-2.5 py-1.5 rounded-lg border border-slate-800 bg-slate-900 text-amber-400 hover:bg-slate-800 select-none active:bg-amber-950/40",
+                children: "Hold Compare"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: handleExport,
+                className: "px-4 py-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white font-medium shadow-md shadow-emerald-900/30 transition-colors",
+                children: "Export Image"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: containerRef,
+              className: "relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  onMouseDown: handleMouseDown,
+                  onMouseMove: handleMouseMove,
+                  onMouseUp: handleMouseUp,
+                  onMouseLeave: handleMouseUp,
+                  className: "absolute inset-0 w-full h-full block"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full md:w-80 bg-slate-900/90 border-t md:border-t-0 md:border-l border-slate-800 p-4 overflow-y-auto h-auto md:h-full md:max-h-[560px]", children: [
+            activeTab === "crop" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Aspect Ratio Presets" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setActiveCropRatio(null);
+                      editor.applyCropPreset(null);
+                    },
+                    className: `px-2.5 py-2 rounded-lg border font-medium ${activeCropRatio === null && state.crop ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`,
+                    children: "Freeform"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setActiveCropRatio(1);
+                      editor.applyCropPreset(1);
+                    },
+                    className: `px-2.5 py-2 rounded-lg border font-medium ${activeCropRatio === 1 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`,
+                    children: "1:1 Square"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setActiveCropRatio(4 / 3);
+                      editor.applyCropPreset(4 / 3);
+                    },
+                    className: `px-2.5 py-2 rounded-lg border font-medium ${activeCropRatio === 4 / 3 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`,
+                    children: "4:3 Standard"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setActiveCropRatio(16 / 9);
+                      editor.applyCropPreset(16 / 9);
+                    },
+                    className: `px-2.5 py-2 rounded-lg border font-medium ${activeCropRatio === 16 / 9 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`,
+                    children: "16:9 Wide"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setActiveCropRatio(3 / 2);
+                      editor.applyCropPreset(3 / 2);
+                    },
+                    className: `px-2.5 py-2 rounded-lg border font-medium ${activeCropRatio === 3 / 2 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`,
+                    children: "3:2 Photo"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setActiveCropRatio(null);
+                      editor.resetCrop();
+                    },
+                    className: "px-2.5 py-2 rounded-lg bg-rose-950/40 hover:bg-rose-900/60 text-rose-300 border border-rose-800/40 font-medium",
+                    children: "Clear Crop"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Orientation & Flips" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.rotate(-90),
+                    className: "px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700",
+                    children: "Rotate -90\xB0"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.rotate(90),
+                    className: "px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700",
+                    children: "Rotate +90\xB0"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.flipHorizontal(),
+                    className: `px-3 py-2 rounded-lg border transition-colors ${state.transform.flipH ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`,
+                    children: "Flip Horizontal"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.flipVertical(),
+                    className: `px-3 py-2 rounded-lg border transition-colors ${state.transform.flipV ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`,
+                    children: "Flip Vertical"
+                  }
+                )
+              ] })
+            ] }),
+            activeTab === "adjust" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Color Adjustments" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.resetAdjustments(),
+                    className: "text-[10px] text-rose-400 hover:underline",
+                    children: "Reset Sliders"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Brightness" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.brightness })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    value: state.adjustments.brightness,
+                    onChange: (e) => editor.setAdjustments({ brightness: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Contrast" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.contrast })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    value: state.adjustments.contrast,
+                    onChange: (e) => editor.setAdjustments({ contrast: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Saturation" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.saturation })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    value: state.adjustments.saturation,
+                    onChange: (e) => editor.setAdjustments({ saturation: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Exposure" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.exposure })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    value: state.adjustments.exposure,
+                    onChange: (e) => editor.setAdjustments({ exposure: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Warmth / Temperature" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.adjustments.temperature })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "-100",
+                    max: "100",
+                    value: state.adjustments.temperature,
+                    onChange: (e) => editor.setAdjustments({ temperature: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Blur" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
+                    state.adjustments.blur,
+                    "px"
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "0",
+                    max: "30",
+                    value: state.adjustments.blur,
+                    onChange: (e) => editor.setAdjustments({ blur: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Opacity" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
+                    Math.round(state.adjustments.opacity * 100),
+                    "%"
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "range",
+                    min: "0",
+                    max: "1",
+                    step: "0.05",
+                    value: state.adjustments.opacity,
+                    onChange: (e) => editor.setAdjustments({ opacity: Number(e.target.value) }),
+                    className: "w-full accent-indigo-500"
+                  }
+                )
+              ] })
+            ] }),
+            activeTab === "annotate" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Draw & Annotate" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-1.5", children: ["pen", "rect", "circle", "arrow", "line"].map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => editor.setTool(t),
+                  className: `py-1.5 px-2 rounded-lg font-medium capitalize border transition-colors ${state.activeTool === t ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"}`,
+                  children: t
+                },
+                t
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-slate-400", children: "Color:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "color",
+                    value: activeColor,
+                    onChange: (e) => setActiveColor(e.target.value),
+                    className: "w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 ml-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-0.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Width:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
+                      strokeWidth,
+                      "px"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "range",
+                      min: "1",
+                      max: "20",
+                      value: strokeWidth,
+                      onChange: (e) => setStrokeWidth(Number(e.target.value)),
+                      className: "w-full accent-indigo-500"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Add Text" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    placeholder: "Type watermark or label...",
+                    value: textInput,
+                    onChange: (e) => setTextInput(e.target.value),
+                    onKeyDown: (e) => e.key === "Enter" && handleAddText(),
+                    className: "flex-1 bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleAddText,
+                    className: "px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium shadow",
+                    children: "Add"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-slate-400", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Font Size:" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-mono", children: [
+                  fontSize,
+                  "px"
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "range",
+                  min: "12",
+                  max: "72",
+                  value: fontSize,
+                  onChange: (e) => setFontSize(Number(e.target.value)),
+                  className: "w-full accent-indigo-500"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-slate-800 my-1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-slate-400", children: [
+                  "Layers (",
+                  state.annotations.length,
+                  ")"
+                ] }),
+                state.selectedAnnotationId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.removeAnnotation(state.selectedAnnotationId),
+                    className: "text-rose-400 hover:underline text-[11px]",
+                    children: "Delete Selected"
+                  }
+                ),
+                state.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.clearAnnotations(),
+                    className: "text-slate-400 hover:text-slate-200 text-[11px]",
+                    children: "Clear All"
+                  }
+                )
+              ] })
+            ] }),
+            activeTab === "depth" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px]", children: "Depth Masking" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.resetDepthMask(),
+                    className: "text-[10px] text-rose-400 hover:underline",
+                    children: "Reset Mask"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: state.depthMask.enabled,
+                    onChange: (e) => editor.setDepthMask({ enabled: e.target.checked }),
+                    className: "rounded accent-indigo-500"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Enable Depth / Alpha Mask" })
+              ] }),
+              state.depthMask.enabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "text-slate-400 block mb-1", children: "Mask Image URL:" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "text",
+                      placeholder: "https://.../depthmap.png",
+                      value: state.depthMask.maskSource || "",
+                      onChange: (e) => editor.setDepthMask({ maskSource: e.target.value || null }),
+                      className: "w-full bg-slate-950 border border-slate-700 rounded-lg px-2.5 py-1.5 text-xs text-slate-100 placeholder-slate-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => editor.setDepthMask({ mode: "threshold" }),
+                      className: `flex-1 py-1.5 rounded-lg border text-xs font-medium ${state.depthMask.mode === "threshold" ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300"}`,
+                      children: "Threshold Mode"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => editor.setDepthMask({ mode: "brightness" }),
+                      className: `flex-1 py-1.5 rounded-lg border text-xs font-medium ${state.depthMask.mode === "brightness" ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300"}`,
+                      children: "Brightness Mode"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Depth Start (Lower):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[0] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "255",
+                      value: state.depthMask.depthRange[0],
+                      onChange: (e) => editor.setDepthMask({
+                        depthRange: [Number(e.target.value), state.depthMask.depthRange[1]]
+                      }),
+                      className: "w-full accent-indigo-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Depth Stop (Upper):" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.depthMask.depthRange[1] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "range",
+                      min: "0",
+                      max: "255",
+                      value: state.depthMask.depthRange[1],
+                      onChange: (e) => editor.setDepthMask({
+                        depthRange: [state.depthMask.depthRange[0], Number(e.target.value)]
+                      }),
+                      className: "w-full accent-indigo-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between text-slate-400 mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Softness:" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-mono", children: state.depthMask.softness })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "range",
+                      min: "1",
+                      max: "50",
+                      value: state.depthMask.softness,
+                      onChange: (e) => editor.setDepthMask({ softness: Number(e.target.value) }),
+                      className: "w-full accent-indigo-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer text-slate-300 mt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: state.depthMask.invert,
+                      onChange: (e) => editor.setDepthMask({ invert: e.target.checked }),
+                      className: "rounded accent-indigo-500"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Invert Mask" })
+                ] })
+              ] })
+            ] }),
+            activeTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5 text-indigo-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 3v12M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" }) }),
+                    "Background Removal"
+                  ] }),
+                  isRemovingBg && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-900/60 text-indigo-300 animate-pulse", children: "Removing..." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Isolate foreground subject with AI alpha transparency segmentation." }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                      "Removing Background..."
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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"
+                    ] })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-semibold text-slate-200 uppercase tracking-wider text-[11px] flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "w-3.5 h-3.5 text-purple-400", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21.64 3.64-1.28-1.28a1.2 1.2 0 0 0-1.7 0l-9.72 9.72-1.94 4.86 4.86-1.94 9.72-9.72a1.2 1.2 0 0 0 .06-1.64z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m14 7 3 3" })
+                    ] }),
+                    "Generative Inpainting"
+                  ] }),
+                  isInpainting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-900/60 text-purple-300 animate-pulse", children: "Inpainting..." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-slate-400 text-[11px] leading-relaxed", children: "Replace, modify, or fill selected regions using prompt-guided generative inpainting." }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "ai-inpaint-prompt-react", className: "text-slate-300 text-[11px] font-medium", children: "Prompt" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "textarea",
+                    {
+                      id: "ai-inpaint-prompt-react",
+                      value: inpaintPrompt,
+                      onChange: (e) => setInpaintPrompt(e.target.value),
+                      placeholder: "e.g. replace sunglasses with steampunk goggles, remove person in background...",
+                      rows: 3,
+                      className: "w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-indigo-500 resize-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-300 text-[11px] font-medium", children: "Target Mask Region" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setInpaintMaskMode("annotations"),
+                        className: `px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${inpaintMaskMode === "annotations" ? "bg-purple-600/30 border-purple-500 text-purple-200" : "bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200"}`,
+                        children: [
+                          "Drawn Shapes (",
+                          state.annotations.length,
+                          ")"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setInpaintMaskMode("crop"),
+                        className: `px-2 py-1.5 rounded border text-[11px] font-medium text-left transition-colors ${inpaintMaskMode === "crop" ? "bg-purple-600/30 border-purple-500 text-purple-200" : "bg-slate-900 border-slate-700 text-slate-400 hover:text-slate-200"}`,
+                        children: [
+                          "Crop Box (",
+                          state.crop ? "Selected" : "Full",
+                          ")"
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-3.5 h-3.5 border-2 border-white/30 border-t-white rounded-full animate-spin" }),
+                      "Generating Inpaint..."
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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"
+                    ] })
+                  }
+                )
+              ] }),
+              aiError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 rounded-lg bg-rose-950/60 border border-rose-800 text-rose-300 text-[11px]", children: aiError }),
+              aiSuccess && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 rounded-lg bg-emerald-950/60 border border-emerald-800 text-emerald-300 text-[11px]", children: aiSuccess })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageEditor,
+  useImageEditor
+});
+//# sourceMappingURL=index.cjs.map