teamsync-pdf-viewer 1.6.0 → 1.6.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to `teamsync-pdf-viewer` are documented here.
 
+## [1.6.1] — 2026-09-15
+
+### Added
+- **`initialWidthRatio` Option**: Added `initialWidthRatio?: number` (with `widthRatio?: number` as an alias) to `<TeamSyncViewer>` and `WebViewerOptions`, allowing clients to target an exact fraction of the available viewing width on initial load (e.g. `0.7` for 70% width).
+- **Responsive PDF Container Resizing**: Added automatic `ResizeObserver` tracking on the document container to refit the open PDF responsively at 60fps via `requestAnimationFrame` when the viewer page, container, or sidebars resize while in a width-ratio, fit-width, or fit-page mode.
+- **`responsive` Prop**: Added `responsive?: boolean` (defaults to `true`) to `<TeamSyncViewer>` and `WebViewerOptions` for explicit control over auto-refitting on container resize.
+- **Public `calculateFitWidthScale` Utility**: Exported `calculateFitWidthScale(availableWidth, pageWidth, ratio?, minScale?, maxScale?)` from the public package root.
+- **Ratio Support in `fitWidth` & `fitToWidth`**: Updated `instance.UI.fitWidth(ratio?)`, `instance.UI.fitToWidth(ratio?)`, and added direct instance methods `instance.fitWidth(ratio?)`, `instance.fitToWidth(ratio?)`, `instance.fitPage()`, and `instance.fitToPage()`.
+
 ## [1.6.0] — 2026-09-06
 
 ### Added

package/README.md

@@ -25,7 +25,7 @@ Try the **[Interactive Live Demo](https://pdfviewer.teamsync.com/)** or integrat
 Traditional commercial PDF viewers force developers into expensive per-domain licenses, opaque sales calls, and heavy server-side processing dependencies. **TeamSync PDF Viewer** is built from the ground up to solve these pain points.
 
 - 💰 **Zero-Cost, Transparent Licensing**: Uncapped usage, no per-server fees, and no commercial paywalls. 100% free and open-source under CPAL 1.0.
-- ⚡ **100% Client-Side WebAssembly**: Documents never leave the browser sandbox. Process, redact, and render PDFs entirely on the client. 
+- ⚡ **100% Client-Side PDF Processing**: Documents never leave the browser sandbox. Process, redact, and render PDFs entirely on the client. 
 - 🔌 **Universal WebViewer API**: Clean, intuitive `WebViewer({...})` API interface that makes integrating into your web applications effortless.
 - 🎨 **Headless & Customizable**: Built for modern React 19 SPA lifecycles. No bloated iFrames to fight—customize toolbars, sidebars, context menus, and controls natively.
 

package/dist/src/components/DocumentViewer.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { Annotation } from '../annotations/types';
 import { AnnotationManager } from '../annotations/AnnotationManager';
-import { Redaction, WatermarkOptions, SDKPermissions, PdfAssetPaths, TransientHighlight } from '../core/types';
+import { Redaction, WatermarkOptions, SDKPermissions, PdfAssetPaths, TransientHighlight, InitialScale } from '../core/types';
 import * as pdfjsLib from 'pdfjs-dist';
 export interface DocumentLoadErrorInfo {
     url: string;
@@ -56,6 +56,9 @@ interface DocumentViewerProps {
     enableTextSelection?: boolean;
     defaultTool?: 'select' | 'pan';
     showSelectionTooltip?: boolean;
+    initialScale?: InitialScale;
+    initialWidthRatio?: number;
+    responsive?: boolean;
 }
-export default function DocumentViewer({ leftSidebarOpen, rightSidebarOpen, activeTab, annotationManager, initialDoc, loadNonce, withCredentials, assets, sidebars, redactions, regexRedactions, scale, setScale, sidebarTab, setSidebarTab, onAnnotationsChange, onRedactionsChange, onRedactionsApplied, onDocumentLoaded, onLoadError, onFirstPageRendered, onPageRendered, onPageChange, pageTransition, pageLayout, rotation, setRotation, watermark, watermarkText, enableAnnotations: _enableAnnotations, initialPage, page, transientHighlights, permissions, hideAnnotationsUntilPageRendered, enableTextSelection, defaultTool, showSelectionTooltip }: DocumentViewerProps): React.JSX.Element;
+export default function DocumentViewer({ leftSidebarOpen, rightSidebarOpen, activeTab, annotationManager, initialDoc, loadNonce, withCredentials, assets, sidebars, redactions, regexRedactions, scale, setScale, sidebarTab, setSidebarTab, onAnnotationsChange, onRedactionsChange, onRedactionsApplied, onDocumentLoaded, onLoadError, onFirstPageRendered, onPageRendered, onPageChange, pageTransition, pageLayout, rotation, setRotation, watermark, watermarkText, enableAnnotations: _enableAnnotations, initialPage, page, transientHighlights, permissions, hideAnnotationsUntilPageRendered, enableTextSelection, defaultTool, showSelectionTooltip, initialScale, initialWidthRatio, responsive, }: DocumentViewerProps): React.JSX.Element;
 export {};

package/dist/src/core/ViewerInstance.d.ts

@@ -68,6 +68,19 @@ export declare class WebViewerInstance {
     }): void;
     /** Set the current page number (1-based). Alias of goToPage. */
     setCurrentPage(pageNumber: number): void;
+    /**
+     * Scale the document to fit the container width.
+     *
+     * @param ratio - Optional width ratio fraction (e.g. `0.7` for 70% of available width).
+     *   Defaults to `1.0` (100% full-width fit).
+     */
+    fitWidth(ratio?: number): void;
+    /** Alias of `fitWidth`. */
+    fitToWidth(ratio?: number): void;
+    /** Scale the document to fit the entire page within the container viewport. */
+    fitPage(): void;
+    /** Alias of `fitPage`. */
+    fitToPage(): void;
     /**
      * Search the document for text matches, returning snippets and page bounding boxes.
      *
@@ -145,9 +158,9 @@ export declare class WebViewerInstance {
         setToolMode: (tool: string | null) => void;
         getSelectedText: () => string;
         copySelectedText: () => Promise<boolean>;
-        fitWidth: () => void;
+        fitWidth: (ratio?: number) => void;
         fitPage: () => void;
-        fitToWidth: () => void;
+        fitToWidth: (ratio?: number) => void;
         fitToPage: () => void;
         startCompare: (docA: any, docB: any, options?: any) => void;
         stopCompare: () => void;

package/dist/src/core/types.d.ts

@@ -53,7 +53,10 @@ export interface ViewerUser {
     id: string;
     name: string;
 }
-export type InitialScale = number | 'fit-width' | 'fit-page';
+export type InitialScale = number | 'fit-width' | 'fit-page' | {
+    type: 'fit-width';
+    ratio?: number;
+};
 export type ToolMode = 'select' | 'pan' | 'rectangle' | 'ellipse' | 'line' | 'arrow' | 'freehand' | 'highlight' | 'underline' | 'strikeout' | 'squiggly' | 'text' | 'eraser' | 'note' | 'callout' | 'signature' | 'digital_signature' | 'link' | 'redaction' | null;
 /**
  * Options accepted by `createWebViewer()` (and the deprecated `WebViewer()` alias).
@@ -67,6 +70,18 @@ export interface WebViewerOptions {
     /** Display name used for downloads. */
     fileName?: string;
     initialScale?: InitialScale;
+    /**
+     * Initial page width target as a ratio of the available viewing container width (e.g. `0.7` for 70%).
+     * When provided, the viewer scales the document to occupy this fraction of available width on initial render.
+     */
+    initialWidthRatio?: number;
+    /** Alias of `initialWidthRatio`. */
+    widthRatio?: number;
+    /**
+     * Automatically re-calculate scale when the viewer container or window resizes while in a fit or width-ratio mode.
+     * Default: true.
+     */
+    responsive?: boolean;
     /** 1-based page to scroll to after load. */
     initialPage?: number;
     /** Current 1-based page to display. Changes navigate to the given page. */

package/dist/src/index.d.ts

@@ -33,7 +33,7 @@ export type { PrintOptions } from './core/print';
 export { usePdfSearch, searchPdfText } from './hooks/usePdfSearch';
 export type { SearchResult, SearchBounds } from './hooks/usePdfSearch';
 export type { TransientHighlight } from './core/types';
-export { MIN_SCALE, MAX_SCALE, clampScale, calculateNextZoomIn, calculateNextZoomOut, calculateScrollCompensation } from './utils/zoomUtils';
+export { MIN_SCALE, MAX_SCALE, clampScale, calculateNextZoomIn, calculateNextZoomOut, calculateFitWidthScale, calculateScrollCompensation } from './utils/zoomUtils';
 export type { ScrollCompensationParams, ScrollPosition } from './utils/zoomUtils';
 export { estimatePageDimensions, computeRowLayout, DEFAULT_FALLBACK_DIMS, hasDimensionMismatch } from './utils/layoutUtils';
 export type { PageDimension, RowLayout } from './utils/layoutUtils';

package/dist/src/utils/zoomUtils.d.ts

@@ -27,6 +27,11 @@ export declare function calculateNextZoomOut(currentScale: number, minScale?: nu
  * Clamps and rounds a requested zoom level within [minScale, maxScale].
  */
 export declare function clampScale(scale: number, minScale?: number, maxScale?: number): number;
+/**
+ * Calculates the target scale to fit a given page width to an available container width,
+ * optionally scaled by a width ratio (e.g. 0.7 for 70% of available width).
+ */
+export declare function calculateFitWidthScale(availableWidth: number, pageWidth: number, ratio?: number, minScale?: number, maxScale?: number): number;
 /**
  * Calculates the safe rasterization scale for PDF.js viewport rendering so that
  * canvas dimensions and texture memory stay strictly within hardware limits.