@papyrus-sdk/ui-react-native 0.2.35-beta.0 → 0.2.35-beta.1

package/dist/index.js

@@ -25732,13 +25732,16 @@ var shouldUseNativePdfViewer = ({
   nativePdfDocumentViewAvailable = false,
   pageTheme = "normal",
   viewMode = "continuous",
-  rotation = 0
+  rotation = 0,
+  activeTool = "select",
+  nativeInkOverlayAvailable = true
 }) => {
   if (viewerMode !== "native" || pageCount <= 0 || isWebView || !nativeEngineId) {
     return false;
   }
   const implementation = resolveNativePdfViewerImplementation(platform);
   if (implementation === "android") return true;
+  if (activeTool === "ink" && !nativeInkOverlayAvailable) return false;
   return implementation === "ios" && nativePdfDocumentViewAvailable && pageTheme === "normal" && viewMode !== "double" && rotation === 0;
 };
 
@@ -26088,7 +26091,6 @@ var styles3 = import_react_native3.StyleSheet.create({
 // components/DedicatedIosPdfViewer.tsx
 var import_react5 = require("react");
 var import_react_native4 = require("react-native");
-var import_clipboard5 = __toESM(require("@react-native-clipboard/clipboard"));
 var import_core4 = require("@papyrus-sdk/core");
 var import_engine_native3 = require("@papyrus-sdk/engine-native");
 
@@ -26156,7 +26158,14 @@ var STRINGS = {
     more: "More",
     close: "Close",
     copy: "Copy",
-    define: "Define"
+    define: "Define",
+    annotate: "Annotate",
+    annotationHighlight: "Highlight",
+    annotationUnderline: "Underline",
+    annotationStrikeout: "Strikeout",
+    annotationSquiggly: "Squiggly",
+    annotationNote: "Note",
+    deleteAnnotation: "Delete"
   },
   "pt-BR": {
     pages: "Paginas",
@@ -26220,11 +26229,37 @@ var STRINGS = {
     more: "Mais",
     close: "Fechar",
     copy: "Copiar",
-    define: "Definir"
+    define: "Definir",
+    annotate: "Anotar",
+    annotationHighlight: "Destacar",
+    annotationUnderline: "Sublinhar",
+    annotationStrikeout: "Riscar",
+    annotationSquiggly: "Ondulado",
+    annotationNote: "Nota",
+    deleteAnnotation: "Apagar"
   }
 };
 var getStrings = (locale) => STRINGS[locale ?? "en"] ?? STRINGS.en;
 
+// components/annotationDeletion.ts
+var MARKUP_ANNOTATION_TYPES = /* @__PURE__ */ new Set([
+  "highlight",
+  "underline",
+  "strikeout",
+  "squiggly"
+]);
+function resolveMarkupAnnotationDeleteFallback(annotations, selectedAnnotationId, hasNativeEditMenu) {
+  if (!selectedAnnotationId || hasNativeEditMenu) return null;
+  const selected = annotations.find(
+    (annotation) => annotation.id === selectedAnnotationId
+  );
+  return selected && MARKUP_ANNOTATION_TYPES.has(selected.type) ? selected : null;
+}
+function deleteAnnotationAndClearSelection(annotationId, removeAnnotation, setSelectedAnnotation) {
+  removeAnnotation(annotationId);
+  setSelectedAnnotation(null);
+}
+
 // components/nativePdfViewerEvents.ts
 var resolveNativePdfTextSelection = (selection) => {
   if (typeof selection?.text !== "string" || !selection.text.trim() || !Number.isInteger(selection.pageIndex) || (selection.pageIndex ?? -1) < 0) {
@@ -26281,6 +26316,7 @@ var MOBILE_CHROME_SHOW_DELTA2 = 22;
 var MOBILE_CHROME_SHOW_DELAY_MS2 = 180;
 var MOBILE_CHROME_TOP_RESET2 = 16;
 var MIN_VISIBLE_PAGE_RATIO = 0.03;
+var supportsNativeEditMenu = Number.parseInt(String(import_react_native4.Platform.Version), 10) >= 16;
 function DedicatedIosPdfViewer({
   engine,
   maxPageWidth,
@@ -26293,15 +26329,41 @@ function DedicatedIosPdfViewer({
   const pageTheme = (0, import_core4.useViewerStore)((state) => state.pageTheme);
   const zoom = (0, import_core4.useViewerStore)((state) => state.zoom);
   const currentPage = (0, import_core4.useViewerStore)((state) => state.currentPage);
+  const searchResults = (0, import_core4.useViewerStore)((state) => state.searchResults);
+  const activeSearchIndex = (0, import_core4.useViewerStore)((state) => state.activeSearchIndex);
   const viewMode = (0, import_core4.useViewerStore)((state) => state.viewMode);
   const selectionActive = (0, import_core4.useViewerStore)((state) => state.selectionActive);
   const activeTool = (0, import_core4.useViewerStore)((state) => state.activeTool);
+  const activeDrawToolPreset = (0, import_core4.useViewerStore)(
+    (state) => state.activeDrawToolPreset
+  );
+  const inkStrokeWidth = (0, import_core4.useViewerStore)((state) => state.inkStrokeWidth);
+  const annotations = (0, import_core4.useViewerStore)((state) => state.annotations);
+  const annotationColor = (0, import_core4.useViewerStore)((state) => state.annotationColor);
+  const annotationSelectionColor = (0, import_core4.useViewerStore)((state) => state.accentColor);
+  const annotationOpacity = (0, import_core4.useViewerStore)((state) => state.annotationOpacity);
+  const selectedAnnotationId = (0, import_core4.useViewerStore)(
+    (state) => state.selectedAnnotationId
+  );
+  const addAnnotation = (0, import_core4.useViewerStore)((state) => state.addAnnotation);
+  const removeAnnotation = (0, import_core4.useViewerStore)((state) => state.removeAnnotation);
+  const setSelectedAnnotation = (0, import_core4.useViewerStore)(
+    (state) => state.setSelectedAnnotation
+  );
   const mobileChromeVisible = (0, import_core4.useViewerStore)(
     (state) => state.mobileChromeVisible
   );
   const setDocumentState = (0, import_core4.useViewerStore)((state) => state.setDocumentState);
+  const commitInkStrokesForPage = (0, import_core4.useViewerStore)(
+    (state) => state.commitInkStrokesForPage
+  );
   const engineId = getDedicatedAndroidPdfEngineId(engine);
   const nativeViewMode = viewMode === "single" ? "single" : "continuous";
+  const fallbackDeleteAnnotation = resolveMarkupAnnotationDeleteFallback(
+    annotations,
+    selectedAnnotationId,
+    supportsNativeEditMenu
+  );
   const resolvedMaxPageWidth = typeof maxPageWidth === "number" && Number.isFinite(maxPageWidth) && maxPageWidth > 0 ? maxPageWidth : void 0;
   const chromeVisibleRef = (0, import_react5.useRef)(mobileChromeVisible);
   const lastScrollOffsetYRef = (0, import_react5.useRef)(0);
@@ -26312,6 +26374,15 @@ function DedicatedIosPdfViewer({
   const lastVisiblePagesKeyRef = (0, import_react5.useRef)("");
   const [selection, setSelection] = (0, import_react5.useState)(null);
   const selectionRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    const pickerActive = supportsNativeEditMenu && activeTool === "ink";
+    setDocumentState({ nativeInkToolPickerActive: pickerActive });
+    return () => {
+      if (pickerActive) {
+        setDocumentState({ nativeInkToolPickerActive: false });
+      }
+    };
+  }, [activeTool, setDocumentState]);
   (0, import_react5.useEffect)(() => {
     chromeVisibleRef.current = mobileChromeVisible;
   }, [mobileChromeVisible]);
@@ -26342,16 +26413,12 @@ function DedicatedIosPdfViewer({
       if (nextSelection) {
         const { text, pageIndex } = nextSelection;
         onTextSelected?.({ text, pageIndex });
+      } else {
+        setSelectedAnnotation(null);
       }
     },
-    [onTextSelected, updateSelection]
+    [onTextSelected, setSelectedAnnotation, updateSelection]
   );
-  const copySelection = (0, import_react5.useCallback)(async () => {
-    const selection2 = selectionRef.current;
-    if (!selection2) return;
-    const copied = await copySelectionText(selection2.text, import_clipboard5.default);
-    if (copied) updateSelection(null);
-  }, [updateSelection]);
   const defineSelection = (0, import_react5.useCallback)(() => {
     const currentSelection = selectionRef.current;
     if (!currentSelection) return;
@@ -26361,6 +26428,18 @@ function DedicatedIosPdfViewer({
     });
     updateSelection(null);
   }, [onDefineSelection, updateSelection]);
+  const handleNativeDefineSelection = (0, import_react5.useCallback)(
+    (event) => {
+      const text = event.nativeEvent?.text;
+      const pageIndex = event.nativeEvent?.pageIndex;
+      if (typeof text !== "string" || text.length === 0 || typeof pageIndex !== "number" || !Number.isInteger(pageIndex) || pageIndex < 0) {
+        return;
+      }
+      onDefineSelection?.({ text, pageIndex });
+      updateSelection(null);
+    },
+    [onDefineSelection, updateSelection]
+  );
   const trackMobileChromeByOffset = (0, import_react5.useCallback)(
     (offsetY) => {
       if (pageCount <= 0) return;
@@ -26423,6 +26502,7 @@ function DedicatedIosPdfViewer({
     [trackMobileChromeByOffset]
   );
   const handleTap = (0, import_react5.useCallback)(() => {
+    setSelectedAnnotation(null);
     const nextVisible = resolvePageTapChromeVisibility({
       chromeVisible: chromeVisibleRef.current,
       selectionActive: selectionActive || selectionRef.current !== null,
@@ -26430,7 +26510,17 @@ function DedicatedIosPdfViewer({
       toolActive: activeTool !== "select"
     });
     if (nextVisible !== null) setMobileChromeVisible(nextVisible);
-  }, [activeTool, selectionActive, setMobileChromeVisible]);
+  }, [activeTool, selectionActive, setMobileChromeVisible, setSelectedAnnotation]);
+  const handleDeleteAnnotation = (0, import_react5.useCallback)(
+    (annotationId) => {
+      deleteAnnotationAndClearSelection(
+        annotationId,
+        removeAnnotation,
+        setSelectedAnnotation
+      );
+    },
+    [removeAnnotation, setSelectedAnnotation]
+  );
   const cappedViewerStyle = resolvedMaxPageWidth ? {
     width: "100%",
     maxWidth: resolvedMaxPageWidth,
@@ -26445,6 +26535,16 @@ function DedicatedIosPdfViewer({
         pageTheme,
         zoom,
         currentPage,
+        searchResults,
+        activeSearchIndex,
+        annotations,
+        activeTool,
+        activeDrawToolPreset,
+        inkStrokeWidth,
+        annotationColor,
+        annotationSelectionColor,
+        annotationOpacity,
+        selectedAnnotationId,
         viewMode: nativeViewMode,
         selectionActive: selection !== null,
         onPageChange: (event) => {
@@ -26467,40 +26567,64 @@ function DedicatedIosPdfViewer({
         onVisiblePagesChange: handleVisiblePagesChange,
         onScroll: handleScroll,
         onTap: handleTap,
-        onTextSelected: handleTextSelectionChange
+        onTextSelected: handleTextSelectionChange,
+        defineLabel: t.define,
+        annotateLabel: t.annotate,
+        annotationHighlightLabel: t.annotationHighlight,
+        annotationUnderlineLabel: t.annotationUnderline,
+        annotationStrikeoutLabel: t.annotationStrikeout,
+        annotationSquigglyLabel: t.annotationSquiggly,
+        annotationNoteLabel: t.annotationNote,
+        annotationDeleteLabel: t.deleteAnnotation,
+        onDefineSelection: onDefineSelection ? handleNativeDefineSelection : void 0,
+        onAnnotationCreated: (event) => addAnnotation(event.nativeEvent),
+        onAnnotationTap: (event) => setSelectedAnnotation(event.nativeEvent.id),
+        onAnnotationDelete: (event) => handleDeleteAnnotation(event.nativeEvent.id),
+        onAnnotationDeselected: () => setSelectedAnnotation(null),
+        onInkDrawingCommitted: (event) => {
+          const pageIndex = event.nativeEvent?.pageIndex;
+          const strokes = event.nativeEvent?.strokes;
+          if (typeof pageIndex !== "number" || !Number.isInteger(pageIndex) || pageIndex < 0 || !Array.isArray(strokes)) {
+            return;
+          }
+          commitInkStrokesForPage(pageIndex, strokes);
+        }
       }
     ),
-    selection && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: styles4.selectionToolbar, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native4.View, { style: styles4.toolbarContent, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react_native4.Pressable,
-        {
-          onPress: () => void copySelection(),
-          style: styles4.toolbarButton,
-          accessibilityRole: "button",
-          accessibilityLabel: t.copy,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconCopy, { size: 18, color: "#fff", strokeWidth: 2 }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { style: styles4.toolbarButtonText, children: t.copy })
-          ]
-        }
-      ),
-      onDefineSelection && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_react_native4.Pressable,
-        {
-          onPress: defineSelection,
-          style: styles4.toolbarButton,
-          accessibilityRole: "button",
-          accessibilityLabel: t.define,
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { style: styles4.toolbarButtonText, children: t.define })
-        }
-      )
-    ] }) })
+    selection && !supportsNativeEditMenu && onDefineSelection && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: styles4.selectionFallback, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native4.Pressable,
+      {
+        onPress: defineSelection,
+        style: styles4.fallbackButton,
+        accessibilityRole: "button",
+        accessibilityLabel: t.define,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { style: styles4.fallbackButtonText, children: t.define })
+      }
+    ) }),
+    fallbackDeleteAnnotation && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native4.View,
+      {
+        style: styles4.annotationDeleteFallback,
+        pointerEvents: "box-none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native4.Pressable,
+          {
+            onPress: () => handleDeleteAnnotation(fallbackDeleteAnnotation.id),
+            style: styles4.annotationDeleteButton,
+            accessibilityRole: "button",
+            accessibilityLabel: t.deleteAnnotation,
+            hitSlop: 8,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { style: styles4.annotationDeleteButtonText, children: t.deleteAnnotation })
+          }
+        )
+      }
+    )
   ] });
 }
 var styles4 = import_react_native4.StyleSheet.create({
   container: { flex: 1, alignItems: "stretch" },
   viewer: { flex: 1, width: "100%" },
-  selectionToolbar: {
+  selectionFallback: {
     position: "absolute",
     left: 0,
     right: 0,
@@ -26509,31 +26633,43 @@ var styles4 = import_react_native4.StyleSheet.create({
     justifyContent: "center",
     zIndex: 50
   },
-  toolbarContent: {
-    flexDirection: "row",
+  fallbackButton: {
     backgroundColor: "rgba(30, 30, 30, 0.92)",
     borderRadius: 16,
     paddingHorizontal: 8,
     paddingVertical: 8,
-    gap: 4,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.3,
     shadowRadius: 12,
     elevation: 10
   },
-  toolbarButton: {
-    minWidth: 76,
-    height: 40,
-    borderRadius: 10,
-    backgroundColor: "rgba(255,255,255,0.1)",
-    flexDirection: "row",
-    alignItems: "center",
+  fallbackButtonText: {
+    color: "#fff",
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  annotationDeleteFallback: {
+    position: "absolute",
+    left: 0,
+    right: 16,
+    bottom: 120,
+    alignItems: "flex-end",
     justifyContent: "center",
-    gap: 6,
-    paddingHorizontal: 10
+    zIndex: 51
   },
-  toolbarButtonText: {
+  annotationDeleteButton: {
+    backgroundColor: "#b91c1c",
+    borderRadius: 16,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 10
+  },
+  annotationDeleteButtonText: {
     color: "#fff",
     fontSize: 12,
     fontWeight: "700"
@@ -26727,7 +26863,7 @@ var shouldEnableViewerScrollForPageScrub = ({
   isScrubbing
 }) => viewerScrollEnabled && !isScrubbing;
 var resolvePageScrubberTouchPolicy = () => ({
-  responderTarget: "track",
+  responderTarget: "pill",
   claimOnStart: true,
   captureOnStart: true,
   captureOnMove: true,
@@ -26737,11 +26873,18 @@ var resolvePageScrubberOverlayStyle = () => ({
   zIndex: 30,
   elevation: 30
 });
-var resolvePageScrubberPointerEvents = () => "box-only";
+var resolvePageScrubberPointerEvents = () => "box-none";
 var resolvePageScrubberReleaseAction = ({
   hasMoved,
-  pendingPage
-}) => hasMoved && pendingPage !== null ? { kind: "navigate", page: pendingPage } : { kind: "open" };
+  pendingPage,
+  longPressTriggered = false
+}) => {
+  if (longPressTriggered) return { kind: "none" };
+  if (hasMoved && pendingPage !== null) {
+    return { kind: "navigate", page: pendingPage };
+  }
+  return { kind: "open" };
+};
 var createPageScrubberNavigationController = (onRelease) => {
   let active = false;
   let pendingPage = null;
@@ -26950,6 +27093,7 @@ var Viewer = ({
   );
   const nativeEngineId = getDedicatedAndroidPdfEngineId(engine);
   const nativePdfDocumentViewAvailable = import_react_native6.Platform.OS === "ios" && (0, import_engine_native4.isPapyrusPdfDocumentViewAvailable)();
+  const nativeInkOverlayAvailable = import_react_native6.Platform.OS !== "ios" || Number.parseInt(String(import_react_native6.Platform.Version), 10) >= 16;
   const isNativePdfViewer = shouldUseNativePdfViewer({
     platform: import_react_native6.Platform.OS,
     viewerMode: resolvedViewerMode,
@@ -26959,7 +27103,9 @@ var Viewer = ({
     nativePdfDocumentViewAvailable,
     pageTheme,
     viewMode,
-    rotation
+    rotation,
+    activeTool,
+    nativeInkOverlayAvailable
   });
   (0, import_react6.useEffect)(() => {
     mobilePerf.emit(
@@ -26979,6 +27125,9 @@ var Viewer = ({
     const reason = (() => {
       if (!nativePdfDocumentViewAvailable) return "manager-unavailable";
       if (!nativeEngineId) return "engine-unavailable";
+      if (activeTool === "ink" && !nativeInkOverlayAvailable) {
+        return "unsupported-ink-overlay";
+      }
       if (pageTheme !== "normal") return "unsupported-page-theme";
       if (viewMode === "double") return "unsupported-view-mode";
       if (rotation !== 0) return "unsupported-rotation";
@@ -26989,6 +27138,7 @@ var Viewer = ({
     const detailByReason = {
       "manager-unavailable": "the PapyrusPdfDocumentView manager is not registered",
       "engine-unavailable": "the native PDF engine id is unavailable",
+      "unsupported-ink-overlay": "PencilKit page overlays require iOS 16 or newer",
       "unsupported-page-theme": `pageTheme '${pageTheme}' is not supported by the native viewport`,
       "unsupported-view-mode": "double-page mode is not supported by the native viewport",
       "unsupported-rotation": "document rotation is not supported by the native viewport"
@@ -26998,8 +27148,10 @@ var Viewer = ({
     );
   }, [
     isWebView,
+    activeTool,
     nativeEngineId,
     nativePdfDocumentViewAvailable,
+    nativeInkOverlayAvailable,
     pageCount,
     pageTheme,
     rotation,
@@ -29630,6 +29782,9 @@ var import_core7 = require("@papyrus-sdk/core");
 // components/ToolDock.layout.ts
 var TOOL_DOCK_SCROLL_THRESHOLD = 420;
 var shouldUseScrollablePrimaryToolsRow = (windowWidth) => windowWidth < TOOL_DOCK_SCROLL_THRESHOLD;
+var shouldShowToolDockInkControls = ({
+  nativeInkToolPickerActive
+}) => !nativeInkToolPickerActive;
 var DRAWING_TOOL_IDS = /* @__PURE__ */ new Set(["ink", "highlight", "underline"]);
 var resolveToolDockBaseIconColor = ({
   label,
@@ -29833,6 +29988,7 @@ var ToolDock = () => {
     toolDockOpen,
     setDocumentState,
     activeDrawToolPreset,
+    nativeInkToolPickerActive,
     annotationUndoStack,
     annotationRedoStack,
     undoAnnotations,
@@ -29860,9 +30016,17 @@ var ToolDock = () => {
     [activeTool, activeDrawToolPreset, interactionMode]
   );
   const inkSettingsExpanded = activeTool === "ink" && activeDrawToolPreset === "ink";
+  const showInkDockControls = shouldShowToolDockInkControls({
+    nativeInkToolPickerActive
+  });
   const canUndo = annotationUndoStack.length > 0;
   const canRedo = annotationRedoStack.length > 0;
   const primaryToolsRowIsScrollable = shouldUseScrollablePrimaryToolsRow(windowWidth);
+  (0, import_react11.useEffect)(() => {
+    if (!nativeInkToolPickerActive) return;
+    setPaletteExpanded(false);
+    setExtrasExpanded(false);
+  }, [nativeInkToolPickerActive]);
   const applyTool = (toolId) => {
     if (toolId === "ink") {
       setDocumentState({
@@ -29967,7 +30131,7 @@ var ToolDock = () => {
       pointerEvents: "box-none",
       style: [styles9.root, { paddingBottom: chromeOffsets.toolDock }],
       children: toolDockOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: styles9.stack, children: [
-        paletteExpanded ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        paletteExpanded && showInkDockControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           import_react_native10.View,
           {
             style: [
@@ -30008,7 +30172,7 @@ var ToolDock = () => {
             }) })
           }
         ) : null,
-        inkSettingsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        inkSettingsExpanded && showInkDockControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           import_react_native10.View,
           {
             style: [
@@ -31577,6 +31741,7 @@ var AnnotationEditor = () => {
     annotations,
     selectedAnnotationId,
     updateAnnotation,
+    removeAnnotation,
     setSelectedAnnotation,
     uiTheme,
     locale,
@@ -31598,6 +31763,13 @@ var AnnotationEditor = () => {
     updateAnnotation(annotation.id, { content: draft });
     setSelectedAnnotation(null);
   };
+  const handleDelete = () => {
+    deleteAnnotationAndClearSelection(
+      annotation.id,
+      removeAnnotation,
+      setSelectedAnnotation
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_react_native12.Modal,
     {
@@ -31619,6 +31791,22 @@ var AnnotationEditor = () => {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native12.View, { style: styles11.actions, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_react_native12.Pressable,
+            {
+              onPress: handleDelete,
+              style: [
+                styles11.actionButton,
+                styles11.actionDelete,
+                isDark && styles11.actionDeleteDark
+              ],
+              accessibilityRole: "button",
+              accessibilityLabel: t.deleteAnnotation,
+              testID: "annotation-delete-button",
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native12.Text, { style: [styles11.actionText, styles11.actionTextLight], children: t.deleteAnnotation })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native12.View, { style: styles11.actionSpacer }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             import_react_native12.Pressable,
             {
@@ -31688,8 +31876,9 @@ var styles11 = import_react_native12.StyleSheet.create({
   actions: {
     marginTop: 16,
     flexDirection: "row",
-    justifyContent: "flex-end"
+    alignItems: "center"
   },
+  actionSpacer: { flex: 1 },
   actionButton: {
     paddingHorizontal: 12,
     paddingVertical: 8,
@@ -31699,6 +31888,12 @@ var styles11 = import_react_native12.StyleSheet.create({
   actionCancel: {
     backgroundColor: "#e5e7eb"
   },
+  actionDelete: {
+    backgroundColor: "#b91c1c"
+  },
+  actionDeleteDark: {
+    backgroundColor: "#991b1b"
+  },
   actionSave: {
     backgroundColor: "#2563eb"
   },
@@ -33324,7 +33519,8 @@ function ProgressPill({
         const releasedPage = scrubNavigationControllerRef.current.release();
         const releaseAction = resolvePageScrubberReleaseAction({
           hasMoved: hasMovedRef.current,
-          pendingPage: releasedPage
+          pendingPage: releasedPage,
+          longPressTriggered: longPressTriggeredRef.current
         });
         if (releaseAction.kind === "navigate") {
           pendingReleasedScrubPageRef.current = releaseAction.page;
@@ -33362,9 +33558,6 @@ function ProgressPill({
     });
   }
   const responderPanHandlers = scrubberResponderRef.current?.panHandlers ?? {};
-  const responderTarget = touchPolicy.responderTarget;
-  const scrubberPanHandlers = responderTarget === "track" ? responderPanHandlers : {};
-  const pillPanHandlers = responderTarget === "pill" ? responderPanHandlers : {};
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_react_native19.View,
     {
@@ -33383,7 +33576,6 @@ function ProgressPill({
           ref: scrubberRef,
           pointerEvents: resolvePageScrubberPointerEvents(),
           style: [styles18.scrubber, { height: trackHeight }],
-          ...scrubberPanHandlers,
           onLayout: () => {
             scrubberRef.current?.measureInWindow((_x, y) => {
               trackYRef.current = y;
@@ -33393,6 +33585,7 @@ function ProgressPill({
             /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               import_react_native19.Animated.View,
               {
+                pointerEvents: "none",
                 style: [
                   styles18.track,
                   isDark && styles18.trackDark,
@@ -33405,29 +33598,36 @@ function ProgressPill({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Animated.View, { style: [styles18.thumb, { top: thumbTopRef.current }], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-              import_react_native19.View,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_react_native19.Animated.View,
               {
-                style: [
-                  styles18.pill,
-                  isDark && styles18.pillDark,
-                  { borderColor: `${accentColor}33` }
-                ],
-                ...pillPanHandlers,
-                testID: "papyrus-progress-pill",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.View, { style: styles18.labelHit, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Text, { style: [styles18.label, isDark && styles18.labelDark], children: label }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.View, { style: styles18.iconHit, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                    IconPageNav,
-                    {
-                      size: 20,
-                      color: isDark ? "#f8fafc" : "#111827",
-                      strokeWidth: 1.8
-                    }
-                  ) })
-                ]
+                pointerEvents: "box-none",
+                style: [styles18.thumb, { top: thumbTopRef.current }],
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                  import_react_native19.View,
+                  {
+                    style: [
+                      styles18.pill,
+                      isDark && styles18.pillDark,
+                      { borderColor: `${accentColor}33` }
+                    ],
+                    ...responderPanHandlers,
+                    testID: "papyrus-progress-pill",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.View, { style: styles18.labelHit, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.Text, { style: [styles18.label, isDark && styles18.labelDark], children: label }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native19.View, { style: styles18.iconHit, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        IconPageNav,
+                        {
+                          size: 20,
+                          color: isDark ? "#f8fafc" : "#111827",
+                          strokeWidth: 1.8
+                        }
+                      ) })
+                    ]
+                  }
+                )
               }
-            ) })
+            )
           ]
         }
       )