react-os-shell 0.2.23 → 0.2.24

package/dist/{Files-XUUCSCHL.js → Files-ZPMM53WI.js}

@@ -1,7 +1,7 @@
-export { Files as default, openFilesInTrashMode } from './chunk-4ZGTBQWZ.js';
-import './chunk-HQJRNCTU.js';
+export { Files as default, openFilesInTrashMode } from './chunk-NC7UQF6K.js';
+import './chunk-LJ6DLGTY.js';
 import './chunk-WIJ45SYD.js';
 import './chunk-QXY6ZHRX.js';
 import './chunk-PLGHQ7QW.js';
-//# sourceMappingURL=Files-XUUCSCHL.js.map
-//# sourceMappingURL=Files-XUUCSCHL.js.map
+//# sourceMappingURL=Files-ZPMM53WI.js.map
+//# sourceMappingURL=Files-ZPMM53WI.js.map

package/dist/{Files-XUUCSCHL.js.map → Files-ZPMM53WI.js.map}

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

package/dist/Preview-QI4WKYS2.js

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

package/dist/{Preview-4M4HF2RC.js.map → Preview-QI4WKYS2.js.map}

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

package/dist/apps/index.js

@@ -1,5 +1,5 @@
-export { openFilesInTrashMode } from '../chunk-4ZGTBQWZ.js';
-export { setPdfPreview } from '../chunk-HQJRNCTU.js';
+export { openFilesInTrashMode } from '../chunk-NC7UQF6K.js';
+export { setPdfPreview } from '../chunk-LJ6DLGTY.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-4M4HF2RC.js'));
+var Preview = lazy(() => import('../Preview-QI4WKYS2.js'));
 var Documents = lazy(() => import('../Documents-QMP6QN3C.js'));
-var Files = lazy(() => import('../Files-XUUCSCHL.js'));
+var Files = lazy(() => import('../Files-ZPMM53WI.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-HQJRNCTU.js → chunk-LJ6DLGTY.js}

@@ -29,6 +29,7 @@ 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 };
@@ -85,7 +86,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 +98,61 @@ 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));
+      } 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);
-    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 +166,11 @@ 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));
-    }
-  };
-  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") ;
+    beginDrag({ kind: "draw", start });
   };
   const handleAnnoDoubleClick = (anno) => {
     if (anno.type !== "text") return;
@@ -236,10 +252,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,14 +267,18 @@ 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);
+    return out;
+  };
+  const downloadAnnotated = async () => {
+    const out = await compositeToCanvas();
+    if (!out) return;
     out.toBlob((blob) => {
       if (!blob) {
         toast_default.error("Failed to export");
@@ -273,6 +293,26 @@ 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" }) }) },
@@ -342,6 +382,7 @@ function ImageAnnotator({ src, filename, onClose }) {
       /* @__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: [
@@ -379,20 +420,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,36 +439,14 @@ 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,
+              scale,
+              onChange: (value) => setPendingText({ ...pendingText, value }),
+              onCommit: commitText,
+              onCancel: () => setPendingText(null)
             }
           )
         ]
@@ -440,9 +455,9 @@ function ImageAnnotator({ src, filename, onClose }) {
     /* @__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, onPointerDown, onDoubleClick }) {
+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") {
@@ -514,23 +529,112 @@ 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 }
+  });
+  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);
@@ -610,6 +714,37 @@ function translate(a, dx, 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);
@@ -2100,5 +2235,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { Preview, setPdfPreview };
-//# sourceMappingURL=chunk-HQJRNCTU.js.map
-//# sourceMappingURL=chunk-HQJRNCTU.js.map
+//# sourceMappingURL=chunk-LJ6DLGTY.js.map
+//# sourceMappingURL=chunk-LJ6DLGTY.js.map