@papyrus-sdk/ui-react-native 0.1.3 → 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

@@ -605,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,
@@ -3635,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,