svelte-pdf-view 0.2.0 → 0.3.0

package/README.md

@@ -314,11 +314,9 @@ interface PdfViewerActions {
 />
 ```
 
-## Browser Support
+## Use Cases
 
-- Chrome/Edge 88+
-- Firefox 78+
-- Safari 14+
+**Texpile** ([texpile.com](https://texpile.com/)) uses this package to display generated documents (PDFs) directly in the browser.
 
 ## License
 

package/dist/pdf-viewer/AnnotationLayerBuilder.d.ts

@@ -0,0 +1,54 @@
+/**
+ * AnnotationLayerBuilder - Renders PDF annotations (links, form widgets, popups).
+ * Adapted from PDF.js annotation_layer_builder.js
+ */
+import type { PDFPageProxy, PageViewport } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import type { SimpleLinkService } from './SimpleLinkService.js';
+export interface AnnotationLayerBuilderOptions {
+    pdfPage: PDFPageProxy;
+    linkService: SimpleLinkService;
+    annotationStorage?: any;
+    imageResourcesPath?: string;
+    renderForms?: boolean;
+    onAppend?: (div: HTMLDivElement) => void;
+}
+export interface AnnotationLayerBuilderRenderOptions {
+    viewport: PageViewport;
+    intent?: string;
+}
+export declare class AnnotationLayerBuilder {
+    private pdfPage;
+    private linkService;
+    private annotationStorage;
+    private imageResourcesPath;
+    private renderForms;
+    private onAppend;
+    private annotationLayer;
+    div: HTMLDivElement | null;
+    private cancelled;
+    constructor(options: AnnotationLayerBuilderOptions);
+    /**
+     * Render the annotation layer.
+     */
+    render(options: AnnotationLayerBuilderRenderOptions): Promise<void>;
+    /**
+     * Update the annotation layer viewport.
+     */
+    update(viewport: PageViewport): void;
+    /**
+     * Cancel rendering.
+     */
+    cancel(): void;
+    /**
+     * Hide the annotation layer.
+     */
+    hide(): void;
+    /**
+     * Show the annotation layer.
+     */
+    show(): void;
+    /**
+     * Destroy the annotation layer.
+     */
+    destroy(): void;
+}

package/dist/pdf-viewer/AnnotationLayerBuilder.js

@@ -0,0 +1,145 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// Dynamically loaded pdfjs components
+let AnnotationLayer;
+async function ensurePdfJsLoaded() {
+    if (!AnnotationLayer) {
+        const pdfjs = await import('pdfjs-dist/legacy/build/pdf.mjs');
+        AnnotationLayer = pdfjs.AnnotationLayer;
+    }
+}
+export class AnnotationLayerBuilder {
+    pdfPage;
+    linkService;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    annotationStorage;
+    imageResourcesPath;
+    renderForms;
+    onAppend;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    annotationLayer = null;
+    div = null;
+    cancelled = false;
+    constructor(options) {
+        this.pdfPage = options.pdfPage;
+        this.linkService = options.linkService;
+        this.annotationStorage = options.annotationStorage ?? null;
+        this.imageResourcesPath = options.imageResourcesPath ?? '';
+        this.renderForms = options.renderForms ?? true;
+        this.onAppend = options.onAppend ?? null;
+    }
+    /**
+     * Render the annotation layer.
+     */
+    async render(options) {
+        const { viewport, intent = 'display' } = options;
+        if (this.div) {
+            // Already rendered - just update
+            if (this.cancelled || !this.annotationLayer) {
+                return;
+            }
+            this.annotationLayer.update({
+                viewport: viewport.clone({ dontFlip: true })
+            });
+            return;
+        }
+        await ensurePdfJsLoaded();
+        const annotations = await this.pdfPage.getAnnotations({ intent });
+        if (this.cancelled) {
+            return;
+        }
+        // Create annotation layer div
+        this.div = document.createElement('div');
+        this.div.className = 'annotationLayer';
+        this.onAppend?.(this.div);
+        // Set layer dimensions directly (setLayerDimensions uses CSS round() which may not work everywhere)
+        const { width, height } = viewport;
+        this.div.style.width = `${Math.floor(width)}px`;
+        this.div.style.height = `${Math.floor(height)}px`;
+        // Initialize the annotation layer
+        this.annotationLayer = new AnnotationLayer({
+            div: this.div,
+            accessibilityManager: null,
+            annotationCanvasMap: null,
+            annotationEditorUIManager: null,
+            page: this.pdfPage,
+            viewport: viewport.clone({ dontFlip: true }),
+            structTreeLayer: null,
+            commentManager: null,
+            linkService: this.linkService,
+            annotationStorage: this.annotationStorage
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        });
+        if (annotations.length === 0) {
+            return;
+        }
+        // Render annotations
+        await this.annotationLayer.render({
+            annotations,
+            imageResourcesPath: this.imageResourcesPath,
+            renderForms: this.renderForms,
+            linkService: this.linkService,
+            downloadManager: undefined,
+            annotationStorage: this.annotationStorage,
+            enableScripting: false,
+            hasJSActions: false,
+            fieldObjects: null
+        });
+    }
+    /**
+     * Update the annotation layer viewport.
+     */
+    update(viewport) {
+        if (!this.div || !this.annotationLayer) {
+            return;
+        }
+        this.annotationLayer.update({
+            viewport: viewport.clone({ dontFlip: true })
+        });
+    }
+    /**
+     * Cancel rendering.
+     */
+    cancel() {
+        this.cancelled = true;
+    }
+    /**
+     * Hide the annotation layer.
+     */
+    hide() {
+        if (this.div) {
+            this.div.hidden = true;
+        }
+    }
+    /**
+     * Show the annotation layer.
+     */
+    show() {
+        if (this.div) {
+            this.div.hidden = false;
+        }
+    }
+    /**
+     * Destroy the annotation layer.
+     */
+    destroy() {
+        this.cancel();
+        if (this.div) {
+            this.div.remove();
+            this.div = null;
+        }
+        this.annotationLayer = null;
+    }
+}

package/dist/pdf-viewer/PDFPageView.d.ts

@@ -1,9 +1,10 @@
 /**
- * PDFPageView - Renders a single PDF page with canvas and text layer.
+ * PDFPageView - Renders a single PDF page with canvas, text layer, and annotation layer.
  * This is a derivative work based on PDF.js pdf_page_view.js
  */
 import type { PDFPageProxy, PageViewport } from 'pdfjs-dist/legacy/build/pdf.mjs';
 import type { EventBus } from './EventBus.js';
+import type { SimpleLinkService } from './SimpleLinkService.js';
 export interface PDFPageViewOptions {
     container: HTMLElement;
     id: number;
@@ -11,6 +12,7 @@ export interface PDFPageViewOptions {
     eventBus: EventBus;
     scale?: number;
     rotation?: number;
+    linkService?: SimpleLinkService;
 }
 export declare const RenderingStates: {
     readonly INITIAL: 0;
@@ -33,6 +35,9 @@ export declare class PDFPageView {
     private canvasWrapper;
     private textLayerDiv;
     private loadingDiv;
+    private linkService;
+    private annotationLayerBuilder;
+    private annotationLayerRendered;
     renderingState: RenderingState;
     private renderTask;
     private textLayer;
@@ -51,6 +56,7 @@ export declare class PDFPageView {
     reset(): void;
     draw(): Promise<void>;
     private renderTextLayer;
+    private renderAnnotationLayer;
     cancelRendering(): void;
     destroy(): void;
     get width(): number;

package/dist/pdf-viewer/PDFPageView.js

@@ -12,6 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { AnnotationLayerBuilder } from './AnnotationLayerBuilder.js';
 // Dynamically loaded pdfjs utilities
 let setLayerDimensions;
 async function ensurePdfJsLoaded() {
@@ -40,6 +41,10 @@ export class PDFPageView {
     canvasWrapper = null;
     textLayerDiv = null;
     loadingDiv = null;
+    // Annotation layer
+    linkService = null;
+    annotationLayerBuilder = null;
+    annotationLayerRendered = false;
     renderingState = RenderingStates.INITIAL;
     renderTask = null;
     // Text layer instance for updates
@@ -55,6 +60,7 @@ export class PDFPageView {
         this.scale = options.scale ?? 1.0;
         this.rotation = options.rotation ?? 0;
         this.viewport = options.defaultViewport;
+        this.linkService = options.linkService ?? null;
         // Create page container
         this.div = document.createElement('div');
         this.div.className = 'page';
@@ -120,6 +126,10 @@ export class PDFPageView {
                 });
                 this.textLayerDiv.hidden = false;
             }
+            // Update annotation layer
+            if (this.annotationLayerBuilder && this.annotationLayerRendered) {
+                this.annotationLayerBuilder.update(this.viewport);
+            }
             // Re-render canvas
             this.resetCanvas();
             this.draw();
@@ -163,6 +173,12 @@ export class PDFPageView {
         this.textLayerRendered = false;
         this.textDivs = [];
         this.textContentItemsStr = [];
+        // Clear annotation layer
+        if (this.annotationLayerBuilder) {
+            this.annotationLayerBuilder.destroy();
+            this.annotationLayerBuilder = null;
+        }
+        this.annotationLayerRendered = false;
         // Show loading
         if (this.loadingDiv) {
             this.loadingDiv.style.display = '';
@@ -205,6 +221,10 @@ export class PDFPageView {
             if (!this.textLayerRendered) {
                 await this.renderTextLayer();
             }
+            // Render annotation layer (only if not already rendered)
+            if (!this.annotationLayerRendered) {
+                await this.renderAnnotationLayer();
+            }
             this.renderingState = RenderingStates.FINISHED;
             this.eventBus.dispatch('pagerendered', {
                 pageNumber: this.id,
@@ -271,6 +291,37 @@ export class PDFPageView {
             console.error('Error rendering text layer:', error);
         }
     }
+    async renderAnnotationLayer() {
+        if (!this.pdfPage || !this.linkService) {
+            return;
+        }
+        // If annotation layer already rendered, just update it
+        if (this.annotationLayerRendered && this.annotationLayerBuilder) {
+            this.annotationLayerBuilder.update(this.viewport);
+            return;
+        }
+        try {
+            this.annotationLayerBuilder = new AnnotationLayerBuilder({
+                pdfPage: this.pdfPage,
+                linkService: this.linkService,
+                renderForms: true,
+                onAppend: (div) => {
+                    this.div.appendChild(div);
+                }
+            });
+            await this.annotationLayerBuilder.render({
+                viewport: this.viewport
+            });
+            this.annotationLayerRendered = true;
+            this.eventBus.dispatch('annotationlayerrendered', {
+                pageNumber: this.id,
+                source: this
+            });
+        }
+        catch (error) {
+            console.error('Error rendering annotation layer:', error);
+        }
+    }
     cancelRendering() {
         if (this.renderTask) {
             this.renderTask.cancel();

package/dist/pdf-viewer/PDFViewerCore.d.ts

@@ -22,6 +22,7 @@ export declare class PDFViewerCore {
     private scrollAbortController;
     private renderingQueue;
     private isRendering;
+    private linkService;
     constructor(options: PDFViewerOptions);
     private setupScrollListener;
     setDocument(pdfDocument: PDFDocumentProxy): Promise<void>;

package/dist/pdf-viewer/PDFViewerCore.js

@@ -14,6 +14,7 @@
  */
 import { EventBus } from './EventBus.js';
 import { PDFPageView, RenderingStates } from './PDFPageView.js';
+import { SimpleLinkService } from './SimpleLinkService.js';
 const DEFAULT_SCALE = 1.0;
 const MIN_SCALE = 0.1;
 const MAX_SCALE = 10.0;
@@ -31,6 +32,8 @@ export class PDFViewerCore {
     scrollAbortController = null;
     renderingQueue = new Set();
     isRendering = false;
+    // Link service for annotation navigation
+    linkService;
     constructor(options) {
         this.container = options.container;
         this.eventBus = options.eventBus ?? new EventBus();
@@ -40,6 +43,10 @@ export class PDFViewerCore {
         this.viewer = document.createElement('div');
         this.viewer.className = 'pdfViewer';
         this.container.appendChild(this.viewer);
+        // Create link service for annotation navigation
+        this.linkService = new SimpleLinkService({
+            eventBus: this.eventBus
+        });
         // Setup scroll listener for lazy rendering
         this.setupScrollListener();
     }
@@ -61,6 +68,9 @@ export class PDFViewerCore {
         this.cleanup();
         this.pdfDocument = pdfDocument;
         const numPages = pdfDocument.numPages;
+        // Setup link service with document and viewer
+        this.linkService.setDocument(pdfDocument);
+        this.linkService.setViewer(this);
         // Create page views
         for (let i = 1; i <= numPages; i++) {
             const page = await pdfDocument.getPage(i);
@@ -74,7 +84,8 @@ export class PDFViewerCore {
                 defaultViewport: viewport,
                 eventBus: this.eventBus,
                 scale: this.currentScale,
-                rotation: this.currentRotation
+                rotation: this.currentRotation,
+                linkService: this.linkService
             });
             pageView.setPdfPage(page);
             this.pages.push(pageView);

package/dist/pdf-viewer/SimpleLinkService.d.ts

@@ -0,0 +1,74 @@
+/**
+ * SimpleLinkService - Provides PDF navigation for annotation links.
+ * Adapted from PDF.js pdf_link_service.js
+ */
+import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import type { EventBus } from './EventBus.js';
+export interface SimpleLinkServiceOptions {
+    eventBus: EventBus;
+    externalLinkTarget?: number;
+    externalLinkRel?: string;
+}
+export declare const LinkTarget: {
+    readonly NONE: 0;
+    readonly SELF: 1;
+    readonly BLANK: 2;
+    readonly PARENT: 3;
+    readonly TOP: 4;
+};
+export declare class SimpleLinkService {
+    readonly eventBus: EventBus;
+    private externalLinkTarget;
+    private externalLinkRel;
+    private pdfDocument;
+    private pdfViewer;
+    externalLinkEnabled: boolean;
+    constructor(options: SimpleLinkServiceOptions);
+    setDocument(pdfDocument: PDFDocumentProxy | null): void;
+    setViewer(pdfViewer: {
+        scrollToPage: (page: number) => void;
+        pagesCount: number;
+    }): void;
+    get pagesCount(): number;
+    get page(): number;
+    set page(value: number);
+    get rotation(): number;
+    set rotation(_value: number);
+    get isInPresentationMode(): boolean;
+    /**
+     * Navigate to a PDF destination (internal link).
+     */
+    goToDestination(dest: unknown): Promise<void>;
+    /**
+     * Navigate to a specific page.
+     */
+    goToPage(pageNumber: number): void;
+    /**
+     * Get a hash string for a destination (for href).
+     */
+    getDestinationHash(dest: unknown): string;
+    /**
+     * Get anchor URL with proper prefix.
+     */
+    getAnchorUrl(anchor: string): string;
+    /**
+     * Add attributes to external link elements.
+     */
+    addLinkAttributes(link: HTMLAnchorElement, url: string, newWindow?: boolean): void;
+    /**
+     * Execute a named action (e.g., Print, GoBack).
+     */
+    executeNamedAction(action: string): void;
+    /**
+     * Execute a SetOCGState action.
+     */
+    executeSetOCGState(_action: unknown): void;
+    /**
+     * Navigate to specific coordinates on a page.
+     */
+    goToXY(pageNumber: number, _x: number, _y: number): void;
+    /**
+     * Set hash for navigation.
+     */
+    setHash(_hash: string): void;
+}

package/dist/pdf-viewer/SimpleLinkService.js

@@ -0,0 +1,212 @@
+/* Copyright 2024 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const DEFAULT_LINK_REL = 'noopener noreferrer nofollow';
+export const LinkTarget = {
+    NONE: 0,
+    SELF: 1,
+    BLANK: 2,
+    PARENT: 3,
+    TOP: 4
+};
+export class SimpleLinkService {
+    eventBus;
+    externalLinkTarget;
+    externalLinkRel;
+    pdfDocument = null;
+    pdfViewer = null;
+    externalLinkEnabled = true;
+    constructor(options) {
+        this.eventBus = options.eventBus;
+        this.externalLinkTarget = options.externalLinkTarget ?? LinkTarget.BLANK;
+        this.externalLinkRel = options.externalLinkRel ?? DEFAULT_LINK_REL;
+    }
+    setDocument(pdfDocument) {
+        this.pdfDocument = pdfDocument;
+    }
+    setViewer(pdfViewer) {
+        this.pdfViewer = pdfViewer;
+    }
+    get pagesCount() {
+        return this.pdfViewer?.pagesCount ?? 0;
+    }
+    get page() {
+        return this.pdfViewer ? 1 : 0;
+    }
+    set page(value) {
+        this.goToPage(value);
+    }
+    get rotation() {
+        return 0;
+    }
+    set rotation(_value) {
+        // Not implemented - rotation is handled by viewer
+    }
+    get isInPresentationMode() {
+        return false;
+    }
+    /**
+     * Navigate to a PDF destination (internal link).
+     */
+    async goToDestination(dest) {
+        if (!this.pdfDocument || !this.pdfViewer) {
+            return;
+        }
+        let explicitDest;
+        if (typeof dest === 'string') {
+            // Named destination - look it up
+            explicitDest = (await this.pdfDocument.getDestination(dest));
+            if (!explicitDest) {
+                console.warn(`SimpleLinkService: "${dest}" is not a valid destination.`);
+                return;
+            }
+        }
+        else if (Array.isArray(dest)) {
+            explicitDest = dest;
+        }
+        else {
+            console.warn('SimpleLinkService: Invalid destination:', dest);
+            return;
+        }
+        // Extract page reference from destination
+        const destRef = explicitDest[0];
+        let pageNumber;
+        if (typeof destRef === 'object' && destRef !== null && 'num' in destRef && 'gen' in destRef) {
+            // It's a reference object, resolve to page index
+            pageNumber =
+                (await this.pdfDocument.getPageIndex(destRef)) + 1;
+        }
+        else if (typeof destRef === 'number') {
+            // It's already a page number (0-indexed)
+            pageNumber = destRef + 1;
+        }
+        else {
+            console.warn('SimpleLinkService: Invalid destination reference:', destRef);
+            return;
+        }
+        if (pageNumber < 1 || pageNumber > this.pagesCount) {
+            console.warn(`SimpleLinkService: Page ${pageNumber} out of range.`);
+            return;
+        }
+        this.pdfViewer.scrollToPage(pageNumber);
+        this.eventBus.dispatch('navigateto', { dest: explicitDest, pageNumber });
+    }
+    /**
+     * Navigate to a specific page.
+     */
+    goToPage(pageNumber) {
+        if (!this.pdfViewer) {
+            return;
+        }
+        if (pageNumber < 1 || pageNumber > this.pagesCount) {
+            console.warn(`SimpleLinkService: Page ${pageNumber} out of range.`);
+            return;
+        }
+        this.pdfViewer.scrollToPage(pageNumber);
+        this.eventBus.dispatch('pagechanged', { pageNumber });
+    }
+    /**
+     * Get a hash string for a destination (for href).
+     */
+    getDestinationHash(dest) {
+        if (typeof dest === 'string') {
+            return `#${escape(dest)}`;
+        }
+        if (Array.isArray(dest)) {
+            return `#${escape(JSON.stringify(dest))}`;
+        }
+        return '#';
+    }
+    /**
+     * Get anchor URL with proper prefix.
+     */
+    getAnchorUrl(anchor) {
+        return anchor;
+    }
+    /**
+     * Add attributes to external link elements.
+     */
+    addLinkAttributes(link, url, newWindow = false) {
+        if (!url || typeof url !== 'string') {
+            return;
+        }
+        link.href = url;
+        link.rel = this.externalLinkRel;
+        if (newWindow || this.externalLinkTarget === LinkTarget.BLANK) {
+            link.target = '_blank';
+        }
+        else if (this.externalLinkTarget === LinkTarget.SELF) {
+            link.target = '_self';
+        }
+        else if (this.externalLinkTarget === LinkTarget.PARENT) {
+            link.target = '_parent';
+        }
+        else if (this.externalLinkTarget === LinkTarget.TOP) {
+            link.target = '_top';
+        }
+    }
+    /**
+     * Execute a named action (e.g., Print, GoBack).
+     */
+    executeNamedAction(action) {
+        switch (action) {
+            case 'GoBack':
+                history.back();
+                break;
+            case 'GoForward':
+                history.forward();
+                break;
+            case 'NextPage':
+                this.eventBus.dispatch('nextpage', {});
+                break;
+            case 'PrevPage':
+                this.eventBus.dispatch('previouspage', {});
+                break;
+            case 'LastPage':
+                if (this.pdfViewer) {
+                    this.goToPage(this.pagesCount);
+                }
+                break;
+            case 'FirstPage':
+                this.goToPage(1);
+                break;
+            case 'Print':
+                this.eventBus.dispatch('print', {});
+                break;
+            default:
+                console.warn(`SimpleLinkService: Unknown named action "${action}".`);
+        }
+    }
+    /**
+     * Execute a SetOCGState action.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    executeSetOCGState(_action) {
+        // Not implemented - optional content is not supported
+    }
+    /**
+     * Navigate to specific coordinates on a page.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    goToXY(pageNumber, _x, _y) {
+        this.goToPage(pageNumber);
+    }
+    /**
+     * Set hash for navigation.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setHash(_hash) {
+        // Not implemented - hash navigation not supported
+    }
+}

package/dist/pdf-viewer/renderer-styles.d.ts

@@ -2,4 +2,4 @@
  * PDF Renderer Styles - Shadow DOM Isolated
  * This is a derivative work based on PDF.js text_layer_builder.css
  */
-export declare const rendererStyles = "\n/* CSS Custom Properties with defaults */\n.pdf-renderer-container {\n\t--pdf-background-color: #e8e8e8;\n\t--pdf-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);\n\t--pdf-scrollbar-track-color: #f1f1f1;\n\t--pdf-scrollbar-thumb-color: #c1c1c1;\n\t--pdf-scrollbar-thumb-hover-color: #a1a1a1;\n\t--pdf-scrollbar-width: 10px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--pdf-background-color);\n\toverflow: hidden;\n}\n\n/* Scroll container */\n.pdf-scroll-container {\n\tflex: 1;\n\toverflow: auto;\n\tposition: relative;\n\tbackground-color: var(--pdf-background-color);\n}\n\n/* Custom scrollbar styling */\n.pdf-scroll-container::-webkit-scrollbar {\n\twidth: var(--pdf-scrollbar-width);\n\theight: var(--pdf-scrollbar-width);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-track {\n\tbackground: var(--pdf-scrollbar-track-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb {\n\tbackground: var(--pdf-scrollbar-thumb-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--pdf-scrollbar-thumb-hover-color);\n}\n\n/* Firefox scrollbar */\n.pdf-scroll-container {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--pdf-scrollbar-thumb-color) var(--pdf-scrollbar-track-color);\n}\n\n/* Viewer - dynamically created */\n.pdfViewer {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tpadding: 20px;\n\tgap: 16px;\n}\n\n/* Page - dynamically created with CSS variables for text layer */\n.page {\n\t--user-unit: 1;\n\t--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));\n\t--scale-round-x: 1px;\n\t--scale-round-y: 1px;\n\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: var(--pdf-page-shadow);\n\tborder-radius: 2px;\n\tmargin: 0;\n\tdirection: ltr;\n}\n\n.page .loadingIcon {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tcolor: #666;\n\tfont-size: 14px;\n}\n\n.page .canvasWrapper {\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\tz-index: 0;\n}\n\n.page .pdf-canvas {\n\tdisplay: block;\n}\n\n/* Text layer - essential styles from PDF.js */\n.textLayer {\n\tposition: absolute;\n\ttext-align: initial;\n\tinset: 0;\n\toverflow: clip;\n\topacity: 1;\n\tline-height: 1;\n\t-webkit-text-size-adjust: none;\n\t-moz-text-size-adjust: none;\n\ttext-size-adjust: none;\n\tforced-color-adjust: none;\n\ttransform-origin: 0 0;\n\tcaret-color: CanvasText;\n\tz-index: 2;\n}\n\n/* Text layer rotation transforms */\n.textLayer[data-main-rotation='90'] {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.textLayer[data-main-rotation='180'] {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n\n.textLayer[data-main-rotation='270'] {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n\n.textLayer :is(span, br) {\n\tcolor: transparent;\n\tposition: absolute;\n\twhite-space: pre;\n\tcursor: text;\n\ttransform-origin: 0% 0%;\n}\n\n.textLayer > :not(.markedContent),\n.textLayer .markedContent span:not(.markedContent) {\n\tz-index: 1;\n}\n\n.textLayer span.markedContent {\n\ttop: 0;\n\theight: 0;\n}\n\n.textLayer ::-moz-selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer ::selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer br::-moz-selection,\n.textLayer br::selection {\n\tbackground: transparent;\n}\n\n/* Search highlights */\n.textLayer .highlight {\n\tmargin: -1px;\n\tpadding: 1px;\n\tbackground-color: rgba(255, 255, 0, 0.4);\n\tborder-radius: 4px;\n}\n\n.textLayer .highlight.appended {\n\tposition: initial;\n}\n\n.textLayer .highlight.selected {\n\tbackground-color: rgba(255, 128, 0, 0.6);\n}\n\n.textLayer .highlight.begin {\n\tborder-radius: 4px 0 0 4px;\n}\n\n.textLayer .highlight.end {\n\tborder-radius: 0 4px 4px 0;\n}\n\n.textLayer .highlight.middle {\n\tborder-radius: 0;\n}\n";
+export declare const rendererStyles = "\n/* CSS Custom Properties with defaults */\n.pdf-renderer-container {\n\t--pdf-background-color: #e8e8e8;\n\t--pdf-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);\n\t--pdf-scrollbar-track-color: #f1f1f1;\n\t--pdf-scrollbar-thumb-color: #c1c1c1;\n\t--pdf-scrollbar-thumb-hover-color: #a1a1a1;\n\t--pdf-scrollbar-width: 10px;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: var(--pdf-background-color);\n\toverflow: hidden;\n}\n\n/* Scroll container */\n.pdf-scroll-container {\n\tflex: 1;\n\toverflow: auto;\n\tposition: relative;\n\tbackground-color: var(--pdf-background-color);\n}\n\n/* Custom scrollbar styling */\n.pdf-scroll-container::-webkit-scrollbar {\n\twidth: var(--pdf-scrollbar-width);\n\theight: var(--pdf-scrollbar-width);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-track {\n\tbackground: var(--pdf-scrollbar-track-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb {\n\tbackground: var(--pdf-scrollbar-thumb-color);\n\tborder-radius: calc(var(--pdf-scrollbar-width) / 2);\n}\n\n.pdf-scroll-container::-webkit-scrollbar-thumb:hover {\n\tbackground: var(--pdf-scrollbar-thumb-hover-color);\n}\n\n/* Firefox scrollbar */\n.pdf-scroll-container {\n\tscrollbar-width: thin;\n\tscrollbar-color: var(--pdf-scrollbar-thumb-color) var(--pdf-scrollbar-track-color);\n}\n\n/* Viewer - dynamically created */\n.pdfViewer {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tpadding: 20px;\n\tgap: 16px;\n}\n\n/* Page - dynamically created with CSS variables for text layer */\n.page {\n\t--user-unit: 1;\n\t--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));\n\t--scale-round-x: 1px;\n\t--scale-round-y: 1px;\n\n\tposition: relative;\n\tbackground-color: white;\n\tbox-shadow: var(--pdf-page-shadow);\n\tborder-radius: 2px;\n\tmargin: 0;\n\tdirection: ltr;\n}\n\n.page .loadingIcon {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tcolor: #666;\n\tfont-size: 14px;\n}\n\n.page .canvasWrapper {\n\tposition: absolute;\n\tinset: 0;\n\toverflow: hidden;\n\tz-index: 0;\n}\n\n.page .pdf-canvas {\n\tdisplay: block;\n}\n\n/* Text layer - essential styles from PDF.js */\n.textLayer {\n\tposition: absolute;\n\ttext-align: initial;\n\tinset: 0;\n\toverflow: clip;\n\topacity: 1;\n\tline-height: 1;\n\t-webkit-text-size-adjust: none;\n\t-moz-text-size-adjust: none;\n\ttext-size-adjust: none;\n\tforced-color-adjust: none;\n\ttransform-origin: 0 0;\n\tcaret-color: CanvasText;\n\tz-index: 2;\n}\n\n/* Text layer rotation transforms */\n.textLayer[data-main-rotation='90'] {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.textLayer[data-main-rotation='180'] {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n\n.textLayer[data-main-rotation='270'] {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n\n.textLayer :is(span, br) {\n\tcolor: transparent;\n\tposition: absolute;\n\twhite-space: pre;\n\tcursor: text;\n\ttransform-origin: 0% 0%;\n}\n\n.textLayer > :not(.markedContent),\n.textLayer .markedContent span:not(.markedContent) {\n\tz-index: 1;\n}\n\n.textLayer span.markedContent {\n\ttop: 0;\n\theight: 0;\n}\n\n.textLayer ::-moz-selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer ::selection {\n\tbackground: rgba(0, 0, 255, 0.25);\n}\n\n.textLayer br::-moz-selection,\n.textLayer br::selection {\n\tbackground: transparent;\n}\n\n/* Search highlights */\n.textLayer .highlight {\n\tmargin: -1px;\n\tpadding: 1px;\n\tbackground-color: rgba(255, 255, 0, 0.4);\n\tborder-radius: 4px;\n}\n\n.textLayer .highlight.appended {\n\tposition: initial;\n}\n\n.textLayer .highlight.selected {\n\tbackground-color: rgba(255, 128, 0, 0.6);\n}\n\n.textLayer .highlight.begin {\n\tborder-radius: 4px 0 0 4px;\n}\n\n.textLayer .highlight.end {\n\tborder-radius: 0 4px 4px 0;\n}\n\n.textLayer .highlight.middle {\n\tborder-radius: 0;\n}\n\n/* Annotation Layer - for links, form widgets, popups */\n.annotationLayer {\n\t--annotation-unfocused-field-background: url(\"data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>\");\n\t--input-focus-border-color: Highlight;\n\t--input-focus-outline: 1px solid Canvas;\n\t--input-unfocused-border-color: transparent;\n\t--input-disabled-border-color: transparent;\n\t--input-hover-border-color: black;\n\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tpointer-events: none;\n\ttransform-origin: 0 0;\n\tz-index: 3;\n}\n\n.annotationLayer[data-main-rotation='90'] .norotate {\n\ttransform: rotate(270deg) translateX(-100%);\n}\n.annotationLayer[data-main-rotation='180'] .norotate {\n\ttransform: rotate(180deg) translate(-100%, -100%);\n}\n.annotationLayer[data-main-rotation='270'] .norotate {\n\ttransform: rotate(90deg) translateY(-100%);\n}\n\n.annotationLayer section {\n\tposition: absolute;\n\ttext-align: initial;\n\tpointer-events: auto;\n\tbox-sizing: border-box;\n\ttransform-origin: 0 0;\n\tuser-select: none;\n}\n\n/* Link annotations */\n.annotationLayer .linkAnnotation > a,\n.annotationLayer .buttonWidgetAnnotation.pushButton > a {\n\tposition: absolute;\n\tfont-size: 1em;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n\n.annotationLayer .linkAnnotation > a:hover,\n.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {\n\topacity: 0.2;\n\tbackground-color: rgb(255 255 0);\n\tbox-shadow: 0 2px 10px rgb(255 255 0);\n}\n\n.annotationLayer .linkAnnotation.hasBorder:hover {\n\tbackground-color: rgb(255 255 0 / 0.2);\n}\n\n/* Text annotations (comments/notes) */\n.annotationLayer .textAnnotation img {\n\tposition: absolute;\n\tcursor: pointer;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tleft: 0;\n}\n\n/* Form widgets */\n.annotationLayer .textWidgetAnnotation input,\n.annotationLayer .textWidgetAnnotation textarea,\n.annotationLayer .choiceWidgetAnnotation select,\n.annotationLayer .buttonWidgetAnnotation.checkBox input,\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tbackground-image: var(--annotation-unfocused-field-background);\n\tborder: 2px solid var(--input-unfocused-border-color);\n\tbox-sizing: border-box;\n\tfont: calc(9px * var(--total-scale-factor)) sans-serif;\n\theight: 100%;\n\tmargin: 0;\n\tvertical-align: top;\n\twidth: 100%;\n}\n\n.annotationLayer .textWidgetAnnotation input:hover,\n.annotationLayer .textWidgetAnnotation textarea:hover,\n.annotationLayer .choiceWidgetAnnotation select:hover,\n.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,\n.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {\n\tborder: 2px solid var(--input-hover-border-color);\n}\n\n.annotationLayer .textWidgetAnnotation input:focus,\n.annotationLayer .textWidgetAnnotation textarea:focus,\n.annotationLayer .choiceWidgetAnnotation select:focus {\n\tbackground: none;\n\tborder: 2px solid var(--input-focus-border-color);\n\tborder-radius: 2px;\n\toutline: var(--input-focus-outline);\n}\n\n.annotationLayer .textWidgetAnnotation textarea {\n\tresize: none;\n}\n\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tborder-radius: 50%;\n}\n\n.annotationLayer .buttonWidgetAnnotation.checkBox input,\n.annotationLayer .buttonWidgetAnnotation.radioButton input {\n\tappearance: none;\n}\n\n/* Popup annotations */\n.annotationLayer .popupAnnotation {\n\tposition: absolute;\n\tfont-size: calc(9px * var(--total-scale-factor));\n\tpointer-events: none;\n\twidth: max-content;\n\tmax-width: 45%;\n\theight: auto;\n}\n\n.annotationLayer .popup {\n\tbackground-color: rgb(255 255 153);\n\tbox-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136);\n\tborder-radius: calc(2px * var(--total-scale-factor));\n\toutline: 1.5px solid rgb(255 255 74);\n\tpadding: calc(6px * var(--total-scale-factor));\n\tcursor: pointer;\n\tfont: message-box;\n\twhite-space: normal;\n\tword-wrap: break-word;\n\tpointer-events: auto;\n}\n\n.annotationLayer .popup > .header {\n\tdisplay: inline-block;\n}\n\n.annotationLayer .popup > .header > .title {\n\tfont-weight: bold;\n}\n\n.annotationLayer .popupContent {\n\tborder-top: 1px solid rgb(51 51 51);\n\tmargin-top: calc(2px * var(--total-scale-factor));\n\tpadding-top: calc(2px * var(--total-scale-factor));\n}\n\n.annotationLayer .popupTriggerArea {\n\tcursor: pointer;\n}\n";

package/dist/pdf-viewer/renderer-styles.js

@@ -200,4 +200,159 @@ export const rendererStyles = `
 .textLayer .highlight.middle {
 	border-radius: 0;
 }
+
+/* Annotation Layer - for links, form widgets, popups */
+.annotationLayer {
+	--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+	--input-focus-border-color: Highlight;
+	--input-focus-outline: 1px solid Canvas;
+	--input-unfocused-border-color: transparent;
+	--input-disabled-border-color: transparent;
+	--input-hover-border-color: black;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	transform-origin: 0 0;
+	z-index: 3;
+}
+
+.annotationLayer[data-main-rotation='90'] .norotate {
+	transform: rotate(270deg) translateX(-100%);
+}
+.annotationLayer[data-main-rotation='180'] .norotate {
+	transform: rotate(180deg) translate(-100%, -100%);
+}
+.annotationLayer[data-main-rotation='270'] .norotate {
+	transform: rotate(90deg) translateY(-100%);
+}
+
+.annotationLayer section {
+	position: absolute;
+	text-align: initial;
+	pointer-events: auto;
+	box-sizing: border-box;
+	transform-origin: 0 0;
+	user-select: none;
+}
+
+/* Link annotations */
+.annotationLayer .linkAnnotation > a,
+.annotationLayer .buttonWidgetAnnotation.pushButton > a {
+	position: absolute;
+	font-size: 1em;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.annotationLayer .linkAnnotation > a:hover,
+.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
+	opacity: 0.2;
+	background-color: rgb(255 255 0);
+	box-shadow: 0 2px 10px rgb(255 255 0);
+}
+
+.annotationLayer .linkAnnotation.hasBorder:hover {
+	background-color: rgb(255 255 0 / 0.2);
+}
+
+/* Text annotations (comments/notes) */
+.annotationLayer .textAnnotation img {
+	position: absolute;
+	cursor: pointer;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* Form widgets */
+.annotationLayer .textWidgetAnnotation input,
+.annotationLayer .textWidgetAnnotation textarea,
+.annotationLayer .choiceWidgetAnnotation select,
+.annotationLayer .buttonWidgetAnnotation.checkBox input,
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+	background-image: var(--annotation-unfocused-field-background);
+	border: 2px solid var(--input-unfocused-border-color);
+	box-sizing: border-box;
+	font: calc(9px * var(--total-scale-factor)) sans-serif;
+	height: 100%;
+	margin: 0;
+	vertical-align: top;
+	width: 100%;
+}
+
+.annotationLayer .textWidgetAnnotation input:hover,
+.annotationLayer .textWidgetAnnotation textarea:hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
+	border: 2px solid var(--input-hover-border-color);
+}
+
+.annotationLayer .textWidgetAnnotation input:focus,
+.annotationLayer .textWidgetAnnotation textarea:focus,
+.annotationLayer .choiceWidgetAnnotation select:focus {
+	background: none;
+	border: 2px solid var(--input-focus-border-color);
+	border-radius: 2px;
+	outline: var(--input-focus-outline);
+}
+
+.annotationLayer .textWidgetAnnotation textarea {
+	resize: none;
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+	border-radius: 50%;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input,
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+	appearance: none;
+}
+
+/* Popup annotations */
+.annotationLayer .popupAnnotation {
+	position: absolute;
+	font-size: calc(9px * var(--total-scale-factor));
+	pointer-events: none;
+	width: max-content;
+	max-width: 45%;
+	height: auto;
+}
+
+.annotationLayer .popup {
+	background-color: rgb(255 255 153);
+	box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136);
+	border-radius: calc(2px * var(--total-scale-factor));
+	outline: 1.5px solid rgb(255 255 74);
+	padding: calc(6px * var(--total-scale-factor));
+	cursor: pointer;
+	font: message-box;
+	white-space: normal;
+	word-wrap: break-word;
+	pointer-events: auto;
+}
+
+.annotationLayer .popup > .header {
+	display: inline-block;
+}
+
+.annotationLayer .popup > .header > .title {
+	font-weight: bold;
+}
+
+.annotationLayer .popupContent {
+	border-top: 1px solid rgb(51 51 51);
+	margin-top: calc(2px * var(--total-scale-factor));
+	padding-top: calc(2px * var(--total-scale-factor));
+}
+
+.annotationLayer .popupTriggerArea {
+	cursor: pointer;
+}
 `;

package/dist/pdf-viewer/styles.css

@@ -1,4 +1,4 @@
-/* PDF Viewer Styles - Sandboxed for Shadow DOM */
+/* PDF Viewer Styles - For PdfViewerInner (non-Shadow DOM) */
 
 /* Container */
 .pdf-viewer-container {
@@ -128,142 +128,6 @@
 	background-color: #e8e8e8;
 }
 
-/* Viewer - dynamically created */
-.pdfViewer {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding: 20px;
-	gap: 16px;
-}
-
-/* Page - dynamically created with CSS variables for text layer */
-.page {
-	--user-unit: 1;
-	--total-scale-factor: calc(var(--scale-factor, 1) * var(--user-unit));
-	--scale-round-x: 1px;
-	--scale-round-y: 1px;
-
-	position: relative;
-	background-color: white;
-	box-shadow:
-		0 2px 8px rgba(0, 0, 0, 0.12),
-		0 1px 3px rgba(0, 0, 0, 0.08);
-	border-radius: 2px;
-	margin: 0;
-	direction: ltr;
-}
-
-.page .loadingIcon {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	color: #666;
-	font-size: 14px;
-}
-
-.page .canvasWrapper {
-	position: absolute;
-	inset: 0;
-	overflow: hidden;
-	z-index: 0;
-}
-
-.page .pdf-canvas {
-	display: block;
-}
-
-/* Text layer - essential styles from PDF.js */
-.textLayer {
-	position: absolute;
-	text-align: initial;
-	inset: 0;
-	overflow: clip;
-	opacity: 1;
-	line-height: 1;
-	-webkit-text-size-adjust: none;
-	-moz-text-size-adjust: none;
-	text-size-adjust: none;
-	forced-color-adjust: none;
-	transform-origin: 0 0;
-	caret-color: CanvasText;
-	z-index: 2;
-}
-
-/* Text layer rotation transforms - text is rendered in raw page coordinates,
-   then rotated via CSS to match the canvas orientation */
-.textLayer[data-main-rotation='90'] {
-	transform: rotate(90deg) translateY(-100%);
-}
-
-.textLayer[data-main-rotation='180'] {
-	transform: rotate(180deg) translate(-100%, -100%);
-}
-
-.textLayer[data-main-rotation='270'] {
-	transform: rotate(270deg) translateX(-100%);
-}
-
-.textLayer :is(span, br) {
-	color: transparent;
-	position: absolute;
-	white-space: pre;
-	cursor: text;
-	transform-origin: 0% 0%;
-}
-
-.textLayer > :not(.markedContent),
-.textLayer .markedContent span:not(.markedContent) {
-	z-index: 1;
-}
-
-.textLayer span.markedContent {
-	top: 0;
-	height: 0;
-}
-
-.textLayer ::-moz-selection {
-	background: rgba(0, 0, 255, 0.25);
-}
-
-.textLayer ::selection {
-	background: rgba(0, 0, 255, 0.25);
-}
-
-.textLayer br::-moz-selection,
-.textLayer br::selection {
-	background: transparent;
-}
-
-/* Search highlights */
-.textLayer .highlight {
-	margin: -1px;
-	padding: 1px;
-	background-color: rgba(255, 255, 0, 0.4);
-	border-radius: 4px;
-}
-
-.textLayer .highlight.appended {
-	position: initial;
-}
-
-.textLayer .highlight.selected {
-	background-color: rgba(255, 128, 0, 0.6);
-}
-
-.textLayer .highlight.begin {
-	border-radius: 4px 0 0 4px;
-}
-
-.textLayer .highlight.end {
-	border-radius: 0 4px 4px 0;
-}
-
-.textLayer .highlight.middle {
-	border-radius: 0;
-}
-
 /* Loading state */
 .pdf-loading,
 .pdf-error {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-pdf-view",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A modern, modular PDF viewer component for Svelte 5. Built on PDF.js with TypeScript support",
   "author": "Louis Li",
   "license": "Apache-2.0",