@papyrus-sdk/ui-react-native 0.2.35-beta.5 → 0.2.35-beta.7

package/dist/index.mjs

@@ -26071,6 +26071,29 @@ var STRINGS = {
 };
 var getStrings = (locale) => STRINGS[locale ?? "en"] ?? STRINGS.en;
 
+// components/nativeInkSession.ts
+function isNativeIosPencilKitViewer(platform, version, nativePdfViewerActive) {
+  return platform === "ios" && Number.parseInt(String(version), 10) >= 16 && nativePdfViewerActive;
+}
+function finishNativeInkSession(setDocumentState) {
+  setDocumentState({
+    activeTool: "select",
+    interactionMode: "pan",
+    nativeInkToolPickerActive: false,
+    toolDockOpen: false,
+    activeMobileDestination: "none",
+    mobileChromeVisible: true
+  });
+}
+function handleNativeInkPickerVisibility(visible, state) {
+  if (visible && (state.activeTool !== "ink" || !state.nativePdfViewerActive)) return;
+  if (!visible && state.activeTool === "ink" && state.nativePdfViewerActive) {
+    finishNativeInkSession(state.setDocumentState);
+    return;
+  }
+  state.setDocumentState({ nativeInkToolPickerActive: visible });
+}
+
 // components/annotationDeletion.ts
 var MARKUP_ANNOTATION_TYPES = /* @__PURE__ */ new Set([
   "highlight",
@@ -26273,19 +26296,12 @@ function DedicatedIosPdfViewer({
   );
   const handleInkToolPickerVisibilityChange = useCallback3(
     (event) => {
-      const visible = event.nativeEvent?.visible === true;
-      if (!visible && activeTool === "ink") {
-        setDocumentState({
-          activeTool: "select",
-          interactionMode: "pan",
-          nativeInkToolPickerActive: false,
-          toolDockOpen: false
-        });
-        return;
-      }
-      setDocumentState({ nativeInkToolPickerActive: visible });
+      handleNativeInkPickerVisibility(
+        event.nativeEvent?.visible === true,
+        useViewerStore4.getState()
+      );
     },
-    [activeTool, setDocumentState]
+    []
   );
   const trackMobileChromeByOffset = useCallback3(
     (offsetY) => {
@@ -29082,7 +29098,7 @@ var styles7 = StyleSheet7.create({
 var Viewer_default = Viewer;
 
 // components/Topbar.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import {
   View as View10,
   Text as Text4,
@@ -29090,10 +29106,58 @@ import {
   StyleSheet as StyleSheet10,
   useWindowDimensions as useWindowDimensions4
 } from "react-native";
+import { useViewerStore as useViewerStore9 } from "@papyrus-sdk/core";
+import Animated3, { useAnimatedStyle } from "react-native-reanimated";
+
+// components/useNativeInkChrome.ts
+import { useCallback as useCallback5, useEffect as useEffect8, useState as useState6 } from "react";
+import { AccessibilityInfo, Platform as Platform5 } from "react-native";
 import { useViewerStore as useViewerStore8 } from "@papyrus-sdk/core";
+import {
+  cancelAnimation,
+  Easing,
+  ReduceMotion,
+  useReducedMotion,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+function useNativeInkSession() {
+  const nativePdfViewerActive = useViewerStore8((state) => state.nativePdfViewerActive);
+  const activeTool = useViewerStore8((state) => state.activeTool);
+  const supported = isNativeIosPencilKitViewer(Platform5.OS, Platform5.Version, nativePdfViewerActive);
+  const finish = useCallback5(() => {
+    finishNativeInkSession(useViewerStore8.getState().setDocumentState);
+  }, []);
+  return { supported, active: supported && activeTool === "ink", finish };
+}
+function useNativeInkMotion(visible, enabled) {
+  const systemReducedMotion = useReducedMotion();
+  const [reducedMotion, setReducedMotion] = useState6(systemReducedMotion);
+  const progress = useSharedValue(visible ? 1 : 0);
+  useEffect8(() => {
+    let mounted = true;
+    const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setReducedMotion);
+    AccessibilityInfo.isReduceMotionEnabled().then((value) => {
+      if (mounted) setReducedMotion(value);
+    });
+    return () => {
+      mounted = false;
+      subscription.remove();
+    };
+  }, []);
+  useEffect8(() => {
+    progress.value = enabled ? withTiming(visible ? 1 : 0, {
+      duration: reducedMotion ? 0 : 220,
+      easing: Easing.out(Easing.cubic),
+      reduceMotion: ReduceMotion.System
+    }) : visible ? 1 : 0;
+  }, [enabled, progress, reducedMotion, visible]);
+  useEffect8(() => () => cancelAnimation(progress), [progress]);
+  return progress;
+}
 
 // components/PageJumpModal.tsx
-import { useEffect as useEffect9, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState8 } from "react";
 import { Pressable as Pressable5, StyleSheet as StyleSheet9, Text as Text3, TextInput, View as View9 } from "react-native";
 
 // components/pageJumpModel.ts
@@ -29105,7 +29169,7 @@ var resolvePageJumpTarget = (value, pageCount) => {
 };
 
 // components/NativeSheet.tsx
-import React10, { useEffect as useEffect8, useRef as useRef6, useState as useState6 } from "react";
+import React10, { useEffect as useEffect9, useRef as useRef6, useState as useState7 } from "react";
 import {
   Animated as Animated2,
   FlatList as FlatList2,
@@ -29213,11 +29277,11 @@ function NativeSheet({
   const palette = getNativeSheetPalette(Boolean(isDark));
   const { height: windowHeight, width: windowWidth } = useWindowDimensions3();
   const tabletLayout = getNativeSheetLayoutStyles(windowWidth);
-  const [rendered, setRendered] = useState6(visible);
+  const [rendered, setRendered] = useState7(visible);
   const renderedRef = useRef6(visible);
   const motion = useRef6(new Animated2.Value(visible ? 0 : 1)).current;
   const backdropOpacity = useRef6(new Animated2.Value(visible ? 1 : 0)).current;
-  useEffect8(() => {
+  useEffect9(() => {
     motion.stopAnimation();
     backdropOpacity.stopAnimation();
     if (visible) {
@@ -29411,9 +29475,9 @@ function PageJumpModal({
   onClose,
   onConfirm
 }) {
-  const [value, setValue] = useState7(`${currentPage}`);
+  const [value, setValue] = useState8(`${currentPage}`);
   const palette = getReaderSheetPalette(isDark);
-  useEffect9(() => {
+  useEffect10(() => {
     if (visible) setValue(`${currentPage}`);
   }, [currentPage, visible]);
   const confirmJump = () => {
@@ -29529,9 +29593,21 @@ var Topbar = ({
     setDocumentState,
     triggerScrollToPage,
     accentColor,
-    mobileChromeVisible
-  } = useViewerStore8();
-  const [jumpModalOpen, setJumpModalOpen] = useState8(false);
+    mobileChromeVisible,
+    locale
+  } = useViewerStore9();
+  const inkSession = useNativeInkSession();
+  const t = getStrings(locale);
+  const progress = useNativeInkMotion(inkSession.active, inkSession.supported);
+  const settingsMotion = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value,
+    transform: [{ scale: 1 - progress.value * 0.04 }, { translateX: -progress.value * 6 }]
+  }));
+  const doneMotion = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{ scale: 0.96 + progress.value * 0.04 }, { translateX: (1 - progress.value) * 6 }]
+  }));
+  const [jumpModalOpen, setJumpModalOpen] = useState9(false);
   const isDark = uiTheme === "dark";
   const navIconColor = isDark ? "#e5e7eb" : "#111827";
   const { width, height } = useWindowDimensions4();
@@ -29555,7 +29631,22 @@ var Topbar = ({
   };
   const defaultLogo = /* @__PURE__ */ jsx14(View10, { style: [styles10.logoBadge, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx14(Text4, { style: styles10.logoText, children: "P" }) });
   const logoElement = logo ?? defaultLogo;
-  if (!mobileChromeVisible) return null;
+  const settingsControl = /* @__PURE__ */ jsx14(
+    Pressable6,
+    {
+      onPress: () => onOpenOverflow?.() ?? onOpenSettings?.(),
+      style: [
+        styles10.iconButton,
+        isDark && styles10.iconButtonDark,
+        inkSession.supported && styles10.annotationSettingsButton
+      ],
+      accessibilityRole: "button",
+      accessibilityLabel: "Open overflow menu",
+      disabled: inkSession.active,
+      children: /* @__PURE__ */ jsx14(IconSettings, { size: MOBILE_CHROME_METRICS.iconSize, color: isDark ? "#e5e7eb" : "#111827" })
+    }
+  );
+  if (!mobileChromeVisible && !inkSession.active) return null;
   return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     /* @__PURE__ */ jsx14(
       View10,
@@ -29583,7 +29674,10 @@ var Topbar = ({
                 onLogoPress ? /* @__PURE__ */ jsx14(
                   Pressable6,
                   {
-                    onPress: onLogoPress,
+                    onPress: () => {
+                      if (inkSession.active) inkSession.finish();
+                      else onLogoPress();
+                    },
                     accessibilityRole: "button",
                     accessibilityLabel: logoAccessibilityLabel,
                     style: styles10.logoSlot,
@@ -29660,21 +29754,49 @@ var Topbar = ({
                   }
                 )
               ] }) }) : null,
-              /* @__PURE__ */ jsx14(View10, { style: styles10.rightGroup, children: /* @__PURE__ */ jsx14(
-                Pressable6,
+              /* @__PURE__ */ jsx14(
+                View10,
                 {
-                  onPress: () => onOpenOverflow?.() ?? onOpenSettings?.(),
-                  style: [styles10.iconButton, isDark && styles10.iconButtonDark],
-                  accessibilityLabel: "Open overflow menu",
-                  children: /* @__PURE__ */ jsx14(
-                    IconSettings,
-                    {
-                      size: MOBILE_CHROME_METRICS.iconSize,
-                      color: isDark ? "#e5e7eb" : "#111827"
-                    }
-                  )
+                  style: [styles10.rightGroup, inkSession.supported && styles10.annotationActionSlot],
+                  testID: "papyrus-topbar-action-slot",
+                  children: inkSession.supported ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+                    /* @__PURE__ */ jsx14(
+                      Animated3.View,
+                      {
+                        style: [styles10.settingsSlot, settingsMotion],
+                        pointerEvents: inkSession.active ? "none" : "auto",
+                        accessibilityElementsHidden: inkSession.active,
+                        importantForAccessibility: inkSession.active ? "no-hide-descendants" : "auto",
+                        children: settingsControl
+                      }
+                    ),
+                    /* @__PURE__ */ jsx14(
+                      Animated3.View,
+                      {
+                        style: [styles10.doneSlot, doneMotion],
+                        pointerEvents: inkSession.active ? "auto" : "none",
+                        accessibilityElementsHidden: !inkSession.active,
+                        importantForAccessibility: inkSession.active ? "auto" : "no-hide-descendants",
+                        children: /* @__PURE__ */ jsx14(
+                          Pressable6,
+                          {
+                            onPress: inkSession.finish,
+                            disabled: !inkSession.active,
+                            style: styles10.doneButton,
+                            accessibilityRole: "button",
+                            accessibilityLabel: t.done,
+                            testID: "papyrus-topbar-ink-done",
+                            children: /* @__PURE__ */ jsxs9(Text4, { style: styles10.doneButtonText, children: [
+                              "\u2713 ",
+                              t.done
+                            ] })
+                          }
+                        )
+                      }
+                    )
+                  ] }) : settingsControl
                 }
-              ) })
+              )
             ]
           }
         )
@@ -29820,6 +29942,42 @@ var styles10 = StyleSheet10.create({
     flexShrink: 0,
     marginLeft: 12
   },
+  annotationActionSlot: {
+    width: 108,
+    height: 44
+  },
+  settingsSlot: {
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  annotationSettingsButton: {
+    minWidth: 44,
+    minHeight: 44,
+    marginLeft: 0,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  doneSlot: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0
+  },
+  doneButton: {
+    minWidth: 44,
+    minHeight: 44,
+    paddingHorizontal: 10,
+    borderRadius: 12,
+    backgroundColor: "#2563eb",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  doneButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "700"
+  },
   iconButton: {
     paddingHorizontal: 10,
     paddingVertical: 6,
@@ -29855,7 +30013,7 @@ var styles10 = StyleSheet10.create({
 var Topbar_default = Topbar;
 
 // components/ToolDock.tsx
-import React13, { useEffect as useEffect10, useMemo as useMemo6, useRef as useRef7, useState as useState9 } from "react";
+import React13, { useEffect as useEffect11, useMemo as useMemo6, useRef as useRef7, useState as useState10 } from "react";
 import {
   View as View11,
   Text as Text5,
@@ -29864,7 +30022,7 @@ import {
   ScrollView as ScrollView3,
   useWindowDimensions as useWindowDimensions5
 } from "react-native";
-import { useViewerStore as useViewerStore9 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore10 } from "@papyrus-sdk/core";
 
 // components/ToolDock.layout.ts
 var TOOL_DOCK_SCROLL_THRESHOLD = 420;
@@ -29969,18 +30127,18 @@ var OpacitySlider = React13.memo(function OpacitySlider2({
   isDark,
   onCommit
 }) {
-  const [trackWidth, setTrackWidth] = useState9(0);
-  const [draftValue, setDraftValue] = useState9(value);
+  const [trackWidth, setTrackWidth] = useState10(0);
+  const [draftValue, setDraftValue] = useState10(value);
   const dragValueRef = useRef7(draftValue);
   const isDraggingRef = useRef7(false);
   const frameRef = useRef7(null);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isDraggingRef.current) {
       dragValueRef.current = value;
       setDraftValue(value);
     }
   }, [value]);
-  useEffect10(() => {
+  useEffect11(() => {
     return () => {
       if (frameRef.current !== null) {
         cancelAnimationFrame(frameRef.current);
@@ -30080,9 +30238,9 @@ var ToolDock = () => {
     annotationRedoStack,
     undoAnnotations,
     redoAnnotations
-  } = useViewerStore9();
-  const [paletteExpanded, setPaletteExpanded] = useState9(false);
-  const [extrasExpanded, setExtrasExpanded] = useState9(false);
+  } = useViewerStore10();
+  const [paletteExpanded, setPaletteExpanded] = useState10(false);
+  const [extrasExpanded, setExtrasExpanded] = useState10(false);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = useWindowDimensions5();
   const t = getStrings(locale);
@@ -30109,7 +30267,7 @@ var ToolDock = () => {
   const canUndo = annotationUndoStack.length > 0;
   const canRedo = annotationRedoStack.length > 0;
   const primaryToolsRowIsScrollable = shouldUseScrollablePrimaryToolsRow(windowWidth);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!nativeInkToolPickerActive) return;
     setPaletteExpanded(false);
     setExtrasExpanded(false);
@@ -30822,15 +30980,15 @@ var ToolDock_default = ToolDock;
 
 // components/RightSheet.tsx
 import {
-  useCallback as useCallback5,
-  useEffect as useEffect11,
+  useCallback as useCallback6,
+  useEffect as useEffect12,
   useMemo as useMemo7,
   useRef as useRef8,
-  useState as useState10
+  useState as useState11
 } from "react";
 import {
   Image as Image2,
-  Platform as Platform5,
+  Platform as Platform6,
   Pressable as Pressable8,
   StyleSheet as StyleSheet12,
   Text as Text6,
@@ -30839,7 +30997,7 @@ import {
   findNodeHandle as findNodeHandle2,
   useWindowDimensions as useWindowDimensions6
 } from "react-native";
-import { useViewerStore as useViewerStore10 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore11 } from "@papyrus-sdk/core";
 import { PapyrusPageView as PapyrusPageView2 } from "@papyrus-sdk/engine-native";
 
 // components/rightSheetLayout.ts
@@ -30905,13 +31063,13 @@ var PageThumbnail = ({
   onPress
 }) => {
   const viewRef = useRef8(null);
-  const [layoutReady, setLayoutReady] = useState10(false);
-  const [previewUri, setPreviewUri] = useState10(null);
-  useEffect11(() => {
+  const [layoutReady, setLayoutReady] = useState11(false);
+  const [previewUri, setPreviewUri] = useState11(null);
+  useEffect12(() => {
     if (!layoutReady || !useNativePreview || !shouldRenderPreview) return;
     const viewTag = findNodeHandle2(viewRef.current);
     if (!viewTag) return;
-    const isNative = Platform5.OS === "android" || Platform5.OS === "ios";
+    const isNative = Platform6.OS === "android" || Platform6.OS === "ios";
     const renderScale = isNative ? 2 / Math.max(zoom, 0.5) : 2;
     void engine.renderPage(pageIndex, viewTag, renderScale);
   }, [
@@ -30922,7 +31080,7 @@ var PageThumbnail = ({
     useNativePreview,
     zoom
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!useImagePreview || !shouldRenderPreview) {
       setPreviewUri(null);
       return;
@@ -31051,12 +31209,12 @@ var RightSheet = ({
     zoom,
     locale,
     accentColor
-  } = useViewerStore10();
+  } = useViewerStore11();
   const { height: windowHeight, width: windowWidth } = useWindowDimensions6();
-  const [pagesMode, setPagesMode] = useState10(
+  const [pagesMode, setPagesMode] = useState11(
     documentType === "pdf" || documentType === "comic" ? "thumbnails" : "summary"
   );
-  useEffect11(() => {
+  useEffect12(() => {
     setPagesMode(
       documentType === "pdf" || documentType === "comic" ? "thumbnails" : "summary"
     );
@@ -31080,8 +31238,8 @@ var RightSheet = ({
   const thumbnailDimensionsCacheRef = useRef8(/* @__PURE__ */ new Map());
   const thumbnailDimensionsPendingRef = useRef8(/* @__PURE__ */ new Set());
   const thumbnailRefreshTimeoutRef = useRef8(null);
-  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState10(0);
-  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState10(() => /* @__PURE__ */ new Set());
+  const [thumbnailLayoutRevision, setThumbnailLayoutRevision] = useState11(0);
+  const [visibleThumbnailPages, setVisibleThumbnailPages] = useState11(() => /* @__PURE__ */ new Set());
   const resolvedThumbsInitialCount = useMemo7(
     () => resolvePositiveInt2(
       thumbsInitialCount,
@@ -31101,10 +31259,10 @@ var RightSheet = ({
   const navigationTitle = showingProgress ? t.progress : documentType === "epub" || activeMobileDestination === "contents" ? t.contents : t.pages;
   const summaryLabel = documentType === "epub" ? t.contents : t.summaryTab;
   const thumbnailLabel = documentType === "epub" ? t.pages : t.pagesTab;
-  const closeSheet = useCallback5(() => {
+  const closeSheet = useCallback6(() => {
     setDocumentState({ sidebarRightOpen: false });
   }, [setDocumentState]);
-  const jumpToPage = useCallback5(
+  const jumpToPage = useCallback6(
     (pageIndex) => {
       engine.goToPage(pageIndex + 1);
       setDocumentState({ currentPage: pageIndex + 1 });
@@ -31113,14 +31271,14 @@ var RightSheet = ({
     },
     [closeSheet, engine, setDocumentState, triggerScrollToPage]
   );
-  const scheduleThumbnailLayoutRefresh = useCallback5(() => {
+  const scheduleThumbnailLayoutRefresh = useCallback6(() => {
     if (thumbnailRefreshTimeoutRef.current) return;
     thumbnailRefreshTimeoutRef.current = setTimeout(() => {
       thumbnailRefreshTimeoutRef.current = null;
       setThumbnailLayoutRevision((value) => value + 1);
     }, 80);
   }, []);
-  const ensureThumbnailDimensions = useCallback5(
+  const ensureThumbnailDimensions = useCallback6(
     (pageIndex) => {
       if (pageIndex < 0 || pageIndex >= pageCount) return;
       if (thumbnailDimensionsCacheRef.current.has(pageIndex)) return;
@@ -31139,7 +31297,7 @@ var RightSheet = ({
     },
     [engine, pageCount, scheduleThumbnailLayoutRefresh]
   );
-  const getThumbnailFrameHeight = useCallback5(
+  const getThumbnailFrameHeight = useCallback6(
     (pageIndex) => {
       const dims = thumbnailDimensionsCacheRef.current.get(pageIndex);
       const ratio = !dims || dims.width <= 0 || dims.height <= 0 ? THUMBNAILS_DEFAULT_ASPECT_RATIO : dims.height / dims.width;
@@ -31151,7 +31309,7 @@ var RightSheet = ({
     },
     [frameWidth, thumbnailLayoutRevision]
   );
-  useEffect11(
+  useEffect12(
     () => () => {
       if (thumbnailRefreshTimeoutRef.current) {
         clearTimeout(thumbnailRefreshTimeoutRef.current);
@@ -31159,11 +31317,11 @@ var RightSheet = ({
     },
     []
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (sidebarRightOpen) return;
     setVisibleThumbnailPages(/* @__PURE__ */ new Set());
   }, [sidebarRightOpen]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!sidebarRightOpen || sidebarRightTab !== "pages") return;
     if (activeMobileDestination === "pages") {
       setPagesMode("thumbnails");
@@ -31171,7 +31329,7 @@ var RightSheet = ({
     }
     setPagesMode("summary");
   }, [activeMobileDestination, sidebarRightOpen, sidebarRightTab]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!sidebarRightOpen || sidebarRightTab !== "pages") return;
     if (pagesMode !== "thumbnails" || !supportsThumbnails) return;
     if (pageCount <= 0) return;
@@ -31212,7 +31370,7 @@ var RightSheet = ({
     })),
     [pageCount, pages]
   );
-  const onThumbnailsViewableItemsChanged = useCallback5(
+  const onThumbnailsViewableItemsChanged = useCallback6(
     ({ viewableItems }) => {
       const nextVisible = /* @__PURE__ */ new Set();
       viewableItems.forEach((token) => {
@@ -31229,7 +31387,7 @@ var RightSheet = ({
     },
     [ensureThumbnailDimensions]
   );
-  const renderThumbnailItem = useCallback5(
+  const renderThumbnailItem = useCallback6(
     ({ item }) => {
       const shouldRenderPreview = (useNativePreview || useImagePreview) && (visibleThumbnailPages.has(item) || item < resolvedThumbsPrewarmCount || Math.abs(item + 1 - currentPage) <= 1);
       return /* @__PURE__ */ jsx16(
@@ -31835,7 +31993,7 @@ var styles12 = StyleSheet12.create({
 var RightSheet_default = RightSheet;
 
 // components/AnnotationEditor.tsx
-import { useEffect as useEffect12, useState as useState11 } from "react";
+import { useEffect as useEffect13, useState as useState12 } from "react";
 import {
   Modal as Modal2,
   View as View13,
@@ -31844,7 +32002,7 @@ import {
   Pressable as Pressable9,
   StyleSheet as StyleSheet13
 } from "react-native";
-import { useViewerStore as useViewerStore11 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore12 } from "@papyrus-sdk/core";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var AnnotationEditor = () => {
   const {
@@ -31856,13 +32014,13 @@ var AnnotationEditor = () => {
     uiTheme,
     locale,
     accentColor
-  } = useViewerStore11();
+  } = useViewerStore12();
   const annotation = annotations.find((ann) => ann.id === selectedAnnotationId);
   const isEditable = annotation && (annotation.type === "text" || annotation.type === "comment");
-  const [draft, setDraft] = useState11("");
+  const [draft, setDraft] = useState12("");
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
-  useEffect12(() => {
+  useEffect13(() => {
     if (isEditable) {
       setDraft(annotation?.content ?? "");
     }
@@ -32019,8 +32177,9 @@ var styles13 = StyleSheet13.create({
 var AnnotationEditor_default = AnnotationEditor;
 
 // components/BottomBar.tsx
-import { View as View14, Pressable as Pressable10, StyleSheet as StyleSheet14, useWindowDimensions as useWindowDimensions7, Platform as Platform6 } from "react-native";
-import { useViewerStore as useViewerStore12 } from "@papyrus-sdk/core";
+import { View as View14, Pressable as Pressable10, StyleSheet as StyleSheet14, useWindowDimensions as useWindowDimensions7 } from "react-native";
+import { useViewerStore as useViewerStore13 } from "@papyrus-sdk/core";
+import Animated4, { useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
 
 // components/bottomBarModel.ts
 function buildBottomBarLayout({
@@ -32089,9 +32248,17 @@ var BottomBar = ({
     mobileChromeVisible,
     toolDockOpen,
     activeTool,
-    interactionMode,
-    nativePdfViewerActive
-  } = useViewerStore12();
+    interactionMode
+  } = useViewerStore13();
+  const inkSession = useNativeInkSession();
+  const supportsInkChrome = documentType === "pdf" && inkSession.supported;
+  const drawing = supportsInkChrome && inkSession.active;
+  const dockVisible = mobileChromeVisible && mobileDockVisible && !drawing;
+  const dockProgress = useNativeInkMotion(dockVisible, supportsInkChrome);
+  const dockMotion = useAnimatedStyle2(() => ({
+    opacity: dockProgress.value,
+    transform: [{ translateY: (1 - dockProgress.value) * 8 }]
+  }));
   const isDark = uiTheme === "dark";
   const t = getStrings(locale);
   const { width, height } = useWindowDimensions7();
@@ -32111,7 +32278,7 @@ var BottomBar = ({
       label: t.tools,
       icon: IconToolDockTrigger,
       onPress: () => {
-        const isNativeIosInkViewer = Platform6.OS === "ios" && Number.parseInt(String(Platform6.Version), 10) >= 16 && nativePdfViewerActive;
+        const isNativeIosInkViewer = supportsInkChrome;
         const action = resolveAnnotateButtonAction({
           isNativeIosInkViewer,
           activeTool,
@@ -32128,13 +32295,7 @@ var BottomBar = ({
           return;
         }
         if (action === "deactivate-native-ink") {
-          setDocumentState({
-            activeTool: "select",
-            interactionMode: "pan",
-            nativeInkToolPickerActive: false,
-            toolDockOpen: false,
-            activeMobileDestination: "none"
-          });
+          inkSession.finish();
           return;
         }
         if (action === "dismiss-tool-dock") {
@@ -32172,96 +32333,108 @@ var BottomBar = ({
       onPress: onOpenSettings
     }
   };
-  if (!mobileChromeVisible || !mobileDockVisible) return null;
-  return /* @__PURE__ */ jsx18(View14, { pointerEvents: "box-none", style: [styles14.frame, { paddingBottom: offsets.bottom, paddingLeft: offsets.left, paddingRight: offsets.right }], children: /* @__PURE__ */ jsxs13(View14, { style: [styles14.row, isLandscape && styles14.rowLandscape], children: [
-    layout.leftSlots.length > 0 ? /* @__PURE__ */ jsx18(
-      View14,
-      {
-        style: [
-          styles14.island,
-          styles14.editIsland,
-          isDark && styles14.islandDark
-        ],
-        testID: "papyrus-floating-bottom-dock-edit",
-        children: layout.leftSlots.map((slot) => {
-          const meta = slotMeta[slot.key];
-          const Icon = meta.icon;
-          return /* @__PURE__ */ jsx18(
-            Pressable10,
-            {
-              onPress: meta.onPress,
-              style: [
-                styles14.iconOnlyItem,
-                slot.active && styles14.itemActive
-              ],
-              accessibilityLabel: meta.label,
-              testID: `papyrus-mobile-destination-${slot.key}`,
-              children: /* @__PURE__ */ jsx18(
-                View14,
+  if (!dockVisible && !supportsInkChrome) return null;
+  return /* @__PURE__ */ jsx18(
+    Animated4.View,
+    {
+      pointerEvents: dockVisible ? "box-none" : "none",
+      accessibilityElementsHidden: !dockVisible,
+      importantForAccessibility: dockVisible ? "auto" : "no-hide-descendants",
+      testID: "papyrus-bottom-bar-frame",
+      style: [styles14.frame, { paddingBottom: offsets.bottom, paddingLeft: offsets.left, paddingRight: offsets.right }, dockMotion],
+      children: /* @__PURE__ */ jsxs13(View14, { style: [styles14.row, isLandscape && styles14.rowLandscape], children: [
+        layout.leftSlots.length > 0 ? /* @__PURE__ */ jsx18(
+          View14,
+          {
+            style: [
+              styles14.island,
+              styles14.editIsland,
+              isDark && styles14.islandDark
+            ],
+            testID: "papyrus-floating-bottom-dock-edit",
+            children: layout.leftSlots.map((slot) => {
+              const meta = slotMeta[slot.key];
+              const Icon = meta.icon;
+              return /* @__PURE__ */ jsx18(
+                Pressable10,
                 {
+                  disabled: !dockVisible,
+                  onPress: meta.onPress,
                   style: [
-                    styles14.itemIcon,
-                    isDark && styles14.itemIconDark,
-                    slot.active && styles14.itemIconActive
+                    styles14.iconOnlyItem,
+                    slot.active && styles14.itemActive
                   ],
+                  accessibilityLabel: meta.label,
+                  testID: `papyrus-mobile-destination-${slot.key}`,
                   children: /* @__PURE__ */ jsx18(
-                    Icon,
+                    View14,
                     {
-                      size: MOBILE_CHROME_METRICS.iconSize,
-                      color: iconColor(slot.active)
+                      style: [
+                        styles14.itemIcon,
+                        isDark && styles14.itemIconDark,
+                        slot.active && styles14.itemIconActive
+                      ],
+                      children: /* @__PURE__ */ jsx18(
+                        Icon,
+                        {
+                          size: MOBILE_CHROME_METRICS.iconSize,
+                          color: iconColor(slot.active)
+                        }
+                      )
                     }
                   )
-                }
-              )
-            },
-            slot.key
-          );
-        })
-      }
-    ) : null,
-    /* @__PURE__ */ jsx18(
-      View14,
-      {
-        style: [
-          styles14.island,
-          styles14.utilityIsland,
-          isDark && styles14.islandDark
-        ],
-        testID: "papyrus-floating-bottom-dock",
-        children: layout.rightSlots.map((slot) => {
-          const meta = slotMeta[slot.key];
-          const Icon = meta.icon;
-          return /* @__PURE__ */ jsx18(
-            Pressable10,
-            {
-              onPress: meta.onPress,
-              style: [styles14.iconOnlyItem, slot.active && styles14.itemActive],
-              accessibilityLabel: meta.label,
-              testID: `papyrus-mobile-destination-${slot.key}`,
-              children: /* @__PURE__ */ jsx18(
-                View14,
+                },
+                slot.key
+              );
+            })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx18(
+          View14,
+          {
+            style: [
+              styles14.island,
+              styles14.utilityIsland,
+              isDark && styles14.islandDark
+            ],
+            testID: "papyrus-floating-bottom-dock",
+            children: layout.rightSlots.map((slot) => {
+              const meta = slotMeta[slot.key];
+              const Icon = meta.icon;
+              return /* @__PURE__ */ jsx18(
+                Pressable10,
                 {
-                  style: [
-                    styles14.itemIcon,
-                    isDark && styles14.itemIconDark,
-                    slot.active && styles14.itemIconActive
-                  ],
+                  disabled: !dockVisible,
+                  onPress: meta.onPress,
+                  style: [styles14.iconOnlyItem, slot.active && styles14.itemActive],
+                  accessibilityLabel: meta.label,
+                  testID: `papyrus-mobile-destination-${slot.key}`,
                   children: /* @__PURE__ */ jsx18(
-                    Icon,
+                    View14,
                     {
-                      size: MOBILE_CHROME_METRICS.iconSize,
-                      color: iconColor(slot.active)
+                      style: [
+                        styles14.itemIcon,
+                        isDark && styles14.itemIconDark,
+                        slot.active && styles14.itemIconActive
+                      ],
+                      children: /* @__PURE__ */ jsx18(
+                        Icon,
+                        {
+                          size: MOBILE_CHROME_METRICS.iconSize,
+                          color: iconColor(slot.active)
+                        }
+                      )
                     }
                   )
-                }
-              )
-            },
-            slot.key
-          );
-        })
-      }
-    )
-  ] }) });
+                },
+                slot.key
+              );
+            })
+          }
+        )
+      ] })
+    }
+  );
 };
 var styles14 = StyleSheet14.create({
   frame: {
@@ -32351,7 +32524,7 @@ import {
   StyleSheet as StyleSheet15,
   useWindowDimensions as useWindowDimensions8
 } from "react-native";
-import { useViewerStore as useViewerStore13 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore14 } from "@papyrus-sdk/core";
 
 // components/rotationReset.ts
 var resetEngineRotation = (engine, onRotationChange) => {
@@ -32411,7 +32584,7 @@ var SettingsSheet = ({
     comicLayoutMode,
     comicFitMode,
     comicReadingDirection
-  } = useViewerStore13();
+  } = useViewerStore14();
   const isDark = uiTheme === "dark";
   const isPaged = viewMode === "single";
   const isDouble = viewMode === "double";
@@ -32994,7 +33167,7 @@ var styles15 = StyleSheet15.create({
 var SettingsSheet_default = SettingsSheet;
 
 // components/CoverPreview.tsx
-import { useEffect as useEffect13, useMemo as useMemo8, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo8, useRef as useRef9, useState as useState13 } from "react";
 import {
   ActivityIndicator,
   StyleSheet as StyleSheet16,
@@ -33052,18 +33225,18 @@ var CoverPreview = ({
   onLoadEnd,
   onError
 }) => {
-  const [engine, setEngine] = useState12(null);
-  const [layoutReady, setLayoutReady] = useState12(false);
-  const [loaded, setLoaded] = useState12(false);
-  const [loading, setLoading] = useState12(false);
-  const [error, setError] = useState12(null);
+  const [engine, setEngine] = useState13(null);
+  const [layoutReady, setLayoutReady] = useState13(false);
+  const [loaded, setLoaded] = useState13(false);
+  const [loading, setLoading] = useState13(false);
+  const [error, setError] = useState13(null);
   const viewRef = useRef9(null);
   const resolvedType = useMemo8(() => inferDocumentType(source, type), [source, type]);
   const isPdf = resolvedType === "pdf";
   const hasNativePageView = Boolean(UIManager2.getViewManagerConfig?.("PapyrusPageView"));
   const canRender = !isPdf || hasNativePageView;
   const shouldRender = Boolean(visible);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!shouldRender) {
       if (!keepAlive) {
         setEngine(null);
@@ -33076,7 +33249,7 @@ var CoverPreview = ({
       setEngine(new MobileDocumentEngine());
     }
   }, [shouldRender, keepAlive, engine, canRender]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!engine || !shouldRender || !canRender) return;
     let active = true;
     setLoading(true);
@@ -33103,13 +33276,13 @@ var CoverPreview = ({
       active = false;
     };
   }, [engine, shouldRender, canRender, source, type, pageIndex, isPdf, onLoadStart, onLoadEnd, onError]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!engine || !isPdf || !loaded || !layoutReady || !shouldRender || !canRender) return;
     const viewTag = findNodeHandle3(viewRef.current);
     if (!viewTag) return;
     engine.renderPage(pageIndex, viewTag, renderScale);
   }, [engine, isPdf, loaded, layoutReady, shouldRender, canRender, pageIndex, renderScale]);
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       engine?.destroy();
     };
@@ -33176,19 +33349,19 @@ var styles16 = StyleSheet16.create({
 var CoverPreview_default = CoverPreview;
 
 // components/ReadingShell.tsx
-import React19, { useState as useState15 } from "react";
+import React19, { useState as useState16 } from "react";
 import { Keyboard as Keyboard2, View as View22, StyleSheet as StyleSheet23 } from "react-native";
-import { useViewerStore as useViewerStore20 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore21 } from "@papyrus-sdk/core";
 
 // components/DocumentActionsSheet.tsx
 import { StyleSheet as StyleSheet17, Text as Text10, View as View17 } from "react-native";
-import { useViewerStore as useViewerStore14 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore15 } from "@papyrus-sdk/core";
 import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function DocumentActionsSheet({
   visible,
   onClose
 }) {
-  const { uiTheme } = useViewerStore14();
+  const { uiTheme } = useViewerStore15();
   const isDark = uiTheme === "dark";
   const palette = getReaderSheetPalette(isDark);
   return /* @__PURE__ */ jsx21(
@@ -33257,7 +33430,7 @@ var styles17 = StyleSheet17.create({
 
 // components/InfoSheet.tsx
 import { StyleSheet as StyleSheet18, Text as Text11, View as View18 } from "react-native";
-import { useViewerStore as useViewerStore15 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore16 } from "@papyrus-sdk/core";
 
 // components/infoSheetModel.ts
 var roundPercent = (value) => Math.max(0, Math.min(100, Math.round(value)));
@@ -33372,7 +33545,7 @@ function InfoSheet({
     viewMode,
     pageTheme,
     locale
-  } = useViewerStore15();
+  } = useViewerStore16();
   const isDark = uiTheme === "dark";
   const palette = getReaderSheetPalette(isDark);
   const isPortuguese = locale === "pt-BR";
@@ -33482,7 +33655,7 @@ var styles18 = StyleSheet18.create({
 
 // components/OverflowSheet.tsx
 import { Pressable as Pressable12, StyleSheet as StyleSheet19, Text as Text12, View as View19 } from "react-native";
-import { useViewerStore as useViewerStore16 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore17 } from "@papyrus-sdk/core";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var actionLabels = [{ key: "actions", label: "Document actions" }];
 function OverflowSheet({
@@ -33490,7 +33663,7 @@ function OverflowSheet({
   onClose,
   onOpenActions
 }) {
-  const isDark = useViewerStore16((state) => state.uiTheme === "dark");
+  const isDark = useViewerStore17((state) => state.uiTheme === "dark");
   const palette = getReaderSheetPalette(isDark);
   return /* @__PURE__ */ jsx23(
     NativeSheet,
@@ -33540,9 +33713,9 @@ var styles19 = StyleSheet19.create({
 });
 
 // components/ProgressPill.tsx
-import { useEffect as useEffect14, useMemo as useMemo9, useRef as useRef10, useState as useState13 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo9, useRef as useRef10, useState as useState14 } from "react";
 import {
-  Animated as Animated3,
+  Animated as Animated5,
   PanResponder as PanResponder2,
   Pressable as Pressable13,
   StyleSheet as StyleSheet20,
@@ -33550,7 +33723,7 @@ import {
   View as View20,
   useWindowDimensions as useWindowDimensions9
 } from "react-native";
-import { useViewerStore as useViewerStore17 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore18 } from "@papyrus-sdk/core";
 
 // components/progressPillMode.ts
 function resolveProgressPillMode(viewMode, currentPage, pageCount) {
@@ -33586,7 +33759,7 @@ function ProgressPill({
     accentColor,
     mobileChromeVisible,
     mobileProgressPillVisible
-  } = useViewerStore17();
+  } = useViewerStore18();
   const t = getStrings(locale);
   const isDark = uiTheme === "dark";
   const offsets = resolveMobileChromeOffsets(usePapyrusSafeAreaInsets());
@@ -33608,7 +33781,7 @@ function ProgressPill({
   const longPressTriggeredRef = useRef10(false);
   const longPressTimerRef = useRef10(null);
   const pendingReleasedScrubPageRef = useRef10(null);
-  const [scrubPreviewPage, setScrubPreviewPage] = useState13(null);
+  const [scrubPreviewPage, setScrubPreviewPage] = useState14(null);
   const onNavigateToPageRef = useRef10(onNavigateToPage);
   const onPressRef = useRef10(onPress);
   const onOpenPageJumpRef = useRef10(onOpenPageJump);
@@ -33641,34 +33814,34 @@ function ProgressPill({
     thumbHeight,
     pageCount
   });
-  const thumbTopRef = useRef10(new Animated3.Value(thumbTop));
+  const thumbTopRef = useRef10(new Animated5.Value(thumbTop));
   const thumbTopSnapshotRef = useRef10(thumbTop);
   thumbTopSnapshotRef.current = thumbTop;
   const scrubStartThumbTopRef = useRef10(0);
-  const trackReveal = useRef10(new Animated3.Value(0)).current;
-  const [trackOriginY, setTrackOriginY] = useState13(0);
+  const trackReveal = useRef10(new Animated5.Value(0)).current;
+  const [trackOriginY, setTrackOriginY] = useState14(0);
   const scrubberMetricsRef = useRef10({ trackHeight, thumbHeight, pageCount });
   scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
-  useEffect14(() => {
+  useEffect15(() => {
     onNavigateToPageRef.current = onNavigateToPage;
   }, [onNavigateToPage]);
-  useEffect14(() => {
+  useEffect15(() => {
     onPressRef.current = onPress;
     onOpenPageJumpRef.current = onOpenPageJump;
   }, [onOpenPageJump, onPress]);
-  useEffect14(() => {
+  useEffect15(() => {
     const pendingPage = pendingReleasedScrubPageRef.current;
     if (pendingPage !== null && currentPage === pendingPage) {
       pendingReleasedScrubPageRef.current = null;
       setScrubPreviewPage(null);
     }
   }, [currentPage]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isScrubbingRef.current) {
       thumbTopRef.current.setValue(thumbTop);
     }
   }, [thumbTop, thumbTopRef]);
-  useEffect14(
+  useEffect15(
     () => () => {
       if (longPressTimerRef.current !== null) {
         clearTimeout(longPressTimerRef.current);
@@ -33803,7 +33976,7 @@ function ProgressPill({
           })
         );
         trackReveal.setValue(0);
-        Animated3.timing(trackReveal, {
+        Animated5.timing(trackReveal, {
           toValue: 1,
           duration: 180,
           useNativeDriver: false
@@ -33849,7 +34022,7 @@ function ProgressPill({
         }
         isScrubbingRef.current = false;
         onScrubbingChangeRef.current?.(false);
-        Animated3.timing(trackReveal, {
+        Animated5.timing(trackReveal, {
           toValue: 0,
           duration: 140,
           useNativeDriver: false
@@ -33881,7 +34054,7 @@ function ProgressPill({
         }
         isScrubbingRef.current = false;
         onScrubbingChangeRef.current?.(false);
-        Animated3.timing(trackReveal, {
+        Animated5.timing(trackReveal, {
           toValue: 0,
           duration: 140,
           useNativeDriver: false
@@ -33921,7 +34094,7 @@ function ProgressPill({
           },
           children: [
             /* @__PURE__ */ jsx24(
-              Animated3.View,
+              Animated5.View,
               {
                 pointerEvents: "none",
                 style: [
@@ -33937,7 +34110,7 @@ function ProgressPill({
               }
             ),
             /* @__PURE__ */ jsx24(
-              Animated3.View,
+              Animated5.View,
               {
                 pointerEvents: "box-none",
                 style: [styles20.thumb, { top: thumbTopRef.current }],
@@ -34078,7 +34251,7 @@ var styles20 = StyleSheet20.create({
 });
 
 // components/SearchOverlay.tsx
-import React18, { useEffect as useEffect15, useMemo as useMemo10, useState as useState14 } from "react";
+import React18, { useEffect as useEffect16, useMemo as useMemo10, useState as useState15 } from "react";
 import {
   Keyboard,
   Pressable as Pressable14,
@@ -34088,7 +34261,7 @@ import {
   View as View21,
   useWindowDimensions as useWindowDimensions10
 } from "react-native";
-import { SearchService, useViewerStore as useViewerStore18 } from "@papyrus-sdk/core";
+import { SearchService, useViewerStore as useViewerStore19 } from "@papyrus-sdk/core";
 
 // components/searchOverlayLayout.ts
 var getSearchOverlayLayout = (windowWidth) => {
@@ -34129,9 +34302,9 @@ function SearchOverlay({
     setSearch,
     uiTheme,
     accentColor
-  } = useViewerStore18();
-  const [draft, setDraft] = useState14(searchQuery);
-  const [isSearching, setIsSearching] = useState14(false);
+  } = useViewerStore19();
+  const [draft, setDraft] = useState15(searchQuery);
+  const [isSearching, setIsSearching] = useState15(false);
   const searchRequestIdRef = React18.useRef(0);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = useWindowDimensions10();
@@ -34140,12 +34313,12 @@ function SearchOverlay({
   const t = getStrings(locale);
   const searchService = useMemo10(() => new SearchService(engine), [engine]);
   const results = documentType === "text" ? textSearchResults : searchResults;
-  useEffect15(() => {
+  useEffect16(() => {
     searchService.clearCache();
   }, [isLoaded, pageCount, searchService]);
   const currentCount = results.length > 0 && activeSearchIndex >= 0 ? activeSearchIndex + 1 : 0;
   const targetLabel = documentType === "pdf" ? t.page : documentType === "epub" ? t.contents : t.progress;
-  useEffect15(() => {
+  useEffect16(() => {
     if (!visible) return;
     setDraft(searchQuery);
   }, [searchQuery, visible]);
@@ -34434,7 +34607,7 @@ var styles21 = StyleSheet21.create({
 
 // components/SearchResultsSheet.tsx
 import { Pressable as Pressable15, StyleSheet as StyleSheet22, Text as Text15 } from "react-native";
-import { useViewerStore as useViewerStore19 } from "@papyrus-sdk/core";
+import { useViewerStore as useViewerStore20 } from "@papyrus-sdk/core";
 import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function SearchResultsSheet({
   documentType,
@@ -34453,7 +34626,7 @@ function SearchResultsSheet({
     triggerScrollToTextOffset,
     uiTheme,
     accentColor
-  } = useViewerStore19();
+  } = useViewerStore20();
   const results = documentType === "text" ? textSearchResults : searchResults;
   const isDark = uiTheme === "dark";
   const palette = getReaderSheetPalette(isDark);
@@ -34567,14 +34740,14 @@ function ReadingShell({
     pageCount,
     uiTheme,
     accentColor
-  } = useViewerStore20();
-  const [overflowOpen, setOverflowOpen] = useState15(false);
-  const [infoOpen, setInfoOpen] = useState15(false);
-  const [actionsOpen, setActionsOpen] = useState15(false);
-  const [settingsOpen, setSettingsOpen] = useState15(false);
-  const [searchResultsOpen, setSearchResultsOpen] = useState15(false);
-  const [pageJumpOpen, setPageJumpOpen] = useState15(false);
-  const [pageScrubActive, setPageScrubActive] = useState15(false);
+  } = useViewerStore21();
+  const [overflowOpen, setOverflowOpen] = useState16(false);
+  const [infoOpen, setInfoOpen] = useState16(false);
+  const [actionsOpen, setActionsOpen] = useState16(false);
+  const [settingsOpen, setSettingsOpen] = useState16(false);
+  const [searchResultsOpen, setSearchResultsOpen] = useState16(false);
+  const [pageJumpOpen, setPageJumpOpen] = useState16(false);
+  const [pageScrubActive, setPageScrubActive] = useState16(false);
   const isDark = uiTheme === "dark";
   React19.useEffect(() => {
     const showSubscription = Keyboard2.addListener("keyboardDidShow", () => {