@papyrus-sdk/ui-react-native 0.2.7 → 0.2.8

package/dist/index.js

@@ -625,6 +625,190 @@ var import_react = require("react");
 var import_react_native = require("react-native");
 var import_core = require("@papyrus-sdk/core");
 var import_engine_native = require("@papyrus-sdk/engine-native");
+
+// perf/mobilePerf.ts
+var DEFAULT_PREFIX = "[Papyrus Perf]";
+var FRAME_BUDGET_MS = 1e3 / 60;
+var getPerfGlobal = () => globalThis.__PAPYRUS_MOBILE_PERF__;
+var getPerfConfig = () => {
+  const value = getPerfGlobal();
+  if (value === true) {
+    return {
+      enabled: true,
+      sampleMemory: true,
+      logPrefix: DEFAULT_PREFIX,
+      verbose: false
+    };
+  }
+  if (!value || typeof value !== "object") {
+    return {
+      enabled: false,
+      sampleMemory: false,
+      logPrefix: DEFAULT_PREFIX,
+      verbose: false
+    };
+  }
+  return {
+    enabled: value.enabled ?? true,
+    sampleMemory: value.sampleMemory ?? true,
+    logPrefix: value.logPrefix ?? DEFAULT_PREFIX,
+    verbose: value.verbose ?? false
+  };
+};
+var round = (value) => Math.round(value * 100) / 100;
+var bytesToMb = (bytes) => round(bytes / (1024 * 1024));
+var getNumericValue = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
+var readHermesHeapBytes = () => {
+  const runtimeProperties = globalThis.HermesInternal?.getRuntimeProperties?.();
+  if (!runtimeProperties || typeof runtimeProperties !== "object") return null;
+  const candidates = [
+    "JSHeapSize",
+    "js_heap_size",
+    "HeapSize",
+    "heapSize",
+    "TotalAllocatedBytes",
+    "totalAllocatedBytes",
+    "mallocSize"
+  ];
+  for (const key of candidates) {
+    const value = getNumericValue(runtimeProperties[key]);
+    if (value !== null) return value;
+  }
+  return null;
+};
+var logPerf = (scope, event, payload) => {
+  const config = getPerfConfig();
+  if (!config.enabled) return;
+  const line = `${config.logPrefix}[${scope}] ${event}`;
+  if (payload) {
+    console.log(line, payload);
+    return;
+  }
+  console.log(line);
+};
+var isMobilePerfEnabled = () => getPerfConfig().enabled;
+var perfNow = () => {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
+  }
+  return Date.now();
+};
+var sampleMemory = (scope, event, payload) => {
+  const config = getPerfConfig();
+  if (!config.enabled || !config.sampleMemory) return;
+  const performanceMemory = globalThis.performance?.memory;
+  const jsHeapUsedBytes = getNumericValue(performanceMemory?.usedJSHeapSize);
+  const jsHeapTotalBytes = getNumericValue(performanceMemory?.totalJSHeapSize);
+  const hermesHeapBytes = readHermesHeapBytes();
+  if (jsHeapUsedBytes === null && jsHeapTotalBytes === null && hermesHeapBytes === null) return;
+  logPerf(scope, `memory.${event}`, {
+    ...payload,
+    jsHeapUsedMb: jsHeapUsedBytes === null ? void 0 : bytesToMb(jsHeapUsedBytes),
+    jsHeapTotalMb: jsHeapTotalBytes === null ? void 0 : bytesToMb(jsHeapTotalBytes),
+    hermesHeapMb: hermesHeapBytes === null ? void 0 : bytesToMb(hermesHeapBytes)
+  });
+};
+var createBurstMonitor = (scope, label, threshold = 12, windowMs = 1e3) => {
+  let windowStart = 0;
+  let calls = 0;
+  return (payload) => {
+    const config = getPerfConfig();
+    if (!config.enabled) return;
+    const now = perfNow();
+    if (windowStart === 0 || now - windowStart > windowMs) {
+      windowStart = now;
+      calls = 0;
+    }
+    calls += 1;
+    if (calls === threshold || config.verbose) {
+      logPerf(scope, `${label}.burst`, {
+        calls,
+        windowMs: round(now - windowStart),
+        ...payload
+      });
+    }
+  };
+};
+var createRenderCounter = (scope, label = "render", reportEvery = 30) => {
+  let count = 0;
+  return (payload) => {
+    const config = getPerfConfig();
+    if (!config.enabled) return;
+    count += 1;
+    if (count === 1 || count % reportEvery === 0 || config.verbose) {
+      logPerf(scope, label, {
+        count,
+        ...payload
+      });
+    }
+  };
+};
+var createScrollPerfMonitor = (scope, label = "scroll") => {
+  let active = false;
+  let startAt = 0;
+  let lastEventAt = 0;
+  let sampleEvents = 0;
+  let droppedFrames = 0;
+  let maxFrameGapMs = 0;
+  const reset = () => {
+    active = false;
+    startAt = 0;
+    lastEventAt = 0;
+    sampleEvents = 0;
+    droppedFrames = 0;
+    maxFrameGapMs = 0;
+  };
+  return {
+    begin: (reason, payload) => {
+      const config = getPerfConfig();
+      if (!config.enabled) return;
+      if (active) return;
+      active = true;
+      startAt = perfNow();
+      if (reason && config.verbose) {
+        logPerf(scope, `${label}.begin`, {
+          reason,
+          ...payload
+        });
+      }
+    },
+    track: (timestampMs) => {
+      if (!isMobilePerfEnabled()) return;
+      const now = typeof timestampMs === "number" && Number.isFinite(timestampMs) ? timestampMs : perfNow();
+      if (!active) {
+        active = true;
+        startAt = now;
+      }
+      if (lastEventAt > 0) {
+        const frameGap = Math.max(0, now - lastEventAt);
+        maxFrameGapMs = Math.max(maxFrameGapMs, frameGap);
+        droppedFrames += Math.max(0, Math.round(frameGap / FRAME_BUDGET_MS) - 1);
+      }
+      sampleEvents += 1;
+      lastEventAt = now;
+    },
+    end: (reason, payload) => {
+      if (!isMobilePerfEnabled() || !active) return;
+      const stopAt = lastEventAt || perfNow();
+      const durationMs = Math.max(0, stopAt - startAt);
+      const estimatedFrameTotal = Math.max(sampleEvents + droppedFrames, 1);
+      const fpsEstimate = durationMs > 0 ? sampleEvents * 1e3 / durationMs : 0;
+      logPerf(scope, `${label}.${reason}`, {
+        durationMs: round(durationMs),
+        sampleEvents,
+        droppedFrames,
+        droppedFramesPct: round(droppedFrames / estimatedFrameTotal * 100),
+        fpsEstimate: round(fpsEstimate),
+        maxFrameGapMs: round(maxFrameGapMs),
+        ...payload
+      });
+      reset();
+    }
+  };
+};
+var logPerfEvent = logPerf;
+
+// components/PageRenderer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var PageRenderer = ({
   engine,
@@ -641,6 +825,11 @@ var PageRenderer = ({
   const { width: windowWidth } = (0, import_react_native.useWindowDimensions)();
   const isAndroid = import_react_native.Platform.OS === "android";
   const isNative = import_react_native.Platform.OS === "android" || import_react_native.Platform.OS === "ios";
+  const perfEnabled = isMobilePerfEnabled();
+  const renderCountRef = (0, import_react.useRef)(0);
+  const setStateBurstRef = (0, import_react.useRef)(
+    createBurstMonitor("PageRenderer", "setDocumentState", 18, 700)
+  );
   const {
     zoom,
     rotation,
@@ -657,6 +846,19 @@ var PageRenderer = ({
     activeSearchIndex,
     setSelectionActive
   } = (0, import_core.useViewerStore)();
+  const setDocumentStateTracked = (0, import_react.useCallback)(
+    (state, reason) => {
+      if (perfEnabled) {
+        setStateBurstRef.current({
+          reason,
+          page: pageIndex + 1,
+          keys: Object.keys(state).join(",")
+        });
+      }
+      setDocumentState(state);
+    },
+    [pageIndex, perfEnabled, setDocumentState]
+  );
   const pageAnnotations = (0, import_react.useMemo)(
     () => annotations.filter((ann) => ann.pageIndex === pageIndex),
     [annotations, pageIndex]
@@ -665,6 +867,17 @@ var PageRenderer = ({
     () => searchResults.map((result, index) => ({ result, index })).filter(({ result }) => result.pageIndex === pageIndex),
     [searchResults, pageIndex]
   );
+  renderCountRef.current += 1;
+  if (perfEnabled && (renderCountRef.current === 1 || renderCountRef.current % 20 === 0)) {
+    logPerfEvent("PageRenderer", "render", {
+      page: pageIndex + 1,
+      renderCount: renderCountRef.current,
+      zoom,
+      rotation,
+      annotationCount: pageAnnotations.length,
+      searchHits: pageSearchHits.length
+    });
+  }
   const [selectionRect, setSelectionRect] = (0, import_react.useState)(null);
   const [selectionRects, setSelectionRects] = (0, import_react.useState)([]);
   const [selectionBounds, setSelectionBounds] = (0, import_react.useState)(null);
@@ -674,30 +887,72 @@ var PageRenderer = ({
   const selectionRectRef = (0, import_react.useRef)(null);
   const selectionBoundsRef = (0, import_react.useRef)(null);
   const selectionBoundsStart = (0, import_react.useRef)(null);
-  const lastTapRef = (0, import_react.useRef)(null);
+  const lastTapRef = (0, import_react.useRef)(
+    null
+  );
   const pinchRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (!layout.width || !layout.height) return;
     const viewTag = (0, import_react_native.findNodeHandle)(viewRef.current);
     if (viewTag) {
       const renderScale = isNative ? scale / Math.max(zoom, 0.5) : scale;
-      void engine.renderPage(pageIndex, viewTag, renderScale);
+      const startedAt = perfEnabled ? perfNow() : 0;
+      void Promise.resolve(engine.renderPage(pageIndex, viewTag, renderScale)).then(() => {
+        if (!perfEnabled) return;
+        const renderDurationMs = perfNow() - startedAt;
+        if (renderDurationMs >= 40) {
+          logPerfEvent("PageRenderer", "renderPage.slow", {
+            page: pageIndex + 1,
+            renderDurationMs: Math.round(renderDurationMs * 100) / 100,
+            layoutWidth: layout.width,
+            layoutHeight: layout.height,
+            renderScale: Math.round(renderScale * 100) / 100
+          });
+        }
+      }).catch((error) => {
+        logPerfEvent("PageRenderer", "renderPage.error", {
+          page: pageIndex + 1,
+          message: error instanceof Error ? error.message : String(error)
+        });
+      });
     }
-  }, [engine, pageIndex, scale, zoom, rotation, layout.width, layout.height, isNative]);
+  }, [
+    engine,
+    pageIndex,
+    scale,
+    zoom,
+    rotation,
+    layout.width,
+    layout.height,
+    isNative,
+    perfEnabled
+  ]);
   (0, import_react.useEffect)(() => {
     let active = true;
     const loadDimensions = async () => {
+      const startedAt = perfEnabled ? perfNow() : 0;
       const dims = await engine.getPageDimensions(pageIndex);
       if (!active) return;
       if (dims.width > 0 && dims.height > 0) {
         setPageSize({ width: dims.width, height: dims.height });
       }
+      if (perfEnabled) {
+        const durationMs = perfNow() - startedAt;
+        if (durationMs >= 20 || pageIndex === 0) {
+          logPerfEvent("PageRenderer", "pageDimensions", {
+            page: pageIndex + 1,
+            durationMs: Math.round(durationMs * 100) / 100,
+            width: dims.width,
+            height: dims.height
+          });
+        }
+      }
     };
     void loadDimensions();
     return () => {
       active = false;
     };
-  }, [engine, pageIndex]);
+  }, [engine, pageIndex, perfEnabled]);
   const handleLayout = (event) => {
     const { width, height } = event.nativeEvent.layout;
     if (width !== layout.width || height !== layout.height) {
@@ -797,7 +1052,7 @@ var PageRenderer = ({
     if (!distance) return;
     const scale2 = distance / pinchRef.current.distance;
     const nextZoom = clamp(pinchRef.current.zoom * scale2, 0.5, 4);
-    setDocumentState({ zoom: nextZoom });
+    setDocumentStateTracked({ zoom: nextZoom }, "pinchMove");
     engine.setZoom(nextZoom);
   };
   const handlePinchEnd = () => {
@@ -845,7 +1100,12 @@ var PageRenderer = ({
         const top = Math.max(0, Math.min(start.y, currentY));
         const right = Math.min(layout.width, Math.max(start.x, currentX));
         const bottom = Math.min(layout.height, Math.max(start.y, currentY));
-        const rect = { x: left, y: top, width: right - left, height: bottom - top };
+        const rect = {
+          x: left,
+          y: top,
+          width: right - left,
+          height: bottom - top
+        };
         selectionRectRef.current = rect;
         setSelectionRect(rect);
       },
@@ -941,7 +1201,13 @@ var PageRenderer = ({
     if (selectionRects.length === 0) return;
     if (type === "comment") {
       const first = selectionRects[0];
-      addAnnotationAt(first.x, first.y, Math.max(0.08, first.width), Math.max(0.06, first.height), "comment");
+      addAnnotationAt(
+        first.x,
+        first.y,
+        Math.max(0.08, first.width),
+        Math.max(0.06, first.height),
+        "comment"
+      );
       clearSelection();
       return;
     }
@@ -975,12 +1241,18 @@ var PageRenderer = ({
       horizontal: true,
       scrollEnabled,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [styles.scrollContent, { paddingHorizontal: horizontalPadding }],
+      contentContainerStyle: [
+        styles.scrollContent,
+        { paddingHorizontal: horizontalPadding }
+      ],
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_react_native.Pressable,
         {
           ...panResponder.panHandlers,
-          style: [styles.container, { width: pageWidth, height: pageHeight, marginBottom: spacing }],
+          style: [
+            styles.container,
+            { width: pageWidth, height: pageHeight, marginBottom: spacing }
+          ],
           onLayout: handleLayout,
           onPress: handlePress,
           onStartShouldSetResponder: (event) => shouldHandlePinch(event.nativeEvent.touches),
@@ -991,7 +1263,13 @@ var PageRenderer = ({
           onResponderTerminate: handlePinchEnd,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageViewComponent, { ref: viewRef, style: styles.page }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { pointerEvents: "none", style: [styles.themeOverlay, themeOverlayStyle] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_native.View,
+              {
+                pointerEvents: "none",
+                style: [styles.themeOverlay, themeOverlayStyle]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { pointerEvents: "box-none", style: styles.selectionLayer, children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { pointerEvents: "none", children: selectionRects.map((rect, index) => {
                 const style = {
@@ -1000,7 +1278,13 @@ var PageRenderer = ({
                   width: `${rect.width * 100}%`,
                   height: `${rect.height * 100}%`
                 };
-                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.selectionHighlight, style] }, `sel-${index}`);
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_react_native.View,
+                  {
+                    style: [styles.selectionHighlight, style]
+                  },
+                  `sel-${index}`
+                );
               }) }),
               selectionBoundsPx ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                 import_react_native.View,
@@ -1021,14 +1305,20 @@ var PageRenderer = ({
                       import_react_native.View,
                       {
                         ...startHandleResponder.panHandlers,
-                        style: [styles.selectionHandle, { left: -8, top: -8, borderColor: accentColor }]
+                        style: [
+                          styles.selectionHandle,
+                          { left: -8, top: -8, borderColor: accentColor }
+                        ]
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       import_react_native.View,
                       {
                         ...endHandleResponder.panHandlers,
-                        style: [styles.selectionHandle, { right: -8, bottom: -8, borderColor: accentColor }]
+                        style: [
+                          styles.selectionHandle,
+                          { right: -8, bottom: -8, borderColor: accentColor }
+                        ]
                       }
                     )
                   ]
@@ -1067,9 +1357,15 @@ var PageRenderer = ({
                   {
                     style: [
                       styles.searchHighlight,
-                      { borderColor: accentColor, backgroundColor: `${accentColor}26` },
+                      {
+                        borderColor: accentColor,
+                        backgroundColor: `${accentColor}26`
+                      },
                       isActive && styles.searchHighlightActive,
-                      isActive && { borderColor: accentColor, backgroundColor: `${accentColor}40` },
+                      isActive && {
+                        borderColor: accentColor,
+                        backgroundColor: `${accentColor}40`
+                      },
                       highlightStyle
                     ]
                   },
@@ -1099,8 +1395,29 @@ var PageRenderer = ({
                     isSelected && { borderColor: accentColor }
                   ],
                   children: [
-                    (ann.type === "comment" || ann.type === "text") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.annotationBadge, { borderColor: ann.color }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.annotationDot, { backgroundColor: ann.color }] }) }),
-                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { onPress: () => removeAnnotation(ann.id), style: styles.deleteButton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.deleteDot }) })
+                    (ann.type === "comment" || ann.type === "text") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_react_native.View,
+                      {
+                        style: [styles.annotationBadge, { borderColor: ann.color }],
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_react_native.View,
+                          {
+                            style: [
+                              styles.annotationDot,
+                              { backgroundColor: ann.color }
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_react_native.Pressable,
+                      {
+                        onPress: () => removeAnnotation(ann.id),
+                        style: styles.deleteButton,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.deleteDot })
+                      }
+                    )
                   ]
                 },
                 ann.id
@@ -1118,9 +1435,46 @@ var PageRenderer = ({
                   }
                 ],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { onPress: () => applySelection("comment"), style: styles.selectionAction, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.selectionActionDot }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { onPress: () => applySelection("highlight"), style: styles.selectionAction, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.selectionSwatch, { backgroundColor: annotationColor }] }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Pressable, { onPress: () => applySelection("strikeout"), style: [styles.selectionAction, styles.selectionActionLast], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.selectionStrike, { backgroundColor: annotationColor }] }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native.Pressable,
+                    {
+                      onPress: () => applySelection("comment"),
+                      style: styles.selectionAction,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.selectionActionDot })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native.Pressable,
+                    {
+                      onPress: () => applySelection("highlight"),
+                      style: styles.selectionAction,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_react_native.View,
+                        {
+                          style: [
+                            styles.selectionSwatch,
+                            { backgroundColor: annotationColor }
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_native.Pressable,
+                    {
+                      onPress: () => applySelection("strikeout"),
+                      style: [styles.selectionAction, styles.selectionActionLast],
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_react_native.View,
+                        {
+                          style: [
+                            styles.selectionStrike,
+                            { backgroundColor: annotationColor }
+                          ]
+                        }
+                      )
+                    }
+                  )
                 ]
               }
             ) : null
@@ -1418,8 +1772,27 @@ var WebViewViewer_default = WebViewViewer;
 
 // components/Viewer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var LIST_TOP_PADDING = 18;
+var LIST_BOTTOM_PADDING = 120;
+var CONTINUOUS_PAGE_SPACING = 28;
+var DOUBLE_PAGE_SPACING = 20;
+var DEFAULT_PAGE_ASPECT_RATIO = 0.77;
+var FLATLIST_WINDOW_SIZE = 8;
+var FLATLIST_MAX_TO_RENDER_PER_BATCH = 6;
+var FLATLIST_UPDATE_CELLS_BATCHING_PERIOD = 40;
+var FLATLIST_INITIAL_NUM_TO_RENDER = 6;
+var SCROLL_RETRY_DELAY_MS = 120;
+var SCROLL_MAX_RETRIES = 10;
 var Viewer = ({ engine }) => {
-  const { pageCount, currentPage, scrollToPageSignal, setDocumentState, uiTheme, viewMode } = (0, import_core3.useViewerStore)();
+  const {
+    pageCount,
+    currentPage,
+    scrollToPageSignal,
+    setDocumentState,
+    uiTheme,
+    viewMode,
+    zoom
+  } = (0, import_core3.useViewerStore)();
   const listRef = (0, import_react3.useRef)(null);
   const isDark = uiTheme === "dark";
   const { width: windowWidth } = (0, import_react_native3.useWindowDimensions)();
@@ -1427,7 +1800,38 @@ var Viewer = ({ engine }) => {
   const isSingle = viewMode === "single";
   const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
   const isWebView = renderTargetType === "webview";
-  const pages = (0, import_react3.useMemo)(() => Array.from({ length: pageCount }).map((_, i) => i), [pageCount]);
+  const perfEnabled = isMobilePerfEnabled();
+  const mountedAtRef = (0, import_react3.useRef)(perfNow());
+  const readyLoggedRef = (0, import_react3.useRef)(false);
+  const renderCounterRef = (0, import_react3.useRef)(createRenderCounter("Viewer", "render", 40));
+  const setStateBurstRef = (0, import_react3.useRef)(
+    createBurstMonitor("Viewer", "setDocumentState", 12, 800)
+  );
+  const viewableBurstRef = (0, import_react3.useRef)(
+    createBurstMonitor("Viewer", "onViewableItemsChanged", 12, 800)
+  );
+  const scrollMonitorRef = (0, import_react3.useRef)(createScrollPerfMonitor("Viewer"));
+  const dimensionsCacheRef = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
+  const dimensionsPendingRef = (0, import_react3.useRef)(/* @__PURE__ */ new Set());
+  const layoutRefreshTimeoutRef = (0, import_react3.useRef)(
+    null
+  );
+  const pendingScrollIndexRef = (0, import_react3.useRef)(null);
+  const pendingScrollAttemptsRef = (0, import_react3.useRef)(0);
+  const pendingScrollTimeoutRef = (0, import_react3.useRef)(
+    null
+  );
+  const [layoutRevision, setLayoutRevision] = (0, import_react3.useState)(0);
+  renderCounterRef.current({
+    pageCount,
+    currentPage,
+    viewMode,
+    renderTargetType
+  });
+  const pages = (0, import_react3.useMemo)(
+    () => Array.from({ length: pageCount }).map((_, i) => i),
+    [pageCount]
+  );
   const rows = (0, import_react3.useMemo)(() => {
     if (!isDouble) return [];
     const result = [];
@@ -1436,48 +1840,354 @@ var Viewer = ({ engine }) => {
     }
     return result;
   }, [isDouble, pageCount]);
+  const scheduleLayoutRefresh = (0, import_react3.useCallback)(() => {
+    if (layoutRefreshTimeoutRef.current) return;
+    layoutRefreshTimeoutRef.current = setTimeout(() => {
+      layoutRefreshTimeoutRef.current = null;
+      setLayoutRevision((value) => value + 1);
+    }, 120);
+  }, []);
+  const clearPendingScrollRetry = (0, import_react3.useCallback)(() => {
+    if (pendingScrollTimeoutRef.current) {
+      clearTimeout(pendingScrollTimeoutRef.current);
+      pendingScrollTimeoutRef.current = null;
+    }
+  }, []);
+  const clearPendingScrollTarget = (0, import_react3.useCallback)(() => {
+    pendingScrollIndexRef.current = null;
+    pendingScrollAttemptsRef.current = 0;
+    clearPendingScrollRetry();
+  }, [clearPendingScrollRetry]);
+  const scheduleScrollRetry = (0, import_react3.useCallback)(
+    (reason) => {
+      const pendingIndex = pendingScrollIndexRef.current;
+      if (pendingIndex === null) return;
+      if (pendingScrollAttemptsRef.current >= SCROLL_MAX_RETRIES) {
+        if (perfEnabled) {
+          logPerfEvent("Viewer", "scroll.retry.giveup", {
+            reason,
+            targetIndex: pendingIndex,
+            attempts: pendingScrollAttemptsRef.current
+          });
+        }
+        clearPendingScrollTarget();
+        return;
+      }
+      clearPendingScrollRetry();
+      pendingScrollTimeoutRef.current = setTimeout(() => {
+        pendingScrollTimeoutRef.current = null;
+        const targetIndex = pendingScrollIndexRef.current;
+        if (targetIndex === null) return;
+        pendingScrollAttemptsRef.current += 1;
+        listRef.current?.scrollToIndex({
+          index: targetIndex,
+          animated: false,
+          viewPosition: 0
+        });
+        if (perfEnabled) {
+          logPerfEvent("Viewer", "scroll.retry", {
+            reason,
+            targetIndex,
+            attempt: pendingScrollAttemptsRef.current
+          });
+        }
+      }, SCROLL_RETRY_DELAY_MS);
+    },
+    [clearPendingScrollRetry, clearPendingScrollTarget, perfEnabled]
+  );
+  (0, import_react3.useEffect)(
+    () => () => {
+      if (layoutRefreshTimeoutRef.current) {
+        clearTimeout(layoutRefreshTimeoutRef.current);
+      }
+      clearPendingScrollRetry();
+    },
+    [clearPendingScrollRetry]
+  );
+  const ensurePageDimensions = (0, import_react3.useCallback)(
+    (pageIndex) => {
+      if (pageIndex < 0 || pageIndex >= pageCount) return;
+      if (dimensionsCacheRef.current.has(pageIndex)) return;
+      if (dimensionsPendingRef.current.has(pageIndex)) return;
+      dimensionsPendingRef.current.add(pageIndex);
+      void engine.getPageDimensions(pageIndex).then((dims) => {
+        if (dims.width <= 0 || dims.height <= 0) return;
+        const previous = dimensionsCacheRef.current.get(pageIndex);
+        if (previous && previous.width === dims.width && previous.height === dims.height) {
+          return;
+        }
+        dimensionsCacheRef.current.set(pageIndex, {
+          width: dims.width,
+          height: dims.height
+        });
+        scheduleLayoutRefresh();
+      }).catch((error) => {
+        if (!perfEnabled) return;
+        logPerfEvent("Viewer", "pageDimensions.error", {
+          page: pageIndex + 1,
+          message: error instanceof Error ? error.message : String(error)
+        });
+      }).finally(() => {
+        dimensionsPendingRef.current.delete(pageIndex);
+      });
+    },
+    [engine, pageCount, perfEnabled, scheduleLayoutRefresh]
+  );
+  const getPageAspectRatio = (0, import_react3.useCallback)((pageIndex) => {
+    const dims = dimensionsCacheRef.current.get(pageIndex);
+    if (!dims || dims.width <= 0 || dims.height <= 0) {
+      return DEFAULT_PAGE_ASPECT_RATIO;
+    }
+    return dims.width / dims.height;
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!perfEnabled) return;
+    logPerfEvent("Viewer", "mount", { viewMode, renderTargetType });
+    sampleMemory("Viewer", "mount", { pageCount });
+    return () => {
+      logPerfEvent("Viewer", "unmount");
+    };
+  }, [perfEnabled]);
+  (0, import_react3.useEffect)(() => {
+    if (!perfEnabled || readyLoggedRef.current || pageCount <= 0) return;
+    readyLoggedRef.current = true;
+    logPerfEvent("Viewer", "document.ready", {
+      pageCount,
+      initialLoadMs: Math.round((perfNow() - mountedAtRef.current) * 100) / 100
+    });
+    sampleMemory("Viewer", "document.ready", { pageCount });
+  }, [pageCount, perfEnabled]);
+  (0, import_react3.useEffect)(() => {
+    if (isWebView || isSingle || pageCount <= 0) return;
+    const warmupCount = Math.min(pageCount, 12);
+    for (let i = 0; i < warmupCount; i += 1) {
+      ensurePageDimensions(i);
+    }
+  }, [ensurePageDimensions, isSingle, isWebView, pageCount]);
+  const setDocumentStateTracked = (0, import_react3.useCallback)(
+    (state, reason) => {
+      if (perfEnabled) {
+        setStateBurstRef.current({
+          reason,
+          keys: Object.keys(state).join(",")
+        });
+      }
+      setDocumentState(state);
+    },
+    [perfEnabled, setDocumentState]
+  );
+  const columnGap = 12;
+  const horizontalPadding = 16;
+  const columnWidth = isDouble ? (windowWidth - horizontalPadding * 2 - columnGap) / 2 : windowWidth;
+  const listLayoutMetrics = (0, import_react3.useMemo)(() => {
+    const offsets = [];
+    const lengths = [];
+    let offset = LIST_TOP_PADDING;
+    if (isDouble) {
+      const safeZoom2 = Math.max(zoom, 0.25);
+      const pageWidth2 = columnWidth * 0.92 * safeZoom2;
+      const estimatedLength2 = pageWidth2 / DEFAULT_PAGE_ASPECT_RATIO + DOUBLE_PAGE_SPACING;
+      for (let i = 0; i < rows.length; i += 1) {
+        const row = rows[i];
+        const leftRatio = getPageAspectRatio(row.left);
+        const rightRatio = row.right === null ? leftRatio : getPageAspectRatio(row.right);
+        const leftLength = pageWidth2 / leftRatio + DOUBLE_PAGE_SPACING;
+        const rightLength = pageWidth2 / rightRatio + DOUBLE_PAGE_SPACING;
+        const rowLength = Math.max(leftLength, rightLength);
+        offsets.push(offset);
+        lengths.push(rowLength);
+        offset += rowLength;
+      }
+      return { offsets, lengths, estimatedLength: estimatedLength2 };
+    }
+    const safeZoom = Math.max(zoom, 0.25);
+    const pageWidth = windowWidth * 0.92 * safeZoom;
+    const estimatedLength = pageWidth / DEFAULT_PAGE_ASPECT_RATIO + CONTINUOUS_PAGE_SPACING;
+    for (let i = 0; i < pageCount; i += 1) {
+      const ratio = getPageAspectRatio(i);
+      const length = pageWidth / ratio + CONTINUOUS_PAGE_SPACING;
+      offsets.push(offset);
+      lengths.push(length);
+      offset += length;
+    }
+    return { offsets, lengths, estimatedLength };
+  }, [
+    columnWidth,
+    getPageAspectRatio,
+    isDouble,
+    layoutRevision,
+    pageCount,
+    rows,
+    windowWidth,
+    zoom
+  ]);
+  const getFallbackOffsetForIndex = (0, import_react3.useCallback)(
+    (index) => {
+      if (listLayoutMetrics.lengths.length === 0) {
+        return LIST_TOP_PADDING;
+      }
+      const safeIndex = Math.max(
+        0,
+        Math.min(index, listLayoutMetrics.lengths.length - 1)
+      );
+      const cachedOffset = listLayoutMetrics.offsets[safeIndex];
+      if (typeof cachedOffset === "number") return cachedOffset;
+      return LIST_TOP_PADDING + listLayoutMetrics.estimatedLength * safeIndex;
+    },
+    [listLayoutMetrics]
+  );
+  const getItemLayout = (0, import_react3.useCallback)(
+    (_, index) => {
+      if (listLayoutMetrics.lengths.length === 0) {
+        return {
+          index,
+          length: listLayoutMetrics.estimatedLength,
+          offset: LIST_TOP_PADDING
+        };
+      }
+      const safeIndex = Math.max(
+        0,
+        Math.min(index, listLayoutMetrics.lengths.length - 1)
+      );
+      if (isDouble) {
+        const row = rows[safeIndex];
+        if (row) {
+          ensurePageDimensions(row.left);
+          if (row.right !== null) {
+            ensurePageDimensions(row.right);
+          }
+        }
+      } else {
+        ensurePageDimensions(safeIndex);
+      }
+      const cachedLength = listLayoutMetrics.lengths[safeIndex];
+      const cachedOffset = listLayoutMetrics.offsets[safeIndex];
+      return {
+        index,
+        length: typeof cachedLength === "number" ? cachedLength : listLayoutMetrics.estimatedLength,
+        offset: typeof cachedOffset === "number" ? cachedOffset : LIST_TOP_PADDING + listLayoutMetrics.estimatedLength * safeIndex
+      };
+    },
+    [ensurePageDimensions, isDouble, listLayoutMetrics, rows]
+  );
   (0, import_react3.useEffect)(() => {
     if (isWebView) {
+      clearPendingScrollTarget();
       if (scrollToPageSignal === null) return;
       if (pageCount === 0) return;
       if (scrollToPageSignal < 0 || scrollToPageSignal >= pageCount) return;
       const nextPage = scrollToPageSignal + 1;
       engine.goToPage(nextPage);
-      setDocumentState({ currentPage: nextPage, scrollToPageSignal: null });
+      setDocumentStateTracked(
+        { currentPage: nextPage, scrollToPageSignal: null },
+        "scrollToPageSignal.webview"
+      );
       return;
     }
     if (scrollToPageSignal === null) return;
     if (pageCount === 0) return;
     if (scrollToPageSignal < 0 || scrollToPageSignal >= pageCount) return;
     if (isSingle) {
-      setDocumentState({ currentPage: scrollToPageSignal + 1, scrollToPageSignal: null });
+      clearPendingScrollTarget();
+      setDocumentStateTracked(
+        { currentPage: scrollToPageSignal + 1, scrollToPageSignal: null },
+        "scrollToPageSignal.single"
+      );
       return;
     }
+    ensurePageDimensions(scrollToPageSignal);
+    if (isDouble) {
+      ensurePageDimensions(scrollToPageSignal - 1);
+      ensurePageDimensions(scrollToPageSignal + 1);
+    }
     const targetIndex = isDouble ? Math.floor(scrollToPageSignal / 2) : scrollToPageSignal;
-    listRef.current?.scrollToIndex({ index: targetIndex, animated: true });
-    setDocumentState({ scrollToPageSignal: null });
-  }, [scrollToPageSignal, pageCount, setDocumentState, isDouble, isSingle, isWebView, engine]);
+    pendingScrollIndexRef.current = targetIndex;
+    pendingScrollAttemptsRef.current = 0;
+    clearPendingScrollRetry();
+    setDocumentStateTracked(
+      {
+        currentPage: scrollToPageSignal + 1,
+        scrollToPageSignal: null
+      },
+      "scrollToPageSignal.flatList"
+    );
+    listRef.current?.scrollToIndex({
+      index: targetIndex,
+      animated: true,
+      viewPosition: 0
+    });
+  }, [
+    clearPendingScrollRetry,
+    clearPendingScrollTarget,
+    ensurePageDimensions,
+    scrollToPageSignal,
+    pageCount,
+    setDocumentStateTracked,
+    isDouble,
+    isSingle,
+    isWebView,
+    engine
+  ]);
   const onViewableItemsChanged = (0, import_react3.useCallback)(
     ({ viewableItems }) => {
+      if (perfEnabled) {
+        viewableBurstRef.current({
+          viewableCount: viewableItems.length,
+          mode: isDouble ? "double" : "continuous"
+        });
+      }
+      const pendingIndex = pendingScrollIndexRef.current;
+      if (pendingIndex !== null) {
+        const reachedTarget = viewableItems.some((token) => {
+          if (isDouble) {
+            const row = token.item;
+            if (!row) return false;
+            if (row.left === pendingIndex) return true;
+            return row.right === pendingIndex;
+          }
+          return token.index === pendingIndex;
+        });
+        if (reachedTarget) {
+          if (perfEnabled) {
+            logPerfEvent("Viewer", "scroll.retry.resolved", {
+              targetIndex: pendingIndex,
+              attempts: pendingScrollAttemptsRef.current
+            });
+          }
+          clearPendingScrollTarget();
+        }
+      }
       const first = viewableItems[0];
       if (!first) return;
       if (isDouble) {
         const item = first.item;
         if (!item) return;
+        ensurePageDimensions(item.left);
+        if (item.right !== null) {
+          ensurePageDimensions(item.right);
+        }
         const page = item.left + 1;
         if (page !== currentPage) {
-          setDocumentState({ currentPage: page });
+          setDocumentStateTracked({ currentPage: page }, "viewable.double");
         }
         return;
       }
       if (first.index !== null && first.index !== void 0) {
+        ensurePageDimensions(first.index);
         const page = first.index + 1;
         if (page !== currentPage) {
-          setDocumentState({ currentPage: page });
+          setDocumentStateTracked({ currentPage: page }, "viewable.continuous");
         }
       }
     },
-    [currentPage, isDouble, setDocumentState]
+    [
+      clearPendingScrollTarget,
+      currentPage,
+      ensurePageDimensions,
+      isDouble,
+      perfEnabled,
+      setDocumentStateTracked
+    ]
   );
   if (isWebView) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WebViewViewer_default, { engine }) });
@@ -1489,50 +2199,137 @@ var Viewer = ({ engine }) => {
         contentContainerStyle: styles3.singleContent,
         showsVerticalScrollIndicator: false,
         scrollEnabled: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PageRenderer_default, { engine, pageIndex: Math.max(0, currentPage - 1), spacing: 32 })
+        onScroll: perfEnabled ? (event) => {
+          const timestampValue = event.nativeEvent.timestamp;
+          const timestamp = typeof timestampValue === "number" ? timestampValue : void 0;
+          scrollMonitorRef.current.track(timestamp);
+        } : void 0,
+        onScrollBeginDrag: perfEnabled ? () => {
+          scrollMonitorRef.current.begin("single.beginDrag");
+        } : void 0,
+        onMomentumScrollBegin: perfEnabled ? () => {
+          scrollMonitorRef.current.begin("single.momentumBegin");
+        } : void 0,
+        onScrollEndDrag: perfEnabled ? () => {
+          scrollMonitorRef.current.end("single.endDrag");
+          sampleMemory("Viewer", "single.endDrag", { pageCount });
+        } : void 0,
+        onMomentumScrollEnd: perfEnabled ? () => {
+          scrollMonitorRef.current.end("single.momentumEnd");
+          sampleMemory("Viewer", "single.momentumEnd", { pageCount });
+        } : void 0,
+        scrollEventThrottle: perfEnabled ? 16 : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          PageRenderer_default,
+          {
+            engine,
+            pageIndex: Math.max(0, currentPage - 1),
+            spacing: 32
+          }
+        )
       }
     ) });
   }
-  const columnGap = 12;
-  const horizontalPadding = 16;
-  const columnWidth = isDouble ? (windowWidth - horizontalPadding * 2 - columnGap) / 2 : windowWidth;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles3.container, isDark && styles3.containerDark], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_react_native3.FlatList,
     {
       ref: listRef,
       data: isDouble ? rows : pages,
+      initialNumToRender: FLATLIST_INITIAL_NUM_TO_RENDER,
+      windowSize: FLATLIST_WINDOW_SIZE,
+      maxToRenderPerBatch: FLATLIST_MAX_TO_RENDER_PER_BATCH,
+      updateCellsBatchingPeriod: FLATLIST_UPDATE_CELLS_BATCHING_PERIOD,
+      removeClippedSubviews: true,
+      getItemLayout,
       keyExtractor: (item) => isDouble ? `row-${item.left}` : `page-${item}`,
       contentContainerStyle: styles3.listContent,
-      renderItem: ({ item }) => isDouble ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.View, { style: [styles3.row, { paddingHorizontal: horizontalPadding }], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          PageRenderer_default,
-          {
-            engine,
-            pageIndex: item.left,
-            availableWidth: columnWidth,
-            horizontalPadding: 8,
-            spacing: 20
-          }
-        ) }),
-        item.right !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          PageRenderer_default,
-          {
-            engine,
-            pageIndex: item.right,
-            availableWidth: columnWidth,
-            horizontalPadding: 8,
-            spacing: 20
-          }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth } })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PageRenderer_default, { engine, pageIndex: item, spacing: 28 }),
+      renderItem: ({ item }) => isDouble ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_react_native3.View,
+        {
+          style: [styles3.row, { paddingHorizontal: horizontalPadding }],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              PageRenderer_default,
+              {
+                engine,
+                pageIndex: item.left,
+                availableWidth: columnWidth,
+                horizontalPadding: 8,
+                spacing: DOUBLE_PAGE_SPACING
+              }
+            ) }),
+            item.right !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              PageRenderer_default,
+              {
+                engine,
+                pageIndex: item.right,
+                availableWidth: columnWidth,
+                horizontalPadding: 8,
+                spacing: DOUBLE_PAGE_SPACING
+              }
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: { width: columnWidth } })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        PageRenderer_default,
+        {
+          engine,
+          pageIndex: item,
+          spacing: CONTINUOUS_PAGE_SPACING
+        }
+      ),
       onViewableItemsChanged,
       viewabilityConfig: { itemVisiblePercentThreshold: 60 },
       scrollEnabled: true,
       onScrollToIndexFailed: ({ index, averageItemLength }) => {
-        if (index < 0 || index >= pageCount) return;
-        const offset = Math.max(0, averageItemLength * index);
-        listRef.current?.scrollToOffset({ offset, animated: true });
+        const dataLength = isDouble ? rows.length : pages.length;
+        if (index < 0 || index >= dataLength) return;
+        pendingScrollIndexRef.current = index;
+        const offset = Math.max(0, getFallbackOffsetForIndex(index));
+        listRef.current?.scrollToOffset({ offset, animated: false });
+        if (!isDouble) {
+          ensurePageDimensions(index);
+        } else {
+          const row = rows[index];
+          if (row) {
+            ensurePageDimensions(row.left);
+            if (row.right !== null) {
+              ensurePageDimensions(row.right);
+            }
+          }
+        }
+        scheduleScrollRetry("onScrollToIndexFailed");
+        if (perfEnabled) {
+          logPerfEvent("Viewer", "scrollToIndexFailed", {
+            index,
+            averageItemLength,
+            fallbackOffset: offset,
+            fallbackSource: "cached-item-layout",
+            itemCount: dataLength,
+            retryAttempt: pendingScrollAttemptsRef.current
+          });
+        }
       },
+      onScroll: perfEnabled ? (event) => {
+        const timestampValue = event.nativeEvent.timestamp;
+        const timestamp = typeof timestampValue === "number" ? timestampValue : void 0;
+        scrollMonitorRef.current.track(timestamp);
+      } : void 0,
+      onScrollBeginDrag: perfEnabled ? () => {
+        scrollMonitorRef.current.begin("continuous.beginDrag");
+      } : void 0,
+      onMomentumScrollBegin: perfEnabled ? () => {
+        scrollMonitorRef.current.begin("continuous.momentumBegin");
+      } : void 0,
+      onScrollEndDrag: perfEnabled ? () => {
+        scrollMonitorRef.current.end("continuous.endDrag");
+        sampleMemory("Viewer", "continuous.endDrag", { pageCount });
+      } : void 0,
+      onMomentumScrollEnd: perfEnabled ? () => {
+        scrollMonitorRef.current.end("continuous.momentumEnd");
+        sampleMemory("Viewer", "continuous.momentumEnd", { pageCount });
+      } : void 0,
+      scrollEventThrottle: perfEnabled ? 16 : void 0,
       showsVerticalScrollIndicator: false
     }
   ) });
@@ -1546,8 +2343,8 @@ var styles3 = import_react_native3.StyleSheet.create({
     backgroundColor: "#0f1115"
   },
   listContent: {
-    paddingTop: 18,
-    paddingBottom: 120
+    paddingTop: LIST_TOP_PADDING,
+    paddingBottom: LIST_BOTTOM_PADDING
   },
   singleContent: {
     paddingTop: 18,
@@ -2069,7 +2866,29 @@ var PageThumbnail = ({
         isActive && { borderColor: accentColor }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { onLayout: handleLayout, style: [styles6.thumbFrame, { width: frameWidth, height: frameHeight }], children: useNativePreview ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_engine_native2.PapyrusPageView, { ref: viewRef, style: styles6.thumbView }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.thumbFallback, isDark && styles6.thumbFallbackDark], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.thumbFallbackText, isDark && styles6.thumbFallbackTextDark], children: pageIndex + 1 }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native6.View,
+          {
+            onLayout: handleLayout,
+            style: [styles6.thumbFrame, { width: frameWidth, height: frameHeight }],
+            children: useNativePreview ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_engine_native2.PapyrusPageView, { ref: viewRef, style: styles6.thumbView }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_react_native6.View,
+              {
+                style: [styles6.thumbFallback, isDark && styles6.thumbFallbackDark],
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.Text,
+                  {
+                    style: [
+                      styles6.thumbFallbackText,
+                      isDark && styles6.thumbFallbackTextDark
+                    ],
+                    children: pageIndex + 1
+                  }
+                )
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.thumbLabel, isDark && styles6.thumbLabelDark], children: pageIndex + 1 })
       ]
     }
@@ -2136,7 +2955,9 @@ var RightSheet = ({ engine }) => {
     locale,
     accentColor
   } = (0, import_core6.useViewerStore)();
-  const [pagesMode, setPagesMode] = (0, import_react5.useState)("thumbnails");
+  const [pagesMode, setPagesMode] = (0, import_react5.useState)(
+    "thumbnails"
+  );
   const [query, setQuery] = (0, import_react5.useState)("");
   const [isSearching, setIsSearching] = (0, import_react5.useState)(false);
   const searchService = (0, import_react5.useMemo)(() => new import_core6.SearchService(engine), [engine]);
@@ -2144,6 +2965,10 @@ var RightSheet = ({ engine }) => {
   const accentSoft = withAlpha(accentColor, 0.2);
   const accentStrong = withAlpha(accentColor, 0.35);
   const t = getStrings(locale);
+  const perfEnabled = isMobilePerfEnabled();
+  const setStateBurstRef = (0, import_react5.useRef)(
+    createBurstMonitor("RightSheet", "setDocumentState", 10, 800)
+  );
   const sheetHeight = Math.min(640, import_react_native6.Dimensions.get("window").height * 0.72);
   const windowWidth = import_react_native6.Dimensions.get("window").width;
   const gridGutter = 12;
@@ -2152,24 +2977,76 @@ var RightSheet = ({ engine }) => {
   const frameWidth = cardWidth - 16;
   const frameHeight = frameWidth * 1.28;
   const renderTarget = engine.getRenderTargetType?.();
-  const hasNativePageView = Boolean(import_react_native6.UIManager.getViewManagerConfig?.("PapyrusPageView"));
+  const hasNativePageView = Boolean(
+    import_react_native6.UIManager.getViewManagerConfig?.("PapyrusPageView")
+  );
   const useNativePreview = renderTarget !== "webview" && hasNativePageView;
   const closeSheet = () => toggleSidebarRight();
+  const setDocumentStateTracked = (0, import_react5.useCallback)(
+    (state, reason) => {
+      if (perfEnabled) {
+        setStateBurstRef.current({
+          reason,
+          keys: Object.keys(state).join(",")
+        });
+      }
+      setDocumentState(state);
+    },
+    [perfEnabled, setDocumentState]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (!perfEnabled || !sidebarRightOpen) return;
+    logPerfEvent("RightSheet", "open", {
+      tab: sidebarRightTab,
+      pageCount,
+      currentPage
+    });
+    sampleMemory("RightSheet", "open", {
+      tab: sidebarRightTab,
+      pageCount
+    });
+  }, [perfEnabled, sidebarRightOpen]);
+  (0, import_react5.useEffect)(() => {
+    if (!perfEnabled || !sidebarRightOpen) return;
+    return () => {
+      logPerfEvent("RightSheet", "close");
+    };
+  }, [perfEnabled, sidebarRightOpen]);
+  (0, import_react5.useEffect)(() => {
+    if (!perfEnabled || !sidebarRightOpen || sidebarRightTab !== "pages" || pagesMode !== "thumbnails")
+      return;
+    sampleMemory("RightSheet", "thumbnails.open.start", { pageCount });
+    const timeout = setTimeout(() => {
+      sampleMemory("RightSheet", "thumbnails.open.steady", { pageCount });
+    }, 1200);
+    return () => clearTimeout(timeout);
+  }, [pageCount, pagesMode, perfEnabled, sidebarRightOpen, sidebarRightTab]);
   const handleSearch = async () => {
     const trimmed = query.trim();
     if (!trimmed) {
       setSearch("", []);
       return;
     }
+    const startedAt = perfEnabled ? perfNow() : 0;
     setIsSearching(true);
     try {
       const results = await searchService.search(trimmed);
       setSearch(trimmed, results);
+      if (perfEnabled) {
+        logPerfEvent("RightSheet", "search.completed", {
+          queryLength: trimmed.length,
+          results: results.length,
+          durationMs: Math.round((perfNow() - startedAt) * 100) / 100
+        });
+      }
     } finally {
       setIsSearching(false);
     }
   };
-  const pages = (0, import_react5.useMemo)(() => Array.from({ length: pageCount }, (_, i) => i), [pageCount]);
+  const pages = (0, import_react5.useMemo)(
+    () => Array.from({ length: pageCount }, (_, i) => i),
+    [pageCount]
+  );
   const renderHighlightedSnippet = (text, isActive) => {
     const trimmedQuery = searchQuery.trim();
     if (trimmedQuery.length < 2) {
@@ -2203,7 +3080,10 @@ var RightSheet = ({ engine }) => {
       if (index > cursor) {
         parts.push({ text: text.slice(cursor, index), match: false });
       }
-      parts.push({ text: text.slice(index, index + trimmedQuery.length), match: true });
+      parts.push({
+        text: text.slice(index, index + trimmedQuery.length),
+        match: true
+      });
       cursor = index + trimmedQuery.length;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2222,7 +3102,10 @@ var RightSheet = ({ engine }) => {
               part.match && styles6.matchText,
               part.match && isDark && styles6.matchTextDark,
               part.match && isActive && styles6.matchTextActive,
-              part.match && isActive && { backgroundColor: accentStrong, color: accentColor }
+              part.match && isActive && {
+                backgroundColor: accentStrong,
+                color: accentColor
+              }
             ],
             children: part.text
           },
@@ -2232,247 +3115,419 @@ var RightSheet = ({ engine }) => {
     );
   };
   if (!sidebarRightOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Modal, { visible: true, transparent: true, animationType: "slide", onRequestClose: closeSheet, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.modalRoot, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Pressable, { style: styles6.backdrop, onPress: closeSheet }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: [styles6.sheet, { height: sheetHeight }, isDark && styles6.sheetDark], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.handle, isDark && styles6.handleDark] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.tabs, children: ["pages", "search", "annotations"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_react_native6.Pressable,
-        {
-          onPress: () => toggleSidebarRight(tab),
-          style: [
-            styles6.tabButton,
-            isDark && styles6.tabButtonDark,
-            sidebarRightTab === tab && styles6.tabButtonActive,
-            sidebarRightTab === tab && { backgroundColor: accentColor }
-          ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            import_react_native6.Text,
-            {
-              style: [
-                styles6.tabText,
-                isDark && styles6.tabTextDark,
-                sidebarRightTab === tab && styles6.tabTextActive
-              ],
-              children: tab === "pages" ? t.pages : tab === "search" ? t.search : t.notes
-            }
-          )
-        },
-        tab
-      )) }),
-      sidebarRightTab === "pages" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.pagesContent, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.pageHeader, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.Text, { style: [styles6.pageStatus, isDark && styles6.pageStatusDark], children: [
-            t.page,
-            " ",
-            currentPage,
-            " / ",
-            pageCount
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: [styles6.segmented, isDark && styles6.segmentedDark], children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native6.Pressable,
-              {
-                onPress: () => setPagesMode("thumbnails"),
-                style: [
-                  styles6.segmentButton,
-                  pagesMode === "thumbnails" && styles6.segmentButtonActive,
-                  pagesMode === "thumbnails" && { backgroundColor: accentColor }
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_react_native6.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_react_native6.Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: closeSheet,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.modalRoot, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Pressable, { style: styles6.backdrop, onPress: closeSheet }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          import_react_native6.View,
+          {
+            style: [
+              styles6.sheet,
+              { height: sheetHeight },
+              isDark && styles6.sheetDark
+            ],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.handle, isDark && styles6.handleDark] }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles6.tabs, children: ["pages", "search", "annotations"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_native6.Pressable,
+                {
+                  onPress: () => toggleSidebarRight(tab),
+                  style: [
+                    styles6.tabButton,
+                    isDark && styles6.tabButtonDark,
+                    sidebarRightTab === tab && styles6.tabButtonActive,
+                    sidebarRightTab === tab && { backgroundColor: accentColor }
+                  ],
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    import_react_native6.Text,
+                    {
+                      style: [
+                        styles6.tabText,
+                        isDark && styles6.tabTextDark,
+                        sidebarRightTab === tab && styles6.tabTextActive
+                      ],
+                      children: tab === "pages" ? t.pages : tab === "search" ? t.search : t.notes
+                    }
+                  )
+                },
+                tab
+              )) }),
+              sidebarRightTab === "pages" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.pagesContent, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.pageHeader, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    import_react_native6.Text,
+                    {
+                      style: [styles6.pageStatus, isDark && styles6.pageStatusDark],
+                      children: [
+                        t.page,
+                        " ",
+                        currentPage,
+                        " / ",
+                        pageCount
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    import_react_native6.View,
+                    {
+                      style: [styles6.segmented, isDark && styles6.segmentedDark],
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          import_react_native6.Pressable,
+                          {
+                            onPress: () => setPagesMode("thumbnails"),
+                            style: [
+                              styles6.segmentButton,
+                              pagesMode === "thumbnails" && styles6.segmentButtonActive,
+                              pagesMode === "thumbnails" && {
+                                backgroundColor: accentColor
+                              }
+                            ],
+                            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              import_react_native6.Text,
+                              {
+                                style: [
+                                  styles6.segmentText,
+                                  isDark && styles6.segmentTextDark,
+                                  pagesMode === "thumbnails" && styles6.segmentTextActive
+                                ],
+                                children: t.pagesTab
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          import_react_native6.Pressable,
+                          {
+                            onPress: () => setPagesMode("summary"),
+                            style: [
+                              styles6.segmentButton,
+                              pagesMode === "summary" && styles6.segmentButtonActive,
+                              pagesMode === "summary" && {
+                                backgroundColor: accentColor
+                              }
+                            ],
+                            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              import_react_native6.Text,
+                              {
+                                style: [
+                                  styles6.segmentText,
+                                  isDark && styles6.segmentTextDark,
+                                  pagesMode === "summary" && styles6.segmentTextActive
+                                ],
+                                children: t.summaryTab
+                              }
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                pagesMode === "thumbnails" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.FlatList,
                   {
-                    style: [
-                      styles6.segmentText,
-                      isDark && styles6.segmentTextDark,
-                      pagesMode === "thumbnails" && styles6.segmentTextActive
-                    ],
-                    children: t.pagesTab
+                    data: pages,
+                    keyExtractor: (item) => `thumb-${item}`,
+                    numColumns: 2,
+                    contentContainerStyle: styles6.thumbGrid,
+                    columnWrapperStyle: styles6.thumbRow,
+                    showsVerticalScrollIndicator: false,
+                    initialNumToRender: 6,
+                    renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      PageThumbnail,
+                      {
+                        engine,
+                        pageIndex: item,
+                        isActive: item + 1 === currentPage,
+                        isDark,
+                        zoom,
+                        cardWidth,
+                        frameWidth,
+                        frameHeight,
+                        accentColor,
+                        useNativePreview,
+                        onPress: () => {
+                          engine.goToPage(item + 1);
+                          setDocumentStateTracked(
+                            { currentPage: item + 1 },
+                            "thumbnail.press"
+                          );
+                          triggerScrollToPage(item);
+                          closeSheet();
+                        }
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native6.Pressable,
-              {
-                onPress: () => setPagesMode("summary"),
-                style: [
-                  styles6.segmentButton,
-                  pagesMode === "summary" && styles6.segmentButtonActive,
-                  pagesMode === "summary" && { backgroundColor: accentColor }
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  import_react_native6.Text,
+                ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_react_native6.ScrollView,
                   {
-                    style: [
-                      styles6.segmentText,
-                      isDark && styles6.segmentTextDark,
-                      pagesMode === "summary" && styles6.segmentTextActive
-                    ],
-                    children: t.summaryTab
+                    contentContainerStyle: styles6.summaryContent,
+                    showsVerticalScrollIndicator: false,
+                    children: outline.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      import_react_native6.Text,
+                      {
+                        style: [styles6.emptyText, isDark && styles6.emptyTextDark],
+                        children: t.noSummary
+                      }
+                    ) : outline.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      OutlineNode,
+                      {
+                        item,
+                        isDark,
+                        untitledLabel: t.untitled,
+                        onSelect: (pageIndex) => {
+                          engine.goToPage(pageIndex + 1);
+                          setDocumentStateTracked(
+                            { currentPage: pageIndex + 1 },
+                            "outline.select"
+                          );
+                          triggerScrollToPage(pageIndex);
+                          closeSheet();
+                        }
+                      },
+                      `${item.title}-${index}`
+                    ))
                   }
                 )
-              }
-            )
-          ] })
-        ] }),
-        pagesMode === "thumbnails" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react_native6.FlatList,
-          {
-            data: pages,
-            keyExtractor: (item) => `thumb-${item}`,
-            numColumns: 2,
-            contentContainerStyle: styles6.thumbGrid,
-            columnWrapperStyle: styles6.thumbRow,
-            showsVerticalScrollIndicator: false,
-            initialNumToRender: 6,
-            renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              PageThumbnail,
-              {
-                engine,
-                pageIndex: item,
-                isActive: item + 1 === currentPage,
-                isDark,
-                zoom,
-                cardWidth,
-                frameWidth,
-                frameHeight,
-                accentColor,
-                useNativePreview,
-                onPress: () => {
-                  engine.goToPage(item + 1);
-                  setDocumentState({ currentPage: item + 1 });
-                  triggerScrollToPage(item);
-                  closeSheet();
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_react_native6.ScrollView,
+                {
+                  contentContainerStyle: styles6.content,
+                  showsVerticalScrollIndicator: false,
+                  children: sidebarRightTab === "search" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                      import_react_native6.View,
+                      {
+                        style: [styles6.searchBox, isDark && styles6.searchBoxDark],
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                            import_react_native6.TextInput,
+                            {
+                              value: query,
+                              onChangeText: setQuery,
+                              placeholder: t.searchPlaceholder,
+                              placeholderTextColor: isDark ? "#9ca3af" : "#6b7280",
+                              style: [
+                                styles6.searchInput,
+                                isDark && styles6.searchInputDark
+                              ],
+                              onSubmitEditing: handleSearch,
+                              returnKeyType: "search"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                            import_react_native6.Pressable,
+                            {
+                              onPress: handleSearch,
+                              style: [
+                                styles6.searchButton,
+                                { backgroundColor: accentColor }
+                              ],
+                              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: styles6.searchButtonText, children: t.searchGo })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.searchMeta, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                        import_react_native6.Text,
+                        {
+                          style: [
+                            styles6.searchCount,
+                            isDark && styles6.searchCountDark,
+                            { color: accentColor }
+                          ],
+                          children: [
+                            searchResults.length,
+                            " ",
+                            t.results
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.searchNav, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          import_react_native6.Pressable,
+                          {
+                            onPress: prevSearchResult,
+                            disabled: searchResults.length === 0,
+                            style: [
+                              styles6.searchNavButton,
+                              isDark && styles6.searchNavButtonDark,
+                              searchResults.length === 0 && styles6.searchNavButtonDisabled
+                            ],
+                            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              IconChevronLeft,
+                              {
+                                size: 14,
+                                color: isDark ? "#e5e7eb" : "#111827"
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          import_react_native6.Pressable,
+                          {
+                            onPress: nextSearchResult,
+                            disabled: searchResults.length === 0,
+                            style: [
+                              styles6.searchNavButton,
+                              isDark && styles6.searchNavButtonDark,
+                              searchResults.length === 0 && styles6.searchNavButtonDisabled
+                            ],
+                            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                              IconChevronRight,
+                              {
+                                size: 14,
+                                color: isDark ? "#e5e7eb" : "#111827"
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    ] }),
+                    isSearching && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.searchStatus, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.ActivityIndicator, { size: "small", color: accentColor }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        import_react_native6.Text,
+                        {
+                          style: [
+                            styles6.searchStatusText,
+                            isDark && styles6.searchStatusTextDark
+                          ],
+                          children: t.searching
+                        }
+                      )
+                    ] }),
+                    !isSearching && searchResults.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      import_react_native6.Text,
+                      {
+                        style: [styles6.emptyText, isDark && styles6.emptyTextDark],
+                        children: t.noResults
+                      }
+                    ),
+                    !isSearching && searchResults.map((res, idx) => {
+                      const isActive = idx === activeSearchIndex;
+                      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                        import_react_native6.Pressable,
+                        {
+                          onPress: () => {
+                            setDocumentStateTracked(
+                              { activeSearchIndex: idx },
+                              "searchResult.select"
+                            );
+                            triggerScrollToPage(res.pageIndex);
+                            closeSheet();
+                          },
+                          style: [
+                            styles6.resultCard,
+                            isDark && styles6.resultCardDark,
+                            isActive && styles6.resultCardActive,
+                            isActive && { borderColor: accentColor }
+                          ],
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                              import_react_native6.Text,
+                              {
+                                style: [
+                                  styles6.resultPage,
+                                  isDark && styles6.resultPageDark,
+                                  { color: accentColor }
+                                ],
+                                children: [
+                                  t.page,
+                                  " ",
+                                  res.pageIndex + 1
+                                ]
+                              }
+                            ),
+                            renderHighlightedSnippet(res.text, isActive)
+                          ]
+                        },
+                        `${res.pageIndex}-${idx}`
+                      );
+                    })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { children: annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    import_react_native6.Text,
+                    {
+                      style: [styles6.emptyText, isDark && styles6.emptyTextDark],
+                      children: t.noAnnotations
+                    }
+                  ) : annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    import_react_native6.Pressable,
+                    {
+                      onPress: () => {
+                        setSelectedAnnotation(ann.id);
+                        triggerScrollToPage(ann.pageIndex);
+                        closeSheet();
+                      },
+                      style: [styles6.noteCard, isDark && styles6.noteCardDark],
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.noteHeader, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                            import_react_native6.View,
+                            {
+                              style: [
+                                styles6.noteDot,
+                                { backgroundColor: ann.color }
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                            import_react_native6.Text,
+                            {
+                              style: [
+                                styles6.noteTitle,
+                                isDark && styles6.noteTitleDark
+                              ],
+                              children: [
+                                t.page,
+                                " ",
+                                ann.pageIndex + 1
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          import_react_native6.Text,
+                          {
+                            style: [
+                              styles6.noteType,
+                              isDark && styles6.noteTypeDark,
+                              { color: accentColor }
+                            ],
+                            children: ann.type === "comment" || ann.type === "text" ? t.note.toUpperCase() : ann.type.toUpperCase()
+                          }
+                        ),
+                        ann.content ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                          import_react_native6.Text,
+                          {
+                            style: [
+                              styles6.noteContent,
+                              isDark && styles6.noteContentDark
+                            ],
+                            children: ann.content
+                          }
+                        ) : null
+                      ]
+                    },
+                    ann.id
+                  )) })
                 }
-              }
-            )
+              )
+            ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.ScrollView, { contentContainerStyle: styles6.summaryContent, showsVerticalScrollIndicator: false, children: outline.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noSummary }) : outline.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          OutlineNode,
-          {
-            item,
-            isDark,
-            untitledLabel: t.untitled,
-            onSelect: (pageIndex) => {
-              engine.goToPage(pageIndex + 1);
-              setDocumentState({ currentPage: pageIndex + 1 });
-              triggerScrollToPage(pageIndex);
-              closeSheet();
-            }
-          },
-          `${item.title}-${index}`
-        )) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.ScrollView, { contentContainerStyle: styles6.content, showsVerticalScrollIndicator: false, children: sidebarRightTab === "search" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: [styles6.searchBox, isDark && styles6.searchBoxDark], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            import_react_native6.TextInput,
-            {
-              value: query,
-              onChangeText: setQuery,
-              placeholder: t.searchPlaceholder,
-              placeholderTextColor: isDark ? "#9ca3af" : "#6b7280",
-              style: [styles6.searchInput, isDark && styles6.searchInputDark],
-              onSubmitEditing: handleSearch,
-              returnKeyType: "search"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Pressable, { onPress: handleSearch, style: [styles6.searchButton, { backgroundColor: accentColor }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: styles6.searchButtonText, children: t.searchGo }) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.searchMeta, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.Text, { style: [styles6.searchCount, isDark && styles6.searchCountDark, { color: accentColor }], children: [
-            searchResults.length,
-            " ",
-            t.results
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.searchNav, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native6.Pressable,
-              {
-                onPress: prevSearchResult,
-                disabled: searchResults.length === 0,
-                style: [
-                  styles6.searchNavButton,
-                  isDark && styles6.searchNavButtonDark,
-                  searchResults.length === 0 && styles6.searchNavButtonDisabled
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconChevronLeft, { size: 14, color: isDark ? "#e5e7eb" : "#111827" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native6.Pressable,
-              {
-                onPress: nextSearchResult,
-                disabled: searchResults.length === 0,
-                style: [
-                  styles6.searchNavButton,
-                  isDark && styles6.searchNavButtonDark,
-                  searchResults.length === 0 && styles6.searchNavButtonDisabled
-                ],
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconChevronRight, { size: 14, color: isDark ? "#e5e7eb" : "#111827" })
-              }
-            )
-          ] })
-        ] }),
-        isSearching && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.searchStatus, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.ActivityIndicator, { size: "small", color: accentColor }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.searchStatusText, isDark && styles6.searchStatusTextDark], children: t.searching })
-        ] }),
-        !isSearching && searchResults.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noResults }),
-        !isSearching && searchResults.map((res, idx) => {
-          const isActive = idx === activeSearchIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            import_react_native6.Pressable,
-            {
-              onPress: () => {
-                setDocumentState({ activeSearchIndex: idx });
-                triggerScrollToPage(res.pageIndex);
-                closeSheet();
-              },
-              style: [
-                styles6.resultCard,
-                isDark && styles6.resultCardDark,
-                isActive && styles6.resultCardActive,
-                isActive && { borderColor: accentColor }
-              ],
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.Text, { style: [styles6.resultPage, isDark && styles6.resultPageDark, { color: accentColor }], children: [
-                  t.page,
-                  " ",
-                  res.pageIndex + 1
-                ] }),
-                renderHighlightedSnippet(res.text, isActive)
-              ]
-            },
-            `${res.pageIndex}-${idx}`
-          );
-        })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { children: annotations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.emptyText, isDark && styles6.emptyTextDark], children: t.noAnnotations }) : annotations.map((ann) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        import_react_native6.Pressable,
-        {
-          onPress: () => {
-            setSelectedAnnotation(ann.id);
-            triggerScrollToPage(ann.pageIndex);
-            closeSheet();
-          },
-          style: [styles6.noteCard, isDark && styles6.noteCardDark],
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.View, { style: styles6.noteHeader, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: [styles6.noteDot, { backgroundColor: ann.color }] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native6.Text, { style: [styles6.noteTitle, isDark && styles6.noteTitleDark], children: [
-                t.page,
-                " ",
-                ann.pageIndex + 1
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.noteType, isDark && styles6.noteTypeDark, { color: accentColor }], children: ann.type === "comment" || ann.type === "text" ? t.note.toUpperCase() : ann.type.toUpperCase() }),
-            ann.content ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.Text, { style: [styles6.noteContent, isDark && styles6.noteContentDark], children: ann.content }) : null
-          ]
-        },
-        ann.id
-      )) }) })
-    ] })
-  ] }) });
+        )
+      ] })
+    }
+  );
 };
 var styles6 = import_react_native6.StyleSheet.create({
   modalRoot: {