epochs-pdf 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,416 @@
+import { JSX } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+/** Add / edit free text on the page. */
+export declare const AddText: ToolbarToolComponent;
+
+export declare type AlignItems = "flex-start" | "center" | "flex-end" | "stretch";
+
+export declare const ALL_TOOLBAR_TOOLS: readonly [ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent, ToolbarToolComponent];
+
+/** Clear all markup. */
+export declare const Clear: ToolbarToolComponent;
+
+/** Default left / right toolbar layout. */
+export declare const DEFAULT_TOOLBAR_LAYOUT: [
+ToolbarToolComponent[],
+ToolbarToolComponent[]
+];
+
+/** Root document container. Must wrap one or more `<Page>` elements. */
+declare function Document_2(_props: DocumentProps): null;
+
+declare namespace Document_2 {
+    var displayName: string;
+}
+export { Document_2 as Document }
+
+export declare interface DocumentProps {
+    title?: string;
+    author?: string;
+    subject?: string;
+    creator?: string;
+    children?: ReactNode;
+}
+
+/** Download PDF (with markup when present). */
+export declare const Download: ToolbarToolComponent;
+
+/** Trigger a browser download of the generated PDF. */
+export declare function download(element: ReactElement, filename?: string): void;
+
+/** Erase markup annotations. */
+export declare const Erase: ToolbarToolComponent;
+
+export declare type FlexDirection = "column" | "row";
+
+/** Convert a solid hex into the CSS color used for drawing markup. */
+export declare function hexToMarkupColor(hex: string, kind: MarkupKind, alpha?: number): string;
+
+/** Highlight text markup tool. */
+declare const Highlight_2: ToolbarToolComponent;
+export { Highlight_2 as Highlight }
+
+export declare const HIGHLIGHT_PRESETS: MarkupColorOption[];
+
+/** Image placeholder (binary embedding planned). */
+declare function Image_2(_props: ImageProps): null;
+
+declare namespace Image_2 {
+    var displayName: string;
+}
+export { Image_2 as Image }
+
+export declare interface ImageProps {
+    src: string;
+    style?: Style;
+}
+
+export declare type JustifyContent = "flex-start" | "center" | "flex-end" | "space-between" | "space-around";
+
+/** Linked text. */
+export declare function Link(_props: LinkProps): null;
+
+export declare namespace Link {
+    var displayName: string;
+}
+
+export declare interface LinkProps {
+    src: string;
+    style?: Style;
+    children?: ReactNode;
+}
+
+export declare interface MarkupAnnotation {
+    id: string;
+    pageNumber: number;
+    kind: MarkupKind;
+    color: string;
+    rects: MarkupRect[];
+    text?: string;
+}
+
+export declare interface MarkupColorOption {
+    id: string;
+    label: string;
+    /** Solid hex used by the swatch / color input. */
+    hex: string;
+}
+
+export declare type MarkupKind = "highlight" | "underline" | "redact";
+
+export declare interface MarkupRect {
+    /** Left edge in page CSS pixels at scale = 1. */
+    x: number;
+    /** Top edge in page CSS pixels at scale = 1. */
+    y: number;
+    w: number;
+    h: number;
+}
+
+export declare type MarkupTool = "none" | MarkupKind | "erase" | "sign" | "text";
+
+/** Previous / next page and page number. */
+export declare const Navigation: ToolbarToolComponent;
+
+/** Open PDF in a new tab. */
+export declare const Open: ToolbarToolComponent;
+
+/** A single PDF page. */
+export declare function Page(_props: PageProps): null;
+
+export declare namespace Page {
+    var displayName: string;
+}
+
+export declare const PAGE_SIZES: Record<Exclude<PageSize, [number, number]>, [number, number]>;
+
+export declare interface PageProps {
+    size?: PageSize;
+    orientation?: "portrait" | "landscape";
+    style?: Style;
+    wrap?: boolean;
+    children?: ReactNode;
+}
+
+export declare type PageSize = "A4" | "LETTER" | "LEGAL" | [number, number];
+
+/** Render a `<Document>` tree to a `Uint8Array` PDF. */
+export declare function pdf(element: ReactElement): Uint8Array;
+
+export declare type PdfSource = string | ArrayBuffer | Uint8Array | Blob;
+
+declare function PdfViewer({ file, fileUrl, baseUrl, fetchOptions, height, title, initialScale, withThumbnails, thumbnailWidth, maxThumbnails, className, workerSrc, enableToolbar, enableThumbnails, enableNavigation, enableZoom, enableRotate, enableReload, enablePrint, enableOpen, enableDownload, enableMarkup, enableHighlight, enableUnderline, enableSignature, enableText, enableErase, enableClear, signatureFields, textFields, onSignatureComplete, onFieldValueComplete, openSignaturePad: externalOpenSignaturePad, onSignaturePadClose, onSubmit, submitLabel, }: PdfViewerProps): JSX.Element;
+export { PdfViewer }
+export default PdfViewer;
+
+export declare interface PdfViewerProps {
+    /** PDF path, absolute URL, blob URL, data URL, or binary source. */
+    file?: PdfSource;
+    /** Alias for `file` when passing a URL string. */
+    fileUrl?: string;
+    /** Optional base URL prepended to relative paths. */
+    baseUrl?: string;
+    /** Extra fetch options (e.g. auth headers) for remote URLs. */
+    fetchOptions?: RequestInit;
+    height?: string | number;
+    title?: string;
+    initialScale?: number;
+    /** Show thumbnails sidebar initially. Default false. */
+    withThumbnails?: boolean;
+    thumbnailWidth?: number;
+    maxThumbnails?: number;
+    className?: string;
+    workerSrc?: string;
+    /**
+     * Show the viewer toolbar.
+     * - `true` — default left/right layout (all tools)
+     * - `[[left…], [right…]]` — custom left / right tool groups
+     * - omit / `false` — hide toolbar
+     */
+    enableToolbar?: boolean | ToolbarLayout;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableThumbnails?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableNavigation?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableZoom?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableRotate?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableReload?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enablePrint?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableOpen?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableDownload?: boolean;
+    /** Master switch for markup features. Default true. */
+    enableMarkup?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableHighlight?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableUnderline?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableSignature?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableText?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableErase?: boolean;
+    /** @deprecated Prefer listing tools in `enableToolbar`. */
+    enableClear?: boolean;
+    /** Fixed signature boxes. In this mode signatures fill only these locations. */
+    signatureFields?: SignatureField[];
+    /**
+     * Fixed text boxes. Users can type, edit, or clear text in these locations.
+     * When set, freeform text placement is disabled — only these fields are editable.
+     */
+    textFields?: TextField[];
+    /** Called when a signature is placed (both fixed-field and free placement). */
+    onSignatureComplete?: (fieldId: string | undefined, signature: SignatureAnnotation) => void;
+    /** Called when a date/text fixed field value changes. */
+    onFieldValueComplete?: (fieldId: string, value: string) => void;
+    /** Externally trigger the signature pad to open. Toggle to `true` to open. */
+    openSignaturePad?: boolean;
+    /** Called when the signature pad closes (so parent can reset openSignaturePad). */
+    onSignaturePadClose?: () => void;
+    /**
+     * When provided, shows a footer submit button.
+     * For fixed signature fields, the footer also includes Prev/Next and progress.
+     */
+    onSubmit?: () => void;
+    /** Label for the footer submit button. Default "Submit". */
+    submitLabel?: string;
+}
+
+/** Print (includes markup). */
+export declare const Print: ToolbarToolComponent;
+
+/** Reload the PDF. */
+export declare const Reload: ToolbarToolComponent;
+
+export declare function renderToBlob(element: ReactElement): Promise<Blob>;
+
+/** Async-friendly API mirroring common PDF libraries. */
+export declare function renderToBuffer(element: ReactElement): Promise<Uint8Array>;
+
+export declare function resolvePageSize(size?: PageSize, orientation?: "portrait" | "landscape"): [number, number];
+
+/** Rotate pages. */
+export declare const Rotate: ToolbarToolComponent;
+
+/** Configure pdf.js worker. Call once, or pass `workerSrc` to `<PdfViewer>`. */
+export declare function setPdfWorkerSrc(workerSrc: string): void;
+
+/** E-signature tool. */
+export declare const Signature: ToolbarToolComponent;
+
+export declare interface SignatureAnnotation {
+    id: string;
+    pageNumber: number;
+    fieldId?: string;
+    /** Top-left X in page CSS pixels at scale = 1. */
+    x: number;
+    /** Top-left Y in page CSS pixels at scale = 1. */
+    y: number;
+    /** Width at scale = 1. */
+    width: number;
+    /** Height at scale = 1. */
+    height: number;
+    /** PNG data URL of the signature ink. */
+    imageDataUrl: string;
+}
+
+export declare interface SignatureField {
+    id: string;
+    pageNumber: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Field behavior: "sign" (default), "date" (date picker), or "text" (text input). */
+    type?: SignatureFieldType;
+    /** Placeholder text for "text" type fields. */
+    placeholder?: string;
+}
+
+declare type SignatureFieldType = "sign" | "date" | "text";
+
+export declare interface Style {
+    flexDirection?: FlexDirection;
+    alignItems?: AlignItems;
+    justifyContent?: JustifyContent;
+    gap?: number;
+    padding?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    margin?: number;
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    width?: number | string;
+    height?: number | string;
+    flexGrow?: number;
+    flexShrink?: number;
+    backgroundColor?: string;
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: "normal" | "bold" | number;
+    textAlign?: "left" | "center" | "right";
+    lineHeight?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    opacity?: number;
+}
+
+/** Text content. Children are flattened to a string. */
+declare function Text_2(_props: TextProps): null;
+
+declare namespace Text_2 {
+    var displayName: string;
+}
+export { Text_2 as Text }
+
+export declare interface TextAnnotation {
+    id: string;
+    pageNumber: number;
+    fieldId?: string;
+    /** Left edge in page CSS pixels at scale = 1. */
+    x: number;
+    /** Top edge in page CSS pixels at scale = 1. */
+    y: number;
+    /** Width at scale = 1. */
+    width: number;
+    /** Height at scale = 1. */
+    height: number;
+    value: string;
+    fontSize: number;
+    color: string;
+}
+
+export declare interface TextField {
+    id: string;
+    pageNumber: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Shown when the field is empty. */
+    placeholder?: string;
+    /** Font size at scale = 1. Default 14. */
+    fontSize?: number;
+    /** CSS color. Default #111827. */
+    color?: string;
+}
+
+export declare interface TextProps {
+    style?: Style;
+    children?: ReactNode;
+}
+
+/** Toggle thumbnails sidebar. */
+export declare const Thumbnail: ToolbarToolComponent;
+
+/** Render to a Blob (browser). */
+export declare function toBlob(element: ReactElement): Blob;
+
+/** Brand key used to identify toolbar tool components. */
+declare const TOOLBAR_TOOL_ID: "__epochsToolbarToolId";
+
+/**
+ * Toolbar layout: `[leftTools, rightTools]`.
+ * Pass tool components imported from `epochs-pdf`
+ * (e.g. `Thumbnail`, `Navigation`, `Zoom`).
+ *
+ * @example
+ * enableToolbar={[
+ *   [Thumbnail, Navigation],
+ *   [Zoom, Rotate, Download],
+ * ]}
+ */
+export declare type ToolbarLayout = [
+ToolbarToolComponent[],
+ToolbarToolComponent[]
+];
+
+export declare type ToolbarToolComponent = {
+    (props?: Record<string, never>): null;
+    displayName: string;
+    readonly [TOOLBAR_TOOL_ID]: ToolbarToolId;
+};
+
+export declare type ToolbarToolId = "thumbnail" | "navigation" | "zoom" | "rotate" | "reload" | "print" | "open" | "download" | "highlight" | "underline" | "signature" | "text" | "erase" | "clear";
+
+/** Render to an object URL for iframes / previews. */
+export declare function toUrl(element: ReactElement): string;
+
+/** Underline text markup tool. */
+export declare const Underline: ToolbarToolComponent;
+
+export declare const UNDERLINE_PRESETS: MarkupColorOption[];
+
+/** Flexbox layout container. */
+export declare function View(_props: ViewProps): null;
+
+export declare namespace View {
+    var displayName: string;
+}
+
+export declare type ViewerStatus = "idle" | "loading" | "ready" | "error";
+
+export declare interface ViewProps {
+    style?: Style;
+    children?: ReactNode;
+    debug?: boolean;
+}
+
+/** Zoom out, zoom %, zoom in, and fit width. */
+export declare const Zoom: ToolbarToolComponent;
+
+export { }

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "epochs-pdf",
+  "version": "0.1.0",
+  "description": "A modern React PDF library for generating and viewing PDF documents.",
+  "license": "MIT",
+  "author": "EPOCHS",
+  "type": "module",
+  "main": "./dist/epochs-pdf.cjs",
+  "module": "./dist/epochs-pdf.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/epochs-pdf.js",
+      "require": "./dist/epochs-pdf.cjs"
+    },
+    "./viewer.css": "./dist/epochs-pdf.css"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "playground": "vite --config playground/vite.config.ts",
+    "playground:build": "vite build --config playground/vite.config.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "react",
+    "pdf",
+    "pdf-generator",
+    "pdf-viewer",
+    "pdfjs",
+    "react-pdf",
+    "documents"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/waleedrajput/epochs-pdf.git"
+  },
+  "bugs": {
+    "url": "https://github.com/waleedrajput/epochs-pdf/issues"
+  },
+  "homepage": "https://github.com/waleedrajput/epochs-pdf#readme",
+  "dependencies": {
+    "pdfjs-dist": "^4.10.38"
+  }
+}