react-os-shell 0.2.20 → 0.2.22

package/dist/{Files-GMIYQPAA.js → Files-XKNHOT5T.js}

@@ -1,7 +1,7 @@
-export { Files as default, openFilesInTrashMode } from './chunk-7ZUE7PEH.js';
-import './chunk-4J466VCS.js';
+export { Files as default, openFilesInTrashMode } from './chunk-XYCLLD46.js';
+import './chunk-4DW5YQ7Y.js';
 import './chunk-WIJ45SYD.js';
 import './chunk-QXY6ZHRX.js';
 import './chunk-PLGHQ7QW.js';
-//# sourceMappingURL=Files-GMIYQPAA.js.map
-//# sourceMappingURL=Files-GMIYQPAA.js.map
+//# sourceMappingURL=Files-XKNHOT5T.js.map
+//# sourceMappingURL=Files-XKNHOT5T.js.map

package/dist/{Files-GMIYQPAA.js.map → Files-XKNHOT5T.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Files-GMIYQPAA.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Files-XKNHOT5T.js"}

package/dist/Preview-MIILWJVE.js

@@ -0,0 +1,6 @@
+export { Preview as default, setPdfPreview } from './chunk-4DW5YQ7Y.js';
+import './chunk-WIJ45SYD.js';
+import './chunk-QXY6ZHRX.js';
+import './chunk-PLGHQ7QW.js';
+//# sourceMappingURL=Preview-MIILWJVE.js.map
+//# sourceMappingURL=Preview-MIILWJVE.js.map

package/dist/{Preview-Z447TOCE.js.map → Preview-MIILWJVE.js.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"Preview-Z447TOCE.js"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"Preview-MIILWJVE.js"}

package/dist/apps/index.js

@@ -1,5 +1,5 @@
-export { openFilesInTrashMode } from '../chunk-7ZUE7PEH.js';
-export { setPdfPreview } from '../chunk-4J466VCS.js';
+export { openFilesInTrashMode } from '../chunk-XYCLLD46.js';
+export { setPdfPreview } from '../chunk-4DW5YQ7Y.js';
 import '../chunk-WIJ45SYD.js';
 import '../chunk-QXY6ZHRX.js';
 import '../chunk-PLGHQ7QW.js';
@@ -20,9 +20,9 @@ var Minesweeper = lazy(() => import('../Minesweeper-YPAR6SPJ.js'));
 var Email = lazy(() => import('../Email-XTFUEIE5.js'));
 var GeminiChat = lazy(() => import('../GeminiChat-ITU46EH4.js'));
 var Calendar = lazy(() => import('../Calendar-24TAKCAJ.js'));
-var Preview = lazy(() => import('../Preview-Z447TOCE.js'));
+var Preview = lazy(() => import('../Preview-MIILWJVE.js'));
 var Documents = lazy(() => import('../Documents-QMP6QN3C.js'));
-var Files = lazy(() => import('../Files-GMIYQPAA.js'));
+var Files = lazy(() => import('../Files-XKNHOT5T.js'));
 var Browser = lazy(() => import('../Browser-RJZLTAJQ.js'));
 var utilityApps = {
   "/calculator": { component: Calculator, label: "Calculator", size: "sm", allowPinOnTop: true, utility: true, widget: true, autoHeight: true, dimensions: [280, 420] },

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

@@ -1,10 +1,465 @@
 import { toast_default } from './chunk-WIJ45SYD.js';
 import { WindowTitle, getActiveModalId } from './chunk-QXY6ZHRX.js';
-import { createContext, useState, useEffect, useRef, useContext } from 'react';
+import { createContext, useState, useEffect, useRef, useContext, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import * as pdfjsLib from 'pdfjs-dist';
 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;
+function ImageAnnotator({ src, filename, onClose }) {
+  const canvasRef = useRef(null);
+  const overlayRef = useRef(null);
+  const wrapRef = useRef(null);
+  const [tool, setTool] = useState("rect");
+  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 [pendingText, setPendingText] = useState(null);
+  const [pendingCrop, setPendingCrop] = useState(null);
+  const [displaySize, setDisplaySize] = useState(null);
+  const [displayScale, setDisplayScale] = useState(1);
+  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);
+    };
+    img.onerror = () => toast_default.error("Failed to load image");
+    img.src = src;
+  }, [src]);
+  useEffect(() => {
+    if (!imageReady) 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 (availW === 0 || availH === 0) return;
+      const ratio = c.width / c.height;
+      let w = c.width;
+      let h = c.height;
+      if (w > availW) {
+        w = availW;
+        h = w / ratio;
+      }
+      if (h > availH) {
+        h = availH;
+        w = h * ratio;
+      }
+      setDisplaySize({ w, h });
+      setDisplayScale(c.width / w);
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    if (wrapRef.current) ro.observe(wrapRef.current);
+    return () => ro.disconnect();
+  }, [imageReady]);
+  const pushHistory = () => {
+    const c = canvasRef.current;
+    if (!c) return;
+    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);
+  };
+  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 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 };
+  };
+  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 onPointerDown = (e) => {
+    if (!imageReady) return;
+    const pos = evToCanvas(e);
+    if (tool === "text") {
+      setPendingText({ x: pos.x, y: pos.y, value: "" });
+      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();
+      return;
+    }
+    if (tool === "crop") {
+      const r = normalizeRect(start, current);
+      setPendingCrop(r);
+      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();
+  };
+  const commitText = () => {
+    if (!pendingText) return;
+    if (!pendingText.value.trim()) {
+      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);
+    });
+    setPendingText(null);
+  };
+  const applyCrop = () => {
+    if (!pendingCrop) return;
+    const c = canvasRef.current;
+    pushHistory();
+    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 cancelCrop = () => {
+    setPendingCrop(null);
+    clearOverlay();
+  };
+  const downloadAnnotated = () => {
+    const c = canvasRef.current;
+    if (!c) return;
+    c.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");
+  };
+  const tools = useMemo(() => [
+    { 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" }) }) },
+    { id: "mosaic", label: "Mosaic", 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: "M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" }) }) },
+    { id: "text", label: "Text", 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: "M4 6h16M12 6v14M9 20h6" }) }) },
+    { 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"}`;
+  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),
+          title: t.label,
+          className: btnClass(tool === t.id),
+          children: t.icon
+        },
+        t.id
+      )),
+      /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: COLORS.map((c) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setColor(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 })
+      ] }),
+      /* @__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: 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("div", { ref: wrapRef, className: "flex-1 overflow-hidden bg-gray-200 flex items-center justify-center p-4 relative", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative shadow-lg rounded overflow-hidden",
+        style: displaySize ? { width: displaySize.w, height: displaySize.h } : void 0,
+        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" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: overlayRef,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none",
+                display: "block"
+              }
+            }
+          ),
+          pendingText && /* @__PURE__ */ jsx(
+            "div",
+            {
+              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 }
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function normalizeRect(a, b) {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  const w = Math.abs(a.x - b.x);
+  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 applyMosaic(ctx, rect) {
+  const x = Math.round(Math.max(0, rect.x));
+  const y = Math.round(Math.max(0, rect.y));
+  const w = Math.round(Math.min(ctx.canvas.width - x, rect.w));
+  const h = Math.round(Math.min(ctx.canvas.height - y, rect.h));
+  if (w < 2 || h < 2) return;
+  const data = ctx.getImageData(x, y, w, h);
+  const block = MOSAIC_BLOCK;
+  for (let by = 0; by < h; by += block) {
+    for (let bx = 0; bx < w; bx += block) {
+      let r = 0, g = 0, b = 0, a = 0, n = 0;
+      const blockW = Math.min(block, w - bx);
+      const blockH = Math.min(block, h - by);
+      for (let yy = 0; yy < blockH; yy++) {
+        for (let xx = 0; xx < blockW; xx++) {
+          const i = ((by + yy) * w + (bx + xx)) * 4;
+          r += data.data[i];
+          g += data.data[i + 1];
+          b += data.data[i + 2];
+          a += data.data[i + 3];
+          n++;
+        }
+      }
+      r = Math.round(r / n);
+      g = Math.round(g / n);
+      b = Math.round(b / n);
+      a = Math.round(a / n);
+      for (let yy = 0; yy < blockH; yy++) {
+        for (let xx = 0; xx < blockW; xx++) {
+          const i = ((by + yy) * w + (bx + xx)) * 4;
+          data.data[i] = r;
+          data.data[i + 1] = g;
+          data.data[i + 2] = b;
+          data.data[i + 3] = a;
+        }
+      }
+    }
+  }
+  ctx.putImageData(data, x, y);
+}
 var ToolbarSlotContext = createContext(null);
 function PanelActions({ children }) {
   const slot = useContext(ToolbarSlotContext);
@@ -1383,6 +1838,7 @@ function StepPanel({ url, filename, onDownload, onEmail }) {
 function ImagePanel({ url, filename, onDownload, onEmail }) {
   const [zoom, setZoom] = useState(1);
   const [error, setError] = useState(false);
+  const [annotating, setAnnotating] = useState(false);
   const handleDefaultDownload = () => {
     const a = document.createElement("a");
     a.href = url;
@@ -1390,6 +1846,9 @@ 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" }),
@@ -1400,6 +1859,10 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
       /* @__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__ */ 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" }) }),
         "Download"
@@ -1423,5 +1886,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-4J466VCS.js.map
-//# sourceMappingURL=chunk-4J466VCS.js.map
+//# sourceMappingURL=chunk-4DW5YQ7Y.js.map
+//# sourceMappingURL=chunk-4DW5YQ7Y.js.map