@embedpdf/plugin-annotation 1.0.6 → 1.0.8

package/dist/preact/index.js

@@ -4,137 +4,539 @@ import { AnnotationPlugin } from "@embedpdf/plugin-annotation";
 var useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 var useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
 
-// src/preact/components/annotation-layer.tsx
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-// ../models/dist/index.js
-var PdfSoftHyphenMarker = "\xAD";
-var PdfZeroWidthSpace = "\u200B";
-var PdfWordJoiner = "\u2060";
-var PdfBomOrZwnbsp = "\uFEFF";
-var PdfNonCharacterFFFE = "\uFFFE";
-var PdfNonCharacterFFFF = "\uFFFF";
-var PdfUnwantedTextMarkers = Object.freeze([
-  PdfSoftHyphenMarker,
-  PdfZeroWidthSpace,
-  PdfWordJoiner,
-  PdfBomOrZwnbsp,
-  PdfNonCharacterFFFE,
-  PdfNonCharacterFFFF
-]);
-var PdfUnwantedTextRegex = new RegExp(`[${PdfUnwantedTextMarkers.join("")}]`, "g");
-var PdfAnnotationSubtype = /* @__PURE__ */ ((PdfAnnotationSubtype2) => {
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["UNKNOWN"] = 0] = "UNKNOWN";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["TEXT"] = 1] = "TEXT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["LINK"] = 2] = "LINK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["FREETEXT"] = 3] = "FREETEXT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["LINE"] = 4] = "LINE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SQUARE"] = 5] = "SQUARE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["CIRCLE"] = 6] = "CIRCLE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["POLYGON"] = 7] = "POLYGON";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["POLYLINE"] = 8] = "POLYLINE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["HIGHLIGHT"] = 9] = "HIGHLIGHT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["UNDERLINE"] = 10] = "UNDERLINE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SQUIGGLY"] = 11] = "SQUIGGLY";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["STRIKEOUT"] = 12] = "STRIKEOUT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["STAMP"] = 13] = "STAMP";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["CARET"] = 14] = "CARET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["INK"] = 15] = "INK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["POPUP"] = 16] = "POPUP";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["FILEATTACHMENT"] = 17] = "FILEATTACHMENT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SOUND"] = 18] = "SOUND";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["MOVIE"] = 19] = "MOVIE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["WIDGET"] = 20] = "WIDGET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SCREEN"] = 21] = "SCREEN";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["PRINTERMARK"] = 22] = "PRINTERMARK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["TRAPNET"] = 23] = "TRAPNET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["WATERMARK"] = 24] = "WATERMARK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["THREED"] = 25] = "THREED";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["RICHMEDIA"] = 26] = "RICHMEDIA";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["XFAWIDGET"] = 27] = "XFAWIDGET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["REDACT"] = 28] = "REDACT";
-  return PdfAnnotationSubtype2;
-})(PdfAnnotationSubtype || {});
-
-// src/lib/selectors.ts
-var getAnnotationsByPageIndex = (state, pageIndex) => {
-  return state.annotations[pageIndex] || [];
-};
+// src/preact/components/annotations.tsx
+import { PdfAnnotationSubtype as PdfAnnotationSubtype2 } from "@embedpdf/models";
+import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
+import {
+  getAnnotationsByPageIndex,
+  getSelectedAnnotationByPageIndex
+} from "@embedpdf/plugin-annotation";
+import { useMemo as useMemo2, useState as useState2, useEffect as useEffect2, useCallback } from "preact/hooks";
 
-// src/preact/components/annotations/highlight.tsx
-import { useCallback } from "preact/hooks";
-import { Fragment, jsx } from "preact/jsx-runtime";
-function HighlightAnnotation({
-  annotation,
+// src/preact/components/annotation-container.tsx
+import { useEffect, useRef, useState } from "preact/hooks";
+import { restoreOffset } from "@embedpdf/models";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+function AnnotationContainer({
   scale,
+  pageIndex,
+  rotation,
+  trackedAnnotation,
+  children,
+  style,
+  outlineOffset = 1,
   isSelected = false,
-  pageIndex
+  isDraggable = true,
+  isResizable = true,
+  computeResizePatch,
+  ...props
 }) {
   const { provides: annotationProvides } = useAnnotationCapability();
-  const highlightColor = annotation.color || { red: 255, green: 255, blue: 0, alpha: 76 };
-  const rgbaColor = `rgba(${highlightColor.red}, ${highlightColor.green}, ${highlightColor.blue}, ${highlightColor.alpha / 255})`;
-  const handleClick = useCallback(
-    (e) => {
-      e.stopPropagation();
-      if (annotationProvides) {
-        annotationProvides.selectAnnotation(pageIndex, annotation.id);
+  const ref = useRef(null);
+  const [dragState, setDragState] = useState("idle");
+  const [resizeDirection, setResizeDirection] = useState(null);
+  const [startPos, setStartPos] = useState(null);
+  const [startRect, setStartRect] = useState(null);
+  const [currentRect, setCurrentRect] = useState(trackedAnnotation.object.rect);
+  const [previewObject, setPreviewObject] = useState(null);
+  useEffect(() => {
+    setCurrentRect(trackedAnnotation.object.rect);
+    setPreviewObject(null);
+  }, [trackedAnnotation]);
+  const handlePointerDown = (e) => {
+    if (!isSelected) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const target = e.target;
+    if (isResizable && target.classList.contains("resize-handle")) {
+      setDragState("resizing");
+      setResizeDirection(target.dataset.direction);
+    } else if (isDraggable) {
+      setDragState("dragging");
+    } else {
+      return;
+    }
+    setStartPos({ x: e.clientX, y: e.clientY });
+    setStartRect(currentRect);
+    ref.current?.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (dragState === "idle" || !startPos || !startRect) return;
+    const dispDelta = { x: e.clientX - startPos.x, y: e.clientY - startPos.y };
+    const { x: dx, y: dy } = restoreOffset(dispDelta, rotation, scale);
+    let newOriginX = startRect.origin.x;
+    let newOriginY = startRect.origin.y;
+    let newWidth = startRect.size.width;
+    let newHeight = startRect.size.height;
+    if (dragState === "dragging") {
+      newOriginX += dx;
+      newOriginY += dy;
+    } else if (dragState === "resizing" && resizeDirection) {
+      if (resizeDirection.includes("right")) {
+        newWidth += dx;
+      } else if (resizeDirection.includes("left")) {
+        newOriginX += dx;
+        newWidth -= dx;
       }
-    },
-    [annotationProvides, isSelected, pageIndex, annotation.id]
+      if (resizeDirection.includes("bottom")) {
+        newHeight += dy;
+      } else if (resizeDirection.includes("top")) {
+        newOriginY += dy;
+        newHeight -= dy;
+      }
+      if (newWidth < 1 || newHeight < 1) return;
+    }
+    const tentativeRect = {
+      origin: { x: newOriginX, y: newOriginY },
+      size: { width: newWidth, height: newHeight }
+    };
+    let previewPatch = { rect: tentativeRect };
+    if (computeResizePatch) {
+      const dir = dragState === "resizing" ? resizeDirection : "bottom-right";
+      if (dir) {
+        previewPatch = computeResizePatch(trackedAnnotation.object, tentativeRect, dir);
+      }
+    }
+    setCurrentRect(previewPatch.rect || tentativeRect);
+    setPreviewObject(previewPatch);
+  };
+  const handlePointerUp = (e) => {
+    if (dragState === "idle") return;
+    const usedDirection = resizeDirection || "bottom-right";
+    setDragState("idle");
+    setResizeDirection(null);
+    ref.current?.releasePointerCapture(e.pointerId);
+    if (annotationProvides && trackedAnnotation) {
+      let patch = { rect: currentRect };
+      if (computeResizePatch && usedDirection) {
+        patch = computeResizePatch(trackedAnnotation.object, currentRect, usedDirection);
+      }
+      annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch);
+    }
+    setStartPos(null);
+    setStartRect(null);
+    setPreviewObject(null);
+  };
+  const currentObject = previewObject ? { ...trackedAnnotation.object, ...previewObject } : trackedAnnotation.object;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      style: {
+        position: "absolute",
+        outline: isSelected ? "1px solid #007ACC" : "none",
+        outlineOffset: isSelected ? `${outlineOffset}px` : "0px",
+        left: `${currentRect.origin.x * scale}px`,
+        top: `${currentRect.origin.y * scale}px`,
+        width: `${currentRect.size.width * scale}px`,
+        height: `${currentRect.size.height * scale}px`,
+        pointerEvents: isSelected ? "auto" : "none",
+        cursor: isSelected && isDraggable ? "move" : "default",
+        ...style
+      },
+      ...props,
+      children: [
+        typeof children === "function" ? children(currentObject) : children,
+        isSelected && isResizable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "top-left",
+              style: {
+                position: "absolute",
+                top: -7 - outlineOffset,
+                left: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "top-right",
+              style: {
+                position: "absolute",
+                top: -7 - outlineOffset,
+                right: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "bottom-left",
+              style: {
+                position: "absolute",
+                bottom: -7 - outlineOffset,
+                left: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "bottom-right",
+              style: {
+                position: "absolute",
+                bottom: -7 - outlineOffset,
+                right: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
+              }
+            }
+          )
+        ] })
+      ]
+    }
   );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+}
+
+// src/preact/components/text-markup/highlight.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "preact/jsx-runtime";
+function Highlight({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: rects.map((b, i) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
+        top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
+        width: b.size.width * scale,
+        height: b.size.height * scale,
+        background: color,
+        opacity,
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : null,
+        ...style
+      },
+      ...props
+    },
+    i
+  )) });
+}
+
+// src/preact/components/text-markup/underline.tsx
+import { Fragment as Fragment3, jsx as jsx3 } from "preact/jsx-runtime";
+function Underline({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx3(Fragment3, { children: rects.map((r, i) => /* @__PURE__ */ jsx3(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+
+// src/preact/components/text-markup/strikeout.tsx
+import { Fragment as Fragment4, jsx as jsx4 } from "preact/jsx-runtime";
+function Strikeout({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx4(Fragment4, { children: rects.map((r, i) => /* @__PURE__ */ jsx4(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+
+// src/preact/components/text-markup/squiggly.tsx
+import { Fragment as Fragment5, jsx as jsx5 } from "preact/jsx-runtime";
+function Squiggly({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const amplitude = 2 * scale;
+  const period = 6 * scale;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${period}" height="${amplitude * 2}" viewBox="0 0 ${period} ${amplitude * 2}">
+      <path d="M0 ${amplitude} Q ${period / 4} 0 ${period / 2} ${amplitude} T ${period} ${amplitude}"
+            fill="none" stroke="${color}" stroke-width="${amplitude}" stroke-linecap="round"/>
+    </svg>`;
+  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  return /* @__PURE__ */ jsx5(Fragment5, { children: rects.map((r, i) => /* @__PURE__ */ jsx5(
     "div",
     {
-      className: "highlight-annotation",
+      onMouseDown: onClick,
       style: {
         position: "absolute",
-        mixBlendMode: "multiply",
-        cursor: "pointer",
-        outline: isSelected ? "2px solid #007ACC" : "none",
-        left: `${annotation.rect.origin.x * scale}px`,
-        top: `${annotation.rect.origin.y * scale}px`,
-        width: `${annotation.rect.size.width * scale}px`,
-        height: `${annotation.rect.size.height * scale}px`
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
       },
-      onMouseDown: handleClick,
-      children: annotation.segmentRects.map((rect, index) => /* @__PURE__ */ jsx(
+      ...props,
+      children: /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${(rect.origin.x - annotation.rect.origin.x) * scale}px`,
-            top: `${(rect.origin.y - annotation.rect.origin.y) * scale}px`,
-            width: `${rect.size.width * scale}px`,
-            height: `${rect.size.height * scale}px`,
-            backgroundColor: rgbaColor
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: amplitude * 2,
+            backgroundImage: svgDataUri,
+            backgroundRepeat: "repeat-x",
+            backgroundSize: `${period}px ${amplitude * 2}px`,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+
+// src/preact/components/annotations/ink.tsx
+import { useMemo } from "preact/hooks";
+import { jsx as jsx6 } from "preact/jsx-runtime";
+function Ink({
+  color = "#000000",
+  opacity = 1,
+  strokeWidth,
+  inkList,
+  rect,
+  scale,
+  onClick
+}) {
+  const paths = useMemo(() => {
+    return inkList.map(({ points }) => {
+      let d = "";
+      points.forEach(({ x, y }, i) => {
+        const lx = x - rect.origin.x;
+        const ly = y - rect.origin.y;
+        d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+      });
+      return d.trim();
+    });
+  }, [inkList, rect]);
+  const width = rect.size.width * scale;
+  const height = rect.size.height * scale;
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width,
+        height,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width,
+      height,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
+      children: paths.map((d, i) => /* @__PURE__ */ jsx6(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: color,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          opacity,
+          pointerEvents: "visibleStroke",
+          onMouseDown: onClick,
+          style: {
+            cursor: "pointer"
           }
         },
-        index
+        i
       ))
     }
-  ) });
+  );
 }
 
-// src/preact/components/annotation-layer.tsx
-import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
-import { jsx as jsx2 } from "preact/jsx-runtime";
-function AnnotationLayer({ pageIndex, scale, style, ...props }) {
+// src/preact/components/annotations.tsx
+import { useSelectionCapability } from "@embedpdf/plugin-selection/preact";
+
+// src/shared/resize-ink.ts
+import {
+  PdfAnnotationSubtype
+} from "@embedpdf/models";
+function resizeInkAnnotation(original, newRect, direction, uniform = false) {
+  if (original.type !== PdfAnnotationSubtype.INK) {
+    throw new Error("resizeInkAnnotation: original is not an ink annotation");
+  }
+  const oldRect = original.rect;
+  let scaleX = newRect.size.width / oldRect.size.width;
+  let scaleY = newRect.size.height / oldRect.size.height;
+  const minSize = 10;
+  if (newRect.size.width < minSize || newRect.size.height < minSize) {
+    scaleX = Math.max(scaleX, minSize / oldRect.size.width);
+    scaleY = Math.max(scaleY, minSize / oldRect.size.height);
+    newRect = {
+      origin: newRect.origin,
+      size: {
+        width: oldRect.size.width * scaleX,
+        height: oldRect.size.height * scaleY
+      }
+    };
+  }
+  if (uniform) {
+    const minScale = Math.min(scaleX, scaleY);
+    scaleX = minScale;
+    scaleY = minScale;
+    newRect.size = {
+      width: oldRect.size.width * minScale,
+      height: oldRect.size.height * minScale
+    };
+  }
+  const newInkList = original.inkList.map((stroke) => ({
+    points: stroke.points.map((p) => ({
+      x: newRect.origin.x + (p.x - oldRect.origin.x) * scaleX,
+      y: newRect.origin.y + (p.y - oldRect.origin.y) * scaleY
+    }))
+  }));
+  const avgScale = (scaleX + scaleY) / 2;
+  const newStrokeWidth = original.strokeWidth * avgScale;
+  return {
+    rect: newRect,
+    inkList: newInkList,
+    strokeWidth: newStrokeWidth
+  };
+}
+
+// src/preact/components/annotations.tsx
+import { Fragment as Fragment6, jsx as jsx7 } from "preact/jsx-runtime";
+function Annotations(annotationsProps) {
+  const { pageIndex, scale } = annotationsProps;
   const { provides: annotationProvides } = useAnnotationCapability();
-  const [annotations, setAnnotations] = useState([]);
+  const { provides: selectionProvides } = useSelectionCapability();
+  const [annotations, setAnnotations] = useState2([]);
   const { register } = usePointerHandlers({ pageIndex });
-  const [selectionState, setSelectionState] = useState({ selectedPageIndex: void 0, selectedAnnotationId: void 0 });
-  useEffect(() => {
+  const [selectionState, setSelectionState] = useState2(null);
+  useEffect2(() => {
     if (annotationProvides) {
       annotationProvides.onStateChange((state) => {
         setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
-        setSelectionState({
-          selectedPageIndex: state.selectedAnnotation?.pageIndex,
-          selectedAnnotationId: state.selectedAnnotation?.annotationId
-        });
+        setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
       });
     }
   }, [annotationProvides]);
-  const handlers = useMemo(
+  const handlers = useMemo2(
     () => ({
       onPointerDown: (_, pe) => {
         if (pe.target === pe.currentTarget && annotationProvides) {
@@ -144,34 +546,463 @@ function AnnotationLayer({ pageIndex, scale, style, ...props }) {
     }),
     [annotationProvides]
   );
-  useEffect(() => {
+  const handleClick = useCallback(
+    (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides && selectionProvides) {
+        annotationProvides.selectAnnotation(pageIndex, annotation.localId);
+        selectionProvides.clear();
+      }
+    },
+    [annotationProvides, selectionProvides, pageIndex]
+  );
+  useEffect2(() => {
     return register(handlers);
   }, [register, handlers]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx7(Fragment6, { children: annotations.map((annotation) => {
+    const isSelected = selectionState?.localId === annotation.localId;
+    switch (annotation.object.type) {
+      case PdfAnnotationSubtype2.UNDERLINE:
+        return /* @__PURE__ */ jsx7(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx7(
+              Underline,
+              {
+                rect: annotation.object.rect,
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype2.STRIKEOUT:
+        return /* @__PURE__ */ jsx7(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx7(
+              Strikeout,
+              {
+                rect: annotation.object.rect,
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype2.SQUIGGLY:
+        return /* @__PURE__ */ jsx7(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx7(
+              Squiggly,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                rect: annotation.object.rect,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype2.HIGHLIGHT:
+        return /* @__PURE__ */ jsx7(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx7(
+              Highlight,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale,
+                rect: annotation.object.rect,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype2.INK:
+        return /* @__PURE__ */ jsx7(
+          AnnotationContainer,
+          {
+            isSelected,
+            trackedAnnotation: annotation,
+            outlineOffset: 6,
+            computeResizePatch: resizeInkAnnotation,
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx7(
+              Ink,
+              {
+                color: obj.color,
+                opacity: obj.opacity,
+                strokeWidth: obj.strokeWidth,
+                inkList: obj.inkList,
+                rect: obj.rect,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      default:
+        return null;
+    }
+  }) });
+}
+
+// src/preact/components/text-markup.tsx
+import { PdfAnnotationSubtype as PdfAnnotationSubtype3 } from "@embedpdf/models";
+import { useSelectionCapability as useSelectionCapability2 } from "@embedpdf/plugin-selection/preact";
+import { useEffect as useEffect3, useState as useState3 } from "preact/hooks";
+import { jsx as jsx8 } from "preact/jsx-runtime";
+function TextMarkup({ pageIndex, scale }) {
+  const { provides: selectionProvides } = useSelectionCapability2();
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [rects, setRects] = useState3([]);
+  const [boundingRect, setBoundingRect] = useState3(null);
+  const [activeTool, setActiveTool] = useState3({ mode: null, defaults: null });
+  useEffect3(() => {
+    if (!selectionProvides) return;
+    const off = selectionProvides.onSelectionChange(() => {
+      setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
+      setBoundingRect(selectionProvides.getBoundingRectForPage(pageIndex));
+    });
+    return off;
+  }, [selectionProvides, pageIndex]);
+  useEffect3(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (!boundingRect) return null;
+  switch (activeTool.mode) {
+    case PdfAnnotationSubtype3.UNDERLINE:
+      return /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx8(
+            Underline,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case PdfAnnotationSubtype3.HIGHLIGHT:
+      return /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx8(
+            Highlight,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case PdfAnnotationSubtype3.STRIKEOUT:
+      return /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx8(
+            Strikeout,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case PdfAnnotationSubtype3.SQUIGGLY:
+      return /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx8(
+            Squiggly,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    default:
+      return null;
+  }
+}
+
+// src/preact/components/annotations/ink-paint.tsx
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "preact/hooks";
+import { usePointerHandlers as usePointerHandlers2 } from "@embedpdf/plugin-interaction-manager/preact";
+import { PdfAnnotationSubtype as PdfAnnotationSubtype4 } from "@embedpdf/models";
+import { jsx as jsx9 } from "preact/jsx-runtime";
+var MAX_STROKE_WIDTH = 30;
+var InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState4({ mode: null, defaults: null });
+  useEffect4(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (activeTool.mode !== PdfAnnotationSubtype4.INK) return null;
+  const toolColor = activeTool.defaults?.color ?? "#000000";
+  const toolOpacity = activeTool.defaults?.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults?.strokeWidth ?? 2;
+  const { register } = usePointerHandlers2({ modeId: "ink", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const [currentStrokes, setCurrentStrokes] = useState4([]);
+  const [isDrawing, setIsDrawing] = useState4(false);
+  const timerRef = useRef2(null);
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const handlers = useMemo3(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        const curX = clamp(pos.x, 0, pageWidthPDF);
+        const curY = clamp(pos.y, 0, pageHeightPDF);
+        setIsDrawing(true);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+          setCurrentStrokes((prev) => [...prev, { points: [{ x: curX, y: curY }] }]);
+        } else {
+          setCurrentStrokes([{ points: [{ x: curX, y: curY }] }]);
+        }
+        evt.target?.setPointerCapture?.(evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!isDrawing) return;
+        const curX = clamp(pos.x, 0, pageWidthPDF);
+        const curY = clamp(pos.y, 0, pageHeightPDF);
+        setCurrentStrokes((prev) => {
+          if (!prev.length) return prev;
+          const last = prev[prev.length - 1];
+          const newLast = { points: [...last.points, { x: curX, y: curY }] };
+          return [...prev.slice(0, -1), newLast];
+        });
+      },
+      onPointerUp: (_, evt) => {
+        setIsDrawing(false);
+        evt.target?.releasePointerCapture?.(evt.pointerId);
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          if (currentStrokes.length && annotationProvides) {
+            const allPoints2 = currentStrokes.flatMap((s) => s.points);
+            if (!allPoints2.length) return;
+            const minX2 = Math.min(...allPoints2.map((p) => p.x));
+            const minY2 = Math.min(...allPoints2.map((p) => p.y));
+            const maxX2 = Math.max(...allPoints2.map((p) => p.x));
+            const maxY2 = Math.max(...allPoints2.map((p) => p.y));
+            const halfStroke2 = MAX_STROKE_WIDTH / 2;
+            const rectMinX = minX2 - halfStroke2;
+            const rectMinY = minY2 - halfStroke2;
+            const rectMaxX = maxX2 + halfStroke2;
+            const rectMaxY = maxY2 + halfStroke2;
+            if (rectMaxX - rectMinX < 1 || rectMaxY - rectMinY < 1) return;
+            const rect = {
+              origin: { x: rectMinX, y: rectMinY },
+              size: { width: rectMaxX - rectMinX, height: rectMaxY - rectMinY }
+            };
+            const anno = {
+              type: PdfAnnotationSubtype4.INK,
+              rect,
+              inkList: currentStrokes,
+              color: toolColor,
+              opacity: toolOpacity,
+              strokeWidth: toolStrokeWidth,
+              pageIndex,
+              id: Date.now() + Math.random()
+            };
+            annotationProvides.createAnnotation(pageIndex, anno);
+            annotationProvides.setAnnotationMode(null);
+            annotationProvides.selectAnnotation(pageIndex, anno.id);
+          }
+          setCurrentStrokes([]);
+          timerRef.current = null;
+        }, 3e3);
+      },
+      onPointerCancel: (_, evt) => {
+        setIsDrawing(false);
+        evt.target?.releasePointerCapture?.(evt.pointerId);
+        setCurrentStrokes([]);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      }
+    }),
+    [
+      pageWidthPDF,
+      pageHeightPDF,
+      currentStrokes,
+      annotationProvides,
+      pageIndex,
+      toolColor,
+      toolOpacity,
+      toolStrokeWidth,
+      isDrawing
+    ]
+  );
+  useEffect4(() => {
+    if (!register) return;
+    return register(handlers);
+  }, [register, handlers]);
+  useEffect4(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  if (!currentStrokes.length) return null;
+  const allPoints = currentStrokes.flatMap((s) => s.points);
+  if (!allPoints.length) return null;
+  const minX = Math.min(...allPoints.map((p) => p.x));
+  const minY = Math.min(...allPoints.map((p) => p.y));
+  const maxX = Math.max(...allPoints.map((p) => p.x));
+  const maxY = Math.max(...allPoints.map((p) => p.y));
+  const halfStroke = MAX_STROKE_WIDTH / 2;
+  const svgMinX = minX - halfStroke;
+  const svgMinY = minY - halfStroke;
+  const svgMaxX = maxX + halfStroke;
+  const svgMaxY = maxY + halfStroke;
+  const dw = svgMaxX - svgMinX;
+  const dh = svgMaxY - svgMinY;
+  const paths = currentStrokes.map(({ points }) => {
+    let d = "";
+    points.forEach(({ x, y }, i) => {
+      const lx = x - svgMinX;
+      const ly = y - svgMinY;
+      d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+    });
+    return d.trim();
+  });
+  return /* @__PURE__ */ jsx9(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: svgMinX * scale,
+        top: svgMinY * scale,
+        width: dw * scale,
+        height: dh * scale,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: dw * scale,
+      height: dh * scale,
+      viewBox: `0 0 ${dw} ${dh}`,
+      children: paths.map((d, i) => /* @__PURE__ */ jsx9(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: toolColor,
+          strokeWidth: toolStrokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          opacity: toolOpacity
+        },
+        i
+      ))
+    }
+  );
+};
+
+// src/preact/components/annotation-layer.tsx
+import { jsx as jsx10, jsxs as jsxs2 } from "preact/jsx-runtime";
+function AnnotationLayer({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  rotation,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
         ...style
       },
       ...props,
-      children: annotations.map((annotation) => {
-        const isSelected = selectionState.selectedPageIndex === pageIndex && selectionState.selectedAnnotationId === annotation.id;
-        switch (annotation.type) {
-          case PdfAnnotationSubtype.HIGHLIGHT:
-            return /* @__PURE__ */ jsx2(
-              HighlightAnnotation,
-              {
-                annotation,
-                scale,
-                isSelected,
-                pageIndex
-              },
-              annotation.id
-            );
-          default:
-            return null;
-        }
-      })
+      children: [
+        /* @__PURE__ */ jsx10(Annotations, { pageIndex, scale, rotation }),
+        /* @__PURE__ */ jsx10(TextMarkup, { pageIndex, scale }),
+        /* @__PURE__ */ jsx10(InkPaint, { pageIndex, scale, pageWidth, pageHeight })
+      ]
     }
   );
 }