@embedpdf/plugin-annotation 2.6.2 → 2.8.0

package/dist/preact/index.js

@@ -1,15 +1,16 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { initialDocumentState, AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp, isLink, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { initialDocumentState, AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 import { createContext, Fragment as Fragment$1 } from "preact";
 import { useState, useCallback, useContext, useRef, useEffect, useMemo, useLayoutEffect } from "preact/hooks";
 import { createPortal } from "preact/compat";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/preact";
-import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/preact";
 import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/preact";
+import { getCounterRotation } from "@embedpdf/utils";
 const suppressContentEditableWarningProps = {};
 const RegisterContext = createContext(null);
 const RenderersContext = createContext([]);
@@ -59,6 +60,43 @@ const useAnnotation = (documentId) => {
     provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null
   };
 };
+function AppearanceImage({ appearance, style }) {
+  const [imageUrl, setImageUrl] = useState(null);
+  const urlRef = useRef(null);
+  useEffect(() => {
+    const url = URL.createObjectURL(appearance.data);
+    setImageUrl(url);
+    urlRef.current = url;
+    return () => {
+      if (urlRef.current) {
+        URL.revokeObjectURL(urlRef.current);
+        urlRef.current = null;
+      }
+    };
+  }, [appearance.data]);
+  const handleImageLoad = () => {
+    if (urlRef.current) {
+      URL.revokeObjectURL(urlRef.current);
+      urlRef.current = null;
+    }
+  };
+  return imageUrl ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageUrl,
+      onLoad: handleImageLoad,
+      style: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        display: "block",
+        pointerEvents: "none",
+        userSelect: "none",
+        ...style
+      }
+    }
+  ) : null;
+}
 function AnnotationContainer({
   scale,
   documentId,
@@ -69,6 +107,7 @@ function AnnotationContainer({
   trackedAnnotation,
   children,
   isSelected,
+  isEditing = false,
   isMultiSelected = false,
   isDraggable,
   isResizable,
@@ -80,6 +119,7 @@ function AnnotationContainer({
   outlineOffset = 1,
   onDoubleClick,
   onSelect,
+  appearance,
   zIndex = 1,
   resizeUI,
   vertexUI,
@@ -98,6 +138,7 @@ function AnnotationContainer({
   const [liveRotation, setLiveRotation] = useState(null);
   const [cursorScreen, setCursorScreen] = useState(null);
   const [isHandleHovered, setIsHandleHovered] = useState(false);
+  const [gestureActive, setGestureActive] = useState(false);
   const { provides: annotationCapability } = useAnnotationCapability();
   const { plugin } = useAnnotationPlugin();
   const { canModifyAnnotations } = useDocumentPermissions(documentId);
@@ -110,6 +151,11 @@ function AnnotationContainer({
     [annotationCapability, documentId]
   );
   const currentObject = preview ? { ...trackedAnnotation.object, ...preview } : trackedAnnotation.object;
+  const annoFlags = trackedAnnotation.object.flags ?? [];
+  const hasNoZoom = annoFlags.includes("noZoom");
+  const hasNoRotate = annoFlags.includes("noRotate");
+  const visualScale = hasNoZoom ? 1 : scale;
+  const effectivePageRotation = hasNoRotate ? 0 : rotation;
   const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
   const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
   const ROTATION_COLOR = (rotationUI == null ? void 0 : rotationUI.color) ?? "white";
@@ -142,6 +188,9 @@ function AnnotationContainer({
       if (event.state === "start") {
         gestureBaseRectRef.current = trackedAnnotation.object.unrotatedRect ?? trackedAnnotation.object.rect;
         gestureBaseRef.current = trackedAnnotation.object;
+        if (type === "resize" || type === "vertex-edit") {
+          setGestureActive(true);
+        }
         if (type === "move") {
           plugin.startDrag(documentId, { annotationIds: [id], pageSize });
         } else if (type === "resize") {
@@ -202,6 +251,7 @@ function AnnotationContainer({
       if (event.state === "end") {
         gestureBaseRectRef.current = null;
         gestureBaseRef.current = null;
+        setGestureActive(false);
         if (type === "move") plugin.commitDrag(documentId);
         else if (type === "resize") plugin.commitResize(documentId);
       }
@@ -298,23 +348,28 @@ function AnnotationContainer({
     return () => unsubs.forEach((u) => u());
   }, [plugin, documentId, trackedAnnotation.object]);
   const showOutline = isSelected && !isMultiSelected;
-  const aabbWidth = currentObject.rect.size.width * scale;
-  const aabbHeight = currentObject.rect.size.height * scale;
-  const innerWidth = effectiveUnrotatedRect.size.width * scale;
-  const innerHeight = effectiveUnrotatedRect.size.height * scale;
+  const aabbWidth = currentObject.rect.size.width * visualScale;
+  const aabbHeight = currentObject.rect.size.height * visualScale;
+  const innerWidth = effectiveUnrotatedRect.size.width * visualScale;
+  const innerHeight = effectiveUnrotatedRect.size.height * visualScale;
   const usesCustomPivot = Boolean(explicitUnrotatedRect) && annotationRotation !== 0;
-  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * scale : (aabbWidth - innerWidth) / 2;
-  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * scale : (aabbHeight - innerHeight) / 2;
-  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * scale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * scale}px` : "center center";
-  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * scale : aabbWidth / 2;
-  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * scale : aabbHeight / 2;
+  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * visualScale : (aabbWidth - innerWidth) / 2;
+  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * visualScale : (aabbHeight - innerHeight) / 2;
+  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * visualScale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * visualScale}px` : "center center";
+  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * visualScale : aabbWidth / 2;
+  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * visualScale : aabbHeight / 2;
   const guideLength = Math.max(300, Math.max(aabbWidth, aabbHeight) + 80);
+  const counterRot = hasNoRotate ? getCounterRotation(
+    { origin: { x: 0, y: 0 }, size: { width: aabbWidth, height: aabbHeight } },
+    rotation
+  ) : null;
   const childObject = useMemo(() => {
     if (explicitUnrotatedRect) {
       return { ...currentObject, rect: explicitUnrotatedRect };
     }
     return currentObject;
   }, [currentObject, explicitUnrotatedRect]);
+  const apActive = !!(appearance == null ? void 0 : appearance.normal) && !gestureActive && !isEditing && !trackedAnnotation.dictMode;
   return /* @__PURE__ */ jsxs("div", { "data-no-interaction": true, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -323,10 +378,15 @@ function AnnotationContainer({
           position: "absolute",
           left: currentObject.rect.origin.x * scale,
           top: currentObject.rect.origin.y * scale,
-          width: aabbWidth,
-          height: aabbHeight,
+          width: counterRot ? counterRot.width : aabbWidth,
+          height: counterRot ? counterRot.height : aabbHeight,
           pointerEvents: "none",
           zIndex,
+          // noRotate: apply counter-rotation matrix so the annotation stays upright
+          ...counterRot && {
+            transform: counterRot.matrix,
+            transformOrigin: "0 0"
+          },
           ...style
         },
         ...props,
@@ -491,7 +551,7 @@ function AnnotationContainer({
               },
               children: [
                 (() => {
-                  const childrenRender = typeof children === "function" ? children(childObject) : children;
+                  const childrenRender = typeof children === "function" ? children(childObject, { appearanceActive: apActive }) : children;
                   const customRender = customAnnotationRenderer == null ? void 0 : customAnnotationRenderer({
                     annotation: childObject,
                     children: childrenRender,
@@ -503,11 +563,15 @@ function AnnotationContainer({
                     pageIndex,
                     onSelect
                   });
-                  if (customRender !== null && customRender !== void 0) {
-                    return customRender;
-                  }
-                  return childrenRender;
+                  return customRender ?? childrenRender;
                 })(),
+                (appearance == null ? void 0 : appearance.normal) && /* @__PURE__ */ jsx(
+                  AppearanceImage,
+                  {
+                    appearance: appearance.normal,
+                    style: { display: apActive ? "block" : "none" }
+                  }
+                ),
                 isSelected && effectiveIsResizable && !rotationActive && resize.map(
                   ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
                     key,
@@ -551,13 +615,13 @@ function AnnotationContainer({
             y: currentObject.rect.origin.y * scale
           },
           size: {
-            width: currentObject.rect.size.width * scale,
-            height: currentObject.rect.size.height * scale
+            width: currentObject.rect.size.width * visualScale,
+            height: currentObject.rect.size.height * visualScale
           }
         },
         rotation,
         children: (counterRotateProps) => {
-          const effectiveAngle = ((annotationRotation + rotation * 90) % 360 + 360) % 360;
+          const effectiveAngle = ((annotationRotation + effectivePageRotation * 90) % 360 + 360) % 360;
           const handleNearMenuSide = effectiveIsRotatable && effectiveAngle > 90 && effectiveAngle < 270;
           return selectionMenu({
             ...counterRotateProps,
@@ -602,6 +666,57 @@ function AnnotationContainer({
     )
   ] });
 }
+function mapCounterRotatePoint(x, y, width, height, rotation) {
+  switch (rotation) {
+    case 1:
+      return { x: y, y: height - x };
+    case 2:
+      return { x: width - x, y: height - y };
+    case 3:
+      return { x: width - y, y: x };
+    default:
+      return { x, y };
+  }
+}
+function getAnnotationScreenBounds(annotation, scale, rotation) {
+  const flags = annotation.object.flags ?? [];
+  const hasNoZoom = flags.includes("noZoom");
+  const hasNoRotate = flags.includes("noRotate");
+  const left = annotation.object.rect.origin.x * scale;
+  const top = annotation.object.rect.origin.y * scale;
+  const width = annotation.object.rect.size.width * (hasNoZoom ? 1 : scale);
+  const height = annotation.object.rect.size.height * (hasNoZoom ? 1 : scale);
+  if (!hasNoRotate || rotation === 0) {
+    return {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height
+    };
+  }
+  const corners = [
+    mapCounterRotatePoint(0, 0, width, height, rotation),
+    mapCounterRotatePoint(width, 0, width, height, rotation),
+    mapCounterRotatePoint(0, height, width, height, rotation),
+    mapCounterRotatePoint(width, height, width, height, rotation)
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const corner of corners) {
+    if (corner.x < minX) minX = corner.x;
+    if (corner.y < minY) minY = corner.y;
+    if (corner.x > maxX) maxX = corner.x;
+    if (corner.y > maxY) maxY = corner.y;
+  }
+  return {
+    left: left + minX,
+    top: top + minY,
+    right: left + maxX,
+    bottom: top + maxY
+  };
+}
 function GroupSelectionBox({
   documentId,
   pageIndex,
@@ -809,8 +924,29 @@ function GroupSelectionBox({
   if (selectedAnnotations.length < 2) {
     return null;
   }
-  const groupBoxWidth = previewGroupBox.size.width * scale;
-  const groupBoxHeight = previewGroupBox.size.height * scale;
+  let visualLeft = Infinity;
+  let visualTop = Infinity;
+  let visualRight = -Infinity;
+  let visualBottom = -Infinity;
+  for (const ta of selectedAnnotations) {
+    const bounds = getAnnotationScreenBounds(ta, scale, rotation);
+    visualLeft = Math.min(visualLeft, bounds.left);
+    visualTop = Math.min(visualTop, bounds.top);
+    visualRight = Math.max(visualRight, bounds.right);
+    visualBottom = Math.max(visualBottom, bounds.bottom);
+  }
+  const initialLogicalLeft = groupBox.origin.x * scale;
+  const initialLogicalTop = groupBox.origin.y * scale;
+  const initialLogicalRight = (groupBox.origin.x + groupBox.size.width) * scale;
+  const initialLogicalBottom = (groupBox.origin.y + groupBox.size.height) * scale;
+  const leftCorrection = visualLeft - initialLogicalLeft;
+  const topCorrection = visualTop - initialLogicalTop;
+  const rightCorrection = visualRight - initialLogicalRight;
+  const bottomCorrection = visualBottom - initialLogicalBottom;
+  const groupBoxLeft = previewGroupBox.origin.x * scale + leftCorrection;
+  const groupBoxTop = previewGroupBox.origin.y * scale + topCorrection;
+  const groupBoxWidth = previewGroupBox.size.width * scale + (rightCorrection - leftCorrection);
+  const groupBoxHeight = previewGroupBox.size.height * scale + (bottomCorrection - topCorrection);
   const groupCenterX = groupBoxWidth / 2;
   const groupCenterY = groupBoxHeight / 2;
   const groupGuideLength = Math.max(300, Math.max(groupBoxWidth, groupBoxHeight) + 80);
@@ -820,8 +956,8 @@ function GroupSelectionBox({
       {
         style: {
           position: "absolute",
-          left: previewGroupBox.origin.x * scale,
-          top: previewGroupBox.origin.y * scale,
+          left: groupBoxLeft,
+          top: groupBoxTop,
           width: groupBoxWidth,
           height: groupBoxHeight,
           pointerEvents: "none",
@@ -1035,12 +1171,12 @@ function GroupSelectionBox({
       {
         rect: {
           origin: {
-            x: previewGroupBox.origin.x * scale,
-            y: previewGroupBox.origin.y * scale
+            x: groupBoxLeft,
+            y: groupBoxTop
           },
           size: {
-            width: previewGroupBox.size.width * scale,
-            height: previewGroupBox.size.height * scale
+            width: groupBoxWidth,
+            height: groupBoxHeight
           }
         },
         rotation,
@@ -1064,188 +1200,23 @@ function GroupSelectionBox({
     )
   ] });
 }
-function Highlight({
-  strokeColor,
-  opacity = 0.5,
-  segmentRects,
-  rect,
-  scale,
-  onClick,
-  style
-}) {
-  const resolvedColor = strokeColor ?? "#FFFF00";
-  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((b, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      onPointerDown: onClick,
-      onTouchStart: onClick,
-      style: {
-        position: "absolute",
-        left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
-        top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
-        width: b.size.width * scale,
-        height: b.size.height * scale,
-        background: resolvedColor,
-        opacity,
-        pointerEvents: onClick ? "auto" : "none",
-        cursor: onClick ? "pointer" : "default",
-        zIndex: onClick ? 1 : void 0,
-        ...style
-      }
-    },
-    i
-  )) });
-}
-function Underline({
-  strokeColor,
-  opacity = 0.5,
-  segmentRects,
-  rect,
-  scale,
-  onClick,
-  style
-}) {
-  const resolvedColor = strokeColor ?? "#FFFF00";
-  const thickness = 2 * scale;
-  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      onPointerDown: onClick,
-      onTouchStart: onClick,
-      style: {
-        position: "absolute",
-        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
-        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
-        width: r.size.width * scale,
-        height: r.size.height * scale,
-        background: "transparent",
-        pointerEvents: onClick ? "auto" : "none",
-        cursor: onClick ? "pointer" : "default",
-        zIndex: onClick ? 1 : 0,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            bottom: 0,
-            width: "100%",
-            height: thickness,
-            background: resolvedColor,
-            opacity,
-            pointerEvents: "none"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function Strikeout({
-  strokeColor,
-  opacity = 0.5,
-  segmentRects,
-  rect,
-  scale,
-  onClick,
-  style
-}) {
-  const resolvedColor = strokeColor ?? "#FFFF00";
-  const thickness = 2 * scale;
-  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      onPointerDown: onClick,
-      onTouchStart: onClick,
-      style: {
-        position: "absolute",
-        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
-        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
-        width: r.size.width * scale,
-        height: r.size.height * scale,
-        background: "transparent",
-        pointerEvents: onClick ? "auto" : "none",
-        cursor: onClick ? "pointer" : "default",
-        zIndex: onClick ? 1 : 0,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            top: "50%",
-            width: "100%",
-            height: thickness,
-            background: resolvedColor,
-            opacity,
-            transform: "translateY(-50%)",
-            pointerEvents: "none"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function Squiggly({
-  strokeColor,
-  opacity = 0.5,
-  segmentRects,
-  rect,
-  scale,
-  onClick,
-  style
-}) {
-  const resolvedColor = strokeColor ?? "#FFFF00";
-  const amplitude = 2 * scale;
-  const period = 6 * scale;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${period}" height="${amplitude * 2}" viewBox="0 0 ${period} ${amplitude * 2}">
-      <path d="M0 ${amplitude} Q ${period / 4} 0 ${period / 2} ${amplitude} T ${period} ${amplitude}"
-            fill="none" stroke="${resolvedColor}" stroke-width="${amplitude}" stroke-linecap="round"/>
-    </svg>`;
-  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
-  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      onPointerDown: onClick,
-      onTouchStart: onClick,
-      style: {
-        position: "absolute",
-        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
-        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
-        width: r.size.width * scale,
-        height: r.size.height * scale,
-        background: "transparent",
-        pointerEvents: onClick ? "auto" : "none",
-        cursor: onClick ? "pointer" : "default",
-        zIndex: onClick ? 1 : 0,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            bottom: 0,
-            width: "100%",
-            height: amplitude * 2,
-            backgroundImage: svgDataUri,
-            backgroundRepeat: "repeat-x",
-            backgroundSize: `${period}px ${amplitude * 2}px`,
-            opacity,
-            pointerEvents: "none"
-          }
-        }
-      )
-    },
-    i
-  )) });
+function createRenderer(entry) {
+  return {
+    id: entry.id,
+    matches: (annotation) => entry.matches(annotation),
+    render: (props) => entry.render(props),
+    vertexConfig: entry.vertexConfig,
+    zIndex: entry.zIndex,
+    containerStyle: entry.containerStyle,
+    interactionDefaults: entry.interactionDefaults,
+    useAppearanceStream: entry.useAppearanceStream,
+    isDraggable: entry.isDraggable,
+    onDoubleClick: entry.onDoubleClick,
+    selectOverride: entry.selectOverride,
+    hideSelectionMenu: entry.hideSelectionMenu
+  };
 }
+const MIN_HIT_AREA_SCREEN_PX$5 = 20;
 function Ink({
   isSelected,
   strokeColor,
@@ -1254,7 +1225,8 @@ function Ink({
   inkList,
   rect,
   scale,
-  onClick
+  onClick,
+  appearanceActive = false
 }) {
   const resolvedColor = strokeColor ?? "#000000";
   const paths = useMemo(() => {
@@ -1270,7 +1242,8 @@ function Ink({
   }, [inkList, rect]);
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
-  return /* @__PURE__ */ jsx(
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$5 / scale);
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       style: {
@@ -1284,28 +1257,45 @@ function Ink({
       width,
       height,
       viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
-      children: paths.map((d, i) => /* @__PURE__ */ jsx(
-        "path",
-        {
-          d,
-          fill: "none",
-          opacity,
-          onPointerDown: onClick,
-          onTouchStart: onClick,
-          style: {
-            cursor: isSelected ? "move" : "pointer",
-            pointerEvents: isSelected ? "none" : "visibleStroke",
-            stroke: resolvedColor,
-            strokeWidth,
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        },
-        i
-      ))
+      children: [
+        paths.map((d, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : "visibleStroke",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          },
+          `hit-${i}`
+        )),
+        !appearanceActive && paths.map((d, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            opacity,
+            style: {
+              pointerEvents: "none",
+              stroke: resolvedColor,
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          },
+          `vis-${i}`
+        ))
+      ]
     }
   );
 }
+const MIN_HIT_AREA_SCREEN_PX$4 = 20;
 function Square({
   isSelected,
   color = "#000000",
@@ -1316,7 +1306,8 @@ function Square({
   strokeDashArray,
   rect,
   scale,
-  onClick
+  onClick,
+  appearanceActive = false
 }) {
   const { width, height, x, y } = useMemo(() => {
     const outerW = rect.size.width;
@@ -1332,7 +1323,8 @@ function Square({
   }, [rect, strokeWidth]);
   const svgWidth = (width + strokeWidth) * scale;
   const svgHeight = (height + strokeWidth) * scale;
-  return /* @__PURE__ */ jsx(
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$4 / scale);
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       style: {
@@ -1345,31 +1337,49 @@ function Square({
       width: svgWidth,
       height: svgHeight,
       viewBox: `0 0 ${width + strokeWidth} ${height + strokeWidth}`,
-      children: /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x,
-          y,
-          width,
-          height,
-          fill: color,
-          opacity,
-          onPointerDown: onClick,
-          onTouchStart: onClick,
-          style: {
-            cursor: isSelected ? "move" : "pointer",
-            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
-            stroke: strokeColor ?? color,
-            strokeWidth,
-            ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-              strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
-            }
-          }
-        }
-      )
-    }
+      overflow: "visible",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x,
+            y,
+            width,
+            height,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+            }
+          }
+        ),
+        !appearanceActive && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x,
+            y,
+            width,
+            height,
+            fill: color,
+            opacity,
+            style: {
+              pointerEvents: "none",
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+              }
+            }
+          }
+        )
+      ]
+    }
   );
 }
+const MIN_HIT_AREA_SCREEN_PX$3 = 20;
 function Circle({
   color = "#000000",
   strokeColor,
@@ -1380,7 +1390,8 @@ function Circle({
   rect,
   scale,
   onClick,
-  isSelected
+  isSelected,
+  appearanceActive = false
 }) {
   const { width, height, cx, cy, rx, ry } = useMemo(() => {
     const outerW = rect.size.width;
@@ -1390,7 +1401,6 @@ function Circle({
     return {
       width: outerW,
       height: outerH,
-      // Centre of the fill sits strokeWidth/2 in from the edges
       cx: strokeWidth / 2 + innerW / 2,
       cy: strokeWidth / 2 + innerH / 2,
       rx: innerW / 2,
@@ -1399,7 +1409,8 @@ function Circle({
   }, [rect, strokeWidth]);
   const svgWidth = width * scale;
   const svgHeight = height * scale;
-  return /* @__PURE__ */ jsx(
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$3 / scale);
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       style: {
@@ -1412,31 +1423,49 @@ function Circle({
       width: svgWidth,
       height: svgHeight,
       viewBox: `0 0 ${width} ${height}`,
-      children: /* @__PURE__ */ jsx(
-        "ellipse",
-        {
-          cx,
-          cy,
-          rx,
-          ry,
-          fill: color,
-          opacity,
-          onPointerDown: onClick,
-          onTouchStart: onClick,
-          style: {
-            cursor: isSelected ? "move" : "pointer",
-            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
-            stroke: strokeColor ?? color,
-            strokeWidth,
-            ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-              strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+      overflow: "visible",
+      children: [
+        /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx,
+            cy,
+            rx,
+            ry,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
-        }
-      )
+        ),
+        !appearanceActive && /* @__PURE__ */ jsx(
+          "ellipse",
+          {
+            cx,
+            cy,
+            rx,
+            ry,
+            fill: color,
+            opacity,
+            style: {
+              pointerEvents: "none",
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+              }
+            }
+          }
+        )
+      ]
     }
   );
 }
+const MIN_HIT_AREA_SCREEN_PX$2 = 20;
 function Line({
   color = "transparent",
   opacity = 1,
@@ -1449,7 +1478,8 @@ function Line({
   lineEndings,
   scale,
   onClick,
-  isSelected
+  isSelected,
+  appearanceActive = false
 }) {
   const { x1, y1, x2, y2 } = useMemo(() => {
     return {
@@ -1468,6 +1498,7 @@ function Line({
   }, [lineEndings, strokeWidth, x1, y1, x2, y2]);
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$2 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1490,18 +1521,13 @@ function Line({
             y1,
             x2,
             y2,
-            opacity,
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
-              stroke: strokeColor,
-              strokeWidth,
-              strokeLinecap: "butt",
-              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
-              }
+              strokeLinecap: "butt"
             }
           }
         ),
@@ -1510,19 +1536,15 @@ function Line({
           {
             d: endings.start.d,
             transform: endings.start.transform,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
-            stroke: strokeColor,
             style: {
               cursor: isSelected ? "move" : "pointer",
-              strokeWidth,
-              strokeLinecap: "butt",
               pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
-              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
-              }
-            },
-            fill: endings.start.filled ? color : "none"
+              strokeLinecap: "butt"
+            }
           }
         ),
         endings.end && /* @__PURE__ */ jsx(
@@ -1530,25 +1552,77 @@ function Line({
           {
             d: endings.end.d,
             transform: endings.end.transform,
-            stroke: strokeColor,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
-              strokeWidth,
-              strokeLinecap: "butt",
               pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
-              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
-              }
-            },
-            fill: endings.end.filled ? color : "none"
+              strokeLinecap: "butt"
+            }
           }
-        )
+        ),
+        !appearanceActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1,
+              y1,
+              x2,
+              y2,
+              opacity,
+              style: {
+                pointerEvents: "none",
+                stroke: strokeColor,
+                strokeWidth,
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
+              }
+            }
+          ),
+          endings.start && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: endings.start.d,
+              transform: endings.start.transform,
+              stroke: strokeColor,
+              fill: endings.start.filled ? color : "none",
+              style: {
+                pointerEvents: "none",
+                strokeWidth,
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
+              }
+            }
+          ),
+          endings.end && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: endings.end.d,
+              transform: endings.end.transform,
+              stroke: strokeColor,
+              fill: endings.end.filled ? color : "none",
+              style: {
+                pointerEvents: "none",
+                strokeWidth,
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
+              }
+            }
+          )
+        ] })
       ]
     }
   );
 }
+const MIN_HIT_AREA_SCREEN_PX$1 = 20;
 function Polyline({
   rect,
   vertices,
@@ -1556,10 +1630,13 @@ function Polyline({
   strokeColor = "#000000",
   opacity = 1,
   strokeWidth,
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
   scale,
   isSelected,
   onClick,
-  lineEndings
+  lineEndings,
+  appearanceActive = false
 }) {
   const localPts = useMemo(
     () => vertices.map(({ x, y }) => ({ x: x - rect.origin.x, y: y - rect.origin.y })),
@@ -1579,7 +1656,6 @@ function Polyline({
       lineEndings == null ? void 0 : lineEndings.start,
       strokeWidth,
       startRad + Math.PI,
-      // tip points outward from line start
       localPts[0].x,
       localPts[0].y
     );
@@ -1587,7 +1663,6 @@ 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
     );
@@ -1595,6 +1670,7 @@ function Polyline({
   }, [localPts, lineEndings, strokeWidth]);
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$1 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1614,13 +1690,11 @@ function Polyline({
           "path",
           {
             d: pathData,
+            fill: "none",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
-            opacity,
             style: {
-              fill: "none",
-              stroke: strokeColor ?? color,
-              strokeWidth,
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
               strokeLinecap: "butt",
@@ -1633,13 +1707,12 @@ function Polyline({
           {
             d: endings.start.d,
             transform: endings.start.transform,
-            stroke: strokeColor,
-            fill: endings.start.filled ? color : "none",
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
-              strokeWidth,
               pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
@@ -1650,22 +1723,76 @@ function Polyline({
           {
             d: endings.end.d,
             transform: endings.end.transform,
-            stroke: strokeColor,
-            fill: endings.end.filled ? color : "none",
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
-              strokeWidth,
               pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
-        )
+        ),
+        !appearanceActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathData,
+              opacity,
+              style: {
+                fill: "none",
+                stroke: strokeColor ?? color,
+                strokeWidth,
+                pointerEvents: "none",
+                strokeLinecap: "butt",
+                strokeLinejoin: "miter",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
+              }
+            }
+          ),
+          endings.start && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: endings.start.d,
+              transform: endings.start.transform,
+              stroke: strokeColor,
+              fill: endings.start.filled ? color : "none",
+              style: {
+                pointerEvents: "none",
+                strokeWidth,
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
+              }
+            }
+          ),
+          endings.end && /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: endings.end.d,
+              transform: endings.end.transform,
+              stroke: strokeColor,
+              fill: endings.end.filled ? color : "none",
+              style: {
+                pointerEvents: "none",
+                strokeWidth,
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
+              }
+            }
+          )
+        ] })
       ]
     }
   );
 }
+const MIN_HIT_AREA_SCREEN_PX = 20;
 function Polygon({
   rect,
   vertices,
@@ -1679,9 +1806,8 @@ function Polygon({
   isSelected,
   onClick,
   currentVertex,
-  // A preview-only prop
-  handleSize = 14
-  // in CSS pixels
+  handleSize = 14,
+  appearanceActive = false
 }) {
   const allPoints = currentVertex ? [...vertices, currentVertex] : vertices;
   const localPts = useMemo(
@@ -1697,6 +1823,7 @@ function Polygon({
   const isPreviewing = currentVertex && vertices.length > 0;
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1716,62 +1843,139 @@ function Polygon({
           "path",
           {
             d: pathData,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
             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(",")
-              }
+              strokeLinejoin: "miter"
             }
           }
         ),
-        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
-          }
-        )
+        !appearanceActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: pathData,
+              opacity,
+              style: {
+                fill: currentVertex ? "none" : color,
+                stroke: strokeColor ?? color,
+                strokeWidth,
+                pointerEvents: "none",
+                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,
+                pointerEvents: "none"
+              }
+            }
+          ),
+          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,
+              style: { pointerEvents: "none" }
+            }
+          )
+        ] })
       ]
     }
   );
 }
+function Text({
+  isSelected,
+  color = "#facc15",
+  opacity = 1,
+  onClick,
+  appearanceActive = false
+}) {
+  const lineColor = getContrastStrokeColor(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 2,
+        pointerEvents: isSelected ? "none" : "auto",
+        cursor: isSelected ? "move" : "pointer"
+      },
+      onPointerDown: onClick,
+      children: !appearanceActive && /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none"
+          },
+          viewBox: "0 0 20 20",
+          width: "100%",
+          height: "100%",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M 0.5 15.5 L 0.5 0.5 L 19.5 0.5 L 19.5 15.5 L 8.5 15.5 L 6.5 19.5 L 4.5 15.5 Z",
+                fill: color,
+                opacity,
+                stroke: lineColor,
+                strokeWidth: "1",
+                strokeLinejoin: "miter"
+              }
+            ),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "4.25", x2: "17.5", y2: "4.25", stroke: lineColor, strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "8", x2: "17.5", y2: "8", stroke: lineColor, strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "11.75", x2: "17.5", y2: "11.75", stroke: lineColor, strokeWidth: "1" })
+          ]
+        }
+      )
+    }
+  );
+}
 function FreeText({
+  documentId,
   isSelected,
   isEditing,
   annotation,
   pageIndex,
   scale,
-  onClick
+  onClick,
+  appearanceActive = false
 }) {
   const editorRef = useRef(null);
-  const { provides: annotationProvides } = useAnnotationCapability();
+  const editingRef = useRef(false);
+  const { provides: annotationCapability } = useAnnotationCapability();
+  const annotationProvides = (annotationCapability == null ? void 0 : annotationCapability.forDocument(documentId)) ?? null;
   const [isIOS, setIsIOS] = useState(false);
   useEffect(() => {
     if (isEditing && editorRef.current) {
+      editingRef.current = true;
       const editor = editorRef.current;
       editor.focus();
       const selection = window.getSelection();
@@ -1794,6 +1998,8 @@ function FreeText({
     }
   }, []);
   const handleBlur = () => {
+    if (!editingRef.current) return;
+    editingRef.current = false;
     if (!annotationProvides) return;
     if (!editorRef.current) return;
     annotationProvides.updateAnnotation(pageIndex, annotation.object.id, {
@@ -1815,10 +2021,10 @@ function FreeText({
         height: annotation.object.rect.size.height * scale,
         cursor: isSelected && !isEditing ? "move" : "default",
         pointerEvents: isSelected && !isEditing ? "none" : "auto",
-        zIndex: 2
+        zIndex: 2,
+        opacity: appearanceActive ? 0 : 1
       },
       onPointerDown: onClick,
-      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         "span",
         {
@@ -1945,7 +2151,6 @@ function Stamp({
         cursor: "pointer"
       },
       onPointerDown: onClick,
-      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         RenderAnnotation,
         {
@@ -1984,7 +2189,7 @@ function Link({
     }
     return void 0;
   }, [strokeStyle, strokeDashArray, strokeWidth]);
-  const isUnderline2 = strokeStyle === PdfAnnotationBorderStyle.UNDERLINE;
+  const isUnderline = strokeStyle === PdfAnnotationBorderStyle.UNDERLINE;
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -2008,14 +2213,13 @@ function Link({
             height,
             fill: "transparent",
             onPointerDown: hasIRT ? void 0 : onClick,
-            onTouchStart: hasIRT ? void 0 : onClick,
             style: {
               cursor: hasIRT ? "default" : isSelected ? "move" : "pointer",
               pointerEvents: hasIRT ? "none" : isSelected ? "none" : "visible"
             }
           }
         ),
-        isUnderline2 ? (
+        isUnderline ? (
           // Underline style: line at bottom of rect
           /* @__PURE__ */ jsx(
             "line",
@@ -2055,45 +2259,603 @@ function Link({
     }
   );
 }
-function Annotations(annotationsProps) {
-  const { documentId, pageIndex, scale, pageWidth, pageHeight, selectionMenu } = annotationsProps;
-  const { provides: annotationCapability } = useAnnotationCapability();
-  const { provides: selectionProvides } = useSelectionCapability();
-  const [annotations, setAnnotations] = useState([]);
-  const { register } = usePointerHandlers({ documentId, pageIndex });
-  const [allSelectedIds, setAllSelectedIds] = useState([]);
-  const [editingId, setEditingId] = useState(null);
-  const annotationProvides = useMemo(
-    () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
-    [annotationCapability, documentId]
-  );
-  const isMultiSelected = allSelectedIds.length > 1;
-  useEffect(() => {
-    if (annotationProvides) {
-      const currentState = annotationProvides.getState();
-      setAnnotations(getAnnotationsByPageIndex(currentState, pageIndex));
-      setAllSelectedIds(getSelectedAnnotationIds(currentState));
-      return annotationProvides.onStateChange((state) => {
-        setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
-        setAllSelectedIds(getSelectedAnnotationIds(state));
-      });
-    }
-  }, [annotationProvides, pageIndex]);
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (_, pe) => {
-        if (pe.target === pe.currentTarget && annotationProvides) {
-          annotationProvides.deselectAnnotation();
-          setEditingId(null);
-        }
-      }
-    }),
-    [annotationProvides]
-  );
-  const handleClick = useCallback(
-    (e, annotation) => {
-      e.stopPropagation();
-      if (annotationProvides && selectionProvides) {
+function Highlight({
+  strokeColor,
+  opacity = 0.5,
+  segmentRects,
+  rect,
+  scale,
+  onClick,
+  style,
+  appearanceActive = false
+}) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((b, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onPointerDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
+        top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
+        width: b.size.width * scale,
+        height: b.size.height * scale,
+        background: appearanceActive ? "transparent" : resolvedColor,
+        opacity: appearanceActive ? void 0 : opacity,
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : void 0,
+        ...style
+      }
+    },
+    i
+  )) });
+}
+function Underline({
+  strokeColor,
+  opacity = 0.5,
+  segmentRects,
+  rect,
+  scale,
+  onClick,
+  style,
+  appearanceActive = false
+}) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onPointerDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      children: !appearanceActive && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: thickness,
+            background: resolvedColor,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Strikeout({
+  strokeColor,
+  opacity = 0.5,
+  segmentRects,
+  rect,
+  scale,
+  onClick,
+  style,
+  appearanceActive = false
+}) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onPointerDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      children: !appearanceActive && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            width: "100%",
+            height: thickness,
+            background: resolvedColor,
+            opacity,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Squiggly({
+  strokeColor,
+  opacity = 0.5,
+  segmentRects,
+  rect,
+  scale,
+  onClick,
+  style,
+  appearanceActive = false
+}) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
+  const amplitude = 2 * scale;
+  const period = 6 * scale;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${period}" height="${amplitude * 2}" viewBox="0 0 ${period} ${amplitude * 2}">
+      <path d="M0 ${amplitude} Q ${period / 4} 0 ${period / 2} ${amplitude} T ${period} ${amplitude}"
+            fill="none" stroke="${resolvedColor}" stroke-width="${amplitude}" stroke-linecap="round"/>
+    </svg>`;
+  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onPointerDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      children: !appearanceActive && /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: amplitude * 2,
+            backgroundImage: svgDataUri,
+            backgroundRepeat: "repeat-x",
+            backgroundSize: `${period}px ${amplitude * 2}px`,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Caret({
+  isSelected,
+  strokeColor = "#000000",
+  opacity = 1,
+  rect,
+  scale,
+  onClick,
+  appearanceActive = false
+}) {
+  const { width, height, path } = useMemo(() => {
+    const w = rect.size.width;
+    const h = rect.size.height;
+    const midX = w / 2;
+    const d = [
+      `M 0 ${h}`,
+      `C ${w * 0.27} ${h} ${midX} ${h - h * 0.44} ${midX} 0`,
+      `C ${midX} ${h - h * 0.44} ${w - w * 0.27} ${h} ${w} ${h}`,
+      "Z"
+    ].join(" ");
+    return { width: w, height: h, path: d };
+  }, [rect]);
+  const svgWidth = width * scale;
+  const svgHeight = height * scale;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: svgWidth,
+        height: svgHeight,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${width} ${height}`,
+      overflow: "visible",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: 4,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : "visible"
+            }
+          }
+        ),
+        !appearanceActive && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: strokeColor,
+            stroke: strokeColor,
+            strokeWidth: 0.5,
+            opacity,
+            fillRule: "evenodd",
+            style: { pointerEvents: "none" }
+          }
+        )
+      ]
+    }
+  );
+}
+const builtInRenderers = [
+  // --- Drawing ---
+  createRenderer({
+    id: "ink",
+    matches: (a) => a.type === PdfAnnotationSubtype.INK,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Ink,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  // --- Shapes ---
+  createRenderer({
+    id: "square",
+    matches: (a) => a.type === PdfAnnotationSubtype.SQUARE,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Square,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  createRenderer({
+    id: "circle",
+    matches: (a) => a.type === PdfAnnotationSubtype.CIRCLE,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Circle,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  // --- Lines & Vertex-based ---
+  createRenderer({
+    id: "line",
+    matches: (a) => a.type === PdfAnnotationSubtype.LINE,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+      Line,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ) }),
+    vertexConfig: {
+      extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
+      transformAnnotation: (a, v) => ({
+        ...a,
+        linePoints: { start: v[0], end: v[1] }
+      })
+    },
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: true }
+  }),
+  createRenderer({
+    id: "polyline",
+    matches: (a) => a.type === PdfAnnotationSubtype.POLYLINE,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+      Polyline,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ) }),
+    vertexConfig: {
+      extractVertices: (a) => a.vertices,
+      transformAnnotation: (a, vertices) => ({ ...a, vertices })
+    },
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: true }
+  }),
+  createRenderer({
+    id: "polygon",
+    matches: (a) => a.type === PdfAnnotationSubtype.POLYGON,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+      Polygon,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ) }),
+    vertexConfig: {
+      extractVertices: (a) => a.vertices,
+      transformAnnotation: (a, vertices) => ({ ...a, vertices })
+    },
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: true }
+  }),
+  // --- Text Markup ---
+  createRenderer({
+    id: "highlight",
+    matches: (a) => a.type === PdfAnnotationSubtype.HIGHLIGHT,
+    render: ({ currentObject, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Highlight,
+      {
+        ...currentObject,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
+    containerStyle: (a) => ({
+      mixBlendMode: blendModeToCss(a.blendMode ?? PdfBlendMode.Multiply)
+    })
+  }),
+  createRenderer({
+    id: "underline",
+    matches: (a) => a.type === PdfAnnotationSubtype.UNDERLINE,
+    render: ({ currentObject, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Underline,
+      {
+        ...currentObject,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "strikeout",
+    matches: (a) => a.type === PdfAnnotationSubtype.STRIKEOUT,
+    render: ({ currentObject, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Strikeout,
+      {
+        ...currentObject,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "squiggly",
+    matches: (a) => a.type === PdfAnnotationSubtype.SQUIGGLY,
+    render: ({ currentObject, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Squiggly,
+      {
+        ...currentObject,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  // --- Text Comment ---
+  createRenderer({
+    id: "text",
+    matches: (a) => a.type === PdfAnnotationSubtype.TEXT && !a.inReplyToId,
+    render: ({ currentObject, isSelected, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        isSelected,
+        color: currentObject.strokeColor ?? currentObject.color,
+        opacity: currentObject.opacity,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false }
+  }),
+  // --- Caret ---
+  createRenderer({
+    id: "caret",
+    matches: (a) => a.type === PdfAnnotationSubtype.CARET,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Caret,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  // --- FreeText ---
+  createRenderer({
+    id: "freeText",
+    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
+    render: ({
+      annotation,
+      currentObject,
+      isSelected,
+      isEditing,
+      scale,
+      pageIndex,
+      documentId,
+      onClick,
+      appearanceActive
+    }) => /* @__PURE__ */ jsx(
+      FreeText,
+      {
+        documentId,
+        isSelected,
+        isEditing,
+        annotation: { ...annotation, object: currentObject },
+        pageIndex,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
+    isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
+    onDoubleClick: (id, setEditingId) => setEditingId(id)
+  }),
+  // --- Stamp ---
+  createRenderer({
+    id: "stamp",
+    matches: (a) => a.type === PdfAnnotationSubtype.STAMP,
+    render: ({ annotation, isSelected, documentId, pageIndex, scale, onClick }) => /* @__PURE__ */ jsx(
+      Stamp,
+      {
+        isSelected,
+        annotation,
+        documentId,
+        pageIndex,
+        scale,
+        onClick
+      }
+    ),
+    useAppearanceStream: false,
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  // --- Link ---
+  createRenderer({
+    id: "link",
+    matches: (a) => a.type === PdfAnnotationSubtype.LINK,
+    render: ({ currentObject, isSelected, scale, onClick }) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        hasIRT: !!currentObject.inReplyToId
+      }
+    ),
+    interactionDefaults: {
+      isDraggable: false,
+      isResizable: false,
+      isRotatable: false
+    },
+    useAppearanceStream: false,
+    selectOverride: (e, annotation, helpers) => {
+      e.stopPropagation();
+      helpers.clearSelection();
+      if (annotation.object.inReplyToId) {
+        const parent = helpers.allAnnotations.find(
+          (a) => a.object.id === annotation.object.inReplyToId
+        );
+        if (parent) {
+          helpers.selectAnnotation(parent.object.pageIndex, parent.object.id);
+          return;
+        }
+      }
+      helpers.selectAnnotation(helpers.pageIndex, annotation.object.id);
+    },
+    hideSelectionMenu: (a) => !!a.inReplyToId
+  })
+];
+function Annotations(annotationsProps) {
+  const { documentId, pageIndex, scale, pageWidth, pageHeight, selectionMenu } = annotationsProps;
+  const { provides: annotationCapability } = useAnnotationCapability();
+  const { provides: selectionProvides } = useSelectionCapability();
+  const [annotations, setAnnotations] = useState([]);
+  const { register } = usePointerHandlers({ documentId, pageIndex });
+  const [allSelectedIds, setAllSelectedIds] = useState([]);
+  const [editingId, setEditingId] = useState(null);
+  const [appearanceMap, setAppearanceMap] = useState({});
+  const prevScaleRef = useRef(scale);
+  const annotationProvides = useMemo(
+    () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
+    [annotationCapability, documentId]
+  );
+  const isMultiSelected = allSelectedIds.length > 1;
+  useEffect(() => {
+    if (annotationProvides) {
+      const currentState = annotationProvides.getState();
+      setAnnotations(getAnnotationsByPageIndex(currentState, pageIndex));
+      setAllSelectedIds(getSelectedAnnotationIds(currentState));
+      return annotationProvides.onStateChange((state) => {
+        setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
+        setAllSelectedIds(getSelectedAnnotationIds(state));
+      });
+    }
+  }, [annotationProvides, pageIndex]);
+  useEffect(() => {
+    if (!annotationProvides) return;
+    if (prevScaleRef.current !== scale) {
+      annotationProvides.invalidatePageAppearances(pageIndex);
+      prevScaleRef.current = scale;
+    }
+    const task = annotationProvides.getPageAppearances(pageIndex, {
+      scaleFactor: scale,
+      dpr: typeof window !== "undefined" ? window.devicePixelRatio : 1
+    });
+    task.wait(
+      (map) => setAppearanceMap(map),
+      () => setAppearanceMap({})
+    );
+  }, [annotationProvides, pageIndex, scale]);
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (_, pe) => {
+        if (pe.target === pe.currentTarget && annotationProvides) {
+          annotationProvides.deselectAnnotation();
+          setEditingId(null);
+        }
+      }
+    }),
+    [annotationProvides]
+  );
+  const handleClick = useCallback(
+    (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides && selectionProvides) {
         selectionProvides.clear();
         const isModifierPressed = "metaKey" in e ? e.metaKey || e.ctrlKey : false;
         if (isModifierPressed) {
@@ -2108,23 +2870,6 @@ function Annotations(annotationsProps) {
     },
     [annotationProvides, selectionProvides, editingId, pageIndex]
   );
-  const handleLinkClick = useCallback(
-    (e, annotation) => {
-      e.stopPropagation();
-      if (!annotationProvides || !selectionProvides) return;
-      selectionProvides.clear();
-      if (annotation.object.inReplyToId) {
-        const parentId = annotation.object.inReplyToId;
-        const parent = annotations.find((a) => a.object.id === parentId);
-        if (parent) {
-          annotationProvides.selectAnnotation(parent.object.pageIndex, parentId);
-          return;
-        }
-      }
-      annotationProvides.selectAnnotation(pageIndex, annotation.object.id);
-    },
-    [annotationProvides, selectionProvides, annotations, pageIndex]
-  );
   useEffect(() => {
     return register(handlers, {
       documentId
@@ -2206,651 +2951,102 @@ function Annotations(annotationsProps) {
     const allSelected = annotationProvides.getSelectedAnnotations();
     return allSelected.length > 1 && allSelected.every((ta) => ta.object.pageIndex === pageIndex);
   }, [annotationProvides, pageIndex, allSelectedIds]);
+  const getAppearanceForAnnotation = useCallback(
+    (ta) => {
+      if (ta.dictMode) return null;
+      if (ta.object.rotation && ta.object.unrotatedRect) return null;
+      const appearances = appearanceMap[ta.object.id];
+      if (!(appearances == null ? void 0 : appearances.normal)) return null;
+      return appearances;
+    },
+    [appearanceMap]
+  );
+  const allRenderers = useMemo(() => {
+    const external = annotationsProps.annotationRenderers ?? [];
+    const externalIds = new Set(external.map((r) => r.id));
+    return [...external, ...builtInRenderers.filter((r) => !externalIds.has(r.id))];
+  }, [annotationsProps.annotationRenderers]);
+  const resolveRenderer = useCallback(
+    (annotation) => allRenderers.find((r) => r.matches(annotation.object)) ?? null,
+    [allRenderers]
+  );
+  const selectHelpers = useMemo(
+    () => ({
+      defaultSelect: handleClick,
+      selectAnnotation: (pi, id) => annotationProvides == null ? void 0 : annotationProvides.selectAnnotation(pi, id),
+      clearSelection: () => selectionProvides == null ? void 0 : selectionProvides.clear(),
+      allAnnotations: annotations,
+      pageIndex
+    }),
+    [handleClick, annotationProvides, selectionProvides, annotations, pageIndex]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     annotations.map((annotation) => {
+      var _a, _b, _c;
+      const renderer = resolveRenderer(annotation);
+      if (!renderer) return null;
+      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(annotation.object);
       const isSelected = allSelectedIds.includes(annotation.object.id);
       const isEditing = editingId === annotation.object.id;
-      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(annotation.object);
-      for (const renderer of annotationsProps.annotationRenderers ?? []) {
-        const element = renderer.tryRender(annotation, {
+      const defaults = renderer.interactionDefaults;
+      const resolvedDraggable = resolveInteractionProp(
+        tool == null ? void 0 : tool.interaction.isDraggable,
+        annotation.object,
+        (defaults == null ? void 0 : defaults.isDraggable) ?? true
+      );
+      const finalDraggable = renderer.isDraggable ? renderer.isDraggable(resolvedDraggable, { isEditing }) : resolvedDraggable;
+      const useAP = ((_a = tool == null ? void 0 : tool.behavior) == null ? void 0 : _a.useAppearanceStream) ?? renderer.useAppearanceStream ?? true;
+      const onSelect = renderer.selectOverride ? (e) => renderer.selectOverride(e, annotation, selectHelpers) : (e) => handleClick(e, annotation);
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
           isSelected,
-          scale,
-          pageIndex,
-          onClick: (e) => handleClick(e, annotation)
-        });
-        if (element) {
-          return /* @__PURE__ */ jsx(
-            AnnotationContainer,
-            {
-              trackedAnnotation: annotation,
-              isSelected,
-              isMultiSelected,
-              isDraggable: resolveInteractionProp(
-                tool == null ? void 0 : tool.interaction.isDraggable,
-                annotation.object,
-                false
-              ),
-              isResizable: resolveInteractionProp(
-                tool == null ? void 0 : tool.interaction.isResizable,
-                annotation.object,
-                false
-              ),
-              lockAspectRatio: resolveInteractionProp(
-                tool == null ? void 0 : tool.interaction.lockAspectRatio,
-                annotation.object,
-                false
-              ),
-              isRotatable: resolveInteractionProp(
-                tool == null ? void 0 : tool.interaction.isRotatable,
-                annotation.object,
-                false
-              ),
-              selectionMenu,
-              onSelect: (e) => handleClick(e, annotation),
-              style: {
-                mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-              },
-              ...annotationsProps,
-              children: () => element
-            },
-            annotation.object.id
-          );
-        }
-      }
-      if (isInk(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              true
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(
-              Ink,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.object.id
-        );
-      }
-      if (isSquare(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              true
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(
-              Square,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.object.id
-        );
-      }
-      if (isCircle(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              true
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(
-              Circle,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.object.id
-        );
-      }
-      if (isUnderline(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              false
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              false
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            zIndex: 0,
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(Underline, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-          },
-          annotation.object.id
-        );
-      }
-      if (isStrikeout(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              false
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              false
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            zIndex: 0,
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(Strikeout, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
+          isEditing,
+          isMultiSelected,
+          isDraggable: finalDraggable,
+          isResizable: resolveInteractionProp(
+            tool == null ? void 0 : tool.interaction.isResizable,
+            annotation.object,
+            (defaults == null ? void 0 : defaults.isResizable) ?? false
+          ),
+          lockAspectRatio: resolveInteractionProp(
+            tool == null ? void 0 : tool.interaction.lockAspectRatio,
+            annotation.object,
+            (defaults == null ? void 0 : defaults.lockAspectRatio) ?? false
+          ),
+          isRotatable: resolveInteractionProp(
+            tool == null ? void 0 : tool.interaction.isRotatable,
+            annotation.object,
+            (defaults == null ? void 0 : defaults.isRotatable) ?? false
+          ),
+          vertexConfig: renderer.vertexConfig,
+          selectionMenu: ((_b = renderer.hideSelectionMenu) == null ? void 0 : _b.call(renderer, annotation.object)) ? void 0 : selectionMenu,
+          onSelect,
+          onDoubleClick: renderer.onDoubleClick ? (e) => {
+            e.stopPropagation();
+            renderer.onDoubleClick(annotation.object.id, setEditingId);
+          } : void 0,
+          zIndex: renderer.zIndex,
+          style: ((_c = renderer.containerStyle) == null ? void 0 : _c.call(renderer, annotation.object)) ?? {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
           },
-          annotation.object.id
-        );
-      }
-      if (isSquiggly(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              false
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              false
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            zIndex: 0,
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(Squiggly, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-          },
-          annotation.object.id
-        );
-      }
-      if (isHighlight(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              false
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              false
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            zIndex: 0,
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Multiply)
-            },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(Highlight, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-          },
-          annotation.object.id
-        );
-      }
-      if (isLine(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            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$1, { children: /* @__PURE__ */ jsx(
-              Line,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            ) })
-          },
-          annotation.object.id
-        );
-      }
-      if (isPolyline(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            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$1, { children: /* @__PURE__ */ jsx(
-              Polyline,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            ) })
-          },
-          annotation.object.id
-        );
-      }
-      if (isPolygon(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              false
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            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$1, { children: /* @__PURE__ */ jsx(
-              Polygon,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            ) })
-          },
-          annotation.object.id
-        );
-      }
-      if (isFreeText(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(tool == null ? void 0 : tool.interaction.isDraggable, annotation.object, true) && !isEditing,
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              true
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            onDoubleClick: (e) => {
-              e.stopPropagation();
-              setEditingId(annotation.object.id);
-            },
-            ...annotationsProps,
-            children: (object) => /* @__PURE__ */ jsx(
-              FreeText,
-              {
-                isSelected,
-                isEditing,
-                annotation: {
-                  ...annotation,
-                  object
-                },
-                pageIndex,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.object.id
-        );
-      }
-      if (isStamp(annotation)) {
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isMultiSelected,
-            isDraggable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isDraggable,
-              annotation.object,
-              true
-            ),
-            isResizable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isResizable,
-              annotation.object,
-              true
-            ),
-            lockAspectRatio: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.lockAspectRatio,
-              annotation.object,
-              false
-            ),
-            isRotatable: resolveInteractionProp(
-              tool == null ? void 0 : tool.interaction.isRotatable,
-              annotation.object,
-              true
-            ),
-            selectionMenu,
-            onSelect: (e) => handleClick(e, annotation),
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: (_object) => /* @__PURE__ */ jsx(
-              Stamp,
-              {
-                isSelected,
-                annotation,
-                documentId,
-                pageIndex,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.object.id
-        );
-      }
-      if (isLink(annotation)) {
-        const hasIRT = !!annotation.object.inReplyToId;
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
+          appearance: useAP ? getAppearanceForAnnotation(annotation) : void 0,
+          ...annotationsProps,
+          children: (currentObject, { appearanceActive }) => renderer.render({
+            annotation,
+            currentObject,
             isSelected,
-            isMultiSelected,
-            isDraggable: false,
-            isResizable: false,
-            lockAspectRatio: false,
-            isRotatable: false,
-            selectionMenu: hasIRT ? void 0 : selectionMenu,
-            onSelect: (e) => handleLinkClick(e, annotation),
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(
-              Link,
-              {
-                ...obj,
-                isSelected,
-                scale,
-                onClick: (e) => handleLinkClick(e, annotation),
-                hasIRT
-              }
-            )
-          },
-          annotation.object.id
-        );
-      }
-      return null;
+            isEditing,
+            scale,
+            pageIndex,
+            documentId,
+            onClick: onSelect,
+            appearanceActive
+          })
+        },
+        annotation.object.id
+      );
     }),
     allSelectedOnSamePage && selectedAnnotationsOnPage.length >= 2 && /* @__PURE__ */ jsx(
       GroupSelectionBox,
@@ -2981,6 +3177,8 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           )
         }
       );
+    case PdfAnnotationSubtype.CARET:
+      return null;
     default:
       return null;
   }
@@ -3177,20 +3375,6 @@ function AnnotationLayer({
     }
   );
 }
-function createRenderer(entry) {
-  return {
-    id: entry.id,
-    tryRender: (annotation, props) => {
-      if (entry.matches(annotation.object)) {
-        return entry.render({
-          ...props,
-          annotation
-        });
-      }
-      return null;
-    }
-  };
-}
 const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(AnnotationRendererProvider).build();
 export {
   AnnotationLayer,