@embedpdf/plugin-annotation 1.0.15 → 1.0.17

package/dist/react/index.js

@@ -1,7 +1,7 @@
 import { usePlugin, useCapability } from "@embedpdf/core/react";
 import { AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { restoreOffset, rectEquals, PdfAnnotationBorderStyle, PdfAnnotationSubtype, expandRect, rectFromPoints, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { restoreOffset, rectEquals, PdfAnnotationBorderStyle, PdfAnnotationSubtype, expandRect, rectFromPoints, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, uuidV4 } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
 import { Fragment, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
@@ -53,7 +53,8 @@ function CounterRotate({ children, ...props }) {
   };
   const menuWrapperProps = {
     style: menuWrapperStyle,
-    onPointerDown: (e) => e.stopPropagation()
+    onPointerDown: (e) => e.stopPropagation(),
+    onTouchStart: (e) => e.stopPropagation()
   };
   return /* @__PURE__ */ jsx(Fragment, { children: children({
     menuWrapperProps,
@@ -210,20 +211,16 @@ function useDragResize({
     oy = clamp(oy, 0, pageH - h);
     return { origin: { x: ox, y: oy }, size: { width: w, height: h } };
   };
-  const onPointerDown = (e) => {
-    if (!isSelected || !isDraggable) return;
-    e.stopPropagation();
-    e.preventDefault();
-    drag.current = "dragging";
-    startPos.current = { x: e.clientX, y: e.clientY };
+  const beginDrag = (kind, clientX, clientY) => {
+    drag.current = kind;
+    startPos.current = { x: clientX, y: clientY };
     startRect.current = currentRect;
-    e.currentTarget.setPointerCapture(e.pointerId);
   };
-  const onPointerMove = (e) => {
+  const handleMove = (clientX, clientY) => {
     if (drag.current === "idle" || !startPos.current) return;
     const disp = {
-      x: e.clientX - startPos.current.x,
-      y: e.clientY - startPos.current.y
+      x: clientX - startPos.current.x,
+      y: clientY - startPos.current.y
     };
     const { x, y } = restoreOffset(disp, rotation, scale);
     const nextRect = applyDelta(x, y);
@@ -238,14 +235,8 @@ function useDragResize({
     setCurrentRect(patch.rect ?? nextRect);
     setPreviewObject(patch);
   };
-  const onPointerUp = (e) => {
+  const finishDragInternal = () => {
     if (drag.current === "idle") return;
-    if ((e == null ? void 0 : e.currentTarget) && e.pointerId !== void 0) {
-      try {
-        e.currentTarget.releasePointerCapture(e.pointerId);
-      } catch {
-      }
-    }
     const usedDir = dir.current || "bottom-right";
     drag.current = "idle";
     let patch = { rect: currentRect };
@@ -261,16 +252,45 @@ function useDragResize({
     dir.current = "none";
     setPreviewObject(null);
   };
+  const onPointerDown = (e) => {
+    if (!isSelected || !isDraggable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    beginDrag("dragging", e.clientX, e.clientY);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e) => handleMove(e.clientX, e.clientY);
+  const onPointerUp = (e) => {
+    finishDragInternal();
+    if ((e == null ? void 0 : e.currentTarget) && e.pointerId !== void 0) {
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+  };
   const startResize = (direction) => (e) => {
     if (!isSelected || !isResizable) return;
     e.stopPropagation();
     e.preventDefault();
-    drag.current = "resizing";
     dir.current = direction;
-    startPos.current = { x: e.clientX, y: e.clientY };
-    startRect.current = currentRect;
+    beginDrag("resizing", e.clientX, e.clientY);
     e.currentTarget.setPointerCapture(e.pointerId);
   };
+  const onTouchStart = (e) => {
+    if (!isSelected || !isDraggable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const t = e.touches[0];
+    if (!t) return;
+    beginDrag("dragging", t.clientX, t.clientY);
+  };
+  const onTouchMove = (e) => {
+    const t = e.touches[0];
+    if (!t) return;
+    handleMove(t.clientX, t.clientY);
+  };
+  const onTouchEnd = () => finishDragInternal();
   useEffect(() => {
     drag.current = "idle";
     dir.current = "none";
@@ -283,7 +303,12 @@ function useDragResize({
       onPointerMove,
       onPointerUp,
       onPointerCancel: () => onPointerUp(),
-      onLostPointerCapture: () => onPointerUp()
+      onLostPointerCapture: () => onPointerUp(),
+      /* mobile touch fallback */
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onTouchCancel: onTouchEnd
     },
     startResize
   };
@@ -390,7 +415,7 @@ function AnnotationContainer({
     setCurrentRect,
     setCurrentVertices,
     setPreviewObject,
-    commit: (patch) => annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch)
+    commit: (patch) => annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.object.id, patch)
   });
   useLayoutEffect(() => {
     if (!rectEquals(trackedAnnotation.object.rect, currentRect)) {
@@ -415,6 +440,7 @@ function AnnotationContainer({
           width: `${currentRect.size.width * scale}px`,
           height: `${currentRect.size.height * scale}px`,
           pointerEvents: isSelected ? "auto" : "none",
+          touchAction: isSelected ? "auto" : "none",
           cursor: isSelected && isDraggable ? "move" : "default",
           ...isSelected && {
             zIndex: 3
@@ -448,7 +474,7 @@ function AnnotationContainer({
                     rect: currentRect,
                     vertices: v
                   });
-                  annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch);
+                  annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.object.id, patch);
                 }
               }
             }
@@ -495,7 +521,8 @@ function Highlight({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
@@ -528,7 +555,8 @@ function Underline({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -575,7 +603,8 @@ function Strikeout({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -629,7 +658,8 @@ function Squiggly({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -665,14 +695,14 @@ function Squiggly({
   )) });
 }
 function Ink({
+  isSelected,
   color = "#000000",
   opacity = 1,
   strokeWidth,
   inkList,
   rect,
   scale,
-  onClick,
-  cursor
+  onClick
 }) {
   const paths = useMemo(() => {
     return inkList.map(({ points }) => {
@@ -707,10 +737,11 @@ function Ink({
           d,
           fill: "none",
           opacity,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           style: {
-            cursor,
-            pointerEvents: "visibleStroke",
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: isSelected ? "none" : "visibleStroke",
             stroke: color,
             strokeWidth,
             strokeLinecap: "round",
@@ -723,6 +754,7 @@ function Ink({
   );
 }
 function Square({
+  isSelected,
   color = "#000000",
   strokeColor,
   opacity = 1,
@@ -731,8 +763,7 @@ function Square({
   strokeDashArray,
   rect,
   scale,
-  onClick,
-  cursor
+  onClick
 }) {
   const { width, height, x, y } = useMemo(() => {
     const outerW = rect.size.width;
@@ -770,10 +801,11 @@ function Square({
           height,
           fill: color,
           opacity,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           style: {
-            cursor,
-            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
             stroke: strokeColor ?? color,
             strokeWidth,
             ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
@@ -795,7 +827,7 @@ function Circle({
   rect,
   scale,
   onClick,
-  cursor
+  isSelected
 }) {
   const { width, height, cx, cy, rx, ry } = useMemo(() => {
     const outerW = rect.size.width;
@@ -836,10 +868,11 @@ function Circle({
           ry,
           fill: color,
           opacity,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           style: {
-            cursor,
-            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
             stroke: strokeColor ?? color,
             strokeWidth,
             ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
@@ -947,10 +980,11 @@ function Line({
             x2,
             y2,
             opacity,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
-              pointerEvents: "visibleStroke",
+              pointerEvents: isSelected ? "none" : "visibleStroke",
               stroke: strokeColor,
               strokeWidth,
               strokeLinecap: "butt",
@@ -965,13 +999,14 @@ function Line({
           {
             d: endings.start.d,
             transform: endings.start.transform,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             stroke: strokeColor,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
               strokeLinecap: "butt",
-              pointerEvents: endings.start.filled ? "visible" : "visibleStroke",
+              pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
               ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
                 strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
               }
@@ -985,12 +1020,13 @@ function Line({
             d: endings.end.d,
             transform: endings.end.transform,
             stroke: strokeColor,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
               strokeLinecap: "butt",
-              pointerEvents: endings.end.filled ? "visible" : "visibleStroke",
+              pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
               ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
                 strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
               }
@@ -1066,14 +1102,15 @@ function Polyline({
           "path",
           {
             d: pathData,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             opacity,
             style: {
               fill: "none",
               stroke: strokeColor ?? color,
               strokeWidth,
               cursor: isSelected ? "move" : "pointer",
-              pointerEvents: "visibleStroke",
+              pointerEvents: isSelected ? "none" : "visibleStroke",
               strokeLinecap: "butt",
               strokeLinejoin: "miter"
             }
@@ -1086,11 +1123,12 @@ function Polyline({
             transform: endings.start.transform,
             stroke: strokeColor,
             fill: endings.start.filled ? color : "none",
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
-              pointerEvents: endings.start.filled ? "visible" : "visibleStroke",
+              pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1102,11 +1140,12 @@ function Polyline({
             transform: endings.end.transform,
             stroke: strokeColor,
             fill: endings.end.filled ? color : "none",
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
-              pointerEvents: endings.end.filled ? "visible" : "visibleStroke",
+              pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1157,14 +1196,15 @@ function Polygon({
         "path",
         {
           d: pathData,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           opacity,
           style: {
             fill: color,
             stroke: strokeColor ?? color,
             strokeWidth,
             cursor: isSelected ? "move" : "pointer",
-            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
             strokeLinecap: "butt",
             strokeLinejoin: "miter",
             ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
@@ -1252,7 +1292,7 @@ function FreeText({
   const handleBlur = () => {
     if (!annotationProvides) return;
     if (!editorRef.current) return;
-    annotationProvides.updateAnnotation(pageIndex, annotation.localId, {
+    annotationProvides.updateAnnotation(pageIndex, annotation.object.id, {
       contents: editorRef.current.innerText
     });
   };
@@ -1268,6 +1308,7 @@ function FreeText({
         zIndex: 2
       },
       onPointerDown: onClick,
+      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         "span",
         {
@@ -1366,11 +1407,12 @@ function Stamp({ isSelected, annotation, pageIndex, scale, onClick }) {
         pointerEvents: isSelected ? "none" : "auto"
       },
       onPointerDown: onClick,
-      children: annotation.pdfId !== void 0 && /* @__PURE__ */ jsx(
+      onTouchStart: onClick,
+      children: /* @__PURE__ */ jsx(
         RenderAnnotation,
         {
           pageIndex,
-          annotation: { ...annotation.object, id: annotation.pdfId },
+          annotation: { ...annotation.object, id: annotation.object.id },
           scaleFactor: scale
         }
       )
@@ -1408,7 +1450,7 @@ function Annotations(annotationsProps) {
     (e, annotation) => {
       e.stopPropagation();
       if (annotationProvides && selectionProvides) {
-        annotationProvides.selectAnnotation(pageIndex, annotation.localId);
+        annotationProvides.selectAnnotation(pageIndex, annotation.object.id);
         selectionProvides.clear();
         setEditingId(null);
       }
@@ -1419,8 +1461,8 @@ function Annotations(annotationsProps) {
     return register(handlers);
   }, [register, handlers]);
   return /* @__PURE__ */ jsx(Fragment$1, { children: annotations.map((annotation) => {
-    const isSelected = (selectionState == null ? void 0 : selectionState.localId) === annotation.localId;
-    const isEditing = editingId === annotation.localId;
+    const isSelected = (selectionState == null ? void 0 : selectionState.object.id) === annotation.object.id;
+    const isEditing = editingId === annotation.object.id;
     if (isInk(annotation)) {
       return /* @__PURE__ */ jsx(
         AnnotationContainer,
@@ -1438,7 +1480,7 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Ink,
             {
-              cursor: isSelected ? "move" : "pointer",
+              isSelected,
               color: obj.color,
               opacity: obj.opacity,
               strokeWidth: obj.strokeWidth,
@@ -1449,7 +1491,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isSquare(annotation)) {
@@ -1468,7 +1510,7 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Square,
             {
-              cursor: isSelected ? "move" : "pointer",
+              isSelected,
               rect: obj.rect,
               color: obj.color,
               opacity: obj.opacity,
@@ -1481,7 +1523,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isCircle(annotation)) {
@@ -1500,7 +1542,7 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Circle,
             {
-              cursor: isSelected ? "move" : "pointer",
+              isSelected,
               rect: obj.rect,
               color: obj.color,
               opacity: obj.opacity,
@@ -1513,7 +1555,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isUnderline(annotation)) {
@@ -1541,7 +1583,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isStrikeout(annotation)) {
@@ -1569,7 +1611,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isSquiggly(annotation)) {
@@ -1597,7 +1639,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isHighlight(annotation)) {
@@ -1625,7 +1667,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isLine(annotation)) {
@@ -1664,7 +1706,7 @@ function Annotations(annotationsProps) {
             }
           ) })
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isPolyline(annotation)) {
@@ -1698,7 +1740,7 @@ function Annotations(annotationsProps) {
             }
           ) })
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isPolygon(annotation)) {
@@ -1733,7 +1775,7 @@ function Annotations(annotationsProps) {
             }
           ) })
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isFreeText(annotation)) {
@@ -1748,7 +1790,7 @@ function Annotations(annotationsProps) {
           outlineOffset: 6,
           onDoubleClick: (e) => {
             e.stopPropagation();
-            setEditingId(annotation.localId);
+            setEditingId(annotation.object.id);
           },
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
@@ -1769,7 +1811,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     if (isStamp(annotation)) {
@@ -1797,7 +1839,7 @@ function Annotations(annotationsProps) {
             }
           )
         },
-        annotation.localId
+        annotation.object.id
       );
     }
     return null;
@@ -1984,8 +2026,9 @@ const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
               color: toolColor,
               opacity: toolOpacity,
               strokeWidth: toolStrokeWidth,
+              created: /* @__PURE__ */ new Date(),
               pageIndex,
-              id: Date.now() + Math.random()
+              id: uuidV4()
             };
             annotationProvides.createAnnotation(pageIndex, anno);
             annotationProvides.setActiveVariant(null);
@@ -2142,8 +2185,9 @@ const CirclePaint = ({
               strokeColor: toolStrokeColor,
               strokeStyle: toolStrokeStyle,
               strokeDashArray: toolStrokeDashArray,
+              created: /* @__PURE__ */ new Date(),
               pageIndex,
-              id: Date.now() + Math.random()
+              id: uuidV4()
             };
             annotationProvides.createAnnotation(pageIndex, anno);
             annotationProvides.setActiveVariant(null);
@@ -2297,7 +2341,8 @@ const SquarePaint = ({
               strokeStyle: toolStrokeStyle,
               strokeDashArray: toolStrokeDashArray,
               pageIndex,
-              id: Date.now() + Math.random()
+              id: uuidV4(),
+              created: /* @__PURE__ */ new Date()
             };
             annotationProvides.createAnnotation(pageIndex, anno);
             annotationProvides.setActiveVariant(null);
@@ -2420,7 +2465,8 @@ const PolylinePaint = ({
       strokeDashArray: toolStrokeDashArray,
       lineEndings: toolLineEndings,
       pageIndex,
-      id: Date.now() + Math.random()
+      id: uuidV4(),
+      created: /* @__PURE__ */ new Date()
     };
     annotationProvides.createAnnotation(pageIndex, anno);
     annotationProvides.setActiveVariant(null);
@@ -2528,7 +2574,8 @@ const LinePaint = ({ pageIndex, scale, pageWidth, pageHeight, cursor }) => {
       lineEndings: toolLineEndings,
       intent,
       pageIndex,
-      id: Date.now() + Math.random()
+      id: uuidV4(),
+      created: /* @__PURE__ */ new Date()
     };
     annotationProvides.createAnnotation(pageIndex, anno);
     annotationProvides.setActiveVariant(null);
@@ -2650,7 +2697,8 @@ const PolygonPaint = ({
       strokeStyle: toolStrokeStyle,
       strokeDashArray: toolStrokeDashArray,
       pageIndex,
-      id: Date.now() + Math.random()
+      id: uuidV4(),
+      created: /* @__PURE__ */ new Date()
     };
     annotationProvides.createAnnotation(pageIndex, anno);
     annotationProvides.setActiveVariant(null);
@@ -2841,7 +2889,8 @@ const FreeTextPaint = ({
       textAlign: toolTextAlign,
       verticalAlign: toolVerticalAlign,
       pageIndex,
-      id: Date.now() + Math.random()
+      id: uuidV4(),
+      created: /* @__PURE__ */ new Date()
     };
     annotationProvides.createAnnotation(pageIndex, anno);
     annotationProvides.setActiveVariant(null);
@@ -2987,7 +3036,8 @@ const StampPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
       type: PdfAnnotationSubtype.STAMP,
       flags: ["print"],
       pageIndex,
-      id: Date.now() + Math.random(),
+      id: uuidV4(),
+      created: /* @__PURE__ */ new Date(),
       rect
     };
     annotationProvides.createAnnotation(pageIndex, anno, { imageData });