react-os-shell 0.2.22 → 0.2.24

package/dist/{chunk-4DW5YQ7Y.js → chunk-LJ6DLGTY.js}

@@ -8,53 +8,56 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 var COLORS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#000000", "#ffffff"];
 var STROKE_DEFAULT = 4;
 var MOSAIC_BLOCK = 12;
+var ZOOM_MIN = 0.25;
+var ZOOM_MAX = 4;
+var ZOOM_STEP = 0.25;
+var newId = () => Math.random().toString(36).slice(2, 9);
 function ImageAnnotator({ src, filename, onClose }) {
-  const canvasRef = useRef(null);
-  const overlayRef = useRef(null);
   const wrapRef = useRef(null);
-  const [tool, setTool] = useState("rect");
+  const canvasRef = useRef(null);
+  const svgRef = useRef(null);
+  const imageRef = useRef(null);
+  const [tool, setTool] = useState("select");
   const [color, setColor] = useState(COLORS[0]);
   const [stroke, setStroke] = useState(STROKE_DEFAULT);
-  const historyRef = useRef([]);
-  const [historyDepth, setHistoryDepth] = useState(0);
-  const [imageReady, setImageReady] = useState(false);
+  const [annotations, setAnnotations] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+  const [imageSize, setImageSize] = useState(null);
+  const [fitSize, setFitSize] = useState(null);
+  const [zoom, setZoom] = useState(1);
+  const [preview, setPreview] = useState(null);
   const [pendingText, setPendingText] = useState(null);
   const [pendingCrop, setPendingCrop] = useState(null);
-  const [displaySize, setDisplaySize] = useState(null);
-  const [displayScale, setDisplayScale] = useState(1);
+  const dragRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const displaySize = useMemo(() => {
+    if (!fitSize) return null;
+    return { w: fitSize.w * zoom, h: fitSize.h * zoom };
+  }, [fitSize, zoom]);
   useEffect(() => {
     const img = new Image();
     img.crossOrigin = "anonymous";
     img.onload = () => {
-      const c = canvasRef.current;
-      const o = overlayRef.current;
-      if (!c || !o) return;
-      c.width = img.naturalWidth;
-      c.height = img.naturalHeight;
-      o.width = img.naturalWidth;
-      o.height = img.naturalHeight;
-      const ctx = c.getContext("2d");
-      ctx.drawImage(img, 0, 0);
-      historyRef.current = [];
-      setHistoryDepth(0);
-      setImageReady(true);
+      imageRef.current = img;
+      setImageSize({ w: img.naturalWidth, h: img.naturalHeight });
+      setAnnotations([]);
+      setSelectedId(null);
     };
     img.onerror = () => toast_default.error("Failed to load image");
     img.src = src;
   }, [src]);
   useEffect(() => {
-    if (!imageReady) return;
+    if (!imageSize) return;
     const update = () => {
-      const c = canvasRef.current;
       const wrap = wrapRef.current;
-      if (!c || !wrap) return;
-      const wrapRect = wrap.getBoundingClientRect();
-      const availW = Math.max(0, wrapRect.width - 32);
-      const availH = Math.max(0, wrapRect.height - 32);
+      if (!wrap) return;
+      const r = wrap.getBoundingClientRect();
+      const availW = Math.max(0, r.width - 32);
+      const availH = Math.max(0, r.height - 32);
       if (availW === 0 || availH === 0) return;
-      const ratio = c.width / c.height;
-      let w = c.width;
-      let h = c.height;
+      const ratio = imageSize.w / imageSize.h;
+      let w = imageSize.w;
+      let h = imageSize.h;
       if (w > availW) {
         w = availW;
         h = w / ratio;
@@ -63,171 +66,220 @@ function ImageAnnotator({ src, filename, onClose }) {
         h = availH;
         w = h * ratio;
       }
-      setDisplaySize({ w, h });
-      setDisplayScale(c.width / w);
+      setFitSize({ w, h });
     };
     update();
     const ro = new ResizeObserver(update);
     if (wrapRef.current) ro.observe(wrapRef.current);
     return () => ro.disconnect();
-  }, [imageReady]);
-  const pushHistory = () => {
+  }, [imageSize]);
+  const mosaicAnnos = useMemo(
+    () => annotations.filter((a) => a.type === "mosaic"),
+    [annotations]
+  );
+  useEffect(() => {
+    const img = imageRef.current;
     const c = canvasRef.current;
-    if (!c) return;
+    if (!img || !c || !imageSize) return;
+    c.width = imageSize.w;
+    c.height = imageSize.h;
     const ctx = c.getContext("2d");
-    historyRef.current.push(ctx.getImageData(0, 0, c.width, c.height));
-    if (historyRef.current.length > 50) historyRef.current.shift();
-    setHistoryDepth(historyRef.current.length);
+    ctx.drawImage(img, 0, 0);
+    for (const m of mosaicAnnos) applyMosaic(ctx, m);
+  }, [imageSize, mosaicAnnos, fitSize]);
+  const evToImage = (e) => {
+    const svg = svgRef.current;
+    if (!svg) return { x: 0, y: 0 };
+    const pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    const ctm = svg.getScreenCTM();
+    if (!ctm) return { x: 0, y: 0 };
+    const t = pt.matrixTransform(ctm.inverse());
+    return { x: t.x, y: t.y };
   };
-  const undo = () => {
-    if (historyRef.current.length === 0) return;
-    const prev = historyRef.current.pop();
-    setHistoryDepth(historyRef.current.length);
-    const c = canvasRef.current;
-    if (!c) return;
-    c.getContext("2d").putImageData(prev, 0, 0);
-    setPendingCrop(null);
-    clearOverlay();
+  const beginDrag = (drag) => {
+    dragRef.current = drag;
+    setIsDragging(true);
   };
-  const clearOverlay = () => {
-    const o = overlayRef.current;
-    if (!o) return;
-    o.getContext("2d").clearRect(0, 0, o.width, o.height);
-  };
-  const evToCanvas = (e) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - rect.left) * displayScale;
-    const y = (e.clientY - rect.top) * displayScale;
-    return { x, y };
+  useEffect(() => {
+    if (!isDragging) return;
+    const onMove = (ev) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const p = evToImage(ev);
+      if (drag.kind === "draw") {
+        setPreview(makeShape(tool, drag.start, p, color, stroke));
+      } else if (drag.kind === "crop") {
+        setPendingCrop(normalizeRect(drag.start, p));
+      } else if (drag.kind === "move") {
+        const dx = p.x - drag.start.x;
+        const dy = p.y - drag.start.y;
+        setAnnotations((prev) => prev.map((a) => a.id === drag.id ? translate(drag.original, dx, dy) : a));
+      } else if (drag.kind === "resize") {
+        setAnnotations((prev) => prev.map((a) => a.id === drag.id ? resize(drag.original, drag.corner, p) : a));
+      }
+    };
+    const onUp = () => {
+      const drag = dragRef.current;
+      dragRef.current = null;
+      setIsDragging(false);
+      if (drag?.kind === "draw") {
+        setPreview((p) => {
+          if (!p || isTrivial(p)) return null;
+          const anno = { ...p, id: newId() };
+          setAnnotations((prev) => [...prev, anno]);
+          setSelectedId(anno.id);
+          setTool("select");
+          return null;
+        });
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [isDragging, tool, color, stroke]);
+  const handleAnnoPointerDown = (e, anno) => {
+    if (tool !== "select") return;
+    e.stopPropagation();
+    setSelectedId(anno.id);
+    beginDrag({ kind: "move", id: anno.id, start: evToImage(e), original: anno });
   };
-  const dragRef = useRef(null);
-  const drawShapePreview = (start, end) => {
-    const o = overlayRef.current;
-    if (!o) return;
-    const ctx = o.getContext("2d");
-    ctx.clearRect(0, 0, o.width, o.height);
-    ctx.strokeStyle = color;
-    ctx.fillStyle = color;
-    ctx.lineWidth = stroke;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    if (tool === "rect") {
-      drawRoundedRect(ctx, start, end, stroke);
-    } else if (tool === "circle") {
-      drawEllipse(ctx, start, end);
-    } else if (tool === "arrow") {
-      drawArrow(ctx, start, end, stroke);
-    } else if (tool === "mosaic") {
-      ctx.fillStyle = `${color}33`;
-      ctx.strokeStyle = color;
-      ctx.lineWidth = 1.5;
-      const r = normalizeRect(start, end);
-      ctx.fillRect(r.x, r.y, r.w, r.h);
-      ctx.strokeRect(r.x, r.y, r.w, r.h);
-    } else if (tool === "crop") {
-      ctx.strokeStyle = "#ffffff";
-      ctx.lineWidth = 2;
-      ctx.setLineDash([8, 6]);
-      const r = normalizeRect(start, end);
-      ctx.fillStyle = "rgba(0,0,0,0.45)";
-      ctx.fillRect(0, 0, o.width, r.y);
-      ctx.fillRect(0, r.y + r.h, o.width, o.height - (r.y + r.h));
-      ctx.fillRect(0, r.y, r.x, r.h);
-      ctx.fillRect(r.x + r.w, r.y, o.width - (r.x + r.w), r.h);
-      ctx.strokeRect(r.x, r.y, r.w, r.h);
-      ctx.setLineDash([]);
-    }
+  const handleHandlePointerDown = (e, anno, corner) => {
+    e.stopPropagation();
+    beginDrag({ kind: "resize", id: anno.id, corner, start: evToImage(e), original: anno });
   };
-  const onPointerDown = (e) => {
-    if (!imageReady) return;
-    const pos = evToCanvas(e);
-    if (tool === "text") {
-      setPendingText({ x: pos.x, y: pos.y, value: "" });
+  const handleSvgPointerDown = (e) => {
+    if (tool === "select") {
+      setSelectedId(null);
       return;
     }
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = { start: pos, current: pos };
-    drawShapePreview(pos, pos);
-  };
-  const onPointerMove = (e) => {
-    if (!dragRef.current) return;
-    const pos = evToCanvas(e);
-    dragRef.current.current = pos;
-    drawShapePreview(dragRef.current.start, pos);
-  };
-  const onPointerUp = (e) => {
-    if (!dragRef.current) return;
-    e.currentTarget.releasePointerCapture(e.pointerId);
-    const { start, current } = dragRef.current;
-    dragRef.current = null;
-    if (Math.abs(current.x - start.x) < 2 && Math.abs(current.y - start.y) < 2) {
-      clearOverlay();
+    if (tool === "text") {
+      const p = evToImage(e);
+      setPendingText({ x: p.x, y: p.y, value: "" });
       return;
     }
+    const start = evToImage(e);
     if (tool === "crop") {
-      const r = normalizeRect(start, current);
-      setPendingCrop(r);
+      beginDrag({ kind: "crop", start });
       return;
     }
-    pushHistory();
-    const c = canvasRef.current;
-    const ctx = c.getContext("2d");
-    ctx.strokeStyle = color;
-    ctx.fillStyle = color;
-    ctx.lineWidth = stroke;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    if (tool === "rect") drawRoundedRect(ctx, start, current, stroke);
-    else if (tool === "circle") drawEllipse(ctx, start, current);
-    else if (tool === "arrow") drawArrow(ctx, start, current, stroke);
-    else if (tool === "mosaic") applyMosaic(ctx, normalizeRect(start, current));
-    clearOverlay();
+    setPreview(makeShape(tool, start, start, color, stroke));
+    beginDrag({ kind: "draw", start });
   };
+  const handleAnnoDoubleClick = (anno) => {
+    if (anno.type !== "text") return;
+    setPendingText({ x: anno.x, y: anno.y, value: anno.text, editingId: anno.id });
+  };
+  useEffect(() => {
+    const onKey = (ev) => {
+      if (!selectedId) return;
+      if (document.activeElement && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) return;
+      if (ev.key === "Delete" || ev.key === "Backspace") {
+        ev.preventDefault();
+        setAnnotations((prev) => prev.filter((a) => a.id !== selectedId));
+        setSelectedId(null);
+      } else if (ev.key === "Escape") {
+        setSelectedId(null);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [selectedId]);
   const commitText = () => {
     if (!pendingText) return;
-    if (!pendingText.value.trim()) {
+    const value = pendingText.value.trim();
+    if (!value) {
+      if (pendingText.editingId) {
+        setAnnotations((prev) => prev.filter((a) => a.id !== pendingText.editingId));
+      }
       setPendingText(null);
       return;
     }
-    pushHistory();
-    const c = canvasRef.current;
-    const ctx = c.getContext("2d");
     const fontSize = Math.max(16, stroke * 6);
-    ctx.fillStyle = color;
-    ctx.font = `600 ${fontSize}px -apple-system, system-ui, sans-serif`;
-    ctx.textBaseline = "top";
-    const lines = pendingText.value.split("\n");
-    lines.forEach((line, i) => {
-      ctx.fillText(line, pendingText.x, pendingText.y + i * fontSize * 1.2);
-    });
+    if (pendingText.editingId) {
+      setAnnotations((prev) => prev.map(
+        (a) => a.id === pendingText.editingId && a.type === "text" ? { ...a, text: value } : a
+      ));
+    } else {
+      const anno = {
+        id: newId(),
+        type: "text",
+        x: pendingText.x,
+        y: pendingText.y,
+        text: value,
+        color,
+        size: fontSize
+      };
+      setAnnotations((prev) => [...prev, anno]);
+      setSelectedId(anno.id);
+      setTool("select");
+    }
     setPendingText(null);
   };
   const applyCrop = () => {
-    if (!pendingCrop) return;
-    const c = canvasRef.current;
-    pushHistory();
+    if (!pendingCrop || !imageRef.current || !imageSize) return;
     const r = pendingCrop;
-    const data = c.getContext("2d").getImageData(r.x, r.y, r.w, r.h);
-    c.width = Math.round(r.w);
-    c.height = Math.round(r.h);
-    overlayRef.current.width = c.width;
-    overlayRef.current.height = c.height;
-    c.getContext("2d").putImageData(data, 0, 0);
-    setPendingCrop(null);
-    clearOverlay();
-    requestAnimationFrame(() => {
-      const rect = c.getBoundingClientRect();
-      if (rect.width > 0) setDisplayScale(c.width / rect.width);
-    });
+    const tmp = document.createElement("canvas");
+    tmp.width = Math.round(r.w);
+    tmp.height = Math.round(r.h);
+    const tctx = tmp.getContext("2d");
+    const sourceCanvas = document.createElement("canvas");
+    sourceCanvas.width = imageSize.w;
+    sourceCanvas.height = imageSize.h;
+    const sctx = sourceCanvas.getContext("2d");
+    sctx.drawImage(imageRef.current, 0, 0);
+    for (const m of mosaicAnnos) applyMosaic(sctx, m);
+    tctx.drawImage(sourceCanvas, r.x, r.y, r.w, r.h, 0, 0, r.w, r.h);
+    const newImg = new Image();
+    newImg.onload = () => {
+      imageRef.current = newImg;
+      setImageSize({ w: newImg.naturalWidth, h: newImg.naturalHeight });
+      setAnnotations(
+        (prev) => prev.filter((a) => a.type !== "mosaic").map((a) => translate(a, -r.x, -r.y)).filter((a) => withinBounds(a, newImg.naturalWidth, newImg.naturalHeight))
+      );
+      setPendingCrop(null);
+    };
+    newImg.src = tmp.toDataURL("image/png");
   };
-  const cancelCrop = () => {
-    setPendingCrop(null);
-    clearOverlay();
+  const cancelCrop = () => setPendingCrop(null);
+  const undoLast = () => {
+    setAnnotations((prev) => prev.slice(0, -1));
+    setSelectedId(null);
   };
-  const downloadAnnotated = () => {
+  const compositeToCanvas = async () => {
     const c = canvasRef.current;
-    if (!c) return;
-    c.toBlob((blob) => {
+    const svg = svgRef.current;
+    if (!c || !svg || !imageSize) return null;
+    const out = document.createElement("canvas");
+    out.width = imageSize.w;
+    out.height = imageSize.h;
+    const octx = out.getContext("2d");
+    octx.drawImage(c, 0, 0);
+    const clone = svg.cloneNode(true);
+    clone.querySelectorAll("[data-chrome]").forEach((n) => n.remove());
+    const xml = new XMLSerializer().serializeToString(clone);
+    const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    const svgImg = new Image();
+    await new Promise((resolve) => {
+      svgImg.onload = () => resolve();
+      svgImg.onerror = () => resolve();
+      svgImg.src = svgUrl;
+    });
+    octx.drawImage(svgImg, 0, 0, imageSize.w, imageSize.h);
+    URL.revokeObjectURL(svgUrl);
+    return out;
+  };
+  const downloadAnnotated = async () => {
+    const out = await compositeToCanvas();
+    if (!out) return;
+    out.toBlob((blob) => {
       if (!blob) {
         toast_default.error("Failed to export");
         return;
@@ -241,7 +293,28 @@ function ImageAnnotator({ src, filename, onClose }) {
       URL.revokeObjectURL(url);
     }, "image/png");
   };
+  const copyToClipboard = async () => {
+    if (!("clipboard" in navigator) || typeof ClipboardItem === "undefined") {
+      toast_default.error("Clipboard images are not supported in this browser");
+      return;
+    }
+    const out = await compositeToCanvas();
+    if (!out) return;
+    out.toBlob(async (blob) => {
+      if (!blob) {
+        toast_default.error("Failed to copy");
+        return;
+      }
+      try {
+        await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+        toast_default.success("Copied to clipboard");
+      } catch {
+        toast_default.error("Copy failed (clipboard permission?)");
+      }
+    }, "image/png");
+  };
   const tools = useMemo(() => [
+    { id: "select", label: "Select / Move", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 3l7 17 2-7 7-2L5 3z" }) }) },
     { id: "rect", label: "Rectangle", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("rect", { x: "4", y: "6", width: "16", height: "12", rx: "3" }) }) },
     { id: "circle", label: "Ellipse", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "8", ry: "6" }) }) },
     { id: "arrow", label: "Arrow", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 19L19 5m0 0h-7m7 0v7" }) }) },
@@ -250,12 +323,16 @@ function ImageAnnotator({ src, filename, onClose }) {
     { id: "crop", label: "Crop", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 2v15a1 1 0 001 1h15M2 6h15a1 1 0 011 1v15" }) }) }
   ], []);
   const btnClass = (active) => `p-1.5 rounded transition-colors ${active ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200"}`;
+  const scale = displaySize && imageSize ? displaySize.w / imageSize.w : 1;
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-gray-100", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-gray-200 bg-white shrink-0 flex-wrap", children: [
       tools.map((t) => /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => setTool(t.id),
+          onClick: () => {
+            setTool(t.id);
+            setSelectedId(null);
+          },
           title: t.label,
           className: btnClass(tool === t.id),
           children: t.icon
@@ -266,7 +343,12 @@ function ImageAnnotator({ src, filename, onClose }) {
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: COLORS.map((c) => /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => setColor(c),
+          onClick: () => {
+            setColor(c);
+            if (selectedId) {
+              setAnnotations((prev) => prev.map((a) => a.id === selectedId && a.type !== "mosaic" ? { ...a, color: c } : a));
+            }
+          },
           title: c,
           className: `h-5 w-5 rounded-full border ${color === c ? "ring-2 ring-blue-500 ring-offset-1" : "border-gray-300"}`,
           style: { background: c }
@@ -291,7 +373,16 @@ function ImageAnnotator({ src, filename, onClose }) {
         /* @__PURE__ */ jsx("span", { className: "tabular-nums w-4 text-right", children: stroke })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
-      /* @__PURE__ */ jsx("button", { onClick: undo, disabled: historyDepth === 0, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 disabled:opacity-30 text-gray-700", children: "Undo" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(ZOOM_MIN, Math.round((z - ZOOM_STEP) * 100) / 100)), className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", title: "Zoom out", children: "\u2212" }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-gray-600 tabular-nums w-10 text-center", children: [
+        Math.round(zoom * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.min(ZOOM_MAX, Math.round((z + ZOOM_STEP) * 100) / 100)), className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", title: "Zoom in", children: "+" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom(1), className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", title: "Fit to area", children: "Fit" }),
+      /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
+      /* @__PURE__ */ jsx("button", { onClick: undoLast, disabled: annotations.length === 0, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 disabled:opacity-30 text-gray-700", children: "Undo" }),
+      /* @__PURE__ */ jsx("button", { onClick: copyToClipboard, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", children: "Copy" }),
       /* @__PURE__ */ jsx("button", { onClick: downloadAnnotated, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", children: "Save" }),
       /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
         pendingCrop && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -301,79 +392,372 @@ function ImageAnnotator({ src, filename, onClose }) {
         /* @__PURE__ */ jsx("button", { onClick: onClose, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", children: "Exit" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { ref: wrapRef, className: "flex-1 overflow-hidden bg-gray-200 flex items-center justify-center p-4 relative", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { ref: wrapRef, className: "flex-1 overflow-auto bg-gray-200 flex items-center justify-center p-4 relative", children: displaySize && imageSize && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "relative shadow-lg rounded overflow-hidden",
-        style: displaySize ? { width: displaySize.w, height: displaySize.h } : void 0,
+        className: "relative shadow-lg rounded overflow-hidden bg-white shrink-0",
+        style: { width: displaySize.w, height: displaySize.h },
         children: [
           /* @__PURE__ */ jsx(
             "canvas",
             {
               ref: canvasRef,
-              onPointerDown,
-              onPointerMove,
-              onPointerUp,
-              onPointerCancel: () => {
-                dragRef.current = null;
-                clearOverlay();
-              },
-              style: { touchAction: "none", display: "block", width: "100%", height: "100%", cursor: tool === "text" ? "text" : "crosshair", background: "#fff" }
+              style: { position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }
             }
           ),
-          /* @__PURE__ */ jsx(
-            "canvas",
+          /* @__PURE__ */ jsxs(
+            "svg",
             {
-              ref: overlayRef,
+              ref: svgRef,
+              viewBox: `0 0 ${imageSize.w} ${imageSize.h}`,
+              preserveAspectRatio: "none",
               style: {
                 position: "absolute",
-                top: 0,
-                left: 0,
+                inset: 0,
                 width: "100%",
                 height: "100%",
-                pointerEvents: "none",
-                display: "block"
-              }
+                touchAction: "none",
+                cursor: tool === "select" ? "default" : tool === "text" ? "text" : "crosshair"
+              },
+              onPointerDown: handleSvgPointerDown,
+              children: [
+                annotations.map((a) => /* @__PURE__ */ jsx(
+                  AnnotationView,
+                  {
+                    anno: a,
+                    selected: selectedId === a.id,
+                    zoom,
+                    onPointerDown: (e) => handleAnnoPointerDown(e, a),
+                    onDoubleClick: () => handleAnnoDoubleClick(a),
+                    onHandlePointerDown: (e, corner) => handleHandlePointerDown(e, a, corner)
+                  },
+                  a.id
+                )),
+                preview && /* @__PURE__ */ jsx(AnnotationView, { anno: { ...preview, id: "__preview" }, preview: true }),
+                pendingCrop && /* @__PURE__ */ jsx(CropOverlay, { rect: pendingCrop, imageSize })
+              ]
             }
           ),
           pendingText && /* @__PURE__ */ jsx(
-            "div",
+            PendingTextEditor,
             {
-              style: {
-                position: "absolute",
-                left: `${pendingText.x / displayScale}px`,
-                top: `${pendingText.y / displayScale}px`,
-                transform: "translateY(-2px)"
-              },
-              className: "z-10",
-              children: /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  autoFocus: true,
-                  value: pendingText.value,
-                  onChange: (e) => setPendingText({ ...pendingText, value: e.target.value }),
-                  onBlur: commitText,
-                  onKeyDown: (e) => {
-                    if (e.key === "Escape") {
-                      setPendingText(null);
-                    } else if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault();
-                      commitText();
-                    }
-                  },
-                  placeholder: "Type then Enter\u2026",
-                  rows: 1,
-                  className: "bg-white/95 border border-blue-400 rounded px-1 py-0.5 text-sm outline-none resize-none shadow-md",
-                  style: { color, fontWeight: 600, minWidth: 80 }
-                }
-              )
+              pendingText,
+              color,
+              scale,
+              onChange: (value) => setPendingText({ ...pendingText, value }),
+              onCommit: commitText,
+              onCancel: () => setPendingText(null)
             }
           )
         ]
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 border-t border-gray-200 bg-white text-[11px] text-gray-500 shrink-0", children: tool === "select" ? selectedId ? "Drag to move. Delete / Backspace removes. Click outside to deselect." : "Tap a shape to select it. Double-click text to edit." : tool === "text" ? "Click to drop a text label." : tool === "crop" ? "Drag a rectangle to set the crop region." : "Drag on the image to draw." })
   ] });
 }
+function AnnotationView({ anno, selected, preview, zoom = 1, onPointerDown, onDoubleClick, onHandlePointerDown }) {
+  const dim = boundingBox(anno);
+  const interactive = onPointerDown ? { onPointerDown, pointerEvents: "all", style: { cursor: "move" } } : {};
+  const dblc = onDoubleClick ? { onDoubleClick } : {};
+  let body;
+  if (anno.type === "rect") {
+    const radius = Math.min(anno.w, anno.h, 16) * 0.4;
+    body = /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: anno.x,
+        y: anno.y,
+        width: anno.w,
+        height: anno.h,
+        rx: radius,
+        ry: radius,
+        fill: "none",
+        stroke: anno.color,
+        strokeWidth: anno.stroke,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...interactive
+      }
+    );
+  } else if (anno.type === "circle") {
+    body = /* @__PURE__ */ jsx(
+      "ellipse",
+      {
+        cx: anno.x + anno.w / 2,
+        cy: anno.y + anno.h / 2,
+        rx: anno.w / 2,
+        ry: anno.h / 2,
+        fill: "none",
+        stroke: anno.color,
+        strokeWidth: anno.stroke,
+        ...interactive
+      }
+    );
+  } else if (anno.type === "arrow") {
+    body = /* @__PURE__ */ jsx(ArrowShape, { anno, interactive });
+  } else if (anno.type === "mosaic") {
+    body = /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: anno.x,
+        y: anno.y,
+        width: anno.w,
+        height: anno.h,
+        fill: "rgba(0,0,0,0.001)",
+        stroke: selected ? "#3b82f6" : "none",
+        strokeWidth: selected ? 2 : 0,
+        strokeDasharray: selected ? "6,4" : void 0,
+        ...interactive
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: anno.x,
+        y: anno.y + anno.size,
+        fill: anno.color,
+        fontSize: anno.size,
+        fontWeight: 600,
+        fontFamily: "-apple-system, system-ui, sans-serif",
+        style: { userSelect: "none" },
+        ...interactive,
+        ...dblc,
+        children: anno.text.split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", { x: anno.x, dy: i === 0 ? 0 : anno.size * 1.2, children: line }, i))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("g", { children: [
+    body,
+    selected && !preview && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          "data-chrome": "selection",
+          x: dim.x - 4,
+          y: dim.y - 4,
+          width: dim.w + 8,
+          height: dim.h + 8,
+          fill: "none",
+          stroke: "#3b82f6",
+          strokeWidth: 2 / zoom,
+          strokeDasharray: `${6 / zoom},${4 / zoom}`,
+          pointerEvents: "none"
+        }
+      ),
+      onHandlePointerDown && /* @__PURE__ */ jsx(ResizeHandles, { anno, zoom, onHandlePointerDown })
+    ] })
+  ] });
+}
+function ResizeHandles({
+  anno,
+  zoom,
+  onHandlePointerDown
+}) {
+  const r = 6 / zoom;
+  const sw = 1.5 / zoom;
+  const handleProps = (cursor) => ({
+    fill: "#fff",
+    stroke: "#3b82f6",
+    strokeWidth: sw,
+    pointerEvents: "all",
+    style: { cursor }
+  });
+  if (anno.type === "arrow") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: anno.x1, cy: anno.y1, r, ...handleProps("grab"), "data-chrome": "handle", onPointerDown: (e) => onHandlePointerDown(e, "start") }),
+      /* @__PURE__ */ jsx("circle", { cx: anno.x2, cy: anno.y2, r, ...handleProps("grab"), "data-chrome": "handle", onPointerDown: (e) => onHandlePointerDown(e, "end") })
+    ] });
+  }
+  if (anno.type === "text") {
+    return null;
+  }
+  const x = anno.x;
+  const y = anno.y;
+  const w = anno.w;
+  const h = anno.h;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r, ...handleProps("nwse-resize"), "data-chrome": "handle", onPointerDown: (e) => onHandlePointerDown(e, "nw") }),
+    /* @__PURE__ */ jsx("circle", { cx: x + w, cy: y, r, ...handleProps("nesw-resize"), "data-chrome": "handle", onPointerDown: (e) => onHandlePointerDown(e, "ne") }),
+    /* @__PURE__ */ jsx("circle", { cx: x + w, cy: y + h, r, ...handleProps("nwse-resize"), "data-chrome": "handle", onPointerDown: (e) => onHandlePointerDown(e, "se") }),
+    /* @__PURE__ */ jsx("circle", { cx: x, cy: y + h, r, ...handleProps("nesw-resize"), "data-chrome": "handle", onPointerDown: (e) => onHandlePointerDown(e, "sw") })
+  ] });
+}
+function PendingTextEditor({
+  pendingText,
+  color,
+  scale,
+  onChange,
+  onCommit,
+  onCancel
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      ref.current?.focus();
+      ref.current?.select?.();
+    });
+    return () => cancelAnimationFrame(id);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: `${pendingText.x * scale}px`,
+        top: `${pendingText.y * scale}px`,
+        transform: "translateY(-2px)",
+        zIndex: 5
+      },
+      onPointerDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          value: pendingText.value,
+          onChange: (e) => onChange(e.target.value),
+          onBlur: onCommit,
+          onKeyDown: (e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            } else if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              onCommit();
+            }
+          },
+          placeholder: "Type then Enter\u2026",
+          rows: 1,
+          className: "bg-white/95 border border-blue-400 rounded px-1 py-0.5 text-sm outline-none resize-none shadow-md",
+          style: { color, fontWeight: 600, minWidth: 80 }
+        }
+      )
+    }
+  );
+}
+function ArrowShape({ anno, interactive }) {
+  const headLen = Math.max(12, anno.stroke * 4);
+  const angle = Math.atan2(anno.y2 - anno.y1, anno.x2 - anno.x1);
+  const a1 = angle + Math.PI - Math.PI / 7;
+  const a2 = angle + Math.PI + Math.PI / 7;
+  const head = `M${anno.x2},${anno.y2} L${anno.x2 + headLen * Math.cos(a1)},${anno.y2 + headLen * Math.sin(a1)} L${anno.x2 + headLen * Math.cos(a2)},${anno.y2 + headLen * Math.sin(a2)} Z`;
+  return /* @__PURE__ */ jsxs("g", { ...interactive, children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: anno.x1,
+        y1: anno.y1,
+        x2: anno.x2,
+        y2: anno.y2,
+        stroke: anno.color,
+        strokeWidth: anno.stroke,
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: head, fill: anno.color })
+  ] });
+}
+function CropOverlay({ rect, imageSize }) {
+  return /* @__PURE__ */ jsxs("g", { pointerEvents: "none", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M0,0 H${imageSize.w} V${imageSize.h} H0 Z M${rect.x},${rect.y} V${rect.y + rect.h} H${rect.x + rect.w} V${rect.y} Z`,
+        fill: "rgba(0,0,0,0.45)",
+        fillRule: "evenodd"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: rect.x,
+        y: rect.y,
+        width: rect.w,
+        height: rect.h,
+        fill: "none",
+        stroke: "#fff",
+        strokeWidth: 2,
+        strokeDasharray: "8,6"
+      }
+    )
+  ] });
+}
+function makeShape(tool, start, end, color, stroke) {
+  if (tool === "rect" || tool === "circle") {
+    const r = normalizeRect(start, end);
+    return { id: "", type: tool, x: r.x, y: r.y, w: r.w, h: r.h, color, stroke };
+  }
+  if (tool === "arrow") {
+    return { id: "", type: "arrow", x1: start.x, y1: start.y, x2: end.x, y2: end.y, color, stroke };
+  }
+  if (tool === "mosaic") {
+    const r = normalizeRect(start, end);
+    return { id: "", type: "mosaic", x: r.x, y: r.y, w: r.w, h: r.h };
+  }
+  return null;
+}
+function isTrivial(a) {
+  if (a.type === "arrow") {
+    return Math.abs(a.x2 - a.x1) < 4 && Math.abs(a.y2 - a.y1) < 4;
+  }
+  if ("w" in a && "h" in a) {
+    return a.w < 4 || a.h < 4;
+  }
+  return false;
+}
+function translate(a, dx, dy) {
+  if (a.type === "arrow") {
+    return { ...a, x1: a.x1 + dx, y1: a.y1 + dy, x2: a.x2 + dx, y2: a.y2 + dy };
+  }
+  if (a.type === "text") {
+    return { ...a, x: a.x + dx, y: a.y + dy };
+  }
+  return { ...a, x: a.x + dx, y: a.y + dy };
+}
+function resize(original, corner, p) {
+  if (original.type === "arrow") {
+    if (corner === "start") return { ...original, x1: p.x, y1: p.y };
+    if (corner === "end") return { ...original, x2: p.x, y2: p.y };
+    return original;
+  }
+  if (original.type === "text") return original;
+  const left = original.x;
+  const right = original.x + original.w;
+  const top = original.y;
+  const bottom = original.y + original.h;
+  let x1 = left, y1 = top, x2 = right, y2 = bottom;
+  if (corner === "nw") {
+    x1 = p.x;
+    y1 = p.y;
+  }
+  if (corner === "ne") {
+    x2 = p.x;
+    y1 = p.y;
+  }
+  if (corner === "se") {
+    x2 = p.x;
+    y2 = p.y;
+  }
+  if (corner === "sw") {
+    x1 = p.x;
+    y2 = p.y;
+  }
+  const r = normalizeRect({ x: x1, y: y1 }, { x: x2, y: y2 });
+  return { ...original, x: r.x, y: r.y, w: r.w, h: r.h };
+}
+function boundingBox(a) {
+  if (a.type === "arrow") {
+    const x = Math.min(a.x1, a.x2);
+    const y = Math.min(a.y1, a.y2);
+    return { x, y, w: Math.abs(a.x2 - a.x1), h: Math.abs(a.y2 - a.y1) };
+  }
+  if (a.type === "text") {
+    const lines = a.text.split("\n");
+    const longest = lines.reduce((m, l) => Math.max(m, l.length), 0);
+    return { x: a.x, y: a.y, w: longest * a.size * 0.55, h: lines.length * a.size * 1.2 };
+  }
+  return { x: a.x, y: a.y, w: a.w, h: a.h };
+}
 function normalizeRect(a, b) {
   const x = Math.min(a.x, b.x);
   const y = Math.min(a.y, b.y);
@@ -381,44 +765,9 @@ function normalizeRect(a, b) {
   const h = Math.abs(a.y - b.y);
   return { x, y, w, h };
 }
-function drawRoundedRect(ctx, start, end, stroke) {
-  const r = normalizeRect(start, end);
-  const radius = Math.min(r.w, r.h, 16) * 0.4;
-  ctx.beginPath();
-  if (ctx.roundRect) {
-    ctx.roundRect(r.x, r.y, r.w, r.h, radius);
-  } else {
-    ctx.moveTo(r.x + radius, r.y);
-    ctx.arcTo(r.x + r.w, r.y, r.x + r.w, r.y + r.h, radius);
-    ctx.arcTo(r.x + r.w, r.y + r.h, r.x, r.y + r.h, radius);
-    ctx.arcTo(r.x, r.y + r.h, r.x, r.y, radius);
-    ctx.arcTo(r.x, r.y, r.x + r.w, r.y, radius);
-    ctx.closePath();
-  }
-  ctx.lineWidth = stroke;
-  ctx.stroke();
-}
-function drawEllipse(ctx, start, end) {
-  const r = normalizeRect(start, end);
-  ctx.beginPath();
-  ctx.ellipse(r.x + r.w / 2, r.y + r.h / 2, r.w / 2, r.h / 2, 0, 0, Math.PI * 2);
-  ctx.stroke();
-}
-function drawArrow(ctx, start, end, stroke) {
-  ctx.beginPath();
-  ctx.moveTo(start.x, start.y);
-  ctx.lineTo(end.x, end.y);
-  ctx.stroke();
-  const headLen = Math.max(12, stroke * 4);
-  const angle = Math.atan2(end.y - start.y, end.x - start.x);
-  const a1 = angle + Math.PI - Math.PI / 7;
-  const a2 = angle + Math.PI + Math.PI / 7;
-  ctx.beginPath();
-  ctx.moveTo(end.x, end.y);
-  ctx.lineTo(end.x + headLen * Math.cos(a1), end.y + headLen * Math.sin(a1));
-  ctx.lineTo(end.x + headLen * Math.cos(a2), end.y + headLen * Math.sin(a2));
-  ctx.closePath();
-  ctx.fill();
+function withinBounds(a, w, h) {
+  const bb = boundingBox(a);
+  return bb.x + bb.w > 0 && bb.y + bb.h > 0 && bb.x < w && bb.y < h;
 }
 function applyMosaic(ctx, rect) {
   const x = Math.round(Math.max(0, rect.x));
@@ -1886,5 +2235,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-4DW5YQ7Y.js.map
-//# sourceMappingURL=chunk-4DW5YQ7Y.js.map
+//# sourceMappingURL=chunk-LJ6DLGTY.js.map
+//# sourceMappingURL=chunk-LJ6DLGTY.js.map