@files-preview-app/preview-file 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sumit and @file-preview contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,296 @@
+# @patel.sumit51/preview-file
+
+> **Universal, all-in-one client-side file preview package for React, Angular, Vue, and Vanilla JS.**  
+> Preview **PDF, Word (.docx), Excel (.xlsx), CSV, Images, Video, Audio, and Code/Text** with a built-in toolbar (zoom, rotate, thumbnails, page jump, download, print). 100% free, permissive open-source, and client-side (no cloud or server needed).
+
+[![npm version](https://img.shields.io/npm/v/@patel.sumit51/preview-file.svg)](https://www.npmjs.com/package/@patel.sumit51/preview-file)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 📦 Installation
+
+Just install this **single package** in your project:
+
+```bash
+npm install @patel.sumit51/preview-file
+```
+
+Or using Yarn / pnpm:
+```bash
+yarn add @patel.sumit51/preview-file
+# or
+pnpm add @patel.sumit51/preview-file
+```
+
+Import the toolbar stylesheet in your main CSS or component:
+```css
+import '@patel.sumit51/preview-file/styles.css';
+```
+
+---
+
+## 🚀 Quick Start by Framework
+
+### 1. React (`@patel.sumit51/preview-file/react`)
+
+```tsx
+import React, { useState } from 'react';
+import { FilePreview } from '@patel.sumit51/preview-file/react';
+import '@patel.sumit51/preview-file/styles.css';
+
+export default function App() {
+  const [selectedFile, setSelectedFile] = useState<File | string>('https://example.com/sample.pdf');
+
+  return (
+    <div>
+      {/* File input for local files */}
+      <input
+        type="file"
+        onChange={(e) => e.target.files?.[0] && setSelectedFile(e.target.files[0])}
+      />
+
+      {/* Preview container */}
+      <div style={{ width: '100%', height: '800px', marginTop: '16px' }}>
+        <FilePreview
+          src={selectedFile}
+          options={{
+            theme: 'light', // 'light' | 'dark' | 'auto'
+            showToolbar: true,
+            toolbarPosition: 'top' // 'top' | 'bottom'
+          }}
+          onLoaded={(info) => console.log('File loaded successfully:', info)}
+          onError={(error) => console.error('Preview error:', error)}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+### 2. Angular (`@patel.sumit51/preview-file/angular`)
+
+In your standalone component or NgModule:
+
+```typescript
+import { Component } from '@angular/core';
+import { FilePreviewComponent } from '@patel.sumit51/preview-file/angular';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [FilePreviewComponent],
+  template: `
+    <div style="width: 100%; height: 800px;">
+      <input type="file" (change)="onFileSelected($event)" />
+      
+      <fp-file-preview
+        [src]="fileSource"
+        [options]="{ theme: 'light', showToolbar: true }"
+        (loaded)="onLoaded($event)"
+        (error)="onError($event)"
+      />
+    </div>
+  `,
+  styleUrls: ['@patel.sumit51/preview-file/styles.css']
+})
+export class AppComponent {
+  fileSource: string | File = 'https://example.com/report.xlsx';
+
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files?.[0]) {
+      this.fileSource = input.files[0];
+    }
+  }
+
+  onLoaded(event: unknown) {
+    console.log('Preview ready', event);
+  }
+
+  onError(err: Error) {
+    console.error('Preview failed', err);
+  }
+}
+```
+
+---
+
+### 3. Vue 3 (`@patel.sumit51/preview-file/vue`)
+
+```vue
+<template>
+  <div style="width: 100%; height: 800px;">
+    <input type="file" @change="onFileChange" />
+
+    <FilePreview
+      :src="currentFile"
+      :options="{ theme: 'dark', showToolbar: true }"
+      @loaded="handleLoaded"
+      @error="handleError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FilePreview } from '@patel.sumit51/preview-file/vue';
+import '@patel.sumit51/preview-file/styles.css';
+
+const currentFile = ref<File | string>('/sample.docx');
+
+function onFileChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  if (target.files?.[0]) {
+    currentFile.value = target.files[0];
+  }
+}
+
+function handleLoaded(data: unknown) {
+  console.log('Loaded:', data);
+}
+
+function handleError(err: unknown) {
+  console.error('Error:', err);
+}
+</script>
+```
+
+---
+
+### 4. Vanilla JavaScript / TypeScript (`@patel.sumit51/preview-file`)
+
+```html
+<link rel="stylesheet" href="node_modules/@patel.sumit51/preview-file/dist/styles.css" />
+
+<div id="viewer-container" style="width: 100%; height: 800px;"></div>
+
+<script type="module">
+  import { FilePreviewViewer } from '@patel.sumit51/preview-file';
+
+  const container = document.getElementById('viewer-container');
+  const viewer = new FilePreviewViewer();
+
+  // Preview from URL, File, Blob, or ArrayBuffer
+  await viewer.preview(container, 'https://example.com/invoice.pdf', {
+    theme: 'light',
+    showToolbar: true
+  });
+</script>
+```
+
+---
+
+## 📂 Supported Extensions & Built-in Controls
+
+The viewer automatically recognizes the file extension and magic binary bytes, activating the corresponding renderer and controls:
+
+| File Format | Extensions | Controls Available |
+|---|---|---|
+| **PDF** | `.pdf` | Zoom In/Out, Fit to Page, Rotate CW/CCW, Page Navigation Jump, Thumbnails Sidebar, Download, Print |
+| **Word Document** | `.docx` | Full layout rendering, Zoom In/Out, Fit to Page, Download, Print |
+| **Excel Spreadsheet** | `.xlsx`, `.xls` | Multi-Sheet Tabs Navigation, Formatted Grid Table, Zoom In/Out, Download, Print |
+| **CSV / TSV Data** | `.csv`, `.tsv` | Tabular Grid with Header Styling, Comma/Tab auto-detection, Zoom In/Out, Download, Print |
+| **Images** | `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.bmp`, `.svg`, `.ico`, `.tiff` | Pan & Zoom, Reset / Fit, Rotate 90°, Download, Print |
+| **Video** | `.mp4`, `.webm`, `.ogg`, `.mov` | Play / Pause, Rotate, Fullscreen, Download |
+| **Audio** | `.mp3`, `.wav`, `.ogg`, `.flac`, `.aac` | Play / Pause, Volume, Seek, Download |
+| **Code & Text** | `.js`, `.ts`, `.jsx`, `.tsx`, `.html`, `.css`, `.json`, `.xml`, `.yaml`, `.py`, `.java`, `.cpp`, `.sql`, `.md`, `.txt`, `.sh`, etc. (190+ languages) | Syntax Highlighting via highlight.js, Font Scaling Zoom In/Out, Download, Print |
+
+---
+
+## 📥 How to Pass Values (`src` prop)
+
+You can pass the file source in **any** of the following formats:
+
+### 1. From HTML `<input type="file">` (File object)
+```tsx
+const file = event.target.files[0];
+<FilePreview src={file} />
+```
+
+### 2. URL String (Public URL or CDN)
+```tsx
+<FilePreview src="https://example.com/documents/contract.pdf" />
+```
+
+### 3. Blob Object
+```tsx
+const blob = new Blob([data], { type: 'application/pdf' });
+<FilePreview src={blob} />
+```
+
+### 4. ArrayBuffer or Uint8Array
+```tsx
+const buffer = await response.arrayBuffer();
+<FilePreview src={buffer} />
+```
+
+### 5. Base64 Data URI
+```tsx
+<FilePreview src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
+```
+
+---
+
+## 🎛️ Toolbar Features Matrix
+
+| Control | How it Works |
+|---|---|
+| **Thumbnails** | Toggles a collapsible sidebar showing miniature rendered previews of each page/sheet. |
+| **Zoom In / Zoom Out** | Dynamically scales document, canvas, or font size without pixelation. |
+| **Fit to Page** | Automatically fits the preview perfectly within your container dimensions. |
+| **Page Jump** | Numeric input field allowing users to type a page or sheet number and jump instantly. |
+| **Rotate** | Rotates documents, images, and videos 90 degrees clockwise or counterclockwise. |
+| **Play / Pause** | Controls video and audio playback directly from the unified toolbar. |
+| **Download** | Downloads the original file to the user's disk with proper filename and MIME type. |
+| **Print** | Opens the browser print dialog formatted specifically for clean printing. |
+
+---
+
+## 🎨 Viewer Options
+
+Pass configuration via the `options` object:
+
+```typescript
+interface PreviewViewerOptions {
+  /** Color theme: 'light' | 'dark' | 'auto' (default: 'light') */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Show top toolbar (default: true) */
+  showToolbar?: boolean;
+  /** Toolbar placement: 'top' | 'bottom' (default: 'top') */
+  toolbarPosition?: 'top' | 'bottom';
+  /** Show thumbnails panel on initial load (default: false) */
+  showThumbnails?: boolean;
+  /** Custom wrapper CSS class name */
+  className?: string;
+  /** Initial zoom multiplier (1.0 = 100%) */
+  zoom?: number;
+}
+```
+
+---
+
+## 🛡️ Security & Licensing
+
+- **100% Client-Side**: No document or file data is ever sent to any remote server or third-party cloud.
+- **XSS Protection**: HTML and SVG previews are sanitized with `DOMPurify`.
+- **Strictly Permissive Licenses**: Every dependency used is audited and verified under **MIT**, **Apache-2.0**, or **BSD-3-Clause**. No GPL, AGPL, commercial paywalls, or restrictive terms.
+
+See [THIRD_PARTY_LICENSES.md](THIRD_PARTY_LICENSES.md) for full licensing details.
+
+---
+
+## 👨‍💻 Author
+
+**Sumit Patel**
+- GitHub: [@patelsumit5192](https://github.com/patelsumit5192)
+- npm: [patel.sumit51](https://www.npmjs.com/~patel.sumit51)
+- Repository: [https://github.com/patelsumit5192/preview-file](https://github.com/patelsumit5192/preview-file)
+
+---
+
+## 📄 License
+
+MIT © 2026 Sumit Patel

package/THIRD_PARTY_LICENSES.md

@@ -0,0 +1,15 @@
+# Third-Party Licenses
+
+This project uses the following open-source libraries. All dependencies use permissive licenses (MIT, Apache-2.0, or BSD) that allow free commercial and personal use.
+
+| Package | Version | License | Author/Org | URL |
+|---|---|---|---|---|
+| pdfjs-dist | ^4.x | Apache-2.0 | Mozilla | https://github.com/nicolo-ribaudo/pdfjs-dist |
+| docx-preview | ^0.3.x | Apache-2.0 | Volodymyr Baydalka | https://github.com/VolodymyrBaydalka/docxjs |
+| exceljs | ^4.x | MIT | Guyon Roche | https://github.com/exceljs/exceljs |
+| papaparse | ^5.x | MIT | Matt Holt | https://github.com/mholt/PapaParse |
+| highlight.js | ^11.x | BSD-3-Clause | Ivan Googol | https://github.com/highlightjs/highlight.js |
+| @panzoom/panzoom | ^4.x | MIT | Timmy Willison | https://github.com/timmywil/panzoom |
+| dompurify | ^3.x | Apache-2.0 | Cure53 | https://github.com/cure53/DOMPurify |
+
+All licenses are included in their respective `node_modules/<package>/LICENSE` files.