@papyrus-sdk/ui-react-native 0.1.2 → 0.1.4

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { DocumentEngine } from '@papyrus-sdk/types';
+import { DocumentEngine, DocumentSource, DocumentType } from '@papyrus-sdk/types';
 import { PapyrusPageViewProps } from '@papyrus-sdk/engine-native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 interface ViewerProps {
     engine: DocumentEngine;
@@ -43,4 +44,22 @@ interface SettingsSheetProps {
 }
 declare const SettingsSheet: React.FC<SettingsSheetProps>;
 
-export { AnnotationEditor, BottomBar, PageRenderer, RightSheet, SettingsSheet, ToolDock, Topbar, Viewer };
+type CoverPreviewProps = {
+    source: DocumentSource;
+    type?: DocumentType;
+    pageIndex?: number;
+    visible?: boolean;
+    keepAlive?: boolean;
+    allowInteraction?: boolean;
+    renderScale?: number;
+    showLoading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onError?: (error: Error) => void;
+};
+declare const CoverPreview: React.FC<CoverPreviewProps>;
+
+export { AnnotationEditor, BottomBar, CoverPreview, PageRenderer, RightSheet, SettingsSheet, ToolDock, Topbar, Viewer };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { DocumentEngine } from '@papyrus-sdk/types';
+import { DocumentEngine, DocumentSource, DocumentType } from '@papyrus-sdk/types';
 import { PapyrusPageViewProps } from '@papyrus-sdk/engine-native';
+import { StyleProp, ViewStyle } from 'react-native';
 
 interface ViewerProps {
     engine: DocumentEngine;
@@ -43,4 +44,22 @@ interface SettingsSheetProps {
 }
 declare const SettingsSheet: React.FC<SettingsSheetProps>;
 
-export { AnnotationEditor, BottomBar, PageRenderer, RightSheet, SettingsSheet, ToolDock, Topbar, Viewer };
+type CoverPreviewProps = {
+    source: DocumentSource;
+    type?: DocumentType;
+    pageIndex?: number;
+    visible?: boolean;
+    keepAlive?: boolean;
+    allowInteraction?: boolean;
+    renderScale?: number;
+    showLoading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onError?: (error: Error) => void;
+};
+declare const CoverPreview: React.FC<CoverPreviewProps>;
+
+export { AnnotationEditor, BottomBar, CoverPreview, PageRenderer, RightSheet, SettingsSheet, ToolDock, Topbar, Viewer };

package/dist/index.js

@@ -151,13 +151,21 @@ https://github.com/nodeca/pako/blob/main/LICENSE\r
     }\r
   };\r
 \r
-  window.addEventListener('error', (event) => {\r
-    reportError(event.error || event.message, 'window.error');\r
-  });\r
-\r
-  window.addEventListener('unhandledrejection', (event) => {\r
-    reportError(event.reason, 'unhandledrejection');\r
-  });\r
+  const shouldIgnoreError = (error) => {
+    const message = error && error.message ? error.message : String(error || '');
+    return message.includes('ResizeObserver loop');
+  };
+
+  window.addEventListener('error', (event) => {
+    const error = event.error || event.message;
+    if (shouldIgnoreError(error)) return;
+    reportError(error, 'window.error');
+  });
+
+  window.addEventListener('unhandledrejection', (event) => {
+    if (shouldIgnoreError(event.reason)) return;
+    reportError(event.reason, 'unhandledrejection');
+  });
 \r
   const clearViewer = () => {\r
     while (viewer.firstChild) {\r
@@ -420,8 +428,12 @@ https://github.com/nodeca/pako/blob/main/LICENSE\r
   });\r
 \r
   const getPageIndex = (dest) => {\r
-    if (currentType !== 'epub') return null;\r
+    if (!dest) return null;\r
     if (typeof dest === 'string') return getSpineIndexByHref(dest);\r
+    if (typeof dest !== 'object') return null;\r
+    if (dest.kind === 'href') return getSpineIndexByHref(dest.value);\r
+    if (dest.kind === 'pageIndex') return dest.value;\r
+    if (dest.kind === 'pageNumber') return Math.max(0, dest.value - 1);\r
     return null;\r
   };\r
 \r
@@ -548,6 +560,9 @@ https://github.com/nodeca/pako/blob/main/LICENSE\r
     if (raw && typeof raw === 'object' && raw.kind && raw.id) {
       message = raw;
     } else if (typeof raw === 'string') {
+      if (raw.startsWith('setImmediate$')) {
+        return;
+      }
       const trimmed = raw.trim();
       if (!trimmed || (!trimmed.startsWith('{') && !trimmed.startsWith('['))) {
         return;
@@ -555,18 +570,15 @@ https://github.com/nodeca/pako/blob/main/LICENSE\r
       try {
         message = JSON.parse(trimmed);
       } catch (err) {
-        sendEvent('RUNTIME_ERROR', {
-          message: 'Failed to parse message',
-          context: 'runtime.onMessage',
-          stack: err && err.stack ? err.stack : null,
-          preview: trimmed.slice(0, 200),
-        });
-        return;
-      }
+        sendEvent('RUNTIME_ERROR', {\r
+          message: 'Failed to parse message',\r
+          context: 'runtime.onMessage',\r
+          stack: err && err.stack ? err.stack : null,\r
+          preview: trimmed.slice(0, 200),\r
+        });\r
+        return;\r
+      }\r
     } else {
-      sendEvent('RUNTIME_LOG', {
-        message: \`Ignoring message of type \${typeof raw}\`,
-      });
       return;
     }
 \r
@@ -593,6 +605,7 @@ var index_exports = {};
 __export(index_exports, {
   AnnotationEditor: () => AnnotationEditor_default,
   BottomBar: () => BottomBar_default,
+  CoverPreview: () => CoverPreview_default,
   PageRenderer: () => PageRenderer_default,
   RightSheet: () => RightSheet_default,
   SettingsSheet: () => SettingsSheet_default,
@@ -3623,10 +3636,186 @@ var styles9 = import_react_native9.StyleSheet.create({
   }
 });
 var SettingsSheet_default = SettingsSheet;
+
+// components/CoverPreview.tsx
+var import_react7 = require("react");
+var import_react_native10 = require("react-native");
+var import_engine_native3 = require("@papyrus-sdk/engine-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var parseDataUri = (value) => {
+  const match = /^data:([^;,]+)?(;base64)?,/.exec(value);
+  if (!match) return null;
+  return { mime: match[1] ?? "" };
+};
+var inferDocumentType = (source, explicitType) => {
+  if (explicitType) return explicitType;
+  if (typeof source === "string") {
+    const dataUri = parseDataUri(source);
+    if (dataUri?.mime) {
+      const mime = dataUri.mime.toLowerCase();
+      if (mime.includes("epub")) return "epub";
+      if (mime.includes("text")) return "text";
+      if (mime.includes("pdf")) return "pdf";
+    }
+    const clean = source.split("?")[0].split("#")[0];
+    const ext = clean.includes(".") ? clean.split(".").pop()?.toLowerCase() : void 0;
+    if (ext === "epub") return "epub";
+    if (ext === "txt") return "text";
+    if (ext === "pdf") return "pdf";
+    return "pdf";
+  }
+  if (typeof source === "object" && source !== null && "uri" in source) {
+    const clean = source.uri.split("?")[0].split("#")[0];
+    const ext = clean.includes(".") ? clean.split(".").pop()?.toLowerCase() : void 0;
+    if (ext === "epub") return "epub";
+    if (ext === "txt") return "text";
+    if (ext === "pdf") return "pdf";
+  }
+  return "pdf";
+};
+var CoverPreview = ({
+  source,
+  type,
+  pageIndex = 0,
+  visible = true,
+  keepAlive = false,
+  allowInteraction = false,
+  renderScale = 2,
+  showLoading = true,
+  loadingIndicator,
+  placeholder,
+  style,
+  onLoadStart,
+  onLoadEnd,
+  onError
+}) => {
+  const [engine, setEngine] = (0, import_react7.useState)(null);
+  const [layoutReady, setLayoutReady] = (0, import_react7.useState)(false);
+  const [loaded, setLoaded] = (0, import_react7.useState)(false);
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const viewRef = (0, import_react7.useRef)(null);
+  const resolvedType = (0, import_react7.useMemo)(() => inferDocumentType(source, type), [source, type]);
+  const isPdf = resolvedType === "pdf";
+  const hasNativePageView = Boolean(import_react_native10.UIManager.getViewManagerConfig?.("PapyrusPageView"));
+  const canRender = !isPdf || hasNativePageView;
+  const shouldRender = Boolean(visible);
+  (0, import_react7.useEffect)(() => {
+    if (!shouldRender) {
+      if (!keepAlive) {
+        setEngine(null);
+        setLoaded(false);
+        setError(null);
+      }
+      return;
+    }
+    if (!engine && canRender) {
+      setEngine(new import_engine_native3.MobileDocumentEngine());
+    }
+  }, [shouldRender, keepAlive, engine, canRender]);
+  (0, import_react7.useEffect)(() => {
+    if (!engine || !shouldRender || !canRender) return;
+    let active = true;
+    setLoading(true);
+    setLoaded(false);
+    setError(null);
+    onLoadStart?.();
+    const loadInput = type ? { type, source } : source;
+    engine.load(loadInput).then(() => {
+      if (!active) return;
+      if (!isPdf && pageIndex > 0) {
+        engine.goToPage(pageIndex + 1);
+      }
+      setLoaded(true);
+      setLoading(false);
+      onLoadEnd?.();
+    }).catch((err) => {
+      if (!active) return;
+      const errorValue = err instanceof Error ? err : new Error("[Papyrus] Failed to load document");
+      setError(errorValue);
+      setLoading(false);
+      onError?.(errorValue);
+    });
+    return () => {
+      active = false;
+    };
+  }, [engine, shouldRender, canRender, source, type, pageIndex, isPdf, onLoadStart, onLoadEnd, onError]);
+  (0, import_react7.useEffect)(() => {
+    if (!engine || !isPdf || !loaded || !layoutReady || !shouldRender || !canRender) return;
+    const viewTag = (0, import_react_native10.findNodeHandle)(viewRef.current);
+    if (!viewTag) return;
+    engine.renderPage(pageIndex, viewTag, renderScale);
+  }, [engine, isPdf, loaded, layoutReady, shouldRender, canRender, pageIndex, renderScale]);
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      engine?.destroy();
+    };
+  }, [engine]);
+  const handleLayout = (event) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setLayoutReady(true);
+    }
+  };
+  if (!shouldRender || !canRender) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: [styles10.container, style], children: placeholder ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.placeholder, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.Text, { style: styles10.placeholderText, children: "Preview" }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native10.View, { style: [styles10.container, style], onLayout: handleLayout, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { style: styles10.previewFrame, pointerEvents: allowInteraction ? "auto" : "none", children: isPdf ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_engine_native3.PapyrusPageView, { ref: viewRef, style: styles10.pageView }) : engine && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WebViewViewer_default, { engine }) }),
+    showLoading && loading && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { pointerEvents: "none", style: styles10.loadingOverlay, children: loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.ActivityIndicator, { size: "small", color: "#2563eb" }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.View, { pointerEvents: "none", style: styles10.errorOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native10.Text, { style: styles10.errorText, children: "Preview unavailable" }) })
+  ] });
+};
+var styles10 = import_react_native10.StyleSheet.create({
+  container: {
+    backgroundColor: "#f8fafc",
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  previewFrame: {
+    flex: 1,
+    backgroundColor: "#ffffff"
+  },
+  pageView: {
+    width: "100%",
+    height: "100%",
+    backgroundColor: "transparent"
+  },
+  loadingOverlay: {
+    ...import_react_native10.StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(15, 23, 42, 0.15)"
+  },
+  errorOverlay: {
+    ...import_react_native10.StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(15, 23, 42, 0.4)"
+  },
+  errorText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#f8fafc"
+  },
+  placeholder: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#e2e8f0"
+  },
+  placeholderText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#475569"
+  }
+});
+var CoverPreview_default = CoverPreview;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnnotationEditor,
   BottomBar,
+  CoverPreview,
   PageRenderer,
   RightSheet,
   SettingsSheet,