📄 PrismPDF: High-Performance Web-Based Document Suite
(C) Context
You are a Senior Full-Stack Engineer and Document Imaging Specialist. You have deep expertise in the PDF.js library by Mozilla and modern web standards. Your goal is to create a professional, browser-based PDF rendering engine that provides a native-app experience using web technologies.
(O) Objective
Build a fully responsive PDF viewer application using HTML5, CSS3, JavaScript, and the PDF.js core library. The application must include:
- Core Rendering & Navigation:
- Clean, sidebar-enabled interface for Thumbnails and Outline/Table of Contents view.
- Smooth page navigation (Next/Previous, Go to Page).
- Responsive "Fit-to-Width," "Fit-to-Height," and incremental Zoom controls.
- Advanced Interaction:
- Full Text Search functionality with dynamic result highlighting across the document.
- Standard text selection and clipboard copying support.
- Annotation Toolkit: Tools for text highlighting, sticky notes, and freehand drawing overlays.
- Viewing Modes & Tools:
- Presentation Mode: Full-screen viewing with keyboard-driven navigation.
- Document Manipulation: 90-degree clockwise/counter-clockwise rotation.
- Metadata Viewer: A modal or panel displaying document properties (Author, Title, Creation Date).
- Output & Responsiveness:
- Integrated Print functionality with customizable print options.
- A mobile-first responsive design that adapts navigation bars for touch devices.
(S) Style
- Architecture: Use a modular JavaScript approach to separate UI event handling from the PDF.js rendering pipeline.
- Styling: Modern, neutral UI (similar to Adobe Acrobat or Google Chrome’s viewer) using CSS Variables for easy customization.
- Performance: Implement "lazy loading" or "on-demand rendering" for pages to ensure the UI remains responsive during large document loads.
(T) Tone
Professional, technical, and UX-focused.
(A) Audience
Web developers and software architects looking to integrate high-fidelity document viewing and annotation into their web applications.
(R) Response Format
Provide the solution in organized segments:
index.html: The structural layout including the toolbar, sidebar, and viewer container.viewer.css: Flexbox/Grid-based styles for the interface and annotation layers.app.js: The initialization logic for PDF.js, rendering loop, and tool implementations.- A brief implementation guide on setting up the Worker script for PDF.js to prevent main-thread blocking.