@papyrus-sdk/ui-react-native 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2890 @@
+// components/Viewer.tsx
+import { useMemo as useMemo2, useRef as useRef2, useEffect as useEffect2, useCallback } from "react";
+import { FlatList, ScrollView as ScrollView2, StyleSheet as StyleSheet2, View as View2, useWindowDimensions as useWindowDimensions2 } from "react-native";
+import { useViewerStore as useViewerStore2 } from "@papyrus-sdk/core";
+
+// components/PageRenderer.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  ScrollView,
+  PanResponder,
+  Platform,
+  findNodeHandle,
+  useWindowDimensions
+} from "react-native";
+import { useViewerStore } from "@papyrus-sdk/core";
+import { PapyrusPageView } from "@papyrus-sdk/engine-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PageRenderer = ({
+  engine,
+  pageIndex,
+  scale = 1,
+  PageViewComponent = PapyrusPageView,
+  availableWidth,
+  horizontalPadding = 16,
+  spacing = 24
+}) => {
+  const viewRef = useRef(null);
+  const [layout, setLayout] = useState({ width: 0, height: 0 });
+  const [pageSize, setPageSize] = useState(null);
+  const { width: windowWidth } = useWindowDimensions();
+  const isAndroid = Platform.OS === "android";
+  const isNative = Platform.OS === "android" || Platform.OS === "ios";
+  const {
+    zoom,
+    rotation,
+    pageTheme,
+    annotations,
+    annotationColor,
+    addAnnotation,
+    setDocumentState,
+    accentColor,
+    selectedAnnotationId,
+    setSelectedAnnotation,
+    removeAnnotation,
+    searchResults,
+    activeSearchIndex,
+    setSelectionActive
+  } = useViewerStore();
+  const pageAnnotations = useMemo(
+    () => annotations.filter((ann) => ann.pageIndex === pageIndex),
+    [annotations, pageIndex]
+  );
+  const pageSearchHits = useMemo(
+    () => searchResults.map((result, index) => ({ result, index })).filter(({ result }) => result.pageIndex === pageIndex),
+    [searchResults, pageIndex]
+  );
+  const [selectionRect, setSelectionRect] = useState(null);
+  const [selectionRects, setSelectionRects] = useState([]);
+  const [selectionBounds, setSelectionBounds] = useState(null);
+  const [selectionText, setSelectionText] = useState("");
+  const [isSelecting, setIsSelecting] = useState(false);
+  const selectionStart = useRef(null);
+  const selectionRectRef = useRef(null);
+  const selectionBoundsRef = useRef(null);
+  const selectionBoundsStart = useRef(null);
+  const lastTapRef = useRef(null);
+  const pinchRef = useRef(null);
+  useEffect(() => {
+    if (!layout.width || !layout.height) return;
+    const viewTag = findNodeHandle(viewRef.current);
+    if (viewTag) {
+      const renderScale = isAndroid ? scale / Math.max(zoom, 0.5) : scale;
+      void engine.renderPage(pageIndex, viewTag, renderScale);
+    }
+  }, [engine, pageIndex, scale, zoom, rotation, layout.width, layout.height, isAndroid]);
+  useEffect(() => {
+    let active = true;
+    const loadDimensions = async () => {
+      const dims = await engine.getPageDimensions(pageIndex);
+      if (!active) return;
+      if (dims.width > 0 && dims.height > 0) {
+        setPageSize({ width: dims.width, height: dims.height });
+      }
+    };
+    void loadDimensions();
+    return () => {
+      active = false;
+    };
+  }, [engine, pageIndex]);
+  const handleLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width !== layout.width || height !== layout.height) {
+      setLayout({ width, height });
+    }
+  };
+  const addAnnotationAt = (x, y, width, height, type) => {
+    addAnnotation({
+      id: Math.random().toString(36).slice(2, 9),
+      pageIndex,
+      type,
+      rect: { x, y, width, height },
+      color: annotationColor,
+      content: type === "text" || type === "comment" ? "" : void 0,
+      createdAt: Date.now()
+    });
+  };
+  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+  const getBoundsFromRects = (rects) => {
+    let minX = 1;
+    let minY = 1;
+    let maxX = 0;
+    let maxY = 0;
+    rects.forEach((rect) => {
+      minX = Math.min(minX, rect.x);
+      minY = Math.min(minY, rect.y);
+      maxX = Math.max(maxX, rect.x + rect.width);
+      maxY = Math.max(maxY, rect.y + rect.height);
+    });
+    if (maxX <= minX || maxY <= minY) return null;
+    return {
+      x: clamp(minX, 0, 1),
+      y: clamp(minY, 0, 1),
+      width: clamp(maxX - minX, 0, 1),
+      height: clamp(maxY - minY, 0, 1)
+    };
+  };
+  const clearSelection = () => {
+    setSelectionRect(null);
+    selectionRectRef.current = null;
+    setSelectionRects([]);
+    setSelectionBounds(null);
+    selectionBoundsRef.current = null;
+    setSelectionText("");
+    setIsSelecting(false);
+    selectionStart.current = null;
+    selectionBoundsStart.current = null;
+    setSelectionActive(false);
+  };
+  const applySelectionResult = (selection) => {
+    if (!selection || !selection.rects || selection.rects.length === 0) {
+      clearSelection();
+      return;
+    }
+    setSelectionRects(selection.rects);
+    setSelectionText(selection.text || "");
+    const bounds = getBoundsFromRects(selection.rects);
+    if (!bounds) {
+      clearSelection();
+      return;
+    }
+    setSelectionBounds(bounds);
+    selectionBoundsRef.current = bounds;
+    setSelectionActive(true);
+  };
+  const selectFromBounds = async (bounds) => {
+    const selection = await engine.selectText?.(pageIndex, bounds);
+    applySelectionResult(selection ?? null);
+  };
+  const selectAtPoint = async (x, y) => {
+    if (!layout.width || !layout.height) return;
+    const size = 26;
+    const half = size / 2;
+    const left = clamp(x - half, 0, Math.max(0, layout.width - size));
+    const top = clamp(y - half, 0, Math.max(0, layout.height - size));
+    const bounds = {
+      x: left / layout.width,
+      y: top / layout.height,
+      width: size / layout.width,
+      height: size / layout.height
+    };
+    await selectFromBounds(bounds);
+  };
+  const getTouchDistance = (touches) => {
+    if (touches.length < 2) return 0;
+    const [a, b] = touches;
+    return Math.hypot(b.pageX - a.pageX, b.pageY - a.pageY);
+  };
+  const shouldHandlePinch = (touches) => isNative && touches.length === 2;
+  const handlePinchStart = (touches) => {
+    if (!shouldHandlePinch(touches)) return;
+    pinchRef.current = { distance: getTouchDistance(touches), zoom };
+  };
+  const handlePinchMove = (touches) => {
+    if (!shouldHandlePinch(touches) || !pinchRef.current) return;
+    const distance = getTouchDistance(touches);
+    if (!distance) return;
+    const scale2 = distance / pinchRef.current.distance;
+    const nextZoom = clamp(pinchRef.current.zoom * scale2, 0.5, 4);
+    setDocumentState({ zoom: nextZoom });
+    engine.setZoom(nextZoom);
+  };
+  const handlePinchEnd = () => {
+    pinchRef.current = null;
+  };
+  const handlePress = (event) => {
+    if (!layout.width || !layout.height) return;
+    if (selectionRects.length > 0 || selectionBounds) {
+      clearSelection();
+      return;
+    }
+    setSelectedAnnotation(null);
+    if (!isNative) return;
+    const { locationX, locationY } = event.nativeEvent;
+    const now = Date.now();
+    const lastTap = lastTapRef.current;
+    lastTapRef.current = { time: now, x: locationX, y: locationY };
+    if (!lastTap) return;
+    const timeDelta = now - lastTap.time;
+    const distance = Math.hypot(locationX - lastTap.x, locationY - lastTap.y);
+    if (timeDelta < 280 && distance < 24) {
+      void selectAtPoint(locationX, locationY);
+    }
+  };
+  const selectionEnabled = Platform.OS === "web";
+  void selectionText;
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => selectionEnabled,
+      onMoveShouldSetPanResponder: () => selectionEnabled,
+      onPanResponderGrant: (event) => {
+        if (!selectionEnabled || !layout.width || !layout.height) return;
+        const { locationX, locationY } = event.nativeEvent;
+        selectionStart.current = { x: locationX, y: locationY };
+        setIsSelecting(true);
+        const rect = { x: locationX, y: locationY, width: 0, height: 0 };
+        selectionRectRef.current = rect;
+        setSelectionRect(rect);
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (!selectionEnabled || !selectionStart.current) return;
+        const start = selectionStart.current;
+        const currentX = start.x + gestureState.dx;
+        const currentY = start.y + gestureState.dy;
+        const left = Math.max(0, Math.min(start.x, currentX));
+        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 };
+        selectionRectRef.current = rect;
+        setSelectionRect(rect);
+      },
+      onPanResponderRelease: async () => {
+        const rect = selectionRectRef.current;
+        if (!selectionEnabled || !rect || !layout.width || !layout.height) {
+          setIsSelecting(false);
+          selectionStart.current = null;
+          return;
+        }
+        setIsSelecting(false);
+        selectionStart.current = null;
+        const minSize = 6;
+        if (rect.width < minSize || rect.height < minSize) {
+          clearSelection();
+          return;
+        }
+        const normalized = {
+          x: rect.x / layout.width,
+          y: rect.y / layout.height,
+          width: rect.width / layout.width,
+          height: rect.height / layout.height
+        };
+        await selectFromBounds(normalized);
+        setSelectionRect(null);
+      }
+    }),
+    [selectionEnabled, layout.width, layout.height, engine, pageIndex]
+  );
+  const selectionBoundsPx = useMemo(() => {
+    if (!selectionBounds || !layout.width || !layout.height) return null;
+    return {
+      x: selectionBounds.x * layout.width,
+      y: selectionBounds.y * layout.height,
+      width: selectionBounds.width * layout.width,
+      height: selectionBounds.height * layout.height
+    };
+  }, [selectionBounds, layout.width, layout.height]);
+  const createHandleResponder = (handle) => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: () => {
+      selectionBoundsStart.current = selectionBoundsRef.current;
+    },
+    onPanResponderMove: (_, gestureState) => {
+      const start = selectionBoundsStart.current;
+      if (!start || !layout.width || !layout.height) return;
+      const dx = gestureState.dx / layout.width;
+      const dy = gestureState.dy / layout.height;
+      const minSize = 0.01;
+      let next = { ...start };
+      if (handle === "start") {
+        const newX = clamp(start.x + dx, 0, start.x + start.width - minSize);
+        const newY = clamp(start.y + dy, 0, start.y + start.height - minSize);
+        next = {
+          x: newX,
+          y: newY,
+          width: start.x + start.width - newX,
+          height: start.y + start.height - newY
+        };
+      } else {
+        const maxX = clamp(start.x + start.width + dx, start.x + minSize, 1);
+        const maxY = clamp(start.y + start.height + dy, start.y + minSize, 1);
+        next = {
+          x: start.x,
+          y: start.y,
+          width: maxX - start.x,
+          height: maxY - start.y
+        };
+      }
+      selectionBoundsRef.current = next;
+      setSelectionBounds(next);
+    },
+    onPanResponderRelease: async () => {
+      const next = selectionBoundsRef.current;
+      selectionBoundsStart.current = null;
+      if (!next) return;
+      await selectFromBounds(next);
+    },
+    onPanResponderTerminate: () => {
+      selectionBoundsStart.current = null;
+    }
+  });
+  const startHandleResponder = useMemo(
+    () => createHandleResponder("start"),
+    [layout.width, layout.height, engine, pageIndex]
+  );
+  const endHandleResponder = useMemo(
+    () => createHandleResponder("end"),
+    [layout.width, layout.height, engine, pageIndex]
+  );
+  const applySelection = (type) => {
+    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");
+      clearSelection();
+      return;
+    }
+    selectionRects.forEach((rect) => {
+      addAnnotationAt(rect.x, rect.y, rect.width, rect.height, type);
+    });
+    clearSelection();
+  };
+  const themeOverlayStyle = useMemo(() => {
+    switch (pageTheme) {
+      case "sepia":
+        return styles.themeSepia;
+      case "dark":
+        return styles.themeDark;
+      case "high-contrast":
+        return styles.themeContrast;
+      default:
+        return styles.themeNone;
+    }
+  }, [pageTheme]);
+  const aspectRatio = pageSize && pageSize.width > 0 && pageSize.height > 0 ? pageSize.width / pageSize.height : 0.77;
+  const containerWidth = availableWidth ?? windowWidth;
+  const baseWidth = containerWidth * 0.92;
+  const pageWidth = isAndroid ? baseWidth * zoom : baseWidth;
+  const pageHeight = pageWidth / aspectRatio;
+  const scrollEnabled = isAndroid && zoom > 1;
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      horizontal: true,
+      scrollEnabled,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [styles.scrollContent, { paddingHorizontal: horizontalPadding }],
+      children: /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          ...panResponder.panHandlers,
+          style: [styles.container, { width: pageWidth, height: pageHeight, marginBottom: spacing }],
+          onLayout: handleLayout,
+          onPress: handlePress,
+          onStartShouldSetResponder: (event) => shouldHandlePinch(event.nativeEvent.touches),
+          onMoveShouldSetResponder: (event) => shouldHandlePinch(event.nativeEvent.touches),
+          onResponderGrant: (event) => handlePinchStart(event.nativeEvent.touches),
+          onResponderMove: (event) => handlePinchMove(event.nativeEvent.touches),
+          onResponderRelease: handlePinchEnd,
+          onResponderTerminate: handlePinchEnd,
+          children: [
+            /* @__PURE__ */ jsx(PageViewComponent, { ref: viewRef, style: styles.page }),
+            /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.themeOverlay, themeOverlayStyle] }),
+            /* @__PURE__ */ jsxs(View, { pointerEvents: "box-none", style: styles.selectionLayer, children: [
+              /* @__PURE__ */ jsx(View, { pointerEvents: "none", children: selectionRects.map((rect, index) => {
+                const style = {
+                  left: `${rect.x * 100}%`,
+                  top: `${rect.y * 100}%`,
+                  width: `${rect.width * 100}%`,
+                  height: `${rect.height * 100}%`
+                };
+                return /* @__PURE__ */ jsx(View, { style: [styles.selectionHighlight, style] }, `sel-${index}`);
+              }) }),
+              selectionBoundsPx ? /* @__PURE__ */ jsxs(
+                View,
+                {
+                  pointerEvents: "box-none",
+                  style: [
+                    styles.selectionOutline,
+                    {
+                      left: selectionBoundsPx.x,
+                      top: selectionBoundsPx.y,
+                      width: selectionBoundsPx.width,
+                      height: selectionBoundsPx.height,
+                      borderColor: accentColor
+                    }
+                  ],
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        ...startHandleResponder.panHandlers,
+                        style: [styles.selectionHandle, { left: -8, top: -8, borderColor: accentColor }]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        ...endHandleResponder.panHandlers,
+                        style: [styles.selectionHandle, { right: -8, bottom: -8, borderColor: accentColor }]
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              isSelecting && selectionRect ? /* @__PURE__ */ jsx(
+                View,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles.selectionOutline,
+                    {
+                      left: selectionRect.x,
+                      top: selectionRect.y,
+                      width: selectionRect.width,
+                      height: selectionRect.height,
+                      borderColor: accentColor
+                    }
+                  ]
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.searchLayer, children: pageSearchHits.map(({ result, index }) => {
+              if (!result.rects || result.rects.length === 0) return null;
+              return result.rects.map((rect, rectIndex) => {
+                if (rect.width <= 0 || rect.height <= 0) return null;
+                const isActive = index === activeSearchIndex;
+                const highlightStyle = {
+                  left: `${rect.x * 100}%`,
+                  top: `${rect.y * 100}%`,
+                  width: `${rect.width * 100}%`,
+                  height: `${rect.height * 100}%`
+                };
+                return /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: [
+                      styles.searchHighlight,
+                      { borderColor: accentColor, backgroundColor: `${accentColor}26` },
+                      isActive && styles.searchHighlightActive,
+                      isActive && { borderColor: accentColor, backgroundColor: `${accentColor}40` },
+                      highlightStyle
+                    ]
+                  },
+                  `${index}-${rectIndex}`
+                );
+              });
+            }) }),
+            /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: styles.annotationLayer, children: pageAnnotations.map((ann) => {
+              const isSelected = selectedAnnotationId === ann.id;
+              const style = {
+                left: `${ann.rect.x * 100}%`,
+                top: `${ann.rect.y * 100}%`,
+                width: `${ann.rect.width * 100}%`,
+                height: `${ann.rect.height * 100}%`,
+                backgroundColor: ann.type === "highlight" ? `${ann.color}66` : "transparent",
+                borderBottomWidth: ann.type === "strikeout" ? 3 : 0,
+                borderBottomColor: ann.type === "strikeout" ? ann.color : "transparent"
+              };
+              return /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  onPress: () => setSelectedAnnotation(ann.id),
+                  style: [
+                    styles.annotation,
+                    style,
+                    isSelected && styles.annotationSelected,
+                    isSelected && { borderColor: accentColor }
+                  ],
+                  children: [
+                    (ann.type === "comment" || ann.type === "text") && /* @__PURE__ */ jsx(View, { style: [styles.annotationBadge, { borderColor: ann.color }], children: /* @__PURE__ */ jsx(View, { style: [styles.annotationDot, { backgroundColor: ann.color }] }) }),
+                    isSelected && /* @__PURE__ */ jsx(Pressable, { onPress: () => removeAnnotation(ann.id), style: styles.deleteButton, children: /* @__PURE__ */ jsx(View, { style: styles.deleteDot }) })
+                  ]
+                },
+                ann.id
+              );
+            }) }),
+            selectionRects.length > 0 && selectionBoundsPx ? /* @__PURE__ */ jsxs(
+              View,
+              {
+                pointerEvents: "box-none",
+                style: [
+                  styles.selectionToolbar,
+                  {
+                    left: selectionBoundsPx.x,
+                    top: selectionBoundsPx.y + selectionBoundsPx.height + 8 > layout.height - 56 ? Math.max(8, selectionBoundsPx.y - 52) : selectionBoundsPx.y + selectionBoundsPx.height + 8
+                  }
+                ],
+                children: [
+                  /* @__PURE__ */ jsx(Pressable, { onPress: () => applySelection("comment"), style: styles.selectionAction, children: /* @__PURE__ */ jsx(View, { style: styles.selectionActionDot }) }),
+                  /* @__PURE__ */ jsx(Pressable, { onPress: () => applySelection("highlight"), style: styles.selectionAction, children: /* @__PURE__ */ jsx(View, { style: [styles.selectionSwatch, { backgroundColor: annotationColor }] }) }),
+                  /* @__PURE__ */ jsx(Pressable, { onPress: () => applySelection("strikeout"), style: [styles.selectionAction, styles.selectionActionLast], children: /* @__PURE__ */ jsx(View, { style: [styles.selectionStrike, { backgroundColor: annotationColor }] }) })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+};
+var styles = StyleSheet.create({
+  scrollContent: {
+    alignItems: "center"
+  },
+  container: {
+    alignSelf: "center",
+    borderRadius: 14,
+    backgroundColor: "#ffffff",
+    shadowColor: "#000000",
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 4
+  },
+  page: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#ffffff",
+    borderRadius: 14,
+    overflow: "hidden"
+  },
+  annotationLayer: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  },
+  searchLayer: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  },
+  selectionLayer: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0
+  },
+  selectionHighlight: {
+    position: "absolute",
+    backgroundColor: "rgba(245, 158, 11, 0.28)",
+    borderRadius: 4
+  },
+  selectionOutline: {
+    position: "absolute",
+    borderWidth: 2,
+    borderStyle: "dashed",
+    borderColor: "rgba(37, 99, 235, 0.9)",
+    borderRadius: 6
+  },
+  selectionHandle: {
+    position: "absolute",
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: "#ffffff",
+    borderWidth: 2,
+    borderColor: "#2563eb"
+  },
+  searchHighlight: {
+    position: "absolute",
+    backgroundColor: "rgba(59, 130, 246, 0.2)",
+    borderWidth: 1,
+    borderColor: "rgba(59, 130, 246, 0.35)",
+    borderRadius: 4
+  },
+  searchHighlightActive: {
+    backgroundColor: "rgba(59, 130, 246, 0.35)",
+    borderColor: "#3b82f6"
+  },
+  themeOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 14
+  },
+  themeNone: {
+    backgroundColor: "transparent"
+  },
+  themeSepia: {
+    backgroundColor: "rgba(244, 236, 216, 0.35)"
+  },
+  themeDark: {
+    backgroundColor: "rgba(0, 0, 0, 0.2)"
+  },
+  themeContrast: {
+    backgroundColor: "rgba(0, 0, 0, 0.35)"
+  },
+  annotation: {
+    position: "absolute"
+  },
+  annotationSelected: {
+    borderWidth: 1,
+    borderColor: "#3b82f6"
+  },
+  annotationBadge: {
+    position: "absolute",
+    left: 4,
+    top: 4,
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    borderWidth: 1,
+    backgroundColor: "#ffffff",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  annotationDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  deleteButton: {
+    position: "absolute",
+    right: -8,
+    top: -8,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#ef4444",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  deleteDot: {
+    width: 8,
+    height: 2,
+    backgroundColor: "#ffffff",
+    borderRadius: 2
+  },
+  selectionToolbar: {
+    position: "absolute",
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 14,
+    backgroundColor: "#111827",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  selectionAction: {
+    width: 28,
+    height: 28,
+    borderRadius: 10,
+    backgroundColor: "#1f2937",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10
+  },
+  selectionActionLast: {
+    marginRight: 0
+  },
+  selectionActionDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#f9fafb"
+  },
+  selectionSwatch: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    borderWidth: 1,
+    borderColor: "#ffffff"
+  },
+  selectionStrike: {
+    width: 14,
+    height: 3,
+    borderRadius: 3
+  }
+});
+var PageRenderer_default = PageRenderer;
+
+// components/Viewer.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Viewer = ({ engine }) => {
+  const { pageCount, currentPage, scrollToPageSignal, setDocumentState, uiTheme, viewMode } = useViewerStore2();
+  const listRef = useRef2(null);
+  const isDark = uiTheme === "dark";
+  const { width: windowWidth } = useWindowDimensions2();
+  const isDouble = viewMode === "double";
+  const isSingle = viewMode === "single";
+  const pages = useMemo2(() => Array.from({ length: pageCount }).map((_, i) => i), [pageCount]);
+  const rows = useMemo2(() => {
+    if (!isDouble) return [];
+    const result = [];
+    for (let i = 0; i < pageCount; i += 2) {
+      result.push({ left: i, right: i + 1 < pageCount ? i + 1 : null });
+    }
+    return result;
+  }, [isDouble, pageCount]);
+  useEffect2(() => {
+    if (scrollToPageSignal === null) return;
+    if (pageCount === 0) return;
+    if (scrollToPageSignal < 0 || scrollToPageSignal >= pageCount) return;
+    if (isSingle) {
+      setDocumentState({ currentPage: scrollToPageSignal + 1, scrollToPageSignal: null });
+      return;
+    }
+    const targetIndex = isDouble ? Math.floor(scrollToPageSignal / 2) : scrollToPageSignal;
+    listRef.current?.scrollToIndex({ index: targetIndex, animated: true });
+    setDocumentState({ scrollToPageSignal: null });
+  }, [scrollToPageSignal, pageCount, setDocumentState, isDouble, isSingle]);
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }) => {
+      const first = viewableItems[0];
+      if (!first) return;
+      if (isDouble) {
+        const item = first.item;
+        if (!item) return;
+        const page = item.left + 1;
+        if (page !== currentPage) {
+          setDocumentState({ currentPage: page });
+        }
+        return;
+      }
+      if (first.index !== null && first.index !== void 0) {
+        const page = first.index + 1;
+        if (page !== currentPage) {
+          setDocumentState({ currentPage: page });
+        }
+      }
+    },
+    [currentPage, isDouble, setDocumentState]
+  );
+  if (isSingle) {
+    return /* @__PURE__ */ jsx2(View2, { style: [styles2.container, isDark && styles2.containerDark], children: /* @__PURE__ */ jsx2(
+      ScrollView2,
+      {
+        contentContainerStyle: styles2.singleContent,
+        showsVerticalScrollIndicator: false,
+        scrollEnabled: true,
+        children: /* @__PURE__ */ jsx2(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__ */ jsx2(View2, { style: [styles2.container, isDark && styles2.containerDark], children: /* @__PURE__ */ jsx2(
+    FlatList,
+    {
+      ref: listRef,
+      data: isDouble ? rows : pages,
+      keyExtractor: (item) => isDouble ? `row-${item.left}` : `page-${item}`,
+      contentContainerStyle: styles2.listContent,
+      renderItem: ({ item }) => isDouble ? /* @__PURE__ */ jsxs2(View2, { style: [styles2.row, { paddingHorizontal: horizontalPadding }], children: [
+        /* @__PURE__ */ jsx2(View2, { style: { width: columnWidth }, children: /* @__PURE__ */ jsx2(
+          PageRenderer_default,
+          {
+            engine,
+            pageIndex: item.left,
+            availableWidth: columnWidth,
+            horizontalPadding: 8,
+            spacing: 20
+          }
+        ) }),
+        item.right !== null ? /* @__PURE__ */ jsx2(View2, { style: { width: columnWidth }, children: /* @__PURE__ */ jsx2(
+          PageRenderer_default,
+          {
+            engine,
+            pageIndex: item.right,
+            availableWidth: columnWidth,
+            horizontalPadding: 8,
+            spacing: 20
+          }
+        ) }) : /* @__PURE__ */ jsx2(View2, { style: { width: columnWidth } })
+      ] }) : /* @__PURE__ */ jsx2(PageRenderer_default, { engine, pageIndex: item, spacing: 28 }),
+      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 });
+      },
+      showsVerticalScrollIndicator: false
+    }
+  ) });
+};
+var styles2 = StyleSheet2.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#e9ecef"
+  },
+  containerDark: {
+    backgroundColor: "#0f1115"
+  },
+  listContent: {
+    paddingTop: 18,
+    paddingBottom: 120
+  },
+  singleContent: {
+    paddingTop: 18,
+    paddingBottom: 140
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  }
+});
+var Viewer_default = Viewer;
+
+// components/Topbar.tsx
+import { useEffect as useEffect3, useState as useState2 } from "react";
+import { View as View3, Text, Pressable as Pressable2, StyleSheet as StyleSheet3 } from "react-native";
+import { useViewerStore as useViewerStore3 } from "@papyrus-sdk/core";
+
+// icons.tsx
+import Svg, { Path } from "react-native-svg";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var defaultColor = "#111827";
+var IconDocument = ({ size = 20, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+  Path,
+  {
+    d: "M10 3v4a1 1 0 0 1-1 1H5m14-4v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z",
+    stroke: color,
+    strokeWidth,
+    strokeLinejoin: "round"
+  }
+) });
+var IconGrid = ({ size = 20, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+  Path,
+  {
+    d: "M9.143 4H4.857A.857.857 0 0 0 4 4.857v4.286c0 .473.384.857.857.857h4.286A.857.857 0 0 0 10 9.143V4.857A.857.857 0 0 0 9.143 4Zm10 0h-4.286a.857.857 0 0 0-.857.857v4.286c0 .473.384.857.857.857h4.286A.857.857 0 0 0 20 9.143V4.857A.857.857 0 0 0 19.143 4Zm-10 10H4.857a.857.857 0 0 0-.857.857v4.286c0 .473.384.857.857.857h4.286a.857.857 0 0 0 .857-.857v-4.286A.857.857 0 0 0 9.143 14Zm10 0h-4.286a.857.857 0 0 0-.857.857v4.286c0 .473.384.857.857.857h4.286a.857.857 0 0 0 .857-.857v-4.286a.857.857 0 0 0-.857-.857Z",
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IconSearch = ({ size = 20, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+  Path,
+  {
+    d: "m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z",
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round"
+  }
+) });
+var IconZoomIn = ({ size = 18, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(Path, { d: "M5 12h14m-7 7V5", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) });
+var IconZoomOut = ({ size = 18, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(Path, { d: "M5 12h14", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) });
+var IconSettings = ({ size = 20, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsxs3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsx3(
+    Path,
+    {
+      d: "M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ jsx3(
+    Path,
+    {
+      d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var IconComment = ({ size = 20, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+  Path,
+  {
+    d: "M7.556 8.5h8m-8 3.5H12m7.111-7H4.89a.896.896 0 0 0-.629.256.868.868 0 0 0-.26.619v9.25c0 .232.094.455.26.619A.896.896 0 0 0 4.89 16H9l3 4 3-4h4.111a.896.896 0 0 0 .629-.256.868.868 0 0 0 .26-.619v-9.25a.868.868 0 0 0-.26-.619.896.896 0 0 0-.63-.256Z",
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IconChevronRight = ({ size = 18, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+  Path,
+  {
+    d: "m9 5 7 7-7 7",
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var IconChevronLeft = ({ size = 18, color = defaultColor, strokeWidth = 2 }) => /* @__PURE__ */ jsx3(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx3(
+  Path,
+  {
+    d: "m15 19-7-7 7-7",
+    stroke: color,
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+
+// components/Topbar.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var Topbar = ({ engine, onOpenSettings }) => {
+  const {
+    currentPage,
+    pageCount,
+    uiTheme,
+    setDocumentState,
+    triggerScrollToPage,
+    accentColor
+  } = useViewerStore3();
+  const [pageLabel, setPageLabel] = useState2(`${currentPage}`);
+  const isDark = uiTheme === "dark";
+  const navIconColor = isDark ? "#e5e7eb" : "#111827";
+  useEffect3(() => {
+    setPageLabel(`${currentPage}`);
+  }, [currentPage]);
+  const handlePageChange = (delta) => {
+    const next = Math.max(1, Math.min(pageCount, currentPage + delta));
+    engine.goToPage(next);
+    setDocumentState({ currentPage: next });
+    triggerScrollToPage(next - 1);
+  };
+  return /* @__PURE__ */ jsxs4(View3, { style: [styles3.container, isDark && styles3.containerDark], children: [
+    /* @__PURE__ */ jsxs4(View3, { style: styles3.leftGroup, children: [
+      /* @__PURE__ */ jsx4(View3, { style: [styles3.logoBadge, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx4(Text, { style: styles3.logoText, children: "P" }) }),
+      /* @__PURE__ */ jsx4(Text, { style: [styles3.brandText, isDark && styles3.brandTextDark], children: "Papyrus" })
+    ] }),
+    /* @__PURE__ */ jsxs4(View3, { style: styles3.pageGroup, children: [
+      /* @__PURE__ */ jsx4(Pressable2, { onPress: () => handlePageChange(-1), style: [styles3.pageButton, isDark && styles3.pageButtonDark], children: /* @__PURE__ */ jsx4(IconChevronLeft, { size: 16, color: navIconColor }) }),
+      /* @__PURE__ */ jsxs4(Text, { style: [styles3.pageIndicator, isDark && styles3.pageIndicatorDark], children: [
+        pageLabel,
+        "/",
+        pageCount
+      ] }),
+      /* @__PURE__ */ jsx4(Pressable2, { onPress: () => handlePageChange(1), style: [styles3.pageButton, isDark && styles3.pageButtonDark], children: /* @__PURE__ */ jsx4(IconChevronRight, { size: 16, color: navIconColor }) })
+    ] }),
+    /* @__PURE__ */ jsx4(View3, { style: styles3.rightGroup, children: /* @__PURE__ */ jsx4(
+      Pressable2,
+      {
+        onPress: () => onOpenSettings?.(),
+        style: [styles3.iconButton, isDark && styles3.iconButtonDark],
+        children: /* @__PURE__ */ jsx4(IconSettings, { size: 16, color: isDark ? "#e5e7eb" : "#111827" })
+      }
+    ) })
+  ] });
+};
+var styles3 = StyleSheet3.create({
+  container: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    backgroundColor: "#ffffff",
+    borderBottomWidth: 1,
+    borderBottomColor: "#e5e7eb",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  containerDark: {
+    backgroundColor: "#0f1115",
+    borderBottomColor: "#1f2937"
+  },
+  leftGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1
+  },
+  logoBadge: {
+    width: 26,
+    height: 26,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#2563eb",
+    marginRight: 8
+  },
+  logoText: {
+    color: "#ffffff",
+    fontWeight: "800",
+    fontSize: 13
+  },
+  brandText: {
+    fontSize: 14,
+    fontWeight: "800",
+    color: "#111827"
+  },
+  brandTextDark: {
+    color: "#f9fafb"
+  },
+  pageGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center"
+  },
+  pageButton: {
+    width: 26,
+    height: 26,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f3f4f6"
+  },
+  pageButtonDark: {
+    backgroundColor: "#111827"
+  },
+  pageButtonText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#111827"
+  },
+  pageButtonTextDark: {
+    color: "#e5e7eb"
+  },
+  pageIndicator: {
+    fontSize: 12,
+    color: "#374151",
+    minWidth: 52,
+    textAlign: "center",
+    marginHorizontal: 6,
+    fontWeight: "700"
+  },
+  pageIndicatorDark: {
+    color: "#d1d5db"
+  },
+  rightGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flex: 1
+  },
+  iconButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 10,
+    backgroundColor: "#f3f4f6",
+    marginLeft: 6
+  },
+  iconButtonDark: {
+    backgroundColor: "#111827"
+  },
+  iconButtonActive: {
+    backgroundColor: "#2563eb"
+  },
+  iconButtonText: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  iconButtonTextDark: {
+    color: "#e5e7eb"
+  },
+  iconButtonTextActive: {
+    color: "#ffffff"
+  },
+  iconRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  iconRowSpacer: {
+    width: 6
+  }
+});
+var Topbar_default = Topbar;
+
+// components/ToolDock.tsx
+import { View as View4, Text as Text2, Pressable as Pressable3, StyleSheet as StyleSheet4 } from "react-native";
+import { useViewerStore as useViewerStore4 } from "@papyrus-sdk/core";
+
+// strings.ts
+var STRINGS = {
+  en: {
+    pages: "Pages",
+    search: "Search",
+    notes: "Notes",
+    read: "Read",
+    edit: "Edit",
+    done: "Done",
+    page: "Page",
+    summary: "Summary",
+    pagesTab: "Pages",
+    summaryTab: "Summary",
+    searchPlaceholder: "Search text...",
+    searchGo: "Go",
+    results: "results",
+    searching: "Searching...",
+    noResults: "No results yet.",
+    noSummary: "No summary available.",
+    noAnnotations: "No annotations yet.",
+    untitled: "Untitled",
+    pageTransition: "Page transition",
+    continuous: "Continuous",
+    pageByPage: "Page by page",
+    layout: "Layout",
+    singlePage: "Single page",
+    doublePage: "Double page",
+    rotate: "Rotate",
+    clockwise: "Clockwise",
+    counterclockwise: "Counterclockwise",
+    zoom: "Zoom",
+    highlight: "Highlight",
+    strike: "Strike",
+    text: "Text",
+    note: "Note",
+    editNote: "Edit note",
+    notePlaceholder: "Write your note...",
+    cancel: "Cancel",
+    save: "Save",
+    language: "Language",
+    english: "English",
+    portuguese: "Portuguese (BR)",
+    appearance: "Appearance",
+    light: "Light",
+    dark: "Dark",
+    pageTheme: "Page theme",
+    themeOriginal: "Original",
+    themeSepia: "Sepia",
+    themeDark: "Dark",
+    themeContrast: "High contrast"
+  },
+  "pt-BR": {
+    pages: "Paginas",
+    search: "Buscar",
+    notes: "Notas",
+    read: "Ler",
+    edit: "Editar",
+    done: "Concluir",
+    page: "Pagina",
+    summary: "Sumario",
+    pagesTab: "Paginas",
+    summaryTab: "Sumario",
+    searchPlaceholder: "Pesquisar texto...",
+    searchGo: "Buscar",
+    results: "resultados",
+    searching: "Pesquisando...",
+    noResults: "Nenhum resultado.",
+    noSummary: "Sem sumario.",
+    noAnnotations: "Sem anotacoes.",
+    untitled: "Sem titulo",
+    pageTransition: "Transicao de pagina",
+    continuous: "Continuo",
+    pageByPage: "Pagina por pagina",
+    layout: "Layout",
+    singlePage: "Pagina unica",
+    doublePage: "Pagina dupla",
+    rotate: "Girar",
+    clockwise: "Sentido horario",
+    counterclockwise: "Sentido anti-horario",
+    zoom: "Zoom",
+    highlight: "Marca texto",
+    strike: "Risco",
+    text: "Texto",
+    note: "Nota",
+    editNote: "Editar nota",
+    notePlaceholder: "Escreva sua nota...",
+    cancel: "Cancelar",
+    save: "Salvar",
+    language: "Idioma",
+    english: "Ingles",
+    portuguese: "Portugues (BR)",
+    appearance: "Aparencia",
+    light: "Claro",
+    dark: "Escuro",
+    pageTheme: "Tema da pagina",
+    themeOriginal: "Original",
+    themeSepia: "Sepia",
+    themeDark: "Escuro",
+    themeContrast: "Contraste"
+  }
+};
+var getStrings = (locale) => STRINGS[locale ?? "en"] ?? STRINGS.en;
+
+// components/ToolDock.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var COLOR_SWATCHES = [
+  "#fbbf24",
+  "#f97316",
+  "#ef4444",
+  "#10b981",
+  "#22d3ee",
+  "#3b82f6",
+  "#8b5cf6",
+  "#ec4899",
+  "#f3f4f6",
+  "#111827"
+];
+var ToolDock = () => {
+  const { selectionActive, uiTheme, locale, annotationColor, setAnnotationColor, accentColor } = useViewerStore4();
+  const isDark = uiTheme === "dark";
+  const isVisible = selectionActive;
+  const t = getStrings(locale);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsxs5(View4, { style: [styles4.container, isDark && styles4.containerDark], children: [
+    /* @__PURE__ */ jsx5(Text2, { style: [styles4.title, isDark && styles4.titleDark], children: t.highlight }),
+    /* @__PURE__ */ jsx5(View4, { style: styles4.paletteRow, children: COLOR_SWATCHES.map((color) => {
+      const isSelected = annotationColor === color;
+      return /* @__PURE__ */ jsx5(
+        Pressable3,
+        {
+          onPress: () => setAnnotationColor(color),
+          style: [
+            styles4.swatch,
+            { backgroundColor: color },
+            isSelected && styles4.swatchSelected,
+            isSelected && { borderColor: accentColor }
+          ]
+        },
+        color
+      );
+    }) })
+  ] });
+};
+var styles4 = StyleSheet4.create({
+  container: {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    bottom: 72,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    backgroundColor: "#ffffff",
+    borderWidth: 1,
+    borderColor: "#e5e7eb",
+    shadowColor: "#000000",
+    shadowOpacity: 0.15,
+    shadowRadius: 14,
+    shadowOffset: { width: 0, height: 6 },
+    elevation: 6
+  },
+  containerDark: {
+    backgroundColor: "#0f1115",
+    borderColor: "#1f2937"
+  },
+  title: {
+    fontSize: 11,
+    fontWeight: "800",
+    color: "#111827",
+    marginBottom: 8
+  },
+  titleDark: {
+    color: "#e5e7eb"
+  },
+  paletteRow: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  swatch: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    marginRight: 8,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#e5e7eb"
+  },
+  swatchSelected: {
+    borderColor: "#2563eb",
+    borderWidth: 2
+  }
+});
+var ToolDock_default = ToolDock;
+
+// components/RightSheet.tsx
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import {
+  Modal,
+  View as View5,
+  Text as Text3,
+  Pressable as Pressable4,
+  TextInput,
+  StyleSheet as StyleSheet5,
+  ScrollView as ScrollView3,
+  ActivityIndicator,
+  FlatList as FlatList2,
+  Dimensions,
+  findNodeHandle as findNodeHandle2
+} from "react-native";
+import { useViewerStore as useViewerStore5, SearchService } from "@papyrus-sdk/core";
+import { PapyrusPageView as PapyrusPageView2 } from "@papyrus-sdk/engine-native";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var withAlpha = (hex, alpha) => {
+  const normalized = hex.replace("#", "").trim();
+  const value = normalized.length === 3 ? normalized.split("").map((c) => c + c).join("") : normalized;
+  if (value.length !== 6) return hex;
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var PageThumbnail = ({ engine, pageIndex, isActive, isDark, zoom, cardWidth, frameWidth, frameHeight, accentColor, onPress }) => {
+  const viewRef = useRef3(null);
+  const [layoutReady, setLayoutReady] = useState3(false);
+  useEffect4(() => {
+    if (!layoutReady) return;
+    const viewTag = findNodeHandle2(viewRef.current);
+    if (!viewTag) return;
+    const renderScale = 2 / Math.max(zoom, 0.5);
+    void engine.renderPage(pageIndex, viewTag, renderScale);
+  }, [engine, pageIndex, layoutReady, zoom]);
+  const handleLayout = (event) => {
+    if (event.nativeEvent.layout.width && event.nativeEvent.layout.height) {
+      setLayoutReady(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs6(
+    Pressable4,
+    {
+      onPress,
+      style: [
+        styles5.thumbCard,
+        { width: cardWidth },
+        isDark && styles5.thumbCardDark,
+        isActive && styles5.thumbCardActive,
+        isActive && { borderColor: accentColor }
+      ],
+      children: [
+        /* @__PURE__ */ jsx6(View5, { onLayout: handleLayout, style: [styles5.thumbFrame, { width: frameWidth, height: frameHeight }], children: /* @__PURE__ */ jsx6(PapyrusPageView2, { ref: viewRef, style: styles5.thumbView }) }),
+        /* @__PURE__ */ jsx6(Text3, { style: [styles5.thumbLabel, isDark && styles5.thumbLabelDark], children: pageIndex + 1 })
+      ]
+    }
+  );
+};
+var OutlineNode = ({ item, depth = 0, isDark, onSelect, untitledLabel }) => {
+  const hasChildren = item.children && item.children.length > 0;
+  const isClickable = item.pageIndex >= 0;
+  return /* @__PURE__ */ jsxs6(View5, { children: [
+    /* @__PURE__ */ jsx6(
+      Pressable4,
+      {
+        onPress: () => {
+          if (isClickable) onSelect(item.pageIndex);
+        },
+        style: [styles5.outlineRow, { paddingLeft: 12 + depth * 12 }],
+        children: /* @__PURE__ */ jsx6(
+          Text3,
+          {
+            style: [
+              styles5.outlineText,
+              isDark && styles5.outlineTextDark,
+              !isClickable && styles5.outlineTextMuted
+            ],
+            numberOfLines: 2,
+            children: item.title || untitledLabel
+          }
+        )
+      }
+    ),
+    hasChildren && item.children.map((child, index) => /* @__PURE__ */ jsx6(
+      OutlineNode,
+      {
+        item: child,
+        depth: depth + 1,
+        isDark,
+        onSelect,
+        untitledLabel
+      },
+      `${child.title}-${index}`
+    ))
+  ] });
+};
+var RightSheet = ({ engine }) => {
+  const {
+    sidebarRightOpen,
+    sidebarRightTab,
+    toggleSidebarRight,
+    outline,
+    searchResults,
+    searchQuery,
+    activeSearchIndex,
+    nextSearchResult,
+    prevSearchResult,
+    annotations,
+    uiTheme,
+    setSearch,
+    setDocumentState,
+    triggerScrollToPage,
+    setSelectedAnnotation,
+    pageCount,
+    currentPage,
+    zoom,
+    locale,
+    accentColor
+  } = useViewerStore5();
+  const [pagesMode, setPagesMode] = useState3("thumbnails");
+  const [query, setQuery] = useState3("");
+  const [isSearching, setIsSearching] = useState3(false);
+  const searchService = useMemo3(() => new SearchService(engine), [engine]);
+  const isDark = uiTheme === "dark";
+  const accentSoft = withAlpha(accentColor, 0.2);
+  const accentStrong = withAlpha(accentColor, 0.35);
+  const t = getStrings(locale);
+  const sheetHeight = Math.min(640, Dimensions.get("window").height * 0.72);
+  const windowWidth = Dimensions.get("window").width;
+  const gridGutter = 12;
+  const gridPadding = 16;
+  const cardWidth = (windowWidth - gridPadding * 2 - gridGutter) / 2;
+  const frameWidth = cardWidth - 16;
+  const frameHeight = frameWidth * 1.28;
+  const closeSheet = () => toggleSidebarRight();
+  const handleSearch = async () => {
+    const trimmed = query.trim();
+    if (!trimmed) {
+      setSearch("", []);
+      return;
+    }
+    setIsSearching(true);
+    try {
+      const results = await searchService.search(trimmed);
+      setSearch(trimmed, results);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+  const pages = useMemo3(() => Array.from({ length: pageCount }, (_, i) => i), [pageCount]);
+  const renderHighlightedSnippet = (text, isActive) => {
+    const trimmedQuery = searchQuery.trim();
+    if (trimmedQuery.length < 2) {
+      return /* @__PURE__ */ jsxs6(
+        Text3,
+        {
+          style: [
+            styles5.resultText,
+            isDark && styles5.resultTextDark,
+            isActive && styles5.resultTextActive,
+            isActive && { color: accentColor }
+          ],
+          children: [
+            "...",
+            text,
+            "..."
+          ]
+        }
+      );
+    }
+    const lowerText = text.toLowerCase();
+    const lowerQuery = trimmedQuery.toLowerCase();
+    const parts = [];
+    let cursor = 0;
+    while (cursor < text.length) {
+      const index = lowerText.indexOf(lowerQuery, cursor);
+      if (index === -1) {
+        parts.push({ text: text.slice(cursor), match: false });
+        break;
+      }
+      if (index > cursor) {
+        parts.push({ text: text.slice(cursor, index), match: false });
+      }
+      parts.push({ text: text.slice(index, index + trimmedQuery.length), match: true });
+      cursor = index + trimmedQuery.length;
+    }
+    return /* @__PURE__ */ jsx6(
+      Text3,
+      {
+        style: [
+          styles5.resultText,
+          isDark && styles5.resultTextDark,
+          isActive && styles5.resultTextActive,
+          isActive && { color: accentColor }
+        ],
+        children: parts.map((part, idx) => /* @__PURE__ */ jsx6(
+          Text3,
+          {
+            style: [
+              part.match && styles5.matchText,
+              part.match && isDark && styles5.matchTextDark,
+              part.match && isActive && styles5.matchTextActive,
+              part.match && isActive && { backgroundColor: accentStrong, color: accentColor }
+            ],
+            children: part.text
+          },
+          `${idx}-${part.text}`
+        ))
+      }
+    );
+  };
+  if (!sidebarRightOpen) return null;
+  return /* @__PURE__ */ jsx6(Modal, { visible: true, transparent: true, animationType: "slide", onRequestClose: closeSheet, children: /* @__PURE__ */ jsxs6(View5, { style: styles5.modalRoot, children: [
+    /* @__PURE__ */ jsx6(Pressable4, { style: styles5.backdrop, onPress: closeSheet }),
+    /* @__PURE__ */ jsxs6(View5, { style: [styles5.sheet, { height: sheetHeight }, isDark && styles5.sheetDark], children: [
+      /* @__PURE__ */ jsx6(View5, { style: [styles5.handle, isDark && styles5.handleDark] }),
+      /* @__PURE__ */ jsx6(View5, { style: styles5.tabs, children: ["pages", "search", "annotations"].map((tab) => /* @__PURE__ */ jsx6(
+        Pressable4,
+        {
+          onPress: () => toggleSidebarRight(tab),
+          style: [
+            styles5.tabButton,
+            isDark && styles5.tabButtonDark,
+            sidebarRightTab === tab && styles5.tabButtonActive,
+            sidebarRightTab === tab && { backgroundColor: accentColor }
+          ],
+          children: /* @__PURE__ */ jsx6(
+            Text3,
+            {
+              style: [
+                styles5.tabText,
+                isDark && styles5.tabTextDark,
+                sidebarRightTab === tab && styles5.tabTextActive
+              ],
+              children: tab === "pages" ? t.pages : tab === "search" ? t.search : t.notes
+            }
+          )
+        },
+        tab
+      )) }),
+      sidebarRightTab === "pages" ? /* @__PURE__ */ jsxs6(View5, { style: styles5.pagesContent, children: [
+        /* @__PURE__ */ jsxs6(View5, { style: styles5.pageHeader, children: [
+          /* @__PURE__ */ jsxs6(Text3, { style: [styles5.pageStatus, isDark && styles5.pageStatusDark], children: [
+            t.page,
+            " ",
+            currentPage,
+            " / ",
+            pageCount
+          ] }),
+          /* @__PURE__ */ jsxs6(View5, { style: [styles5.segmented, isDark && styles5.segmentedDark], children: [
+            /* @__PURE__ */ jsx6(
+              Pressable4,
+              {
+                onPress: () => setPagesMode("thumbnails"),
+                style: [
+                  styles5.segmentButton,
+                  pagesMode === "thumbnails" && styles5.segmentButtonActive,
+                  pagesMode === "thumbnails" && { backgroundColor: accentColor }
+                ],
+                children: /* @__PURE__ */ jsx6(
+                  Text3,
+                  {
+                    style: [
+                      styles5.segmentText,
+                      isDark && styles5.segmentTextDark,
+                      pagesMode === "thumbnails" && styles5.segmentTextActive
+                    ],
+                    children: t.pagesTab
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              Pressable4,
+              {
+                onPress: () => setPagesMode("summary"),
+                style: [
+                  styles5.segmentButton,
+                  pagesMode === "summary" && styles5.segmentButtonActive,
+                  pagesMode === "summary" && { backgroundColor: accentColor }
+                ],
+                children: /* @__PURE__ */ jsx6(
+                  Text3,
+                  {
+                    style: [
+                      styles5.segmentText,
+                      isDark && styles5.segmentTextDark,
+                      pagesMode === "summary" && styles5.segmentTextActive
+                    ],
+                    children: t.summaryTab
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        pagesMode === "thumbnails" ? /* @__PURE__ */ jsx6(
+          FlatList2,
+          {
+            data: pages,
+            keyExtractor: (item) => `thumb-${item}`,
+            numColumns: 2,
+            contentContainerStyle: styles5.thumbGrid,
+            columnWrapperStyle: styles5.thumbRow,
+            showsVerticalScrollIndicator: false,
+            initialNumToRender: 6,
+            renderItem: ({ item }) => /* @__PURE__ */ jsx6(
+              PageThumbnail,
+              {
+                engine,
+                pageIndex: item,
+                isActive: item + 1 === currentPage,
+                isDark,
+                zoom,
+                cardWidth,
+                frameWidth,
+                frameHeight,
+                accentColor,
+                onPress: () => {
+                  engine.goToPage(item + 1);
+                  setDocumentState({ currentPage: item + 1 });
+                  triggerScrollToPage(item);
+                  closeSheet();
+                }
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx6(ScrollView3, { contentContainerStyle: styles5.summaryContent, showsVerticalScrollIndicator: false, children: outline.length === 0 ? /* @__PURE__ */ jsx6(Text3, { style: [styles5.emptyText, isDark && styles5.emptyTextDark], children: t.noSummary }) : outline.map((item, index) => /* @__PURE__ */ jsx6(
+          OutlineNode,
+          {
+            item,
+            isDark,
+            untitledLabel: t.untitled,
+            onSelect: (pageIndex) => {
+              engine.goToPage(pageIndex + 1);
+              setDocumentState({ currentPage: pageIndex + 1 });
+              triggerScrollToPage(pageIndex);
+              closeSheet();
+            }
+          },
+          `${item.title}-${index}`
+        )) })
+      ] }) : /* @__PURE__ */ jsx6(ScrollView3, { contentContainerStyle: styles5.content, showsVerticalScrollIndicator: false, children: sidebarRightTab === "search" ? /* @__PURE__ */ jsxs6(View5, { children: [
+        /* @__PURE__ */ jsxs6(View5, { style: [styles5.searchBox, isDark && styles5.searchBoxDark], children: [
+          /* @__PURE__ */ jsx6(
+            TextInput,
+            {
+              value: query,
+              onChangeText: setQuery,
+              placeholder: t.searchPlaceholder,
+              placeholderTextColor: isDark ? "#9ca3af" : "#6b7280",
+              style: [styles5.searchInput, isDark && styles5.searchInputDark],
+              onSubmitEditing: handleSearch,
+              returnKeyType: "search"
+            }
+          ),
+          /* @__PURE__ */ jsx6(Pressable4, { onPress: handleSearch, style: [styles5.searchButton, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx6(Text3, { style: styles5.searchButtonText, children: t.searchGo }) })
+        ] }),
+        /* @__PURE__ */ jsxs6(View5, { style: styles5.searchMeta, children: [
+          /* @__PURE__ */ jsxs6(Text3, { style: [styles5.searchCount, isDark && styles5.searchCountDark, { color: accentColor }], children: [
+            searchResults.length,
+            " ",
+            t.results
+          ] }),
+          /* @__PURE__ */ jsxs6(View5, { style: styles5.searchNav, children: [
+            /* @__PURE__ */ jsx6(
+              Pressable4,
+              {
+                onPress: prevSearchResult,
+                disabled: searchResults.length === 0,
+                style: [
+                  styles5.searchNavButton,
+                  isDark && styles5.searchNavButtonDark,
+                  searchResults.length === 0 && styles5.searchNavButtonDisabled
+                ],
+                children: /* @__PURE__ */ jsx6(IconChevronLeft, { size: 14, color: isDark ? "#e5e7eb" : "#111827" })
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              Pressable4,
+              {
+                onPress: nextSearchResult,
+                disabled: searchResults.length === 0,
+                style: [
+                  styles5.searchNavButton,
+                  isDark && styles5.searchNavButtonDark,
+                  searchResults.length === 0 && styles5.searchNavButtonDisabled
+                ],
+                children: /* @__PURE__ */ jsx6(IconChevronRight, { size: 14, color: isDark ? "#e5e7eb" : "#111827" })
+              }
+            )
+          ] })
+        ] }),
+        isSearching && /* @__PURE__ */ jsxs6(View5, { style: styles5.searchStatus, children: [
+          /* @__PURE__ */ jsx6(ActivityIndicator, { size: "small", color: accentColor }),
+          /* @__PURE__ */ jsx6(Text3, { style: [styles5.searchStatusText, isDark && styles5.searchStatusTextDark], children: t.searching })
+        ] }),
+        !isSearching && searchResults.length === 0 && /* @__PURE__ */ jsx6(Text3, { style: [styles5.emptyText, isDark && styles5.emptyTextDark], children: t.noResults }),
+        !isSearching && searchResults.map((res, idx) => {
+          const isActive = idx === activeSearchIndex;
+          return /* @__PURE__ */ jsxs6(
+            Pressable4,
+            {
+              onPress: () => {
+                setDocumentState({ activeSearchIndex: idx });
+                triggerScrollToPage(res.pageIndex);
+                closeSheet();
+              },
+              style: [
+                styles5.resultCard,
+                isDark && styles5.resultCardDark,
+                isActive && styles5.resultCardActive,
+                isActive && { borderColor: accentColor }
+              ],
+              children: [
+                /* @__PURE__ */ jsxs6(Text3, { style: [styles5.resultPage, isDark && styles5.resultPageDark, { color: accentColor }], children: [
+                  t.page,
+                  " ",
+                  res.pageIndex + 1
+                ] }),
+                renderHighlightedSnippet(res.text, isActive)
+              ]
+            },
+            `${res.pageIndex}-${idx}`
+          );
+        })
+      ] }) : /* @__PURE__ */ jsx6(View5, { children: annotations.length === 0 ? /* @__PURE__ */ jsx6(Text3, { style: [styles5.emptyText, isDark && styles5.emptyTextDark], children: t.noAnnotations }) : annotations.map((ann) => /* @__PURE__ */ jsxs6(
+        Pressable4,
+        {
+          onPress: () => {
+            setSelectedAnnotation(ann.id);
+            triggerScrollToPage(ann.pageIndex);
+            closeSheet();
+          },
+          style: [styles5.noteCard, isDark && styles5.noteCardDark],
+          children: [
+            /* @__PURE__ */ jsxs6(View5, { style: styles5.noteHeader, children: [
+              /* @__PURE__ */ jsx6(View5, { style: [styles5.noteDot, { backgroundColor: ann.color }] }),
+              /* @__PURE__ */ jsxs6(Text3, { style: [styles5.noteTitle, isDark && styles5.noteTitleDark], children: [
+                t.page,
+                " ",
+                ann.pageIndex + 1
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx6(Text3, { style: [styles5.noteType, isDark && styles5.noteTypeDark, { color: accentColor }], children: ann.type === "comment" || ann.type === "text" ? t.note.toUpperCase() : ann.type.toUpperCase() }),
+            ann.content ? /* @__PURE__ */ jsx6(Text3, { style: [styles5.noteContent, isDark && styles5.noteContentDark], children: ann.content }) : null
+          ]
+        },
+        ann.id
+      )) }) })
+    ] })
+  ] }) });
+};
+var styles5 = StyleSheet5.create({
+  modalRoot: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  backdrop: {
+    ...StyleSheet5.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.4)"
+  },
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "#ffffff",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderTopWidth: 1,
+    borderTopColor: "#e5e7eb",
+    paddingBottom: 16
+  },
+  sheetDark: {
+    backgroundColor: "#0f1115",
+    borderTopColor: "#1f2937"
+  },
+  handle: {
+    width: 44,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: "#cbd5f5",
+    alignSelf: "center",
+    marginTop: 10,
+    marginBottom: 12
+  },
+  handleDark: {
+    backgroundColor: "#374151"
+  },
+  tabs: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    marginBottom: 10
+  },
+  tabButton: {
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+    borderRadius: 999,
+    marginRight: 8,
+    backgroundColor: "#e5e7eb"
+  },
+  tabButtonDark: {
+    backgroundColor: "#111827"
+  },
+  tabButtonActive: {
+    backgroundColor: "#2563eb"
+  },
+  tabText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  tabTextDark: {
+    color: "#e5e7eb"
+  },
+  tabTextActive: {
+    color: "#ffffff"
+  },
+  pagesContent: {
+    paddingHorizontal: 16,
+    flex: 1
+  },
+  pageHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 10
+  },
+  pageStatus: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  pageStatusDark: {
+    color: "#e5e7eb"
+  },
+  segmented: {
+    flexDirection: "row",
+    backgroundColor: "#e5e7eb",
+    borderRadius: 999,
+    padding: 2
+  },
+  segmentedDark: {
+    backgroundColor: "#111827"
+  },
+  segmentButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 999
+  },
+  segmentButtonActive: {
+    backgroundColor: "#2563eb"
+  },
+  segmentText: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  segmentTextDark: {
+    color: "#e5e7eb"
+  },
+  segmentTextActive: {
+    color: "#ffffff"
+  },
+  thumbGrid: {
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  },
+  thumbRow: {
+    justifyContent: "space-between",
+    marginBottom: 12
+  },
+  thumbCard: {
+    padding: 8,
+    borderRadius: 14,
+    backgroundColor: "#f9fafb",
+    borderWidth: 1,
+    borderColor: "#e5e7eb",
+    alignItems: "center"
+  },
+  thumbCardDark: {
+    backgroundColor: "#111827",
+    borderColor: "#1f2937"
+  },
+  thumbCardActive: {
+    borderColor: "#2563eb"
+  },
+  thumbFrame: {
+    borderRadius: 10,
+    backgroundColor: "#ffffff",
+    overflow: "hidden"
+  },
+  thumbView: {
+    width: "100%",
+    height: "100%"
+  },
+  thumbLabel: {
+    marginTop: 6,
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  thumbLabelDark: {
+    color: "#e5e7eb"
+  },
+  content: {
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  },
+  summaryContent: {
+    paddingBottom: 24
+  },
+  outlineRow: {
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(148, 163, 184, 0.18)"
+  },
+  outlineText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#111827"
+  },
+  outlineTextDark: {
+    color: "#e5e7eb"
+  },
+  outlineTextMuted: {
+    color: "#9ca3af"
+  },
+  searchBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 10,
+    backgroundColor: "#f3f4f6",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderColor: "#e5e7eb"
+  },
+  searchBoxDark: {
+    backgroundColor: "#111827",
+    borderColor: "#1f2937"
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 12,
+    color: "#111827"
+  },
+  searchInputDark: {
+    color: "#e5e7eb"
+  },
+  searchButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+    backgroundColor: "#2563eb"
+  },
+  searchButtonText: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#ffffff"
+  },
+  searchStatus: {
+    marginTop: 12,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  searchStatusText: {
+    marginLeft: 8,
+    fontSize: 11,
+    color: "#4b5563"
+  },
+  searchStatusTextDark: {
+    color: "#9ca3af"
+  },
+  searchMeta: {
+    marginTop: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  searchCount: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#2563eb"
+  },
+  searchCountDark: {
+    color: "#60a5fa"
+  },
+  searchNav: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  searchNavButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 10,
+    backgroundColor: "#e5e7eb",
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: 6
+  },
+  searchNavButtonDark: {
+    backgroundColor: "#111827"
+  },
+  searchNavButtonDisabled: {
+    opacity: 0.5
+  },
+  emptyText: {
+    marginTop: 16,
+    fontSize: 12,
+    color: "#6b7280"
+  },
+  emptyTextDark: {
+    color: "#9ca3af"
+  },
+  resultCard: {
+    marginTop: 12,
+    padding: 12,
+    borderRadius: 12,
+    backgroundColor: "#f9fafb",
+    borderWidth: 1,
+    borderColor: "#e5e7eb"
+  },
+  resultCardDark: {
+    backgroundColor: "#111827",
+    borderColor: "#1f2937"
+  },
+  resultCardActive: {
+    borderColor: "#2563eb"
+  },
+  resultPage: {
+    fontSize: 10,
+    fontWeight: "800",
+    color: "#2563eb",
+    marginBottom: 6
+  },
+  resultPageDark: {
+    color: "#60a5fa"
+  },
+  resultText: {
+    fontSize: 11,
+    color: "#374151"
+  },
+  resultTextDark: {
+    color: "#d1d5db"
+  },
+  resultTextActive: {
+    color: "#1d4ed8"
+  },
+  matchText: {
+    backgroundColor: "rgba(245, 158, 11, 0.3)",
+    color: "#111827",
+    fontWeight: "700"
+  },
+  matchTextDark: {
+    backgroundColor: "rgba(245, 158, 11, 0.25)",
+    color: "#fde68a"
+  },
+  matchTextActive: {
+    backgroundColor: "rgba(59, 130, 246, 0.35)",
+    color: "#1d4ed8"
+  },
+  noteCard: {
+    padding: 12,
+    borderRadius: 12,
+    backgroundColor: "#f9fafb",
+    borderWidth: 1,
+    borderColor: "#e5e7eb",
+    marginBottom: 12
+  },
+  noteCardDark: {
+    backgroundColor: "#111827",
+    borderColor: "#1f2937"
+  },
+  noteHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 6
+  },
+  noteDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 6
+  },
+  noteTitle: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  noteTitleDark: {
+    color: "#e5e7eb"
+  },
+  noteType: {
+    fontSize: 10,
+    fontWeight: "800",
+    color: "#2563eb"
+  },
+  noteTypeDark: {
+    color: "#60a5fa"
+  },
+  noteContent: {
+    marginTop: 6,
+    fontSize: 11,
+    color: "#4b5563"
+  },
+  noteContentDark: {
+    color: "#9ca3af"
+  }
+});
+var RightSheet_default = RightSheet;
+
+// components/AnnotationEditor.tsx
+import { useEffect as useEffect5, useState as useState4 } from "react";
+import { Modal as Modal2, View as View6, Text as Text4, TextInput as TextInput2, Pressable as Pressable5, StyleSheet as StyleSheet6 } from "react-native";
+import { useViewerStore as useViewerStore6 } from "@papyrus-sdk/core";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var AnnotationEditor = () => {
+  const { annotations, selectedAnnotationId, updateAnnotation, setSelectedAnnotation, uiTheme, locale, accentColor } = useViewerStore6();
+  const annotation = annotations.find((ann) => ann.id === selectedAnnotationId);
+  const isEditable = annotation && (annotation.type === "text" || annotation.type === "comment");
+  const [draft, setDraft] = useState4("");
+  const isDark = uiTheme === "dark";
+  const t = getStrings(locale);
+  useEffect5(() => {
+    if (isEditable) {
+      setDraft(annotation?.content ?? "");
+    }
+  }, [annotation?.id, isEditable]);
+  if (!isEditable || !annotation) return null;
+  const handleClose = () => setSelectedAnnotation(null);
+  const handleSave = () => {
+    updateAnnotation(annotation.id, { content: draft });
+    setSelectedAnnotation(null);
+  };
+  return /* @__PURE__ */ jsx7(Modal2, { visible: true, transparent: true, animationType: "fade", onRequestClose: handleClose, children: /* @__PURE__ */ jsx7(View6, { style: styles6.overlay, children: /* @__PURE__ */ jsxs7(View6, { style: [styles6.card, isDark && styles6.cardDark], children: [
+    /* @__PURE__ */ jsx7(Text4, { style: [styles6.title, isDark && styles6.titleDark], children: t.editNote }),
+    /* @__PURE__ */ jsx7(
+      TextInput2,
+      {
+        style: [styles6.input, isDark && styles6.inputDark],
+        value: draft,
+        onChangeText: setDraft,
+        placeholder: t.notePlaceholder,
+        placeholderTextColor: isDark ? "#9ca3af" : "#6b7280",
+        multiline: true
+      }
+    ),
+    /* @__PURE__ */ jsxs7(View6, { style: styles6.actions, children: [
+      /* @__PURE__ */ jsx7(Pressable5, { onPress: handleClose, style: [styles6.actionButton, styles6.actionCancel], children: /* @__PURE__ */ jsx7(Text4, { style: styles6.actionText, children: t.cancel }) }),
+      /* @__PURE__ */ jsx7(Pressable5, { onPress: handleSave, style: [styles6.actionButton, styles6.actionSave, { backgroundColor: accentColor }], children: /* @__PURE__ */ jsx7(Text4, { style: [styles6.actionText, styles6.actionTextLight], children: t.save }) })
+    ] })
+  ] }) }) });
+};
+var styles6 = StyleSheet6.create({
+  overlay: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    padding: 24
+  },
+  card: {
+    width: "100%",
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: "#ffffff",
+    borderWidth: 1,
+    borderColor: "#e5e7eb"
+  },
+  cardDark: {
+    backgroundColor: "#0f1115",
+    borderColor: "#1f2937"
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: "#111827",
+    marginBottom: 12
+  },
+  titleDark: {
+    color: "#f9fafb"
+  },
+  input: {
+    minHeight: 100,
+    borderRadius: 12,
+    padding: 12,
+    backgroundColor: "#f3f4f6",
+    color: "#111827",
+    fontSize: 12
+  },
+  inputDark: {
+    backgroundColor: "#111827",
+    color: "#e5e7eb"
+  },
+  actions: {
+    marginTop: 16,
+    flexDirection: "row",
+    justifyContent: "flex-end"
+  },
+  actionButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    marginLeft: 8
+  },
+  actionCancel: {
+    backgroundColor: "#e5e7eb"
+  },
+  actionSave: {
+    backgroundColor: "#2563eb"
+  },
+  actionText: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  actionTextLight: {
+    color: "#ffffff"
+  }
+});
+var AnnotationEditor_default = AnnotationEditor;
+
+// components/BottomBar.tsx
+import { View as View7, Text as Text5, Pressable as Pressable6, StyleSheet as StyleSheet7 } from "react-native";
+import { useViewerStore as useViewerStore7 } from "@papyrus-sdk/core";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var BottomBar = () => {
+  const { sidebarRightOpen, sidebarRightTab, toggleSidebarRight, setDocumentState, uiTheme, locale, accentColor } = useViewerStore7();
+  const isDark = uiTheme === "dark";
+  const t = getStrings(locale);
+  const isActive = (tab) => sidebarRightOpen && sidebarRightTab === tab;
+  const iconColor = (active) => {
+    if (active) return "#ffffff";
+    return isDark ? "#e5e7eb" : "#111827";
+  };
+  return /* @__PURE__ */ jsxs8(View7, { style: [styles7.container, isDark && styles7.containerDark], children: [
+    /* @__PURE__ */ jsxs8(
+      Pressable6,
+      {
+        onPress: () => toggleSidebarRight("pages"),
+        style: [styles7.item, isActive("pages") && styles7.itemActive],
+        children: [
+          /* @__PURE__ */ jsx8(
+            View7,
+            {
+              style: [
+                styles7.itemIcon,
+                isDark && styles7.itemIconDark,
+                isActive("pages") && styles7.itemIconActive,
+                isActive("pages") && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx8(IconGrid, { size: 16, color: iconColor(isActive("pages")) })
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Text5,
+            {
+              style: [
+                styles7.itemLabel,
+                isDark && styles7.itemLabelDark,
+                isActive("pages") && styles7.itemLabelActive,
+                isActive("pages") && { color: accentColor }
+              ],
+              children: t.pages
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      Pressable6,
+      {
+        onPress: () => toggleSidebarRight("search"),
+        style: [styles7.item, isActive("search") && styles7.itemActive],
+        children: [
+          /* @__PURE__ */ jsx8(
+            View7,
+            {
+              style: [
+                styles7.itemIcon,
+                isDark && styles7.itemIconDark,
+                isActive("search") && styles7.itemIconActive,
+                isActive("search") && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx8(IconSearch, { size: 16, color: iconColor(isActive("search")) })
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Text5,
+            {
+              style: [
+                styles7.itemLabel,
+                isDark && styles7.itemLabelDark,
+                isActive("search") && styles7.itemLabelActive,
+                isActive("search") && { color: accentColor }
+              ],
+              children: t.search
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      Pressable6,
+      {
+        onPress: () => setDocumentState({ sidebarRightOpen: false }),
+        style: [styles7.item, !sidebarRightOpen && styles7.itemActive],
+        children: [
+          /* @__PURE__ */ jsx8(
+            View7,
+            {
+              style: [
+                styles7.itemIcon,
+                isDark && styles7.itemIconDark,
+                !sidebarRightOpen && styles7.itemIconActive,
+                !sidebarRightOpen && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx8(IconDocument, { size: 16, color: iconColor(!sidebarRightOpen) })
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Text5,
+            {
+              style: [
+                styles7.itemLabel,
+                isDark && styles7.itemLabelDark,
+                !sidebarRightOpen && styles7.itemLabelActive,
+                !sidebarRightOpen && { color: accentColor }
+              ],
+              children: t.read
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs8(
+      Pressable6,
+      {
+        onPress: () => toggleSidebarRight("annotations"),
+        style: [styles7.item, isActive("annotations") && styles7.itemActive],
+        children: [
+          /* @__PURE__ */ jsx8(
+            View7,
+            {
+              style: [
+                styles7.itemIcon,
+                isDark && styles7.itemIconDark,
+                isActive("annotations") && styles7.itemIconActive,
+                isActive("annotations") && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx8(IconComment, { size: 16, color: iconColor(isActive("annotations")) })
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            Text5,
+            {
+              style: [
+                styles7.itemLabel,
+                isDark && styles7.itemLabelDark,
+                isActive("annotations") && styles7.itemLabelActive,
+                isActive("annotations") && { color: accentColor }
+              ],
+              children: t.notes
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var styles7 = StyleSheet7.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: "#ffffff",
+    borderTopWidth: 1,
+    borderTopColor: "#e5e7eb"
+  },
+  containerDark: {
+    backgroundColor: "#0f1115",
+    borderTopColor: "#1f2937"
+  },
+  item: {
+    alignItems: "center",
+    paddingHorizontal: 6
+  },
+  itemActive: {
+    transform: [{ translateY: -2 }]
+  },
+  itemIcon: {
+    width: 28,
+    height: 28,
+    borderRadius: 10,
+    backgroundColor: "#e5e7eb",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 4
+  },
+  itemIconDark: {
+    backgroundColor: "#111827",
+    color: "#e5e7eb"
+  },
+  itemIconActive: {
+    backgroundColor: "#2563eb",
+    color: "#ffffff"
+  },
+  itemLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: "#6b7280"
+  },
+  itemLabelDark: {
+    color: "#9ca3af"
+  },
+  itemLabelActive: {
+    color: "#2563eb"
+  }
+});
+var BottomBar_default = BottomBar;
+
+// components/SettingsSheet.tsx
+import { Modal as Modal3, View as View8, Text as Text6, Pressable as Pressable7, StyleSheet as StyleSheet8 } from "react-native";
+import { useViewerStore as useViewerStore8 } from "@papyrus-sdk/core";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var SettingsSheet = ({ engine, visible, onClose }) => {
+  const { viewMode, uiTheme, zoom, setDocumentState, locale, accentColor, pageTheme } = useViewerStore8();
+  const isDark = uiTheme === "dark";
+  const isPaged = viewMode === "single";
+  const isDouble = viewMode === "double";
+  const t = getStrings(locale);
+  const handleTransition = (mode) => {
+    if (mode === "paged") {
+      setDocumentState({ viewMode: "single" });
+      return;
+    }
+    setDocumentState({ viewMode: isDouble ? "double" : "continuous" });
+  };
+  const handleLayout = (layout) => {
+    if (layout === "double") {
+      setDocumentState({ viewMode: "double" });
+      return;
+    }
+    if (viewMode === "double") {
+      setDocumentState({ viewMode: "continuous" });
+    }
+  };
+  const handleRotate = (direction) => {
+    engine.rotate(direction);
+    setDocumentState({ rotation: engine.getRotation() });
+  };
+  const handleZoom = (delta) => {
+    const next = Math.max(0.5, Math.min(4, zoom + delta));
+    engine.setZoom(next);
+    setDocumentState({ zoom: next });
+  };
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx9(Modal3, { visible: true, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsxs9(View8, { style: styles8.modalRoot, children: [
+    /* @__PURE__ */ jsx9(Pressable7, { style: styles8.backdrop, onPress: onClose }),
+    /* @__PURE__ */ jsxs9(View8, { style: [styles8.sheet, isDark && styles8.sheetDark], children: [
+      /* @__PURE__ */ jsx9(View8, { style: [styles8.handle, isDark && styles8.handleDark] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.appearance }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ uiTheme: "light" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                uiTheme === "light" && styles8.optionButtonActive,
+                uiTheme === "light" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    uiTheme === "light" && styles8.optionTextActive
+                  ],
+                  children: t.light
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ uiTheme: "dark" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                uiTheme === "dark" && styles8.optionButtonActive,
+                uiTheme === "dark" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    uiTheme === "dark" && styles8.optionTextActive
+                  ],
+                  children: t.dark
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.pageTheme }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ pageTheme: "normal" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                pageTheme === "normal" && styles8.optionButtonActive,
+                pageTheme === "normal" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    pageTheme === "normal" && styles8.optionTextActive
+                  ],
+                  children: t.themeOriginal
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ pageTheme: "sepia" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                pageTheme === "sepia" && styles8.optionButtonActive,
+                pageTheme === "sepia" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    pageTheme === "sepia" && styles8.optionTextActive
+                  ],
+                  children: t.themeSepia
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ pageTheme: "dark" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                pageTheme === "dark" && styles8.optionButtonActive,
+                pageTheme === "dark" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    pageTheme === "dark" && styles8.optionTextActive
+                  ],
+                  children: t.themeDark
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ pageTheme: "high-contrast" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                pageTheme === "high-contrast" && styles8.optionButtonActive,
+                pageTheme === "high-contrast" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    pageTheme === "high-contrast" && styles8.optionTextActive
+                  ],
+                  children: t.themeContrast
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.pageTransition }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => handleTransition("continuous"),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                (!isPaged || isDouble) && styles8.optionButtonActive,
+                (!isPaged || isDouble) && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    (!isPaged || isDouble) && styles8.optionTextActive
+                  ],
+                  children: t.continuous
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => handleTransition("paged"),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                isPaged && styles8.optionButtonActive,
+                isPaged && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    isPaged && styles8.optionTextActive
+                  ],
+                  children: t.pageByPage
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.layout }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => handleLayout("single"),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                !isDouble && styles8.optionButtonActive,
+                !isDouble && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    !isDouble && styles8.optionTextActive
+                  ],
+                  children: t.singlePage
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => handleLayout("double"),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                isDouble && styles8.optionButtonActive,
+                isDouble && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    isDouble && styles8.optionTextActive
+                  ],
+                  children: t.doublePage
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.rotate }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => handleRotate("counterclockwise"),
+              style: [styles8.optionButton, isDark && styles8.optionButtonDark],
+              children: /* @__PURE__ */ jsx9(Text6, { style: [styles8.optionText, isDark && styles8.optionTextDark], children: t.counterclockwise })
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => handleRotate("clockwise"),
+              style: [styles8.optionButton, isDark && styles8.optionButtonDark],
+              children: /* @__PURE__ */ jsx9(Text6, { style: [styles8.optionText, isDark && styles8.optionTextDark], children: t.clockwise })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.zoom }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(Pressable7, { onPress: () => handleZoom(-0.1), style: [styles8.optionButton, isDark && styles8.optionButtonDark], children: /* @__PURE__ */ jsx9(IconZoomOut, { size: 16, color: isDark ? "#e5e7eb" : "#111827" }) }),
+          /* @__PURE__ */ jsx9(View8, { style: styles8.zoomValue, children: /* @__PURE__ */ jsxs9(Text6, { style: [styles8.zoomText, isDark && styles8.zoomTextDark], children: [
+            Math.round(zoom * 100),
+            "%"
+          ] }) }),
+          /* @__PURE__ */ jsx9(Pressable7, { onPress: () => handleZoom(0.1), style: [styles8.optionButton, isDark && styles8.optionButtonDark], children: /* @__PURE__ */ jsx9(IconZoomIn, { size: 16, color: isDark ? "#e5e7eb" : "#111827" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9(View8, { style: styles8.section, children: [
+        /* @__PURE__ */ jsx9(Text6, { style: [styles8.sectionTitle, isDark && styles8.sectionTitleDark], children: t.language }),
+        /* @__PURE__ */ jsxs9(View8, { style: styles8.optionRow, children: [
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ locale: "en" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                locale === "en" && styles8.optionButtonActive,
+                locale === "en" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    locale === "en" && styles8.optionTextActive
+                  ],
+                  children: t.english
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            Pressable7,
+            {
+              onPress: () => setDocumentState({ locale: "pt-BR" }),
+              style: [
+                styles8.optionButton,
+                isDark && styles8.optionButtonDark,
+                locale === "pt-BR" && styles8.optionButtonActive,
+                locale === "pt-BR" && { backgroundColor: accentColor }
+              ],
+              children: /* @__PURE__ */ jsx9(
+                Text6,
+                {
+                  style: [
+                    styles8.optionText,
+                    isDark && styles8.optionTextDark,
+                    locale === "pt-BR" && styles8.optionTextActive
+                  ],
+                  children: t.portuguese
+                }
+              )
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+var styles8 = StyleSheet8.create({
+  modalRoot: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  backdrop: {
+    ...StyleSheet8.absoluteFillObject,
+    backgroundColor: "rgba(0, 0, 0, 0.45)"
+  },
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingHorizontal: 18,
+    paddingBottom: 24,
+    backgroundColor: "#ffffff",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderTopWidth: 1,
+    borderTopColor: "#e5e7eb"
+  },
+  sheetDark: {
+    backgroundColor: "#0f1115",
+    borderTopColor: "#1f2937"
+  },
+  handle: {
+    width: 44,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: "#cbd5f5",
+    alignSelf: "center",
+    marginTop: 10,
+    marginBottom: 12
+  },
+  handleDark: {
+    backgroundColor: "#374151"
+  },
+  section: {
+    marginBottom: 16
+  },
+  sectionTitle: {
+    fontSize: 12,
+    fontWeight: "800",
+    color: "#111827",
+    marginBottom: 8
+  },
+  sectionTitleDark: {
+    color: "#e5e7eb"
+  },
+  optionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  optionButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 12,
+    backgroundColor: "#e5e7eb",
+    marginRight: 8,
+    marginBottom: 8
+  },
+  optionButtonDark: {
+    backgroundColor: "#111827"
+  },
+  optionButtonActive: {
+    backgroundColor: "#2563eb"
+  },
+  optionText: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  optionTextDark: {
+    color: "#e5e7eb"
+  },
+  optionTextActive: {
+    color: "#ffffff"
+  },
+  zoomValue: {
+    minWidth: 52,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  zoomText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: "#111827"
+  },
+  zoomTextDark: {
+    color: "#e5e7eb"
+  }
+});
+var SettingsSheet_default = SettingsSheet;
+export {
+  AnnotationEditor_default as AnnotationEditor,
+  BottomBar_default as BottomBar,
+  PageRenderer_default as PageRenderer,
+  RightSheet_default as RightSheet,
+  SettingsSheet_default as SettingsSheet,
+  ToolDock_default as ToolDock,
+  Topbar_default as Topbar,
+  Viewer_default as Viewer
+};
+//# sourceMappingURL=index.mjs.map