Merge branch 'main' into fix-version-inline

src/js/config/tools.ts

@@ -545,6 +545,12 @@ const baseCategories = [
         icon: 'ph-files',
         subtitle: 'Duplicate, reorder, and delete pages.',
       },
+      {
+        href: import.meta.env.BASE_URL + 'overlay-pdf.html',
+        name: 'PDF Overlay',
+        icon: 'ph-stack-simple',
+        subtitle: 'Overlay or underlay pages from one PDF onto another.',
+      },
       {
         href: import.meta.env.BASE_URL + 'add-attachments.html',
         name: 'Add Attachments',

src/js/logic/overlay-pdf-page.ts

@@ -0,0 +1,288 @@
+import { showAlert } from '../ui.js';
+import {
+  downloadFile,
+  formatBytes,
+  initializeQpdf,
+  readFileAsArrayBuffer,
+} from '../utils/helpers.js';
+import { icons, createIcons } from 'lucide';
+import type { OverlayPdfState, QpdfInstanceExtended } from '@/types';
+
+const pageState: OverlayPdfState = {
+  baseFile: null,
+  overlayFile: null,
+};
+
+function resetState() {
+  pageState.baseFile = null;
+  pageState.overlayFile = null;
+
+  const baseDisplay = document.getElementById('base-file-display');
+  if (baseDisplay) baseDisplay.innerHTML = '';
+
+  const overlayDisplay = document.getElementById('overlay-file-display');
+  if (overlayDisplay) overlayDisplay.innerHTML = '';
+
+  const toolOptions = document.getElementById('tool-options');
+  if (toolOptions) toolOptions.classList.add('hidden');
+
+  const baseInput = document.getElementById(
+    'base-file-input'
+  ) as HTMLInputElement;
+  if (baseInput) baseInput.value = '';
+
+  const overlayInput = document.getElementById(
+    'overlay-file-input'
+  ) as HTMLInputElement;
+  if (overlayInput) overlayInput.value = '';
+}
+
+function renderFileEntry(
+  container: HTMLElement,
+  file: File,
+  onRemove: () => void
+) {
+  container.innerHTML = '';
+
+  const fileDiv = document.createElement('div');
+  fileDiv.className =
+    'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
+
+  const infoContainer = document.createElement('div');
+  infoContainer.className = 'flex flex-col overflow-hidden';
+
+  const nameSpan = document.createElement('div');
+  nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
+  nameSpan.textContent = file.name;
+
+  const metaSpan = document.createElement('div');
+  metaSpan.className = 'text-xs text-gray-400';
+  metaSpan.textContent = formatBytes(file.size);
+
+  infoContainer.append(nameSpan, metaSpan);
+
+  const removeBtn = document.createElement('button');
+  removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
+  removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
+  removeBtn.onclick = onRemove;
+
+  fileDiv.append(infoContainer, removeBtn);
+  container.appendChild(fileDiv);
+  createIcons({ icons });
+}
+
+function updateUI() {
+  const toolOptions = document.getElementById('tool-options');
+  const baseDisplay = document.getElementById('base-file-display');
+  const overlayDisplay = document.getElementById('overlay-file-display');
+
+  if (baseDisplay && pageState.baseFile) {
+    renderFileEntry(baseDisplay, pageState.baseFile, () => {
+      pageState.baseFile = null;
+      baseDisplay.innerHTML = '';
+      updateUI();
+    });
+  }
+
+  if (overlayDisplay && pageState.overlayFile) {
+    renderFileEntry(overlayDisplay, pageState.overlayFile, () => {
+      pageState.overlayFile = null;
+      overlayDisplay.innerHTML = '';
+      updateUI();
+    });
+  }
+
+  if (toolOptions) {
+    if (pageState.baseFile && pageState.overlayFile) {
+      toolOptions.classList.remove('hidden');
+    } else {
+      toolOptions.classList.add('hidden');
+    }
+  }
+}
+
+function isPdf(file: File): boolean {
+  return (
+    file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')
+  );
+}
+
+async function processOverlay() {
+  if (!pageState.baseFile || !pageState.overlayFile) {
+    showAlert(
+      'Missing Files',
+      'Please upload both a base PDF and an overlay/underlay PDF.'
+    );
+    return;
+  }
+
+  const loaderModal = document.getElementById('loader-modal');
+  const loaderText = document.getElementById('loader-text');
+  if (loaderModal) loaderModal.classList.remove('hidden');
+  if (loaderText) loaderText.textContent = 'Initializing PDF engine...';
+
+  const inputPath = '/input_base.pdf';
+  const overlayPath = '/input_overlay.pdf';
+  const outputPath = '/output.pdf';
+  let qpdf: QpdfInstanceExtended;
+
+  try {
+    qpdf = await initializeQpdf();
+
+    if (loaderText) loaderText.textContent = 'Reading files...';
+
+    const baseBuffer = await readFileAsArrayBuffer(pageState.baseFile);
+    const overlayBuffer = await readFileAsArrayBuffer(pageState.overlayFile);
+
+    qpdf.FS.writeFile(inputPath, new Uint8Array(baseBuffer as ArrayBuffer));
+    qpdf.FS.writeFile(
+      overlayPath,
+      new Uint8Array(overlayBuffer as ArrayBuffer)
+    );
+
+    const modeSelect = document.getElementById(
+      'mode-select'
+    ) as HTMLSelectElement;
+    const pageRangeInput = document.getElementById(
+      'page-range'
+    ) as HTMLInputElement;
+    const repeatCheckbox = document.getElementById(
+      'repeat-toggle'
+    ) as HTMLInputElement;
+
+    const mode = modeSelect?.value === 'underlay' ? '--underlay' : '--overlay';
+    const pageRange = pageRangeInput?.value.trim();
+    const shouldRepeat = repeatCheckbox?.checked;
+
+    if (loaderText)
+      loaderText.textContent = `Applying ${mode.replace('--', '')}...`;
+
+    const args = [inputPath, mode, overlayPath];
+
+    if (pageRange) {
+      args.push(`--to=${pageRange}`);
+    }
+
+    if (shouldRepeat) {
+      args.push('--from=', '--repeat=1-z');
+    }
+
+    args.push('--', outputPath);
+
+    qpdf.callMain(args);
+
+    const outputFile = qpdf.FS.readFile(outputPath, { encoding: 'binary' });
+    if (!outputFile || outputFile.length === 0) {
+      throw new Error('Processing produced an empty file.');
+    }
+
+    const modeLabel = mode.replace('--', '');
+    const baseName = pageState.baseFile.name.replace(/\.pdf$/i, '');
+    const fileName = `${baseName}_${modeLabel}.pdf`;
+
+    downloadFile(
+      new Blob([new Uint8Array(outputFile)], { type: 'application/pdf' }),
+      fileName
+    );
+
+    showAlert(
+      'Success',
+      `PDF ${modeLabel} applied successfully.`,
+      'success',
+      () => {
+        resetState();
+      }
+    );
+  } catch (error: unknown) {
+    console.error('Overlay/underlay error:', error);
+    showAlert(
+      'Processing Failed',
+      `An error occurred: ${error instanceof Error ? error.message : 'Unknown error'}.`
+    );
+  } finally {
+    try {
+      if (qpdf?.FS) {
+        if (qpdf.FS.analyzePath(inputPath).exists) qpdf.FS.unlink(inputPath);
+        if (qpdf.FS.analyzePath(overlayPath).exists)
+          qpdf.FS.unlink(overlayPath);
+        if (qpdf.FS.analyzePath(outputPath).exists) qpdf.FS.unlink(outputPath);
+      }
+    } catch (cleanupError) {
+      console.warn('Failed to cleanup WASM FS:', cleanupError);
+    }
+    if (loaderModal) loaderModal.classList.add('hidden');
+  }
+}
+
+function setupDropZone(
+  dropZone: HTMLElement,
+  fileInput: HTMLInputElement,
+  onFile: (file: File) => void
+) {
+  fileInput.addEventListener('change', (e) => {
+    const files = (e.target as HTMLInputElement).files;
+    if (files && files.length > 0 && isPdf(files[0])) {
+      onFile(files[0]);
+    }
+  });
+
+  dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('bg-gray-700');
+  });
+
+  dropZone.addEventListener('dragleave', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('bg-gray-700');
+  });
+
+  dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('bg-gray-700');
+    const files = e.dataTransfer?.files;
+    if (files && files.length > 0 && isPdf(files[0])) {
+      onFile(files[0]);
+    }
+  });
+
+  fileInput.addEventListener('click', () => {
+    fileInput.value = '';
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const baseDropZone = document.getElementById('base-drop-zone');
+  const baseInput = document.getElementById(
+    'base-file-input'
+  ) as HTMLInputElement;
+  const overlayDropZone = document.getElementById('overlay-drop-zone');
+  const overlayInput = document.getElementById(
+    'overlay-file-input'
+  ) as HTMLInputElement;
+  const processBtn = document.getElementById('process-btn');
+  const backBtn = document.getElementById('back-to-tools');
+
+  if (backBtn) {
+    backBtn.addEventListener('click', () => {
+      window.location.href = import.meta.env.BASE_URL;
+    });
+  }
+
+  if (baseDropZone && baseInput) {
+    setupDropZone(baseDropZone, baseInput, (file) => {
+      pageState.baseFile = file;
+      updateUI();
+    });
+  }
+
+  if (overlayDropZone && overlayInput) {
+    setupDropZone(overlayDropZone, overlayInput, (file) => {
+      pageState.overlayFile = file;
+      updateUI();
+    });
+  }
+
+  if (processBtn) {
+    processBtn.addEventListener('click', processOverlay);
+  }
+});

src/js/main.ts

@@ -207,6 +207,7 @@ const init = async () => {
     'PDF to JSON': 'tools:pdfToJson',
     'OCR PDF': 'tools:ocrPdf',
     'Alternate & Mix Pages': 'tools:alternateMix',
+    'PDF Overlay': 'tools:pdfOverlay',
     'Organize & Duplicate': 'tools:duplicateOrganize',
     'Add Attachments': 'tools:addAttachments',
     'Extract Attachments': 'tools:extractAttachments',

src/js/types/index.ts

@@ -65,3 +65,4 @@ export * from './shortcuts-type.ts';
 export * from './ui-type.ts';
 export * from './markdown-editor-type.ts';
 export * from './sanitize-type.ts';
+export * from './overlay-pdf-type.ts';

src/js/types/overlay-pdf-type.ts

@@ -0,0 +1,4 @@
+export interface OverlayPdfState {
+  baseFile: File | null;
+  overlayFile: File | null;
+}

src/js/workflow/nodes/overlay-node.ts

@@ -0,0 +1,92 @@
+import { ClassicPreset } from 'rete';
+import { BaseWorkflowNode } from './base-node';
+import { pdfSocket } from '../sockets';
+import type { SocketData } from '../types';
+import { requirePdfInput, extractSinglePdf } from '../types';
+import { initializeQpdf } from '../../utils/helpers.js';
+import { loadPdfDocument } from '../../utils/load-pdf-document.js';
+
+export class OverlayNode extends BaseWorkflowNode {
+  readonly category = 'Organize & Manage' as const;
+  readonly icon = 'ph-stack-simple';
+  readonly description = 'Overlay or underlay pages from one PDF onto another';
+
+  constructor() {
+    super('Overlay');
+    this.addInput('pdf', new ClassicPreset.Input(pdfSocket, 'Base PDF'));
+    this.addInput('overlay', new ClassicPreset.Input(pdfSocket, 'Overlay PDF'));
+    this.addOutput('pdf', new ClassicPreset.Output(pdfSocket, 'Result PDF'));
+    this.addControl(
+      'mode',
+      new ClassicPreset.InputControl('text', { initial: 'overlay' })
+    );
+  }
+
+  async data(
+    inputs: Record<string, SocketData[]>
+  ): Promise<Record<string, SocketData>> {
+    const baseInputs = requirePdfInput(inputs, 'Overlay');
+    const overlayInputs = inputs['overlay'];
+    if (!overlayInputs || overlayInputs.length === 0) {
+      throw new Error('Overlay node requires an overlay PDF input.');
+    }
+
+    const basePdf = extractSinglePdf(baseInputs[0]);
+    const overlayPdf = extractSinglePdf(overlayInputs[0]);
+
+    const modeControl = this.controls[
+      'mode'
+    ] as ClassicPreset.InputControl<'text'>;
+    const mode = modeControl?.value === 'underlay' ? '--underlay' : '--overlay';
+
+    const qpdf = await initializeQpdf();
+    const uid = `${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+    const inputPath = `/tmp/input_overlay_${uid}.pdf`;
+    const overlayPath = `/tmp/overlay_${uid}.pdf`;
+    const outputPath = `/tmp/output_overlay_${uid}.pdf`;
+
+    let resultBytes: Uint8Array;
+    try {
+      qpdf.FS.writeFile(inputPath, basePdf.bytes);
+      qpdf.FS.writeFile(overlayPath, overlayPdf.bytes);
+      qpdf.callMain([
+        inputPath,
+        mode,
+        overlayPath,
+        '--from=',
+        '--repeat=1-z',
+        '--',
+        outputPath,
+      ]);
+      resultBytes = new Uint8Array(qpdf.FS.readFile(outputPath));
+    } finally {
+      try {
+        qpdf.FS.unlink(inputPath);
+      } catch {
+        void 0;
+      }
+      try {
+        qpdf.FS.unlink(overlayPath);
+      } catch {
+        void 0;
+      }
+      try {
+        qpdf.FS.unlink(outputPath);
+      } catch {
+        void 0;
+      }
+    }
+
+    const document = await loadPdfDocument(resultBytes);
+    const modeLabel = mode.replace('--', '');
+
+    return {
+      pdf: {
+        type: 'pdf',
+        document,
+        bytes: resultBytes,
+        filename: basePdf.filename.replace(/\.pdf$/i, `_${modeLabel}.pdf`),
+      },
+    };
+  }
+}

src/js/workflow/nodes/registry.ts

@@ -56,6 +56,7 @@ import { DeskewNode } from './deskew-node';
 import { PdfToPdfANode } from './pdf-to-pdfa-node';
 import { PosterizeNode } from './posterize-node';
 import { BookletNode } from './booklet-node';
+import { OverlayNode } from './overlay-node';
 import { FontToOutlineNode } from './font-to-outline-node';
 import { TableOfContentsNode } from './table-of-contents-node';
 import { EmailToPdfNode } from './email-to-pdf-node';
@@ -355,6 +356,14 @@ export const nodeRegistry: Record<string, NodeRegistryEntry> = {
     factory: () => new BookletNode(),
     toolPageId: 'pdf-booklet',
   },
+  OverlayNode: {
+    label: 'Overlay',
+    category: 'Organize & Manage',
+    icon: 'ph-stack-simple',
+    description: 'Overlay or underlay pages from one PDF onto another',
+    factory: () => new OverlayNode(),
+    toolPageId: 'overlay-pdf',
+  },
   PosterizeNode: {
     label: 'Posterize',
     category: 'Organize & Manage',