react-os-shell 0.2.23 → 0.2.25

package/dist/{chunk-HQJRNCTU.js → chunk-6IV6OWF3.js}

@@ -1,18 +1,26 @@
 import { toast_default } from './chunk-WIJ45SYD.js';
 import { WindowTitle, getActiveModalId } from './chunk-QXY6ZHRX.js';
-import { createContext, useState, useEffect, useRef, useContext, useMemo } from 'react';
+import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import * as pdfjsLib from 'pdfjs-dist';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var COLORS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#000000", "#ffffff"];
+var FONTS = [
+  { id: "system", label: "System", css: "-apple-system, system-ui, sans-serif" },
+  { id: "serif", label: "Serif", css: 'Georgia, "Times New Roman", serif' },
+  { id: "mono", label: "Mono", css: 'ui-monospace, "SF Mono", Menlo, monospace' },
+  { id: "cursive", label: "Cursive", css: '"Brush Script MT", "Comic Sans MS", cursive' }
+];
 var STROKE_DEFAULT = 4;
+var TEXT_SIZE_DEFAULT = 24;
+var RECT_RADIUS_DEFAULT = 12;
 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 }) {
+var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename }, ref) {
   const wrapRef = useRef(null);
   const canvasRef = useRef(null);
   const svgRef = useRef(null);
@@ -20,6 +28,12 @@ function ImageAnnotator({ src, filename, onClose }) {
   const [tool, setTool] = useState("select");
   const [color, setColor] = useState(COLORS[0]);
   const [stroke, setStroke] = useState(STROKE_DEFAULT);
+  const [textSize, setTextSize] = useState(TEXT_SIZE_DEFAULT);
+  const [textFont, setTextFont] = useState(FONTS[0].id);
+  const [textBold, setTextBold] = useState(true);
+  const [textItalic, setTextItalic] = useState(false);
+  const [textUnderline, setTextUnderline] = useState(false);
+  const [rectRadius, setRectRadius] = useState(RECT_RADIUS_DEFAULT);
   const [annotations, setAnnotations] = useState([]);
   const [selectedId, setSelectedId] = useState(null);
   const [imageSize, setImageSize] = useState(null);
@@ -29,10 +43,30 @@ function ImageAnnotator({ src, filename, onClose }) {
   const [pendingText, setPendingText] = useState(null);
   const [pendingCrop, setPendingCrop] = useState(null);
   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]);
+  const scale = displaySize && imageSize ? displaySize.w / imageSize.w : 1;
+  const selected = useMemo(
+    () => annotations.find((a) => a.id === selectedId) ?? null,
+    [annotations, selectedId]
+  );
+  useEffect(() => {
+    if (tool === "select" && selected) {
+      if ("color" in selected) setColor(selected.color);
+      if ("stroke" in selected) setStroke(selected.stroke);
+      if (selected.type === "rect") setRectRadius(selected.radius);
+      if (selected.type === "text") {
+        setTextSize(selected.size);
+        setTextFont(selected.font);
+        setTextBold(selected.bold);
+        setTextItalic(selected.italic);
+        setTextUnderline(selected.underline);
+      }
+    }
+  }, [selectedId]);
   useEffect(() => {
     const img = new Image();
     img.crossOrigin = "anonymous";
@@ -55,8 +89,7 @@ function ImageAnnotator({ src, filename, onClose }) {
       const availH = Math.max(0, r.height - 32);
       if (availW === 0 || availH === 0) return;
       const ratio = imageSize.w / imageSize.h;
-      let w = imageSize.w;
-      let h = imageSize.h;
+      let w = imageSize.w, h = imageSize.h;
       if (w > availW) {
         w = availW;
         h = w / ratio;
@@ -85,7 +118,7 @@ function ImageAnnotator({ src, filename, onClose }) {
     const ctx = c.getContext("2d");
     ctx.drawImage(img, 0, 0);
     for (const m of mosaicAnnos) applyMosaic(ctx, m);
-  }, [imageSize, mosaicAnnos]);
+  }, [imageSize, mosaicAnnos, fitSize]);
   const evToImage = (e) => {
     const svg = svgRef.current;
     if (!svg) return { x: 0, y: 0 };
@@ -97,13 +130,77 @@ function ImageAnnotator({ src, filename, onClose }) {
     const t = pt.matrixTransform(ctm.inverse());
     return { x: t.x, y: t.y };
   };
+  const beginDrag = (drag) => {
+    dragRef.current = drag;
+    setIsDragging(true);
+  };
+  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, rectRadius));
+      } else if (drag.kind === "pen") {
+        const last = drag.points[drag.points.length - 1];
+        if (Math.abs(p.x - last.x) > 1 || Math.abs(p.y - last.y) > 1) {
+          drag.points.push(p);
+          setPreview({ id: "", type: "draw", points: drag.points.slice(), 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;
+        });
+      } else if (drag?.kind === "pen") {
+        if (drag.points.length < 2) {
+          setPreview(null);
+          return;
+        }
+        const anno = { id: newId(), type: "draw", points: drag.points, color, stroke };
+        setAnnotations((prev) => [...prev, anno]);
+        setSelectedId(anno.id);
+        setTool("select");
+        setPreview(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, rectRadius]);
   const handleAnnoPointerDown = (e, anno) => {
     if (tool !== "select") return;
     e.stopPropagation();
     setSelectedId(anno.id);
-    const start = evToImage(e);
-    dragRef.current = { kind: "move", id: anno.id, start, original: anno };
-    e.currentTarget.setPointerCapture?.(e.pointerId);
+    beginDrag({ kind: "move", id: anno.id, start: evToImage(e), original: anno });
+  };
+  const handleHandlePointerDown = (e, anno, corner) => {
+    e.stopPropagation();
+    beginDrag({ kind: "resize", id: anno.id, corner, start: evToImage(e), original: anno });
   };
   const handleSvgPointerDown = (e) => {
     if (tool === "select") {
@@ -117,44 +214,16 @@ function ImageAnnotator({ src, filename, onClose }) {
     }
     const start = evToImage(e);
     if (tool === "crop") {
-      dragRef.current = { kind: "crop", start };
-      e.currentTarget.setPointerCapture(e.pointerId);
+      beginDrag({ kind: "crop", start });
       return;
     }
-    dragRef.current = { kind: "draw", start };
-    e.currentTarget.setPointerCapture(e.pointerId);
-    setPreview(makeShape(tool, start, start, color, stroke));
-  };
-  const handleSvgPointerMove = (e) => {
-    const drag = dragRef.current;
-    if (!drag) return;
-    const p = evToImage(e);
-    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));
+    if (tool === "draw") {
+      beginDrag({ kind: "pen", points: [start] });
+      setPreview({ id: "", type: "draw", points: [start], color, stroke });
+      return;
     }
-  };
-  const handleSvgPointerUp = (e) => {
-    const drag = dragRef.current;
-    if (!drag) return;
-    dragRef.current = null;
-    e.currentTarget.releasePointerCapture?.(e.pointerId);
-    if (drag.kind === "draw") {
-      const p = preview;
-      if (!p) return;
-      const tooSmall = isTrivial(p);
-      setPreview(null);
-      if (tooSmall) return;
-      const anno = { ...p, id: newId() };
-      setAnnotations((prev) => [...prev, anno]);
-      setSelectedId(anno.id);
-      setTool("select");
-    } else if (drag.kind === "crop") ; else if (drag.kind === "move") ;
+    setPreview(makeShape(tool, start, start, color, stroke, rectRadius));
+    beginDrag({ kind: "draw", start });
   };
   const handleAnnoDoubleClick = (anno) => {
     if (anno.type !== "text") return;
@@ -162,8 +231,14 @@ function ImageAnnotator({ src, filename, onClose }) {
   };
   useEffect(() => {
     const onKey = (ev) => {
-      if (!selectedId) return;
       if (document.activeElement && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) return;
+      if ((ev.metaKey || ev.ctrlKey) && (ev.key === "z" || ev.key === "Z") && !ev.shiftKey) {
+        ev.preventDefault();
+        setAnnotations((prev) => prev.slice(0, -1));
+        setSelectedId(null);
+        return;
+      }
+      if (!selectedId) return;
       if (ev.key === "Delete" || ev.key === "Backspace") {
         ev.preventDefault();
         setAnnotations((prev) => prev.filter((a) => a.id !== selectedId));
@@ -175,17 +250,67 @@ function ImageAnnotator({ src, filename, onClose }) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [selectedId]);
+  const setColorAndApply = (c) => {
+    setColor(c);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map((a) => {
+      if (a.id !== selectedId) return a;
+      if (a.type === "mosaic") return a;
+      return { ...a, color: c };
+    }));
+  };
+  const setStrokeAndApply = (s) => {
+    setStroke(s);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map((a) => {
+      if (a.id !== selectedId) return a;
+      if (a.type === "rect" || a.type === "circle" || a.type === "arrow" || a.type === "draw") {
+        return { ...a, stroke: s };
+      }
+      return a;
+    }));
+  };
+  const setRectRadiusAndApply = (r) => {
+    setRectRadius(r);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "rect" ? { ...a, radius: r } : a
+    ));
+  };
+  const setTextSizeAndApply = (s) => {
+    setTextSize(s);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "text" ? { ...a, size: s } : a
+    ));
+  };
+  const setTextFontAndApply = (f) => {
+    setTextFont(f);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "text" ? { ...a, font: f } : a
+    ));
+  };
+  const toggleTextStyleAndApply = (which) => {
+    const next = !{ bold: textBold, italic: textItalic, underline: textUnderline }[which];
+    if (which === "bold") setTextBold(next);
+    if (which === "italic") setTextItalic(next);
+    if (which === "underline") setTextUnderline(next);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "text" ? { ...a, [which]: next } : a
+    ));
+  };
   const commitText = () => {
     if (!pendingText) return;
-    const value = pendingText.value.trim();
-    if (!value) {
+    const value = pendingText.value;
+    if (!value.trim()) {
       if (pendingText.editingId) {
         setAnnotations((prev) => prev.filter((a) => a.id !== pendingText.editingId));
       }
       setPendingText(null);
       return;
     }
-    const fontSize = Math.max(16, stroke * 6);
     if (pendingText.editingId) {
       setAnnotations((prev) => prev.map(
         (a) => a.id === pendingText.editingId && a.type === "text" ? { ...a, text: value } : a
@@ -198,7 +323,11 @@ function ImageAnnotator({ src, filename, onClose }) {
         y: pendingText.y,
         text: value,
         color,
-        size: fontSize
+        size: textSize,
+        font: textFont,
+        bold: textBold,
+        italic: textItalic,
+        underline: textUnderline
       };
       setAnnotations((prev) => [...prev, anno]);
       setSelectedId(anno.id);
@@ -236,10 +365,10 @@ function ImageAnnotator({ src, filename, onClose }) {
     setAnnotations((prev) => prev.slice(0, -1));
     setSelectedId(null);
   };
-  const downloadAnnotated = async () => {
+  const compositeToCanvas = async () => {
     const c = canvasRef.current;
     const svg = svgRef.current;
-    if (!c || !svg || !imageSize) return;
+    if (!c || !svg || !imageSize) return null;
     const out = document.createElement("canvas");
     out.width = imageSize.w;
     out.height = imageSize.h;
@@ -251,30 +380,57 @@ function ImageAnnotator({ src, filename, onClose }) {
     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, reject) => {
+    await new Promise((resolve) => {
       svgImg.onload = () => resolve();
-      svgImg.onerror = reject;
+      svgImg.onerror = () => resolve();
       svgImg.src = svgUrl;
-    }).catch(() => {
     });
     octx.drawImage(svgImg, 0, 0, imageSize.w, imageSize.h);
     URL.revokeObjectURL(svgUrl);
-    out.toBlob((blob) => {
-      if (!blob) {
-        toast_default.error("Failed to export");
+    return out;
+  };
+  useImperativeHandle(ref, () => ({
+    save: async () => {
+      const out = await compositeToCanvas();
+      if (!out) return;
+      out.toBlob((blob) => {
+        if (!blob) {
+          toast_default.error("Failed to export");
+          return;
+        }
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        const base = filename.replace(/\.[^.]+$/, "");
+        a.download = `${base}-annotated.png`;
+        a.click();
+        URL.revokeObjectURL(url);
+      }, "image/png");
+    },
+    copy: async () => {
+      if (!("clipboard" in navigator) || typeof ClipboardItem === "undefined") {
+        toast_default.error("Clipboard images not supported in this browser");
         return;
       }
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      const base = filename.replace(/\.[^.]+$/, "");
-      a.download = `${base}-annotated.png`;
-      a.click();
-      URL.revokeObjectURL(url);
-    }, "image/png");
-  };
+      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");
+    }
+  }), [imageSize, filename]);
   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: "draw", label: "Pen / Draw", 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: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487z" }) }) },
     { 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" }) }) },
@@ -283,9 +439,12 @@ 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;
+  const ctxType = selected?.type ?? (tool === "select" ? null : tool);
+  const showStrokeControl = ctxType === "rect" || ctxType === "circle" || ctxType === "arrow" || ctxType === "draw";
+  const showRectRadius = ctxType === "rect";
+  const showTextControls = ctxType === "text";
   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: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 border-b border-gray-200 bg-white shrink-0 flex-wrap text-[12px]", children: [
       tools.map((t) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -303,53 +462,55 @@ function ImageAnnotator({ src, filename, onClose }) {
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: COLORS.map((c) => /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => {
-            setColor(c);
-            if (selectedId) {
-              setAnnotations((prev) => prev.map((a) => a.id === selectedId && a.type !== "mosaic" ? { ...a, color: c } : a));
-            }
-          },
+          onClick: () => setColorAndApply(c),
           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 }
         },
         c
       )) }),
-      /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-[11px] text-gray-600", children: [
-        /* @__PURE__ */ jsx("span", { children: "Size" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            min: 2,
-            max: 12,
-            step: 1,
-            value: stroke,
-            onChange: (e) => setStroke(Number(e.target.value)),
-            className: "w-16 accent-blue-500"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "tabular-nums w-4 text-right", children: stroke })
+      showStrokeControl && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { children: "Weight" }),
+          /* @__PURE__ */ jsx("input", { type: "range", min: 1, max: 20, step: 1, value: stroke, onChange: (e) => setStrokeAndApply(Number(e.target.value)), className: "w-16 accent-blue-500" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums w-5 text-right", children: stroke })
+        ] })
+      ] }),
+      showRectRadius && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { children: "Radius" }),
+          /* @__PURE__ */ jsx("input", { type: "range", min: 0, max: 48, step: 1, value: rectRadius, onChange: (e) => setRectRadiusAndApply(Number(e.target.value)), className: "w-16 accent-blue-500" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums w-6 text-right", children: rectRadius })
+        ] })
+      ] }),
+      showTextControls && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
+        /* @__PURE__ */ jsx("select", { value: textFont, onChange: (e) => setTextFontAndApply(e.target.value), className: "text-xs border border-gray-300 rounded px-1 py-0.5 bg-white", children: FONTS.map((f) => /* @__PURE__ */ jsx("option", { value: f.id, children: f.label }, f.id)) }),
+        /* @__PURE__ */ jsx("button", { onClick: () => toggleTextStyleAndApply("bold"), className: btnClass(textBold), title: "Bold", children: /* @__PURE__ */ jsx("span", { className: "font-bold", children: "B" }) }),
+        /* @__PURE__ */ jsx("button", { onClick: () => toggleTextStyleAndApply("italic"), className: btnClass(textItalic), title: "Italic", children: /* @__PURE__ */ jsx("span", { className: "italic", children: "I" }) }),
+        /* @__PURE__ */ jsx("button", { onClick: () => toggleTextStyleAndApply("underline"), className: btnClass(textUnderline), title: "Underline", children: /* @__PURE__ */ jsx("span", { className: "underline", children: "U" }) }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { children: "Size" }),
+          /* @__PURE__ */ jsx("input", { type: "range", min: 10, max: 96, step: 1, value: textSize, onChange: (e) => setTextSizeAndApply(Number(e.target.value)), className: "w-16 accent-blue-500" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums w-7 text-right", children: textSize })
+        ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
-      /* @__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: [
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(ZOOM_MIN, Math.round((z - ZOOM_STEP) * 100) / 100)), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", title: "Zoom out", children: "\u2212" }),
+      /* @__PURE__ */ jsxs("span", { className: "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("button", { onClick: () => setZoom((z) => Math.min(ZOOM_MAX, Math.round((z + ZOOM_STEP) * 100) / 100)), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", title: "Zoom in", children: "+" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => setZoom(1), className: "px-2 py-1 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: 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: [
-          /* @__PURE__ */ jsx("button", { onClick: applyCrop, className: "px-2 py-1 text-xs rounded bg-blue-500 text-white hover:bg-blue-600", children: "Apply Crop" }),
-          /* @__PURE__ */ jsx("button", { onClick: cancelCrop, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", children: "Cancel" })
-        ] }),
-        /* @__PURE__ */ jsx("button", { onClick: onClose, className: "px-2 py-1 text-xs rounded hover:bg-gray-200 text-gray-700", children: "Exit" })
-      ] })
+      /* @__PURE__ */ jsx("button", { onClick: undoLast, disabled: annotations.length === 0, className: "px-2 py-1 rounded hover:bg-gray-200 disabled:opacity-30 text-gray-700", children: "Undo" }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: pendingCrop && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { onClick: applyCrop, className: "px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600", children: "Apply Crop" }),
+        /* @__PURE__ */ jsx("button", { onClick: cancelCrop, className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", children: "Cancel" })
+      ] }) })
     ] }),
     /* @__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",
@@ -357,13 +518,7 @@ function ImageAnnotator({ src, filename, onClose }) {
         className: "relative shadow-lg rounded overflow-hidden bg-white shrink-0",
         style: { width: displaySize.w, height: displaySize.h },
         children: [
-          /* @__PURE__ */ jsx(
-            "canvas",
-            {
-              ref: canvasRef,
-              style: { position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }
-            }
-          ),
+          /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" } }),
           /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -379,20 +534,16 @@ function ImageAnnotator({ src, filename, onClose }) {
                 cursor: tool === "select" ? "default" : tool === "text" ? "text" : "crosshair"
               },
               onPointerDown: handleSvgPointerDown,
-              onPointerMove: handleSvgPointerMove,
-              onPointerUp: handleSvgPointerUp,
-              onPointerCancel: () => {
-                dragRef.current = null;
-                setPreview(null);
-              },
               children: [
                 annotations.map((a) => /* @__PURE__ */ jsx(
                   AnnotationView,
                   {
                     anno: a,
                     selected: selectedId === a.id,
+                    zoom,
                     onPointerDown: (e) => handleAnnoPointerDown(e, a),
-                    onDoubleClick: () => handleAnnoDoubleClick(a)
+                    onDoubleClick: () => handleAnnoDoubleClick(a),
+                    onHandlePointerDown: (e, corner) => handleHandlePointerDown(e, a, corner)
                   },
                   a.id
                 )),
@@ -402,51 +553,34 @@ function ImageAnnotator({ src, filename, onClose }) {
             }
           ),
           pendingText && /* @__PURE__ */ jsx(
-            "div",
+            PendingTextEditor,
             {
-              style: {
-                position: "absolute",
-                left: `${pendingText.x * scale}px`,
-                top: `${pendingText.y * scale}px`,
-                transform: "translateY(-2px)",
-                zIndex: 5
-              },
-              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,
+              size: textSize,
+              font: FONTS.find((f) => f.id === textFont)?.css ?? FONTS[0].css,
+              bold: textBold,
+              italic: textItalic,
+              underline: textUnderline,
+              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." })
+    /* @__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. Drag a corner to resize. Delete / Backspace removes. Click outside to deselect." : "Tap a shape to select. Double-click text to edit." : tool === "text" ? "Click to drop a text label." : tool === "crop" ? "Drag a rectangle to set the crop region." : tool === "draw" ? "Drag to draw freehand." : "Drag on the image to draw." })
   ] });
-}
-function AnnotationView({ anno, selected, preview, onPointerDown, onDoubleClick }) {
+});
+var ImageAnnotator_default = ImageAnnotator;
+function AnnotationView({ anno, selected, preview, zoom = 1, onPointerDown, onDoubleClick, onHandlePointerDown }) {
   const dim = boundingBox(anno);
-  const interactive = onPointerDown ? { onPointerDown, style: { cursor: "move" } } : {};
+  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",
       {
@@ -454,8 +588,8 @@ function AnnotationView({ anno, selected, preview, onPointerDown, onDoubleClick
         y: anno.y,
         width: anno.w,
         height: anno.h,
-        rx: radius,
-        ry: radius,
+        rx: anno.radius,
+        ry: anno.radius,
         fill: "none",
         stroke: anno.color,
         strokeWidth: anno.stroke,
@@ -480,6 +614,19 @@ function AnnotationView({ anno, selected, preview, onPointerDown, onDoubleClick
     );
   } else if (anno.type === "arrow") {
     body = /* @__PURE__ */ jsx(ArrowShape, { anno, interactive });
+  } else if (anno.type === "draw") {
+    body = /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: pointsToPath(anno.points),
+        fill: "none",
+        stroke: anno.color,
+        strokeWidth: anno.stroke,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...interactive
+      }
+    );
   } else if (anno.type === "mosaic") {
     body = /* @__PURE__ */ jsx(
       "rect",
@@ -496,6 +643,7 @@ function AnnotationView({ anno, selected, preview, onPointerDown, onDoubleClick
       }
     );
   } else {
+    const font = FONTS.find((f) => f.id === anno.font)?.css ?? FONTS[0].css;
     body = /* @__PURE__ */ jsx(
       "text",
       {
@@ -503,8 +651,10 @@ function AnnotationView({ anno, selected, preview, onPointerDown, onDoubleClick
         y: anno.y + anno.size,
         fill: anno.color,
         fontSize: anno.size,
-        fontWeight: 600,
-        fontFamily: "-apple-system, system-ui, sans-serif",
+        fontWeight: anno.bold ? 700 : 400,
+        fontStyle: anno.italic ? "italic" : "normal",
+        textDecoration: anno.underline ? "underline" : void 0,
+        fontFamily: font,
         style: { userSelect: "none" },
         ...interactive,
         ...dblc,
@@ -514,21 +664,56 @@ function AnnotationView({ anno, selected, preview, onPointerDown, onDoubleClick
   }
   return /* @__PURE__ */ jsxs("g", { children: [
     body,
-    selected && !preview && /* @__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,
-        strokeDasharray: "6,4",
-        pointerEvents: "none"
-      }
-    )
+    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 },
+    "data-chrome": "handle"
+  });
+  if (anno.type === "arrow") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: anno.x1, cy: anno.y1, r, ...handleProps("grab"), onPointerDown: (e) => onHandlePointerDown(e, "start") }),
+      /* @__PURE__ */ jsx("circle", { cx: anno.x2, cy: anno.y2, r, ...handleProps("grab"), onPointerDown: (e) => onHandlePointerDown(e, "end") })
+    ] });
+  }
+  if (anno.type === "text" || anno.type === "draw") {
+    return null;
+  }
+  const x = anno.x, y = anno.y, w = anno.w, h = anno.h;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r, ...handleProps("nwse-resize"), onPointerDown: (e) => onHandlePointerDown(e, "nw") }),
+    /* @__PURE__ */ jsx("circle", { cx: x + w, cy: y, r, ...handleProps("nesw-resize"), onPointerDown: (e) => onHandlePointerDown(e, "ne") }),
+    /* @__PURE__ */ jsx("circle", { cx: x + w, cy: y + h, r, ...handleProps("nwse-resize"), onPointerDown: (e) => onHandlePointerDown(e, "se") }),
+    /* @__PURE__ */ jsx("circle", { cx: x, cy: y + h, r, ...handleProps("nesw-resize"), onPointerDown: (e) => onHandlePointerDown(e, "sw") })
   ] });
 }
 function ArrowShape({ anno, interactive }) {
@@ -578,10 +763,79 @@ function CropOverlay({ rect, imageSize }) {
     )
   ] });
 }
-function makeShape(tool, start, end, color, stroke) {
-  if (tool === "rect" || tool === "circle") {
+function PendingTextEditor({
+  pendingText,
+  color,
+  size,
+  font,
+  bold,
+  italic,
+  underline,
+  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 outline-none resize-none shadow-md",
+          style: {
+            color,
+            fontSize: `${size * scale}px`,
+            fontFamily: font,
+            fontWeight: bold ? 700 : 400,
+            fontStyle: italic ? "italic" : "normal",
+            textDecoration: underline ? "underline" : void 0,
+            minWidth: 80
+          }
+        }
+      )
+    }
+  );
+}
+function makeShape(tool, start, end, color, stroke, rectRadius) {
+  if (tool === "rect") {
     const r = normalizeRect(start, end);
-    return { id: "", type: tool, x: r.x, y: r.y, w: r.w, h: r.h, color, stroke };
+    return { id: "", type: "rect", x: r.x, y: r.y, w: r.w, h: r.h, color, stroke, radius: rectRadius };
+  }
+  if (tool === "circle") {
+    const r = normalizeRect(start, end);
+    return { id: "", type: "circle", 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 };
@@ -593,22 +847,47 @@ function makeShape(tool, start, end, color, stroke) {
   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;
-  }
+  if (a.type === "arrow") return Math.abs(a.x2 - a.x1) < 4 && Math.abs(a.y2 - a.y1) < 4;
+  if (a.type === "draw") return a.points.length < 2;
+  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 === "arrow") return { ...a, x1: a.x1 + dx, y1: a.y1 + dy, x2: a.x2 + dx, y2: a.y2 + dy };
+  if (a.type === "draw") return { ...a, points: a.points.map((p) => ({ x: p.x + dx, y: p.y + 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 (a.type === "text") {
-    return { ...a, x: a.x + dx, y: a.y + dy };
+  if (original.type === "text" || original.type === "draw") 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;
   }
-  return { ...a, x: a.x + dx, y: a.y + dy };
+  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") {
@@ -616,6 +895,17 @@ function boundingBox(a) {
     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 === "draw") {
+    if (a.points.length === 0) return { x: 0, y: 0, w: 0, h: 0 };
+    let minX = a.points[0].x, maxX = a.points[0].x, minY = a.points[0].y, maxY = a.points[0].y;
+    for (const p of a.points) {
+      if (p.x < minX) minX = p.x;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.y > maxY) maxY = p.y;
+    }
+    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+  }
   if (a.type === "text") {
     const lines = a.text.split("\n");
     const longest = lines.reduce((m, l) => Math.max(m, l.length), 0);
@@ -634,6 +924,12 @@ 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 pointsToPath(points) {
+  if (points.length === 0) return "";
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length; i++) d += ` L ${points[i].x} ${points[i].y}`;
+  return d;
+}
 function applyMosaic(ctx, rect) {
   const x = Math.round(Math.max(0, rect.x));
   const y = Math.round(Math.max(0, rect.y));
@@ -2053,6 +2349,7 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
   const [zoom, setZoom] = useState(1);
   const [error, setError] = useState(false);
   const [annotating, setAnnotating] = useState(false);
+  const annotatorRef = useRef(null);
   const handleDefaultDownload = () => {
     const a = document.createElement("a");
     a.href = url;
@@ -2060,22 +2357,35 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
     a.click();
   };
   const btn = "px-2 py-1 rounded hover:bg-gray-200 transition-colors text-gray-600 flex items-center gap-1";
-  if (annotating) {
-    return /* @__PURE__ */ jsx(ImageAnnotator, { src: url, filename, onClose: () => setAnnotating(false) });
-  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxs(PanelActions, { children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, Math.round((z - 0.25) * 100) / 100)), className: btn, children: "\u2212" }),
-      /* @__PURE__ */ jsxs("span", { className: "text-gray-500 w-12 text-center tabular-nums", children: [
-        Math.round(zoom * 100),
-        "%"
+      !annotating && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, Math.round((z - 0.25) * 100) / 100)), className: btn, children: "\u2212" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-gray-500 w-12 text-center tabular-nums", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.min(8, Math.round((z + 0.25) * 100) / 100)), className: btn, children: "+" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setZoom(1), className: btn, children: "1:1" }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => setAnnotating(true), className: btn, title: "Annotate this image", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" }) }),
+          "Annotate"
+        ] })
       ] }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.min(8, Math.round((z + 0.25) * 100) / 100)), className: btn, children: "+" }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setZoom(1), className: btn, children: "1:1" }),
-      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
-      /* @__PURE__ */ jsxs("button", { onClick: () => setAnnotating(true), className: btn, title: "Annotate this image", children: [
-        /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125" }) }),
-        "Annotate"
+      annotating && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("button", { onClick: () => setAnnotating(false), className: btn, title: "Back to viewer", children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }) }),
+          "View"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => annotatorRef.current?.copy(), className: btn, children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" }) }),
+          "Copy"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { onClick: () => annotatorRef.current?.save(), className: btn, children: [
+          /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" }) }),
+          "Save"
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("button", { onClick: onDownload ?? handleDefaultDownload, className: btn, children: [
         /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" }) }),
@@ -2086,7 +2396,7 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
         "Email"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto bg-gray-100 flex items-center justify-center p-4", children: error ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: "Failed to load image." }) : /* @__PURE__ */ jsx(
+    annotating ? /* @__PURE__ */ jsx(ImageAnnotator_default, { ref: annotatorRef, src: url, filename }) : /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto bg-gray-100 flex items-center justify-center p-4", children: error ? /* @__PURE__ */ jsx("div", { className: "text-sm text-red-600", children: "Failed to load image." }) : /* @__PURE__ */ jsx(
       "img",
       {
         src: url,
@@ -2100,5 +2410,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-HQJRNCTU.js.map
-//# sourceMappingURL=chunk-HQJRNCTU.js.map
+//# sourceMappingURL=chunk-6IV6OWF3.js.map
+//# sourceMappingURL=chunk-6IV6OWF3.js.map