@pixerate/editor-svelte 0.13.0 → 0.14.0

package/dist/chunk-REI5FZ7F.js

@@ -0,0 +1,966 @@
+// src/image-editor/ImageEditor.svelte
+import "svelte/internal/disclose-version";
+import * as $2 from "svelte/internal/client";
+import {
+  canvasToImagePoint,
+  hitTestCrop,
+  getCropCursor,
+  calculateCropDrag,
+  hitTestAnnotation
+} from "@pixerate/editor";
+
+// src/image-editor/imageEditorState.svelte.ts
+import * as $ from "svelte/internal/client";
+import { ImageEditorController } from "@pixerate/editor";
+function createReactiveImageEditor(options = {}) {
+  const controller = new ImageEditorController(options);
+  let state3 = $.state($.proxy(controller.getState()));
+  let historyTicks = $.state(0);
+  controller.subscribe((updated) => {
+    $.set(state3, { ...updated }, true);
+    $.update(historyTicks);
+  });
+  return {
+    get controller() {
+      return controller;
+    },
+    get state() {
+      return $.get(state3);
+    },
+    get canUndo() {
+      void $.get(historyTicks);
+      return controller.canUndo;
+    },
+    get canRedo() {
+      void $.get(historyTicks);
+      return controller.canRedo;
+    },
+    setTool(tool) {
+      controller.setTool(tool);
+    },
+    setCrop(crop, addToHistory = true) {
+      controller.setCrop(crop, addToHistory);
+    },
+    applyCropPreset(ratio) {
+      controller.applyCropPreset(ratio);
+    },
+    resetCrop() {
+      controller.resetCrop();
+    },
+    rotate(degrees) {
+      controller.rotate(degrees);
+    },
+    setRotation(degrees) {
+      controller.setRotation(degrees);
+    },
+    flipHorizontal() {
+      controller.flipHorizontal();
+    },
+    flipVertical() {
+      controller.flipVertical();
+    },
+    setAdjustments(partial, commitToHistory = true) {
+      controller.setAdjustments(partial, commitToHistory);
+    },
+    resetAdjustments() {
+      controller.resetAdjustments();
+    },
+    setDepthMask(partial) {
+      controller.setDepthMask(partial);
+    },
+    resetDepthMask() {
+      controller.resetDepthMask();
+    },
+    addAnnotation(ann) {
+      return controller.addAnnotation(ann);
+    },
+    updateAnnotation(id, partial, commitToHistory = true) {
+      controller.updateAnnotation(id, partial, commitToHistory);
+    },
+    removeAnnotation(id) {
+      controller.removeAnnotation(id);
+    },
+    clearAnnotations() {
+      controller.clearAnnotations();
+    },
+    selectAnnotation(id) {
+      controller.selectAnnotation(id);
+    },
+    undo() {
+      return controller.undo();
+    },
+    redo() {
+      return controller.redo();
+    },
+    reset() {
+      controller.reset();
+    },
+    zoomIn(factor) {
+      controller.zoomIn(factor);
+    },
+    zoomOut(factor) {
+      controller.zoomOut(factor);
+    },
+    resetZoom() {
+      controller.resetZoom();
+    },
+    setZoom(zoom) {
+      controller.setZoom(zoom);
+    },
+    setPan(pan) {
+      controller.setPan(pan);
+    },
+    setComparing(comparing) {
+      controller.setComparing(comparing);
+    },
+    loadImage(src) {
+      return controller.loadImage(src);
+    },
+    toDataURL(opts) {
+      return controller.toDataURL(opts);
+    },
+    toBlob(opts) {
+      return controller.toBlob(opts);
+    },
+    toJSON() {
+      return controller.toJSON();
+    },
+    loadJSON(data) {
+      controller.loadJSON(data);
+    }
+  };
+}
+
+// src/image-editor/ImageEditor.svelte
+var root = $2.from_html(`<div class="flex flex-col gap-4 text-xs"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Aspect Ratio Presets</span> <div class="grid grid-cols-3 gap-2"><button type="button">Freeform</button> <button type="button">1:1 Square</button> <button type="button">4:3 Standard</button> <button type="button">16:9 Wide</button> <button type="button">3:2 Photo</button> <button type="button" class="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">Clear Crop</button></div> <div class="h-px bg-slate-800 my-1"></div> <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Orientation & Flips</span> <div class="grid grid-cols-2 gap-2"><button type="button" class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700">Rotate -90\xB0</button> <button type="button" class="px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700">Rotate +90\xB0</button> <button type="button">Flip Horizontal</button> <button type="button">Flip Vertical</button></div></div>`);
+var root_1 = $2.from_html(`<div class="flex flex-col gap-3 text-xs"><div class="flex items-center justify-between"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Color Adjustments</span> <button type="button" class="text-[10px] text-rose-400 hover:underline">Reset Sliders</button></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Brightness</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Contrast</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Saturation</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Exposure</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Warmth / Temperature</span> <span class="font-mono"> </span></div> <input type="range" min="-100" max="100" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Blur</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="30" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Opacity</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="1" step="0.05" class="w-full accent-indigo-500"/></div></div>`);
+var root_2 = $2.from_html(`<button type="button"> </button>`);
+var root_3 = $2.from_html(`<button type="button" class="text-rose-400 hover:underline text-[11px]">Delete Selected</button>`);
+var root_4 = $2.from_html(`<button type="button" class="text-slate-400 hover:text-slate-200 text-[11px]">Clear All</button>`);
+var root_5 = $2.from_html(`<div class="flex flex-col gap-3 text-xs"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Draw & Annotate</span> <div class="grid grid-cols-3 gap-1.5"></div> <div class="flex items-center gap-2 mt-2"><span class="text-slate-400">Color:</span> <input type="color" class="w-8 h-8 rounded border border-slate-700 cursor-pointer bg-transparent"/> <div class="flex-1 ml-2"><div class="flex justify-between text-slate-400 mb-0.5"><span>Width:</span> <span class="font-mono"> </span></div> <input type="range" min="1" max="20" class="w-full accent-indigo-500"/></div></div> <div class="h-px bg-slate-800 my-1"></div> <span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Add Text</span> <div class="flex gap-2"><input type="text" placeholder="Type watermark or label..." class="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"/> <button type="button" class="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white font-medium shadow">Add</button></div> <div class="flex items-center justify-between text-slate-400"><span>Font Size:</span> <span class="font-mono"> </span></div> <input type="range" min="12" max="72" class="w-full accent-indigo-500"/> <div class="h-px bg-slate-800 my-1"></div> <div class="flex items-center justify-between"><span class="text-slate-400"> </span> <!> <!></div></div>`);
+var root_6 = $2.from_html(`<div><span class="text-slate-400 block mb-1">Mask Image URL:</span> <input type="text" placeholder="https://.../depthmap.png" class="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"/></div> <div class="flex gap-2"><button type="button">Threshold Mode</button> <button type="button">Brightness Mode</button></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Depth Start (Lower):</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="255" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Depth Stop (Upper):</span> <span class="font-mono"> </span></div> <input type="range" min="0" max="255" class="w-full accent-indigo-500"/></div> <div><div class="flex justify-between text-slate-400 mb-1"><span>Softness:</span> <span class="font-mono"> </span></div> <input type="range" min="1" max="50" class="w-full accent-indigo-500"/></div> <label class="flex items-center gap-2 cursor-pointer text-slate-300 mt-1"><input type="checkbox" class="rounded accent-indigo-500"/> <span>Invert Mask</span></label>`, 1);
+var root_7 = $2.from_html(`<div class="flex flex-col gap-3 text-xs"><div class="flex items-center justify-between"><span class="font-semibold text-slate-200 uppercase tracking-wider text-[11px]">Depth Masking</span> <button type="button" class="text-[10px] text-rose-400 hover:underline">Reset Mask</button></div> <label class="flex items-center gap-2 cursor-pointer text-slate-300"><input type="checkbox" class="rounded accent-indigo-500"/> <span>Enable Depth / Alpha Mask</span></label> <!></div>`);
+var root_8 = $2.from_html(`<div><div class="flex flex-wrap items-center justify-between px-4 py-3 bg-slate-950/80 border-b border-slate-800 gap-3"><div class="flex items-center gap-1 bg-slate-900 p-1 rounded-lg border border-slate-800 text-xs"><button type="button">Transform & Crop</button> <button type="button">Adjustments</button> <button type="button">Annotations</button> <button type="button">Depth Mask</button></div> <div class="flex items-center gap-2 text-xs"><button type="button" class="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">\u21A9</button> <button type="button" class="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">\u21AA</button> <button type="button" class="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">Reset</button> <div class="h-4 w-px bg-slate-800 mx-1"></div> <button type="button" class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800" title="Zoom Out">-</button> <span class="font-mono text-slate-400 w-10 text-center"> </span> <button type="button" class="p-1.5 rounded-lg border border-slate-800 bg-slate-900 text-slate-300 hover:bg-slate-800" title="Zoom In">+</button> <div class="h-4 w-px bg-slate-800 mx-1"></div> <button type="button" class="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">Hold Compare</button> <button type="button" class="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">Export Image</button></div></div> <div class="flex flex-col md:flex-row flex-1 min-h-[520px] md:h-[560px]"><div class="relative flex-1 h-[360px] md:h-full min-h-[320px] bg-slate-950 overflow-hidden select-none"><canvas class="absolute inset-0 w-full h-full block"></canvas></div> <div class="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]"><!> <!> <!> <!></div></div></div>`);
+function ImageEditor($$anchor, $$props) {
+  $2.push($$props, true);
+  let src = $2.prop($$props, "src", 3, ""), className = $2.prop($$props, "class", 3, ""), style = $2.prop($$props, "style", 3, "");
+  const internalEditor = createReactiveImageEditor();
+  const editor = $2.derived(() => $$props.editor || internalEditor);
+  let canvasEl = $2.state(null);
+  let containerEl = $2.state(null);
+  let activeTab = $2.state("crop");
+  let activeCropRatio = $2.state(null);
+  let activeColor = $2.state("#ef4444");
+  let strokeWidth = $2.state(3);
+  let fontSize = $2.state(24);
+  let textInput = $2.state("");
+  let draftAnnotation = $2.state(null);
+  let draftCrop = $2.state(null);
+  let cropDragInfo = null;
+  let annotationDragInfo = null;
+  let isDrawing = false;
+  let currentPath = [];
+  let dragStartPoint = null;
+  $2.user_effect(() => {
+    if (src() && src() !== $2.get(editor).state.sourceUrl) {
+      $2.get(editor).loadImage(src());
+    }
+  });
+  async function renderCanvas(overrideAnnotation, overrideCrop) {
+    if (!$2.get(canvasEl) || !$2.get(containerEl)) return;
+    const vpWidth = $2.get(containerEl).clientWidth || 800;
+    const vpHeight = $2.get(containerEl).clientHeight || 500;
+    await $2.get(editor).controller.render($2.get(canvasEl), {
+      viewportWidth: vpWidth,
+      viewportHeight: vpHeight,
+      showCropOverlay: $2.get(activeTab) === "crop",
+      showSelectionOverlay: true,
+      interactive: true,
+      draftAnnotation: overrideAnnotation !== void 0 ? overrideAnnotation : $2.get(draftAnnotation),
+      draftCrop: overrideCrop !== void 0 ? overrideCrop : $2.get(draftCrop)
+    });
+  }
+  $2.user_effect(() => {
+    void $2.get(editor).state;
+    void $2.get(activeTab);
+    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);
+  });
+  $2.user_effect(() => {
+    if ($2.get(activeTab) === "crop" && $2.get(editor).state.activeTool !== "crop") {
+      $2.get(editor).setTool("crop");
+    }
+  });
+  $2.user_effect(() => {
+    if (!$2.get(containerEl)) return;
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        renderCanvas();
+      });
+      observer.observe($2.get(containerEl));
+      return () => observer.disconnect();
+    } else {
+      const handleResize = () => renderCanvas();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  });
+  function getCanvasEventPoint(e) {
+    if (!$2.get(canvasEl)) return { x: 0, y: 0 };
+    const rect = $2.get(canvasEl).getBoundingClientRect();
+    const scaleX = rect.width > 0 ? $2.get(canvasEl).width / rect.width : 1;
+    const scaleY = rect.height > 0 ? $2.get(canvasEl).height / rect.height : 1;
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  }
+  function handleMouseDown(e) {
+    if (!$2.get(canvasEl)) return;
+    const canvasPt = getCanvasEventPoint(e);
+    if ($2.get(activeTab) === "crop") {
+      const activeCrop = $2.get(draftCrop) || $2.get(editor).state.crop || {
+        x: 0,
+        y: 0,
+        width: $2.get(editor).state.imageDimensions.width,
+        height: $2.get(editor).state.imageDimensions.height
+      };
+      const handle = hitTestCrop(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, 14, activeCrop);
+      const startImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, true);
+      if (handle) {
+        cropDragInfo = {
+          handle,
+          startCanvasPt: canvasPt,
+          startImgPt,
+          startCrop: activeCrop
+        };
+      } else {
+        cropDragInfo = {
+          handle: "new",
+          startCanvasPt: canvasPt,
+          startImgPt,
+          startCrop: { x: startImgPt.x, y: startImgPt.y, width: 0, height: 0 }
+        };
+      }
+      return;
+    }
+    if ($2.get(activeTab) === "annotate") {
+      const imgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
+      dragStartPoint = imgPt;
+      if ($2.get(editor).state.activeTool === "select") {
+        for (let i = $2.get(editor).state.annotations.length - 1; i >= 0; i--) {
+          const ann = $2.get(editor).state.annotations[i];
+          if (hitTestAnnotation(imgPt, ann)) {
+            $2.get(editor).selectAnnotation(ann.id);
+            annotationDragInfo = { annId: ann.id, startImgPt: imgPt, initialAnn: { ...ann } };
+            return;
+          }
+        }
+        $2.get(editor).selectAnnotation(null);
+        return;
+      }
+      if ($2.get(editor).state.activeTool === "pen") {
+        isDrawing = true;
+        currentPath = [imgPt];
+        const draft = {
+          id: "draft",
+          type: "pen",
+          x: 0,
+          y: 0,
+          points: [imgPt],
+          strokeColor: $2.get(activeColor),
+          strokeWidth: $2.get(strokeWidth)
+        };
+        $2.set(draftAnnotation, draft, true);
+        renderCanvas(draft);
+      }
+    }
+  }
+  function handleMouseMove(e) {
+    if (!$2.get(canvasEl)) return;
+    const canvasPt = getCanvasEventPoint(e);
+    if ($2.get(activeTab) === "crop") {
+      if (cropDragInfo) {
+        const currentImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, true);
+        let newCrop;
+        if (cropDragInfo.handle === "new") {
+          const minX = Math.max(0, Math.min(cropDragInfo.startImgPt.x, currentImgPt.x));
+          const minY = Math.max(0, Math.min(cropDragInfo.startImgPt.y, currentImgPt.y));
+          const maxX = Math.min($2.get(editor).state.imageDimensions.width, Math.max(cropDragInfo.startImgPt.x, currentImgPt.x));
+          const maxY = Math.min($2.get(editor).state.imageDimensions.height, Math.max(cropDragInfo.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 = calculateCropDrag(cropDragInfo.startCrop, cropDragInfo.handle, cropDragInfo.startImgPt, currentImgPt, $2.get(editor).state.imageDimensions.width, $2.get(editor).state.imageDimensions.height, $2.get(activeCropRatio));
+        }
+        $2.set(draftCrop, newCrop, true);
+        renderCanvas(null, newCrop);
+      } else {
+        const activeCrop = $2.get(draftCrop) || $2.get(editor).state.crop || {
+          x: 0,
+          y: 0,
+          width: $2.get(editor).state.imageDimensions.width,
+          height: $2.get(editor).state.imageDimensions.height
+        };
+        const handle = hitTestCrop(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, 14, activeCrop);
+        $2.get(canvasEl).style.cursor = getCropCursor(handle);
+      }
+      return;
+    }
+    if ($2.get(activeTab) === "annotate") {
+      if (annotationDragInfo) {
+        const currentImgPt2 = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
+        const dx = currentImgPt2.x - annotationDragInfo.startImgPt.x;
+        const dy = currentImgPt2.y - annotationDragInfo.startImgPt.y;
+        $2.get(editor).updateAnnotation(annotationDragInfo.annId, {
+          x: Math.round(annotationDragInfo.initialAnn.x + dx),
+          y: Math.round(annotationDragInfo.initialAnn.y + dy)
+        });
+        return;
+      }
+      if (!dragStartPoint) {
+        if ($2.get(editor).state.activeTool === "select") {
+          const imgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
+          let hovered = false;
+          for (let i = $2.get(editor).state.annotations.length - 1; i >= 0; i--) {
+            if (hitTestAnnotation(imgPt, $2.get(editor).state.annotations[i])) {
+              hovered = true;
+              break;
+            }
+          }
+          $2.get(canvasEl).style.cursor = hovered ? "move" : "default";
+        } else {
+          $2.get(canvasEl).style.cursor = "crosshair";
+        }
+        return;
+      }
+      const currentImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
+      if ($2.get(editor).state.activeTool === "pen" && isDrawing) {
+        currentPath.push(currentImgPt);
+        const draft = {
+          id: "draft",
+          type: "pen",
+          x: 0,
+          y: 0,
+          points: [...currentPath],
+          strokeColor: $2.get(activeColor),
+          strokeWidth: $2.get(strokeWidth)
+        };
+        $2.set(draftAnnotation, draft, true);
+        renderCanvas(draft);
+      } else if ($2.get(editor).state.activeTool === "rect") {
+        const w = currentImgPt.x - dragStartPoint.x;
+        const h = currentImgPt.y - dragStartPoint.y;
+        const draft = {
+          id: "draft",
+          type: "rect",
+          x: Math.min(dragStartPoint.x, currentImgPt.x),
+          y: Math.min(dragStartPoint.y, currentImgPt.y),
+          width: Math.abs(w),
+          height: Math.abs(h),
+          strokeColor: $2.get(activeColor),
+          strokeWidth: $2.get(strokeWidth)
+        };
+        $2.set(draftAnnotation, draft, true);
+        renderCanvas(draft);
+      } else if ($2.get(editor).state.activeTool === "circle") {
+        const rx = Math.abs(currentImgPt.x - dragStartPoint.x) / 2;
+        const ry = Math.abs(currentImgPt.y - dragStartPoint.y) / 2;
+        const draft = {
+          id: "draft",
+          type: "circle",
+          x: Math.min(dragStartPoint.x, currentImgPt.x) + rx,
+          y: Math.min(dragStartPoint.y, currentImgPt.y) + ry,
+          radiusX: rx,
+          radiusY: ry,
+          strokeColor: $2.get(activeColor),
+          strokeWidth: $2.get(strokeWidth)
+        };
+        $2.set(draftAnnotation, draft, true);
+        renderCanvas(draft);
+      } else if ($2.get(editor).state.activeTool === "arrow") {
+        const draft = {
+          id: "draft",
+          type: "arrow",
+          x: dragStartPoint.x,
+          y: dragStartPoint.y,
+          endX: currentImgPt.x,
+          endY: currentImgPt.y,
+          strokeColor: $2.get(activeColor),
+          strokeWidth: $2.get(strokeWidth)
+        };
+        $2.set(draftAnnotation, draft, true);
+        renderCanvas(draft);
+      } else if ($2.get(editor).state.activeTool === "line") {
+        const draft = {
+          id: "draft",
+          type: "line",
+          x: dragStartPoint.x,
+          y: dragStartPoint.y,
+          endX: currentImgPt.x,
+          endY: currentImgPt.y,
+          strokeColor: $2.get(activeColor),
+          strokeWidth: $2.get(strokeWidth)
+        };
+        $2.set(draftAnnotation, draft, true);
+        renderCanvas(draft);
+      }
+    }
+  }
+  function handleMouseUp(e) {
+    if (!$2.get(canvasEl)) return;
+    const canvasPt = getCanvasEventPoint(e);
+    if ($2.get(activeTab) === "crop") {
+      if (cropDragInfo) {
+        if ($2.get(draftCrop) && $2.get(draftCrop).width >= 20 && $2.get(draftCrop).height >= 20) {
+          $2.get(editor).setCrop($2.get(draftCrop), true);
+        }
+        cropDragInfo = null;
+        $2.set(draftCrop, null);
+        renderCanvas();
+      }
+      return;
+    }
+    if ($2.get(activeTab) === "annotate") {
+      if (annotationDragInfo) {
+        annotationDragInfo = null;
+        return;
+      }
+      if (dragStartPoint) {
+        const currentImgPt = canvasToImagePoint(canvasPt, $2.get(editor).state, $2.get(canvasEl).width, $2.get(canvasEl).height, false);
+        if ($2.get(editor).state.activeTool === "pen" && isDrawing) {
+          if (currentPath.length > 1) {
+            $2.get(editor).addAnnotation({
+              type: "pen",
+              x: 0,
+              y: 0,
+              points: [...currentPath],
+              strokeColor: $2.get(activeColor),
+              strokeWidth: $2.get(strokeWidth)
+            });
+          }
+          isDrawing = false;
+          currentPath = [];
+        } else if ($2.get(editor).state.activeTool === "rect") {
+          const w = Math.abs(currentImgPt.x - dragStartPoint.x);
+          const h = Math.abs(currentImgPt.y - dragStartPoint.y);
+          if (w > 4 && h > 4) {
+            $2.get(editor).addAnnotation({
+              type: "rect",
+              x: Math.min(dragStartPoint.x, currentImgPt.x),
+              y: Math.min(dragStartPoint.y, currentImgPt.y),
+              width: w,
+              height: h,
+              strokeColor: $2.get(activeColor),
+              strokeWidth: $2.get(strokeWidth)
+            });
+          }
+        } else if ($2.get(editor).state.activeTool === "circle") {
+          const rx = Math.abs(currentImgPt.x - dragStartPoint.x) / 2;
+          const ry = Math.abs(currentImgPt.y - dragStartPoint.y) / 2;
+          if (rx > 4 && ry > 4) {
+            $2.get(editor).addAnnotation({
+              type: "circle",
+              x: Math.min(dragStartPoint.x, currentImgPt.x) + rx,
+              y: Math.min(dragStartPoint.y, currentImgPt.y) + ry,
+              radiusX: rx,
+              radiusY: ry,
+              strokeColor: $2.get(activeColor),
+              strokeWidth: $2.get(strokeWidth)
+            });
+          }
+        } else if ($2.get(editor).state.activeTool === "arrow") {
+          if (Math.hypot(currentImgPt.x - dragStartPoint.x, currentImgPt.y - dragStartPoint.y) > 4) {
+            $2.get(editor).addAnnotation({
+              type: "arrow",
+              x: dragStartPoint.x,
+              y: dragStartPoint.y,
+              endX: currentImgPt.x,
+              endY: currentImgPt.y,
+              strokeColor: $2.get(activeColor),
+              strokeWidth: $2.get(strokeWidth)
+            });
+          }
+        } else if ($2.get(editor).state.activeTool === "line") {
+          if (Math.hypot(currentImgPt.x - dragStartPoint.x, currentImgPt.y - dragStartPoint.y) > 4) {
+            $2.get(editor).addAnnotation({
+              type: "line",
+              x: dragStartPoint.x,
+              y: dragStartPoint.y,
+              endX: currentImgPt.x,
+              endY: currentImgPt.y,
+              strokeColor: $2.get(activeColor),
+              strokeWidth: $2.get(strokeWidth)
+            });
+          }
+        }
+        $2.set(draftAnnotation, null);
+        dragStartPoint = null;
+        renderCanvas();
+      }
+    }
+  }
+  function handleAddText() {
+    if (!$2.get(textInput).trim()) return;
+    $2.get(editor).addAnnotation({
+      type: "text",
+      x: 50,
+      y: 50,
+      text: $2.get(textInput).trim(),
+      fontSize: $2.get(fontSize),
+      color: $2.get(activeColor)
+    });
+    $2.set(textInput, "");
+  }
+  async function handleExport() {
+    const dataUrl = await $2.get(editor).toDataURL($$props.exportOptions);
+    if ($$props.onSave) {
+      $$props.onSave(dataUrl);
+    } else {
+      const link = document.createElement("a");
+      link.download = `edited-image-${Date.now()}.png`;
+      link.href = dataUrl;
+      link.click();
+    }
+  }
+  var div = root_8();
+  var div_1 = $2.child(div);
+  var div_2 = $2.child(div_1);
+  var button = $2.child(div_2);
+  var button_1 = $2.sibling(button, 2);
+  var button_2 = $2.sibling(button_1, 2);
+  var button_3 = $2.sibling(button_2, 2);
+  $2.reset(div_2);
+  var div_3 = $2.sibling(div_2, 2);
+  var button_4 = $2.child(div_3);
+  var button_5 = $2.sibling(button_4, 2);
+  var button_6 = $2.sibling(button_5, 2);
+  var button_7 = $2.sibling(button_6, 4);
+  var span = $2.sibling(button_7, 2);
+  var text = $2.only_child(span);
+  var button_8 = $2.sibling(span, 2);
+  var button_9 = $2.sibling(button_8, 4);
+  var button_10 = $2.sibling(button_9, 2);
+  $2.reset(div_3);
+  $2.reset(div_1);
+  var div_4 = $2.sibling(div_1, 2);
+  var div_5 = $2.child(div_4);
+  var canvas = $2.child(div_5);
+  $2.bind_this(canvas, ($$value) => $2.set(canvasEl, $$value), () => $2.get(canvasEl));
+  $2.reset(div_5);
+  $2.bind_this(div_5, ($$value) => $2.set(containerEl, $$value), () => $2.get(containerEl));
+  var div_6 = $2.sibling(div_5, 2);
+  var node = $2.child(div_6);
+  {
+    var consequent = ($$anchor2) => {
+      var div_7 = root();
+      var div_8 = $2.sibling($2.child(div_7), 2);
+      var button_11 = $2.child(div_8);
+      var button_12 = $2.sibling(button_11, 2);
+      var button_13 = $2.sibling(button_12, 2);
+      var button_14 = $2.sibling(button_13, 2);
+      var button_15 = $2.sibling(button_14, 2);
+      var button_16 = $2.sibling(button_15, 2);
+      $2.reset(div_8);
+      var div_9 = $2.sibling(div_8, 6);
+      var button_17 = $2.child(div_9);
+      var button_18 = $2.sibling(button_17, 2);
+      var button_19 = $2.sibling(button_18, 2);
+      var button_20 = $2.sibling(button_19, 2);
+      $2.reset(div_9);
+      $2.reset(div_7);
+      $2.template_effect(() => {
+        $2.set_class(button_11, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === null && $2.get(editor).state.crop ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
+        $2.set_class(button_12, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 1 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
+        $2.set_class(button_13, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 4 / 3 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
+        $2.set_class(button_14, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 16 / 9 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
+        $2.set_class(button_15, 1, `px-2.5 py-2 rounded-lg border font-medium ${$2.get(activeCropRatio) === 3 / 2 ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700"}`);
+        $2.set_class(button_19, 1, `px-3 py-2 rounded-lg border transition-colors ${$2.get(editor).state.transform.flipH ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`);
+        $2.set_class(button_20, 1, `px-3 py-2 rounded-lg border transition-colors ${$2.get(editor).state.transform.flipV ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-200 hover:bg-slate-700"}`);
+      });
+      $2.delegated("click", button_11, () => {
+        $2.set(activeCropRatio, null);
+        $2.get(editor).applyCropPreset(null);
+      });
+      $2.delegated("click", button_12, () => {
+        $2.set(activeCropRatio, 1);
+        $2.get(editor).applyCropPreset(1);
+      });
+      $2.delegated("click", button_13, () => {
+        $2.set(activeCropRatio, 4 / 3);
+        $2.get(editor).applyCropPreset(4 / 3);
+      });
+      $2.delegated("click", button_14, () => {
+        $2.set(activeCropRatio, 16 / 9);
+        $2.get(editor).applyCropPreset(16 / 9);
+      });
+      $2.delegated("click", button_15, () => {
+        $2.set(activeCropRatio, 3 / 2);
+        $2.get(editor).applyCropPreset(3 / 2);
+      });
+      $2.delegated("click", button_16, () => {
+        $2.set(activeCropRatio, null);
+        $2.get(editor).resetCrop();
+      });
+      $2.delegated("click", button_17, () => $2.get(editor).rotate(-90));
+      $2.delegated("click", button_18, () => $2.get(editor).rotate(90));
+      $2.delegated("click", button_19, () => $2.get(editor).flipHorizontal());
+      $2.delegated("click", button_20, () => $2.get(editor).flipVertical());
+      $2.append($$anchor2, div_7);
+    };
+    $2.if(node, ($$render) => {
+      if ($2.get(activeTab) === "crop") $$render(consequent);
+    });
+  }
+  var node_1 = $2.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_10 = root_1();
+      var div_11 = $2.child(div_10);
+      var button_21 = $2.sibling($2.child(div_11), 2);
+      $2.reset(div_11);
+      var div_12 = $2.sibling(div_11, 2);
+      var div_13 = $2.child(div_12);
+      var span_1 = $2.sibling($2.child(div_13), 2);
+      var text_1 = $2.only_child(span_1, true);
+      $2.reset(div_13);
+      var input = $2.sibling(div_13, 2);
+      $2.remove_input_defaults(input);
+      $2.reset(div_12);
+      var div_14 = $2.sibling(div_12, 2);
+      var div_15 = $2.child(div_14);
+      var span_2 = $2.sibling($2.child(div_15), 2);
+      var text_2 = $2.only_child(span_2, true);
+      $2.reset(div_15);
+      var input_1 = $2.sibling(div_15, 2);
+      $2.remove_input_defaults(input_1);
+      $2.reset(div_14);
+      var div_16 = $2.sibling(div_14, 2);
+      var div_17 = $2.child(div_16);
+      var span_3 = $2.sibling($2.child(div_17), 2);
+      var text_3 = $2.only_child(span_3, true);
+      $2.reset(div_17);
+      var input_2 = $2.sibling(div_17, 2);
+      $2.remove_input_defaults(input_2);
+      $2.reset(div_16);
+      var div_18 = $2.sibling(div_16, 2);
+      var div_19 = $2.child(div_18);
+      var span_4 = $2.sibling($2.child(div_19), 2);
+      var text_4 = $2.only_child(span_4, true);
+      $2.reset(div_19);
+      var input_3 = $2.sibling(div_19, 2);
+      $2.remove_input_defaults(input_3);
+      $2.reset(div_18);
+      var div_20 = $2.sibling(div_18, 2);
+      var div_21 = $2.child(div_20);
+      var span_5 = $2.sibling($2.child(div_21), 2);
+      var text_5 = $2.only_child(span_5, true);
+      $2.reset(div_21);
+      var input_4 = $2.sibling(div_21, 2);
+      $2.remove_input_defaults(input_4);
+      $2.reset(div_20);
+      var div_22 = $2.sibling(div_20, 2);
+      var div_23 = $2.child(div_22);
+      var span_6 = $2.sibling($2.child(div_23), 2);
+      var text_6 = $2.only_child(span_6);
+      $2.reset(div_23);
+      var input_5 = $2.sibling(div_23, 2);
+      $2.remove_input_defaults(input_5);
+      $2.reset(div_22);
+      var div_24 = $2.sibling(div_22, 2);
+      var div_25 = $2.child(div_24);
+      var span_7 = $2.sibling($2.child(div_25), 2);
+      var text_7 = $2.only_child(span_7);
+      $2.reset(div_25);
+      var input_6 = $2.sibling(div_25, 2);
+      $2.remove_input_defaults(input_6);
+      $2.reset(div_24);
+      $2.reset(div_10);
+      $2.template_effect(
+        ($0) => {
+          $2.set_text(text_1, $2.get(editor).state.adjustments.brightness);
+          $2.set_value(input, $2.get(editor).state.adjustments.brightness);
+          $2.set_text(text_2, $2.get(editor).state.adjustments.contrast);
+          $2.set_value(input_1, $2.get(editor).state.adjustments.contrast);
+          $2.set_text(text_3, $2.get(editor).state.adjustments.saturation);
+          $2.set_value(input_2, $2.get(editor).state.adjustments.saturation);
+          $2.set_text(text_4, $2.get(editor).state.adjustments.exposure);
+          $2.set_value(input_3, $2.get(editor).state.adjustments.exposure);
+          $2.set_text(text_5, $2.get(editor).state.adjustments.temperature);
+          $2.set_value(input_4, $2.get(editor).state.adjustments.temperature);
+          $2.set_text(text_6, `${$2.get(editor).state.adjustments.blur ?? ""}px`);
+          $2.set_value(input_5, $2.get(editor).state.adjustments.blur);
+          $2.set_text(text_7, `${$0 ?? ""}%`);
+          $2.set_value(input_6, $2.get(editor).state.adjustments.opacity);
+        },
+        [
+          () => Math.round($2.get(editor).state.adjustments.opacity * 100)
+        ]
+      );
+      $2.delegated("click", button_21, () => $2.get(editor).resetAdjustments());
+      $2.delegated("input", input, (e) => $2.get(editor).setAdjustments({ brightness: Number(e.target.value) }));
+      $2.delegated("input", input_1, (e) => $2.get(editor).setAdjustments({ contrast: Number(e.target.value) }));
+      $2.delegated("input", input_2, (e) => $2.get(editor).setAdjustments({ saturation: Number(e.target.value) }));
+      $2.delegated("input", input_3, (e) => $2.get(editor).setAdjustments({ exposure: Number(e.target.value) }));
+      $2.delegated("input", input_4, (e) => $2.get(editor).setAdjustments({ temperature: Number(e.target.value) }));
+      $2.delegated("input", input_5, (e) => $2.get(editor).setAdjustments({ blur: Number(e.target.value) }));
+      $2.delegated("input", input_6, (e) => $2.get(editor).setAdjustments({ opacity: Number(e.target.value) }));
+      $2.append($$anchor2, div_10);
+    };
+    $2.if(node_1, ($$render) => {
+      if ($2.get(activeTab) === "adjust") $$render(consequent_1);
+    });
+  }
+  var node_2 = $2.sibling(node_1, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var div_26 = root_5();
+      var div_27 = $2.sibling($2.child(div_26), 2);
+      $2.each(div_27, 20, () => ["pen", "rect", "circle", "arrow", "line"], $2.index, ($$anchor3, t) => {
+        var button_22 = root_2();
+        var text_8 = $2.only_child(button_22, true);
+        $2.template_effect(() => {
+          $2.set_class(button_22, 1, `py-1.5 px-2 rounded-lg font-medium capitalize border transition-colors ${$2.get(editor).state.activeTool === t ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700"}`);
+          $2.set_text(text_8, t);
+        });
+        $2.delegated("click", button_22, () => $2.get(editor).setTool(t));
+        $2.append($$anchor3, button_22);
+      });
+      $2.reset(div_27);
+      var div_28 = $2.sibling(div_27, 2);
+      var input_7 = $2.sibling($2.child(div_28), 2);
+      $2.remove_input_defaults(input_7);
+      var div_29 = $2.sibling(input_7, 2);
+      var div_30 = $2.child(div_29);
+      var span_8 = $2.sibling($2.child(div_30), 2);
+      var text_9 = $2.only_child(span_8);
+      $2.reset(div_30);
+      var input_8 = $2.sibling(div_30, 2);
+      $2.remove_input_defaults(input_8);
+      $2.reset(div_29);
+      $2.reset(div_28);
+      var div_31 = $2.sibling(div_28, 6);
+      var input_9 = $2.child(div_31);
+      $2.remove_input_defaults(input_9);
+      var button_23 = $2.sibling(input_9, 2);
+      $2.reset(div_31);
+      var div_32 = $2.sibling(div_31, 2);
+      var span_9 = $2.sibling($2.child(div_32), 2);
+      var text_10 = $2.only_child(span_9);
+      $2.reset(div_32);
+      var input_10 = $2.sibling(div_32, 2);
+      $2.remove_input_defaults(input_10);
+      var div_33 = $2.sibling(input_10, 4);
+      var span_10 = $2.child(div_33);
+      var text_11 = $2.only_child(span_10);
+      var node_3 = $2.sibling(span_10, 2);
+      {
+        var consequent_2 = ($$anchor3) => {
+          var button_24 = root_3();
+          $2.delegated("click", button_24, () => $2.get(editor).removeAnnotation($2.get(editor).state.selectedAnnotationId));
+          $2.append($$anchor3, button_24);
+        };
+        $2.if(node_3, ($$render) => {
+          if ($2.get(editor).state.selectedAnnotationId) $$render(consequent_2);
+        });
+      }
+      var node_4 = $2.sibling(node_3, 2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var button_25 = root_4();
+          $2.delegated("click", button_25, () => $2.get(editor).clearAnnotations());
+          $2.append($$anchor3, button_25);
+        };
+        $2.if(node_4, ($$render) => {
+          if ($2.get(editor).state.annotations.length > 0) $$render(consequent_3);
+        });
+      }
+      $2.reset(div_33);
+      $2.reset(div_26);
+      $2.template_effect(() => {
+        $2.set_text(text_9, `${$2.get(strokeWidth) ?? ""}px`);
+        $2.set_text(text_10, `${$2.get(fontSize) ?? ""}px`);
+        $2.set_text(text_11, `Layers (${$2.get(editor).state.annotations.length ?? ""})`);
+      });
+      $2.bind_value(input_7, () => $2.get(activeColor), ($$value) => $2.set(activeColor, $$value));
+      $2.bind_value(input_8, () => $2.get(strokeWidth), ($$value) => $2.set(strokeWidth, $$value));
+      $2.delegated("keydown", input_9, (e) => e.key === "Enter" && handleAddText());
+      $2.bind_value(input_9, () => $2.get(textInput), ($$value) => $2.set(textInput, $$value));
+      $2.delegated("click", button_23, handleAddText);
+      $2.bind_value(input_10, () => $2.get(fontSize), ($$value) => $2.set(fontSize, $$value));
+      $2.append($$anchor2, div_26);
+    };
+    $2.if(node_2, ($$render) => {
+      if ($2.get(activeTab) === "annotate") $$render(consequent_4);
+    });
+  }
+  var node_5 = $2.sibling(node_2, 2);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var div_34 = root_7();
+      var div_35 = $2.child(div_34);
+      var button_26 = $2.sibling($2.child(div_35), 2);
+      $2.reset(div_35);
+      var label = $2.sibling(div_35, 2);
+      var input_11 = $2.child(label);
+      $2.remove_input_defaults(input_11);
+      $2.next(2);
+      $2.reset(label);
+      var node_6 = $2.sibling(label, 2);
+      {
+        var consequent_5 = ($$anchor3) => {
+          var fragment = root_6();
+          var div_36 = $2.first_child(fragment);
+          var input_12 = $2.sibling($2.child(div_36), 2);
+          $2.remove_input_defaults(input_12);
+          $2.reset(div_36);
+          var div_37 = $2.sibling(div_36, 2);
+          var button_27 = $2.child(div_37);
+          var button_28 = $2.sibling(button_27, 2);
+          $2.reset(div_37);
+          var div_38 = $2.sibling(div_37, 2);
+          var div_39 = $2.child(div_38);
+          var span_11 = $2.sibling($2.child(div_39), 2);
+          var text_12 = $2.only_child(span_11, true);
+          $2.reset(div_39);
+          var input_13 = $2.sibling(div_39, 2);
+          $2.remove_input_defaults(input_13);
+          $2.reset(div_38);
+          var div_40 = $2.sibling(div_38, 2);
+          var div_41 = $2.child(div_40);
+          var span_12 = $2.sibling($2.child(div_41), 2);
+          var text_13 = $2.only_child(span_12, true);
+          $2.reset(div_41);
+          var input_14 = $2.sibling(div_41, 2);
+          $2.remove_input_defaults(input_14);
+          $2.reset(div_40);
+          var div_42 = $2.sibling(div_40, 2);
+          var div_43 = $2.child(div_42);
+          var span_13 = $2.sibling($2.child(div_43), 2);
+          var text_14 = $2.only_child(span_13, true);
+          $2.reset(div_43);
+          var input_15 = $2.sibling(div_43, 2);
+          $2.remove_input_defaults(input_15);
+          $2.reset(div_42);
+          var label_1 = $2.sibling(div_42, 2);
+          var input_16 = $2.child(label_1);
+          $2.remove_input_defaults(input_16);
+          $2.next(2);
+          $2.reset(label_1);
+          $2.template_effect(() => {
+            $2.set_value(input_12, $2.get(editor).state.depthMask.maskSource || "");
+            $2.set_class(button_27, 1, `flex-1 py-1.5 rounded-lg border text-xs font-medium ${$2.get(editor).state.depthMask.mode === "threshold" ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300"}`);
+            $2.set_class(button_28, 1, `flex-1 py-1.5 rounded-lg border text-xs font-medium ${$2.get(editor).state.depthMask.mode === "brightness" ? "bg-indigo-600 border-indigo-500 text-white" : "bg-slate-800 border-slate-700 text-slate-300"}`);
+            $2.set_text(text_12, $2.get(editor).state.depthMask.depthRange[0]);
+            $2.set_value(input_13, $2.get(editor).state.depthMask.depthRange[0]);
+            $2.set_text(text_13, $2.get(editor).state.depthMask.depthRange[1]);
+            $2.set_value(input_14, $2.get(editor).state.depthMask.depthRange[1]);
+            $2.set_text(text_14, $2.get(editor).state.depthMask.softness);
+            $2.set_value(input_15, $2.get(editor).state.depthMask.softness);
+            $2.set_checked(input_16, $2.get(editor).state.depthMask.invert);
+          });
+          $2.delegated("input", input_12, (e) => $2.get(editor).setDepthMask({ maskSource: e.target.value || null }));
+          $2.delegated("click", button_27, () => $2.get(editor).setDepthMask({ mode: "threshold" }));
+          $2.delegated("click", button_28, () => $2.get(editor).setDepthMask({ mode: "brightness" }));
+          $2.delegated("input", input_13, (e) => $2.get(editor).setDepthMask({
+            depthRange: [
+              Number(e.target.value),
+              $2.get(editor).state.depthMask.depthRange[1]
+            ]
+          }));
+          $2.delegated("input", input_14, (e) => $2.get(editor).setDepthMask({
+            depthRange: [
+              $2.get(editor).state.depthMask.depthRange[0],
+              Number(e.target.value)
+            ]
+          }));
+          $2.delegated("input", input_15, (e) => $2.get(editor).setDepthMask({ softness: Number(e.target.value) }));
+          $2.delegated("change", input_16, (e) => $2.get(editor).setDepthMask({ invert: e.target.checked }));
+          $2.append($$anchor3, fragment);
+        };
+        $2.if(node_6, ($$render) => {
+          if ($2.get(editor).state.depthMask.enabled) $$render(consequent_5);
+        });
+      }
+      $2.reset(div_34);
+      $2.template_effect(() => $2.set_checked(input_11, $2.get(editor).state.depthMask.enabled));
+      $2.delegated("click", button_26, () => $2.get(editor).resetDepthMask());
+      $2.delegated("change", input_11, (e) => $2.get(editor).setDepthMask({ enabled: e.target.checked }));
+      $2.append($$anchor2, div_34);
+    };
+    $2.if(node_5, ($$render) => {
+      if ($2.get(activeTab) === "depth") $$render(consequent_6);
+    });
+  }
+  $2.reset(div_6);
+  $2.reset(div_4);
+  $2.reset(div);
+  $2.template_effect(
+    ($0) => {
+      $2.set_class(div, 1, `flex flex-col bg-slate-900 border border-slate-800 rounded-xl overflow-hidden shadow-2xl text-slate-100 ${className() ?? ""}`);
+      $2.set_style(div, style());
+      $2.set_class(button, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "crop" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
+      $2.set_class(button_1, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "adjust" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
+      $2.set_class(button_2, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "annotate" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
+      $2.set_class(button_3, 1, `px-3 py-1.5 rounded-md font-medium transition-colors ${$2.get(activeTab) === "depth" ? "bg-indigo-600 text-white shadow" : "text-slate-400 hover:text-slate-200"}`);
+      button_4.disabled = !$2.get(editor).canUndo;
+      button_5.disabled = !$2.get(editor).canRedo;
+      $2.set_text(text, `${$0 ?? ""}%`);
+    },
+    [() => Math.round($2.get(editor).state.zoom * 100)]
+  );
+  $2.delegated("click", button, () => {
+    $2.set(activeTab, "crop");
+    $2.get(editor).setTool("crop");
+  });
+  $2.delegated("click", button_1, () => {
+    $2.set(activeTab, "adjust");
+    $2.get(editor).setTool("select");
+  });
+  $2.delegated("click", button_2, () => {
+    $2.set(activeTab, "annotate");
+    $2.get(editor).setTool("pen");
+  });
+  $2.delegated("click", button_3, () => {
+    $2.set(activeTab, "depth");
+    $2.get(editor).setTool("select");
+  });
+  $2.delegated("click", button_4, () => $2.get(editor).undo());
+  $2.delegated("click", button_5, () => $2.get(editor).redo());
+  $2.delegated("click", button_6, () => $2.get(editor).reset());
+  $2.delegated("click", button_7, () => $2.get(editor).zoomOut());
+  $2.delegated("click", button_8, () => $2.get(editor).zoomIn());
+  $2.delegated("mousedown", button_9, () => $2.get(editor).setComparing(true));
+  $2.delegated("mouseup", button_9, () => $2.get(editor).setComparing(false));
+  $2.event("mouseleave", button_9, () => $2.get(editor).setComparing(false));
+  $2.delegated("click", button_10, handleExport);
+  $2.delegated("mousedown", canvas, handleMouseDown);
+  $2.delegated("mousemove", canvas, handleMouseMove);
+  $2.delegated("mouseup", canvas, handleMouseUp);
+  $2.event("mouseleave", canvas, handleMouseUp);
+  $2.append($$anchor, div);
+  $2.pop();
+}
+$2.delegate([
+  "click",
+  "mousedown",
+  "mouseup",
+  "mousemove",
+  "input",
+  "keydown",
+  "change"
+]);
+
+export {
+  createReactiveImageEditor,
+  ImageEditor
+};
+//# sourceMappingURL=chunk-REI5FZ7F.js.map