react-os-shell 3.8.6 → 3.9.0

package/dist/{chunk-K4673QDA.js → chunk-2E474D7Q.js}

@@ -1,5 +1,5 @@
 import { toast_default } from './chunk-VENYVK3L.js';
-import { AboutApp } from './chunk-WSSULY4B.js';
+import { AboutApp } from './chunk-RTHUQTNU.js';
 import { WindowTitle, registerModalEscapeInterceptor, getActiveModalId } from './chunk-JXW7H3DU.js';
 import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle, createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
@@ -15,6 +15,7 @@ var FONTS = [
 ];
 var STROKE_DEFAULT = 4;
 var TEXT_SIZE_DEFAULT = 24;
+var TEXT_PADDING_DEFAULT = 6;
 var RECT_RADIUS_DEFAULT = 12;
 var MOSAIC_BLOCK = 12;
 var ZOOM_MIN = 0.25;
@@ -34,6 +35,9 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
   const [textBold, setTextBold] = useState(true);
   const [textItalic, setTextItalic] = useState(false);
   const [textUnderline, setTextUnderline] = useState(false);
+  const [textBorderColor, setTextBorderColor] = useState(null);
+  const [textBg, setTextBg] = useState(null);
+  const [textPadding, setTextPadding] = useState(TEXT_PADDING_DEFAULT);
   const [rectRadius, setRectRadius] = useState(RECT_RADIUS_DEFAULT);
   const [annotations, setAnnotations] = useState([]);
   const [selectedId, setSelectedId] = useState(null);
@@ -65,6 +69,9 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
         setTextBold(selected.bold);
         setTextItalic(selected.italic);
         setTextUnderline(selected.underline);
+        setTextBorderColor(selected.borderColor);
+        setTextBg(selected.background);
+        setTextPadding(selected.padding);
       }
     }
   }, [selectedId]);
@@ -209,6 +216,10 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
       return;
     }
     if (tool === "text") {
+      if (pendingText) {
+        commitText();
+        return;
+      }
       const p = evToImage(e);
       setPendingText({ x: p.x, y: p.y, value: "" });
       return;
@@ -302,9 +313,30 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
       (a) => a.id === selectedId && a.type === "text" ? { ...a, [which]: next } : a
     ));
   };
-  const commitText = () => {
+  const setTextBorderColorAndApply = (c) => {
+    setTextBorderColor(c);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "text" ? { ...a, borderColor: c } : a
+    ));
+  };
+  const setTextBgAndApply = (c) => {
+    setTextBg(c);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "text" ? { ...a, background: c } : a
+    ));
+  };
+  const setTextPaddingAndApply = (p) => {
+    setTextPadding(p);
+    if (!selectedId) return;
+    setAnnotations((prev) => prev.map(
+      (a) => a.id === selectedId && a.type === "text" ? { ...a, padding: p } : a
+    ));
+  };
+  const commitText = (explicitValue) => {
     if (!pendingText) return;
-    const value = pendingText.value;
+    const value = explicitValue ?? pendingText.value;
     if (!value.trim()) {
       if (pendingText.editingId) {
         setAnnotations((prev) => prev.filter((a) => a.id !== pendingText.editingId));
@@ -328,7 +360,10 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
         font: textFont,
         bold: textBold,
         italic: textItalic,
-        underline: textUnderline
+        underline: textUnderline,
+        borderColor: textBorderColor,
+        background: textBg,
+        padding: textPadding
       };
       setAnnotations((prev) => [...prev, anno]);
       setSelectedId(anno.id);
@@ -496,6 +531,43 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
           /* @__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__ */ jsxs("label", { className: "flex items-center gap-1 text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { children: "Border" }),
+          textBorderColor ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: textBorderColor,
+                onChange: (e) => setTextBorderColorAndApply(e.target.value),
+                title: "Text-box border color",
+                className: "h-5 w-6 rounded border border-gray-300 bg-white p-0 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { onClick: () => setTextBorderColorAndApply(null), title: "Remove border", className: "px-0.5 text-gray-400 hover:text-gray-700", children: "\u2715" })
+          ] }) : /* @__PURE__ */ jsx("button", { onClick: () => setTextBorderColorAndApply(color), title: "Add a border", className: "px-1.5 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-100", children: "Add" })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { children: "Fill" }),
+          textBg ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                value: textBg,
+                onChange: (e) => setTextBgAndApply(e.target.value),
+                title: "Text-box background color",
+                className: "h-5 w-6 rounded border border-gray-300 bg-white p-0 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { onClick: () => setTextBgAndApply(null), title: "Remove fill", className: "px-0.5 text-gray-400 hover:text-gray-700", children: "\u2715" })
+          ] }) : /* @__PURE__ */ jsx("button", { onClick: () => setTextBgAndApply("#ffffff"), title: "Add a background fill", className: "px-1.5 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-100", children: "Add" })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { children: "Pad" }),
+          /* @__PURE__ */ jsx("input", { type: "range", min: 0, max: 40, step: 1, value: textPadding, onChange: (e) => setTextPaddingAndApply(Number(e.target.value)), className: "w-14 accent-blue-500" }),
+          /* @__PURE__ */ jsx("span", { className: "tabular-nums w-6 text-right", children: textPadding })
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
@@ -589,6 +661,9 @@ var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onAppl
               bold: textBold,
               italic: textItalic,
               underline: textUnderline,
+              borderColor: textBorderColor,
+              background: textBg,
+              padding: textPadding,
               scale,
               onChange: (value) => setPendingText({ ...pendingText, value }),
               onCommit: commitText,
@@ -671,23 +746,41 @@ function AnnotationView({ anno, selected, preview, zoom = 1, onPointerDown, onDo
     );
   } else {
     const font = FONTS.find((f) => f.id === anno.font)?.css ?? FONTS[0].css;
-    body = /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: anno.x,
-        y: anno.y + anno.size,
-        fill: anno.color,
-        fontSize: anno.size,
-        fontWeight: anno.bold ? 700 : 400,
-        fontStyle: anno.italic ? "italic" : "normal",
-        textDecoration: anno.underline ? "underline" : void 0,
-        fontFamily: font,
-        style: { userSelect: "none" },
-        ...interactive,
-        ...dblc,
-        children: anno.text.split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", { x: anno.x, dy: i === 0 ? 0 : anno.size * 1.2, children: line }, i))
-      }
-    );
+    const pad = anno.padding ?? 0;
+    const hasBox = !!anno.borderColor || !!anno.background;
+    const box = boundingBox(anno);
+    const borderW = anno.borderColor ? Math.max(1, Math.round(anno.size / 12)) : 0;
+    body = /* @__PURE__ */ jsxs("g", { ...interactive, ...dblc, children: [
+      hasBox && /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: box.x - pad,
+          y: box.y - pad,
+          width: Math.max(0, box.w) + pad * 2,
+          height: Math.max(0, box.h) + pad * 2,
+          rx: Math.min(8, pad),
+          ry: Math.min(8, pad),
+          fill: anno.background ?? "none",
+          stroke: anno.borderColor ?? "none",
+          strokeWidth: borderW
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: anno.x,
+          y: anno.y + anno.size,
+          fill: anno.color,
+          fontSize: anno.size,
+          fontWeight: anno.bold ? 700 : 400,
+          fontStyle: anno.italic ? "italic" : "normal",
+          textDecoration: anno.underline ? "underline" : void 0,
+          fontFamily: font,
+          style: { userSelect: "none" },
+          children: anno.text.split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", { x: anno.x, dy: i === 0 ? 0 : anno.size * 1.2, children: line }, i))
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsxs("g", { children: [
     body,
@@ -798,6 +891,9 @@ function PendingTextEditor({
   bold,
   italic,
   underline,
+  borderColor,
+  background,
+  padding,
   scale,
   onChange,
   onCommit,
@@ -811,6 +907,8 @@ function PendingTextEditor({
     });
     return () => cancelAnimationFrame(id);
   }, []);
+  const commit = () => onCommit(ref.current?.value);
+  const borderW = borderColor ? Math.max(1, Math.round(size / 12)) : 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -828,19 +926,19 @@ function PendingTextEditor({
           ref,
           value: pendingText.value,
           onChange: (e) => onChange(e.target.value),
-          onBlur: onCommit,
+          onBlur: commit,
           onKeyDown: (e) => {
             if (e.key === "Escape") {
               e.preventDefault();
               onCancel();
             } else if (e.key === "Enter" && !e.shiftKey) {
               e.preventDefault();
-              onCommit();
+              commit();
             }
           },
           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",
+          className: "outline-none resize-none shadow-md",
           style: {
             color,
             fontSize: `${size * scale}px`,
@@ -848,7 +946,13 @@ function PendingTextEditor({
             fontWeight: bold ? 700 : 400,
             fontStyle: italic ? "italic" : "normal",
             textDecoration: underline ? "underline" : void 0,
-            minWidth: 80
+            minWidth: 80,
+            // Mirror the committed box so the editor is WYSIWYG. With no custom
+            // border, show a dashed hint so the edit box stays visible.
+            padding: `${padding * scale}px`,
+            borderRadius: `${Math.min(8, padding) * scale}px`,
+            border: borderColor ? `${borderW * scale}px solid ${borderColor}` : "1px dashed #60a5fa",
+            background: background ?? "rgba(255,255,255,0.95)"
           }
         }
       )
@@ -4285,5 +4389,5 @@ function ImagePanel({ url, filename, onDownload, onEmail }) {
 }
 
 export { ImageAnnotator_default, Preview, setPdfPreview };
-//# sourceMappingURL=chunk-K4673QDA.js.map
-//# sourceMappingURL=chunk-K4673QDA.js.map
+//# sourceMappingURL=chunk-2E474D7Q.js.map
+//# sourceMappingURL=chunk-2E474D7Q.js.map