@idealyst/pdf 1.2.129

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@idealyst/pdf",
+  "version": "1.2.129",
+  "description": "Cross-platform PDF viewer for React and React Native",
+  "readme": "README.md",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.native.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/IdealystIO/idealyst-framework.git",
+    "directory": "packages/pdf"
+  },
+  "author": "Idealyst <contact@idealyst.io>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "react-native": "./src/index.native.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "echo 'Publishing TypeScript source directly'",
+    "publish:npm": "npm publish"
+  },
+  "peerDependencies": {
+    "pdfjs-dist": ">=3.0.0",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-blob-util": ">=0.19.0",
+    "react-native-pdf": ">=6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "pdfjs-dist": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-blob-util": {
+      "optional": true
+    },
+    "react-native-pdf": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "pdfjs-dist": "^4.0.0",
+    "react": "^19.1.0",
+    "react-native": "^0.80.1",
+    "react-native-blob-util": "^0.19.0",
+    "react-native-pdf": "^6.7.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "pdf",
+    "viewer",
+    "document",
+    "cross-platform",
+    "pdfjs"
+  ]
+}

package/src/PDFViewer.native.tsx

@@ -0,0 +1,185 @@
+/**
+ * PDFViewer - Native implementation
+ *
+ * Uses react-native-pdf for rendering PDF documents on React Native.
+ */
+
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Pdf from 'react-native-pdf';
+import type { PDFViewerProps, PDFViewerRef, PDFSource } from './types';
+
+/**
+ * Normalize a PDFSource into a react-native-pdf compatible source object.
+ */
+function resolveSource(source: PDFSource): { uri: string } {
+  if (typeof source === 'string') {
+    return { uri: source };
+  }
+  if ('uri' in source) {
+    return { uri: source.uri };
+  }
+  // base64 → data URI for react-native-pdf
+  return { uri: `data:application/pdf;base64,${source.base64}` };
+}
+
+/**
+ * Convert fitPolicy string to react-native-pdf numeric value.
+ * 0 = fit width, 1 = fit height, 2 = fit both
+ */
+function resolveFitPolicy(fitPolicy: 'width' | 'height' | 'both'): 0 | 1 | 2 {
+  switch (fitPolicy) {
+    case 'width':
+      return 0;
+    case 'height':
+      return 1;
+    case 'both':
+      return 2;
+    default:
+      return 0;
+  }
+}
+
+/**
+ * PDFViewer component for React Native.
+ *
+ * @example
+ * ```tsx
+ * import { PDFViewer } from '@idealyst/pdf';
+ *
+ * <PDFViewer
+ *   source="https://example.com/document.pdf"
+ *   onLoad={({ totalPages }) => console.log('Pages:', totalPages)}
+ *   onPageChange={(page, total) => console.log(page, '/', total)}
+ *   style={{ flex: 1 }}
+ * />
+ * ```
+ */
+export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) => {
+  const {
+    source,
+    page = 1,
+    onPageChange,
+    onLoad,
+    onError,
+    zoomEnabled = true,
+    minZoom = 1,
+    maxZoom = 5,
+    direction = 'vertical',
+    showPageIndicator = true,
+    fitPolicy = 'width',
+    style,
+    testID,
+  } = props;
+
+  const pdfRef = useRef<any>(null);
+  const [currentPage, setCurrentPage] = useState(page);
+  const [totalPages, setTotalPages] = useState(0);
+  const [controlledPage, setControlledPage] = useState(page);
+
+  // Update controlled page when prop changes
+  React.useEffect(() => {
+    setControlledPage(page);
+  }, [page]);
+
+  const handleLoadComplete = useCallback(
+    (numberOfPages: number) => {
+      setTotalPages(numberOfPages);
+      onLoad?.({ totalPages: numberOfPages });
+    },
+    [onLoad]
+  );
+
+  const handlePageChanged = useCallback(
+    (pageNum: number, numPages: number) => {
+      setCurrentPage(pageNum);
+      setTotalPages(numPages);
+      onPageChange?.(pageNum, numPages);
+    },
+    [onPageChange]
+  );
+
+  const handleError = useCallback(
+    (error: any) => {
+      const err = error instanceof Error ? error : new Error(String(error));
+      onError?.(err);
+    },
+    [onError]
+  );
+
+  // Imperative handle
+  useImperativeHandle(
+    ref,
+    () => ({
+      goToPage: (targetPage: number) => {
+        setControlledPage(targetPage);
+      },
+      setZoom: (_level: number) => {
+        // react-native-pdf does not support imperative zoom control;
+        // zoom is handled by user gestures within the configured min/max range
+      },
+    }),
+    []
+  );
+
+  const resolvedSource = resolveSource(source);
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <Pdf
+        ref={pdfRef}
+        source={resolvedSource}
+        page={controlledPage}
+        horizontal={direction === 'horizontal'}
+        fitPolicy={resolveFitPolicy(fitPolicy)}
+        minScale={minZoom}
+        maxScale={maxZoom}
+        enablePaging={false}
+        enableAntialiasing={true}
+        enableAnnotationRendering={true}
+        onLoadComplete={handleLoadComplete}
+        onPageChanged={handlePageChanged}
+        onError={handleError}
+        style={styles.pdf}
+      />
+      {showPageIndicator && totalPages > 0 && (
+        <View style={styles.indicator}>
+          <Text style={styles.indicatorText}>
+            {currentPage} / {totalPages}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+});
+
+PDFViewer.displayName = 'PDFViewer';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+  },
+  pdf: {
+    flex: 1,
+  },
+  indicator: {
+    position: 'absolute',
+    bottom: 16,
+    right: 16,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 4,
+  },
+  indicatorText: {
+    color: '#fff',
+    fontSize: 14,
+  },
+});

package/src/PDFViewer.tsx

@@ -0,0 +1,367 @@
+/**
+ * PDFViewer - Web implementation
+ *
+ * Uses pdfjs-dist (Mozilla PDF.js) for rendering PDF documents on the web.
+ */
+
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useEffect,
+  useState,
+  useCallback,
+} from 'react';
+import * as pdfjs from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFViewerProps, PDFViewerRef, PDFSource } from './types';
+
+// Configure the PDF.js worker
+// Users can override this by setting pdfjs.GlobalWorkerOptions.workerSrc before rendering
+if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+  pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;
+}
+
+/**
+ * Resolve a PDFSource into a pdfjs-dist compatible source parameter.
+ */
+function resolveSource(source: PDFSource): string | { data: Uint8Array } {
+  if (typeof source === 'string') return source;
+  if ('uri' in source) return source.uri;
+
+  // base64 → Uint8Array
+  const binaryStr = atob(source.base64);
+  const bytes = new Uint8Array(binaryStr.length);
+  for (let i = 0; i < binaryStr.length; i++) {
+    bytes[i] = binaryStr.charCodeAt(i);
+  }
+  return { data: bytes };
+}
+
+/**
+ * PDFViewer component for web.
+ *
+ * @example
+ * ```tsx
+ * import { PDFViewer } from '@idealyst/pdf';
+ *
+ * <PDFViewer
+ *   source="https://example.com/document.pdf"
+ *   onLoad={({ totalPages }) => console.log('Pages:', totalPages)}
+ *   onPageChange={(page, total) => console.log(page, '/', total)}
+ *   style={{ flex: 1 }}
+ * />
+ * ```
+ */
+export const PDFViewer = forwardRef<PDFViewerRef, PDFViewerProps>((props, ref) => {
+  const {
+    source,
+    page = 1,
+    onPageChange,
+    onLoad,
+    onError,
+    zoomEnabled = true,
+    minZoom = 1,
+    maxZoom = 5,
+    direction = 'vertical',
+    showPageIndicator = true,
+    fitPolicy = 'width',
+    style,
+    testID,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasContainerRef = useRef<HTMLDivElement>(null);
+  const pdfDocRef = useRef<PDFDocumentProxy | null>(null);
+  const pageRefs = useRef<Map<number, HTMLCanvasElement>>(new Map());
+  const [totalPages, setTotalPages] = useState(0);
+  const [currentPage, setCurrentPage] = useState(page);
+  const [zoom, setZoom] = useState(1);
+  const [isLoading, setIsLoading] = useState(true);
+  const loadIdRef = useRef(0);
+
+  // Render a single page to a canvas
+  const renderPage = useCallback(
+    async (doc: PDFDocumentProxy, pageNum: number, canvas: HTMLCanvasElement, scale: number) => {
+      const pdfPage = await doc.getPage(pageNum);
+      const viewport = pdfPage.getViewport({ scale });
+
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      const context = canvas.getContext('2d');
+      if (!context) return;
+
+      await pdfPage.render({
+        canvasContext: context,
+        viewport,
+      }).promise;
+    },
+    []
+  );
+
+  // Calculate scale based on fitPolicy and container size
+  const calculateScale = useCallback(
+    (doc: PDFDocumentProxy, containerWidth: number, containerHeight: number) => {
+      // We need the first page to determine dimensions
+      return doc.getPage(1).then((firstPage) => {
+        const unscaledViewport = firstPage.getViewport({ scale: 1 });
+        const pageWidth = unscaledViewport.width;
+        const pageHeight = unscaledViewport.height;
+
+        switch (fitPolicy) {
+          case 'width':
+            return containerWidth / pageWidth;
+          case 'height':
+            return containerHeight / pageHeight;
+          case 'both': {
+            const scaleW = containerWidth / pageWidth;
+            const scaleH = containerHeight / pageHeight;
+            return Math.min(scaleW, scaleH);
+          }
+          default:
+            return 1;
+        }
+      });
+    },
+    [fitPolicy]
+  );
+
+  // Load and render the PDF document
+  useEffect(() => {
+    const id = ++loadIdRef.current;
+    setIsLoading(true);
+
+    const loadPDF = async () => {
+      try {
+        // Destroy previous document
+        if (pdfDocRef.current) {
+          await pdfDocRef.current.destroy();
+          pdfDocRef.current = null;
+        }
+
+        const resolved = resolveSource(source);
+        const doc = await pdfjs.getDocument(resolved).promise;
+
+        if (id !== loadIdRef.current) {
+          doc.destroy();
+          return;
+        }
+
+        pdfDocRef.current = doc;
+        const numPages = doc.numPages;
+        setTotalPages(numPages);
+        setIsLoading(false);
+        onLoad?.({ totalPages: numPages });
+
+        // Get container dimensions for scale calculation
+        const container = containerRef.current;
+        if (!container) return;
+
+        const containerWidth = container.clientWidth;
+        const containerHeight = container.clientHeight;
+        const baseScale = await calculateScale(doc, containerWidth, containerHeight);
+
+        // Clear previous canvases
+        const canvasContainer = canvasContainerRef.current;
+        if (!canvasContainer) return;
+        canvasContainer.innerHTML = '';
+        pageRefs.current.clear();
+
+        // Render all pages
+        for (let i = 1; i <= numPages; i++) {
+          const canvas = document.createElement('canvas');
+          canvas.style.display = 'block';
+          canvas.style.margin = direction === 'vertical' ? '8px auto' : '8px';
+          canvas.dataset.page = String(i);
+          canvasContainer.appendChild(canvas);
+          pageRefs.current.set(i, canvas);
+
+          await renderPage(doc, i, canvas, baseScale * zoom);
+        }
+      } catch (err) {
+        if (id !== loadIdRef.current) return;
+        setIsLoading(false);
+        const error = err instanceof Error ? err : new Error(String(err));
+        onError?.(error);
+      }
+    };
+
+    loadPDF();
+
+    return () => {
+      loadIdRef.current++;
+      if (pdfDocRef.current) {
+        pdfDocRef.current.destroy();
+        pdfDocRef.current = null;
+      }
+    };
+  }, [source]);
+
+  // Re-render on zoom change
+  useEffect(() => {
+    if (!pdfDocRef.current || !containerRef.current) return;
+
+    const doc = pdfDocRef.current;
+    const container = containerRef.current;
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+
+    const rerender = async () => {
+      const baseScale = await calculateScale(doc, containerWidth, containerHeight);
+      const scale = baseScale * zoom;
+
+      const entries = Array.from(pageRefs.current.entries());
+      for (let i = 0; i < entries.length; i++) {
+        const [pageNum, canvas] = entries[i];
+        await renderPage(doc, pageNum, canvas, scale);
+      }
+    };
+
+    rerender();
+  }, [zoom, calculateScale, renderPage]);
+
+  // Scroll to page when `page` prop changes
+  useEffect(() => {
+    const canvas = pageRefs.current.get(page);
+    if (canvas) {
+      canvas.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
+      setCurrentPage(page);
+    }
+  }, [page]);
+
+  // Track current page via scroll position
+  useEffect(() => {
+    const container = canvasContainerRef.current;
+    if (!container || totalPages === 0) return;
+
+    const handleScroll = () => {
+      const scrollContainer = container.parentElement;
+      if (!scrollContainer) return;
+
+      const scrollTop = scrollContainer.scrollTop;
+      const scrollLeft = scrollContainer.scrollLeft;
+
+      let closestPage = 1;
+      let closestDistance = Infinity;
+
+      const scrollEntries = Array.from(pageRefs.current.entries());
+      for (let i = 0; i < scrollEntries.length; i++) {
+        const [pageNum, canvas] = scrollEntries[i];
+        const distance =
+          direction === 'vertical'
+            ? Math.abs(canvas.offsetTop - scrollTop)
+            : Math.abs(canvas.offsetLeft - scrollLeft);
+
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestPage = pageNum;
+        }
+      }
+
+      if (closestPage !== currentPage) {
+        setCurrentPage(closestPage);
+        onPageChange?.(closestPage, totalPages);
+      }
+    };
+
+    const scrollContainer = container.parentElement;
+    scrollContainer?.addEventListener('scroll', handleScroll, { passive: true });
+    return () => scrollContainer?.removeEventListener('scroll', handleScroll);
+  }, [totalPages, currentPage, direction, onPageChange]);
+
+  // Wheel zoom handler
+  useEffect(() => {
+    if (!zoomEnabled) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+
+      setZoom((prev) => {
+        const delta = e.deltaY > 0 ? -0.1 : 0.1;
+        return Math.min(maxZoom, Math.max(minZoom, prev + delta));
+      });
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    return () => container.removeEventListener('wheel', handleWheel);
+  }, [zoomEnabled, minZoom, maxZoom]);
+
+  // Imperative handle
+  useImperativeHandle(
+    ref,
+    () => ({
+      goToPage: (targetPage: number) => {
+        const canvas = pageRefs.current.get(targetPage);
+        if (canvas) {
+          canvas.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' });
+          setCurrentPage(targetPage);
+        }
+      },
+      setZoom: (level: number) => {
+        setZoom(Math.min(maxZoom, Math.max(minZoom, level)));
+      },
+    }),
+    [minZoom, maxZoom]
+  );
+
+  const containerStyle: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    overflow: 'auto',
+    backgroundColor: '#f0f0f0',
+    ...(style as any),
+  };
+
+  const canvasContainerStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: direction === 'vertical' ? 'column' : 'row',
+    alignItems: 'center',
+    minHeight: '100%',
+  };
+
+  const indicatorStyle: React.CSSProperties = {
+    position: 'absolute',
+    bottom: 16,
+    right: 16,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    color: '#fff',
+    padding: '4px 12px',
+    borderRadius: 4,
+    fontSize: 14,
+    fontFamily: 'system-ui, sans-serif',
+    pointerEvents: 'none',
+    zIndex: 10,
+  };
+
+  return (
+    <div ref={containerRef} style={containerStyle} data-testid={testID}>
+      <div ref={canvasContainerRef} style={canvasContainerStyle} />
+      {showPageIndicator && totalPages > 0 && (
+        <div style={indicatorStyle}>
+          {currentPage} / {totalPages}
+        </div>
+      )}
+      {isLoading && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          }}
+        >
+          Loading PDF...
+        </div>
+      )}
+    </div>
+  );
+});
+
+PDFViewer.displayName = 'PDFViewer';

package/src/index.native.ts

@@ -0,0 +1,36 @@
+/**
+ * @idealyst/pdf - Native exports
+ *
+ * Cross-platform PDF viewer for React and React Native.
+ *
+ * @example
+ * ```tsx
+ * import { PDFViewer, PDFViewerRef } from '@idealyst/pdf';
+ *
+ * // Basic usage
+ * <PDFViewer source="https://example.com/document.pdf" style={{ flex: 1 }} />
+ *
+ * // With local file
+ * <PDFViewer source={{ uri: '/path/to/local.pdf' }} />
+ *
+ * // With ref for imperative control
+ * const pdfRef = useRef<PDFViewerRef>(null);
+ *
+ * <PDFViewer ref={pdfRef} source="https://example.com/document.pdf" />
+ *
+ * pdfRef.current?.goToPage(5);
+ * ```
+ */
+
+// Type exports
+export type {
+  PDFSource,
+  PDFDocumentInfo,
+  PDFViewerProps,
+  PDFViewerRef,
+  FitPolicy,
+  PDFDirection,
+} from './types';
+
+// Component export
+export { PDFViewer } from './PDFViewer.native';

package/src/index.ts

@@ -0,0 +1,41 @@
+/**
+ * @idealyst/pdf - Web exports
+ *
+ * Cross-platform PDF viewer for React and React Native.
+ *
+ * @example
+ * ```tsx
+ * import { PDFViewer, PDFViewerRef } from '@idealyst/pdf';
+ *
+ * // Basic usage
+ * <PDFViewer source="https://example.com/document.pdf" style={{ flex: 1 }} />
+ *
+ * // With callbacks
+ * <PDFViewer
+ *   source={{ uri: 'https://example.com/document.pdf' }}
+ *   onLoad={({ totalPages }) => console.log('Pages:', totalPages)}
+ *   onPageChange={(page, total) => console.log(page, '/', total)}
+ * />
+ *
+ * // With ref for imperative control
+ * const pdfRef = useRef<PDFViewerRef>(null);
+ *
+ * <PDFViewer ref={pdfRef} source="https://example.com/document.pdf" />
+ *
+ * pdfRef.current?.goToPage(5);
+ * pdfRef.current?.setZoom(2);
+ * ```
+ */
+
+// Type exports
+export type {
+  PDFSource,
+  PDFDocumentInfo,
+  PDFViewerProps,
+  PDFViewerRef,
+  FitPolicy,
+  PDFDirection,
+} from './types';
+
+// Component export
+export { PDFViewer } from './PDFViewer';

package/src/types.ts

@@ -0,0 +1,136 @@
+/**
+ * Type definitions for @idealyst/pdf
+ */
+
+import type { ViewStyle } from 'react-native';
+
+/**
+ * PDF source - URL string, object with uri, or base64-encoded data
+ */
+export type PDFSource = string | { uri: string } | { base64: string };
+
+/**
+ * Information about a loaded PDF document
+ */
+export interface PDFDocumentInfo {
+  /** Total number of pages */
+  totalPages: number;
+}
+
+/**
+ * Fit policy for rendering pages
+ * - 'width': fit page width to container
+ * - 'height': fit page height to container
+ * - 'both': fit entire page within container
+ */
+export type FitPolicy = 'width' | 'height' | 'both';
+
+/**
+ * Scroll/page direction
+ */
+export type PDFDirection = 'horizontal' | 'vertical';
+
+/**
+ * Props for the PDFViewer component
+ */
+export interface PDFViewerProps {
+  /**
+   * PDF source - URL string, { uri } object, or { base64 } data.
+   *
+   * @example
+   * // URL string
+   * source="https://example.com/document.pdf"
+   *
+   * // URI object
+   * source={{ uri: 'https://example.com/document.pdf' }}
+   *
+   * // Base64 encoded
+   * source={{ base64: 'JVBERi0xLjQK...' }}
+   */
+  source: PDFSource;
+
+  /**
+   * Current page number (1-indexed).
+   * When provided, the viewer scrolls to this page.
+   * @default 1
+   */
+  page?: number;
+
+  /**
+   * Called when the visible page changes.
+   * @param page - Current page number (1-indexed)
+   * @param totalPages - Total number of pages in the document
+   */
+  onPageChange?: (page: number, totalPages: number) => void;
+
+  /**
+   * Called when the PDF document loads successfully.
+   */
+  onLoad?: (info: PDFDocumentInfo) => void;
+
+  /**
+   * Called when an error occurs loading the PDF.
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Enable pinch-to-zoom / scroll-to-zoom.
+   * @default true
+   */
+  zoomEnabled?: boolean;
+
+  /**
+   * Minimum zoom level.
+   * @default 1
+   */
+  minZoom?: number;
+
+  /**
+   * Maximum zoom level.
+   * @default 5
+   */
+  maxZoom?: number;
+
+  /**
+   * Scroll direction for page navigation.
+   * @default 'vertical'
+   */
+  direction?: PDFDirection;
+
+  /**
+   * Show a page indicator overlay (e.g. "3 / 10").
+   * @default true
+   */
+  showPageIndicator?: boolean;
+
+  /**
+   * How pages should be scaled to fit the container.
+   * @default 'width'
+   */
+  fitPolicy?: FitPolicy;
+
+  /**
+   * Container style.
+   */
+  style?: ViewStyle;
+
+  /**
+   * Test ID for testing frameworks.
+   */
+  testID?: string;
+}
+
+/**
+ * Ref methods for imperative PDFViewer control
+ */
+export interface PDFViewerRef {
+  /**
+   * Navigate to a specific page (1-indexed).
+   */
+  goToPage: (page: number) => void;
+
+  /**
+   * Set the zoom level programmatically.
+   */
+  setZoom: (level: number) => void;
+}