build(deps): bump docker/login-action from 3 to 4

Bumps [docker/login-action](https://github.com/docker/login-action) from 3 to 4.
- [Release notes](https://github.com/docker/login-action/releases)
- [Commits](https://github.com/docker/login-action/compare/v3...v4)

---
updated-dependencies:
- dependency-name: docker/login-action
  dependency-version: '4'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/build-and-publish.yml

@@ -75,7 +75,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -144,7 +144,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -206,7 +206,7 @@ jobs:
             suffix: "-simple"
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
@@ -270,14 +270,14 @@ jobs:
             suffix: "-simple"
     steps:
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to DockerHub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_TOKEN }}

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

@@ -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/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/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

@@ -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(

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/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/organize-pdf.html

@@ -182,24 +182,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/remove-blank-pages.html

@@ -193,8 +193,12 @@
               step="5"
               class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
             />
-            <p class="text-xs text-gray-400 mt-1">
+            <p
-              Higher values detect more pages as blank
+              class="text-xs text-gray-400 mt-1"
+              data-i18n="tools:removeBlankPages.sensitivityHint"
+            >
+              Higher = stricter, only purely blank pages. Lower = allows pages
+              with some content.
             </p>
           </div>
           <button id="detect-btn" class="btn-gradient w-full mt-4">
@@ -210,7 +214,7 @@
           <p id="preview-info" class="text-gray-400 text-sm mb-4"></p>
           <div
             id="blank-pages-preview"
-            class="grid grid-cols-3 md:grid-cols-4 gap-3 max-h-64 overflow-y-auto p-2 bg-gray-900 rounded-lg border border-gray-700"
+            class="grid grid-cols-3 md:grid-cols-4 gap-3 p-2 bg-gray-900 rounded-lg border border-gray-700"
           ></div>
           <button id="process-btn" class="btn-gradient w-full mt-4">
             Remove Selected Blank Pages

src/tests/hocr-transform.test.ts

@@ -0,0 +1,440 @@
+import { describe, it, expect } from 'vitest';
+import {
+  parseBBox,
+  parseBaseline,
+  parseTextangle,
+  getTextDirection,
+  shouldInjectWordBreaks,
+  normalizeText,
+  calculateWordTransform,
+  calculateSpaceTransform,
+} from '../js/utils/hocr-transform';
+
+describe('hocr-transform', () => {
+  describe('parseBBox', () => {
+    it('should parse valid bbox string', () => {
+      expect(parseBBox('bbox 100 200 300 400')).toEqual({
+        x0: 100,
+        y0: 200,
+        x1: 300,
+        y1: 400,
+      });
+    });
+
+    it('should parse bbox with other attributes', () => {
+      expect(parseBBox('bbox 10 20 30 40; x_wconf 95')).toEqual({
+        x0: 10,
+        y0: 20,
+        x1: 30,
+        y1: 40,
+      });
+    });
+
+    it('should return null for missing bbox', () => {
+      expect(parseBBox('x_wconf 95')).toBeNull();
+    });
+
+    it('should return null for empty string', () => {
+      expect(parseBBox('')).toBeNull();
+    });
+
+    it('should parse zero values', () => {
+      expect(parseBBox('bbox 0 0 0 0')).toEqual({
+        x0: 0,
+        y0: 0,
+        x1: 0,
+        y1: 0,
+      });
+    });
+
+    it('should parse large coordinates', () => {
+      expect(parseBBox('bbox 0 0 2480 3508')).toEqual({
+        x0: 0,
+        y0: 0,
+        x1: 2480,
+        y1: 3508,
+      });
+    });
+  });
+
+  describe('parseBaseline', () => {
+    it('should parse valid baseline', () => {
+      expect(parseBaseline('baseline 0.012 -5')).toEqual({
+        slope: 0.012,
+        intercept: -5,
+      });
+    });
+
+    it('should parse zero baseline', () => {
+      expect(parseBaseline('baseline 0 0')).toEqual({
+        slope: 0,
+        intercept: 0,
+      });
+    });
+
+    it('should parse negative slope', () => {
+      expect(parseBaseline('baseline -0.005 3')).toEqual({
+        slope: -0.005,
+        intercept: 3,
+      });
+    });
+
+    it('should return defaults for missing baseline', () => {
+      expect(parseBaseline('bbox 100 200 300 400')).toEqual({
+        slope: 0,
+        intercept: 0,
+      });
+    });
+
+    it('should return defaults for empty string', () => {
+      expect(parseBaseline('')).toEqual({
+        slope: 0,
+        intercept: 0,
+      });
+    });
+
+    it('should handle baseline with other attributes', () => {
+      expect(parseBaseline('bbox 10 20 30 40; baseline 0.1 -2')).toEqual({
+        slope: 0.1,
+        intercept: -2,
+      });
+    });
+  });
+
+  describe('parseTextangle', () => {
+    it('should parse valid textangle', () => {
+      expect(parseTextangle('textangle 90')).toBe(90);
+    });
+
+    it('should parse float textangle', () => {
+      expect(parseTextangle('textangle 1.5')).toBe(1.5);
+    });
+
+    it('should parse negative textangle', () => {
+      expect(parseTextangle('textangle -45')).toBe(-45);
+    });
+
+    it('should return 0 for missing textangle', () => {
+      expect(parseTextangle('bbox 0 0 100 100')).toBe(0);
+    });
+
+    it('should return 0 for empty string', () => {
+      expect(parseTextangle('')).toBe(0);
+    });
+
+    it('should parse zero textangle', () => {
+      expect(parseTextangle('textangle 0')).toBe(0);
+    });
+  });
+
+  describe('getTextDirection', () => {
+    it('should return rtl for dir="rtl" attribute', () => {
+      const el = document.createElement('div');
+      el.setAttribute('dir', 'rtl');
+      expect(getTextDirection(el)).toBe('rtl');
+    });
+
+    it('should return ltr for dir="ltr" attribute', () => {
+      const el = document.createElement('div');
+      el.setAttribute('dir', 'ltr');
+      expect(getTextDirection(el)).toBe('ltr');
+    });
+
+    it('should default to ltr when no dir attribute', () => {
+      const el = document.createElement('div');
+      expect(getTextDirection(el)).toBe('ltr');
+    });
+
+    it('should default to ltr for unknown dir values', () => {
+      const el = document.createElement('div');
+      el.setAttribute('dir', 'auto');
+      expect(getTextDirection(el)).toBe('ltr');
+    });
+  });
+
+  describe('shouldInjectWordBreaks', () => {
+    it('should return true for English', () => {
+      const el = document.createElement('div');
+      el.setAttribute('lang', 'eng');
+      expect(shouldInjectWordBreaks(el)).toBe(true);
+    });
+
+    it('should return true for no lang attribute', () => {
+      const el = document.createElement('div');
+      expect(shouldInjectWordBreaks(el)).toBe(true);
+    });
+
+    it('should return false for CJK languages', () => {
+      const cjkLangs = ['chi_sim', 'chi_tra', 'jpn', 'kor', 'zh', 'ja', 'ko'];
+      cjkLangs.forEach((lang) => {
+        const el = document.createElement('div');
+        el.setAttribute('lang', lang);
+        expect(shouldInjectWordBreaks(el)).toBe(false);
+      });
+    });
+
+    it('should return true for non-CJK languages', () => {
+      const langs = ['fra', 'deu', 'spa', 'ara', 'hin'];
+      langs.forEach((lang) => {
+        const el = document.createElement('div');
+        el.setAttribute('lang', lang);
+        expect(shouldInjectWordBreaks(el)).toBe(true);
+      });
+    });
+  });
+
+  describe('normalizeText', () => {
+    it('should normalize NFKC', () => {
+      expect(normalizeText('\ufb01')).toBe('fi');
+    });
+
+    it('should keep ASCII text unchanged', () => {
+      expect(normalizeText('hello')).toBe('hello');
+    });
+
+    it('should handle empty string', () => {
+      expect(normalizeText('')).toBe('');
+    });
+
+    it('should normalize full-width characters', () => {
+      expect(normalizeText('\uff21')).toBe('A');
+    });
+
+    it('should normalize superscript digits', () => {
+      expect(normalizeText('\u00b2')).toBe('2');
+    });
+  });
+
+  describe('calculateWordTransform', () => {
+    const baseLine = {
+      bbox: { x0: 0, y0: 100, x1: 500, y1: 130 },
+      baseline: { slope: 0, intercept: 0 },
+      textangle: 0,
+      words: [],
+      direction: 'ltr' as const,
+      injectWordBreaks: true,
+    };
+
+    it('should calculate position and font size', () => {
+      const word = {
+        text: 'Hello',
+        bbox: { x0: 10, y0: 100, x1: 60, y1: 120 },
+        confidence: 95,
+      };
+      const fontWidthFn = (_text: string, fontSize: number) => fontSize * 2.5;
+
+      const result = calculateWordTransform(word, baseLine, 800, fontWidthFn);
+
+      expect(result.x).toBe(10);
+      expect(result.y).toBe(680);
+      expect(result.fontSize).toBeGreaterThan(0);
+      expect(result.horizontalScale).toBeGreaterThan(0);
+    });
+
+    it('should clamp font size to max 2x word height', () => {
+      const word = {
+        text: 'x',
+        bbox: { x0: 0, y0: 0, x1: 1000, y1: 10 },
+        confidence: 95,
+      };
+      const fontWidthFn = (_text: string, _fontSize: number) => 0.001;
+
+      const result = calculateWordTransform(word, baseLine, 800, fontWidthFn);
+      expect(result.fontSize).toBeLessThanOrEqual(20);
+    });
+
+    it('should clamp font size to minimum 1', () => {
+      const word = {
+        text: 'x',
+        bbox: { x0: 0, y0: 0, x1: 1, y1: 10 },
+        confidence: 95,
+      };
+      const fontWidthFn = (_text: string, _fontSize: number) => 10000;
+
+      const result = calculateWordTransform(word, baseLine, 800, fontWidthFn);
+      expect(result.fontSize).toBeGreaterThanOrEqual(1);
+    });
+
+    it('should handle zero font width gracefully', () => {
+      const word = {
+        text: '',
+        bbox: { x0: 0, y0: 0, x1: 50, y1: 20 },
+        confidence: 95,
+      };
+      const fontWidthFn = () => 0;
+
+      const result = calculateWordTransform(word, baseLine, 800, fontWidthFn);
+      expect(result.horizontalScale).toBe(1);
+    });
+
+    it('should incorporate baseline slope into rotation', () => {
+      const slopedLine = {
+        ...baseLine,
+        baseline: { slope: 0.1, intercept: 0 },
+      };
+      const word = {
+        text: 'Hi',
+        bbox: { x0: 10, y0: 100, x1: 40, y1: 115 },
+        confidence: 90,
+      };
+      const fontWidthFn = (_text: string, fontSize: number) => fontSize * 1.5;
+
+      const result = calculateWordTransform(word, slopedLine, 800, fontWidthFn);
+      expect(result.rotation).not.toBe(0);
+    });
+
+    it('should incorporate textangle into rotation', () => {
+      const angledLine = { ...baseLine, textangle: 5 };
+      const word = {
+        text: 'Hi',
+        bbox: { x0: 10, y0: 100, x1: 40, y1: 115 },
+        confidence: 90,
+      };
+      const fontWidthFn = (_text: string, fontSize: number) => fontSize * 1.5;
+
+      const result = calculateWordTransform(word, angledLine, 800, fontWidthFn);
+      expect(result.rotation).toBe(-5);
+    });
+  });
+
+  describe('calculateSpaceTransform', () => {
+    const baseLine = {
+      bbox: { x0: 0, y0: 100, x1: 500, y1: 130 },
+      baseline: { slope: 0, intercept: 0 },
+      textangle: 0,
+      words: [],
+      direction: 'ltr' as const,
+      injectWordBreaks: true,
+    };
+
+    it('should calculate space between two words', () => {
+      const prev = {
+        text: 'Hello',
+        bbox: { x0: 10, y0: 100, x1: 60, y1: 120 },
+        confidence: 95,
+      };
+      const next = {
+        text: 'World',
+        bbox: { x0: 70, y0: 100, x1: 130, y1: 120 },
+        confidence: 95,
+      };
+      const spaceWidthFn = (fontSize: number) => fontSize * 0.3;
+
+      const result = calculateSpaceTransform(
+        prev,
+        next,
+        baseLine,
+        800,
+        spaceWidthFn
+      );
+      expect(result).not.toBeNull();
+      expect(result!.x).toBe(60);
+      expect(result!.horizontalScale).toBeGreaterThan(0);
+    });
+
+    it('should return null when gap is zero or negative', () => {
+      const prev = {
+        text: 'Hello',
+        bbox: { x0: 10, y0: 100, x1: 60, y1: 120 },
+        confidence: 95,
+      };
+      const next = {
+        text: 'World',
+        bbox: { x0: 60, y0: 100, x1: 120, y1: 120 },
+        confidence: 95,
+      };
+      const spaceWidthFn = (fontSize: number) => fontSize * 0.3;
+
+      expect(
+        calculateSpaceTransform(prev, next, baseLine, 800, spaceWidthFn)
+      ).toBeNull();
+    });
+
+    it('should return null when overlapping words', () => {
+      const prev = {
+        text: 'Hello',
+        bbox: { x0: 10, y0: 100, x1: 80, y1: 120 },
+        confidence: 95,
+      };
+      const next = {
+        text: 'World',
+        bbox: { x0: 70, y0: 100, x1: 130, y1: 120 },
+        confidence: 95,
+      };
+      const spaceWidthFn = (fontSize: number) => fontSize * 0.3;
+
+      expect(
+        calculateSpaceTransform(prev, next, baseLine, 800, spaceWidthFn)
+      ).toBeNull();
+    });
+
+    it('should return null when space width function returns 0', () => {
+      const prev = {
+        text: 'Hello',
+        bbox: { x0: 10, y0: 100, x1: 60, y1: 120 },
+        confidence: 95,
+      };
+      const next = {
+        text: 'World',
+        bbox: { x0: 70, y0: 100, x1: 130, y1: 120 },
+        confidence: 95,
+      };
+
+      expect(
+        calculateSpaceTransform(prev, next, baseLine, 800, () => 0)
+      ).toBeNull();
+    });
+
+    it('should account for baseline intercept in y position', () => {
+      const lineWithIntercept = {
+        ...baseLine,
+        baseline: { slope: 0, intercept: -5 },
+      };
+      const prev = {
+        text: 'A',
+        bbox: { x0: 0, y0: 100, x1: 20, y1: 130 },
+        confidence: 90,
+      };
+      const next = {
+        text: 'B',
+        bbox: { x0: 30, y0: 100, x1: 50, y1: 130 },
+        confidence: 90,
+      };
+      const spaceWidthFn = (fontSize: number) => fontSize * 0.3;
+
+      const result = calculateSpaceTransform(
+        prev,
+        next,
+        lineWithIntercept,
+        800,
+        spaceWidthFn
+      );
+      expect(result).not.toBeNull();
+      expect(result!.y).toBe(800 - 130 - -5);
+    });
+
+    it('should use line height + intercept for font size', () => {
+      const prev = {
+        text: 'A',
+        bbox: { x0: 0, y0: 100, x1: 20, y1: 130 },
+        confidence: 90,
+      };
+      const next = {
+        text: 'B',
+        bbox: { x0: 30, y0: 100, x1: 50, y1: 130 },
+        confidence: 90,
+      };
+      const spaceWidthFn = (fontSize: number) => fontSize * 0.3;
+
+      const result = calculateSpaceTransform(
+        prev,
+        next,
+        baseLine,
+        800,
+        spaceWidthFn
+      );
+      expect(result).not.toBeNull();
+      expect(result!.fontSize).toBe(30);
+    });
+  });
+});

src/tests/image-effects.test.ts

@@ -0,0 +1,277 @@
+import { describe, it, expect } from 'vitest';
+import {
+  rgbToHsl,
+  hslToRgb,
+  applyGreyscale,
+  applyInvertColors,
+} from '../js/utils/image-effects';
+
+function createImageData(pixels: number[][]): ImageData {
+  const data = new Uint8ClampedArray(pixels.flat());
+  return {
+    data,
+    width: pixels.length,
+    height: 1,
+    colorSpace: 'srgb',
+  } as ImageData;
+}
+
+describe('image-effects', () => {
+  describe('rgbToHsl', () => {
+    it('should convert pure red', () => {
+      const [h, s, l] = rgbToHsl(255, 0, 0);
+      expect(h).toBeCloseTo(0, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it('should convert pure green', () => {
+      const [h, s, l] = rgbToHsl(0, 255, 0);
+      expect(h).toBeCloseTo(1 / 3, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it('should convert pure blue', () => {
+      const [h, s, l] = rgbToHsl(0, 0, 255);
+      expect(h).toBeCloseTo(2 / 3, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it('should convert white', () => {
+      const [h, s, l] = rgbToHsl(255, 255, 255);
+      expect(h).toBe(0);
+      expect(s).toBe(0);
+      expect(l).toBeCloseTo(1, 2);
+    });
+
+    it('should convert black', () => {
+      const [h, s, l] = rgbToHsl(0, 0, 0);
+      expect(h).toBe(0);
+      expect(s).toBe(0);
+      expect(l).toBe(0);
+    });
+
+    it('should convert mid gray', () => {
+      const [h, s, l] = rgbToHsl(128, 128, 128);
+      expect(h).toBe(0);
+      expect(s).toBe(0);
+      expect(l).toBeCloseTo(0.502, 2);
+    });
+
+    it('should convert yellow', () => {
+      const [h, s, l] = rgbToHsl(255, 255, 0);
+      expect(h).toBeCloseTo(1 / 6, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it('should convert cyan', () => {
+      const [h, s, l] = rgbToHsl(0, 255, 255);
+      expect(h).toBeCloseTo(0.5, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it('should convert magenta', () => {
+      const [h, s, l] = rgbToHsl(255, 0, 255);
+      expect(h).toBeCloseTo(5 / 6, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.5, 2);
+    });
+
+    it('should handle dark colors (l < 0.5)', () => {
+      const [h, s, l] = rgbToHsl(128, 0, 0);
+      expect(h).toBeCloseTo(0, 2);
+      expect(s).toBeCloseTo(1, 2);
+      expect(l).toBeCloseTo(0.251, 2);
+    });
+
+    it('should handle light colors (l > 0.5)', () => {
+      const [h, s, l] = rgbToHsl(255, 128, 128);
+      expect(l).toBeGreaterThan(0.5);
+      expect(s).toBeGreaterThan(0);
+    });
+  });
+
+  describe('hslToRgb', () => {
+    it('should convert pure red', () => {
+      expect(hslToRgb(0, 1, 0.5)).toEqual([255, 0, 0]);
+    });
+
+    it('should convert pure green', () => {
+      expect(hslToRgb(1 / 3, 1, 0.5)).toEqual([0, 255, 0]);
+    });
+
+    it('should convert pure blue', () => {
+      expect(hslToRgb(2 / 3, 1, 0.5)).toEqual([0, 0, 255]);
+    });
+
+    it('should convert white', () => {
+      expect(hslToRgb(0, 0, 1)).toEqual([255, 255, 255]);
+    });
+
+    it('should convert black', () => {
+      expect(hslToRgb(0, 0, 0)).toEqual([0, 0, 0]);
+    });
+
+    it('should convert gray (zero saturation)', () => {
+      const [r, g, b] = hslToRgb(0, 0, 0.5);
+      expect(r).toBe(g);
+      expect(g).toBe(b);
+      expect(r).toBe(128);
+    });
+
+    it('should convert yellow', () => {
+      expect(hslToRgb(1 / 6, 1, 0.5)).toEqual([255, 255, 0]);
+    });
+
+    it('should convert cyan', () => {
+      expect(hslToRgb(0.5, 1, 0.5)).toEqual([0, 255, 255]);
+    });
+
+    it('should handle different saturation values', () => {
+      const [r1] = hslToRgb(0, 0.5, 0.5);
+      const [r2] = hslToRgb(0, 1, 0.5);
+      expect(r2).toBeGreaterThan(r1);
+    });
+
+    it('should handle l < 0.5 branch', () => {
+      const result = hslToRgb(0, 1, 0.25);
+      expect(result[0]).toBe(128);
+      expect(result[1]).toBe(0);
+      expect(result[2]).toBe(0);
+    });
+
+    it('should handle l >= 0.5 branch', () => {
+      const result = hslToRgb(0, 1, 0.75);
+      expect(result[0]).toBe(255);
+      expect(result[1]).toBe(128);
+      expect(result[2]).toBe(128);
+    });
+  });
+
+  describe('rgbToHsl <-> hslToRgb round-trip', () => {
+    const testColors: [number, number, number][] = [
+      [255, 0, 0],
+      [0, 255, 0],
+      [0, 0, 255],
+      [255, 255, 0],
+      [0, 255, 255],
+      [255, 0, 255],
+      [128, 128, 128],
+      [200, 100, 50],
+      [50, 150, 200],
+      [10, 10, 10],
+      [245, 245, 245],
+    ];
+
+    testColors.forEach(([r, g, b]) => {
+      it(`should round-trip rgb(${r}, ${g}, ${b})`, () => {
+        const [h, s, l] = rgbToHsl(r, g, b);
+        const [r2, g2, b2] = hslToRgb(h, s, l);
+        expect(r2).toBeCloseTo(r, 0);
+        expect(g2).toBeCloseTo(g, 0);
+        expect(b2).toBeCloseTo(b, 0);
+      });
+    });
+  });
+
+  describe('applyGreyscale', () => {
+    it('should convert colored pixel to grey using luminance weights', () => {
+      const imageData = createImageData([[255, 0, 0, 255]]);
+      applyGreyscale(imageData);
+      const expected = Math.round(0.299 * 255);
+      expect(imageData.data[0]).toBe(expected);
+      expect(imageData.data[1]).toBe(expected);
+      expect(imageData.data[2]).toBe(expected);
+      expect(imageData.data[3]).toBe(255);
+    });
+
+    it('should keep white as white', () => {
+      const imageData = createImageData([[255, 255, 255, 255]]);
+      applyGreyscale(imageData);
+      expect(imageData.data[0]).toBe(255);
+      expect(imageData.data[1]).toBe(255);
+      expect(imageData.data[2]).toBe(255);
+    });
+
+    it('should keep black as black', () => {
+      const imageData = createImageData([[0, 0, 0, 255]]);
+      applyGreyscale(imageData);
+      expect(imageData.data[0]).toBe(0);
+      expect(imageData.data[1]).toBe(0);
+      expect(imageData.data[2]).toBe(0);
+    });
+
+    it('should process multiple pixels', () => {
+      const imageData = createImageData([
+        [255, 0, 0, 255],
+        [0, 255, 0, 255],
+        [0, 0, 255, 255],
+      ]);
+      applyGreyscale(imageData);
+      expect(imageData.data[0]).toBe(imageData.data[1]);
+      expect(imageData.data[4]).toBe(imageData.data[5]);
+      expect(imageData.data[8]).toBe(imageData.data[9]);
+    });
+
+    it('should not modify alpha channel', () => {
+      const imageData = createImageData([[100, 150, 200, 128]]);
+      applyGreyscale(imageData);
+      expect(imageData.data[3]).toBe(128);
+    });
+  });
+
+  describe('applyInvertColors', () => {
+    it('should invert black to white', () => {
+      const imageData = createImageData([[0, 0, 0, 255]]);
+      applyInvertColors(imageData);
+      expect(imageData.data[0]).toBe(255);
+      expect(imageData.data[1]).toBe(255);
+      expect(imageData.data[2]).toBe(255);
+    });
+
+    it('should invert white to black', () => {
+      const imageData = createImageData([[255, 255, 255, 255]]);
+      applyInvertColors(imageData);
+      expect(imageData.data[0]).toBe(0);
+      expect(imageData.data[1]).toBe(0);
+      expect(imageData.data[2]).toBe(0);
+    });
+
+    it('should invert mid-range colors', () => {
+      const imageData = createImageData([[100, 150, 200, 255]]);
+      applyInvertColors(imageData);
+      expect(imageData.data[0]).toBe(155);
+      expect(imageData.data[1]).toBe(105);
+      expect(imageData.data[2]).toBe(55);
+    });
+
+    it('should not modify alpha channel', () => {
+      const imageData = createImageData([[100, 150, 200, 128]]);
+      applyInvertColors(imageData);
+      expect(imageData.data[3]).toBe(128);
+    });
+
+    it('should be its own inverse (double invert = original)', () => {
+      const imageData = createImageData([[42, 128, 200, 255]]);
+      applyInvertColors(imageData);
+      applyInvertColors(imageData);
+      expect(imageData.data[0]).toBe(42);
+      expect(imageData.data[1]).toBe(128);
+      expect(imageData.data[2]).toBe(200);
+    });
+
+    it('should process multiple pixels', () => {
+      const imageData = createImageData([
+        [0, 0, 0, 255],
+        [255, 255, 255, 255],
+      ]);
+      applyInvertColors(imageData);
+      expect(imageData.data[0]).toBe(255);
+      expect(imageData.data[4]).toBe(0);
+    });
+  });
+});

src/tests/pdf-operations.test.ts

@@ -0,0 +1,272 @@
+import { describe, it, expect } from 'vitest';
+import {
+  parsePageRange,
+  parseDeletePages,
+  mergePdfs,
+  splitPdf,
+  deletePdfPages,
+  rotatePdfUniform,
+  rotatePdfPages,
+} from '../js/utils/pdf-operations';
+import { PDFDocument } from 'pdf-lib';
+
+async function createTestPdf(pageCount: number): Promise<Uint8Array> {
+  const doc = await PDFDocument.create();
+  for (let i = 0; i < pageCount; i++) {
+    doc.addPage([612, 792]);
+  }
+  return new Uint8Array(await doc.save());
+}
+
+describe('pdf-operations', () => {
+  describe('parsePageRange', () => {
+    it('should parse single page', () => {
+      expect(parsePageRange('3', 10)).toEqual([2]);
+    });
+
+    it('should parse multiple pages', () => {
+      expect(parsePageRange('1,3,5', 10)).toEqual([0, 2, 4]);
+    });
+
+    it('should parse range', () => {
+      expect(parsePageRange('2-5', 10)).toEqual([1, 2, 3, 4]);
+    });
+
+    it('should parse mixed pages and ranges', () => {
+      expect(parsePageRange('1,3-5,8', 10)).toEqual([0, 2, 3, 4, 7]);
+    });
+
+    it('should handle spaces', () => {
+      expect(parsePageRange(' 1 , 3 - 5 ', 10)).toEqual([0, 2, 3, 4]);
+    });
+
+    it('should deduplicate and sort', () => {
+      expect(parsePageRange('5,3,1,3-5', 10)).toEqual([0, 2, 3, 4]);
+    });
+
+    it('should clamp start to 1', () => {
+      expect(parsePageRange('0-3', 10)).toEqual([0, 1, 2]);
+    });
+
+    it('should clamp end to totalPages', () => {
+      expect(parsePageRange('8-15', 10)).toEqual([7, 8, 9]);
+    });
+
+    it('should ignore pages outside bounds', () => {
+      expect(parsePageRange('0,11,5', 10)).toEqual([4]);
+    });
+
+    it('should handle single page document', () => {
+      expect(parsePageRange('1', 1)).toEqual([0]);
+    });
+
+    it('should handle invalid non-numeric input', () => {
+      expect(parsePageRange('abc', 10)).toEqual([]);
+    });
+
+    it('should handle empty parts', () => {
+      expect(parsePageRange('1,,3', 10)).toEqual([0, 2]);
+    });
+
+    it('should handle range with invalid end (NaN defaults to totalPages)', () => {
+      expect(parsePageRange('3-abc', 10)).toEqual([2, 3, 4, 5, 6, 7, 8, 9]);
+    });
+  });
+
+  describe('parseDeletePages', () => {
+    it('should parse single page', () => {
+      expect(parseDeletePages('3', 10)).toEqual(new Set([3]));
+    });
+
+    it('should parse multiple pages', () => {
+      expect(parseDeletePages('1,3,5', 10)).toEqual(new Set([1, 3, 5]));
+    });
+
+    it('should parse range', () => {
+      expect(parseDeletePages('2-5', 10)).toEqual(new Set([2, 3, 4, 5]));
+    });
+
+    it('should parse mixed pages and ranges', () => {
+      expect(parseDeletePages('1,3-5,8', 10)).toEqual(new Set([1, 3, 4, 5, 8]));
+    });
+
+    it('should ignore out-of-bounds pages', () => {
+      expect(parseDeletePages('0,11,5', 10)).toEqual(new Set([5]));
+    });
+
+    it('should handle spaces', () => {
+      expect(parseDeletePages(' 1 , 3 ', 10)).toEqual(new Set([1, 3]));
+    });
+
+    it('should clamp range to valid bounds', () => {
+      expect(parseDeletePages('0-3', 10)).toEqual(new Set([1, 2, 3]));
+    });
+
+    it('should clamp range end to totalPages', () => {
+      expect(parseDeletePages('8-15', 10)).toEqual(new Set([8, 9, 10]));
+    });
+
+    it('should return 1-indexed page numbers', () => {
+      const result = parseDeletePages('1', 10);
+      expect(result.has(1)).toBe(true);
+      expect(result.has(0)).toBe(false);
+    });
+
+    it('should handle empty parts gracefully', () => {
+      expect(parseDeletePages('1,,5', 10)).toEqual(new Set([1, 5]));
+    });
+  });
+
+  describe('mergePdfs', () => {
+    it('should merge two single-page PDFs', async () => {
+      const pdf1 = await createTestPdf(1);
+      const pdf2 = await createTestPdf(1);
+      const merged = await mergePdfs([pdf1, pdf2]);
+      const doc = await PDFDocument.load(merged);
+      expect(doc.getPageCount()).toBe(2);
+    });
+
+    it('should merge multiple PDFs', async () => {
+      const pdfs = await Promise.all([
+        createTestPdf(2),
+        createTestPdf(3),
+        createTestPdf(1),
+      ]);
+      const merged = await mergePdfs(pdfs);
+      const doc = await PDFDocument.load(merged);
+      expect(doc.getPageCount()).toBe(6);
+    });
+
+    it('should handle single PDF input', async () => {
+      const pdf = await createTestPdf(3);
+      const merged = await mergePdfs([pdf]);
+      const doc = await PDFDocument.load(merged);
+      expect(doc.getPageCount()).toBe(3);
+    });
+
+    it('should handle empty array', async () => {
+      const merged = await mergePdfs([]);
+      const doc = await PDFDocument.load(merged);
+      expect(doc.getPageCount()).toBe(0);
+    });
+  });
+
+  describe('splitPdf', () => {
+    it('should extract specific pages', async () => {
+      const pdf = await createTestPdf(5);
+      const split = await splitPdf(pdf, [0, 2, 4]);
+      const doc = await PDFDocument.load(split);
+      expect(doc.getPageCount()).toBe(3);
+    });
+
+    it('should extract single page', async () => {
+      const pdf = await createTestPdf(5);
+      const split = await splitPdf(pdf, [2]);
+      const doc = await PDFDocument.load(split);
+      expect(doc.getPageCount()).toBe(1);
+    });
+
+    it('should handle extracting all pages', async () => {
+      const pdf = await createTestPdf(3);
+      const split = await splitPdf(pdf, [0, 1, 2]);
+      const doc = await PDFDocument.load(split);
+      expect(doc.getPageCount()).toBe(3);
+    });
+  });
+
+  describe('deletePdfPages', () => {
+    it('should delete specified pages', async () => {
+      const pdf = await createTestPdf(5);
+      const result = await deletePdfPages(pdf, new Set([1, 3]));
+      const doc = await PDFDocument.load(result);
+      expect(doc.getPageCount()).toBe(3);
+    });
+
+    it('should delete single page', async () => {
+      const pdf = await createTestPdf(3);
+      const result = await deletePdfPages(pdf, new Set([2]));
+      const doc = await PDFDocument.load(result);
+      expect(doc.getPageCount()).toBe(2);
+    });
+
+    it('should throw when deleting all pages', async () => {
+      const pdf = await createTestPdf(2);
+      await expect(deletePdfPages(pdf, new Set([1, 2]))).rejects.toThrow(
+        'Cannot delete all pages'
+      );
+    });
+
+    it('should ignore out-of-range page numbers', async () => {
+      const pdf = await createTestPdf(3);
+      const result = await deletePdfPages(pdf, new Set([5, 10]));
+      const doc = await PDFDocument.load(result);
+      expect(doc.getPageCount()).toBe(3);
+    });
+
+    it('should handle deleting no pages (empty set)', async () => {
+      const pdf = await createTestPdf(3);
+      const result = await deletePdfPages(pdf, new Set());
+      const doc = await PDFDocument.load(result);
+      expect(doc.getPageCount()).toBe(3);
+    });
+  });
+
+  describe('rotatePdfUniform', () => {
+    it('should rotate all pages by 90 degrees', async () => {
+      const pdf = await createTestPdf(3);
+      const rotated = await rotatePdfUniform(pdf, 90);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPageCount()).toBe(3);
+      expect(doc.getPage(0).getRotation().angle).toBe(90);
+    });
+
+    it('should rotate by 180 degrees', async () => {
+      const pdf = await createTestPdf(2);
+      const rotated = await rotatePdfUniform(pdf, 180);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPage(0).getRotation().angle).toBe(180);
+    });
+
+    it('should handle 0 degree rotation', async () => {
+      const pdf = await createTestPdf(2);
+      const rotated = await rotatePdfUniform(pdf, 0);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPage(0).getRotation().angle).toBe(0);
+    });
+
+    it('should rotate by 270 degrees', async () => {
+      const pdf = await createTestPdf(1);
+      const rotated = await rotatePdfUniform(pdf, 270);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPage(0).getRotation().angle).toBe(270);
+    });
+  });
+
+  describe('rotatePdfPages', () => {
+    it('should rotate individual pages by different angles', async () => {
+      const pdf = await createTestPdf(3);
+      const rotated = await rotatePdfPages(pdf, [90, 0, 180]);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPage(0).getRotation().angle).toBe(90);
+      expect(doc.getPage(1).getRotation().angle).toBe(0);
+      expect(doc.getPage(2).getRotation().angle).toBe(180);
+    });
+
+    it('should treat missing rotations as 0', async () => {
+      const pdf = await createTestPdf(3);
+      const rotated = await rotatePdfPages(pdf, [90]);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPage(0).getRotation().angle).toBe(90);
+      expect(doc.getPage(1).getRotation().angle).toBe(0);
+      expect(doc.getPage(2).getRotation().angle).toBe(0);
+    });
+
+    it('should handle all zeros', async () => {
+      const pdf = await createTestPdf(2);
+      const rotated = await rotatePdfPages(pdf, [0, 0]);
+      const doc = await PDFDocument.load(rotated);
+      expect(doc.getPage(0).getRotation().angle).toBe(0);
+      expect(doc.getPage(1).getRotation().angle).toBe(0);
+    });
+  });
+});

src/tests/pdf-tools.test.ts

@@ -19,7 +19,7 @@ describe('Tool Configuration Arrays', () => {
 
     it('should have the correct number of tools', () => {
       // This acts as a snapshot test to catch unexpected additions/removals.
-      expect(singlePdfLoadTools).toHaveLength(41);
+      expect(singlePdfLoadTools).toHaveLength(42);
     });
 
     it('should not contain any duplicate tools', () => {
@@ -61,7 +61,7 @@ describe('Tool Configuration Arrays', () => {
     });
 
     it('should have the correct number of tools', () => {
-      expect(multiFileTools).toHaveLength(13);
+      expect(multiFileTools).toHaveLength(18);
     });
 
     it('should not contain any duplicate tools', () => {

src/tests/rotation-state.test.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  getRotationState,
+  updateRotationState,
+  resetRotationState,
+  initializeRotationState,
+} from '../js/utils/rotation-state';
+
+describe('rotation-state', () => {
+  beforeEach(() => {
+    resetRotationState();
+  });
+
+  describe('initializeRotationState', () => {
+    it('should create array of zeros for given page count', () => {
+      initializeRotationState(5);
+      expect(getRotationState()).toEqual([0, 0, 0, 0, 0]);
+    });
+
+    it('should handle single page', () => {
+      initializeRotationState(1);
+      expect(getRotationState()).toEqual([0]);
+    });
+
+    it('should handle zero pages', () => {
+      initializeRotationState(0);
+      expect(getRotationState()).toEqual([]);
+    });
+
+    it('should reset previous state on re-initialization', () => {
+      initializeRotationState(3);
+      updateRotationState(0, 90);
+      initializeRotationState(5);
+      expect(getRotationState()).toEqual([0, 0, 0, 0, 0]);
+    });
+  });
+
+  describe('getRotationState', () => {
+    it('should return empty array before initialization', () => {
+      expect(getRotationState()).toEqual([]);
+    });
+
+    it('should return readonly array', () => {
+      initializeRotationState(3);
+      const state = getRotationState();
+      expect(Array.isArray(state)).toBe(true);
+    });
+
+    it('should reflect current state after updates', () => {
+      initializeRotationState(3);
+      updateRotationState(1, 180);
+      expect(getRotationState()[1]).toBe(180);
+    });
+  });
+
+  describe('updateRotationState', () => {
+    it('should update rotation at valid index', () => {
+      initializeRotationState(3);
+      updateRotationState(0, 90);
+      expect(getRotationState()[0]).toBe(90);
+    });
+
+    it('should update to any rotation value', () => {
+      initializeRotationState(3);
+      updateRotationState(0, 90);
+      updateRotationState(1, 180);
+      updateRotationState(2, 270);
+      expect(getRotationState()).toEqual([90, 180, 270]);
+    });
+
+    it('should handle negative rotation', () => {
+      initializeRotationState(2);
+      updateRotationState(0, -90);
+      expect(getRotationState()[0]).toBe(-90);
+    });
+
+    it('should ignore negative index', () => {
+      initializeRotationState(3);
+      updateRotationState(-1, 90);
+      expect(getRotationState()).toEqual([0, 0, 0]);
+    });
+
+    it('should ignore out-of-bounds index', () => {
+      initializeRotationState(3);
+      updateRotationState(5, 90);
+      expect(getRotationState()).toEqual([0, 0, 0]);
+    });
+
+    it('should ignore update on empty state', () => {
+      updateRotationState(0, 90);
+      expect(getRotationState()).toEqual([]);
+    });
+
+    it('should allow overwriting a previously set rotation', () => {
+      initializeRotationState(2);
+      updateRotationState(0, 90);
+      updateRotationState(0, 180);
+      expect(getRotationState()[0]).toBe(180);
+    });
+  });
+
+  describe('resetRotationState', () => {
+    it('should clear all state', () => {
+      initializeRotationState(5);
+      updateRotationState(2, 270);
+      resetRotationState();
+      expect(getRotationState()).toEqual([]);
+    });
+
+    it('should be safe to call on empty state', () => {
+      resetRotationState();
+      expect(getRotationState()).toEqual([]);
+    });
+
+    it('should allow re-initialization after reset', () => {
+      initializeRotationState(3);
+      resetRotationState();
+      initializeRotationState(2);
+      expect(getRotationState()).toEqual([0, 0]);
+    });
+  });
+});

src/tests/setup.ts

@@ -1,5 +1,18 @@
 import { afterEach, vi } from 'vitest';
 
+class TestDOMMatrix {
+  a = 1;
+  b = 0;
+  c = 0;
+  d = 1;
+  e = 0;
+  f = 0;
+}
+
+if (typeof globalThis.DOMMatrix === 'undefined') {
+  globalThis.DOMMatrix = TestDOMMatrix as unknown as typeof DOMMatrix;
+}
+
 afterEach(() => {
   document.body.innerHTML = '';
   document.head.innerHTML = '';

src/tests/xml-to-pdf.test.ts

@@ -0,0 +1,255 @@
+import { describe, it, expect } from 'vitest';
+
+function groupByTagName(elements: Element[]): Record<string, Element[]> {
+  const groups: Record<string, Element[]> = {};
+  for (const element of elements) {
+    const tagName = element.tagName;
+    if (!groups[tagName]) {
+      groups[tagName] = [];
+    }
+    groups[tagName].push(element);
+  }
+  return groups;
+}
+
+function extractTableData(elements: Element[]): {
+  headers: string[];
+  rows: string[][];
+} {
+  if (elements.length === 0) {
+    return { headers: [], rows: [] };
+  }
+  const headerSet = new Set<string>();
+  for (const element of elements) {
+    for (const child of Array.from(element.children)) {
+      headerSet.add(child.tagName);
+    }
+  }
+  const headers = Array.from(headerSet);
+  const rows: string[][] = [];
+  for (const element of elements) {
+    const row: string[] = [];
+    for (const header of headers) {
+      const child = element.querySelector(header);
+      row.push(child?.textContent?.trim() || '');
+    }
+    rows.push(row);
+  }
+  return { headers, rows };
+}
+
+function extractKeyValuePairs(element: Element): string[][] {
+  const pairs: string[][] = [];
+  for (const child of Array.from(element.children)) {
+    const key = child.tagName;
+    const value = child.textContent?.trim() || '';
+    if (value) {
+      pairs.push([formatTitle(key), value]);
+    }
+  }
+  for (const attr of Array.from(element.attributes)) {
+    pairs.push([formatTitle(attr.name), attr.value]);
+  }
+  return pairs;
+}
+
+function formatTitle(tagName: string): string {
+  return tagName
+    .replace(/[_-]/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+}
+
+function parseXml(xmlString: string): Document {
+  return new DOMParser().parseFromString(xmlString, 'text/xml');
+}
+
+describe('xml-to-pdf utilities', () => {
+  describe('formatTitle', () => {
+    it('should convert underscores to spaces and capitalize', () => {
+      expect(formatTitle('first_name')).toBe('First Name');
+    });
+
+    it('should convert hyphens to spaces and capitalize', () => {
+      expect(formatTitle('last-name')).toBe('Last Name');
+    });
+
+    it('should split camelCase', () => {
+      expect(formatTitle('firstName')).toBe('First Name');
+    });
+
+    it('should handle single word', () => {
+      expect(formatTitle('name')).toBe('Name');
+    });
+
+    it('should handle all caps', () => {
+      expect(formatTitle('ID')).toBe('Id');
+    });
+
+    it('should handle mixed separators', () => {
+      expect(formatTitle('user_firstName')).toBe('User First Name');
+    });
+
+    it('should handle empty string', () => {
+      expect(formatTitle('')).toBe('');
+    });
+
+    it('should handle multiple underscores', () => {
+      expect(formatTitle('a_b_c')).toBe('A B C');
+    });
+
+    it('should lowercase subsequent characters', () => {
+      expect(formatTitle('XML')).toBe('Xml');
+    });
+  });
+
+  describe('groupByTagName', () => {
+    it('should group elements by tag name', () => {
+      const doc = parseXml(
+        '<root><item>1</item><item>2</item><other>3</other></root>'
+      );
+      const children = Array.from(doc.documentElement.children);
+      const groups = groupByTagName(children);
+      expect(Object.keys(groups)).toEqual(['item', 'other']);
+      expect(groups['item'].length).toBe(2);
+      expect(groups['other'].length).toBe(1);
+    });
+
+    it('should handle empty array', () => {
+      expect(groupByTagName([])).toEqual({});
+    });
+
+    it('should handle single element', () => {
+      const doc = parseXml('<root><item>1</item></root>');
+      const children = Array.from(doc.documentElement.children);
+      const groups = groupByTagName(children);
+      expect(Object.keys(groups)).toEqual(['item']);
+      expect(groups['item'].length).toBe(1);
+    });
+
+    it('should handle all same tag names', () => {
+      const doc = parseXml('<root><row>1</row><row>2</row><row>3</row></root>');
+      const children = Array.from(doc.documentElement.children);
+      const groups = groupByTagName(children);
+      expect(Object.keys(groups)).toEqual(['row']);
+      expect(groups['row'].length).toBe(3);
+    });
+
+    it('should handle all different tag names', () => {
+      const doc = parseXml('<root><a>1</a><b>2</b><c>3</c></root>');
+      const children = Array.from(doc.documentElement.children);
+      const groups = groupByTagName(children);
+      expect(Object.keys(groups).length).toBe(3);
+    });
+  });
+
+  describe('extractTableData', () => {
+    it('should extract headers and rows from elements', () => {
+      const doc = parseXml(`
+        <root>
+          <person><name>Alice</name><age>30</age></person>
+          <person><name>Bob</name><age>25</age></person>
+        </root>
+      `);
+      const elements = Array.from(doc.querySelectorAll('person'));
+      const { headers, rows } = extractTableData(elements);
+      expect(headers).toEqual(['name', 'age']);
+      expect(rows).toEqual([
+        ['Alice', '30'],
+        ['Bob', '25'],
+      ]);
+    });
+
+    it('should handle empty array', () => {
+      expect(extractTableData([])).toEqual({ headers: [], rows: [] });
+    });
+
+    it('should handle missing children in some elements', () => {
+      const doc = parseXml(`
+        <root>
+          <item><a>1</a><b>2</b></item>
+          <item><a>3</a></item>
+        </root>
+      `);
+      const elements = Array.from(doc.querySelectorAll('item'));
+      const { headers, rows } = extractTableData(elements);
+      expect(headers).toEqual(['a', 'b']);
+      expect(rows[1]).toEqual(['3', '']);
+    });
+
+    it('should handle elements with no children', () => {
+      const doc = parseXml('<root><item></item></root>');
+      const elements = Array.from(doc.querySelectorAll('item'));
+      const { headers, rows } = extractTableData(elements);
+      expect(headers).toEqual([]);
+      expect(rows).toEqual([[]]);
+    });
+
+    it('should collect headers from all elements', () => {
+      const doc = parseXml(`
+        <root>
+          <item><a>1</a></item>
+          <item><b>2</b></item>
+        </root>
+      `);
+      const elements = Array.from(doc.querySelectorAll('item'));
+      const { headers } = extractTableData(elements);
+      expect(headers).toContain('a');
+      expect(headers).toContain('b');
+    });
+
+    it('should trim whitespace from text content', () => {
+      const doc = parseXml('<root><item><val>  hello  </val></item></root>');
+      const elements = Array.from(doc.querySelectorAll('item'));
+      const { rows } = extractTableData(elements);
+      expect(rows[0][0]).toBe('hello');
+    });
+  });
+
+  describe('extractKeyValuePairs', () => {
+    it('should extract child elements as key-value pairs', () => {
+      const doc = parseXml(
+        '<config><name>Test</name><version>1.0</version></config>'
+      );
+      const pairs = extractKeyValuePairs(doc.documentElement);
+      expect(pairs).toEqual([
+        ['Name', 'Test'],
+        ['Version', '1.0'],
+      ]);
+    });
+
+    it('should extract attributes as key-value pairs', () => {
+      const doc = parseXml('<config id="123" type="main"></config>');
+      const pairs = extractKeyValuePairs(doc.documentElement);
+      expect(pairs).toContainEqual(['Id', '123']);
+      expect(pairs).toContainEqual(['Type', 'main']);
+    });
+
+    it('should include both children and attributes', () => {
+      const doc = parseXml('<config id="1"><name>Test</name></config>');
+      const pairs = extractKeyValuePairs(doc.documentElement);
+      expect(pairs.length).toBe(2);
+    });
+
+    it('should skip empty child text content', () => {
+      const doc = parseXml('<config><name>Test</name><empty></empty></config>');
+      const pairs = extractKeyValuePairs(doc.documentElement);
+      expect(pairs.length).toBe(1);
+      expect(pairs[0][0]).toBe('Name');
+    });
+
+    it('should handle element with no children or attributes', () => {
+      const doc = parseXml('<config></config>');
+      const pairs = extractKeyValuePairs(doc.documentElement);
+      expect(pairs).toEqual([]);
+    });
+
+    it('should format tag names using formatTitle', () => {
+      const doc = parseXml('<config><user_name>Alice</user_name></config>');
+      const pairs = extractKeyValuePairs(doc.documentElement);
+      expect(pairs[0][0]).toBe('User Name');
+    });
+  });
+});