@embedpdf/plugin-annotation 1.1.0 → 1.2.0

package/dist/preact/index.js

@@ -1,325 +1,16 @@
 import { usePlugin, useCapability } from "@embedpdf/core/preact";
 import { AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
-import { jsx, jsxs, Fragment as Fragment$1 } from "preact/jsx-runtime";
-import { restoreOffset, rectEquals, PdfAnnotationBorderStyle, PdfAnnotationSubtype, expandRect, rectFromPoints, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, uuidV4 } from "@embedpdf/models";
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/preact";
-import { Fragment } from "preact";
-import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "preact/hooks";
-import { CounterRotate } from "@embedpdf/utils/preact";
-import { clamp } from "@embedpdf/core";
+import { Fragment as Fragment$1 } from "preact";
+import { useState, useRef, useEffect, useMemo, useLayoutEffect, useCallback } from "preact/hooks";
+import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/preact";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
-const mapDoubleClick = (handler) => handler ? { onDblClick: handler } : {};
-function VertexEditor({
-  rect,
-  rotation,
-  scale,
-  vertices,
-  onEdit,
-  onCommit,
-  handleSize = 12
-}) {
-  const [dragIdx, setDragIdx] = useState(null);
-  const startScreen = useRef(null);
-  const startVerts = useRef([]);
-  const applyDelta = (deltaScreen) => {
-    const deltaPdf = restoreOffset(deltaScreen, rotation, scale);
-    const next = [...startVerts.current];
-    if (dragIdx !== null) {
-      next[dragIdx] = {
-        x: next[dragIdx].x + deltaPdf.x,
-        y: next[dragIdx].y + deltaPdf.y
-      };
-    }
-    return next;
-  };
-  const handleDown = (idx) => (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setDragIdx(idx);
-    startScreen.current = { x: e.clientX, y: e.clientY };
-    startVerts.current = vertices;
-    e.target.setPointerCapture(e.pointerId);
-  };
-  const handleMove = (e) => {
-    if (dragIdx === null || !startScreen.current) return;
-    const deltaRaw = {
-      x: e.clientX - startScreen.current.x,
-      y: e.clientY - startScreen.current.y
-    };
-    onEdit(applyDelta(deltaRaw));
-  };
-  const handleUp = (e) => {
-    if (dragIdx === null || !startScreen.current) return;
-    e.target.releasePointerCapture(e.pointerId);
-    const deltaRaw = {
-      x: e.clientX - startScreen.current.x,
-      y: e.clientY - startScreen.current.y
-    };
-    onCommit(applyDelta(deltaRaw));
-    setDragIdx(null);
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: vertices.map((v, i) => {
-    const left = (v.x - rect.origin.x) * scale - handleSize / 2;
-    const top = (v.y - rect.origin.y) * scale - handleSize / 2;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left,
-          top,
-          width: handleSize,
-          height: handleSize,
-          borderRadius: "50%",
-          background: "#2196f3",
-          cursor: "pointer",
-          pointerEvents: "auto",
-          zIndex: 4
-        },
-        onPointerDown: handleDown(i),
-        onPointerMove: handleMove,
-        onPointerUp: handleUp
-      },
-      i
-    );
-  }) });
-}
-function useDragResize({
-  scale,
-  pageWidth,
-  pageHeight,
-  rotation,
-  tracked,
-  isSelected,
-  isDraggable,
-  isResizable,
-  computePatch,
-  computeVertices,
-  lockAspectRatio = false,
-  currentRect,
-  setCurrentRect,
-  setCurrentVertices,
-  setPreviewObject,
-  commit
-}) {
-  const drag = useRef("idle");
-  const dir = useRef("none");
-  const startPos = useRef(null);
-  const startRect = useRef(null);
-  const clamp2 = (v, min, max) => Math.max(min, Math.min(max, v));
-  const pageW = pageWidth / scale;
-  const pageH = pageHeight / scale;
-  const applyDelta = (dx, dy) => {
-    if (!startRect.current) return currentRect;
-    let { origin, size } = startRect.current;
-    let ox = origin.x;
-    let oy = origin.y;
-    let w = size.width;
-    let h = size.height;
-    if (drag.current === "dragging") {
-      ox += dx;
-      oy += dy;
-    } else if (drag.current === "resizing") {
-      if (dir.current.includes("right")) w += dx;
-      else if (dir.current.includes("left")) {
-        ox += dx;
-        w -= dx;
-      }
-      if (dir.current.includes("bottom")) h += dy;
-      else if (dir.current.includes("top")) {
-        oy += dy;
-        h -= dy;
-      }
-      if (lockAspectRatio && startRect.current) {
-        const ratio = startRect.current.size.width / startRect.current.size.height;
-        const anchorRight = ox + w;
-        const anchorBottom = oy + h;
-        const horizontalPrimary = dir.current.includes("left") || dir.current.includes("right");
-        if (horizontalPrimary) {
-          h = w / ratio;
-        } else {
-          w = h * ratio;
-        }
-        if (dir.current.includes("left")) {
-          ox = anchorRight - w;
-        }
-        if (dir.current.includes("top")) {
-          oy = anchorBottom - h;
-        }
-      }
-    }
-    if (w < 1 || h < 1) return currentRect;
-    w = clamp2(w, 1, pageW);
-    h = clamp2(h, 1, pageH);
-    ox = clamp2(ox, 0, pageW - w);
-    oy = clamp2(oy, 0, pageH - h);
-    return { origin: { x: ox, y: oy }, size: { width: w, height: h } };
-  };
-  const beginDrag = (kind, clientX, clientY) => {
-    drag.current = kind;
-    startPos.current = { x: clientX, y: clientY };
-    startRect.current = currentRect;
-  };
-  const handleMove = (clientX, clientY) => {
-    if (drag.current === "idle" || !startPos.current) return;
-    const disp = {
-      x: clientX - startPos.current.x,
-      y: clientY - startPos.current.y
-    };
-    const { x, y } = restoreOffset(disp, rotation, scale);
-    const nextRect = applyDelta(x, y);
-    let patch = { rect: nextRect };
-    if (computePatch) {
-      patch = computePatch(tracked.object, {
-        rect: nextRect,
-        direction: drag.current === "resizing" ? dir.current : "bottom-right"
-      });
-      if (computeVertices) setCurrentVertices(computeVertices({ ...tracked.object, ...patch }));
-    }
-    setCurrentRect(patch.rect ?? nextRect);
-    setPreviewObject(patch);
-  };
-  const finishDragInternal = () => {
-    if (drag.current === "idle") return;
-    const usedDir = dir.current || "bottom-right";
-    drag.current = "idle";
-    let patch = { rect: currentRect };
-    if (computePatch) {
-      patch = computePatch(tracked.object, {
-        rect: currentRect,
-        direction: usedDir
-      });
-    }
-    commit(patch);
-    startPos.current = null;
-    startRect.current = null;
-    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();
-    dir.current = direction;
-    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";
-    startPos.current = null;
-    startRect.current = null;
-  }, [tracked]);
-  return {
-    rootHandlers: {
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onPointerCancel: () => onPointerUp(),
-      onLostPointerCapture: () => onPointerUp(),
-      /* mobile touch fallback */
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      onTouchCancel: onTouchEnd
-    },
-    startResize
-  };
-}
-const commonStyle = (o) => ({
-  position: "absolute",
-  width: 13,
-  height: 13,
-  background: "blue",
-  borderRadius: "50%"
-});
-function ResizeHandles({ rotation, outlineOffset = 1, startResize }) {
-  const o = outlineOffset;
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          ...commonStyle(),
-          top: -7 - o,
-          left: -7 - o,
-          cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
-        },
-        onPointerDown: startResize("top-left")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          ...commonStyle(),
-          top: -7 - o,
-          right: -7 - o,
-          cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
-        },
-        onPointerDown: startResize("top-right")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          ...commonStyle(),
-          bottom: -7 - o,
-          left: -7 - o,
-          cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
-        },
-        onPointerDown: startResize("bottom-left")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          ...commonStyle(),
-          bottom: -7 - o,
-          right: -7 - o,
-          cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
-        },
-        onPointerDown: startResize("bottom-right")
-      }
-    )
-  ] });
-}
+const suppressContentEditableWarningProps = {};
 function AnnotationContainer({
   scale,
   pageIndex,
@@ -328,111 +19,135 @@ function AnnotationContainer({
   pageHeight,
   trackedAnnotation,
   children,
-  style,
-  outlineOffset = 1,
-  isSelected = false,
-  isDraggable = true,
-  isResizable = true,
+  isSelected,
+  isDraggable,
+  isResizable,
   lockAspectRatio = false,
-  computeVertices,
-  computePatch,
+  style = {},
+  vertexConfig,
   selectionMenu,
+  outlineOffset = 1,
   onDoubleClick,
+  zIndex = 1,
+  resizeUI,
+  vertexUI,
+  selectionOutlineColor = "#007ACC",
   ...props
 }) {
+  const [preview, setPreview] = useState(trackedAnnotation.object);
   const { provides: annotationProvides } = useAnnotationCapability();
-  const [currentRect, setCurrentRect] = useState(trackedAnnotation.object.rect);
-  const [currentVertices, setCurrentVertices] = useState(
-    (computeVertices == null ? void 0 : computeVertices(trackedAnnotation.object)) ?? []
-  );
-  const [previewObject, setPreviewObject] = useState(null);
-  const { rootHandlers, startResize } = useDragResize({
-    scale,
-    pageWidth,
-    pageHeight,
-    rotation,
-    tracked: trackedAnnotation,
-    isSelected,
-    isDraggable,
-    isResizable,
-    lockAspectRatio,
-    computePatch,
-    computeVertices,
-    currentRect,
-    setCurrentRect,
-    setCurrentVertices,
-    setPreviewObject,
-    commit: (patch) => annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.object.id, patch)
+  const gestureBaseRef = useRef(null);
+  const currentObject = preview ? { ...trackedAnnotation.object, ...preview } : trackedAnnotation.object;
+  const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
+  const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
+  const HANDLE_SIZE = (resizeUI == null ? void 0 : resizeUI.size) ?? 12;
+  const VERTEX_SIZE = (vertexUI == null ? void 0 : vertexUI.size) ?? 12;
+  const { dragProps, vertices, resize } = useInteractionHandles({
+    controller: {
+      element: currentObject.rect,
+      vertices: vertexConfig == null ? void 0 : vertexConfig.extractVertices(currentObject),
+      constraints: {
+        minWidth: 10,
+        minHeight: 10,
+        boundingBox: { width: pageWidth / scale, height: pageHeight / scale }
+      },
+      maintainAspectRatio: lockAspectRatio,
+      pageRotation: rotation,
+      scale,
+      enabled: isSelected,
+      onUpdate: (event) => {
+        var _a;
+        if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+        if (event.state === "start") {
+          gestureBaseRef.current = currentObject;
+        }
+        const transformType = event.transformData.type;
+        const base = gestureBaseRef.current ?? currentObject;
+        const changes = event.transformData.changes.vertices ? vertexConfig == null ? void 0 : vertexConfig.transformAnnotation(base, event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
+        const patched = annotationProvides == null ? void 0 : annotationProvides.transformAnnotation(base, {
+          type: transformType,
+          changes,
+          metadata: event.transformData.metadata
+        });
+        if (patched) {
+          setPreview((prev) => ({
+            ...prev,
+            ...patched
+          }));
+        }
+        if (event.state === "end" && patched) {
+          gestureBaseRef.current = null;
+          annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.object.id, patched);
+        }
+      }
+    },
+    resizeUI: {
+      handleSize: HANDLE_SIZE,
+      spacing: outlineOffset,
+      offsetMode: "outside",
+      includeSides: lockAspectRatio ? false : true,
+      zIndex: zIndex + 1
+    },
+    vertexUI: {
+      vertexSize: VERTEX_SIZE,
+      zIndex: zIndex + 2
+    },
+    includeVertices: vertexConfig ? true : false
   });
-  useLayoutEffect(() => {
-    if (!rectEquals(trackedAnnotation.object.rect, currentRect)) {
-      setCurrentRect(trackedAnnotation.object.rect);
-      setPreviewObject((prev) => prev ? { ...prev, rect: trackedAnnotation.object.rect } : null);
-      setCurrentVertices((computeVertices == null ? void 0 : computeVertices(trackedAnnotation.object)) ?? []);
-    }
-  }, [trackedAnnotation]);
-  const currentObject = previewObject ? { ...trackedAnnotation.object, ...previewObject } : trackedAnnotation.object;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const doubleProps = useDoublePressProps(onDoubleClick);
+  useEffect(() => {
+    setPreview(trackedAnnotation.object);
+  }, [trackedAnnotation.object]);
+  return /* @__PURE__ */ jsxs("div", { "data-no-interaction": true, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ...rootHandlers,
-        ...mapDoubleClick(onDoubleClick),
+        ...isDraggable && isSelected ? dragProps : {},
+        ...doubleProps,
         style: {
           position: "absolute",
-          outline: isSelected ? "1px solid #007ACC" : "none",
+          left: currentObject.rect.origin.x * scale,
+          top: currentObject.rect.origin.y * scale,
+          width: currentObject.rect.size.width * scale,
+          height: currentObject.rect.size.height * scale,
+          outline: isSelected ? `1px solid ${selectionOutlineColor}` : "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",
-          touchAction: isSelected ? "auto" : "none",
+          touchAction: "none",
           cursor: isSelected && isDraggable ? "move" : "default",
-          ...isSelected && {
-            zIndex: 3
-          },
+          zIndex,
           ...style
         },
         ...props,
         children: [
           typeof children === "function" ? children(currentObject) : children,
-          isSelected && currentVertices.length > 0 && /* @__PURE__ */ jsx(
-            VertexEditor,
-            {
-              rect: currentRect,
-              rotation,
-              scale,
-              vertices: currentVertices,
-              onEdit: (v) => {
-                setCurrentVertices(v);
-                if (computePatch) {
-                  const patch = computePatch(trackedAnnotation.object, {
-                    rect: currentRect,
-                    vertices: v
-                  });
-                  setPreviewObject(patch);
-                  setCurrentRect(patch.rect || currentRect);
-                }
+          isSelected && isResizable && resize.map(
+            ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
+              key,
+              ...hProps,
+              backgroundColor: HANDLE_COLOR
+            }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...hProps,
+                style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
               },
-              onCommit: (v) => {
-                if (annotationProvides && computePatch) {
-                  const patch = computePatch(trackedAnnotation.object, {
-                    rect: currentRect,
-                    vertices: v
-                  });
-                  annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.object.id, patch);
-                }
-              }
-            }
+              key
+            )
           ),
-          isSelected && isResizable && /* @__PURE__ */ jsx(
-            ResizeHandles,
-            {
-              rotation,
-              outlineOffset,
-              startResize
-            }
+          isSelected && vertices.map(
+            ({ key, ...vProps }) => (vertexUI == null ? void 0 : vertexUI.component) ? vertexUI.component({
+              key,
+              ...vProps,
+              backgroundColor: VERTEX_COLOR
+            }) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...vProps,
+                style: { ...vProps.style, backgroundColor: VERTEX_COLOR }
+              },
+              key
+            )
           )
         ]
       }
@@ -441,8 +156,14 @@ function AnnotationContainer({
       CounterRotate,
       {
         rect: {
-          origin: { x: currentRect.origin.x * scale, y: currentRect.origin.y * scale },
-          size: { width: currentRect.size.width * scale, height: currentRect.size.height * scale }
+          origin: {
+            x: currentObject.rect.origin.x * scale,
+            y: currentObject.rect.origin.y * scale
+          },
+          size: {
+            width: currentObject.rect.size.width * scale,
+            height: currentObject.rect.size.height * scale
+          }
         },
         rotation,
         children: ({ rect, menuWrapperProps }) => selectionMenu && selectionMenu({
@@ -458,14 +179,14 @@ function AnnotationContainer({
 function Highlight({
   color = "#FFFF00",
   opacity = 0.5,
-  rects,
+  segmentRects,
   rect,
   scale,
   onClick,
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((b, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onPointerDown: onClick,
@@ -491,7 +212,7 @@ function Highlight({
 function Underline({
   color = "#FFFF00",
   opacity = 0.5,
-  rects,
+  segmentRects,
   rect,
   scale,
   onClick,
@@ -499,7 +220,7 @@ function Underline({
   ...props
 }) {
   const thickness = 2 * scale;
-  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onPointerDown: onClick,
@@ -539,7 +260,7 @@ function Underline({
 function Strikeout({
   color = "#FFFF00",
   opacity = 0.5,
-  rects,
+  segmentRects,
   rect,
   scale,
   onClick,
@@ -547,7 +268,7 @@ function Strikeout({
   ...props
 }) {
   const thickness = 2 * scale;
-  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onPointerDown: onClick,
@@ -588,7 +309,7 @@ function Strikeout({
 function Squiggly({
   color = "#FFFF00",
   opacity = 0.5,
-  rects,
+  segmentRects,
   rect,
   scale,
   onClick,
@@ -602,7 +323,7 @@ function Squiggly({
             fill="none" stroke="${color}" stroke-width="${amplitude}" stroke-linecap="round"/>
     </svg>`;
   const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
-  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onPointerDown: onClick,
@@ -831,48 +552,6 @@ function Circle({
     }
   );
 }
-const patchInk = (original, ctx) => {
-  if (original.type !== PdfAnnotationSubtype.INK) {
-    throw new Error("resizeInkAnnotation: original is not an ink annotation");
-  }
-  const oldRect = original.rect;
-  let scaleX = ctx.rect.size.width / oldRect.size.width;
-  let scaleY = ctx.rect.size.height / oldRect.size.height;
-  const minSize = 10;
-  if (ctx.rect.size.width < minSize || ctx.rect.size.height < minSize) {
-    scaleX = Math.max(scaleX, minSize / oldRect.size.width);
-    scaleY = Math.max(scaleY, minSize / oldRect.size.height);
-    ctx.rect = {
-      origin: ctx.rect.origin,
-      size: {
-        width: oldRect.size.width * scaleX,
-        height: oldRect.size.height * scaleY
-      }
-    };
-  }
-  if (ctx.uniform) {
-    const minScale = Math.min(scaleX, scaleY);
-    scaleX = minScale;
-    scaleY = minScale;
-    ctx.rect.size = {
-      width: oldRect.size.width * minScale,
-      height: oldRect.size.height * minScale
-    };
-  }
-  const newInkList = original.inkList.map((stroke) => ({
-    points: stroke.points.map((p) => ({
-      x: ctx.rect.origin.x + (p.x - oldRect.origin.x) * scaleX,
-      y: ctx.rect.origin.y + (p.y - oldRect.origin.y) * scaleY
-    }))
-  }));
-  const avgScale = (scaleX + scaleY) / 2;
-  const newStrokeWidth = Math.round(original.strokeWidth * avgScale);
-  return {
-    rect: ctx.rect,
-    inkList: newInkList,
-    strokeWidth: newStrokeWidth
-  };
-};
 function Line({
   color = "transparent",
   opacity = 1,
@@ -1009,13 +688,13 @@ function Polyline({
   const endings = useMemo(() => {
     if (localPts.length < 2) return { start: null, end: null };
     const toAngle = (a, b) => Math.atan2(b.y - a.y, b.x - a.x);
-    const startRad = toAngle(localPts[1], localPts[0]);
+    const startRad = toAngle(localPts[0], localPts[1]);
     const endRad = toAngle(localPts[localPts.length - 2], localPts[localPts.length - 1]);
     const start = patching.createEnding(
       lineEndings == null ? void 0 : lineEndings.start,
       strokeWidth,
       startRad + Math.PI,
-      // tip points outward from first segment start
+      // tip points outward from line start
       localPts[0].x,
       localPts[0].y
     );
@@ -1023,6 +702,7 @@ function Polyline({
       lineEndings == null ? void 0 : lineEndings.end,
       strokeWidth,
       endRad,
+      // tip points in line direction
       localPts[localPts.length - 1].x,
       localPts[localPts.length - 1].y
     );
@@ -1112,20 +792,27 @@ function Polygon({
   strokeDashArray,
   scale,
   isSelected,
-  onClick
+  onClick,
+  currentVertex,
+  // A preview-only prop
+  handleSize = 14
+  // in CSS pixels
 }) {
+  const allPoints = currentVertex ? [...vertices, currentVertex] : vertices;
   const localPts = useMemo(
-    () => vertices.map(({ x, y }) => ({ x: x - rect.origin.x, y: y - rect.origin.y })),
-    [vertices, rect]
+    () => allPoints.map(({ x, y }) => ({ x: x - rect.origin.x, y: y - rect.origin.y })),
+    [allPoints, rect]
   );
   const pathData = useMemo(() => {
     if (!localPts.length) return "";
     const [first, ...rest] = localPts;
-    return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y} `).join("") + "Z").trim();
-  }, [localPts]);
+    const isPreview = !!currentVertex;
+    return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
+  }, [localPts, currentVertex]);
+  const isPreviewing = currentVertex && vertices.length > 0;
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       style: {
@@ -1139,79 +826,54 @@ function Polygon({
       width,
       height,
       viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: pathData,
-          onPointerDown: onClick,
-          onTouchStart: onClick,
-          opacity,
-          style: {
-            fill: color,
-            stroke: strokeColor ?? color,
-            strokeWidth,
-            cursor: isSelected ? "move" : "pointer",
-            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
-            strokeLinecap: "butt",
-            strokeLinejoin: "miter",
-            ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-              strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pathData,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
+            opacity,
+            style: {
+              fill: currentVertex ? "none" : color,
+              // No fill during preview
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
+              strokeLinecap: "butt",
+              strokeLinejoin: "miter",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+              }
             }
           }
-        }
-      )
+        ),
+        isPreviewing && vertices.length > 1 && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${localPts[localPts.length - 1].x} ${localPts[localPts.length - 1].y} L ${localPts[0].x} ${localPts[0].y}`,
+            fill: "none",
+            style: { stroke: strokeColor, strokeWidth, strokeDasharray: "4,4", opacity: 0.7 }
+          }
+        ),
+        isPreviewing && vertices.length >= 2 && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: localPts[0].x - handleSize / scale / 2,
+            y: localPts[0].y - handleSize / scale / 2,
+            width: handleSize / scale,
+            height: handleSize / scale,
+            fill: strokeColor,
+            opacity: 0.4,
+            stroke: strokeColor,
+            strokeWidth: strokeWidth / 2
+          }
+        )
+      ]
     }
   );
 }
-const patchLine = (orig, ctx) => {
-  if (ctx.vertices && ctx.vertices.length >= 2) {
-    const rect = patching.lineRectWithEndings(ctx.vertices, orig.strokeWidth, orig.lineEndings);
-    return {
-      rect,
-      linePoints: { start: ctx.vertices[0], end: ctx.vertices[1] }
-    };
-  }
-  const dx = ctx.rect.origin.x - orig.rect.origin.x;
-  const dy = ctx.rect.origin.y - orig.rect.origin.y;
-  return {
-    rect: ctx.rect,
-    linePoints: {
-      start: { x: orig.linePoints.start.x + dx, y: orig.linePoints.start.y + dy },
-      end: { x: orig.linePoints.end.x + dx, y: orig.linePoints.end.y + dy }
-    }
-  };
-};
-const patchPolyline = (orig, ctx) => {
-  if (ctx.vertices && ctx.vertices.length) {
-    return {
-      rect: patching.lineRectWithEndings(ctx.vertices, orig.strokeWidth, orig.lineEndings),
-      vertices: ctx.vertices
-    };
-  }
-  const dx = ctx.rect.origin.x - orig.rect.origin.x;
-  const dy = ctx.rect.origin.y - orig.rect.origin.y;
-  const moved = orig.vertices.map((p) => ({ x: p.x + dx, y: p.y + dy }));
-  return {
-    rect: ctx.rect,
-    vertices: moved
-  };
-};
-const patchPolygon = (orig, ctx) => {
-  if (ctx.vertices && ctx.vertices.length) {
-    const pad = orig.strokeWidth / 2;
-    return {
-      rect: expandRect(rectFromPoints(ctx.vertices), pad),
-      vertices: ctx.vertices
-    };
-  }
-  const dx = ctx.rect.origin.x - orig.rect.origin.x;
-  const dy = ctx.rect.origin.y - orig.rect.origin.y;
-  const moved = orig.vertices.map((p) => ({ x: p.x + dx, y: p.y + dy }));
-  return {
-    rect: ctx.rect,
-    vertices: moved
-  };
-};
 function FreeText({
   isSelected,
   isEditing,
@@ -1222,6 +884,7 @@ function FreeText({
 }) {
   const editorRef = useRef(null);
   const { provides: annotationProvides } = useAnnotationCapability();
+  const [isIOS, setIsIOS] = useState(false);
   useEffect(() => {
     if (isEditing && editorRef.current) {
       const editor = editorRef.current;
@@ -1236,6 +899,15 @@ function FreeText({
       }
     }
   }, [isEditing]);
+  useLayoutEffect(() => {
+    try {
+      const nav = navigator;
+      const ios = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
+      setIsIOS(ios);
+    } catch {
+      setIsIOS(false);
+    }
+  }, []);
   const handleBlur = () => {
     if (!annotationProvides) return;
     if (!editorRef.current) return;
@@ -1243,6 +915,12 @@ function FreeText({
       contents: editorRef.current.innerText
     });
   };
+  const computedFontPx = annotation.object.fontSize * scale;
+  const MIN_IOS_FOCUS_FONT_PX = 16;
+  const needsComp = isIOS && isEditing && computedFontPx > 0 && computedFontPx < MIN_IOS_FOCUS_FONT_PX;
+  const adjustedFontPx = needsComp ? MIN_IOS_FOCUS_FONT_PX : computedFontPx;
+  const scaleComp = needsComp ? computedFontPx / MIN_IOS_FOCUS_FONT_PX : 1;
+  const invScalePercent = needsComp ? 100 / scaleComp : 100;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1261,9 +939,10 @@ function FreeText({
         {
           ref: editorRef,
           onBlur: handleBlur,
+          tabIndex: 0,
           style: {
             color: annotation.object.fontColor,
-            fontSize: annotation.object.fontSize * scale,
+            fontSize: adjustedFontPx,
             fontFamily: standardFontCss(annotation.object.fontFamily),
             textAlign: textAlignmentToCss(annotation.object.textAlign),
             flexDirection: "column",
@@ -1271,13 +950,17 @@ function FreeText({
             display: "flex",
             backgroundColor: annotation.object.backgroundColor,
             opacity: annotation.object.opacity,
-            width: "100%",
-            height: "100%",
+            width: needsComp ? `${invScalePercent}%` : "100%",
+            height: needsComp ? `${invScalePercent}%` : "100%",
             lineHeight: "1.18",
             overflow: "hidden",
-            cursor: isEditing ? "text" : "pointer"
+            cursor: isEditing ? "text" : "pointer",
+            outline: "none",
+            transform: needsComp ? `scale(${scaleComp})` : void 0,
+            transformOrigin: "top left"
           },
           contentEditable: isEditing,
+          ...suppressContentEditableWarningProps,
           children: annotation.object.contents
         }
       )
@@ -1329,7 +1012,7 @@ function RenderAnnotation({
       urlRef.current = null;
     }
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: imageUrl && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment$1, { children: imageUrl && /* @__PURE__ */ jsx(
     "img",
     {
       src: imageUrl,
@@ -1400,15 +1083,17 @@ function Annotations(annotationsProps) {
       if (annotationProvides && selectionProvides) {
         annotationProvides.selectAnnotation(pageIndex, annotation.object.id);
         selectionProvides.clear();
-        setEditingId(null);
+        if (annotation.object.id !== editingId) {
+          setEditingId(null);
+        }
       }
     },
-    [annotationProvides, selectionProvides, pageIndex]
+    [annotationProvides, selectionProvides, editingId, pageIndex]
   );
   useEffect(() => {
     return register(handlers);
   }, [register, handlers]);
-  return /* @__PURE__ */ jsx(Fragment$1, { children: annotations.map((annotation) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((annotation) => {
     const isSelected = (selectionState == null ? void 0 : selectionState.object.id) === annotation.object.id;
     const isEditing = editingId === annotation.object.id;
     if (isInk(annotation)) {
@@ -1420,7 +1105,6 @@ function Annotations(annotationsProps) {
           isDraggable: true,
           isResizable: true,
           selectionMenu,
-          computePatch: patchInk,
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
@@ -1428,12 +1112,8 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Ink,
             {
+              ...obj,
               isSelected,
-              color: obj.color,
-              opacity: obj.opacity,
-              strokeWidth: obj.strokeWidth,
-              inkList: obj.inkList,
-              rect: obj.rect,
               scale,
               onClick: (e) => handleClick(e, annotation)
             }
@@ -1458,14 +1138,8 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Square,
             {
+              ...obj,
               isSelected,
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              strokeWidth: obj.strokeWidth,
-              strokeColor: obj.strokeColor,
-              strokeStyle: obj.strokeStyle,
-              strokeDashArray: obj.strokeDashArray,
               scale,
               onClick: (e) => handleClick(e, annotation)
             }
@@ -1490,14 +1164,8 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Circle,
             {
+              ...obj,
               isSelected,
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              strokeWidth: obj.strokeWidth,
-              strokeColor: obj.strokeColor,
-              strokeStyle: obj.strokeStyle,
-              strokeDashArray: obj.strokeDashArray,
               scale,
               onClick: (e) => handleClick(e, annotation)
             }
@@ -1515,21 +1183,12 @@ function Annotations(annotationsProps) {
           isDraggable: false,
           isResizable: false,
           selectionMenu,
+          zIndex: 0,
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Underline,
-            {
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              rects: obj.segmentRects,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
+          children: (obj) => /* @__PURE__ */ jsx(Underline, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
         },
         annotation.object.id
       );
@@ -1543,21 +1202,12 @@ function Annotations(annotationsProps) {
           isDraggable: false,
           isResizable: false,
           selectionMenu,
+          zIndex: 0,
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Strikeout,
-            {
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              rects: obj.segmentRects,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
+          children: (obj) => /* @__PURE__ */ jsx(Strikeout, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
         },
         annotation.object.id
       );
@@ -1571,21 +1221,12 @@ function Annotations(annotationsProps) {
           isDraggable: false,
           isResizable: false,
           selectionMenu,
+          zIndex: 0,
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Squiggly,
-            {
-              color: obj.color,
-              opacity: obj.opacity,
-              rects: obj.segmentRects,
-              rect: obj.rect,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
+          children: (obj) => /* @__PURE__ */ jsx(Squiggly, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
         },
         annotation.object.id
       );
@@ -1599,21 +1240,12 @@ function Annotations(annotationsProps) {
           isDraggable: false,
           isResizable: false,
           selectionMenu,
+          zIndex: 0,
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Multiply)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Highlight,
-            {
-              color: obj.color,
-              opacity: obj.opacity,
-              rects: obj.segmentRects,
-              scale,
-              rect: obj.rect,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
+          children: (obj) => /* @__PURE__ */ jsx(Highlight, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
         },
         annotation.object.id
       );
@@ -1627,28 +1259,30 @@ function Annotations(annotationsProps) {
           isDraggable: true,
           isResizable: false,
           selectionMenu,
-          computePatch: patchLine,
-          computeVertices: (annotation2) => [
-            annotation2.linePoints.start,
-            annotation2.linePoints.end
-          ],
+          vertexConfig: {
+            extractVertices: (annotation2) => [
+              annotation2.linePoints.start,
+              annotation2.linePoints.end
+            ],
+            transformAnnotation: (annotation2, vertices) => {
+              return {
+                ...annotation2,
+                linePoints: {
+                  start: vertices[0],
+                  end: vertices[1]
+                }
+              };
+            }
+          },
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
             Line,
             {
+              ...obj,
               isSelected,
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              linePoints: obj.linePoints,
-              lineEndings: obj.lineEndings,
-              strokeWidth: obj.strokeWidth,
-              strokeColor: obj.strokeColor,
-              strokeStyle: obj.strokeStyle,
-              strokeDashArray: obj.strokeDashArray,
               scale,
               onClick: (e) => handleClick(e, annotation)
             }
@@ -1666,23 +1300,24 @@ function Annotations(annotationsProps) {
           isDraggable: true,
           isResizable: false,
           selectionMenu,
-          computePatch: patchPolyline,
-          computeVertices: (annotation2) => annotation2.vertices,
+          vertexConfig: {
+            extractVertices: (annotation2) => annotation2.vertices,
+            transformAnnotation: (annotation2, vertices) => {
+              return {
+                ...annotation2,
+                vertices
+              };
+            }
+          },
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
             Polyline,
             {
+              ...obj,
               isSelected,
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              vertices: obj.vertices,
-              lineEndings: obj.lineEndings,
-              strokeWidth: obj.strokeWidth,
-              strokeColor: obj.strokeColor,
               scale,
               onClick: (e) => handleClick(e, annotation)
             }
@@ -1700,24 +1335,24 @@ function Annotations(annotationsProps) {
           isDraggable: true,
           isResizable: false,
           selectionMenu,
-          computeVertices: (annotation2) => annotation2.vertices,
-          computePatch: patchPolygon,
+          vertexConfig: {
+            extractVertices: (annotation2) => annotation2.vertices,
+            transformAnnotation: (annotation2, vertices) => {
+              return {
+                ...annotation2,
+                vertices
+              };
+            }
+          },
           style: {
             mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
           ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
             Polygon,
             {
+              ...obj,
               isSelected,
-              rect: obj.rect,
-              color: obj.color,
-              opacity: obj.opacity,
-              vertices: obj.vertices,
-              strokeWidth: obj.strokeWidth,
-              strokeColor: obj.strokeColor,
-              strokeStyle: obj.strokeStyle,
-              strokeDashArray: obj.strokeDashArray,
               scale,
               onClick: (e) => handleClick(e, annotation)
             }
@@ -1732,17 +1367,16 @@ function Annotations(annotationsProps) {
         {
           trackedAnnotation: annotation,
           isSelected,
-          isDraggable: true,
+          isDraggable: !isEditing,
           isResizable: true,
           selectionMenu,
-          outlineOffset: 6,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
           onDoubleClick: (e) => {
             e.stopPropagation();
             setEditingId(annotation.object.id);
           },
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-          },
           ...annotationsProps,
           children: (object) => /* @__PURE__ */ jsx(
             FreeText,
@@ -1799,7 +1433,7 @@ function TextMarkup({ pageIndex, scale }) {
   const { provides: annotationProvides } = useAnnotationCapability();
   const [rects, setRects] = useState([]);
   const [boundingRect, setBoundingRect] = useState(null);
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  const [activeTool, setActiveTool] = useState(null);
   useEffect(() => {
     if (!selectionProvides) return;
     const off = selectionProvides.onSelectionChange(() => {
@@ -1814,8 +1448,8 @@ function TextMarkup({ pageIndex, scale }) {
     return off;
   }, [annotationProvides]);
   if (!boundingRect) return null;
-  if (!activeTool.defaults) return null;
-  switch (activeTool.defaults.subtype) {
+  if (!activeTool || !activeTool.defaults) return null;
+  switch (activeTool.defaults.type) {
     case PdfAnnotationSubtype.UNDERLINE:
       return /* @__PURE__ */ jsx(
         "div",
@@ -1831,7 +1465,7 @@ function TextMarkup({ pageIndex, scale }) {
             {
               color: (_b = activeTool.defaults) == null ? void 0 : _b.color,
               opacity: (_c = activeTool.defaults) == null ? void 0 : _c.opacity,
-              rects,
+              segmentRects: rects,
               scale
             }
           )
@@ -1852,7 +1486,7 @@ function TextMarkup({ pageIndex, scale }) {
             {
               color: (_e = activeTool.defaults) == null ? void 0 : _e.color,
               opacity: (_f = activeTool.defaults) == null ? void 0 : _f.opacity,
-              rects,
+              segmentRects: rects,
               scale
             }
           )
@@ -1873,7 +1507,7 @@ function TextMarkup({ pageIndex, scale }) {
             {
               color: (_h = activeTool.defaults) == null ? void 0 : _h.color,
               opacity: (_i = activeTool.defaults) == null ? void 0 : _i.opacity,
-              rects,
+              segmentRects: rects,
               scale
             }
           )
@@ -1894,7 +1528,7 @@ function TextMarkup({ pageIndex, scale }) {
             {
               color: (_k = activeTool.defaults) == null ? void 0 : _k.color,
               opacity: (_l = activeTool.defaults) == null ? void 0 : _l.opacity,
-              rects,
+              segmentRects: rects,
               scale
             }
           )
@@ -1904,1110 +1538,131 @@ function TextMarkup({ pageIndex, scale }) {
       return null;
   }
 }
-const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
-  var _a, _b, _c, _d, _e;
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => {
-    if (!annotationProvides) return;
-    const off = annotationProvides.onActiveToolChange(setActiveTool);
-    return off;
-  }, [annotationProvides]);
-  if (!activeTool.defaults) return null;
-  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.INK) return null;
-  const toolColor = ((_a = activeTool.defaults) == null ? void 0 : _a.color) ?? "#000000";
-  const toolOpacity = ((_b = activeTool.defaults) == null ? void 0 : _b.opacity) ?? 1;
-  const toolStrokeWidth = ((_c = activeTool.defaults) == null ? void 0 : _c.strokeWidth) ?? 2;
-  const toolBlendMode = ((_d = activeTool.defaults) == null ? void 0 : _d.blendMode) ?? PdfBlendMode.Normal;
-  const intent = (_e = activeTool.defaults) == null ? void 0 : _e.intent;
-  const { register } = usePointerHandlers({ modeId: "ink", pageIndex });
-  const [currentStrokes, setCurrentStrokes] = useState([]);
-  const [isDrawing, setIsDrawing] = useState(false);
-  const timerRef = useRef(null);
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a2;
-        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 }] }]);
-        }
-        (_a2 = evt.setPointerCapture) == null ? void 0 : _a2.call(evt);
-      },
-      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) => {
-        var _a2;
-        setIsDrawing(false);
-        (_a2 = evt.releasePointerCapture) == null ? void 0 : _a2.call(evt);
-        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 rect2 = expandRect(rectFromPoints(allPoints2), toolStrokeWidth / 2);
-            if (rect2.size.width < 1 || rect2.size.height < 1) return;
-            const anno = {
-              type: PdfAnnotationSubtype.INK,
-              intent,
-              blendMode: toolBlendMode,
-              rect: rect2,
-              inkList: currentStrokes,
-              color: toolColor,
-              opacity: toolOpacity,
-              strokeWidth: toolStrokeWidth,
-              created: /* @__PURE__ */ new Date(),
-              pageIndex,
-              id: uuidV4()
-            };
-            annotationProvides.createAnnotation(pageIndex, anno);
-            annotationProvides.setActiveVariant(null);
-            annotationProvides.selectAnnotation(pageIndex, anno.id);
-          }
-          setCurrentStrokes([]);
-          timerRef.current = null;
-        }, 3e3);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a2;
-        setIsDrawing(false);
-        (_a2 = evt.releasePointerCapture) == null ? void 0 : _a2.call(evt);
-        setCurrentStrokes([]);
-        if (timerRef.current) {
-          clearTimeout(timerRef.current);
-          timerRef.current = null;
-        }
-      }
-    }),
-    [
-      pageWidthPDF,
-      pageHeightPDF,
-      currentStrokes,
-      annotationProvides,
-      pageIndex,
-      toolColor,
-      toolOpacity,
-      toolStrokeWidth,
-      isDrawing
-    ]
-  );
-  useEffect(() => {
-    if (!register) return;
-    return register(handlers);
-  }, [register, handlers]);
-  useEffect(() => {
-    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 rect = expandRect(rectFromPoints(allPoints), toolStrokeWidth / 2);
-  const paths = currentStrokes.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();
-  });
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      style: {
-        position: "absolute",
-        left: rect.origin.x * scale,
-        top: rect.origin.y * scale,
-        width: rect.size.width * scale,
-        height: rect.size.height * scale,
-        pointerEvents: "none",
-        zIndex: 2
-      },
-      width: rect.size.width * scale,
-      height: rect.size.height * scale,
-      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
-      children: paths.map((d, i) => /* @__PURE__ */ jsx(
-        "path",
-        {
-          d,
-          fill: "none",
-          opacity: toolOpacity,
-          style: {
-            stroke: toolColor,
-            strokeWidth: toolStrokeWidth,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        },
-        i
-      ))
-    }
-  );
-};
-const CirclePaint = ({
-  pageIndex,
-  scale,
-  pageWidth,
-  pageHeight,
-  cursor
-}) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => {
-    if (!annotationProvides) return;
-    return annotationProvides.onActiveToolChange(setActiveTool);
-  }, [annotationProvides]);
-  if (!activeTool.defaults) return null;
-  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.CIRCLE) return null;
-  const toolColor = activeTool.defaults.color ?? "#000000";
-  const toolOpacity = activeTool.defaults.opacity ?? 1;
-  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
-  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
-  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
-  const toolStrokeDashArray = activeTool.defaults.strokeDashArray ?? [];
-  const { register } = usePointerHandlers({ modeId: "circle", pageIndex });
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [start, setStart] = useState(null);
-  const [current, setCurrent] = useState(null);
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setStart({ x, y });
-        setCurrent({ x, y });
-        (_a = evt.setPointerCapture) == null ? void 0 : _a.call(evt);
-      },
-      onPointerMove: (pos) => {
-        if (!start) return;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setCurrent({ x, y });
-      },
-      onPointerUp: (_, evt) => {
-        var _a;
-        if (start && current && annotationProvides) {
-          const minX2 = Math.min(start.x, current.x);
-          const minY2 = Math.min(start.y, current.y);
-          const maxX2 = Math.max(start.x, current.x);
-          const maxY2 = Math.max(start.y, current.y);
-          if (maxX2 - minX2 >= 1 && maxY2 - minY2 >= 1) {
-            const halfStroke2 = toolStrokeWidth / 2;
-            const rect = {
-              origin: { x: minX2 - halfStroke2, y: minY2 - halfStroke2 },
-              size: {
-                width: maxX2 - minX2 + toolStrokeWidth,
-                height: maxY2 - minY2 + toolStrokeWidth
-              }
-            };
-            const anno = {
-              type: PdfAnnotationSubtype.CIRCLE,
-              rect,
-              flags: ["print"],
-              color: toolColor,
-              opacity: toolOpacity,
-              strokeWidth: toolStrokeWidth,
-              strokeColor: toolStrokeColor,
-              strokeStyle: toolStrokeStyle,
-              strokeDashArray: toolStrokeDashArray,
-              created: /* @__PURE__ */ new Date(),
-              pageIndex,
-              id: uuidV4()
-            };
-            annotationProvides.createAnnotation(pageIndex, anno);
-            annotationProvides.setActiveVariant(null);
-            annotationProvides.selectAnnotation(pageIndex, anno.id);
-          }
-        }
-        (_a = evt.releasePointerCapture) == null ? void 0 : _a.call(evt);
-        setStart(null);
-        setCurrent(null);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a;
-        (_a = evt.releasePointerCapture) == null ? void 0 : _a.call(evt);
-        setStart(null);
-        setCurrent(null);
-      }
-    }),
-    [
-      start,
-      current,
-      annotationProvides,
-      pageIndex,
-      pageWidthPDF,
-      pageHeightPDF,
-      toolColor,
-      toolOpacity,
-      toolStrokeWidth
-    ]
-  );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  if (!start || !current) return null;
-  const minX = Math.min(start.x, current.x);
-  const minY = Math.min(start.y, current.y);
-  const maxX = Math.max(start.x, current.x);
-  const maxY = Math.max(start.y, current.y);
-  const halfStroke = toolStrokeWidth / 2;
-  const svgMinX = minX - halfStroke;
-  const svgMinY = minY - halfStroke;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const dw = width + toolStrokeWidth;
-  const dh = height + toolStrokeWidth;
-  const cx = halfStroke + width / 2;
-  const cy = halfStroke + height / 2;
-  const rx = width / 2;
-  const ry = height / 2;
-  return /* @__PURE__ */ jsx(
-    "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: /* @__PURE__ */ jsx(
-        "ellipse",
-        {
-          cx,
-          cy,
-          rx,
-          ry,
-          fill: toolColor,
-          opacity: toolOpacity,
-          style: {
-            cursor,
-            stroke: toolStrokeColor,
-            strokeWidth: toolStrokeWidth,
-            ...toolStrokeStyle === PdfAnnotationBorderStyle.DASHED && {
-              strokeDasharray: toolStrokeDashArray.join(",")
-            }
-          }
-        }
-      )
-    }
-  );
-};
-const SquarePaint = ({
-  pageIndex,
-  scale,
-  pageWidth,
-  pageHeight,
-  cursor
-}) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => {
-    if (!annotationProvides) return;
-    return annotationProvides.onActiveToolChange(setActiveTool);
-  }, [annotationProvides]);
-  if (!activeTool.defaults) return null;
-  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.SQUARE) return null;
-  const toolColor = activeTool.defaults.color ?? "#000000";
-  const toolOpacity = activeTool.defaults.opacity ?? 1;
-  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
-  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
-  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
-  const toolStrokeDashArray = activeTool.defaults.strokeDashArray ?? [];
-  const { register } = usePointerHandlers({ modeId: "square", pageIndex });
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [start, setStart] = useState(null);
-  const [current, setCurrent] = useState(null);
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a, _b;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setStart({ x, y });
-        setCurrent({ x, y });
-        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-      },
-      onPointerMove: (pos) => {
-        if (!start) return;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setCurrent({ x, y });
-      },
-      onPointerUp: (_, evt) => {
-        var _a, _b;
-        if (start && current && annotationProvides) {
-          const minX2 = Math.min(start.x, current.x);
-          const minY2 = Math.min(start.y, current.y);
-          const maxX2 = Math.max(start.x, current.x);
-          const maxY2 = Math.max(start.y, current.y);
-          if (maxX2 - minX2 >= 1 && maxY2 - minY2 >= 1) {
-            const halfStroke2 = toolStrokeWidth / 2;
-            const rect = {
-              origin: { x: minX2 - halfStroke2, y: minY2 - halfStroke2 },
-              size: {
-                width: maxX2 - minX2 + toolStrokeWidth,
-                height: maxY2 - minY2 + toolStrokeWidth
-              }
-            };
-            const anno = {
-              type: PdfAnnotationSubtype.SQUARE,
-              rect,
-              flags: ["print"],
-              color: toolColor,
-              opacity: toolOpacity,
-              strokeWidth: toolStrokeWidth,
-              strokeColor: toolStrokeColor,
-              strokeStyle: toolStrokeStyle,
-              strokeDashArray: toolStrokeDashArray,
-              pageIndex,
-              id: uuidV4(),
-              created: /* @__PURE__ */ new Date()
-            };
-            annotationProvides.createAnnotation(pageIndex, anno);
-            annotationProvides.setActiveVariant(null);
-            annotationProvides.selectAnnotation(pageIndex, anno.id);
-          }
-        }
-        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-        setStart(null);
-        setCurrent(null);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a, _b;
-        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
-        setStart(null);
-        setCurrent(null);
-      }
-    }),
-    [
-      start,
-      current,
-      annotationProvides,
-      pageIndex,
-      pageWidthPDF,
-      pageHeightPDF,
-      toolColor,
-      toolOpacity,
-      toolStrokeWidth
-    ]
-  );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  if (!start || !current) return null;
-  const minX = Math.min(start.x, current.x);
-  const minY = Math.min(start.y, current.y);
-  const maxX = Math.max(start.x, current.x);
-  const maxY = Math.max(start.y, current.y);
-  const halfStroke = toolStrokeWidth / 2;
-  const svgMinX = minX - halfStroke;
-  const svgMinY = minY - halfStroke;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const dw = width + toolStrokeWidth;
-  const dh = height + toolStrokeWidth;
-  return /* @__PURE__ */ jsx(
-    "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: /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: halfStroke,
-          y: halfStroke,
-          width,
-          height,
-          fill: toolColor,
-          opacity: toolOpacity,
-          style: {
-            cursor,
-            stroke: toolStrokeColor,
-            strokeWidth: toolStrokeWidth,
-            ...toolStrokeStyle === PdfAnnotationBorderStyle.DASHED && {
-              strokeDasharray: toolStrokeDashArray.join(",")
-            }
-          }
-        }
-      )
-    }
-  );
-};
-const PolylinePaint = ({
-  pageIndex,
-  scale,
-  pageWidth,
-  pageHeight,
-  cursor
-}) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => {
-    if (!annotationProvides) return;
-    return annotationProvides.onActiveToolChange(setActiveTool);
-  }, [annotationProvides]);
-  if (!activeTool.defaults) return null;
-  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.POLYLINE) return null;
-  const toolColor = activeTool.defaults.color ?? "#000000";
-  const toolOpacity = activeTool.defaults.opacity ?? 1;
-  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
-  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
-  const toolLineEndings = activeTool.defaults.lineEndings;
-  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
-  const toolStrokeDashArray = activeTool.defaults.strokeDashArray;
-  const { register } = usePointerHandlers({ modeId: "polyline", pageIndex });
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [vertices, setVertices] = useState([]);
-  const [current, setCurrent] = useState(null);
-  const commitPolyline = (pts) => {
-    if (pts.length < 2) return;
-    const rect2 = patching.lineRectWithEndings(pts, toolStrokeWidth, toolLineEndings);
-    const anno = {
-      type: PdfAnnotationSubtype.POLYLINE,
-      rect: rect2,
-      vertices: pts,
-      color: toolColor,
-      opacity: toolOpacity,
-      strokeWidth: toolStrokeWidth,
-      strokeColor: toolStrokeColor,
-      strokeStyle: toolStrokeStyle,
-      strokeDashArray: toolStrokeDashArray,
-      lineEndings: toolLineEndings,
-      pageIndex,
-      id: uuidV4(),
-      created: /* @__PURE__ */ new Date()
-    };
-    annotationProvides.createAnnotation(pageIndex, anno);
-    annotationProvides.setActiveVariant(null);
-    annotationProvides.selectAnnotation(pageIndex, anno.id);
+function PreviewRenderer({ preview, scale }) {
+  const { bounds } = preview;
+  const style = {
+    position: "absolute",
+    left: bounds.origin.x * scale,
+    top: bounds.origin.y * scale,
+    width: bounds.size.width * scale,
+    height: bounds.size.height * scale,
+    pointerEvents: "none",
+    zIndex: 10
   };
-  const handlers = useMemo(
-    () => ({
-      onClick: (pos) => {
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setVertices((prev) => [...prev, { x, y }]);
-        setCurrent({ x, y });
-      },
-      onDoubleClick: () => {
-        if (vertices.length >= 1 && annotationProvides) {
-          commitPolyline(vertices);
-        }
-        setVertices([]);
-        setCurrent(null);
-      },
-      onPointerMove: (pos) => {
-        if (!vertices.length) return;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setCurrent({ x, y });
-      },
-      onPointerCancel: () => {
-        setVertices([]);
-        setCurrent(null);
-      }
-    }),
-    [vertices, annotationProvides, pageWidthPDF, pageHeightPDF]
-  );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  if (!vertices.length || !current) return null;
-  const allPts = [...vertices, current];
-  const rect = patching.lineRectWithEndings(allPts, toolStrokeWidth, toolLineEndings);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        left: rect.origin.x * scale,
-        top: rect.origin.y * scale,
-        width: rect.size.width * scale,
-        height: rect.size.height * scale,
-        pointerEvents: "none",
-        zIndex: 2,
-        overflow: "visible",
-        cursor
-      },
-      children: /* @__PURE__ */ jsx(
-        Polyline,
-        {
-          rect,
-          vertices: allPts,
-          strokeWidth: toolStrokeWidth,
-          scale,
-          isSelected: false,
-          color: toolColor,
-          strokeColor: toolStrokeColor,
-          opacity: toolOpacity,
-          lineEndings: toolLineEndings
-        }
-      )
-    }
-  );
-};
-const LinePaint = ({ pageIndex, scale, pageWidth, pageHeight, cursor }) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => {
-    if (!annotationProvides) return;
-    return annotationProvides.onActiveToolChange(setActiveTool);
-  }, [annotationProvides]);
-  if (!activeTool.defaults) return null;
-  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.LINE) return null;
-  const toolColor = activeTool.defaults.color ?? "#000000";
-  const toolOpacity = activeTool.defaults.opacity ?? 1;
-  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
-  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
-  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
-  const toolStrokeDashArray = activeTool.defaults.strokeDashArray;
-  const toolLineEndings = activeTool.defaults.lineEndings;
-  const intent = activeTool.defaults.intent;
-  const { register } = usePointerHandlers({ modeId: ["line", "lineArrow"], pageIndex });
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [start, setStart] = useState(null);
-  const [current, setCurrent] = useState(null);
-  const commitLine = (p1, p2) => {
-    if (Math.abs(p2.x - p1.x) < 1 && Math.abs(p2.y - p1.y) < 1) return;
-    const rect2 = patching.lineRectWithEndings([p1, p2], toolStrokeWidth, toolLineEndings);
-    const anno = {
-      type: PdfAnnotationSubtype.LINE,
-      rect: rect2,
-      linePoints: { start: p1, end: p2 },
-      color: toolColor,
-      opacity: toolOpacity,
-      strokeWidth: toolStrokeWidth,
-      strokeColor: toolStrokeColor,
-      strokeStyle: toolStrokeStyle,
-      strokeDashArray: toolStrokeDashArray,
-      lineEndings: toolLineEndings,
-      intent,
-      pageIndex,
-      id: uuidV4(),
-      created: /* @__PURE__ */ new Date()
-    };
-    annotationProvides.createAnnotation(pageIndex, anno);
-    annotationProvides.setActiveVariant(null);
-    annotationProvides.selectAnnotation(pageIndex, anno.id);
-  };
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setStart({ x, y });
-        setCurrent({ x, y });
-        (_a = evt.setPointerCapture) == null ? void 0 : _a.call(evt);
-      },
-      onPointerMove: (pos) => {
-        if (!start) return;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setCurrent({ x, y });
-      },
-      onPointerUp: (_, evt) => {
-        var _a;
-        if (start && current && annotationProvides) {
-          commitLine(start, current);
+  if (preview.type === PdfAnnotationSubtype.CIRCLE) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Circle, { isSelected: false, scale, ...preview.data }) });
+  }
+  if (preview.type === PdfAnnotationSubtype.SQUARE) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Square, { isSelected: false, scale, ...preview.data }) });
+  }
+  if (preview.type === PdfAnnotationSubtype.POLYGON) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Polygon, { isSelected: false, scale, ...preview.data }) });
+  }
+  if (preview.type === PdfAnnotationSubtype.POLYLINE) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Polyline, { isSelected: false, scale, ...preview.data }) });
+  }
+  if (preview.type === PdfAnnotationSubtype.LINE) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Line, { isSelected: false, scale, ...preview.data }) });
+  }
+  if (preview.type === PdfAnnotationSubtype.INK) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Ink, { isSelected: false, scale, ...preview.data }) });
+  }
+  if (preview.type === PdfAnnotationSubtype.FREETEXT) {
+    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          border: `1px dashed ${preview.data.fontColor || "#000000"}`,
+          backgroundColor: "transparent"
         }
-        (_a = evt.releasePointerCapture) == null ? void 0 : _a.call(evt);
-        setStart(null);
-        setCurrent(null);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a;
-        (_a = evt.releasePointerCapture) == null ? void 0 : _a.call(evt);
-        setStart(null);
-        setCurrent(null);
       }
-    }),
-    [start, current, annotationProvides, pageWidthPDF, pageHeightPDF]
-  );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  if (!start || !current) return null;
-  const rect = patching.lineRectWithEndings([start, current], toolStrokeWidth, toolLineEndings);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        left: rect.origin.x * scale,
-        top: rect.origin.y * scale,
-        width: rect.size.width * scale,
-        height: rect.size.height * scale,
-        pointerEvents: "none",
-        zIndex: 2,
-        overflow: "visible",
-        cursor
-      },
-      children: /* @__PURE__ */ jsx(
-        Line,
-        {
-          rect,
-          linePoints: { start, end: current },
-          strokeWidth: toolStrokeWidth,
-          scale,
-          isSelected: false,
-          color: toolColor,
-          strokeColor: toolStrokeColor,
-          opacity: toolOpacity,
-          lineEndings: toolLineEndings,
-          strokeStyle: toolStrokeStyle,
-          strokeDashArray: toolStrokeDashArray
-        }
-      )
-    }
-  );
-};
-const HANDLE_SIZE_PX = 14;
-const PolygonPaint = ({
-  pageIndex,
-  scale,
-  pageWidth,
-  pageHeight,
-  cursor
-}) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => annotationProvides == null ? void 0 : annotationProvides.onActiveToolChange(setActiveTool), [annotationProvides]);
-  if (!activeTool.defaults || activeTool.defaults.subtype !== PdfAnnotationSubtype.POLYGON)
-    return null;
-  const toolColor = activeTool.defaults.color ?? "#000000";
-  const toolOpacity = activeTool.defaults.opacity ?? 1;
-  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
-  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
-  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
-  const toolStrokeDashArray = activeTool.defaults.strokeDashArray;
-  const { register } = usePointerHandlers({ modeId: "polygon", pageIndex });
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [vertices, setVertices] = useState([]);
-  const [current, setCurrent] = useState(null);
-  const commitPolygon = (pts) => {
-    const xs2 = pts.map((p) => p.x), ys2 = pts.map((p) => p.y);
-    const minX2 = Math.min(...xs2), minY2 = Math.min(...ys2);
-    const maxX2 = Math.max(...xs2), maxY2 = Math.max(...ys2);
-    if (maxX2 - minX2 < 1 || maxY2 - minY2 < 1) return;
-    const half2 = toolStrokeWidth / 2;
-    const rect = {
-      origin: { x: minX2 - half2, y: minY2 - half2 },
-      size: { width: maxX2 - minX2 + toolStrokeWidth, height: maxY2 - minY2 + toolStrokeWidth }
-    };
-    const anno = {
-      type: PdfAnnotationSubtype.POLYGON,
-      rect,
-      vertices: pts,
-      color: toolColor,
-      opacity: toolOpacity,
-      strokeWidth: toolStrokeWidth,
-      strokeColor: toolStrokeColor,
-      strokeStyle: toolStrokeStyle,
-      strokeDashArray: toolStrokeDashArray,
-      pageIndex,
-      id: uuidV4(),
-      created: /* @__PURE__ */ new Date()
-    };
-    annotationProvides.createAnnotation(pageIndex, anno);
-    annotationProvides.setActiveVariant(null);
-    annotationProvides.selectAnnotation(pageIndex, anno.id);
-  };
-  const isInsideStartHandle = (x, y) => {
-    if (vertices.length < 2) return false;
-    const sizePDF = HANDLE_SIZE_PX / scale;
-    const half2 = sizePDF / 2;
-    const v0 = vertices[0];
-    return x >= v0.x - half2 && x <= v0.x + half2 && y >= v0.y - half2 && y <= v0.y + half2;
-  };
-  const handlers = useMemo(
+    ) });
+  }
+  return null;
+}
+function AnnotationPaintLayer({ pageIndex, scale }) {
+  const { plugin: annotationPlugin } = useAnnotationPlugin();
+  const [previews, setPreviews] = useState(/* @__PURE__ */ new Map());
+  const fileInputRef = useRef(null);
+  const canvasRef = useRef(null);
+  const services = useMemo(
     () => ({
-      onClick: (pos) => {
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        if (isInsideStartHandle(x, y) && vertices.length >= 3 && annotationProvides) {
-          commitPolygon(vertices);
-          setVertices([]);
-          setCurrent(null);
-          return;
-        }
-        setVertices((prev) => [...prev, { x, y }]);
-        setCurrent({ x, y });
-      },
-      onDoubleClick: () => {
-        if (vertices.length >= 3 && annotationProvides) {
-          commitPolygon(vertices);
-          setVertices([]);
-          setCurrent(null);
-        } else {
-          setVertices([]);
-          setCurrent(null);
-        }
-      },
-      onPointerMove: (pos) => {
-        if (!vertices.length) return;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setCurrent({ x, y });
-      },
-      onPointerCancel: () => {
-        setVertices([]);
-        setCurrent(null);
-      }
-    }),
-    [vertices, current, annotationProvides, pageWidthPDF, pageHeightPDF]
-  );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  if (!vertices.length || !current) return null;
-  const allPts = [...vertices, current];
-  const xs = allPts.map((p) => p.x), ys = allPts.map((p) => p.y);
-  const minX = Math.min(...xs), minY = Math.min(...ys);
-  const maxX = Math.max(...xs), maxY = Math.max(...ys);
-  const half = toolStrokeWidth / 2;
-  const svgMinX = minX - half;
-  const svgMinY = minY - half;
-  const svgMaxX = maxX + half;
-  const svgMaxY = maxY + half;
-  const dw = svgMaxX - svgMinX;
-  const dh = svgMaxY - svgMinY;
-  const mainPath = useMemo(() => {
-    let d = "";
-    allPts.forEach(({ x, y }, i) => {
-      d += (i === 0 ? "M" : "L") + (x - svgMinX) + " " + (y - svgMinY) + " ";
-    });
-    return d.trim();
-  }, [allPts, svgMinX, svgMinY]);
-  const dottedPath = vertices.length >= 2 ? (() => {
-    const curLx = current.x - svgMinX;
-    const curLy = current.y - svgMinY;
-    const firstLx = vertices[0].x - svgMinX;
-    const firstLy = vertices[0].y - svgMinY;
-    return `M ${curLx} ${curLy} L ${firstLx} ${firstLy}`;
-  })() : null;
-  const handleSizePDF = HANDLE_SIZE_PX / scale;
-  const hHalf = handleSizePDF / 2;
-  const hx = vertices[0].x - hHalf - svgMinX;
-  const hy = vertices[0].y - hHalf - svgMinY;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      style: {
-        position: "absolute",
-        left: svgMinX * scale,
-        top: svgMinY * scale,
-        width: dw * scale,
-        height: dh * scale,
-        pointerEvents: "none",
-        // we handle clicks at the page layer
-        zIndex: 2,
-        overflow: "visible"
-      },
-      width: dw * scale,
-      height: dh * scale,
-      viewBox: `0 0 ${dw} ${dh}`,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: mainPath,
-            fill: toolColor,
-            opacity: toolOpacity,
-            style: {
-              cursor,
-              stroke: toolStrokeColor,
-              strokeWidth: toolStrokeWidth,
-              ...toolStrokeStyle === PdfAnnotationBorderStyle.DASHED && {
-                strokeDasharray: toolStrokeDashArray == null ? void 0 : toolStrokeDashArray.join(",")
-              }
-            }
-          }
-        ),
-        dottedPath && /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: dottedPath,
-            fill: "none",
-            style: { stroke: toolStrokeColor, strokeWidth: toolStrokeWidth, strokeDasharray: "4,4" }
-          }
-        ),
-        vertices.length >= 3 && /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: hx,
-            y: hy,
-            width: handleSizePDF,
-            height: handleSizePDF,
-            fill: toolStrokeColor,
-            opacity: 0.4,
-            stroke: toolStrokeColor,
-            strokeWidth: toolStrokeWidth / 2,
-            style: { pointerEvents: "none" }
+      requestFile: ({ accept, onFile }) => {
+        if (!fileInputRef.current) return;
+        const input = fileInputRef.current;
+        input.accept = accept;
+        input.onchange = (e) => {
+          var _a;
+          const file = (_a = e.target.files) == null ? void 0 : _a[0];
+          if (file) {
+            onFile(file);
+            input.value = "";
           }
-        )
-      ]
-    }
-  );
-};
-const FreeTextPaint = ({
-  pageIndex,
-  scale,
-  pageWidth,
-  pageHeight,
-  cursor = "text"
-}) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
-  useEffect(() => annotationProvides == null ? void 0 : annotationProvides.onActiveToolChange(setActiveTool), [annotationProvides]);
-  if (!activeTool.defaults || activeTool.defaults.subtype !== PdfAnnotationSubtype.FREETEXT)
-    return null;
-  const toolFontColor = activeTool.defaults.fontColor ?? "#000000";
-  const toolOpacity = activeTool.defaults.opacity ?? 1;
-  const toolFontSize = activeTool.defaults.fontSize ?? 12;
-  const toolFontFamily = activeTool.defaults.fontFamily;
-  const toolBackgroundColor = activeTool.defaults.backgroundColor ?? "transparent";
-  const toolTextAlign = activeTool.defaults.textAlign;
-  const toolVerticalAlign = activeTool.defaults.verticalAlign;
-  const toolContent = activeTool.defaults.content ?? "Insert text here";
-  const { register } = usePointerHandlers({ modeId: "freeText", pageIndex });
-  const clamp2 = (v, min, max) => Math.max(min, Math.min(max, v));
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [start, setStart] = useState(null);
-  const [current, setCurrent] = useState(null);
-  const commitFreeText = (p1, p2) => {
-    const minX2 = Math.min(p1.x, p2.x);
-    const minY2 = Math.min(p1.y, p2.y);
-    const maxX2 = Math.max(p1.x, p2.x);
-    const maxY2 = Math.max(p1.y, p2.y);
-    const w = maxX2 - minX2;
-    const h = maxY2 - minY2;
-    if (w < 1 || h < 1) return;
-    const rect = {
-      origin: { x: minX2, y: minY2 },
-      size: { width: w, height: h }
-    };
-    const anno = {
-      type: PdfAnnotationSubtype.FREETEXT,
-      rect,
-      contents: toolContent,
-      fontColor: toolFontColor,
-      fontSize: toolFontSize,
-      fontFamily: toolFontFamily,
-      opacity: toolOpacity,
-      backgroundColor: toolBackgroundColor,
-      textAlign: toolTextAlign,
-      verticalAlign: toolVerticalAlign,
-      pageIndex,
-      id: uuidV4(),
-      created: /* @__PURE__ */ new Date()
-    };
-    annotationProvides.createAnnotation(pageIndex, anno);
-    annotationProvides.setActiveVariant(null);
-    annotationProvides.selectAnnotation(pageIndex, anno.id);
-  };
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a;
-        const x = clamp2(pos.x, 0, pageWidthPDF);
-        const y = clamp2(pos.y, 0, pageHeightPDF);
-        setStart({ x, y });
-        setCurrent({ x, y });
-        (_a = evt.setPointerCapture) == null ? void 0 : _a.call(evt);
+        };
+        input.click();
       },
-      onPointerMove: (pos) => {
-        if (!start) return;
-        const x = clamp2(pos.x, 0, pageWidthPDF);
-        const y = clamp2(pos.y, 0, pageHeightPDF);
-        setCurrent({ x, y });
-      },
-      onPointerUp: (_, evt) => {
-        var _a;
-        if (start && current && annotationProvides) {
-          commitFreeText(start, current);
-        }
-        (_a = evt.releasePointerCapture) == null ? void 0 : _a.call(evt);
-        setStart(null);
-        setCurrent(null);
-      },
-      onPointerCancel: (_, evt) => {
-        var _a;
-        (_a = evt.releasePointerCapture) == null ? void 0 : _a.call(evt);
-        setStart(null);
-        setCurrent(null);
+      processImage: ({ source, maxWidth, maxHeight, onComplete }) => {
+        const canvas = canvasRef.current;
+        if (!canvas || !canvas.getContext) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const img = new Image();
+        img.crossOrigin = "Anonymous";
+        img.onload = () => {
+          let { naturalWidth: width, naturalHeight: height } = img;
+          const scaleX = maxWidth ? maxWidth / width : 1;
+          const scaleY = maxHeight ? maxHeight / height : 1;
+          const scaleFactor = Math.min(scaleX, scaleY, 1);
+          const finalWidth = width * scaleFactor;
+          const finalHeight = height * scaleFactor;
+          canvas.width = finalWidth;
+          canvas.height = finalHeight;
+          ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
+          const imageData = ctx.getImageData(0, 0, finalWidth, finalHeight);
+          if (typeof source !== "string") URL.revokeObjectURL(img.src);
+          onComplete({ imageData, width: finalWidth, height: finalHeight });
+        };
+        img.src = typeof source === "string" ? source : URL.createObjectURL(source);
       }
     }),
-    [start, current, annotationProvides, pageWidthPDF, pageHeightPDF]
+    []
   );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  if (!start || !current) return null;
-  const minX = Math.min(start.x, current.x);
-  const minY = Math.min(start.y, current.y);
-  const maxX = Math.max(start.x, current.x);
-  const maxY = Math.max(start.y, current.y);
-  const dw = maxX - minX;
-  const dh = maxY - minY;
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      style: {
-        position: "absolute",
-        left: minX * scale,
-        top: minY * scale,
-        width: dw * scale,
-        height: dh * scale,
-        pointerEvents: "none",
-        zIndex: 2
-      },
-      width: dw * scale,
-      height: dh * scale,
-      viewBox: `0 0 ${dw} ${dh}`,
-      children: /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: 0,
-          y: 0,
-          width: dw,
-          height: dh,
-          fill: "transparent",
-          style: {
-            stroke: toolFontColor,
-            strokeWidth: 1,
-            strokeDasharray: "4,4",
-            cursor
-          }
-        }
-      )
-    }
-  );
-};
-const StampPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const inputRef = useRef(null);
-  const canvasRef = useRef(null);
-  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
   useEffect(() => {
-    if (!annotationProvides) return;
-    return annotationProvides.onActiveToolChange(setActiveTool);
-  }, [annotationProvides]);
-  if (!activeTool.defaults) return null;
-  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.STAMP) return null;
-  const { register } = usePointerHandlers({ modeId: "stamp", pageIndex });
-  const pageWidthPDF = pageWidth / scale;
-  const pageHeightPDF = pageHeight / scale;
-  const [start, setStart] = useState(null);
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (pos, evt) => {
-        var _a;
-        const x = clamp(pos.x, 0, pageWidthPDF);
-        const y = clamp(pos.y, 0, pageHeightPDF);
-        setStart({ x, y });
-        (_a = inputRef.current) == null ? void 0 : _a.click();
+    if (!annotationPlugin) return;
+    return annotationPlugin.registerPageHandlers(pageIndex, scale, {
+      services,
+      onPreview: (toolId, state) => {
+        setPreviews((prev) => {
+          const next = new Map(prev);
+          if (state) {
+            next.set(toolId, state);
+          } else {
+            next.delete(toolId);
+          }
+          return next;
+        });
       }
-    }),
-    [pageWidthPDF, pageHeightPDF]
-  );
-  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
-  const onChange = async (e) => {
-    var _a;
-    if (!annotationProvides || !start) return;
-    const file = (_a = e.currentTarget.files) == null ? void 0 : _a[0];
-    if (!file) return;
-    const img = await new Promise((res, rej) => {
-      const i = new Image();
-      i.onload = () => res(i);
-      i.onerror = rej;
-      i.src = URL.createObjectURL(file);
     });
-    const imgW = img.naturalWidth;
-    const imgH = img.naturalHeight;
-    const maxW = pageWidthPDF;
-    const maxH = pageHeightPDF;
-    const scaleFactor = Math.min(1, maxW / imgW, maxH / imgH);
-    const pdfW = imgW * scaleFactor;
-    const pdfH = imgH * scaleFactor;
-    const posX = clamp(start.x, 0, maxW - pdfW);
-    const posY = clamp(start.y, 0, maxH - pdfH);
-    const rect = {
-      origin: { x: posX, y: posY },
-      size: { width: pdfW, height: pdfH }
-    };
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    canvas.width = pdfW;
-    canvas.height = pdfH;
-    const ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0, pdfW, pdfH);
-    const imageData = ctx.getImageData(0, 0, pdfW, pdfH);
-    const anno = {
-      type: PdfAnnotationSubtype.STAMP,
-      flags: ["print"],
-      pageIndex,
-      id: uuidV4(),
-      created: /* @__PURE__ */ new Date(),
-      rect
-    };
-    annotationProvides.createAnnotation(pageIndex, anno, { imageData });
-    annotationProvides.setActiveVariant(null);
-    annotationProvides.selectAnnotation(pageIndex, anno.id);
-    setStart(null);
-  };
+  }, [pageIndex, scale, annotationPlugin, services]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("canvas", { style: { display: "none" }, ref: canvasRef }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept: "image/png,image/jpeg",
-        style: { display: "none" },
-        onChange
-      }
-    )
+    /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" } }),
+    /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { display: "none" } }),
+    Array.from(previews.entries()).map(([toolId, preview]) => /* @__PURE__ */ jsx(PreviewRenderer, { preview, scale }, toolId))
   ] });
-};
+}
 function AnnotationLayer({
+  style,
   pageIndex,
   scale,
+  selectionMenu,
+  resizeUI,
+  vertexUI,
   pageWidth,
   pageHeight,
   rotation,
-  selectionMenu,
-  style,
+  selectionOutlineColor,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -3026,74 +1681,14 @@ function AnnotationLayer({
             scale,
             rotation,
             pageWidth,
-            pageHeight
+            pageHeight,
+            resizeUI,
+            vertexUI,
+            selectionOutlineColor
           }
         ),
         /* @__PURE__ */ jsx(TextMarkup, { pageIndex, scale }),
-        /* @__PURE__ */ jsx(InkPaint, { pageIndex, scale, pageWidth, pageHeight }),
-        /* @__PURE__ */ jsx(
-          CirclePaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SquarePaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PolygonPaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          PolylinePaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          LinePaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FreeTextPaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          StampPaint,
-          {
-            pageIndex,
-            scale,
-            pageWidth,
-            pageHeight
-          }
-        )
+        /* @__PURE__ */ jsx(AnnotationPaintLayer, { pageIndex, scale })
       ]
     }
   );