Release v2.4.1

Update tools.json - Option Apply watermark to all pages

Dockerfile

@@ -47,14 +47,13 @@ ENV VITE_BRAND_NAME=$VITE_BRAND_NAME
 ENV VITE_BRAND_LOGO=$VITE_BRAND_LOGO
 ENV VITE_FOOTER_TEXT=$VITE_FOOTER_TEXT
 
-ARG VITE_CORS_PROXY_URL
-ARG VITE_CORS_PROXY_SECRET
-ENV VITE_CORS_PROXY_URL=$VITE_CORS_PROXY_URL
-ENV VITE_CORS_PROXY_SECRET=$VITE_CORS_PROXY_SECRET
-
 ENV NODE_OPTIONS="--max-old-space-size=3072"
 
-RUN npm run build:with-docs
+RUN --mount=type=secret,id=VITE_CORS_PROXY_URL \
+    --mount=type=secret,id=VITE_CORS_PROXY_SECRET \
+    VITE_CORS_PROXY_URL=$(cat /run/secrets/VITE_CORS_PROXY_URL 2>/dev/null || echo "") \
+    VITE_CORS_PROXY_SECRET=$(cat /run/secrets/VITE_CORS_PROXY_SECRET 2>/dev/null || echo "") \
+    npm run build:with-docs
 
 # Production stage
 FROM quay.io/nginx/nginx-unprivileged:stable-alpine-slim

Dockerfile.nonroot

@@ -44,14 +44,13 @@ ENV VITE_BRAND_NAME=$VITE_BRAND_NAME
 ENV VITE_BRAND_LOGO=$VITE_BRAND_LOGO
 ENV VITE_FOOTER_TEXT=$VITE_FOOTER_TEXT
 
-ARG VITE_CORS_PROXY_URL
-ARG VITE_CORS_PROXY_SECRET
-ENV VITE_CORS_PROXY_URL=$VITE_CORS_PROXY_URL
-ENV VITE_CORS_PROXY_SECRET=$VITE_CORS_PROXY_SECRET
-
 ENV NODE_OPTIONS="--max-old-space-size=3072"
 
-RUN npm run build:with-docs
+RUN --mount=type=secret,id=VITE_CORS_PROXY_URL \
+    --mount=type=secret,id=VITE_CORS_PROXY_SECRET \
+    VITE_CORS_PROXY_URL=$(cat /run/secrets/VITE_CORS_PROXY_URL 2>/dev/null || echo "") \
+    VITE_CORS_PROXY_SECRET=$(cat /run/secrets/VITE_CORS_PROXY_SECRET 2>/dev/null || echo "") \
+    npm run build:with-docs
 
 # Production stage — uses standard nginx (starts as root, drops to PUID/PGID)
 FROM nginx:stable-alpine-slim

README.md

@@ -873,7 +873,10 @@ The **Digital Signature** tool uses a signing library that may need to fetch cer
    ```
    Or with Docker:
    ```bash
-   docker build --build-arg VITE_CORS_PROXY_URL="https://your-worker-url.workers.dev" -t your-bentopdf .
+   export VITE_CORS_PROXY_URL="https://your-worker-url.workers.dev"
+   DOCKER_BUILDKIT=1 docker build \
+    --secret id=VITE_CORS_PROXY_URL,env=VITE_CORS_PROXY_URL \
+    -t your-bentopdf .
    ```
 
 #### Production Security Features
@@ -927,6 +930,14 @@ npx wrangler secret put PROXY_SECRET
 
 # Set in build environment
 VITE_CORS_PROXY_SECRET=your-secret npm run build
+
+# Or with Docker (optional; URL secret also shown for completeness)
+export VITE_CORS_PROXY_URL="https://your-worker-url.workers.dev"
+export VITE_CORS_PROXY_SECRET="your-secret"
+DOCKER_BUILDKIT=1 docker build \
+  --secret id=VITE_CORS_PROXY_URL,env=VITE_CORS_PROXY_URL \
+  --secret id=VITE_CORS_PROXY_SECRET,env=VITE_CORS_PROXY_SECRET \
+  -t your-bentopdf .
 ```
 
 ### 📦 Version Management

docs/self-hosting/cloudflare.md

@@ -142,4 +142,13 @@ npx wrangler deploy
 VITE_CORS_PROXY_URL=https://your-worker.workers.dev npm run build
 ```
 
+Or with Docker:
+
+```bash
+export VITE_CORS_PROXY_URL="https://your-worker.workers.dev"
+DOCKER_BUILDKIT=1 docker build \
+  --secret id=VITE_CORS_PROXY_URL,env=VITE_CORS_PROXY_URL \
+  -t your-bentopdf .
+```
+
 > **Note:** See [README](https://github.com/alam00000/bentopdf#digital-signature-cors-proxy-required) for HMAC signature setup.

docs/self-hosting/cors-proxy.md

@@ -64,8 +64,9 @@ If you're self-hosting BentoPDF, you'll need to deploy your own CORS proxy for d
    If using Docker:
 
    ```bash
-   docker build \
+   export VITE_CORS_PROXY_URL="https://your-worker.workers.dev"
-     --build-arg VITE_CORS_PROXY_URL="https://your-worker.workers.dev" \
+   DOCKER_BUILDKIT=1 docker build \
+     --secret id=VITE_CORS_PROXY_URL,env=VITE_CORS_PROXY_URL \
      -t your-bentopdf .
    ```
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bento-pdf",
   "private": true,
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "AGPL-3.0-only",
   "type": "module",
   "scripts": {
@@ -37,32 +37,32 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@testing-library/dom": "^10.4.1",
     "@types/blob-stream": "^0.1.33",
     "@types/html2canvas": "^1.0.0",
-    "@types/pdfkit": "^0.17.3",
+    "@types/pdfkit": "^0.17.5",
     "@types/sortablejs": "^1.15.8",
     "@types/utif": "^3.0.6",
     "@vitejs/plugin-basic-ssl": "^2.1.4",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.0.18",
-    "@vitest/ui": "^3.2.4",
+    "@vitest/ui": "^4.0.18",
-    "eslint": "^9.39.2",
+    "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
-    "globals": "^17.0.0",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "jsdom": "^27.0.1",
+    "jsdom": "^28.1.0",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^16.3.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.51.0",
+    "typescript-eslint": "^8.56.1",
-    "vite": "^7.1.11",
+    "vite": "^7.3.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-handlebars": "^2.0.0",
-    "vite-plugin-node-polyfills": "^0.24.0",
+    "vite-plugin-node-polyfills": "^0.25.0",
     "vitepress": "^1.6.4",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.18",
-    "vue": "^3.5.26"
+    "vue": "^3.5.29"
   },
   "dependencies": {
     "@fontsource/cedarville-cursive": "^5.2.7",
@@ -72,32 +72,32 @@
     "@fontsource/kalam": "^5.2.8",
     "@fontsource/lato": "^5.2.7",
     "@fontsource/merriweather": "^5.2.11",
-    "@kenjiuno/msgreader": "^1.27.1-alpha.1",
+    "@kenjiuno/msgreader": "^1.28.0",
-    "@matbee/libreoffice-converter": "^2.3.1",
+    "@matbee/libreoffice-converter": "^2.5.0",
     "@neslinesli93/qpdf-wasm": "^0.3.0",
     "@pdf-lib/fontkit": "^1.1.1",
     "@phosphor-icons/web": "^2.1.2",
     "@retejs/lit-plugin": "^2.0.7",
-    "@tailwindcss/vite": "^4.1.15",
+    "@tailwindcss/vite": "^4.2.1",
     "@types/markdown-it": "^14.1.2",
     "@types/node-forge": "^1.3.14",
     "@types/papaparse": "^5.5.2",
     "archiver": "^7.0.1",
     "blob-stream": "^0.1.3",
     "bwip-js": "^4.8.0",
-    "cropperjs": "^1.6.1",
+    "cropperjs": "^1.6.2",
     "embedpdf-snippet": "file:vendor/embedpdf/embedpdf-snippet-2.3.0.tgz",
     "heic2any": "^0.0.4",
     "highlight.js": "^11.11.1",
     "html2canvas": "^1.4.1",
-    "i18next": "^25.7.2",
+    "i18next": "^25.8.13",
-    "i18next-browser-languagedetector": "^8.2.0",
+    "i18next-browser-languagedetector": "^8.2.1",
     "i18next-http-backend": "^3.0.2",
     "jspdf": "^4.2.0",
     "jspdf-autotable": "^5.0.2",
     "jszip": "^3.10.1",
     "lit": "^3.3.2",
-    "lucide": "^0.546.0",
+    "lucide": "^0.575.0",
     "markdown-it": "^14.1.1",
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-anchor": "^9.2.0",
@@ -110,25 +110,25 @@
     "markdown-it-sup": "^2.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-toc-done-right": "^4.2.0",
-    "mermaid": "^11.12.2",
+    "mermaid": "^11.12.3",
     "node-forge": "^1.3.3",
     "papaparse": "^5.5.3",
     "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "^5.4.296",
+    "pdfjs-dist": "^5.4.624",
     "pdfkit": "^0.17.2",
-    "postal-mime": "^2.7.1",
+    "postal-mime": "^2.7.3",
     "rete": "^2.0.6",
     "rete-area-plugin": "^2.1.5",
     "rete-connection-plugin": "^2.0.5",
     "rete-engine": "^2.1.1",
     "rete-render-utils": "^2.0.3",
-    "sortablejs": "^1.15.6",
+    "sortablejs": "^1.15.7",
     "tailwindcss": "^4.1.14",
-    "terser": "^5.44.0",
+    "terser": "^5.46.0",
-    "tesseract.js": "^6.0.1",
+    "tesseract.js": "^7.0.0",
     "tiff": "^7.1.2",
     "utif": "^3.1.0",
-    "vite-plugin-static-copy": "^3.1.4",
+    "vite-plugin-static-copy": "^3.2.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "zgapdfsigner": "^2.7.5"
   },

public/locales/ar/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "إزالة الصفحات الفارغة",
-    "subtitle": "اكتشاف وحذف الصفحات الفارغة تلقائيًا."
+    "subtitle": "اكتشاف وحذف الصفحات الفارغة تلقائيًا.",
+    "sensitivityHint": "أعلى = أكثر صرامة، فقط الصفحات الفارغة تمامًا. أقل = يسمح بصفحات تحتوي على بعض المحتوى."
   },
   "imageToPdf": {
     "name": "صور إلى PDF",

public/locales/be/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Выдаліць пустыя старонкі",
-    "subtitle": "Аўтаматычна выявіць і выдаліць пустыя старонкі."
+    "subtitle": "Аўтаматычна выявіць і выдаліць пустыя старонкі.",
+    "sensitivityHint": "Вышэй = больш строга, толькі цалкам пустыя старонкі. Ніжэй = дапускае старонкі з нейкім змесцівам."
   },
   "imageToPdf": {
     "name": "Відарысы ў PDF",

public/locales/da/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Fjern tomme sider",
-    "subtitle": "Find og fjern automatisk tomme sider."
+    "subtitle": "Find og fjern automatisk tomme sider.",
+    "sensitivityHint": "Højere = strengere, kun helt tomme sider. Lavere = tillader sider med noget indhold."
   },
   "imageToPdf": {
     "name": "Billeder til PDF",

public/locales/de/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Leere Seiten entfernen",
-    "subtitle": "Leere Seiten automatisch erkennen und löschen."
+    "subtitle": "Leere Seiten automatisch erkennen und löschen.",
+    "sensitivityHint": "Höher = strenger, nur rein leere Seiten. Niedriger = erlaubt Seiten mit etwas Inhalt."
   },
   "imageToPdf": {
     "name": "Bilder zu PDF",

public/locales/en/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Remove Blank Pages",
-    "subtitle": "Automatically detect and delete blank pages."
+    "subtitle": "Automatically detect and delete blank pages.",
+    "sensitivityHint": "Higher = stricter, only purely blank pages. Lower = allows pages with some content."
   },
   "imageToPdf": {
     "name": "Images to PDF",

public/locales/es/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Eliminar Páginas en Blanco",
-    "subtitle": "Detecta y elimina automáticamente páginas en blanco."
+    "subtitle": "Detecta y elimina automáticamente páginas en blanco.",
+    "sensitivityHint": "Mayor = más estricto, solo páginas completamente en blanco. Menor = permite páginas con algo de contenido."
   },
   "imageToPdf": {
     "name": "Imágenes a PDF",

public/locales/fr/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Supprimer les pages blanches",
-    "subtitle": "Détecter et supprimer automatiquement les pages vides."
+    "subtitle": "Détecter et supprimer automatiquement les pages vides.",
+    "sensitivityHint": "Plus élevé = plus strict, uniquement les pages vierges. Plus bas = autorise les pages avec du contenu."
   },
   "imageToPdf": {
     "name": "Images vers PDF",

public/locales/id/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Hapus Halaman Kosong",
-    "subtitle": "Deteksi dan hapus halaman kosong secara otomatis."
+    "subtitle": "Deteksi dan hapus halaman kosong secara otomatis.",
+    "sensitivityHint": "Lebih tinggi = lebih ketat, hanya halaman yang benar-benar kosong. Lebih rendah = mengizinkan halaman dengan sedikit konten."
   },
   "imageToPdf": {
     "name": "Gambar ke PDF",

public/locales/it/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Rimuovi Pagine Vuote",
-    "subtitle": "Rileva e elimina automaticamente le pagine vuote."
+    "subtitle": "Rileva e elimina automaticamente le pagine vuote.",
+    "sensitivityHint": "Più alto = più rigoroso, solo pagine completamente vuote. Più basso = consente pagine con qualche contenuto."
   },
   "imageToPdf": {
     "name": "Immagini in PDF",

public/locales/nl/tools.json

@@ -93,7 +93,7 @@
   "addWatermark": {
     "name": "Watermerk toevoegen",
     "subtitle": "Tekst of een afbeelding over de pagina's van je PDF stempelen.",
-    "applyToAllPages": "Toepassen op alle pagina's"
+    "applyToAllPages": "Op alle pagina's toepassen"
   },
   "headerFooter": {
     "name": "Koptekst & Voettekst",
@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Blanco pagina's Verwijderen",
-    "subtitle": "Automatisch blanco pagina's detecteren en verwijderen."
+    "subtitle": "Automatisch blanco pagina's detecteren en verwijderen.",
+    "sensitivityHint": "Hoger = strenger, alleen volledig lege pagina's. Lager = staat pagina's met enige inhoud toe."
   },
   "imageToPdf": {
     "name": "Afbeelding naar PDF",

public/locales/pt/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Remover Páginas em Branco",
-    "subtitle": "Detecte e exclua automaticamente páginas em branco."
+    "subtitle": "Detecte e exclua automaticamente páginas em branco.",
+    "sensitivityHint": "Maior = mais rigoroso, apenas páginas totalmente em branco. Menor = permite páginas com algum conteúdo."
   },
   "imageToPdf": {
     "name": "Imagem para PDF",

public/locales/sv/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Ta bort tomma sidor",
-    "subtitle": "Automatiskt identifiera och ta bort tomma sidor."
+    "subtitle": "Automatiskt identifiera och ta bort tomma sidor.",
+    "sensitivityHint": "Högre = striktare, bara helt tomma sidor. Lägre = tillåter sidor med visst innehåll."
   },
   "imageToPdf": {
     "name": "Bilder till PDF",

public/locales/tr/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Boş Sayfaları Kaldır",
-    "subtitle": "Boş sayfaları otomatik olarak tespit edin ve silin."
+    "subtitle": "Boş sayfaları otomatik olarak tespit edin ve silin.",
+    "sensitivityHint": "Yüksek = daha katı, yalnızca tamamen boş sayfalar. Düşük = biraz içerik olan sayfalara izin verir."
   },
   "imageToPdf": {
     "name": "Görselden PDF'ye",

public/locales/vi/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "Xóa trang trống",
-    "subtitle": "Tự động phát hiện và xóa trang trống."
+    "subtitle": "Tự động phát hiện và xóa trang trống.",
+    "sensitivityHint": "Cao hơn = nghiêm ngặt hơn, chỉ các trang hoàn toàn trống. Thấp hơn = cho phép trang có một số nội dung."
   },
   "imageToPdf": {
     "name": "Hình ảnh sang PDF",

public/locales/zh-TW/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "移除空白頁面",
-    "subtitle": "自動偵測並刪除空白頁面。"
+    "subtitle": "自動偵測並刪除空白頁面。",
+    "sensitivityHint": "越高 = 越嚴格，僅偵測純空白頁面。越低 = 允許包含少量內容的頁面。"
   },
   "imageToPdf": {
     "name": "圖片轉 PDF",

public/locales/zh/tools.json

@@ -163,7 +163,8 @@
   },
   "removeBlankPages": {
     "name": "移除空白页",
-    "subtitle": "自动检测并删除空白页。"
+    "subtitle": "自动检测并删除空白页。",
+    "sensitivityHint": "越高 = 越严格，仅检测纯空白页。越低 = 允许包含少量内容的页面。"
   },
   "imageToPdf": {
     "name": "图片转 PDF",

signatures/cla.json

@@ -343,6 +343,22 @@
       "created_at": "2026-02-27T13:07:34Z",
       "repoId": 1074785178,
       "pullRequestNo": 529
+    },
+    {
+      "name": "Olivetti",
+      "id": 1502093,
+      "comment_id": 3984507146,
+      "created_at": "2026-03-02T13:46:02Z",
+      "repoId": 1074785178,
+      "pullRequestNo": 531
+    },
+    {
+      "name": "InstaZDLL",
+      "id": 72951793,
+      "comment_id": 3984770306,
+      "created_at": "2026-03-02T14:33:11Z",
+      "repoId": 1074785178,
+      "pullRequestNo": 538
     }
   ]
 }

src/js/config/tools.ts

@@ -1,5 +1,5 @@
 // This file centralizes the definition of all available tools, organized by category.
-export const categories = [
+const baseCategories = [
   {
     name: 'Popular Tools',
     tools: [
@@ -788,3 +788,16 @@ export const categories = [
     ],
   },
 ];
+
+const getToolIdFromHref = (href: string): string => {
+  const match = href.match(/\/([^/]+)\.html$/);
+  return match?.[1] ?? href;
+};
+
+export const categories = baseCategories.map((category) => ({
+  ...category,
+  tools: category.tools.map((tool) => ({
+    ...tool,
+    id: getToolIdFromHref(tool.href),
+  })),
+}));

src/js/logic/delete-pages-page.ts

@@ -159,7 +159,7 @@ async function renderThumbnails() {
 
   for (let i = 1; i <= deleteState.totalPages; i++) {
     const page = await deleteState.pdfJsDoc.getPage(i);
-    const viewport = page.getViewport({ scale: 0.3 });
+    const viewport = page.getViewport({ scale: 1 });
 
     const canvas = document.createElement('canvas');
     canvas.width = viewport.width;

src/js/logic/fix-page-size-page.ts

@@ -1,6 +1,6 @@
 import { showAlert } from '../ui.js';
 import { downloadFile, formatBytes, hexToRgb } from '../utils/helpers.js';
-import { PDFDocument as PDFLibDocument, rgb, PageSizes } from 'pdf-lib';
+import { fixPageSize as fixPageSizeCore } from '../utils/pdf-operations';
 import { icons, createIcons } from 'lucide';
 import { FixPageSizeState } from '@/types';
 
@@ -31,7 +31,8 @@ async function updateUI() {
 
   if (pageState.file) {
     const fileDiv = document.createElement('div');
-        fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
+    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';
@@ -66,7 +67,10 @@ async function updateUI() {
 function handleFileSelect(files: FileList | null) {
   if (files && files.length > 0) {
     const file = files[0];
-        if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
+    if (
+      file.type === 'application/pdf' ||
+      file.name.toLowerCase().endsWith('.pdf')
+    ) {
       pageState.file = file;
       updateUI();
     }
@@ -79,10 +83,20 @@ async function fixPageSize() {
     return;
   }
 
-    const targetSizeKey = (document.getElementById('target-size') as HTMLSelectElement).value;
+  const targetSize = (
-    const orientation = (document.getElementById('orientation') as HTMLSelectElement).value;
+    document.getElementById('target-size') as HTMLSelectElement
-    const scalingMode = (document.querySelector('input[name="scaling-mode"]:checked') as HTMLInputElement).value;
+  ).value;
-    const backgroundColor = hexToRgb((document.getElementById('background-color') as HTMLInputElement).value);
+  const orientation = (
+    document.getElementById('orientation') as HTMLSelectElement
+  ).value;
+  const scalingMode = (
+    document.querySelector(
+      'input[name="scaling-mode"]:checked'
+    ) as HTMLInputElement
+  ).value;
+  const backgroundColor = hexToRgb(
+    (document.getElementById('background-color') as HTMLInputElement).value
+  );
 
   const loaderModal = document.getElementById('loader-modal');
   const loaderText = document.getElementById('loader-text');
@@ -90,72 +104,43 @@ async function fixPageSize() {
   if (loaderText) loaderText.textContent = 'Standardizing pages...';
 
   try {
-        let targetWidth, targetHeight;
+    const customWidth =
-
+      parseFloat(
-        if (targetSizeKey === 'Custom') {
+        (document.getElementById('custom-width') as HTMLInputElement)?.value
-            const width = parseFloat((document.getElementById('custom-width') as HTMLInputElement).value);
+      ) || 210;
-            const height = parseFloat((document.getElementById('custom-height') as HTMLInputElement).value);
+    const customHeight =
-            const units = (document.getElementById('custom-units') as HTMLSelectElement).value;
+      parseFloat(
-
+        (document.getElementById('custom-height') as HTMLInputElement)?.value
-            if (units === 'in') {
+      ) || 297;
-                targetWidth = width * 72;
+    const customUnits =
-                targetHeight = height * 72;
+      (document.getElementById('custom-units') as HTMLSelectElement)?.value ||
-            } else {
+      'mm';
-                // mm
-                targetWidth = width * (72 / 25.4);
-                targetHeight = height * (72 / 25.4);
-            }
-        } else {
-            [targetWidth, targetHeight] = PageSizes[targetSizeKey as keyof typeof PageSizes];
-        }
-
-        if (orientation === 'landscape' && targetWidth < targetHeight) {
-            [targetWidth, targetHeight] = [targetHeight, targetWidth];
-        } else if (orientation === 'portrait' && targetWidth > targetHeight) {
-            [targetWidth, targetHeight] = [targetHeight, targetWidth];
-        }
 
     const arrayBuffer = await pageState.file.arrayBuffer();
-        const sourceDoc = await PDFLibDocument.load(arrayBuffer);
+    const pdfBytes = new Uint8Array(arrayBuffer);
-        const newDoc = await PDFLibDocument.create();
 
-        for (const sourcePage of sourceDoc.getPages()) {
+    const newPdfBytes = await fixPageSizeCore(pdfBytes, {
-            const { width: sourceWidth, height: sourceHeight } = sourcePage.getSize();
+      targetSize,
-            const embeddedPage = await newDoc.embedPage(sourcePage);
+      orientation,
-
+      scalingMode,
-            const newPage = newDoc.addPage([targetWidth, targetHeight]);
+      backgroundColor,
-            newPage.drawRectangle({
+      customWidth,
-                x: 0,
+      customHeight,
-                y: 0,
+      customUnits,
-                width: targetWidth,
-                height: targetHeight,
-                color: rgb(backgroundColor.r, backgroundColor.g, backgroundColor.b),
     });
 
-            const scaleX = targetWidth / sourceWidth;
-            const scaleY = targetHeight / sourceHeight;
-            const scale = scalingMode === 'fit' ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
-
-            const scaledWidth = sourceWidth * scale;
-            const scaledHeight = sourceHeight * scale;
-
-            const x = (targetWidth - scaledWidth) / 2;
-            const y = (targetHeight - scaledHeight) / 2;
-
-            newPage.drawPage(embeddedPage, {
-                x,
-                y,
-                width: scaledWidth,
-                height: scaledHeight,
-            });
-        }
-
-        const newPdfBytes = await newDoc.save();
     downloadFile(
       new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }),
       'standardized.pdf'
     );
-        showAlert('Success', 'Page sizes standardized successfully!', 'success', () => { resetState(); });
+    showAlert(
+      'Success',
+      'Page sizes standardized successfully!',
+      'success',
+      () => {
+        resetState();
+      }
+    );
   } catch (e) {
     console.error(e);
     showAlert('Error', 'An error occurred while standardizing pages.');
@@ -209,7 +194,10 @@ document.addEventListener('DOMContentLoaded', function () {
       const files = e.dataTransfer?.files;
       if (files && files.length > 0) {
         const pdfFiles = Array.from(files).filter(function (f) {
-                    return f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
+          return (
+            f.type === 'application/pdf' ||
+            f.name.toLowerCase().endsWith('.pdf')
+          );
         });
         if (pdfFiles.length > 0) {
           const dataTransfer = new DataTransfer();

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

@@ -9,6 +9,7 @@ import {
   renderPagesProgressively,
   cleanupLazyRendering,
 } from '../utils/render-utils.js';
+import { initPagePreview } from '../utils/page-preview.js';
 import { isCpdfAvailable } from '../utils/cpdf-helper.js';
 import {
   showWasmRequiredDialog,
@@ -210,6 +211,8 @@ async function renderPageMergeThumbnails() {
           },
         }
       );
+
+      initPagePreview(container, pdfjsDoc);
     }
 
     mergeState.cachedThumbnails = true;

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

@@ -1,11 +1,20 @@
 import { createIcons, icons } from 'lucide';
 import { showAlert, showLoader, hideLoader } from '../ui.js';
-import { readFileAsArrayBuffer, formatBytes, downloadFile, getPDFDocument } from '../utils/helpers.js';
+import {
+  readFileAsArrayBuffer,
+  formatBytes,
+  downloadFile,
+  getPDFDocument,
+} from '../utils/helpers.js';
+import { initPagePreview } from '../utils/page-preview.js';
 import { PDFDocument } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import Sortable from 'sortablejs';
 
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
 
 interface OrganizeState {
   file: File | null;
@@ -39,8 +48,13 @@ function initializePage() {
   if (fileInput) fileInput.addEventListener('change', handleFileUpload);
 
   if (dropZone) {
-        dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('bg-gray-700'); });
+    dropZone.addEventListener('dragover', (e) => {
-        dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('bg-gray-700'); });
+      e.preventDefault();
+      dropZone.classList.add('bg-gray-700');
+    });
+    dropZone.addEventListener('dragleave', () => {
+      dropZone.classList.remove('bg-gray-700');
+    });
     dropZone.addEventListener('drop', (e) => {
       e.preventDefault();
       dropZone.classList.remove('bg-gray-700');
@@ -64,7 +78,9 @@ function initializePage() {
 }
 
 function applyCustomOrder() {
-    const orderInput = document.getElementById('page-order-input') as HTMLInputElement;
+  const orderInput = document.getElementById(
+    'page-order-input'
+  ) as HTMLInputElement;
   const grid = document.getElementById('page-grid');
 
   if (!orderInput || !grid) return;
@@ -75,24 +91,30 @@ function applyCustomOrder() {
     return;
   }
 
-    const newOrder = orderString.split(',').map(s => parseInt(s.trim(), 10));
+  const newOrder = orderString.split(',').map((s) => parseInt(s.trim(), 10));
 
   // Validation
   const currentGridCount = grid.children.length;
-    const validNumbers = newOrder.every(n => !isNaN(n) && n > 0); // Basic check, will validate against available thumbnails
+  const validNumbers = newOrder.every((n) => !isNaN(n) && n > 0); // Basic check, will validate against available thumbnails
   if (!validNumbers) {
     showAlert('Invalid Page Numbers', `Please enter positive numbers.`);
     return;
   }
 
   if (newOrder.length !== currentGridCount) {
-        showAlert('Incorrect Page Count', `The number of pages specified (${newOrder.length}) does not match the current number of pages in the document (${currentGridCount}). Please provide a complete ordering for all pages.`);
+    showAlert(
+      'Incorrect Page Count',
+      `The number of pages specified (${newOrder.length}) does not match the current number of pages in the document (${currentGridCount}). Please provide a complete ordering for all pages.`
+    );
     return;
   }
 
   const uniqueNumbers = new Set(newOrder);
   if (uniqueNumbers.size !== newOrder.length) {
-        showAlert('Duplicate Page Numbers', 'Please ensure all page numbers in the order are unique.');
+    showAlert(
+      'Duplicate Page Numbers',
+      'Please ensure all page numbers in the order are unique.'
+    );
     return;
   }
 
@@ -103,7 +125,8 @@ function applyCustomOrder() {
   for (const pageNum of newOrder) {
     const originalIndexToFind = pageNum - 1; // pageNum is 1-based, originalPageIndex is 0-based
     const foundThumbnail = currentThumbnails.find(
-            thumb => thumb.dataset.originalPageIndex === originalIndexToFind.toString()
+      (thumb) =>
+        thumb.dataset.originalPageIndex === originalIndexToFind.toString()
     );
 
     if (foundThumbnail) {
@@ -112,16 +135,24 @@ function applyCustomOrder() {
     }
   }
 
-    const allOriginalIndicesPresent = currentThumbnails.every(thumb => foundIndices.has(thumb.dataset.originalPageIndex));
+  const allOriginalIndicesPresent = currentThumbnails.every((thumb) =>
+    foundIndices.has(thumb.dataset.originalPageIndex)
+  );
 
-    if (reorderedThumbnails.length !== currentGridCount || !allOriginalIndicesPresent) {
+  if (
-        showAlert('Invalid Page Order', 'The specified page order is incomplete or contains invalid page numbers. Please ensure you provide a new position for every original page.');
+    reorderedThumbnails.length !== currentGridCount ||
+    !allOriginalIndicesPresent
+  ) {
+    showAlert(
+      'Invalid Page Order',
+      'The specified page order is incomplete or contains invalid page numbers. Please ensure you provide a new position for every original page.'
+    );
     return;
   }
 
   // Clear the grid and append the reordered thumbnails
   grid.innerHTML = '';
-    reorderedThumbnails.forEach(thumb => grid.appendChild(thumb));
+  reorderedThumbnails.forEach((thumb) => grid.appendChild(thumb));
 
   initializeSortable(); // Re-initialize sortable on the new order
 
@@ -134,7 +165,10 @@ function handleFileUpload(e: Event) {
 }
 
 async function handleFile(file: File) {
-    if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
+  if (
+    file.type !== 'application/pdf' &&
+    !file.name.toLowerCase().endsWith('.pdf')
+  ) {
     showAlert('Invalid File', 'Please select a PDF file.');
     return;
   }
@@ -144,8 +178,13 @@ async function handleFile(file: File) {
 
   try {
     const arrayBuffer = await readFileAsArrayBuffer(file);
-        organizeState.pdfDoc = await PDFDocument.load(arrayBuffer as ArrayBuffer, { ignoreEncryption: true, throwOnInvalidObject: false });
+    organizeState.pdfDoc = await PDFDocument.load(arrayBuffer as ArrayBuffer, {
-        organizeState.pdfJsDoc = await getPDFDocument({ data: (arrayBuffer as ArrayBuffer).slice(0) }).promise;
+      ignoreEncryption: true,
+      throwOnInvalidObject: false,
+    });
+    organizeState.pdfJsDoc = await getPDFDocument({
+      data: (arrayBuffer as ArrayBuffer).slice(0),
+    }).promise;
     organizeState.totalPages = organizeState.pdfDoc.getPageCount();
 
     updateFileDisplay();
@@ -164,7 +203,8 @@ function updateFileDisplay() {
 
   fileDisplayArea.innerHTML = '';
   const fileDiv = document.createElement('div');
-    fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
+  fileDiv.className =
+    'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
 
   const infoContainer = document.createElement('div');
   infoContainer.className = 'flex flex-col flex-1 min-w-0';
@@ -220,7 +260,10 @@ function attachEventListeners(element: HTMLElement) {
       renumberPages();
       initializeSortable();
     } else {
-            showAlert('Cannot Delete', 'You cannot delete the last page of the document.');
+      showAlert(
+        'Cannot Delete',
+        'You cannot delete the last page of the document.'
+      );
     }
   });
 }
@@ -238,7 +281,7 @@ async function renderThumbnails() {
 
   for (let i = 1; i <= organizeState.totalPages; i++) {
     const page = await organizeState.pdfJsDoc.getPage(i);
-        const viewport = page.getViewport({ scale: 0.5 });
+    const viewport = page.getViewport({ scale: 1 });
 
     const canvas = document.createElement('canvas');
     canvas.width = viewport.width;
@@ -247,36 +290,42 @@ async function renderThumbnails() {
     await page.render({ canvasContext: ctx, viewport }).promise;
 
     const wrapper = document.createElement('div');
-        wrapper.className = 'page-thumbnail relative cursor-move flex flex-col items-center gap-2';
+    wrapper.className =
+      'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
     wrapper.dataset.originalPageIndex = (i - 1).toString();
+    wrapper.dataset.pageNumber = i.toString();
 
     const imgContainer = document.createElement('div');
-        imgContainer.className = 'w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600';
+    imgContainer.className = 'relative';
 
     const img = document.createElement('img');
     img.src = canvas.toDataURL();
-        img.className = 'max-w-full max-h-full object-contain';
+    img.className = 'rounded-md shadow-md max-w-full h-auto';
     imgContainer.appendChild(img);
 
-        const pageLabel = document.createElement('span');
+    const pageLabel = document.createElement('div');
-        pageLabel.className = 'page-number absolute top-1 left-1 bg-gray-900 bg-opacity-75 text-white text-xs rounded-full px-2 py-1';
+    pageLabel.className =
+      'page-number absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
     pageLabel.textContent = i.toString();
+    imgContainer.appendChild(pageLabel);
 
     const controlsDiv = document.createElement('div');
     controlsDiv.className = 'flex items-center justify-center gap-4';
 
     const duplicateBtn = document.createElement('button');
-        duplicateBtn.className = 'duplicate-btn bg-green-600 hover:bg-green-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
+    duplicateBtn.className =
+      'duplicate-btn bg-green-600 hover:bg-green-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
     duplicateBtn.title = 'Duplicate Page';
     duplicateBtn.innerHTML = '<i data-lucide="copy-plus" class="w-5 h-5"></i>';
 
     const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'delete-btn bg-red-600 hover:bg-red-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
+    deleteBtn.className =
+      'delete-btn bg-red-600 hover:bg-red-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
     deleteBtn.title = 'Delete Page';
     deleteBtn.innerHTML = '<i data-lucide="x-circle" class="w-5 h-5"></i>';
 
     controlsDiv.append(duplicateBtn, deleteBtn);
-        wrapper.append(imgContainer, pageLabel, controlsDiv);
+    wrapper.append(imgContainer, controlsDiv);
     grid.appendChild(wrapper);
 
     attachEventListeners(wrapper);
@@ -284,6 +333,7 @@ async function renderThumbnails() {
 
   createIcons({ icons });
   initializeSortable();
+  initPagePreview(grid, organizeState.pdfJsDoc);
 }
 
 function initializeSortable() {
@@ -317,8 +367,10 @@ async function saveChanges() {
 
     const finalPageElements = grid.querySelectorAll('.page-thumbnail');
     const finalIndices = Array.from(finalPageElements)
-            .map(el => parseInt((el as HTMLElement).dataset.originalPageIndex || '', 10))
+      .map((el) =>
-            .filter(index => !isNaN(index) && index >= 0);
+        parseInt((el as HTMLElement).dataset.originalPageIndex || '', 10)
+      )
+      .filter((index) => !isNaN(index) && index >= 0);
 
     if (finalIndices.length === 0) {
       showAlert('Error', 'No valid pages to save.');
@@ -326,15 +378,23 @@ async function saveChanges() {
     }
 
     const newPdf = await PDFDocument.create();
-        const copiedPages = await newPdf.copyPages(organizeState.pdfDoc, finalIndices);
+    const copiedPages = await newPdf.copyPages(
-        copiedPages.forEach(page => newPdf.addPage(page));
+      organizeState.pdfDoc,
+      finalIndices
+    );
+    copiedPages.forEach((page) => newPdf.addPage(page));
 
     const pdfBytes = await newPdf.save();
     const baseName = organizeState.file?.name.replace('.pdf', '') || 'document';
-        downloadFile(new Blob([pdfBytes as BlobPart], { type: 'application/pdf' }), `${baseName}_organized.pdf`);
+    downloadFile(
+      new Blob([pdfBytes as BlobPart], { type: 'application/pdf' }),
+      `${baseName}_organized.pdf`
+    );
 
     hideLoader();
-        showAlert('Success', 'PDF organized successfully!', 'success', () => resetState());
+    showAlert('Success', 'PDF organized successfully!', 'success', () =>
+      resetState()
+    );
   } catch (error) {
     console.error('Error saving changes:', error);
     hideLoader();

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

@@ -39,9 +39,13 @@ function resetState() {
   if (fileInput) fileInput.value = '';
 
   const previewArea = document.getElementById('booklet-preview');
-    if (previewArea) previewArea.innerHTML = '<p class="text-gray-400 text-center py-8">Upload a PDF and click "Generate Preview" to see the booklet layout</p>';
+  if (previewArea)
+    previewArea.innerHTML =
+      '<p class="text-gray-400 text-center py-8">Upload a PDF and click "Generate Preview" to see the booklet layout</p>';
 
-    const downloadBtn = document.getElementById('download-btn') as HTMLButtonElement;
+  const downloadBtn = document.getElementById(
+    'download-btn'
+  ) as HTMLButtonElement;
   if (downloadBtn) downloadBtn.disabled = true;
 }
 
@@ -55,7 +59,8 @@ async function updateUI() {
 
   if (pageState.file) {
     const fileDiv = document.createElement('div');
-        fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
+    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';
@@ -88,10 +93,12 @@ async function updateUI() {
 
       pageState.pdfDoc = await PDFLibDocument.load(pageState.pdfBytes, {
         ignoreEncryption: true,
-                throwOnInvalidObject: false
+        throwOnInvalidObject: false,
       });
 
-            pageState.pdfjsDoc = await pdfjsLib.getDocument({ data: pageState.pdfBytes.slice() }).promise;
+      pageState.pdfjsDoc = await pdfjsLib.getDocument({
+        data: pageState.pdfBytes.slice(),
+      }).promise;
 
       hideLoader();
 
@@ -100,7 +107,9 @@ async function updateUI() {
 
       if (toolOptions) toolOptions.classList.remove('hidden');
 
-            const previewBtn = document.getElementById('preview-btn') as HTMLButtonElement;
+      const previewBtn = document.getElementById(
+        'preview-btn'
+      ) as HTMLButtonElement;
       if (previewBtn) previewBtn.disabled = false;
     } catch (error) {
       console.error('Error loading PDF:', error);
@@ -114,25 +123,45 @@ async function updateUI() {
 }
 
 function getGridDimensions(): { rows: number; cols: number } {
-    const gridMode = (document.querySelector('input[name="grid-mode"]:checked') as HTMLInputElement)?.value || '1x2';
+  const gridMode =
+    (
+      document.querySelector(
+        'input[name="grid-mode"]:checked'
+      ) as HTMLInputElement
+    )?.value || '1x2';
   switch (gridMode) {
-        case '1x2': return { rows: 1, cols: 2 };
+    case '1x2':
-        case '2x2': return { rows: 2, cols: 2 };
+      return { rows: 1, cols: 2 };
-        case '2x4': return { rows: 2, cols: 4 };
+    case '2x2':
-        case '4x4': return { rows: 4, cols: 4 };
+      return { rows: 2, cols: 2 };
-        default: return { rows: 1, cols: 2 };
+    case '2x4':
+      return { rows: 2, cols: 4 };
+    case '4x4':
+      return { rows: 4, cols: 4 };
+    default:
+      return { rows: 1, cols: 2 };
   }
 }
 
 function getOrientation(isBookletMode: boolean): 'portrait' | 'landscape' {
-    const orientationValue = (document.querySelector('input[name="orientation"]:checked') as HTMLInputElement)?.value || 'auto';
+  const orientationValue =
+    (
+      document.querySelector(
+        'input[name="orientation"]:checked'
+      ) as HTMLInputElement
+    )?.value || 'auto';
   if (orientationValue === 'portrait') return 'portrait';
   if (orientationValue === 'landscape') return 'landscape';
   return isBookletMode ? 'landscape' : 'portrait';
 }
 
-function getSheetDimensions(isBookletMode: boolean): { width: number; height: number } {
+function getSheetDimensions(isBookletMode: boolean): {
-    const paperSizeKey = (document.getElementById('paper-size') as HTMLSelectElement).value as keyof typeof PageSizes;
+  width: number;
+  height: number;
+} {
+  const paperSizeKey = (
+    document.getElementById('paper-size') as HTMLSelectElement
+  ).value as keyof typeof PageSizes;
   const pageDims = PageSizes[paperSizeKey] || PageSizes.Letter;
   const orientation = getOrientation(isBookletMode);
   if (orientation === 'landscape') {
@@ -161,7 +190,8 @@ async function generatePreview() {
     numSheets = Math.ceil(totalPages / pagesPerSheet);
   }
 
-    const { width: sheetWidth, height: sheetHeight } = getSheetDimensions(isBookletMode);
+  const { width: sheetWidth, height: sheetHeight } =
+    getSheetDimensions(isBookletMode);
 
   // Get container width to make canvas fill it
   const previewContainer = document.getElementById('booklet-preview')!;
@@ -170,13 +200,21 @@ async function generatePreview() {
   const canvasWidth = containerWidth;
   const canvasHeight = containerWidth / aspectRatio;
 
-    previewArea.innerHTML = '<p class="text-gray-400 text-center py-4">Generating preview...</p>';
+  previewArea.innerHTML =
+    '<p class="text-gray-400 text-center py-4">Generating preview...</p>';
 
-    const totalRounded = isBookletMode ? Math.ceil(totalPages / 4) * 4 : totalPages;
+  const totalRounded = isBookletMode
-    const rotationMode = (document.querySelector('input[name="rotation"]:checked') as HTMLInputElement)?.value || 'none';
+    ? Math.ceil(totalPages / 4) * 4
+    : totalPages;
+  const rotationMode =
+    (
+      document.querySelector(
+        'input[name="rotation"]:checked'
+      ) as HTMLInputElement
+    )?.value || 'none';
 
   const pageThumbnails: Map<number, ImageBitmap> = new Map();
-    const thumbnailScale = 0.3;
+  const thumbnailScale = 1;
 
   for (let i = 1; i <= totalPages; i++) {
     try {
@@ -247,9 +285,15 @@ async function generatePreview() {
           const physicalSheet = Math.floor(sheetIndex / 2);
           const isFrontSide = sheetIndex % 2 === 0;
           if (isFrontSide) {
-                        pageNumber = c === 0 ? totalRounded - 2 * physicalSheet : 2 * physicalSheet + 1;
+            pageNumber =
+              c === 0
+                ? totalRounded - 2 * physicalSheet
+                : 2 * physicalSheet + 1;
           } else {
-                        pageNumber = c === 0 ? 2 * physicalSheet + 2 : totalRounded - 2 * physicalSheet - 1;
+            pageNumber =
+              c === 0
+                ? 2 * physicalSheet + 2
+                : totalRounded - 2 * physicalSheet - 1;
           }
         } else {
           pageNumber = sheetIndex * pagesPerSheet + slotIndex + 1;
@@ -268,12 +312,16 @@ async function generatePreview() {
             let rotation = 0;
             if (rotationMode === '90cw') rotation = 90;
             else if (rotationMode === '90ccw') rotation = -90;
-                        else if (rotationMode === 'alternate') rotation = (pageNumber % 2 === 1) ? 90 : -90;
+            else if (rotationMode === 'alternate')
+              rotation = pageNumber % 2 === 1 ? 90 : -90;
 
             const isRotated = rotation !== 0;
             const srcWidth = isRotated ? thumbnail.height : thumbnail.width;
             const srcHeight = isRotated ? thumbnail.width : thumbnail.height;
-                        const scale = Math.min(slotWidth / srcWidth, slotHeight / srcHeight);
+            const scale = Math.min(
+              slotWidth / srcWidth,
+              slotHeight / srcHeight
+            );
             const drawWidth = srcWidth * scale;
             const drawHeight = srcHeight * scale;
             const drawX = x + (slotWidth - drawWidth) / 2;
@@ -285,7 +333,13 @@ async function generatePreview() {
               const centerY = drawY + drawHeight / 2;
               ctx.translate(centerX, centerY);
               ctx.rotate((rotation * Math.PI) / 180);
-                            ctx.drawImage(thumbnail, -drawHeight / 2, -drawWidth / 2, drawHeight, drawWidth);
+              ctx.drawImage(
+                thumbnail,
+                -drawHeight / 2,
+                -drawWidth / 2,
+                drawHeight,
+                drawWidth
+              );
             } else {
               ctx.drawImage(thumbnail, drawX, drawY, drawWidth, drawHeight);
             }
@@ -298,7 +352,11 @@ async function generatePreview() {
             ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
             ctx.font = 'bold 10px sans-serif';
             ctx.textAlign = 'center';
-                        ctx.fillText(`${pageNumber}`, x + slotWidth / 2, y + slotHeight - 4);
+            ctx.fillText(
+              `${pageNumber}`,
+              x + slotWidth / 2,
+              y + slotHeight - 4
+            );
           }
         } else {
           ctx.fillStyle = '#374151';
@@ -321,26 +379,39 @@ async function generatePreview() {
     ctx.textAlign = 'right';
     ctx.textBaseline = 'top';
     const sideLabel = isBookletMode ? (isFront ? 'Front' : 'Back') : '';
-        ctx.fillText(`Sheet ${Math.floor(sheetIndex / (isBookletMode ? 2 : 1)) + 1} ${sideLabel}`, canvasWidth - 6, 4);
+    ctx.fillText(
+      `Sheet ${Math.floor(sheetIndex / (isBookletMode ? 2 : 1)) + 1} ${sideLabel}`,
+      canvasWidth - 6,
+      4
+    );
 
     previewArea.appendChild(canvas);
   }
 
-    pageThumbnails.forEach(bitmap => bitmap.close());
+  pageThumbnails.forEach((bitmap) => bitmap.close());
 
-    const downloadBtn = document.getElementById('download-btn') as HTMLButtonElement;
+  const downloadBtn = document.getElementById(
+    'download-btn'
+  ) as HTMLButtonElement;
   downloadBtn.disabled = false;
 }
 
 function applyRotation(doc: PDFLibDocument, mode: string) {
   const pages = doc.getPages();
   pages.forEach((page, index) => {
-        let rotation = 0;
+    let rotation: number;
     switch (mode) {
-            case '90cw': rotation = 90; break;
+      case '90cw':
-            case '90ccw': rotation = -90; break;
+        rotation = 90;
-            case 'alternate': rotation = (index % 2 === 0) ? 90 : -90; break;
+        break;
-            default: rotation = 0;
+      case '90ccw':
+        rotation = -90;
+        break;
+      case 'alternate':
+        rotation = index % 2 === 0 ? 90 : -90;
+        break;
+      default:
+        rotation = 0;
     }
     if (rotation !== 0) {
       page.setRotation(degrees(page.getRotation().angle + rotation));
@@ -358,7 +429,12 @@ async function createBooklet() {
 
   try {
     const sourceDoc = await PDFLibDocument.load(pageState.pdfBytes.slice());
-        const rotationMode = (document.querySelector('input[name="rotation"]:checked') as HTMLInputElement)?.value || 'none';
+    const rotationMode =
+      (
+        document.querySelector(
+          'input[name="rotation"]:checked'
+        ) as HTMLInputElement
+      )?.value || 'none';
     applyRotation(sourceDoc, rotationMode);
 
     const totalPages = sourceDoc.getPageCount();
@@ -366,7 +442,8 @@ async function createBooklet() {
     const pagesPerSheet = rows * cols;
     const isBookletMode = rows === 1 && cols === 2;
 
-        const { width: sheetWidth, height: sheetHeight } = getSheetDimensions(isBookletMode);
+    const { width: sheetWidth, height: sheetHeight } =
+      getSheetDimensions(isBookletMode);
 
     const outputDoc = await PDFLibDocument.create();
 
@@ -396,27 +473,43 @@ async function createBooklet() {
             const physicalSheet = Math.floor(sheetIndex / 2);
             const isFrontSide = sheetIndex % 2 === 0;
             if (isFrontSide) {
-                            pageNumber = c === 0 ? totalRounded - 2 * physicalSheet : 2 * physicalSheet + 1;
+              pageNumber =
+                c === 0
+                  ? totalRounded - 2 * physicalSheet
+                  : 2 * physicalSheet + 1;
             } else {
-                            pageNumber = c === 0 ? 2 * physicalSheet + 2 : totalRounded - 2 * physicalSheet - 1;
+              pageNumber =
+                c === 0
+                  ? 2 * physicalSheet + 2
+                  : totalRounded - 2 * physicalSheet - 1;
             }
           } else {
             pageNumber = sheetIndex * pagesPerSheet + slotIndex + 1;
           }
 
           if (pageNumber >= 1 && pageNumber <= totalPages) {
-                        const [embeddedPage] = await outputDoc.embedPdf(sourceDoc, [pageNumber - 1]);
+            const [embeddedPage] = await outputDoc.embedPdf(sourceDoc, [
+              pageNumber - 1,
+            ]);
             const { width: srcW, height: srcH } = embeddedPage;
 
             const availableWidth = cellWidth - padding * 2;
             const availableHeight = cellHeight - padding * 2;
-                        const scale = Math.min(availableWidth / srcW, availableHeight / srcH);
+            const scale = Math.min(
+              availableWidth / srcW,
+              availableHeight / srcH
+            );
 
             const scaledWidth = srcW * scale;
             const scaledHeight = srcH * scale;
 
-                        const x = c * cellWidth + padding + (availableWidth - scaledWidth) / 2;
+            const x =
-                        const y = sheetHeight - (r + 1) * cellHeight + padding + (availableHeight - scaledHeight) / 2;
+              c * cellWidth + padding + (availableWidth - scaledWidth) / 2;
+            const y =
+              sheetHeight -
+              (r + 1) * cellHeight +
+              padding +
+              (availableHeight - scaledHeight) / 2;
 
             outputPage.drawPage(embeddedPage, {
               x,
@@ -430,16 +523,22 @@ async function createBooklet() {
     }
 
     const pdfBytes = await outputDoc.save();
-        const originalName = pageState.file?.name.replace(/\.pdf$/i, '') || 'document';
+    const originalName =
+      pageState.file?.name.replace(/\.pdf$/i, '') || 'document';
 
     downloadFile(
       new Blob([new Uint8Array(pdfBytes)], { type: 'application/pdf' }),
       `${originalName}_booklet.pdf`
     );
 
-        showAlert('Success', `Booklet created with ${numSheets} sheets!`, 'success', function () {
+    showAlert(
+      'Success',
+      `Booklet created with ${numSheets} sheets!`,
+      'success',
+      function () {
         resetState();
-        });
+      }
+    );
   } catch (e) {
     console.error(e);
     showAlert('Error', 'An error occurred while creating the booklet.');
@@ -451,7 +550,10 @@ async function createBooklet() {
 function handleFileSelect(files: FileList | null) {
   if (files && files.length > 0) {
     const file = files[0];
-        if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
+    if (
+      file.type === 'application/pdf' ||
+      file.name.toLowerCase().endsWith('.pdf')
+    ) {
       pageState.file = file;
       updateUI();
     }
@@ -492,7 +594,10 @@ document.addEventListener('DOMContentLoaded', function () {
       const files = e.dataTransfer?.files;
       if (files && files.length > 0) {
         const pdfFiles = Array.from(files).filter(function (f) {
-                    return f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
+          return (
+            f.type === 'application/pdf' ||
+            f.name.toLowerCase().endsWith('.pdf')
+          );
         });
         if (pdfFiles.length > 0) {
           const dataTransfer = new DataTransfer();

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

@@ -1133,9 +1133,7 @@ function showNodeSettings(node: BaseWorkflowNode) {
       { label: 'Top Right', value: 'top-right' },
     ],
     orientation: [
-      { label: 'Vertical', value: 'vertical' },
+      { label: 'Auto (Keep Original)', value: 'auto' },
-      { label: 'Horizontal', value: 'horizontal' },
-      { label: 'Auto', value: 'auto' },
       { label: 'Portrait', value: 'portrait' },
       { label: 'Landscape', value: 'landscape' },
     ],
@@ -1160,6 +1158,23 @@ function showNodeSettings(node: BaseWorkflowNode) {
       { label: 'Letter', value: 'letter' },
       { label: 'Legal', value: 'legal' },
     ],
+    targetSize: [
+      { label: 'A4', value: 'A4' },
+      { label: 'Letter', value: 'Letter' },
+      { label: 'Legal', value: 'Legal' },
+      { label: 'A3', value: 'A3' },
+      { label: 'A5', value: 'A5' },
+      { label: 'Tabloid', value: 'Tabloid' },
+      { label: 'Custom', value: 'Custom' },
+    ],
+    scalingMode: [
+      { label: 'Fit (keep full page visible)', value: 'fit' },
+      { label: 'Fill (cover full target page)', value: 'fill' },
+    ],
+    customUnits: [
+      { label: 'Millimeters (mm)', value: 'mm' },
+      { label: 'Inches (in)', value: 'in' },
+    ],
     numberFormat: [
       { label: 'Simple (1, 2, 3)', value: 'simple' },
       { label: 'Page X of Y', value: 'page_x_of_y' },
@@ -1294,6 +1309,9 @@ function showNodeSettings(node: BaseWorkflowNode) {
       text: ['text'],
       area: ['x0', 'y0', 'x1', 'y1'],
     },
+    targetSize: {
+      Custom: ['customWidth', 'customHeight', 'customUnits'],
+    },
   };
 
   const controlWrappers: Record<string, HTMLElement> = {};

src/js/logic/remove-blank-pages-page.ts

@@ -1,8 +1,12 @@
 import { PDFDocument } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import { createIcons, icons } from 'lucide';
+import { initPagePreview } from '../utils/page-preview.js';
 
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
 
 // State
 const pageState: {
@@ -14,7 +18,7 @@ const pageState: {
   pdfDoc: null,
   file: null,
   detectedBlankPages: [],
-    pageThumbnails: new Map()
+  pageThumbnails: new Map(),
 };
 
 function showLoader(msg = 'Processing...') {
@@ -23,9 +27,16 @@ function showLoader(msg = 'Processing...') {
   if (txt) txt.textContent = msg;
 }
 
-function hideLoader() { document.getElementById('loader-modal')?.classList.add('hidden'); }
+function hideLoader() {
+  document.getElementById('loader-modal')?.classList.add('hidden');
+}
 
-function showAlert(title: string, msg: string, type = 'error', cb?: () => void) {
+function showAlert(
+  title: string,
+  msg: string,
+  type = 'error',
+  cb?: () => void
+) {
   const modal = document.getElementById('alert-modal');
   const t = document.getElementById('alert-title');
   const m = document.getElementById('alert-message');
@@ -46,7 +57,9 @@ function showAlert(title: string, msg: string, type = 'error', cb?: () => void)
 function downloadFile(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
-    a.href = url; a.download = filename; a.click();
+  a.href = url;
+  a.download = filename;
+  a.click();
   URL.revokeObjectURL(url);
 }
 
@@ -54,7 +67,8 @@ function updateFileDisplay() {
   const area = document.getElementById('file-display-area');
   if (!area || !pageState.file || !pageState.pdfDoc) return;
 
-    const fileSize = pageState.file.size < 1024 * 1024
+  const fileSize =
+    pageState.file.size < 1024 * 1024
       ? `${(pageState.file.size / 1024).toFixed(1)} KB`
       : `${(pageState.file.size / 1024 / 1024).toFixed(2)} MB`;
   const pageCount = pageState.pdfDoc.getPageCount();
@@ -80,7 +94,7 @@ function resetState() {
   pageState.pdfDoc = null;
   pageState.file = null;
   pageState.detectedBlankPages = [];
-    pageState.pageThumbnails.forEach(url => URL.revokeObjectURL(url));
+  pageState.pageThumbnails.forEach((url) => URL.revokeObjectURL(url));
   pageState.pageThumbnails.clear();
 
   const area = document.getElementById('file-display-area');
@@ -89,6 +103,12 @@ function resetState() {
   document.getElementById('preview-panel')?.classList.add('hidden');
   const inp = document.getElementById('file-input') as HTMLInputElement;
   if (inp) inp.value = '';
+  const slider = document.getElementById(
+    'sensitivity-slider'
+  ) as HTMLInputElement;
+  if (slider) slider.value = '80';
+  const sliderLabel = document.getElementById('sensitivity-value');
+  if (sliderLabel) sliderLabel.textContent = '80';
 }
 
 async function handleFileUpload(file: File) {
@@ -113,8 +133,11 @@ async function handleFileUpload(file: File) {
   }
 }
 
-async function isPageBlank(page: any, threshold = 250): Promise<boolean> {
+async function isPageBlank(
-    const viewport = page.getViewport({ scale: 0.5 }); // Lower scale for faster processing
+  page: any,
+  maxNonWhitePercent = 0.5
+): Promise<boolean> {
+  const viewport = page.getViewport({ scale: 0.5 });
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   if (!ctx) return false;
@@ -126,19 +149,20 @@ async function isPageBlank(page: any, threshold = 250): Promise<boolean> {
 
   const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   const data = imageData.data;
+  const totalPixels = data.length / 4;
 
-    let totalBrightness = 0;
+  let nonWhitePixels = 0;
   for (let i = 0; i < data.length; i += 4) {
-        const r = data[i], g = data[i + 1], b = data[i + 2];
+    const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
-        totalBrightness += (r + g + b) / 3;
+    if (brightness < 240) nonWhitePixels++;
   }
 
-    const avgBrightness = totalBrightness / (data.length / 4);
+  const nonWhitePercent = (nonWhitePixels / totalPixels) * 100;
-    return avgBrightness > threshold;
+  return nonWhitePercent <= maxNonWhitePercent;
 }
 
 async function generateThumbnail(page: any): Promise<string> {
-    const viewport = page.getViewport({ scale: 0.3 });
+  const viewport = page.getViewport({ scale: 1 });
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   if (!ctx) return '';
@@ -151,11 +175,14 @@ async function generateThumbnail(page: any): Promise<string> {
 }
 
 async function detectBlankPages() {
-    if (!pageState.pdfDoc || !pageState.file) return showAlert('Error', 'Please upload a PDF first.');
+  if (!pageState.pdfDoc || !pageState.file)
+    return showAlert('Error', 'Please upload a PDF first.');
 
-    const sensitivitySlider = document.getElementById('sensitivity-slider') as HTMLInputElement;
+  const sensitivitySlider = document.getElementById(
+    'sensitivity-slider'
+  ) as HTMLInputElement;
   const sensitivityPercent = parseInt(sensitivitySlider?.value || '80');
-    const threshold = Math.round(255 - (sensitivityPercent * 2.55));
+  const maxNonWhitePercent = 5 - (sensitivityPercent / 100) * 4.9;
 
   showLoader('Detecting blank pages...');
   try {
@@ -164,12 +191,12 @@ async function detectBlankPages() {
     const totalPages = pdfDoc.numPages;
 
     pageState.detectedBlankPages = [];
-        pageState.pageThumbnails.forEach(url => URL.revokeObjectURL(url));
+    pageState.pageThumbnails.forEach((url) => URL.revokeObjectURL(url));
     pageState.pageThumbnails.clear();
 
     for (let i = 1; i <= totalPages; i++) {
       const page = await pdfDoc.getPage(i);
-            if (await isPageBlank(page, threshold)) {
+      if (await isPageBlank(page, maxNonWhitePercent)) {
         pageState.detectedBlankPages.push(i - 1); // 0-indexed
         const thumbnail = await generateThumbnail(page);
         pageState.pageThumbnails.set(i - 1, thumbnail);
@@ -185,6 +212,10 @@ async function detectBlankPages() {
     // Show preview panel
     updatePreviewPanel();
     document.getElementById('preview-panel')?.classList.remove('hidden');
+
+    const previewContainer = document.getElementById('blank-pages-preview');
+    if (previewContainer) initPagePreview(previewContainer, pdfDoc);
+
     hideLoader();
   } catch (e) {
     console.error(e);
@@ -205,17 +236,18 @@ function updatePreviewPanel() {
   pageState.detectedBlankPages.forEach((pageIndex) => {
     const thumbnail = pageState.pageThumbnails.get(pageIndex) || '';
     const div = document.createElement('div');
-        div.className = 'relative cursor-pointer group';
+    div.className =
+      'relative cursor-pointer flex flex-col items-center gap-1 p-2 border-2 border-red-500 rounded-lg bg-gray-700 transition-colors group';
     div.dataset.pageIndex = String(pageIndex);
     div.dataset.selected = 'true';
 
     div.innerHTML = `
-            <div class="relative border-2 border-red-500 rounded-lg overflow-hidden transition-all">
+            <div class="relative">
-                <img src="${thumbnail}" alt="Page ${pageIndex + 1}" class="w-full h-auto">
+                <img src="${thumbnail}" alt="Page ${pageIndex + 1}" class="rounded-md shadow-md max-w-full h-auto">
-                <div class="absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs text-center py-1">
+                <div class="absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none">
-                    Page ${pageIndex + 1}
+                    ${pageIndex + 1}
                 </div>
-                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center check-mark">
+                <div class="absolute top-1 right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center check-mark z-10">
                     <i data-lucide="check" class="w-3 h-3 text-white"></i>
                 </div>
             </div>
@@ -230,29 +262,29 @@ function updatePreviewPanel() {
 
 function togglePageSelection(div: HTMLElement, pageIndex: number) {
   const isSelected = div.dataset.selected === 'true';
-    const border = div.querySelector('.border-2') as HTMLElement;
   const checkMark = div.querySelector('.check-mark') as HTMLElement;
 
   if (isSelected) {
     div.dataset.selected = 'false';
-        border?.classList.remove('border-red-500');
+    div.classList.remove('border-red-500');
-        border?.classList.add('border-gray-500', 'opacity-50');
+    div.classList.add('border-gray-600', 'opacity-50');
     checkMark?.classList.add('hidden');
   } else {
     div.dataset.selected = 'true';
-        border?.classList.add('border-red-500');
+    div.classList.add('border-red-500');
-        border?.classList.remove('border-gray-500', 'opacity-50');
+    div.classList.remove('border-gray-600', 'opacity-50');
     checkMark?.classList.remove('hidden');
   }
 }
 
 async function processRemoveBlankPages() {
-    if (!pageState.pdfDoc || !pageState.file) return showAlert('Error', 'Please upload a PDF first.');
+  if (!pageState.pdfDoc || !pageState.file)
+    return showAlert('Error', 'Please upload a PDF first.');
 
   // Get selected pages to remove
   const previewContainer = document.getElementById('blank-pages-preview');
   const selectedPages: number[] = [];
-    previewContainer?.querySelectorAll('[data-selected="true"]').forEach(el => {
+  previewContainer?.querySelectorAll('[data-selected="true"]').forEach((el) => {
     const pageIndex = parseInt((el as HTMLElement).dataset.pageIndex || '-1');
     if (pageIndex >= 0) selectedPages.push(pageIndex);
   });
@@ -275,8 +307,16 @@ async function processRemoveBlankPages() {
     }
 
     const newPdfBytes = await newPdf.save();
-        downloadFile(new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }), 'blank-pages-removed.pdf');
+    downloadFile(
-        showAlert('Success', `Removed ${selectedPages.length} blank page(s) successfully!`, 'success', resetState);
+      new Blob([new Uint8Array(newPdfBytes)], { type: 'application/pdf' }),
+      'blank-pages-removed.pdf'
+    );
+    showAlert(
+      'Success',
+      `Removed ${selectedPages.length} blank page(s) successfully!`,
+      'success',
+      resetState
+    );
   } catch (e) {
     console.error(e);
     showAlert('Error', 'Could not remove blank pages.');
@@ -290,7 +330,9 @@ document.addEventListener('DOMContentLoaded', () => {
   const dropZone = document.getElementById('drop-zone');
   const detectBtn = document.getElementById('detect-btn');
   const processBtn = document.getElementById('process-btn');
-    const sensitivitySlider = document.getElementById('sensitivity-slider') as HTMLInputElement;
+  const sensitivitySlider = document.getElementById(
+    'sensitivity-slider'
+  ) as HTMLInputElement;
   const sensitivityValue = document.getElementById('sensitivity-value');
 
   sensitivitySlider?.addEventListener('input', (e) => {

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

@@ -12,6 +12,7 @@ import {
   renderPagesProgressively,
   cleanupLazyRendering,
 } from '../utils/render-utils.js';
+import { initPagePreview } from '../utils/page-preview.js';
 import { isCpdfAvailable } from '../utils/cpdf-helper.js';
 import { showWasmRequiredDialog } from '../utils/wasm-provider.js';
 import JSZip from 'jszip';
@@ -153,18 +154,24 @@ document.addEventListener('DOMContentLoaded', () => {
       const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
         const wrapper = document.createElement('div');
         wrapper.className =
-          'page-thumbnail-wrapper p-1 border-2 border-transparent rounded-lg cursor-pointer hover:border-indigo-500 relative';
+          'page-thumbnail-wrapper p-2 border-2 border-gray-600 rounded-lg cursor-pointer hover:border-indigo-500 bg-gray-700 transition-colors relative group flex flex-col items-center gap-1';
         wrapper.dataset.pageIndex = (pageNumber - 1).toString();
+        wrapper.dataset.pageNumber = pageNumber.toString();
+
+        const imgContainer = document.createElement('div');
+        imgContainer.className = 'relative';
 
         const img = document.createElement('img');
         img.src = canvas.toDataURL();
-        img.className = 'rounded-md w-full h-auto';
+        img.className = 'rounded-md shadow-md max-w-full h-auto';
 
-        const p = document.createElement('p');
+        const pageNumDiv = document.createElement('div');
-        p.className = 'text-center text-xs mt-1 text-gray-300';
+        pageNumDiv.className =
-        p.textContent = `Page ${pageNumber}`;
+          'absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
+        pageNumDiv.textContent = pageNumber.toString();
 
-        wrapper.append(img, p);
+        imgContainer.append(img, pageNumDiv);
+        wrapper.appendChild(imgContainer);
 
         const handleSelection = (e: any) => {
           e.preventDefault();
@@ -174,10 +181,10 @@ document.addEventListener('DOMContentLoaded', () => {
 
           if (isSelected) {
             wrapper.classList.remove('selected', 'border-indigo-500');
-            wrapper.classList.add('border-transparent');
+            wrapper.classList.add('border-gray-600');
           } else {
             wrapper.classList.add('selected', 'border-indigo-500');
-            wrapper.classList.remove('border-transparent');
+            wrapper.classList.remove('border-gray-600');
           }
         };
 
@@ -203,6 +210,8 @@ document.addEventListener('DOMContentLoaded', () => {
           createIcons({ icons });
         },
       });
+
+      initPagePreview(container, pdf);
     } catch (error) {
       console.error('Error rendering visual selector:', error);
       showAlert('Error', 'Failed to render page previews.');

src/js/types/index.ts

@@ -50,3 +50,4 @@ export * from './bookmark-pdf-type.ts';
 export * from './scanner-effect-type.ts';
 export * from './adjust-colors-type.ts';
 export * from './bates-numbering-type.ts';
+export * from './page-preview-type.ts';

src/js/types/page-preview-type.ts

@@ -0,0 +1,10 @@
+import { PDFDocumentProxy } from 'pdfjs-dist';
+
+export interface PreviewState {
+  modal: HTMLElement | null;
+  pdfjsDoc: PDFDocumentProxy | null;
+  currentPage: number;
+  totalPages: number;
+  isOpen: boolean;
+  container: HTMLElement | null;
+}

src/js/ui.ts

@@ -1,15 +1,24 @@
 import { resetState } from './state.js';
 import { formatBytes, getPDFDocument } from './utils/helpers.js';
 import { tesseractLanguages } from './config/tesseract-languages.js';
-import { renderPagesProgressively, cleanupLazyRendering } from './utils/render-utils.js';
+import {
+  renderPagesProgressively,
+  cleanupLazyRendering,
+} from './utils/render-utils.js';
+import { initPagePreview } from './utils/page-preview.js';
 import { icons, createIcons } from 'lucide';
 import Sortable from 'sortablejs';
-import { getRotationState, updateRotationState } from './utils/rotation-state.js';
+import {
+  getRotationState,
+  updateRotationState,
+} from './utils/rotation-state.js';
 import * as pdfjsLib from 'pdfjs-dist';
 import { t } from './i18n/i18n';
 
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
 
 // Centralizing DOM element selection
 export const dom = {
@@ -50,8 +59,12 @@ export const showLoader = (text = t('common.loading'), progress?: number) => {
   // Add or update progress bar if progress is provided
   const loaderModal = dom.loaderModal;
   if (loaderModal) {
-        let progressBar = loaderModal.querySelector('.loader-progress-bar') as HTMLElement;
+    let progressBar = loaderModal.querySelector(
-        let progressContainer = loaderModal.querySelector('.loader-progress-container') as HTMLElement;
+      '.loader-progress-bar'
+    ) as HTMLElement;
+    let progressContainer = loaderModal.querySelector(
+      '.loader-progress-container'
+    ) as HTMLElement;
 
     if (progress !== undefined && progress >= 0) {
       // Create progress container if it doesn't exist
@@ -64,15 +77,21 @@ export const showLoader = (text = t('common.loading'), progress?: number) => {
                     </div>
                     <p class="loader-progress-text text-xs text-gray-400 mt-1 text-center">0%</p>
                 `;
-                loaderModal.querySelector('.bg-gray-800')?.appendChild(progressContainer);
+        loaderModal
-                progressBar = progressContainer.querySelector('.loader-progress-bar') as HTMLElement;
+          .querySelector('.bg-gray-800')
+          ?.appendChild(progressContainer);
+        progressBar = progressContainer.querySelector(
+          '.loader-progress-bar'
+        ) as HTMLElement;
       }
 
       // Update progress
       if (progressBar) {
         progressBar.style.width = `${progress}%`;
       }
-            const progressText = progressContainer.querySelector('.loader-progress-text');
+      const progressText = progressContainer.querySelector(
+        '.loader-progress-text'
+      );
       if (progressText) {
         progressText.textContent = `${Math.round(progress)}%`;
       }
@@ -92,7 +111,12 @@ export const hideLoader = () => {
   if (dom.loaderModal) dom.loaderModal.classList.add('hidden');
 };
 
-export const showAlert = (title: any, message: any, type: string = 'error', callback?: () => void) => {
+export const showAlert = (
+  title: any,
+  message: any,
+  type: string = 'error',
+  callback?: () => void
+) => {
   if (dom.alertTitle) dom.alertTitle.textContent = title;
   if (dom.alertMessage) dom.alertMessage.textContent = message;
   if (dom.alertModal) dom.alertModal.classList.remove('hidden');
@@ -180,7 +204,12 @@ function initializeOrganizeSortable(containerId: any) {
  * @param {object} pdfDoc The loaded pdf-lib document instance.
  */
 export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
-    const containerId = toolId === 'organize' ? 'page-organizer' : toolId === 'delete-pages' ? 'delete-pages-preview' : 'page-rotator';
+  const containerId =
+    toolId === 'organize'
+      ? 'page-organizer'
+      : toolId === 'delete-pages'
+        ? 'delete-pages-preview'
+        : 'page-rotator';
   const container = document.getElementById(containerId);
   if (!container) return;
 
@@ -204,27 +233,29 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
     wrapper.dataset.pageIndex = pageNumber - 1;
 
     const imgContainer = document.createElement('div');
-        imgContainer.className =
+    imgContainer.className = 'relative';
-            'w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600';
 
     const img = document.createElement('img');
     img.src = canvas.toDataURL();
-        img.className = 'max-w-full max-h-full object-contain';
+    img.className = 'rounded-md shadow-md max-w-full h-auto';
 
     imgContainer.appendChild(img);
 
-        if (toolId === 'organize') {
+    const pageNumSpan = document.createElement('div');
-            wrapper.className = 'page-thumbnail relative group';
-            wrapper.appendChild(imgContainer);
-
-            const pageNumSpan = document.createElement('span');
     pageNumSpan.className =
-                'absolute top-1 left-1 bg-gray-900 bg-opacity-75 text-white text-xs rounded-full px-2 py-1';
+      'absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
     pageNumSpan.textContent = pageNumber.toString();
 
+    if (toolId === 'organize') {
+      wrapper.className =
+        'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
+
+      imgContainer.appendChild(pageNumSpan);
+      wrapper.appendChild(imgContainer);
+
       const deleteBtn = document.createElement('button');
       deleteBtn.className =
-                'delete-page-btn absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center';
+        'delete-page-btn absolute top-1 right-1 bg-red-600 hover:bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center z-10';
       deleteBtn.innerHTML = '&times;';
       deleteBtn.addEventListener('click', (e) => {
         (e.currentTarget as HTMLElement).parentElement.remove();
@@ -232,7 +263,7 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
         // Renumber remaining pages
         const pages = container.querySelectorAll('.page-thumbnail');
         pages.forEach((page, index) => {
-                    const numSpan = page.querySelector('span');
+          const numSpan = page.querySelector('.bg-indigo-600');
           if (numSpan) {
             numSpan.textContent = (index + 1).toString();
           }
@@ -241,9 +272,10 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
         initializeOrganizeSortable(containerId);
       });
 
-            wrapper.append(pageNumSpan, deleteBtn);
+      wrapper.appendChild(deleteBtn);
     } else if (toolId === 'rotate') {
-            wrapper.className = 'page-rotator-item flex flex-col items-center gap-2 relative group';
+      wrapper.className =
+        'page-rotator-item flex flex-col items-center gap-2 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors relative group';
 
       // Read rotation from state (handles "Rotate All" on lazy-loaded pages)
       const rotationStateArray = getRotationState();
@@ -258,34 +290,33 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
         img.style.transform = `rotate(${initialRotation}deg)`;
       }
 
+      imgContainer.appendChild(pageNumSpan);
       wrapper.appendChild(imgContainer);
 
-            // Page Number Overlay (Top Left)
-            const pageNumSpan = document.createElement('span');
-            pageNumSpan.className =
-                'absolute top-2 left-2 bg-gray-900 bg-opacity-75 text-white text-xs font-medium rounded-md px-2 py-1 shadow-sm z-10 pointer-events-none';
-            pageNumSpan.textContent = pageNumber.toString();
-            wrapper.appendChild(pageNumSpan);
-
       const controlsDiv = document.createElement('div');
-            controlsDiv.className = 'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1';
+      controlsDiv.className =
+        'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1';
 
       // Custom Stepper Component
       const stepperContainer = document.createElement('div');
-            stepperContainer.className = 'flex items-center border border-gray-600 rounded-md bg-gray-800 overflow-hidden w-24 h-8';
+      stepperContainer.className =
+        'flex items-center border border-gray-600 rounded-md bg-gray-800 overflow-hidden w-24 h-8';
 
       const decrementBtn = document.createElement('button');
-            decrementBtn.className = 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-r border-gray-600 transition-colors flex items-center justify-center';
+      decrementBtn.className =
+        'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-r border-gray-600 transition-colors flex items-center justify-center';
       decrementBtn.innerHTML = '<i data-lucide="minus" class="w-3 h-3"></i>';
 
       const angleInput = document.createElement('input');
       angleInput.type = 'number';
-            angleInput.className = 'no-spinner w-full h-full bg-transparent text-white text-xs text-center focus:outline-none appearance-none m-0 p-0 border-none';
+      angleInput.className =
+        'no-spinner w-full h-full bg-transparent text-white text-xs text-center focus:outline-none appearance-none m-0 p-0 border-none';
       angleInput.value = initialRotation.toString();
-            angleInput.placeholder = "0";
+      angleInput.placeholder = '0';
 
       const incrementBtn = document.createElement('button');
-            incrementBtn.className = 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-l border-gray-600 transition-colors flex items-center justify-center';
+      incrementBtn.className =
+        'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-l border-gray-600 transition-colors flex items-center justify-center';
       incrementBtn.innerHTML = '<i data-lucide="plus" class="w-3 h-3"></i>';
 
       // Helper to update rotation
@@ -326,7 +357,8 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
       stepperContainer.append(decrementBtn, angleInput, incrementBtn);
 
       const rotateBtn = document.createElement('button');
-            rotateBtn.className = 'rotate-btn btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded-md text-gray-200 transition-colors flex-shrink-0';
+      rotateBtn.className =
+        'rotate-btn btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded-md text-gray-200 transition-colors flex-shrink-0';
       rotateBtn.title = 'Rotate +90°';
       rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4"></i>';
       rotateBtn.addEventListener('click', (e) => {
@@ -338,30 +370,28 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
       controlsDiv.append(stepperContainer, rotateBtn);
       wrapper.appendChild(controlsDiv);
     } else if (toolId === 'delete-pages') {
-            wrapper.className = 'page-thumbnail relative group cursor-pointer transition-all duration-200';
+      wrapper.className =
+        'page-thumbnail relative cursor-pointer flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
       wrapper.dataset.pageNumber = pageNumber.toString();
 
-            const innerContainer = document.createElement('div');
+      imgContainer.appendChild(pageNumSpan);
-            innerContainer.className = 'relative w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600 transition-colors duration-200';
+      wrapper.appendChild(imgContainer);
-            innerContainer.appendChild(img);
-            wrapper.appendChild(innerContainer);
-
-            const pageNumSpan = document.createElement('span');
-            pageNumSpan.className =
-                'absolute top-2 left-2 bg-gray-900 bg-opacity-75 text-white text-xs font-medium rounded-md px-2 py-1 shadow-sm z-10 pointer-events-none';
-            pageNumSpan.textContent = pageNumber.toString();
-            wrapper.appendChild(pageNumSpan);
 
       wrapper.addEventListener('click', () => {
-                const input = document.getElementById('pages-to-delete') as HTMLInputElement;
+        const input = document.getElementById(
+          'pages-to-delete'
+        ) as HTMLInputElement;
         if (!input) return;
 
         const currentVal = input.value;
-                let pages = currentVal.split(',').map(s => s.trim()).filter(s => s);
+        let pages = currentVal
+          .split(',')
+          .map((s) => s.trim())
+          .filter((s) => s);
         const pageStr = pageNumber.toString();
 
         if (pages.includes(pageStr)) {
-                    pages = pages.filter(p => p !== pageStr);
+          pages = pages.filter((p) => p !== pageStr);
         } else {
           pages.push(pageStr);
         }
@@ -383,11 +413,7 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
 
   try {
     // Render pages progressively with lazy loading
-        await renderPagesProgressively(
+    await renderPagesProgressively(pdf, container, createWrapper, {
-            pdf,
-            container,
-            createWrapper,
-            {
       batchSize: 8,
       useLazyLoading: true,
       lazyLoadMargin: '300px',
@@ -399,9 +425,8 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
       },
       shouldCancel: () => {
         return container.dataset.renderId !== currentRenderId.toString();
-                }
+      },
-            }
+    });
-        );
 
     if (toolId === 'organize') {
       initializeOrganizeSortable(containerId);
@@ -411,6 +436,9 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
 
     // Reinitialize lucide icons for dynamically added elements
     createIcons({ icons });
+
+    // Attach Quick Look page preview
+    initPagePreview(container, pdf);
   } catch (error) {
     console.error('Error rendering page thumbnails:', error);
     showAlert(t('multiTool.error'), t('multiTool.errorRendering'));
@@ -465,7 +493,8 @@ const createFileInputHTML = (options = {}) => {
             <input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" ${multiple} accept="${acceptedFiles}">
         </div>
         
-        ${showControls
+        ${
+          showControls
             ? `
             <!-- NEW: Add control buttons for multi-file uploads -->
             <div id="file-controls" class="hidden mt-4 flex gap-3">

src/js/utils/page-preview.ts

@@ -0,0 +1,215 @@
+import * as pdfjsLib from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import { PreviewState } from '@/types';
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString();
+
+const state: PreviewState = {
+  modal: null,
+  pdfjsDoc: null,
+  currentPage: 1,
+  totalPages: 0,
+  isOpen: false,
+  container: null,
+};
+
+function getOrCreateModal(): HTMLElement {
+  if (state.modal) return state.modal;
+
+  const modal = document.createElement('div');
+  modal.id = 'page-preview-modal';
+  modal.className =
+    'fixed inset-0 bg-black/80 backdrop-blur-sm z-[60] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-200';
+  modal.innerHTML = `
+    <button id="preview-close" class="absolute top-4 right-4 text-white/70 hover:text-white z-10 transition-colors" title="Close (Esc)">
+      <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+    </button>
+    <button id="preview-prev" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors p-2" title="Previous page">
+      <svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
+    </button>
+    <button id="preview-next" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors p-2" title="Next page">
+      <svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+    </button>
+    <div id="preview-canvas-container" class="flex items-center justify-center max-w-[90vw] max-h-[85vh]">
+      <div id="preview-loading" class="text-white/60 text-sm">Loading...</div>
+    </div>
+    <div id="preview-page-info" class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-gray-900/80 text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm"></div>
+  `;
+
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) hidePreview();
+  });
+  modal.querySelector('#preview-close')!.addEventListener('click', hidePreview);
+  modal
+    .querySelector('#preview-prev')!
+    .addEventListener('click', () => navigatePage(-1));
+  modal
+    .querySelector('#preview-next')!
+    .addEventListener('click', () => navigatePage(1));
+
+  document.body.appendChild(modal);
+  state.modal = modal;
+  return modal;
+}
+
+async function renderPreviewPage(pageNumber: number): Promise<void> {
+  if (!state.pdfjsDoc) return;
+
+  const modal = getOrCreateModal();
+  const container = modal.querySelector(
+    '#preview-canvas-container'
+  ) as HTMLElement;
+  const pageInfo = modal.querySelector('#preview-page-info') as HTMLElement;
+  const prevBtn = modal.querySelector('#preview-prev') as HTMLElement;
+  const nextBtn = modal.querySelector('#preview-next') as HTMLElement;
+
+  container.innerHTML = '<div class="text-white/60 text-sm">Loading...</div>';
+
+  pageInfo.textContent = `Page ${pageNumber} of ${state.totalPages}`;
+  prevBtn.style.visibility = pageNumber > 1 ? 'visible' : 'hidden';
+  nextBtn.style.visibility =
+    pageNumber < state.totalPages ? 'visible' : 'hidden';
+
+  try {
+    const page = await state.pdfjsDoc.getPage(pageNumber);
+    const scale = 2.0;
+    const viewport = page.getViewport({ scale });
+
+    const canvas = document.createElement('canvas');
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    canvas.className =
+      'max-w-[90vw] max-h-[85vh] object-contain rounded-lg shadow-2xl';
+    canvas.style.width = 'auto';
+    canvas.style.height = 'auto';
+    canvas.style.maxWidth = '90vw';
+    canvas.style.maxHeight = '85vh';
+
+    const ctx = canvas.getContext('2d')!;
+    await page.render({ canvasContext: ctx, viewport, canvas }).promise;
+
+    container.innerHTML = '';
+    container.appendChild(canvas);
+    state.currentPage = pageNumber;
+  } catch (err) {
+    console.error('Preview render error:', err);
+    container.innerHTML =
+      '<div class="text-red-400 text-sm">Failed to render page</div>';
+  }
+}
+
+function navigatePage(delta: number): void {
+  const newPage = state.currentPage + delta;
+  if (newPage >= 1 && newPage <= state.totalPages) {
+    renderPreviewPage(newPage);
+  }
+}
+
+export function showPreview(
+  pdfjsDoc: PDFDocumentProxy,
+  pageNumber: number,
+  totalPages: number
+): void {
+  state.pdfjsDoc = pdfjsDoc;
+  state.totalPages = totalPages;
+  state.isOpen = true;
+
+  const modal = getOrCreateModal();
+  modal.classList.remove('opacity-0', 'pointer-events-none');
+  document.body.style.overflow = 'hidden';
+
+  renderPreviewPage(pageNumber);
+}
+
+export function hidePreview(): void {
+  if (!state.modal) return;
+  state.isOpen = false;
+  state.modal.classList.add('opacity-0', 'pointer-events-none');
+  document.body.style.overflow = '';
+}
+
+function handleKeydown(e: KeyboardEvent): void {
+  if (!state.isOpen) return;
+
+  switch (e.key) {
+    case 'Escape':
+      hidePreview();
+      break;
+    case 'ArrowLeft':
+      e.preventDefault();
+      navigatePage(-1);
+      break;
+    case 'ArrowRight':
+      e.preventDefault();
+      navigatePage(1);
+      break;
+  }
+}
+
+document.addEventListener('keydown', handleKeydown);
+
+export function initPagePreview(
+  container: HTMLElement,
+  pdfjsDoc: PDFDocumentProxy,
+  options: { pageAttr?: string } = {}
+): void {
+  const totalPages = pdfjsDoc.numPages;
+
+  const thumbnails = container.querySelectorAll<HTMLElement>(
+    '[data-page-number], [data-page-index], [data-pageIndex]'
+  );
+
+  thumbnails.forEach((thumb) => {
+    if (thumb.dataset.previewInit) return;
+    thumb.dataset.previewInit = 'true';
+
+    let pageNum = 1;
+    if (thumb.dataset.pageNumber) {
+      pageNum = parseInt(thumb.dataset.pageNumber, 10);
+    } else if (thumb.dataset.pageIndex !== undefined) {
+      pageNum = parseInt(thumb.dataset.pageIndex, 10) + 1;
+    }
+
+    const icon = document.createElement('button');
+    icon.className =
+      'page-preview-btn absolute bottom-1 right-1 bg-gray-900/80 hover:bg-indigo-600 text-white/70 hover:text-white rounded-full w-7 h-7 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10';
+    icon.title = 'Preview';
+    icon.innerHTML =
+      '<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>';
+    icon.addEventListener('click', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      showPreview(pdfjsDoc, pageNum, totalPages);
+    });
+
+    if (!thumb.classList.contains('relative')) {
+      thumb.classList.add('relative');
+    }
+    if (!thumb.classList.contains('group')) {
+      thumb.classList.add('group');
+    }
+
+    thumb.appendChild(icon);
+  });
+
+  container.addEventListener('keydown', (e) => {
+    if (e.key === ' ' && !state.isOpen) {
+      const hovered = container.querySelector<HTMLElement>(
+        '[data-preview-init]:hover'
+      );
+      if (hovered) {
+        e.preventDefault();
+        let pageNum = 1;
+        if (hovered.dataset.pageNumber) {
+          pageNum = parseInt(hovered.dataset.pageNumber, 10);
+        } else if (hovered.dataset.pageIndex !== undefined) {
+          pageNum = parseInt(hovered.dataset.pageIndex, 10) + 1;
+        }
+        showPreview(pdfjsDoc, pageNum, totalPages);
+      }
+    }
+  });
+}

src/js/utils/pdf-operations.ts

@@ -1,4 +1,4 @@
-import { PDFDocument, degrees, rgb, StandardFonts } from 'pdf-lib';
+import { PDFDocument, degrees, rgb, StandardFonts, PageSizes } from 'pdf-lib';
 
 export async function mergePdfs(
   pdfBytesList: Uint8Array[]
@@ -12,7 +12,7 @@ export async function mergePdfs(
     );
     copiedPages.forEach((page) => mergedDoc.addPage(page));
   }
-  return new Uint8Array(await mergedDoc.save());
+  return new Uint8Array(await mergedDoc.save({ addDefaultPage: false }));
 }
 
 export async function splitPdf(
@@ -438,3 +438,87 @@ export async function addPageNumbers(
 
   return new Uint8Array(await pdfDoc.save());
 }
+
+export interface FixPageSizeOptions {
+  targetSize: string;
+  orientation: string;
+  scalingMode: string;
+  backgroundColor: { r: number; g: number; b: number };
+  customWidth?: number;
+  customHeight?: number;
+  customUnits?: string;
+}
+
+export async function fixPageSize(
+  pdfBytes: Uint8Array,
+  options: FixPageSizeOptions
+): Promise<Uint8Array> {
+  let targetWidth: number;
+  let targetHeight: number;
+
+  if (options.targetSize.toLowerCase() === 'custom') {
+    const w = options.customWidth ?? 210;
+    const h = options.customHeight ?? 297;
+    const units = (options.customUnits ?? 'mm').toLowerCase();
+    if (units === 'in') {
+      targetWidth = w * 72;
+      targetHeight = h * 72;
+    } else {
+      targetWidth = w * (72 / 25.4);
+      targetHeight = h * (72 / 25.4);
+    }
+  } else {
+    const selected =
+      PageSizes[options.targetSize as keyof typeof PageSizes] || PageSizes.A4;
+    targetWidth = selected[0];
+    targetHeight = selected[1];
+  }
+
+  const orientation = options.orientation.toLowerCase();
+  if (orientation === 'landscape' && targetWidth < targetHeight) {
+    [targetWidth, targetHeight] = [targetHeight, targetWidth];
+  } else if (orientation === 'portrait' && targetWidth > targetHeight) {
+    [targetWidth, targetHeight] = [targetHeight, targetWidth];
+  }
+
+  const sourceDoc = await PDFDocument.load(pdfBytes);
+  const outputDoc = await PDFDocument.create();
+
+  for (const sourcePage of sourceDoc.getPages()) {
+    const { width: sourceWidth, height: sourceHeight } = sourcePage.getSize();
+    const embeddedPage = await outputDoc.embedPage(sourcePage);
+
+    const outputPage = outputDoc.addPage([targetWidth, targetHeight]);
+    outputPage.drawRectangle({
+      x: 0,
+      y: 0,
+      width: targetWidth,
+      height: targetHeight,
+      color: rgb(
+        options.backgroundColor.r,
+        options.backgroundColor.g,
+        options.backgroundColor.b
+      ),
+    });
+
+    const scaleX = targetWidth / sourceWidth;
+    const scaleY = targetHeight / sourceHeight;
+    const useFill = options.scalingMode.toLowerCase() === 'fill';
+    const scale = useFill ? Math.max(scaleX, scaleY) : Math.min(scaleX, scaleY);
+
+    const scaledWidth = sourceWidth * scale;
+    const scaledHeight = sourceHeight * scale;
+
+    const x = (targetWidth - scaledWidth) / 2;
+    const y = (targetHeight - scaledHeight) / 2;
+
+    outputPage.drawPage(embeddedPage, {
+      x,
+      y,
+      width: scaledWidth,
+      height: scaledHeight,
+    });
+  }
+
+  return new Uint8Array(await outputDoc.save());
+}

src/js/utils/render-utils.ts

@@ -24,7 +24,7 @@ export interface RenderConfig {
  */
 interface PageTask {
   pageNumber: number;
-  pdfjsDoc: any;
+  pdfjsDoc: pdfjsLib.PDFDocumentProxy;
   fileName?: string;
   container: HTMLElement;
   scale?: number;
@@ -92,9 +92,9 @@ export function createPlaceholder(
  * Renders a single page to canvas
  */
 export async function renderPageToCanvas(
-  pdfjsDoc: any,
+  pdfjsDoc: pdfjsLib.PDFDocumentProxy,
   pageNumber: number,
-  scale: number = 0.5
+  scale: number = 1
 ): Promise<HTMLCanvasElement> {
   const page = await pdfjsDoc.getPage(pageNumber);
   const viewport = page.getViewport({ scale });
@@ -260,7 +260,7 @@ function requestIdleCallbackPolyfill(callback: () => void): void {
  * Main function to render pages progressively with optional lazy loading
  */
 export async function renderPagesProgressively(
-  pdfjsDoc: any,
+  pdfjsDoc: pdfjsLib.PDFDocumentProxy,
   container: HTMLElement,
   createWrapper: (
     canvas: HTMLCanvasElement,
@@ -298,7 +298,7 @@ export async function renderPagesProgressively(
       pageNumber: i,
       pdfjsDoc,
       container,
-      scale: useLazyLoading ? 0.3 : 0.5,
+      scale: useLazyLoading ? 0.5 : 1,
       createWrapper,
       placeholderElement: placeholders[i - 1],
     });

src/js/workflow/nodes/fix-page-size-node.ts

@@ -0,0 +1,104 @@
+import { ClassicPreset } from 'rete';
+import { BaseWorkflowNode } from './base-node';
+import { pdfSocket } from '../sockets';
+import type { SocketData } from '../types';
+import { requirePdfInput, processBatch } from '../types';
+import { fixPageSize } from '../../utils/pdf-operations';
+import { PDFDocument } from 'pdf-lib';
+import { hexToRgb } from '../../utils/helpers.js';
+
+export class FixPageSizeNode extends BaseWorkflowNode {
+  readonly category = 'Organize & Manage' as const;
+  readonly icon = 'ph-frame-corners';
+  readonly description = 'Standardize all pages to a target size';
+
+  constructor() {
+    super('Fix Page Size');
+    this.addInput('pdf', new ClassicPreset.Input(pdfSocket, 'PDF'));
+    this.addOutput(
+      'pdf',
+      new ClassicPreset.Output(pdfSocket, 'Standardized PDF')
+    );
+    this.addControl(
+      'targetSize',
+      new ClassicPreset.InputControl('text', { initial: 'A4' })
+    );
+    this.addControl(
+      'orientation',
+      new ClassicPreset.InputControl('text', { initial: 'auto' })
+    );
+    this.addControl(
+      'scalingMode',
+      new ClassicPreset.InputControl('text', { initial: 'fit' })
+    );
+    this.addControl(
+      'backgroundColor',
+      new ClassicPreset.InputControl('text', { initial: '#ffffff' })
+    );
+    this.addControl(
+      'customWidth',
+      new ClassicPreset.InputControl('number', { initial: 210 })
+    );
+    this.addControl(
+      'customHeight',
+      new ClassicPreset.InputControl('number', { initial: 297 })
+    );
+    this.addControl(
+      'customUnits',
+      new ClassicPreset.InputControl('text', { initial: 'mm' })
+    );
+  }
+
+  async data(
+    inputs: Record<string, SocketData[]>
+  ): Promise<Record<string, SocketData>> {
+    const pdfInputs = requirePdfInput(inputs, 'Fix Page Size');
+
+    const getText = (key: string, fallback: string) => {
+      const ctrl = this.controls[key] as
+        | ClassicPreset.InputControl<'text'>
+        | undefined;
+      return (ctrl?.value || fallback).trim();
+    };
+
+    const getNum = (key: string, fallback: number) => {
+      const ctrl = this.controls[key] as
+        | ClassicPreset.InputControl<'number'>
+        | undefined;
+      const value = ctrl?.value;
+      return Number.isFinite(value) ? (value as number) : fallback;
+    };
+
+    const targetSize = getText('targetSize', 'A4');
+    const orientation = getText('orientation', 'auto');
+    const scalingMode = getText('scalingMode', 'fit');
+    const backgroundHex = getText('backgroundColor', '#ffffff');
+    const customWidth = Math.max(1, getNum('customWidth', 210));
+    const customHeight = Math.max(1, getNum('customHeight', 297));
+    const customUnits = getText('customUnits', 'mm');
+    const backgroundColor = hexToRgb(backgroundHex);
+
+    return {
+      pdf: await processBatch(pdfInputs, async (input) => {
+        const resultBytes = await fixPageSize(input.bytes, {
+          targetSize,
+          orientation,
+          scalingMode,
+          backgroundColor,
+          customWidth,
+          customHeight,
+          customUnits,
+        });
+
+        const resultDoc = await PDFDocument.load(resultBytes);
+
+        return {
+          type: 'pdf',
+          document: resultDoc,
+          bytes: resultBytes,
+          filename: input.filename.replace(/\.pdf$/i, '_standardized.pdf'),
+        };
+      }),
+    };
+  }
+}

src/js/workflow/nodes/registry.ts

@@ -13,6 +13,7 @@ import { ReversePagesNode } from './reverse-pages-node';
 import { AddBlankPageNode } from './add-blank-page-node';
 import { DividePagesNode } from './divide-pages-node';
 import { NUpNode } from './n-up-node';
+import { FixPageSizeNode } from './fix-page-size-node';
 import { CombineSinglePageNode } from './combine-single-page-node';
 import { CropNode } from './crop-node';
 import { GreyscaleNode } from './greyscale-node';
@@ -298,6 +299,13 @@ export const nodeRegistry: Record<string, NodeRegistryEntry> = {
     description: 'Arrange multiple pages per sheet',
     factory: () => new NUpNode(),
   },
+  FixPageSizeNode: {
+    label: 'Fix Page Size',
+    category: 'Organize & Manage',
+    icon: 'ph-frame-corners',
+    description: 'Standardize all pages to a target size',
+    factory: () => new FixPageSizeNode(),
+  },
   CombineSinglePageNode: {
     label: 'Combine to Single Page',
     category: 'Organize & Manage',

src/js/workflow/nodes/remove-blank-pages-node.ts

@@ -23,7 +23,7 @@ export class RemoveBlankPagesNode extends BaseWorkflowNode {
 
   private async isPageBlank(
     page: pdfjsLib.PDFPageProxy,
-    threshold: number
+    maxNonWhitePercent: number
   ): Promise<boolean> {
     const viewport = page.getViewport({ scale: 0.5 });
     const canvas = document.createElement('canvas');
@@ -34,12 +34,14 @@ export class RemoveBlankPagesNode extends BaseWorkflowNode {
 
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     const data = imageData.data;
-    let totalBrightness = 0;
+    const totalPixels = data.length / 4;
+    let nonWhitePixels = 0;
     for (let i = 0; i < data.length; i += 4) {
-      totalBrightness += (data[i] + data[i + 1] + data[i + 2]) / 3;
+      const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      if (brightness < 240) nonWhitePixels++;
     }
-    const avgBrightness = totalBrightness / (data.length / 4);
+    const nonWhitePercent = (nonWhitePixels / totalPixels) * 100;
-    return avgBrightness > threshold;
+    return nonWhitePercent <= maxNonWhitePercent;
   }
 
   async data(
@@ -50,7 +52,10 @@ export class RemoveBlankPagesNode extends BaseWorkflowNode {
     const threshCtrl = this.controls['threshold'] as
       | ClassicPreset.InputControl<'number'>
       | undefined;
-    const threshold = Math.max(200, Math.min(255, threshCtrl?.value ?? 250));
+    const maxNonWhitePercent = Math.max(
+      0.1,
+      Math.min(5, threshCtrl?.value ?? 0.5)
+    );
 
     return {
       pdf: await processBatch(pdfInputs, async (input) => {
@@ -61,7 +66,7 @@ export class RemoveBlankPagesNode extends BaseWorkflowNode {
 
         for (let i = 1; i <= pdfjsDoc.numPages; i++) {
           const page = await pdfjsDoc.getPage(i);
-          const blank = await this.isPageBlank(page, threshold);
+          const blank = await this.isPageBlank(page, maxNonWhitePercent);
           if (!blank) {
             nonBlankIndices.push(i - 1);
           } else {

src/pages/add-attachments.html

@@ -132,10 +132,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:addAttachments.name"
         >
-          Add Attachments Free Online - Fast & Secure
+          Add Attachments
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:addAttachments.subtitle">
-          Upload a PDF, then add files to embed as attachments.
+          Embed one or more files into your PDF.
         </p>
 
         <!-- PDF Upload -->

src/pages/add-blank-page.html

@@ -126,10 +126,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:addBlankPage.name"
         >
-          Add Blank Page Free Online - Fast & Secure
+          Add Blank Page
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:addBlankPage.subtitle">
-          Insert one or more blank pages at any position in your PDF document.
+          Insert an empty page anywhere in your PDF.
         </p>
 
         <div

src/pages/add-stamps.html

@@ -116,11 +116,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:addStamps.name"
         >
-          Add Stamps Free Online - Fast & Secure
+          Add Stamps
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:addStamps.subtitle">
-          Upload a PDF, add image stamps using the toolbar, and then save the
+          Add image stamps to your PDF using the annotation toolbar.
-          stamped PDF.
         </p>
 
         <div class="mb-4">

src/pages/add-watermark.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:addWatermark.name"
         >
-          Add Watermark to PDF Free - Protect PDFs
+          Add Watermark
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:addWatermark.subtitle">
-          Add text or image watermarks to your PDF documents with customizable
+          Stamp text or an image over your PDF pages.
-          opacity and rotation.
         </p>
 
         <div

src/pages/adjust-colors.html

@@ -118,10 +118,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:adjustColors.name"
         >
-          Adjust Colors Free Online - PDF Color Correction Tool
+          Adjust Colors
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:adjustColors.subtitle">
-          Fine-tune brightness, contrast, saturation, hue and more in your PDF.
+          Fine-tune brightness, contrast, saturation and more in your PDF.
         </p>
 
         <div

src/pages/alternate-merge.html

@@ -132,11 +132,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:alternateMix.name"
         >
-          Alternate Merge Free Online - Combine PDFs Instantly
+          Alternate & Mix Pages
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:alternateMix.subtitle">
-          Upload multiple PDFs and interleave their pages. Drag to reorder the
+          Merge PDFs by alternating pages from each PDF. Preserves Bookmarks.
-          files, then mix their pages alternately.
         </p>
 
         <div

src/pages/background-color.html

@@ -134,13 +134,13 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:backgroundColor.name"
         >
-          Background Color Free Online - Fast & Secure
+          Background Color
         </h1>
         <p
           class="text-gray-400 mb-6"
           data-i18n="tools:backgroundColor.subtitle"
         >
-          Add or change the background color of all pages in your PDF document.
+          Change the background color of your PDF.
         </p>
 
         <div

src/pages/bmp-to-pdf.html

@@ -120,10 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:bmpToPdf.name"
         >
-          Bmp To Pdf Converter Free Online - Convert Files Fast
+          BMP to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:bmpToPdf.subtitle">
-          Convert one or more BMP images into a single PDF file.
+          Create a PDF from one or more BMP images.
         </p>
 
         <div

src/pages/bookmark.html

@@ -115,7 +115,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:editBookmarks.name"
         >
-          Bookmark Free Online - Fast & Secure
+          Edit Bookmarks
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:editBookmarks.subtitle">
           Add, edit, import, delete and extract PDF bookmarks.

src/pages/cbz-to-pdf.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:cbzToPdf.name"
         >
-          Cbz To Pdf Converter Free Online - Convert Files Fast
+          CBZ to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:cbzToPdf.subtitle">
           Convert comic book archives (CBZ/CBR) to PDF format. Supports multiple

src/pages/change-permissions.html

@@ -134,14 +134,13 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:changePermissions.name"
         >
-          Change Permissions Free Online - Fast & Secure
+          Change Permissions
         </h1>
         <p
           class="text-gray-400 mb-6"
           data-i18n="tools:changePermissions.subtitle"
         >
-          Set or change user permissions on a PDF. Modify passwords and access
+          Set or change user permissions on a PDF.
-          controls.
         </p>
 
         <div

src/pages/combine-single-page.html

@@ -134,14 +134,13 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:combineToSinglePage.name"
         >
-          Combine Single Page Free Online - Combine PDFs Instantly
+          Combine to Single Page
         </h1>
         <p
           class="text-gray-400 mb-6"
           data-i18n="tools:combineToSinglePage.subtitle"
         >
-          Merge all pages of your PDF into one continuous page, either
+          Stitch all pages into one continuous scroll.
-          horizontally or vertically.
         </p>
 
         <div

src/pages/compare-pdfs.html

@@ -150,11 +150,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:comparePdfs.name"
         >
-          Compare Pdfs Free Online - Fast & Secure
+          Compare PDFs
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:comparePdfs.subtitle">
-          Upload two PDF files to compare them side by side or with overlay
+          Compare two PDFs side by side.
-          mode.
         </p>
 
         <!-- File Upload Areas -->

src/pages/compress-pdf.html

@@ -119,11 +119,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:compressPdf.name"
         >
-          Compress PDF Free Online - Reduce File Size Fast
+          Compress PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:compressPdf.subtitle">
-          Reduce file size by choosing the compression method that best suits
+          Reduce the file size of your PDF.
-          your document. Supports multiple PDFs.
         </p>
 
         <div

src/pages/crop-pdf.html

@@ -125,11 +125,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:cropPdf.name"
         >
-          Crop Pdf Free Online - Fast & Secure
+          Crop PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:cropPdf.subtitle">
-          Upload a PDF to visually crop one or more pages. This tool offers a
+          Trim the margins of every page in your PDF.
-          live preview and two distinct cropping modes.
         </p>
 
         <!-- Drop Zone -->

src/pages/csv-to-pdf.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:csvToPdf.name"
         >
-          Csv To Pdf Converter Free Online - Convert Files Fast
+          CSV to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:csvToPdf.subtitle">
-          Convert CSV (Comma-Separated Values) spreadsheet files to PDF format.
+          Convert CSV spreadsheet files to PDF format. Supports multiple files.
-          Supports multiple files.
         </p>
 
         <div

src/pages/decrypt-pdf.html

@@ -120,10 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:decryptPdf.name"
         >
-          Decrypt PDF Free - Remove Password Online
+          Decrypt PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:decryptPdf.subtitle">
-          Unlock password-protected PDF files by removing encryption.
+          Unlock PDF by removing password protection.
         </p>
 
         <div

src/pages/delete-pages.html

@@ -119,10 +119,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:deletePages.name"
         >
-          Delete PDF Pages Free - Remove Pages Online
+          Delete Pages
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:deletePages.subtitle">
-          Remove specific pages or ranges of pages from your PDF file.
+          Remove specific pages from your document.
         </p>
         <div
           id="drop-zone"

src/pages/deskew-pdf.html

@@ -108,11 +108,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:deskewPdf.name"
         >
-          Deskew PDF Free Online - Straighten Tilted Scans
+          Deskew PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:deskewPdf.subtitle">
-          Automatically detect and correct skewed pages in scanned PDFs. Uses
+          Automatically straighten tilted scanned pages using OpenCV.
-          advanced image processing to straighten tilted documents.
         </p>
 
         <div

src/pages/divide-pages.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:dividePages.name"
         >
-          Divide Pages Free Online - Fast & Secure
+          Divide Pages
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:dividePages.subtitle">
-          Split each page of your PDF horizontally or vertically, turning one
+          Divide pages horizontally or vertically.
-          page into two.
         </p>
 
         <div

src/pages/edit-attachments.html

@@ -134,13 +134,13 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:editAttachments.name"
         >
-          Edit Attachments Free Online - Edit PDFs Securely
+          Edit Attachments
         </h1>
         <p
           class="text-gray-400 mb-6"
           data-i18n="tools:editAttachments.subtitle"
         >
-          Upload a PDF to view and remove its embedded attachments.
+          View or remove attachments in your PDF.
         </p>
 
         <div

src/pages/edit-metadata.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:editMetadata.name"
         >
-          Edit Metadata Free Online - Edit PDFs Securely
+          Edit Metadata
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:editMetadata.subtitle">
-          Edit metadata fields in your PDF document including title, author,
+          Change the author, title, and other properties.
-          subject, and keywords.
         </p>
 
         <div

src/pages/edit-pdf.html

@@ -123,7 +123,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:pdfEditor.name"
         >
-          Edit PDF Free Online - Modify PDFs Securely
+          PDF Editor
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:pdfEditor.subtitle">
           Annotate, highlight, redact, comment, add shapes/images, search, and

src/pages/email-to-pdf.html

@@ -125,7 +125,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:emailToPdf.name"
         >
-          Email to PDF Converter Free Online - Convert EML MSG Files
+          Email to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:emailToPdf.subtitle">
           Convert email files (EML, MSG) to PDF format. Supports Outlook exports

src/pages/encrypt-pdf.html

@@ -123,11 +123,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:encryptPdf.name"
         >
-          Encrypt PDF Free - Password Protect PDFs
+          Encrypt PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:encryptPdf.subtitle">
-          Protect your PDF with 256-bit AES encryption. Add password protection
+          Lock your PDF by adding a password.
-          and set usage restrictions.
         </p>
 
         <div

src/pages/epub-to-pdf.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:epubToPdf.name"
         >
-          Epub To Pdf Converter Free Online - Convert Files Fast
+          EPUB to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:epubToPdf.subtitle">
           Convert EPUB e-books to PDF format. Supports multiple files.

src/pages/excel-to-pdf.html

@@ -123,7 +123,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:excelToPdf.name"
         >
-          Excel to PDF Converter Free - Convert XLSX Online
+          Excel to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:excelToPdf.subtitle">
           Convert Excel spreadsheets (XLSX, XLS, ODS, CSV) to PDF format.

src/pages/extract-attachments.html

@@ -134,14 +134,13 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:extractAttachments.name"
         >
-          Extract Attachments Free Online - Extract PDF Content
+          Extract Attachments
         </h1>
         <p
           class="text-gray-400 mb-6"
           data-i18n="tools:extractAttachments.subtitle"
         >
-          Upload PDF files to extract all embedded attachments. Files will be
+          Extract all embedded files from PDF(s) as a ZIP.
-          downloaded as a ZIP archive.
         </p>
 
         <div

src/pages/extract-images.html

@@ -126,11 +126,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:extractImages.name"
         >
-          Extract Images Free Online - Extract PDF Content
+          Extract Images
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:extractImages.subtitle">
-          Extract all embedded images from PDF files. Download individually or
+          Extract all embedded images from your PDF files.
-          as a ZIP archive.
         </p>
 
         <div

src/pages/extract-pages.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:extractPages.name"
         >
-          Extract PDF Pages Free - Copy Pages Online
+          Extract Pages
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:extractPages.subtitle">
-          Extract specific pages from a PDF into separate files. Your files will
+          Save a selection of pages as new files.
-          download in a ZIP archive.
         </p>
 
         <!-- Drop Zone -->

src/pages/extract-tables.html

@@ -126,7 +126,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:extractTables.name"
         >
-          Extract Tables Free Online - Extract PDF Content
+          Extract PDF Tables
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:extractTables.subtitle">
           Extract tables from PDF files and export as CSV, JSON, or Markdown.

src/pages/fb2-to-pdf.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:fb2ToPdf.name"
         >
-          Fb2 To Pdf Converter Free Online - Convert Files Fast
+          FB2 to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:fb2ToPdf.subtitle">
           Convert FictionBook (FB2) e-books to PDF format. Supports multiple

src/pages/fix-page-size.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:fixPageSize.name"
         >
-          Fix Page Size Free Online - Fast & Secure
+          Fix Page Size
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:fixPageSize.subtitle">
-          Standardize all pages in your PDF to a uniform size. Choose from
+          Standardize all pages to a uniform size.
-          standard sizes or set custom dimensions.
         </p>
 
         <div

src/pages/flatten-pdf.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:flattenPdf.name"
         >
-          Flatten Pdf Free Online - Fast & Secure
+          Flatten PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:flattenPdf.subtitle">
-          Make form fields and annotations non-editable by flattening them into
+          Make form fields and annotations non-editable.
-          the PDF.
         </p>
 
         <div

src/pages/font-to-outline.html

@@ -119,12 +119,11 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:fontToOutline.name"
         >
-          Font to Outline Free Online - Convert Fonts to Paths
+          Font to Outline
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:fontToOutline.subtitle">
-          Convert all fonts in your PDF to vector outlines/paths. Ensures
+          Convert all fonts to vector outlines for consistent rendering across
-          consistent rendering across all devices regardless of font
+          all devices.
-          availability.
         </p>
 
         <div

src/pages/form-creator.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:createPdfForm.name"
         >
-          Form Creator Free Online - Fast & Secure
+          Create PDF Form
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:createPdfForm.subtitle">
-          Upload an existing PDF or create a blank PDF to start adding form
+          Create fillable PDF forms with drag-and-drop text fields.
-          fields.
         </p>
 
         <div
@@ -262,8 +261,7 @@
           Create PDF Form
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:createPdfForm.subtitle">
-          Drag and drop fields onto the canvas to create a fillable PDF form.
+          Create fillable PDF forms with drag-and-drop text fields.
-          Customize field properties and download your form.
         </p>
 
         <!-- Main Form Creator Area -->

src/pages/form-filler.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:pdfFormFiller.name"
         >
-          Form Filler Free Online - Fast & Secure
+          PDF Form Filler
         </h1>
         <p class="text-gray-400 mb-4">
           Upload a PDF with form fields. Fill them directly in the viewer below,

src/pages/header-footer.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:headerFooter.name"
         >
-          Header Footer Free Online - Fast & Secure
+          Header & Footer
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:headerFooter.subtitle">
-          Add customizable headers and footers to your PDF documents with
+          Add text to the top and bottom of pages.
-          dynamic page numbers.
         </p>
 
         <div

src/pages/heic-to-pdf.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:heicToPdf.name"
         >
-          Heic To Pdf Converter Free Online - Convert Files Fast
+          HEIC to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:heicToPdf.subtitle">
-          Convert one or more HEIC (High Efficiency) images from your iPhone or
+          Create a PDF from one or more HEIC images.
-          camera into a single PDF file.
         </p>
 
         <div

src/pages/image-to-pdf.html

@@ -121,10 +121,11 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:imageToPdf.name"
         >
-          Image To Pdf Converter Free Online - Convert Files Fast
+          Images to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:imageToPdf.subtitle">
-          Convert one or more images into a single PDF file.
+          Convert JPG, PNG, BMP, GIF, TIFF, PNM, PGM, PBM, PPM, PAM, JXR, JPX,
+          JP2, PSD, SVG, HEIC, WebP to PDF.
         </p>
 
         <div

src/pages/invert-colors.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:invertColors.name"
         >
-          Invert Colors Free Online - Fast & Secure
+          Invert Colors
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:invertColors.subtitle">
-          Invert all colors in your PDF document, creating a negative image
+          Create a "dark mode" version of your PDF.
-          effect.
         </p>
 
         <div

src/pages/jpg-to-pdf.html

@@ -123,7 +123,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:jpgToPdf.name"
         >
-          JPG to PDF Converter Free - Convert Images Online
+          JPG to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:jpgToPdf.subtitle">
           Create a PDF from JPG, JPEG, and JPEG2000 (JP2/JPX) images.

src/pages/json-to-pdf.html

@@ -112,11 +112,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:jsonToPdf.name"
         >
-          Json To Pdf Converter Free Online - Convert Files Fast
+          JSON to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:jsonToPdf.subtitle">
-          Upload multiple JSON files to convert them all to PDF format. Files
+          Convert JSON files to PDF format.
-          will be downloaded as a ZIP archive.
         </p>
         <div
           class="bg-yellow-900/30 border border-yellow-700 rounded-lg p-3 mb-6"

src/pages/linearize-pdf.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:linearizePdf.name"
         >
-          Linearize Pdf Free Online - Fast & Secure
+          Linearize PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:linearizePdf.subtitle">
-          Optimize PDF files for fast web viewing. Linearized PDFs load
+          Optimize PDF for fast web viewing.
-          progressively in browsers.
         </p>
 
         <div

src/pages/markdown-to-pdf.html

@@ -130,14 +130,14 @@
             class="text-2xl font-bold text-white mb-2"
             data-i18n="tools:markdownToPdf.name"
           >
-            Markdown To Pdf Converter Free Online - Convert Files Fast
+            Markdown to PDF
           </h1>
           <p
             class="text-gray-400 mb-6"
             data-i18n="tools:markdownToPdf.subtitle"
           >
-            Write markdown with live preview. Supports syntax highlighting,
+            Write or paste Markdown and export it as a beautifully formatted
-            tables, emoji, and more. Print to save as PDF.
+            PDF.
           </p>
 
           <!-- Editor container -->

src/pages/merge-pdf.html

@@ -119,7 +119,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:mergePdf.name"
         >
-          Merge PDF Files Free - Combine PDFs Instantly
+          Merge PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:mergePdf.subtitle">
           Combine whole files, or select specific pages to merge into a new

src/pages/mobi-to-pdf.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:mobiToPdf.name"
         >
-          Mobi To Pdf Converter Free Online - Convert Files Fast
+          MOBI to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:mobiToPdf.subtitle">
           Convert MOBI e-books to PDF format. Supports multiple files.

src/pages/n-up-pdf.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:nUpPdf.name"
         >
-          N Up Pdf Free Online - Fast & Secure
+          N-Up PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:nUpPdf.subtitle">
-          Arrange multiple pages onto a single sheet. Perfect for printing
+          Arrange multiple pages onto a single sheet.
-          handouts or saving paper.
         </p>
 
         <div

src/pages/ocr-pdf.html

@@ -123,11 +123,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:ocrPdf.name"
         >
-          OCR PDF Free Online - Extract Text from Scans
+          OCR PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:ocrPdf.subtitle">
-          Convert scanned PDFs into searchable documents. Select one or more
+          Make a PDF searchable and copyable.
-          languages present in your file for the best results.
         </p>
 
         <!-- How it works info box -->

src/pages/odg-to-pdf.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:odgToPdf.name"
         >
-          Odg To Pdf Converter Free Online - Convert Files Fast
+          ODG to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:odgToPdf.subtitle">
           Convert OpenDocument Graphics (ODG) files to PDF format. Supports

src/pages/odp-to-pdf.html

@@ -122,7 +122,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:odpToPdf.name"
         >
-          Odp To Pdf Converter Free Online - Convert Files Fast
+          ODP to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:odpToPdf.subtitle">
           Convert OpenDocument Presentation (ODP) files to PDF format. Supports

src/pages/ods-to-pdf.html

@@ -122,7 +122,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:odsToPdf.name"
         >
-          Ods To Pdf Converter Free Online - Convert Files Fast
+          ODS to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:odsToPdf.subtitle">
           Convert OpenDocument Spreadsheet (ODS) files to PDF format. Supports

src/pages/odt-to-pdf.html

@@ -120,11 +120,11 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:odtToPdf.name"
         >
-          Odt To Pdf Converter Free Online - Convert Files Fast
+          ODT to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:odtToPdf.subtitle">
-          Convert OpenDocument Text (.odt) files to PDF format. Supports
+          Convert OpenDocument Text files to PDF format. Supports multiple
-          multiple files.
+          files.
         </p>
 
         <div

src/pages/organize-pdf.html

@@ -119,23 +119,13 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:duplicateOrganize.name"
         >
-          Organize PDF Pages Free - Reorder PDFs Online
+          Duplicate & Organize
         </h1>
         <p
           class="text-gray-400 mb-6"
           data-i18n="tools:duplicateOrganize.subtitle"
         >
-          Drag pages to reorder them. Use the
+          Duplicate, reorder, and delete pages.
-          <i
-            data-lucide="copy-plus"
-            class="inline-block w-4 h-4 mx-1 align-text-bottom text-green-500"
-          ></i>
-          icon to duplicate a page or the
-          <i
-            data-lucide="x-circle"
-            class="inline-block w-4 h-4 mx-1 align-text-bottom text-red-400"
-          ></i>
-          icon to delete it.
         </p>
 
         <!-- Drop Zone -->
@@ -182,24 +172,25 @@
         ></div>
 
         <!-- Advanced Settings -->
-        <div id="advanced-settings" class="hidden mt-6">
+        <div id="advanced-settings" class="hidden mt-6 space-y-3">
-          <h3 class="text-lg font-semibold text-white mb-2">
+          <h3 class="text-lg font-semibold text-white">Advanced Settings</h3>
-            Advanced Settings
+          <div class="bg-gray-800/50 p-4 rounded-lg border border-gray-700">
-          </h3>
-          <div class="bg-gray-700 p-4 rounded-lg">
             <label
               for="page-order-input"
               class="block text-sm font-medium text-gray-300 mb-2"
               >Page Order (comma-separated)</label
             >
-            <div class="flex gap-2">
+            <div class="flex gap-3">
               <input
                 type="text"
                 id="page-order-input"
-                class="w-full bg-gray-900 text-white rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 border border-gray-600"
+                class="flex-1 bg-gray-900 text-white rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 border border-gray-600 placeholder-gray-500"
                 placeholder="e.g., 3,1,4,2"
               />
-              <button id="apply-order-btn" class="btn-secondary">
+              <button
+                id="apply-order-btn"
+                class="btn-gradient whitespace-nowrap !px-5 !py-2.5 text-sm"
+              >
                 Apply Order
               </button>
             </div>

src/pages/page-dimensions.html

@@ -132,11 +132,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:pageDimensions.name"
         >
-          Page Dimensions Free Online - Fast & Secure
+          Page Dimensions
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:pageDimensions.subtitle">
-          Analyze PDF page dimensions and sizes. View detailed information about
+          Analyze page size, orientation, and units.
-          each page.
         </p>
 
         <div

src/pages/page-numbers.html

@@ -120,11 +120,10 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:pageNumbers.name"
         >
-          Page Numbers Free Online - Fast & Secure
+          Page Numbers
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:pageNumbers.subtitle">
-          Add page numbers to your PDF documents with customizable position,
+          Insert page numbers into your document.
-          format, and styling.
         </p>
 
         <div

src/pages/pages-to-pdf.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:pagesToPdf.name"
         >
-          Pages To Pdf Converter Free Online - Convert Files Fast
+          Pages to PDF
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:pagesToPdf.subtitle">
           Convert Apple Pages documents to PDF format. Supports multiple files.

src/pages/pdf-booklet.html

@@ -120,7 +120,7 @@
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:pdfBooklet.name"
         >
-          Pdf Booklet Free Online - Fast & Secure
+          PDF Booklet
         </h1>
         <p class="text-gray-400 mb-6" data-i18n="tools:pdfBooklet.subtitle">
           Rearrange pages for double-sided booklet printing. Fold and staple to