Refine mobile workspace slider and dropzone layout

## Description of Changes

- Removed unused `React` default imports across multiple frontend
components.
- Updated imports to only include required React hooks and types (e.g.,
`useState`, `useEffect`, `Suspense`, `createContext`).
- Ensured consistency with React 17+ JSX transform, where default
`React` import is no longer required.
- This cleanup reduces bundle size slightly and aligns code with modern
React best practices.

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

Co-authored-by: Reece Browne <74901996+reecebrowne@users.noreply.github.com>

.github/workflows/frontend-licenses-update.yml

@@ -12,6 +12,7 @@ on:
     branches:
       - V2
     paths:
+      - ".github/workflows/frontend-licenses-update.yml"
       - "frontend/package.json"
       - "frontend/package-lock.json"
       - "frontend/scripts/generate-licenses.js"
@@ -28,12 +29,12 @@ jobs:
       repository-projects: write # Required for enabling automerge
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@6c439dc8bdf85cadbbce9ed30d1c7b959517bc49 # v2.12.2
+        uses: step-security/harden-runner@f4a75cfd619ee5ce8d5b864b0d183aff3c69b55a # v2.13.1
         with:
           egress-policy: audit
 
       - name: Checkout PR head (default)
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -48,7 +49,7 @@ jobs:
 
       - name: Checkout BASE branch (safe script)
         if: github.event_name == 'pull_request'
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: ${{ github.event.pull_request.base.sha }}
           path: base
@@ -56,9 +57,9 @@ jobs:
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
 
@@ -114,7 +115,7 @@ jobs:
       # PR Event: Check licenses and comment on PR
       - name: Delete previous license check comments
         if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ steps.setup-bot.outputs.token }}
           script: |
@@ -167,7 +168,7 @@ jobs:
 
       - name: Comment on PR - License Check Results
         if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ steps.setup-bot.outputs.token }}
           script: |

docker/frontend/Dockerfile

@@ -4,7 +4,7 @@ FROM node:20-alpine AS build
 WORKDIR /app
 
 # Copy package files
-COPY frontend/package*.json ./
+COPY frontend/package.json frontend/package-lock.json ./
 
 # Install dependencies
 RUN npm ci

docker/frontend/nginx.conf

@@ -6,6 +6,11 @@ http {
     include /etc/nginx/mime.types;
     default_type application/octet-stream;
 
+    # Add .mjs MIME type mapping
+    types {
+        text/javascript mjs;
+    }
+
     # Gzip compression
     gzip on;
     gzip_vary on;
@@ -90,6 +95,14 @@ http {
             proxy_set_header X-Forwarded-Port $server_port;
         }
 
+        # Serve .mjs files with correct MIME type (must come before general static assets)
+        location ~* \.mjs$ {
+            try_files $uri =404;
+            add_header Content-Type "text/javascript; charset=utf-8" always;
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
         # Cache static assets
         location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
             expires 1y;

frontend/package-lock.json

@@ -10,21 +10,24 @@
       "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
-        "@embedpdf/core": "^1.2.1",
-        "@embedpdf/engines": "^1.2.1",
-        "@embedpdf/plugin-interaction-manager": "^1.2.1",
-        "@embedpdf/plugin-loader": "^1.2.1",
-        "@embedpdf/plugin-pan": "^1.2.1",
-        "@embedpdf/plugin-render": "^1.2.1",
-        "@embedpdf/plugin-rotate": "^1.2.1",
-        "@embedpdf/plugin-scroll": "^1.2.1",
-        "@embedpdf/plugin-search": "^1.2.1",
-        "@embedpdf/plugin-selection": "^1.2.1",
-        "@embedpdf/plugin-spread": "^1.2.1",
-        "@embedpdf/plugin-thumbnail": "^1.2.1",
-        "@embedpdf/plugin-tiling": "^1.2.1",
-        "@embedpdf/plugin-viewport": "^1.2.1",
-        "@embedpdf/plugin-zoom": "^1.2.1",
+        "@embedpdf/core": "^1.3.1",
+        "@embedpdf/engines": "^1.3.1",
+        "@embedpdf/plugin-annotation": "^1.3.1",
+        "@embedpdf/plugin-export": "^1.3.1",
+        "@embedpdf/plugin-history": "^1.3.1",
+        "@embedpdf/plugin-interaction-manager": "^1.3.1",
+        "@embedpdf/plugin-loader": "^1.3.1",
+        "@embedpdf/plugin-pan": "^1.3.1",
+        "@embedpdf/plugin-render": "^1.3.1",
+        "@embedpdf/plugin-rotate": "^1.3.1",
+        "@embedpdf/plugin-scroll": "^1.3.1",
+        "@embedpdf/plugin-search": "^1.3.1",
+        "@embedpdf/plugin-selection": "^1.3.1",
+        "@embedpdf/plugin-spread": "^1.3.1",
+        "@embedpdf/plugin-thumbnail": "^1.3.1",
+        "@embedpdf/plugin-tiling": "^1.3.1",
+        "@embedpdf/plugin-viewport": "^1.3.1",
+        "@embedpdf/plugin-zoom": "^1.3.1",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@iconify/react": "^6.0.2",
@@ -488,12 +491,13 @@
       }
     },
     "node_modules/@embedpdf/core": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.2.1.tgz",
-      "integrity": "sha512-2VwRPsN3+LmaBrD8TCN1t1ni/Vc9CxAfl/SApDjZYwE7zOieQT4ZHt+nkgF0F4I3xSgvvyHDjmOonhjBIrT6xA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz",
+      "integrity": "sha512-2Az6trhiMMBIv+GFvV8H8UOS1gwQn7NK0KaJMcdsZbUHYLO0P95aVd6Pi/GRzEH4XyF51TDIoTOAUtf07TQ5dQ==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/engines": "1.2.1",
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/engines": "1.3.1",
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
         "preact": "^10.26.4",
@@ -503,13 +507,13 @@
       }
     },
     "node_modules/@embedpdf/engines": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/engines/-/engines-1.2.1.tgz",
-      "integrity": "sha512-nhycZ7Buq2B34dcpo6n7RdFwdhwTvKzvnRy7QX+uU00Dz5vftkCG4OK+pBVzxE4y7vAu+Yb4wNpdc7HmIj3B6w==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/engines/-/engines-1.3.1.tgz",
+      "integrity": "sha512-G3pI+18la7spviUMuA5s9/hV95jlfkA2+CNxqlHBO5ocw3641E3d36Lv+mx+6yU7k0B5vEOQPZDGRMg7KFziBQ==",
       "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1",
-        "@embedpdf/pdfium": "1.2.1"
+        "@embedpdf/models": "1.3.1",
+        "@embedpdf/pdfium": "1.3.1"
       },
       "peerDependencies": {
         "preact": "^10.26.4",
@@ -519,26 +523,79 @@
       }
     },
     "node_modules/@embedpdf/models": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/models/-/models-1.2.1.tgz",
-      "integrity": "sha512-FzJU51jsqihfgt50B00FEpgyym87/Dn2iGmMq4++Vu/oO6qBx/y69m4/cCAh4p4KkTJsvKNWC7T7dwSKa0FjHA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/models/-/models-1.3.1.tgz",
+      "integrity": "sha512-OzmO1rQAuOP/Y3aYXmW21dPNAx49olhr9ZO2hDdI0fbNBHTVGxnaKqOISxVmUz7TmhTwVBljERACnaA8Ib4b4Q==",
       "license": "MIT"
     },
     "node_modules/@embedpdf/pdfium": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/pdfium/-/pdfium-1.2.1.tgz",
-      "integrity": "sha512-QWf1jg7EqUlku2q6KYhlXCNfk5IAykFerPuzKJepHTeAEaRcAfu84fJgEsoUTCK4D6dfzVNp2Iuxw6Kv7MpSeg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/pdfium/-/pdfium-1.3.1.tgz",
+      "integrity": "sha512-qYGSS5ntz6DSY9Cxw/aigvHqGB+AKJLEcymNTZOL0GdlBzZpL++dOIYNEYHO2Tm/lOQVpE7I0e+Xh2TvD8O1zQ==",
       "license": "MIT"
     },
-    "node_modules/@embedpdf/plugin-interaction-manager": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.2.1.tgz",
-      "integrity": "sha512-HhEBuDjDNMH6wu76Eo3yHwjG01U1lNZShkOsFoib/rtx8HByTgZS8iVpovaOprr6gfS04ZLqWcsN1nt5qAH90w==",
+    "node_modules/@embedpdf/plugin-annotation": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-annotation/-/plugin-annotation-1.3.1.tgz",
+      "integrity": "sha512-mmePRYYBB8v8NIZ95XVfFkpyQ2QiKIGdWyvrPeJXSbL3/K6d6ix+o/jHBVvBWyTsQzdIlzs+FW8+iT0M1zkEow==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1",
+        "@embedpdf/utils": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-history": "1.3.1",
+        "@embedpdf/plugin-interaction-manager": "1.3.1",
+        "@embedpdf/plugin-selection": "1.3.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@embedpdf/plugin-export": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-export/-/plugin-export-1.3.1.tgz",
+      "integrity": "sha512-reb03vNPFP5GuIAFExMcuYBVYu/deVO2v8EoCwRZ/lzzYMORIkJjpNWDQPo9VfyGBh1x4/o3CHvxisU1Y1tDLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@embedpdf/models": "1.3.1"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.3.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@embedpdf/plugin-history": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.3.1.tgz",
+      "integrity": "sha512-HrPkWQmAk08mbHiOcIN4htVq5KJMqI9zSjAqaYQEhV/TugeHfWVpK+xMst/PzuFb14HWgk5gWXjtV5E4SDlw9w==",
+      "license": "MIT",
+      "dependencies": {
+        "@embedpdf/models": "1.3.1"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.3.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@embedpdf/plugin-interaction-manager": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.3.1.tgz",
+      "integrity": "sha512-8h3y5a9tQ1fZlc4mP1/+XKyuHWwcQEm9AujKxy+6f6omtCBzpnKrH95bURgYOzQEBGY7d5C3HvG6JOlh0o1x3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@embedpdf/models": "1.3.1"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -546,14 +603,15 @@
       }
     },
     "node_modules/@embedpdf/plugin-loader": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.2.1.tgz",
-      "integrity": "sha512-VblKErfEiHcVao18TfCmc0UJlKAkqxE29DaLJrXQHGUw/qc+pC9HlvMVpDz3+Eb13UafYS6ZUZuEng2/fQ+JJw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.3.1.tgz",
+      "integrity": "sha512-NjNmA7TOs3E/zwb9I+YohzyGkxq8y5NUGu0MKgh2g41lZoFvyqTAjFPar+RjEiLX8iiJiwNZswyJsNrytmS3Xg==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
+        "@embedpdf/core": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -561,16 +619,17 @@
       }
     },
     "node_modules/@embedpdf/plugin-pan": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-pan/-/plugin-pan-1.2.1.tgz",
-      "integrity": "sha512-/BTOyRl31tvnCmoLs4qNPROMRLaG34jGYNyMQquB0uPUXZjwdMloikriwos91qCOLUrhvs4SaDpC3Ghv2BO5kA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-pan/-/plugin-pan-1.3.1.tgz",
+      "integrity": "sha512-lF1gkz/a77G3+Rr8MOefkGnPJ1i5xWnClXm2ZzYAl7PbOScp59/PaP7qeU7eMPC4FHQM81ZhCgVYGXogbaB8ww==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-interaction-manager": "1.2.1",
-        "@embedpdf/plugin-viewport": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-interaction-manager": "1.3.1",
+        "@embedpdf/plugin-viewport": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -578,14 +637,15 @@
       }
     },
     "node_modules/@embedpdf/plugin-render": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.2.1.tgz",
-      "integrity": "sha512-iMfuVJqttJmm7Zb8oOaqNVNrC3NS57bDNNAc4MIc2f2TxIFSznvBPlwWN+PN45qNcTQiGzFc1ZMqIQDOG4qFnQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.3.1.tgz",
+      "integrity": "sha512-c9oH097e1CVUpYF9RgZRfV/7XCJ0pf+svdT1wyM2MbWby06ti20oCwT9wf7BLY0hPQ7+eO3wunr1I1/y3MnVrw==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
+        "@embedpdf/core": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -593,14 +653,15 @@
       }
     },
     "node_modules/@embedpdf/plugin-rotate": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-rotate/-/plugin-rotate-1.2.1.tgz",
-      "integrity": "sha512-UhHds5donLDXm3i9nKrhSmo3yawVtjb6gID0MDrhj3+Lci/YQ3wDvGUhk7dNmgLcOt7G8pMa0wesnnpVWirUXA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-rotate/-/plugin-rotate-1.3.1.tgz",
+      "integrity": "sha512-mRAlIW7IZAnCyDuYqN13yDc6yoNIYLUB4uYTUAR7vTIt021C8H5jDHk9TmLwcH0tQ8/R3yHuDm/XPAe0zfs81g==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
+        "@embedpdf/core": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -608,15 +669,16 @@
       }
     },
     "node_modules/@embedpdf/plugin-scroll": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.2.1.tgz",
-      "integrity": "sha512-I1haDXIOzs59uhOWEP6UvP5jzjcQHMLQuQbfRVJM0zdWU6t3jwSfcwPUI7iv4CAAepbuyJKL328yc8736r/FYw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.3.1.tgz",
+      "integrity": "sha512-mDvK3DyBZC8/8pOEdJsWtSjCmV2ZuZJJ6xfspJpsaDVywo1Vq6M55BtKThkhqED6mqbFWTN9rP9cbWG8KDBWVA==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-viewport": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-viewport": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -624,15 +686,16 @@
       }
     },
     "node_modules/@embedpdf/plugin-search": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-search/-/plugin-search-1.2.1.tgz",
-      "integrity": "sha512-sl9FBQzbOBtdmPpf6UI0bnWCTPWDkj47rTxyK07bpnGfGuFof4zhcxmMaFdyP7zqBh4Y9XqGu4A0uMTO2d/t7g==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-search/-/plugin-search-1.3.1.tgz",
+      "integrity": "sha512-SLwYPQg1NJWytq2sd4MnWFmRVGgzwbohBedB2kH0ALsvdnoRYqgjR5HqAsKgoRJO/pphQhHlk3L1gLW62r6hqQ==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-loader": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-loader": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -640,16 +703,17 @@
       }
     },
     "node_modules/@embedpdf/plugin-selection": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.2.1.tgz",
-      "integrity": "sha512-wgG1X1sl6sed3pv7WLIO74SX0x3389/ax+/OLMty/LFbDNYMRO+n8ZQss8aUM700HARIqkPJy7UoSQt91o4nwA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.3.1.tgz",
+      "integrity": "sha512-yef2XB/zR7zjyeUB3Ul0SbTcXqu5isR0GtINkFwL7bJMok6HpYNDnMXSuo55BaxI0dOCnnCSZfoRkAgosnZ1uQ==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-interaction-manager": "1.2.1",
-        "@embedpdf/plugin-viewport": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-interaction-manager": "1.3.1",
+        "@embedpdf/plugin-viewport": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -657,15 +721,16 @@
       }
     },
     "node_modules/@embedpdf/plugin-spread": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-spread/-/plugin-spread-1.2.1.tgz",
-      "integrity": "sha512-rpadnutT1wSdBQV7RQz40zYdKgCRgmJde/tamgB8oHQypcnZGQcAG6/ZfX5j12s9pG18hKwwL+KmMoBnXD9IjQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-spread/-/plugin-spread-1.3.1.tgz",
+      "integrity": "sha512-RJ/kgJsFRdtWlPMXTW1feUSb6WHIvxtNRLgqzX8dlFIoyc4oZex2Vw+URo/VZuWSe/NvCIihQ20rkNAQJMnNMQ==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-loader": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-loader": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -673,32 +738,34 @@
       }
     },
     "node_modules/@embedpdf/plugin-thumbnail": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-thumbnail/-/plugin-thumbnail-1.2.1.tgz",
-      "integrity": "sha512-TjHPkK8p3+FDMLcUdb3/4VREjm+liVooufLPVZ3FCXHbiC0PeUkqnwAxpCS2Jw1n+EtkY8pefRdRJeZhO6plOQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-thumbnail/-/plugin-thumbnail-1.3.1.tgz",
+      "integrity": "sha512-xv96ESa7JgD5z+TzcOK18/u0gq3d9v7QPv2wpr0ZhcnwLwf4sH0eUJZIsv7z7DMOpBNz7o7jJbrtxDUdCEHGhg==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-render": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-render": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"
       }
     },
     "node_modules/@embedpdf/plugin-tiling": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.2.1.tgz",
-      "integrity": "sha512-C9uOGVIsoxUw+uQMXfJFZ8ibRLQeNOnaKC2izjx967iGu0ZoecAv+mKtH/Ge0vMEKYM1109AlF5T2EGwKQW2YA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.3.1.tgz",
+      "integrity": "sha512-Q8RF80fb6y9GDAKwvgsu0BsWJlQuhNCtSKWwp3YcZJtIBFm94DVcg0zTgvDmE9/WNOmn4Z1Edt86usmYauHolw==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-render": "1.2.1",
-        "@embedpdf/plugin-scroll": "1.2.1",
-        "@embedpdf/plugin-viewport": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-render": "1.3.1",
+        "@embedpdf/plugin-scroll": "1.3.1",
+        "@embedpdf/plugin-viewport": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -706,14 +773,15 @@
       }
     },
     "node_modules/@embedpdf/plugin-viewport": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.2.1.tgz",
-      "integrity": "sha512-yvftOis7FLBjM3w2VYO5LXVKXoHkmFV/SPy7U6SbuLJTX126F4ohSij9euMHJjaqOgr5tBNvrf4xemVRglxM9w==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.3.1.tgz",
+      "integrity": "sha512-gzosrWL18ZhN175Kxocf/p7uqYBhNHvEuV1CpJQmN7ys48aew6Qq8z7MjAsCnJBANXk/8syNdo3qWwBriyjQNg==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1"
+        "@embedpdf/models": "1.3.1"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
+        "@embedpdf/core": "1.3.1",
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",
@@ -721,18 +789,31 @@
       }
     },
     "node_modules/@embedpdf/plugin-zoom": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-zoom/-/plugin-zoom-1.2.1.tgz",
-      "integrity": "sha512-hsp/nM4C8q0FM9P6FkpQLbU8IYawUgmiYgD3HXqHWBVRk30OIaXs4N0KC9vsHwn8ZAiyLl7jhlAXpgoacH5xEQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-zoom/-/plugin-zoom-1.3.1.tgz",
+      "integrity": "sha512-3GXpgv6XmZiQnjaPbsxblTqUn84ALFiyONh2gwrEU9apB6STT3TQiY0QRindwrUXdQLpCSjRSB9PpDBCtTww7w==",
+      "license": "MIT",
       "dependencies": {
-        "@embedpdf/models": "1.2.1",
+        "@embedpdf/models": "1.3.1",
         "hammerjs": "^2.0.8"
       },
       "peerDependencies": {
-        "@embedpdf/core": "1.2.1",
-        "@embedpdf/plugin-interaction-manager": "1.2.1",
-        "@embedpdf/plugin-scroll": "1.2.1",
-        "@embedpdf/plugin-viewport": "1.2.1",
+        "@embedpdf/core": "1.3.1",
+        "@embedpdf/plugin-interaction-manager": "1.3.1",
+        "@embedpdf/plugin-scroll": "1.3.1",
+        "@embedpdf/plugin-viewport": "1.3.1",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@embedpdf/utils": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@embedpdf/utils/-/utils-1.3.1.tgz",
+      "integrity": "sha512-6trYysnggwCCTB2q7cX6tkOTbZJNtt2YYZohPCmh0yaDpkfNSgwDwD0jCLtEU2UZLQoH4+2GvNo+4xe+KAGlIQ==",
+      "license": "MIT",
+      "peerDependencies": {
         "preact": "^10.26.4",
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0",

frontend/package.json

@@ -6,21 +6,24 @@
   "proxy": "http://localhost:8080",
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
-    "@embedpdf/core": "^1.2.1",
-    "@embedpdf/engines": "^1.2.1",
-    "@embedpdf/plugin-interaction-manager": "^1.2.1",
-    "@embedpdf/plugin-loader": "^1.2.1",
-    "@embedpdf/plugin-pan": "^1.2.1",
-    "@embedpdf/plugin-render": "^1.2.1",
-    "@embedpdf/plugin-rotate": "^1.2.1",
-    "@embedpdf/plugin-scroll": "^1.2.1",
-    "@embedpdf/plugin-search": "^1.2.1",
-    "@embedpdf/plugin-selection": "^1.2.1",
-    "@embedpdf/plugin-spread": "^1.2.1",
-    "@embedpdf/plugin-thumbnail": "^1.2.1",
-    "@embedpdf/plugin-tiling": "^1.2.1",
-    "@embedpdf/plugin-viewport": "^1.2.1",
-    "@embedpdf/plugin-zoom": "^1.2.1",
+    "@embedpdf/core": "^1.3.1",
+    "@embedpdf/engines": "^1.3.1",
+    "@embedpdf/plugin-annotation": "^1.3.1",
+    "@embedpdf/plugin-export": "^1.3.1",
+    "@embedpdf/plugin-history": "^1.3.1",
+    "@embedpdf/plugin-interaction-manager": "^1.3.1",
+    "@embedpdf/plugin-loader": "^1.3.1",
+    "@embedpdf/plugin-pan": "^1.3.1",
+    "@embedpdf/plugin-render": "^1.3.1",
+    "@embedpdf/plugin-rotate": "^1.3.1",
+    "@embedpdf/plugin-scroll": "^1.3.1",
+    "@embedpdf/plugin-search": "^1.3.1",
+    "@embedpdf/plugin-selection": "^1.3.1",
+    "@embedpdf/plugin-spread": "^1.3.1",
+    "@embedpdf/plugin-thumbnail": "^1.3.1",
+    "@embedpdf/plugin-tiling": "^1.3.1",
+    "@embedpdf/plugin-viewport": "^1.3.1",
+    "@embedpdf/plugin-zoom": "^1.3.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@iconify/react": "^6.0.2",

frontend/public/locales/en-GB/translation.json

@@ -1,4 +1,10 @@
 {
+  "unsavedChanges": "You have unsaved changes to your PDF. What would you like to do?",
+  "unsavedChangesTitle": "Unsaved Changes",
+  "keepWorking": "Keep Working",
+  "discardChanges": "Discard Changes",
+  "applyAndContinue": "Apply & Continue",
+  "exportAndContinue": "Export & Continue",
   "language": {
     "direction": "ltr"
   },
@@ -579,9 +585,9 @@
       "title": "API Documentation",
       "desc": "View API documentation and test endpoints"
     },
-    "fakeScan": {
+    "scannerEffect": {
       "tags": "scan,simulate,create",
-      "title": "Fake Scan",
+      "title": "Scanner Effect",
       "desc": "Create a PDF that looks like it was scanned"
     },
     "editTableOfContents": {
@@ -619,8 +625,7 @@
       "title": "Auto Split by Size/Count",
       "desc": "Automatically split PDFs by file size or page count"
     },
-    "replaceColorPdf": {
-      "tags": "color,replace,invert",
+    "replaceColor": {
       "title": "Replace & Invert Colour",
       "desc": "Replace or invert colours in PDF documents"
     },
@@ -959,7 +964,7 @@
     "header": "PDF Page Organiser",
     "submit": "Rearrange Pages",
     "mode": {
-      "_value": "Mode",
+      "_value": "Organization mode",
       "1": "Custom Page Order",
       "2": "Reverse Order",
       "3": "Duplex Sort",
@@ -972,6 +977,19 @@
       "10": "Odd-Even Merge",
       "11": "Duplicate all pages"
     },
+    "desc": {
+      "CUSTOM": "Use a custom sequence of page numbers or expressions to define a new order.",
+      "REVERSE_ORDER": "Flip the document so the last page becomes first and so on.",
+      "DUPLEX_SORT": "Interleave fronts then backs as if a duplex scanner scanned all fronts, then all backs (1, n, 2, n-1, …).",
+      "BOOKLET_SORT": "Arrange pages for booklet printing (last, first, second, second last, …).",
+      "SIDE_STITCH_BOOKLET_SORT": "Arrange pages for side‑stitch booklet printing (optimised for binding on the side).",
+      "ODD_EVEN_SPLIT": "Split the document into two outputs: all odd pages and all even pages.",
+      "ODD_EVEN_MERGE": "Merge two PDFs by alternating pages: odd from the first, even from the second.",
+      "DUPLICATE": "Duplicate each page according to the custom order count (e.g., 4 duplicates each page 4×).",
+      "REMOVE_FIRST": "Remove the first page from the document.",
+      "REMOVE_LAST": "Remove the last page from the document.",
+      "REMOVE_FIRST_AND_LAST": "Remove both the first and last pages from the document."
+    },
     "placeholder": "(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)"
   },
   "addImage": {
@@ -1596,7 +1614,13 @@
     "header": "Extract Images",
     "selectText": "Select image format to convert extracted images to",
     "allowDuplicates": "Save duplicate images",
-    "submit": "Extract"
+    "submit": "Extract",
+    "settings": {
+      "title": "Settings"
+    },
+    "error": {
+      "failed": "An error occurred while extracting images from the PDF."
+    }
   },
   "pdfToPDFA": {
     "tags": "archive,long-term,standard,conversion,storage,preservation",
@@ -1708,6 +1732,7 @@
     "add": "Add",
     "saved": "Saved Signatures",
     "save": "Save Signature",
+    "applySignatures": "Apply Signatures",
     "personalSigs": "Personal Signatures",
     "sharedSigs": "Shared Signatures",
     "noSavedSigs": "No saved signatures found",
@@ -1719,7 +1744,42 @@
     "previous": "Previous page",
     "maintainRatio": "Toggle maintain aspect ratio",
     "undo": "Undo",
-    "redo": "Redo"
+    "redo": "Redo",
+    "submit": "Sign Document",
+    "steps": {
+      "configure": "Configure Signature"
+    },
+    "type": {
+      "title": "Signature Type",
+      "draw": "Draw",
+      "canvas": "Canvas",
+      "image": "Image",
+      "text": "Text"
+    },
+    "draw": {
+      "title": "Draw your signature",
+      "clear": "Clear"
+    },
+    "image": {
+      "label": "Upload signature image",
+      "placeholder": "Select image file",
+      "hint": "Upload a PNG or JPG image of your signature"
+    },
+    "text": {
+      "name": "Signer Name",
+      "placeholder": "Enter your full name"
+    },
+    "instructions": {
+      "title": "How to add signature"
+    },
+    "activate": "Activate Signature Placement",
+    "deactivate": "Stop Placing Signatures",
+    "results": {
+      "title": "Signature Results"
+    },
+    "error": {
+      "failed": "An error occurred while signing the PDF."
+    }
   },
   "flatten": {
     "title": "Flatten",
@@ -1833,7 +1893,17 @@
     "tags": "comments,highlight,notes,markup,remove",
     "title": "Remove Annotations",
     "header": "Remove Annotations",
-    "submit": "Remove"
+    "submit": "Remove",
+    "settings": {
+      "title": "Settings"
+    },
+    "info": {
+      "title": "About Remove Annotations",
+      "description": "This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents."
+    },
+    "error": {
+      "failed": "An error occurred while removing annotations from the PDF."
+    }
   },
   "compare": {
     "tags": "differentiate,contrast,changes,analysis",
@@ -2533,25 +2603,48 @@
     },
     "selectCustomCert": "Custom Certificate File X.509 (Optional)"
   },
-  "replace-color": {
-    "title": "Advanced Colour options",
-    "header": "Replace-Invert Colour PDF",
-    "selectText": {
-      "1": "Replace or Invert colour Options",
-      "2": "Default(Default high contrast colours)",
-      "3": "Custom(Customised colours)",
-      "4": "Full-Invert(Invert all colours)",
-      "5": "High contrast colour options",
-      "6": "white text on black background",
-      "7": "Black text on white background",
-      "8": "Yellow text on black background",
-      "9": "Green text on black background",
-      "10": "Choose text Colour",
-      "11": "Choose background Colour"
+  "replaceColor": {
+    "labels": {
+      "settings": "Settings",
+      "colourOperation": "Colour operation"
     },
-    "submit": "Replace"
+    "options": {
+      "highContrast": "High contrast",
+      "invertAll": "Invert all colours",
+      "custom": "Custom"
+    },
+    "tooltip": {
+      "header": {
+        "title": "Replace & Invert Colour Settings Overview"
+      },
+      "description": {
+        "title": "Description",
+        "text": "Transform PDF colours to improve readability and accessibility. Choose from high contrast presets, invert all colours, or create custom colour schemes."
+      },
+      "highContrast": {
+        "title": "High Contrast",
+        "text": "Apply predefined high contrast colour combinations designed for better readability and accessibility compliance.",
+        "bullet1": "White text on black background - Classic dark mode",
+        "bullet2": "Black text on white background - Standard high contrast",
+        "bullet3": "Yellow text on black background - High visibility option",
+        "bullet4": "Green text on black background - Alternative high contrast"
+      },
+      "invertAll": {
+        "title": "Invert All Colours",
+        "text": "Completely invert all colours in the PDF, creating a negative-like effect. Useful for creating dark mode versions of documents or reducing eye strain in low-light conditions."
+      },
+      "custom": {
+        "title": "Custom Colours",
+        "text": "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements.",
+        "bullet1": "Text colour - Choose the colour for text elements",
+        "bullet2": "Background colour - Set the background colour for the document"
+      }
+    },
+    "error": {
+      "failed": "An error occurred while processing the colour replacement."
+    }
   },
-  "replaceColorPdf": {
+  "replaceColor": {
     "tags": "Replace Colour,Page operations,Back end,server side"
   },
   "login": {
@@ -3328,6 +3421,16 @@
       "processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
     }
   },
+  "viewer": {
+    "firstPage": "First Page",
+    "lastPage": "Last Page",
+    "previousPage": "Previous Page",
+    "nextPage": "Next Page",
+    "zoomIn": "Zoom In",
+    "zoomOut": "Zoom Out",
+    "singlePageView": "Single Page View",
+    "dualPageView": "Dual Page View"
+  },
   "common": {
     "copy": "Copy",
     "copied": "Copied!",
@@ -3384,6 +3487,18 @@
       "generateError": "We couldn't generate your API key."
     }
   },
+  "AddAttachmentsRequest": {
+    "attachments": "Select Attachments",
+    "info": "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.",
+    "selectFiles": "Select Files to Attach",
+    "placeholder": "Choose files...",
+    "addMoreFiles": "Add more files...",
+    "selectedFiles": "Selected Files",
+    "submit": "Add Attachments",
+    "results": {
+      "title": "Attachment Results"
+    }
+  },
   "termsAndConditions": "Terms & Conditions",
   "logOut": "Log out"
-}
+}

frontend/public/locales/en-US/translation.json

@@ -769,7 +769,7 @@
     "header": "PDF Page Organizer",
     "submit": "Rearrange Pages",
     "mode": {
-      "_value": "Mode",
+      "_value": "Organization mode",
       "1": "Custom Page Order",
       "2": "Reverse Order",
       "3": "Duplex Sort",
@@ -782,6 +782,19 @@
       "10": "Odd-Even Merge",
       "11": "Duplicate all pages"
     },
+    "desc": {
+      "CUSTOM": "Use a custom sequence of page numbers or expressions to define a new order.",
+      "REVERSE_ORDER": "Flip the document so the last page becomes first and so on.",
+      "DUPLEX_SORT": "Interleave fronts then backs as if a duplex scanner scanned all fronts, then all backs (1, n, 2, n-1, …).",
+      "BOOKLET_SORT": "Arrange pages for booklet printing (last, first, second, second last, …).",
+      "SIDE_STITCH_BOOKLET_SORT": "Arrange pages for side‑stitch booklet printing (optimized for binding on the side).",
+      "ODD_EVEN_SPLIT": "Split the document into two outputs: all odd pages and all even pages.",
+      "ODD_EVEN_MERGE": "Merge two PDFs by alternating pages: odd from the first, even from the second.",
+      "DUPLICATE": "Duplicate each page according to the custom order count (e.g., 4 duplicates each page 4×).",
+      "REMOVE_FIRST": "Remove the first page from the document.",
+      "REMOVE_LAST": "Remove the last page from the document.",
+      "REMOVE_FIRST_AND_LAST": "Remove both the first and last pages from the document."
+    },
     "placeholder": "(e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)"
   },
   "addImage": {
@@ -1056,7 +1069,13 @@
     "header": "Extract Images",
     "selectText": "Select image format to convert extracted images to",
     "allowDuplicates": "Save duplicate images",
-    "submit": "Extract"
+    "submit": "Extract",
+    "settings": {
+      "title": "Settings"
+    },
+    "error": {
+      "failed": "An error occurred while extracting images from the PDF."
+    }
   },
   "pdfToPDFA": {
     "tags": "archive,long-term,standard,conversion,storage,preservation",
@@ -1224,7 +1243,17 @@
     "tags": "comments,highlight,notes,markup,remove",
     "title": "Remove Annotations",
     "header": "Remove Annotations",
-    "submit": "Remove"
+    "submit": "Remove",
+    "settings": {
+      "title": "Settings"
+    },
+    "info": {
+      "title": "About Remove Annotations",
+      "description": "This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents."
+    },
+    "error": {
+      "failed": "An error occurred while removing annotations from the PDF."
+    }
   },
   "compare": {
     "tags": "differentiate,contrast,changes,analysis",
@@ -1804,10 +1833,16 @@
     }
   },
   "removeImage": {
-    "title": "Remove image",
-    "header": "Remove image",
-    "removeImage": "Remove image",
-    "submit": "Remove image"
+    "title": "Remove Images",
+    "header": "Remove Images",
+    "removeImage": "Remove Images",
+    "submit": "Remove Images",
+    "results": {
+      "title": "Remove Images Results"
+    },
+    "error": {
+      "failed": "Failed to remove images from the PDF."
+    }
   },
   "splitByChapters": {
     "title": "Split PDF by Chapters",
@@ -1852,7 +1887,7 @@
       "title": "How we use Cookies",
       "description": {
         "1": "We use cookies and other technologies to make Stirling PDF work better for you—helping us improve our tools and keep building features you'll love.",
-        "2": "If you’d rather not, clicking 'No Thanks' will only enable the essential cookies needed to keep things running smoothly."
+        "2": "If you'd rather not, clicking 'No Thanks' will only enable the essential cookies needed to keep things running smoothly."
       },
       "acceptAllBtn": "Okay",
       "acceptNecessaryBtn": "No Thanks",
@@ -1876,7 +1911,7 @@
           "1": "Strictly Necessary Cookies",
           "2": "Always Enabled"
         },
-        "description": "These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out forms—which is why they can’t be turned off."
+        "description": "These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out forms—which is why they can't be turned off."
       },
       "analytics": {
         "title": "Analytics",
@@ -2356,5 +2391,22 @@
   },
   "automate": {
     "copyToSaved": "Copy to Saved"
+  },
+  "AddAttachmentsRequest": {
+    "attachments": "Select Attachments",
+    "info": "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.",
+    "selectFiles": "Select Files to Attach",
+    "placeholder": "Choose files...",
+    "addMoreFiles": "Add more files...",
+    "selectedFiles": "Selected Files",
+    "submit": "Add Attachments",
+    "results": {
+      "title": "Attachment Results"
+    }
+  },
+  "addAttachments": {
+    "error": {
+      "failed": "An error occurred while adding attachments to the PDF."
+    }
   }
 }

frontend/scripts/generate-licenses.js

@@ -1,17 +1,15 @@
 #!/usr/bin/env node
 
-import { execSync } from 'node:child_process';
-import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'node:fs';
-import * as path from 'node:path';
-import { fileURLToPath } from 'node:url';
+const { execSync } = require('node:child_process');
+const { existsSync, mkdirSync, writeFileSync, readFileSync } = require('node:fs');
+const path = require('node:path');
 
-import { argv } from 'node:process';
+const { argv } = require('node:process');
 const inputIdx = argv.indexOf('--input');
 const INPUT_FILE = inputIdx > -1 ? argv[inputIdx + 1] : null;
 const POSTPROCESS_ONLY = !!INPUT_FILE;
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+// __dirname is available in CommonJS by default
 
 /**
  * Generate 3rd party licenses for frontend dependencies

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import { RainbowThemeProvider } from "./components/shared/RainbowThemeProvider";
 import { FileContextProvider } from "./contexts/FileContext";
 import { NavigationProvider } from "./contexts/NavigationContext";
@@ -14,6 +14,7 @@ import "./styles/cookieconsent.css";
 import "./index.css";
 import { RightRailProvider } from "./contexts/RightRailContext";
 import { ViewerProvider } from "./contexts/ViewerContext";
+import { SignatureProvider } from "./contexts/SignatureContext";
 
 // Import file ID debugging helpers (development only)
 import "./utils/fileIdSafety";
@@ -45,9 +46,11 @@ export default function App() {
                 <ToolWorkflowProvider>
                   <SidebarProvider>
                     <ViewerProvider>
+                      <SignatureProvider>
                       <RightRailProvider>
-                        <HomePage />
-                      </RightRailProvider>
+                            <HomePage />
+                          </RightRailProvider>
+                      </SignatureProvider>
                     </ViewerProvider>
                   </SidebarProvider>
                 </ToolWorkflowProvider>

frontend/src/assets/3rdPartyLicenses.json

@@ -7,6 +7,132 @@
             "moduleLicense": "Apache-2.0",
             "moduleLicenseUrl": "git+https://github.com/atlassian/pragmatic-drag-and-drop.git"
         },
+        {
+            "moduleName": "@embedpdf/core",
+            "moduleUrl": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz"
+        },
+        {
+            "moduleName": "@embedpdf/engines",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-annotation",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-export",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-history",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-interaction-manager",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-loader",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-pan",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-render",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-rotate",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-scroll",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-search",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-selection",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-spread",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-thumbnail",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-tiling",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-viewport",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
+        {
+            "moduleName": "@embedpdf/plugin-zoom",
+            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+        },
         {
             "moduleName": "@emotion/react",
             "moduleUrl": "git+https://github.com/emotion-js/emotion.git#main",
@@ -35,6 +161,13 @@
             "moduleLicense": "MIT",
             "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
         },
+        {
+            "moduleName": "@mantine/dates",
+            "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
+            "moduleVersion": "8.3.1",
+            "moduleLicense": "MIT",
+            "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
+        },
         {
             "moduleName": "@mantine/dropzone",
             "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
@@ -143,7 +276,7 @@
         {
             "moduleName": "posthog-js",
             "moduleUrl": "git+https://github.com/PostHog/posthog-js.git",
-            "moduleVersion": "1.266.0",
+            "moduleVersion": "1.268.0",
             "moduleLicense": "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE",
             "moduleLicenseUrl": "git+https://github.com/PostHog/posthog-js.git"
         },

frontend/src/components/annotation/providers/PDFAnnotationProvider.tsx

@@ -0,0 +1,91 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+
+interface PDFAnnotationContextValue {
+  // Drawing mode management
+  activateDrawMode: () => void;
+  deactivateDrawMode: () => void;
+  activateSignaturePlacementMode: () => void;
+  activateDeleteMode: () => void;
+
+  // Drawing settings
+  updateDrawSettings: (color: string, size: number) => void;
+
+  // History operations
+  undo: () => void;
+  redo: () => void;
+
+  // Image data management
+  storeImageData: (id: string, data: string) => void;
+  getImageData: (id: string) => string | undefined;
+
+  // Placement state
+  isPlacementMode: boolean;
+
+  // Signature configuration
+  signatureConfig: any | null;
+  setSignatureConfig: (config: any | null) => void;
+}
+
+const PDFAnnotationContext = createContext<PDFAnnotationContextValue | undefined>(undefined);
+
+interface PDFAnnotationProviderProps {
+  children: ReactNode;
+  // These would come from the signature context
+  activateDrawMode: () => void;
+  deactivateDrawMode: () => void;
+  activateSignaturePlacementMode: () => void;
+  activateDeleteMode: () => void;
+  updateDrawSettings: (color: string, size: number) => void;
+  undo: () => void;
+  redo: () => void;
+  storeImageData: (id: string, data: string) => void;
+  getImageData: (id: string) => string | undefined;
+  isPlacementMode: boolean;
+  signatureConfig: any | null;
+  setSignatureConfig: (config: any | null) => void;
+}
+
+export const PDFAnnotationProvider: React.FC<PDFAnnotationProviderProps> = ({
+  children,
+  activateDrawMode,
+  deactivateDrawMode,
+  activateSignaturePlacementMode,
+  activateDeleteMode,
+  updateDrawSettings,
+  undo,
+  redo,
+  storeImageData,
+  getImageData,
+  isPlacementMode,
+  signatureConfig,
+  setSignatureConfig
+}) => {
+  const contextValue: PDFAnnotationContextValue = {
+    activateDrawMode,
+    deactivateDrawMode,
+    activateSignaturePlacementMode,
+    activateDeleteMode,
+    updateDrawSettings,
+    undo,
+    redo,
+    storeImageData,
+    getImageData,
+    isPlacementMode,
+    signatureConfig,
+    setSignatureConfig
+  };
+
+  return (
+    <PDFAnnotationContext.Provider value={contextValue}>
+      {children}
+    </PDFAnnotationContext.Provider>
+  );
+};
+
+export const usePDFAnnotation = (): PDFAnnotationContextValue => {
+  const context = useContext(PDFAnnotationContext);
+  if (context === undefined) {
+    throw new Error('usePDFAnnotation must be used within a PDFAnnotationProvider');
+  }
+  return context;
+};

frontend/src/components/annotation/shared/BaseAnnotationTool.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Stack, Alert, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { DrawingControls } from './DrawingControls';
+import { ColorPicker } from './ColorPicker';
+import { usePDFAnnotation } from '../providers/PDFAnnotationProvider';
+
+export interface AnnotationToolConfig {
+  enableDrawing?: boolean;
+  enableImageUpload?: boolean;
+  enableTextInput?: boolean;
+  showPlaceButton?: boolean;
+  placeButtonText?: string;
+}
+
+interface BaseAnnotationToolProps {
+  config: AnnotationToolConfig;
+  children: React.ReactNode;
+  onSignatureDataChange?: (data: string | null) => void;
+  disabled?: boolean;
+}
+
+export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
+  config,
+  children,
+  onSignatureDataChange,
+  disabled = false
+}) => {
+  const { t } = useTranslation();
+  const {
+    activateSignaturePlacementMode,
+    undo,
+    redo
+  } = usePDFAnnotation();
+
+  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const [signatureData, setSignatureData] = useState<string | null>(null);
+
+  const handleSignatureDataChange = (data: string | null) => {
+    setSignatureData(data);
+    onSignatureDataChange?.(data);
+  };
+
+  const handlePlaceSignature = () => {
+    if (activateSignaturePlacementMode) {
+      activateSignaturePlacementMode();
+    }
+  };
+
+  return (
+    <Stack gap="md">
+      {/* Drawing Controls (Undo/Redo/Place) */}
+      <DrawingControls
+        onUndo={undo}
+        onRedo={redo}
+        onPlaceSignature={config.showPlaceButton ? handlePlaceSignature : undefined}
+        hasSignatureData={!!signatureData}
+        disabled={disabled}
+        showPlaceButton={config.showPlaceButton}
+        placeButtonText={config.placeButtonText}
+      />
+
+      {/* Tool Content */}
+      {React.cloneElement(children as React.ReactElement<any>, {
+        selectedColor,
+        signatureData,
+        onSignatureDataChange: handleSignatureDataChange,
+        onColorSwatchClick: () => setIsColorPickerOpen(true),
+        disabled
+      })}
+
+      {/* Instructions for placing signature */}
+      <Alert color="blue" title={t('sign.instructions.title', 'How to add signature')}>
+        <Text size="sm">
+          Click anywhere on the PDF to place your annotation.
+        </Text>
+      </Alert>
+
+      {/* Color Picker Modal */}
+      <ColorPicker
+        isOpen={isColorPickerOpen}
+        onClose={() => setIsColorPickerOpen(false)}
+        selectedColor={selectedColor}
+        onColorChange={setSelectedColor}
+      />
+    </Stack>
+  );
+};

frontend/src/components/annotation/shared/ColorPicker.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch } from '@mantine/core';
+
+interface ColorPickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+  title?: string;
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  isOpen,
+  onClose,
+  selectedColor,
+  onColorChange,
+  title = "Choose Color"
+}) => {
+  return (
+    <Modal
+      opened={isOpen}
+      onClose={onClose}
+      title={title}
+      size="sm"
+      centered
+    >
+      <Stack gap="md">
+        <MantineColorPicker
+          format="hex"
+          value={selectedColor}
+          onChange={onColorChange}
+          swatches={['#000000', '#0066cc', '#cc0000', '#cc6600', '#009900', '#6600cc']}
+          swatchesPerRow={6}
+          size="lg"
+          fullWidth
+        />
+        <Group justify="flex-end">
+          <Button onClick={onClose}>
+            Done
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+interface ColorSwatchButtonProps {
+  color: string;
+  onClick: () => void;
+  size?: number;
+}
+
+export const ColorSwatchButton: React.FC<ColorSwatchButtonProps> = ({
+  color,
+  onClick,
+  size = 24
+}) => {
+  return (
+    <ColorSwatch
+      color={color}
+      size={size}
+      radius={0}
+      style={{ cursor: 'pointer' }}
+      onClick={onClick}
+    />
+  );
+};

frontend/src/components/annotation/shared/DrawingCanvas.tsx

@@ -0,0 +1,437 @@
+import React, { useRef, useState, useCallback } from 'react';
+import { Paper, Group, Button, Modal, Stack, Text } from '@mantine/core';
+import { ColorSwatchButton } from './ColorPicker';
+import PenSizeSelector from '../../tools/sign/PenSizeSelector';
+
+interface DrawingCanvasProps {
+  selectedColor: string;
+  penSize: number;
+  penSizeInput: string;
+  onColorSwatchClick: () => void;
+  onPenSizeChange: (size: number) => void;
+  onPenSizeInputChange: (input: string) => void;
+  onSignatureDataChange: (data: string | null) => void;
+  disabled?: boolean;
+  width?: number;
+  height?: number;
+  modalWidth?: number;
+  modalHeight?: number;
+  additionalButtons?: React.ReactNode;
+}
+
+export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
+  selectedColor,
+  penSize,
+  penSizeInput,
+  onColorSwatchClick,
+  onPenSizeChange,
+  onPenSizeInputChange,
+  onSignatureDataChange,
+  disabled = false,
+  width = 400,
+  height = 150,
+  modalWidth = 800,
+  modalHeight = 400,
+  additionalButtons
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const modalCanvasRef = useRef<HTMLCanvasElement>(null);
+  const visibleModalCanvasRef = useRef<HTMLCanvasElement>(null);
+
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [isModalDrawing, setIsModalDrawing] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // Drawing functions for main canvas
+  const startDrawing = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!canvasRef.current || disabled) return;
+
+    setIsDrawing(true);
+    const rect = canvasRef.current.getBoundingClientRect();
+    const scaleX = canvasRef.current.width / rect.width;
+    const scaleY = canvasRef.current.height / rect.height;
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+
+    const ctx = canvasRef.current.getContext('2d');
+    if (ctx) {
+      ctx.strokeStyle = selectedColor;
+      ctx.lineWidth = penSize;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+    }
+  }, [disabled, selectedColor, penSize]);
+
+  const draw = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!isDrawing || !canvasRef.current || disabled) return;
+
+    const rect = canvasRef.current.getBoundingClientRect();
+    const scaleX = canvasRef.current.width / rect.width;
+    const scaleY = canvasRef.current.height / rect.height;
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+
+    const ctx = canvasRef.current.getContext('2d');
+    if (ctx) {
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    }
+  }, [isDrawing, disabled]);
+
+  const stopDrawing = useCallback(() => {
+    if (!isDrawing || disabled) return;
+
+    setIsDrawing(false);
+
+    // Save canvas as signature data
+    if (canvasRef.current) {
+      const dataURL = canvasRef.current.toDataURL('image/png');
+      onSignatureDataChange(dataURL);
+    }
+  }, [isDrawing, disabled, onSignatureDataChange]);
+
+  // Modal canvas drawing functions
+  const startModalDrawing = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!visibleModalCanvasRef.current || !modalCanvasRef.current) return;
+
+    setIsModalDrawing(true);
+    const rect = visibleModalCanvasRef.current.getBoundingClientRect();
+    const scaleX = visibleModalCanvasRef.current.width / rect.width;
+    const scaleY = visibleModalCanvasRef.current.height / rect.height;
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+
+    // Draw on both the visible modal canvas and hidden canvas
+    const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
+    const hiddenCtx = modalCanvasRef.current.getContext('2d');
+
+    [visibleCtx, hiddenCtx].forEach(ctx => {
+      if (ctx) {
+        ctx.strokeStyle = selectedColor;
+        ctx.lineWidth = penSize;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+      }
+    });
+  }, [selectedColor, penSize]);
+
+  const drawModal = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
+    if (!isModalDrawing || !visibleModalCanvasRef.current || !modalCanvasRef.current) return;
+
+    const rect = visibleModalCanvasRef.current.getBoundingClientRect();
+    const scaleX = visibleModalCanvasRef.current.width / rect.width;
+    const scaleY = visibleModalCanvasRef.current.height / rect.height;
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+
+    // Draw on both canvases
+    const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
+    const hiddenCtx = modalCanvasRef.current.getContext('2d');
+
+    [visibleCtx, hiddenCtx].forEach(ctx => {
+      if (ctx) {
+        ctx.lineTo(x, y);
+        ctx.stroke();
+      }
+    });
+  }, [isModalDrawing]);
+
+  const stopModalDrawing = useCallback(() => {
+    if (!isModalDrawing) return;
+    setIsModalDrawing(false);
+
+    // Sync the canvases and update signature data (only when drawing stops)
+    if (modalCanvasRef.current) {
+      const dataURL = modalCanvasRef.current.toDataURL('image/png');
+      onSignatureDataChange(dataURL);
+
+      // Also update the small canvas display
+      if (canvasRef.current) {
+        const smallCtx = canvasRef.current.getContext('2d');
+        if (smallCtx) {
+          const img = new Image();
+          img.onload = () => {
+            smallCtx.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height);
+            smallCtx.drawImage(img, 0, 0, canvasRef.current!.width, canvasRef.current!.height);
+          };
+          img.src = dataURL;
+        }
+      }
+    }
+  }, [isModalDrawing]);
+
+  // Clear canvas functions
+  const clearCanvas = useCallback(() => {
+    if (!canvasRef.current || disabled) return;
+
+    const ctx = canvasRef.current.getContext('2d');
+    if (ctx) {
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+
+      // Also clear the modal canvas if it exists
+      if (modalCanvasRef.current) {
+        const modalCtx = modalCanvasRef.current.getContext('2d');
+        if (modalCtx) {
+          modalCtx.clearRect(0, 0, modalCanvasRef.current.width, modalCanvasRef.current.height);
+        }
+      }
+
+      onSignatureDataChange(null);
+    }
+  }, [disabled]);
+
+  const clearModalCanvas = useCallback(() => {
+    // Clear both modal canvases (visible and hidden)
+    if (modalCanvasRef.current) {
+      const hiddenCtx = modalCanvasRef.current.getContext('2d');
+      if (hiddenCtx) {
+        hiddenCtx.clearRect(0, 0, modalCanvasRef.current.width, modalCanvasRef.current.height);
+      }
+    }
+
+    if (visibleModalCanvasRef.current) {
+      const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
+      if (visibleCtx) {
+        visibleCtx.clearRect(0, 0, visibleModalCanvasRef.current.width, visibleModalCanvasRef.current.height);
+      }
+    }
+
+    // Also clear the main canvas and signature data
+    if (canvasRef.current) {
+      const mainCtx = canvasRef.current.getContext('2d');
+      if (mainCtx) {
+        mainCtx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+      }
+    }
+
+    onSignatureDataChange(null);
+  }, []);
+
+  const saveModalSignature = useCallback(() => {
+    if (!modalCanvasRef.current) return;
+
+    const dataURL = modalCanvasRef.current.toDataURL('image/png');
+    onSignatureDataChange(dataURL);
+
+    // Copy to small canvas for display
+    if (canvasRef.current) {
+      const ctx = canvasRef.current.getContext('2d');
+      if (ctx) {
+        const img = new Image();
+        img.onload = () => {
+          ctx.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height);
+          ctx.drawImage(img, 0, 0, canvasRef.current!.width, canvasRef.current!.height);
+        };
+        img.src = dataURL;
+      }
+    }
+
+    setIsModalOpen(false);
+  }, []);
+
+  const openModal = useCallback(() => {
+    setIsModalOpen(true);
+    // Copy content to modal canvas after a brief delay
+    setTimeout(() => {
+      if (visibleModalCanvasRef.current && modalCanvasRef.current) {
+        const visibleCtx = visibleModalCanvasRef.current.getContext('2d');
+        if (visibleCtx) {
+          visibleCtx.strokeStyle = selectedColor;
+          visibleCtx.lineWidth = penSize;
+          visibleCtx.lineCap = 'round';
+          visibleCtx.lineJoin = 'round';
+          visibleCtx.clearRect(0, 0, visibleModalCanvasRef.current.width, visibleModalCanvasRef.current.height);
+          visibleCtx.drawImage(modalCanvasRef.current, 0, 0, visibleModalCanvasRef.current.width, visibleModalCanvasRef.current.height);
+        }
+      }
+    }, 300);
+  }, [selectedColor, penSize]);
+
+  // Initialize canvas settings whenever color or pen size changes
+  React.useEffect(() => {
+    const updateCanvas = (canvas: HTMLCanvasElement | null) => {
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.strokeStyle = selectedColor;
+        ctx.lineWidth = penSize;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+      }
+    };
+
+    updateCanvas(canvasRef.current);
+    updateCanvas(modalCanvasRef.current);
+    updateCanvas(visibleModalCanvasRef.current);
+  }, [selectedColor, penSize]);
+
+  return (
+    <>
+      <Paper withBorder p="md">
+        <Stack gap="sm">
+          <Group justify="space-between">
+            <Text fw={500}>Draw your signature</Text>
+            <Group gap="lg">
+              <div>
+                <Text size="sm" fw={500} mb="xs" ta="center">Color</Text>
+                <Group justify="center">
+                  <ColorSwatchButton
+                    color={selectedColor}
+                    onClick={onColorSwatchClick}
+                  />
+                </Group>
+              </div>
+              <div>
+                <Text size="sm" fw={500} mb="xs">Pen Size</Text>
+                <PenSizeSelector
+                  value={penSize}
+                  inputValue={penSizeInput}
+                  onValueChange={onPenSizeChange}
+                  onInputChange={onPenSizeInputChange}
+                  disabled={disabled}
+                  placeholder="Size"
+                  size="compact-sm"
+                  style={{ width: '60px' }}
+                />
+              </div>
+              <div style={{ paddingTop: '24px' }}>
+                <Button
+                  variant="light"
+                  size="compact-sm"
+                  onClick={openModal}
+                  disabled={disabled}
+                >
+                  Expand
+                </Button>
+              </div>
+            </Group>
+          </Group>
+          <canvas
+            ref={canvasRef}
+            width={width}
+            height={height}
+            style={{
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: disabled ? 'default' : 'crosshair',
+              backgroundColor: '#ffffff',
+              width: '100%',
+            }}
+            onMouseDown={startDrawing}
+            onMouseMove={draw}
+            onMouseUp={stopDrawing}
+            onMouseLeave={stopDrawing}
+          />
+          <Group justify="space-between">
+            <div>
+              {additionalButtons}
+            </div>
+            <Button
+              variant="subtle"
+              color="red"
+              size="compact-sm"
+              onClick={clearCanvas}
+              disabled={disabled}
+            >
+              Clear
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+
+      {/* Hidden canvas for modal synchronization */}
+      <canvas
+        ref={modalCanvasRef}
+        width={modalWidth}
+        height={modalHeight}
+        style={{ display: 'none' }}
+      />
+
+      {/* Modal for larger signature canvas */}
+      <Modal
+        opened={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        title="Draw Your Signature"
+        size="xl"
+        centered
+      >
+        <Stack gap="md">
+          {/* Color and Pen Size picker */}
+          <Paper withBorder p="sm">
+            <Group gap="lg" align="flex-end">
+              <div>
+                <Text size="sm" fw={500} mb="xs">Color</Text>
+                <ColorSwatchButton
+                  color={selectedColor}
+                  onClick={onColorSwatchClick}
+                />
+              </div>
+              <div>
+                <Text size="sm" fw={500} mb="xs">Pen Size</Text>
+                <PenSizeSelector
+                  value={penSize}
+                  inputValue={penSizeInput}
+                  onValueChange={onPenSizeChange}
+                  onInputChange={onPenSizeInputChange}
+                  placeholder="Size"
+                  size="compact-sm"
+                  style={{ width: '60px' }}
+                />
+              </div>
+            </Group>
+          </Paper>
+
+          <Paper withBorder p="md">
+            <canvas
+              ref={visibleModalCanvasRef}
+              width={modalWidth}
+              height={modalHeight}
+              style={{
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                cursor: 'crosshair',
+                backgroundColor: '#ffffff',
+                width: '100%',
+                maxWidth: `${modalWidth}px`,
+                height: 'auto',
+              }}
+              onMouseDown={startModalDrawing}
+              onMouseMove={drawModal}
+              onMouseUp={stopModalDrawing}
+              onMouseLeave={stopModalDrawing}
+            />
+          </Paper>
+
+          <Group justify="space-between">
+            <Button
+              variant="subtle"
+              color="red"
+              onClick={clearModalCanvas}
+            >
+              Clear Canvas
+            </Button>
+            <Group gap="sm">
+              <Button
+                variant="subtle"
+                onClick={() => setIsModalOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={saveModalSignature}
+              >
+                Save Signature
+              </Button>
+            </Group>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+};
+
+export default DrawingCanvas;

frontend/src/components/annotation/shared/DrawingControls.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Group, Button } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface DrawingControlsProps {
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onPlaceSignature?: () => void;
+  hasSignatureData?: boolean;
+  disabled?: boolean;
+  showPlaceButton?: boolean;
+  placeButtonText?: string;
+}
+
+export const DrawingControls: React.FC<DrawingControlsProps> = ({
+  onUndo,
+  onRedo,
+  onPlaceSignature,
+  hasSignatureData = false,
+  disabled = false,
+  showPlaceButton = true,
+  placeButtonText = "Update and Place"
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Group gap="sm">
+      {/* Undo/Redo Controls */}
+      <Button
+        variant="outline"
+        onClick={onUndo}
+        disabled={disabled}
+        flex={1}
+      >
+        {t('sign.undo', 'Undo')}
+      </Button>
+      <Button
+        variant="outline"
+        onClick={onRedo}
+        disabled={disabled}
+        flex={1}
+      >
+        {t('sign.redo', 'Redo')}
+      </Button>
+
+      {/* Place Signature Button */}
+      {showPlaceButton && onPlaceSignature && (
+        <Button
+          variant="filled"
+          color="blue"
+          onClick={onPlaceSignature}
+          disabled={disabled || !hasSignatureData}
+          flex={1}
+        >
+          {placeButtonText}
+        </Button>
+      )}
+    </Group>
+  );
+};

frontend/src/components/annotation/shared/ImageUploader.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { FileInput, Text, Stack } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface ImageUploaderProps {
+  onImageChange: (file: File | null) => void;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+  hint?: string;
+}
+
+export const ImageUploader: React.FC<ImageUploaderProps> = ({
+  onImageChange,
+  disabled = false,
+  label,
+  placeholder,
+  hint
+}) => {
+  const { t } = useTranslation();
+
+  const handleImageChange = async (file: File | null) => {
+    if (file && !disabled) {
+      try {
+        // Validate that it's actually an image file
+        if (!file.type.startsWith('image/')) {
+          console.error('Selected file is not an image');
+          return;
+        }
+
+        onImageChange(file);
+      } catch (error) {
+        console.error('Error processing image file:', error);
+      }
+    } else if (!file) {
+      // Clear image data when no file is selected
+      onImageChange(null);
+    }
+  };
+
+  return (
+    <Stack gap="sm">
+      <FileInput
+        label={label || t('sign.image.label', 'Upload signature image')}
+        placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
+        accept="image/*"
+        onChange={handleImageChange}
+        disabled={disabled}
+      />
+      <Text size="sm" c="dimmed">
+        {hint || t('sign.image.hint', 'Upload a PNG or JPG image of your signature')}
+      </Text>
+    </Stack>
+  );
+};

frontend/src/components/annotation/shared/TextInputWithFont.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import { Stack, TextInput, Select, Combobox, useCombobox } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+interface TextInputWithFontProps {
+  text: string;
+  onTextChange: (text: string) => void;
+  fontSize: number;
+  onFontSizeChange: (size: number) => void;
+  fontFamily: string;
+  onFontFamilyChange: (family: string) => void;
+  disabled?: boolean;
+  label?: string;
+  placeholder?: string;
+}
+
+export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
+  text,
+  onTextChange,
+  fontSize,
+  onFontSizeChange,
+  fontFamily,
+  onFontFamilyChange,
+  disabled = false,
+  label,
+  placeholder
+}) => {
+  const { t } = useTranslation();
+  const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
+  const fontSizeCombobox = useCombobox();
+
+  // Sync font size input with prop changes
+  useEffect(() => {
+    setFontSizeInput(fontSize.toString());
+  }, [fontSize]);
+
+  const fontOptions = [
+    { value: 'Helvetica', label: 'Helvetica' },
+    { value: 'Times-Roman', label: 'Times' },
+    { value: 'Courier', label: 'Courier' },
+    { value: 'Arial', label: 'Arial' },
+    { value: 'Georgia', label: 'Georgia' },
+  ];
+
+  const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48'];
+
+  return (
+    <Stack gap="sm">
+      <TextInput
+        label={label || t('sign.text.name', 'Signer Name')}
+        placeholder={placeholder || t('sign.text.placeholder', 'Enter your full name')}
+        value={text}
+        onChange={(e) => onTextChange(e.target.value)}
+        disabled={disabled}
+        required
+      />
+
+      {/* Font Selection */}
+      <Select
+        label="Font"
+        value={fontFamily}
+        onChange={(value) => onFontFamilyChange(value || 'Helvetica')}
+        data={fontOptions}
+        disabled={disabled}
+        searchable
+        allowDeselect={false}
+      />
+
+      {/* Font Size */}
+      <Combobox
+        onOptionSubmit={(optionValue) => {
+          setFontSizeInput(optionValue);
+          const size = parseInt(optionValue);
+          if (!isNaN(size)) {
+            onFontSizeChange(size);
+          }
+          fontSizeCombobox.closeDropdown();
+        }}
+        store={fontSizeCombobox}
+        withinPortal={false}
+      >
+        <Combobox.Target>
+          <TextInput
+            label="Font Size"
+            placeholder="Type or select font size (8-72)"
+            value={fontSizeInput}
+            onChange={(event) => {
+              const value = event.currentTarget.value;
+              setFontSizeInput(value);
+
+              // Parse and validate the typed value in real-time
+              const size = parseInt(value);
+              if (!isNaN(size) && size >= 8 && size <= 72) {
+                onFontSizeChange(size);
+              }
+
+              fontSizeCombobox.openDropdown();
+              fontSizeCombobox.updateSelectedOptionIndex();
+            }}
+            onClick={() => fontSizeCombobox.openDropdown()}
+            onFocus={() => fontSizeCombobox.openDropdown()}
+            onBlur={() => {
+              fontSizeCombobox.closeDropdown();
+              // Clean up invalid values on blur
+              const size = parseInt(fontSizeInput);
+              if (isNaN(size) || size < 8 || size > 72) {
+                setFontSizeInput(fontSize.toString());
+              }
+            }}
+            disabled={disabled}
+          />
+        </Combobox.Target>
+
+        <Combobox.Dropdown>
+          <Combobox.Options>
+            {fontSizeOptions.map((size) => (
+              <Combobox.Option value={size} key={size}>
+                {size}px
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        </Combobox.Dropdown>
+      </Combobox>
+    </Stack>
+  );
+};

frontend/src/components/annotation/tools/DrawingTool.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Stack } from '@mantine/core';
+import { BaseAnnotationTool } from '../shared/BaseAnnotationTool';
+import { DrawingCanvas } from '../shared/DrawingCanvas';
+
+interface DrawingToolProps {
+  onDrawingChange?: (data: string | null) => void;
+  disabled?: boolean;
+}
+
+export const DrawingTool: React.FC<DrawingToolProps> = ({
+  onDrawingChange,
+  disabled = false
+}) => {
+  const [selectedColor] = useState('#000000');
+  const [penSize, setPenSize] = useState(2);
+  const [penSizeInput, setPenSizeInput] = useState('2');
+
+  const toolConfig = {
+    enableDrawing: true,
+    showPlaceButton: true,
+    placeButtonText: "Place Drawing"
+  };
+
+  return (
+    <BaseAnnotationTool
+      config={toolConfig}
+      onSignatureDataChange={onDrawingChange}
+      disabled={disabled}
+    >
+      <Stack gap="sm">
+        <DrawingCanvas
+          selectedColor={selectedColor}
+          penSize={penSize}
+          penSizeInput={penSizeInput}
+          onColorSwatchClick={() => {}} // Color picker handled by BaseAnnotationTool
+          onPenSizeChange={setPenSize}
+          onPenSizeInputChange={setPenSizeInput}
+          onSignatureDataChange={onDrawingChange || (() => {})}
+          disabled={disabled}
+        />
+      </Stack>
+    </BaseAnnotationTool>
+  );
+};

frontend/src/components/annotation/tools/ImageTool.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Stack } from '@mantine/core';
+import { BaseAnnotationTool } from '../shared/BaseAnnotationTool';
+import { ImageUploader } from '../shared/ImageUploader';
+
+interface ImageToolProps {
+  onImageChange?: (data: string | null) => void;
+  disabled?: boolean;
+}
+
+export const ImageTool: React.FC<ImageToolProps> = ({
+  onImageChange,
+  disabled = false
+}) => {
+  const [, setImageData] = useState<string | null>(null);
+
+  const handleImageUpload = async (file: File | null) => {
+    if (file && !disabled) {
+      try {
+        const result = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            if (e.target?.result) {
+              resolve(e.target.result as string);
+            } else {
+              reject(new Error('Failed to read file'));
+            }
+          };
+          reader.onerror = () => reject(reader.error);
+          reader.readAsDataURL(file);
+        });
+
+        setImageData(result);
+        onImageChange?.(result);
+      } catch (error) {
+        console.error('Error reading file:', error);
+      }
+    } else if (!file) {
+      setImageData(null);
+      onImageChange?.(null);
+    }
+  };
+
+  const toolConfig = {
+    enableImageUpload: true,
+    showPlaceButton: true,
+    placeButtonText: "Place Image"
+  };
+
+  return (
+    <BaseAnnotationTool
+      config={toolConfig}
+      onSignatureDataChange={onImageChange}
+      disabled={disabled}
+    >
+      <Stack gap="sm">
+        <ImageUploader
+          onImageChange={handleImageUpload}
+          disabled={disabled}
+          label="Upload Image"
+          placeholder="Select image file"
+          hint="Upload a PNG, JPG, or other image file to place on the PDF"
+        />
+      </Stack>
+    </BaseAnnotationTool>
+  );
+};

frontend/src/components/annotation/tools/TextTool.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Stack } from '@mantine/core';
+import { BaseAnnotationTool } from '../shared/BaseAnnotationTool';
+import { TextInputWithFont } from '../shared/TextInputWithFont';
+
+interface TextToolProps {
+  onTextChange?: (text: string) => void;
+  disabled?: boolean;
+}
+
+export const TextTool: React.FC<TextToolProps> = ({
+  onTextChange,
+  disabled = false
+}) => {
+  const [text, setText] = useState('');
+  const [fontSize, setFontSize] = useState(16);
+  const [fontFamily, setFontFamily] = useState('Helvetica');
+
+  const handleTextChange = (newText: string) => {
+    setText(newText);
+    onTextChange?.(newText);
+  };
+
+  const handleSignatureDataChange = (data: string | null) => {
+    if (data) {
+      onTextChange?.(data);
+    }
+  };
+
+  const toolConfig = {
+    enableTextInput: true,
+    showPlaceButton: true,
+    placeButtonText: "Place Text"
+  };
+
+  return (
+    <BaseAnnotationTool
+      config={toolConfig}
+      onSignatureDataChange={handleSignatureDataChange}
+      disabled={disabled}
+    >
+      <Stack gap="sm">
+        <TextInputWithFont
+          text={text}
+          onTextChange={handleTextChange}
+          fontSize={fontSize}
+          onFontSizeChange={setFontSize}
+          fontFamily={fontFamily}
+          onFontFamilyChange={setFontFamily}
+          disabled={disabled}
+          label="Text Content"
+          placeholder="Enter text to place on the PDF"
+        />
+      </Stack>
+    </BaseAnnotationTool>
+  );
+};

frontend/src/components/layout/Workbench.tsx

@@ -149,7 +149,6 @@ export default function Workbench() {
       <TopControls
         currentView={currentView}
         setCurrentView={setCurrentView}
-        selectedToolKey={selectedToolId}
       />
 
       {/* Dismiss All Errors Button */}

frontend/src/components/pageEditor/PageEditor.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { Text, Center, Box, LoadingOverlay, Stack } from "@mantine/core";
 import { useFileState, useFileActions } from "../../contexts/FileContext";
+import { useNavigationGuard } from "../../contexts/NavigationContext";
 import { PDFDocument, PageEditorFunctions } from "../../types/pageEditor";
 import { pdfExportService } from "../../services/pdfExportService";
 import { documentManipulationService } from "../../services/documentManipulationService";
@@ -36,6 +37,9 @@ const PageEditor = ({
   const { state, selectors } = useFileState();
   const { actions } = useFileActions();
 
+  // Navigation guard for unsaved changes
+  const { setHasUnsavedChanges } = useNavigationGuard();
+
   // Prefer IDs + selectors to avoid array identity churn
   const activeFileIds = state.files.ids;
 
@@ -82,6 +86,12 @@ const PageEditor = ({
     updateUndoRedoState();
   }, [updateUndoRedoState]);
 
+  // Wrapper for executeCommand to track unsaved changes
+  const executeCommandWithTracking = useCallback((command: any) => {
+    undoManagerRef.current.executeCommand(command);
+    setHasUnsavedChanges(true);
+  }, [setHasUnsavedChanges]);
+
   // Watch for container size changes to update split line positions
   useEffect(() => {
     const container = gridContainerRef.current;
@@ -138,17 +148,16 @@ const PageEditor = ({
   // DOM-first command handlers
   const handleRotatePages = useCallback((pageIds: string[], rotation: number) => {
     const bulkRotateCommand = new BulkRotateCommand(pageIds, rotation);
-    undoManagerRef.current.executeCommand(bulkRotateCommand);
-  }, []);
+    executeCommandWithTracking(bulkRotateCommand);
+  }, [executeCommandWithTracking]);
 
   // Command factory functions for PageThumbnail
   const createRotateCommand = useCallback((pageIds: string[], rotation: number) => ({
     execute: () => {
       const bulkRotateCommand = new BulkRotateCommand(pageIds, rotation);
-
-    undoManagerRef.current.executeCommand(bulkRotateCommand);
+      executeCommandWithTracking(bulkRotateCommand);
     }
-  }), []);
+  }), [executeCommandWithTracking]);
 
   const createDeleteCommand = useCallback((pageIds: string[]) => ({
     execute: () => {
@@ -174,10 +183,10 @@ const PageEditor = ({
           () => getPageNumbersFromIds(selectedPageIds),
           closePdf
         );
-        undoManagerRef.current.executeCommand(deleteCommand);
+        executeCommandWithTracking(deleteCommand);
       }
     }
-  }), [displayDocument, splitPositions, selectedPageIds, getPageNumbersFromIds]);
+  }), [displayDocument, splitPositions, selectedPageIds, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const createSplitCommand = useCallback((position: number) => ({
     execute: () => {
@@ -186,9 +195,9 @@ const PageEditor = ({
         () => splitPositions,
         setSplitPositions
       );
-      undoManagerRef.current.executeCommand(splitCommand);
+      executeCommandWithTracking(splitCommand);
     }
-}), [splitPositions]);
+}), [splitPositions, executeCommandWithTracking]);
 
   // Command executor for PageThumbnail
   const executeCommand = useCallback((command: any) => {
@@ -232,8 +241,8 @@ const PageEditor = ({
       () => selectedPageNumbers,
       closePdf
     );
-    undoManagerRef.current.executeCommand(deleteCommand);
-  }, [selectedPageIds, displayDocument, splitPositions, getPageNumbersFromIds, getPageIdsFromNumbers]);
+    executeCommandWithTracking(deleteCommand);
+  }, [selectedPageIds, displayDocument, splitPositions, getPageNumbersFromIds, getPageIdsFromNumbers, executeCommandWithTracking]);
 
   const handleDeletePage = useCallback((pageNumber: number) => {
     if (!displayDocument) return;
@@ -251,8 +260,8 @@ const PageEditor = ({
       () => getPageNumbersFromIds(selectedPageIds),
       closePdf
     );
-    undoManagerRef.current.executeCommand(deleteCommand);
-  }, [displayDocument, splitPositions, selectedPageIds, getPageNumbersFromIds]);
+    executeCommandWithTracking(deleteCommand);
+  }, [displayDocument, splitPositions, selectedPageIds, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const handleSplit = useCallback(() => {
     if (!displayDocument || selectedPageIds.length === 0) return;
@@ -298,8 +307,8 @@ const PageEditor = ({
         : `Add ${selectedPositions.length - existingSplitsCount} split(s)`
     };
 
-    undoManagerRef.current.executeCommand(smartSplitCommand);
-  }, [selectedPageIds, displayDocument, splitPositions, setSplitPositions, getPageNumbersFromIds]);
+    executeCommandWithTracking(smartSplitCommand);
+  }, [selectedPageIds, displayDocument, splitPositions, setSplitPositions, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const handleSplitAll = useCallback(() => {
     if (!displayDocument || selectedPageIds.length === 0) return;
@@ -344,8 +353,8 @@ const PageEditor = ({
         : `Add ${selectedPositions.length - existingSplitsCount} split(s)`
     };
 
-    undoManagerRef.current.executeCommand(smartSplitCommand);
-  }, [selectedPageIds, displayDocument, splitPositions, setSplitPositions, getPageNumbersFromIds]);
+    executeCommandWithTracking(smartSplitCommand);
+  }, [selectedPageIds, displayDocument, splitPositions, setSplitPositions, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const handlePageBreak = useCallback(() => {
     if (!displayDocument || selectedPageIds.length === 0) return;
@@ -358,8 +367,8 @@ const PageEditor = ({
       () => displayDocument,
       setEditedDocument
     );
-    undoManagerRef.current.executeCommand(pageBreakCommand);
-  }, [selectedPageIds, displayDocument, getPageNumbersFromIds]);
+    executeCommandWithTracking(pageBreakCommand);
+  }, [selectedPageIds, displayDocument, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const handlePageBreakAll = useCallback(() => {
     if (!displayDocument || selectedPageIds.length === 0) return;
@@ -372,8 +381,8 @@ const PageEditor = ({
       () => displayDocument,
       setEditedDocument
     );
-    undoManagerRef.current.executeCommand(pageBreakCommand);
-  }, [selectedPageIds, displayDocument, getPageNumbersFromIds]);
+    executeCommandWithTracking(pageBreakCommand);
+  }, [selectedPageIds, displayDocument, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const handleInsertFiles = useCallback(async (files: File[], insertAfterPage: number) => {
     if (!displayDocument || files.length === 0) return;
@@ -416,8 +425,8 @@ const PageEditor = ({
       () => displayDocument,
       setEditedDocument
     );
-    undoManagerRef.current.executeCommand(reorderCommand);
-  }, [displayDocument, getPageNumbersFromIds]);
+    executeCommandWithTracking(reorderCommand);
+  }, [displayDocument, getPageNumbersFromIds, executeCommandWithTracking]);
 
   // Helper function to collect source files for multi-file export
   const getSourceFiles = useCallback((): Map<FileId, File> | null => {
@@ -499,13 +508,14 @@ const PageEditor = ({
 
       // Step 4: Download the result
       pdfExportService.downloadFile(result.blob, result.filename);
+      setHasUnsavedChanges(false); // Clear unsaved changes after successful export
 
       setExportLoading(false);
     } catch (error) {
       console.error('Export failed:', error);
       setExportLoading(false);
     }
-  }, [displayDocument, selectedPageIds, mergedPdfDocument, splitPositions, getSourceFiles, getExportFilename]);
+  }, [displayDocument, selectedPageIds, mergedPdfDocument, splitPositions, getSourceFiles, getExportFilename, setHasUnsavedChanges]);
 
   const onExportAll = useCallback(async () => {
     if (!displayDocument) return;
@@ -552,6 +562,7 @@ const PageEditor = ({
         const zipFilename = baseExportFilename.replace(/\.pdf$/i, '.zip');
 
         pdfExportService.downloadFile(zipBlob, zipFilename);
+        setHasUnsavedChanges(false); // Clear unsaved changes after successful export
       } else {
         // Single document - regular export
         const sourceFiles = getSourceFiles();
@@ -570,6 +581,7 @@ const PageEditor = ({
             );
 
         pdfExportService.downloadFile(result.blob, result.filename);
+        setHasUnsavedChanges(false); // Clear unsaved changes after successful export
       }
 
       setExportLoading(false);
@@ -577,7 +589,7 @@ const PageEditor = ({
       console.error('Export failed:', error);
       setExportLoading(false);
     }
-  }, [displayDocument, mergedPdfDocument, splitPositions, getSourceFiles, getExportFilename]);
+  }, [displayDocument, mergedPdfDocument, splitPositions, getSourceFiles, getExportFilename, setHasUnsavedChanges]);
 
   // Apply DOM changes to document state using dedicated service
   const applyChanges = useCallback(() => {
@@ -779,7 +791,14 @@ const PageEditor = ({
       )}
 
 
-      <NavigationWarningModal />
+      <NavigationWarningModal
+        onApplyAndContinue={async () => {
+          applyChanges();
+        }}
+        onExportAndContinue={async () => {
+          await onExportAll();
+        }}
+      />
     </Box>
   );
 };

frontend/src/components/shared/FilePickerModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Modal,
   Text,

frontend/src/components/shared/FileUploadButton.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { FileButton, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 

frontend/src/components/shared/Footer.tsx

@@ -1,5 +1,4 @@
 import { Flex } from '@mantine/core';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCookieConsent } from '../../hooks/useCookieConsent';
 

frontend/src/components/shared/LandingPage.css

@@ -0,0 +1,101 @@
+.landing-dropzone {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: min(92%, 32rem);
+  max-width: calc(100% - 1.5rem);
+  height: calc(100% - 1rem);
+  border-radius: 0.25rem 0.25rem 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: var(--drop-shadow-filter);
+  background-color: var(--landing-paper-bg);
+  transition: background-color 0.4s ease;
+}
+
+.landing-dropzone__sheet {
+  position: relative;
+  width: min(100%, 26rem);
+  max-width: min(100%, 26rem);
+  margin: 0 auto;
+  padding: clamp(1.5rem, 4vw, 2.25rem);
+  border-radius: 0.5rem;
+  border: 1px solid var(--landing-inner-paper-border);
+  background-color: var(--landing-inner-paper-bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(1rem, 2.5vw, 1.5rem);
+  min-height: clamp(22rem, 45vh, 30rem);
+  box-sizing: border-box;
+}
+
+.landing-dropzone__badge {
+  position: absolute;
+  top: clamp(0.75rem, 2vw, 1.25rem);
+  right: clamp(0.75rem, 2vw, 1.25rem);
+  height: clamp(2rem, 4vw, 2.5rem);
+  width: auto;
+  pointer-events: none;
+}
+
+.landing-dropzone__body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(1rem, 2.5vw, 1.5rem);
+}
+
+.landing-dropzone__brand {
+  justify-content: center;
+}
+
+.landing-dropzone__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  width: 100%;
+  max-width: min(100%, 22rem);
+  margin: clamp(0.5rem, 2vw, 0.9rem) auto;
+}
+
+.landing-dropzone__hint {
+  font-size: 0.8rem;
+  color: var(--accent-interactive);
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .landing-dropzone {
+    width: min(94%, 28rem);
+    height: calc(100% - 0.75rem);
+  }
+
+  .landing-dropzone__sheet {
+    max-width: min(100%, 24rem);
+    padding: clamp(1.35rem, 5vw, 2rem);
+    min-height: clamp(20rem, 55vh, 28rem);
+  }
+
+  .landing-dropzone__actions {
+    max-width: min(100%, 18rem);
+  }
+}
+
+@media (min-width: 1100px) {
+  .landing-dropzone {
+    width: min(92%, 34rem);
+  }
+
+  .landing-dropzone__sheet {
+    max-width: min(100%, 30rem);
+  }
+
+  .landing-dropzone__actions {
+    max-width: min(100%, 24rem);
+  }
+}

frontend/src/components/shared/LandingPage.tsx

@@ -7,6 +7,8 @@ import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import { BASE_PATH } from '../../constants/app';
 
+import './LandingPage.css';
+
 const LandingPage = () => {
   const { addFiles } = useFileHandler();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
@@ -43,17 +45,7 @@ const LandingPage = () => {
         onDrop={handleFileDrop}
         accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
         multiple={true}
-        className="w-4/5 flex items-center justify-center h-[95%]"
-        style={{
-          position: 'absolute',
-          left: '50%',
-          transform: 'translateX(-50%)',
-          bottom: 0,
-          borderRadius: '0.25rem 0.25rem 0 0',
-          filter: 'var(--drop-shadow-filter)',
-          backgroundColor: 'var(--landing-paper-bg)',
-          transition: 'background-color 0.4s ease',
-        }}
+        className="landing-dropzone"
         activateOnClick={false}
         styles={{
           root: {
@@ -63,41 +55,18 @@ const LandingPage = () => {
           },
         }}
       >
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            zIndex: 10,
-
-          }}
-        >
+        <div className="landing-dropzone__sheet dropzone-inner">
           <img
+            className="landing-dropzone__badge"
             src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg` : `${BASE_PATH}/branding/StirlingPDFLogoNoTextLight.svg`}
             alt="Stirling PDF Logo"
-            style={{
-              height: 'auto',
-              pointerEvents: 'none',
-            }}
           />
-        </div>
-        <div
-          className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
-          style={{
-            borderRadius: '0.5rem',
-            backgroundColor: 'var(--landing-inner-paper-bg)',
-            borderColor: 'var(--landing-inner-paper-border)',
-            borderWidth: '1px',
-            borderStyle: 'solid',
-          }}
-        >
-          {/* Logo positioned absolutely in top right corner */}
 
 
           {/* Centered content container */}
-          <div className="flex flex-col items-center gap-4 flex-none w-full">
+          <div className="landing-dropzone__body">
             {/* Stirling PDF Branding */}
-            <Group gap="xs" align="center">
+            <Group gap="xs" align="center" className="landing-dropzone__brand">
               <img
                 src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
                 alt="Stirling PDF"
@@ -107,15 +76,7 @@ const LandingPage = () => {
 
             {/* Add Files + Native Upload Buttons */}
             <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: '0.6rem',
-                width: '80%',
-                marginTop: '0.8rem',
-                marginBottom: '0.8rem'
-              }}
+              className="landing-dropzone__actions"
               onMouseLeave={() => setIsUploadHover(false)}
             >
               <Button
@@ -152,7 +113,7 @@ const LandingPage = () => {
                   border: '1px solid var(--landing-button-border)',
                   borderRadius: '1rem',
                   height: '38px',
-                  width: isUploadHover ? 'calc(100% - 50px)' : '58px',
+                  width: isUploadHover ? 'calc(100% - 58px - 0.6rem)' : '58px',
                   minWidth: '58px',
                   paddingLeft: isUploadHover ? '1rem' : 0,
                   paddingRight: isUploadHover ? '1rem' : 0,
@@ -187,8 +148,7 @@ const LandingPage = () => {
 
           {/* Instruction Text */}
           <span
-            className="text-[var(--accent-interactive)]"
-            style={{ fontSize: '.8rem' }}
+            className="landing-dropzone__hint"
           >
             {t('fileUpload.dropFilesHere', 'Drop files here or click the upload button')}
           </span>

frontend/src/components/shared/MultiSelectControls.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Box, Group, Text, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
@@ -37,7 +36,7 @@ const MultiSelectControls = ({
           >
             {t("fileManager.clearSelection", "Clear Selection")}
           </Button>
-          
+
           {onAddToUpload && (
             <Button
               size="xs"
@@ -47,7 +46,7 @@ const MultiSelectControls = ({
               {t("fileManager.addToUpload", "Add to Upload")}
             </Button>
           )}
-          
+
           {onOpenInFileEditor && (
             <Button
               size="xs"
@@ -58,7 +57,7 @@ const MultiSelectControls = ({
               {t("fileManager.openInFileEditor", "Open in File Editor")}
             </Button>
           )}
-          
+
           {onOpenInPageEditor && (
             <Button
               size="xs"
@@ -69,7 +68,7 @@ const MultiSelectControls = ({
               {t("fileManager.openInPageEditor", "Open in Page Editor")}
             </Button>
           )}
-          
+
           {onDeleteAll && (
             <Button
               size="xs"
@@ -85,4 +84,4 @@ const MultiSelectControls = ({
   );
 };
 
-export default MultiSelectControls;
+export default MultiSelectControls;

frontend/src/components/shared/NavigationWarningModal.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Modal, Text, Button, Group, Stack } from '@mantine/core';
 import { useNavigationGuard } from '../../contexts/NavigationContext';
+import { useTranslation } from 'react-i18next';
 
 interface NavigationWarningModalProps {
   onApplyAndContinue?: () => Promise<void>;
@@ -11,6 +11,8 @@ const NavigationWarningModal = ({
   onApplyAndContinue,
   onExportAndContinue
 }: NavigationWarningModalProps) => {
+
+  const { t } = useTranslation();
   const {
     showNavigationWarning,
     hasUnsavedChanges,
@@ -28,7 +30,7 @@ const NavigationWarningModal = ({
     confirmNavigation();
   };
 
-  const handleApplyAndContinue = async () => {
+  const _handleApplyAndContinue = async () => {
     if (onApplyAndContinue) {
       await onApplyAndContinue();
     }
@@ -52,55 +54,59 @@ const NavigationWarningModal = ({
     <Modal
       opened={showNavigationWarning}
       onClose={handleKeepWorking}
-      title="Unsaved Changes"
+      title={t("unsavedChangesTitle", "Unsaved Changes")}
       centered
+      size="lg"
       closeOnClickOutside={false}
       closeOnEscape={false}
     >
       <Stack gap="md">
         <Text>
-          You have unsaved changes to your PDF. What would you like to do?
+          {t("unsavedChanges", "You have unsaved changes to your PDF. What would you like to do?")}
         </Text>
-        
-        <Group justify="flex-end" gap="sm">
-          <Button
-            variant="light"
-            color="gray"
-            onClick={handleKeepWorking}
-          >
-            Keep Working
-          </Button>
-          
+
+
+        <Group justify="space-between" gap="sm">
           <Button
             variant="light"
             color="red"
             onClick={handleDiscardChanges}
           >
-            Discard Changes
+            {t("discardChanges", "Discard Changes")}
           </Button>
-          
-          {onApplyAndContinue && (
+
+          <Group gap="sm">
             <Button
               variant="light"
-              color="blue"
-              onClick={handleApplyAndContinue}
+              color="var(--mantine-color-gray-8)"
+              onClick={handleKeepWorking}
             >
-              Apply & Continue
+              {t("keepWorking", "Keep Working")}
             </Button>
-          )}
-          
-          {onExportAndContinue && (
-            <Button
-              color="green"
-              onClick={handleExportAndContinue}
-            >
-              Export & Continue
-            </Button>
-          )}
+
+            {/* TODO:: Add this back in when it works */}
+            {/* {onApplyAndContinue  && (
+              <Button
+                variant="light"
+                color="blue"
+                onClick={handleApplyAndContinue}
+              >
+                {t("applyAndContinue", "Apply & Continue")}
+              </Button>
+            )} */}
+
+            {onExportAndContinue && (
+              <Button
+                onClick={handleExportAndContinue}
+              >
+                {t("exportAndContinue", "Export & Continue")}
+              </Button>
+            )}
+          </Group>
         </Group>
       </Stack>
     </Modal>
   );
 };
 
-export default NavigationWarningModal;
+export default NavigationWarningModal;

frontend/src/components/shared/QuickAccessBar.tsx

@@ -41,10 +41,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   // Helper function to render navigation buttons with URL support
   const renderNavButton = (config: ButtonConfig, index: number) => {
     const isActive = isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
-    
+
     // Check if this button has URL navigation support
-    const navProps = config.type === 'navigation' && (config.id === 'read' || config.id === 'automate') 
-      ? getToolNavigation(config.id) 
+    const navProps = config.type === 'navigation' && (config.id === 'read' || config.id === 'automate')
+      ? getToolNavigation(config.id)
       : null;
 
     const handleClick = (e?: React.MouseEvent) => {
@@ -59,7 +59,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     return (
       <div key={config.id} className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
         <ActionIcon
-          {...(navProps ? { 
+          {...(navProps ? {
             component: "a" as const,
             href: navProps.href,
             onClick: (e: React.MouseEvent) => handleClick(e),
@@ -249,4 +249,6 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   );
 });
 
+QuickAccessBar.displayName = 'QuickAccessBar';
+
 export default QuickAccessBar;

frontend/src/components/shared/RainbowThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, ReactNode } from 'react';
+import { createContext, useContext, ReactNode } from 'react';
 import { MantineProvider } from '@mantine/core';
 import { useRainbowTheme } from '../../hooks/useRainbowTheme';
 import { mantineTheme } from '../../theme/mantineTheme';

frontend/src/components/shared/RightRail.tsx

@@ -14,6 +14,7 @@ import { Tooltip } from '../shared/Tooltip';
 import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel';
 import { SearchInterface } from '../viewer/SearchInterface';
 import { ViewerContext } from '../../contexts/ViewerContext';
+import { useSignature } from '../../contexts/SignatureContext';
 
 import { parseSelection } from '../../utils/bulkselection/parseSelection';
 
@@ -43,6 +44,9 @@ export default function RightRail() {
   const { selectedFiles, selectedFileIds, setSelectedFiles } = useFileSelection();
   const { removeFiles } = useFileManagement();
 
+  // Signature context for checking if signatures have been applied
+  const { signaturesApplied } = useSignature();
+
   const activeFiles = selectors.getFiles();
   const filesSignature = selectors.getFilesSignature();
 
@@ -66,6 +70,9 @@ export default function RightRail() {
 
   const { totalItems, selectedCount } = getSelectionState();
 
+  // Get export state for viewer mode
+  const exportState = viewerContext?.getExportState?.();
+
   const handleSelectAll = useCallback(() => {
     if (currentView === 'fileEditor' || currentView === 'viewer') {
       // Select all file IDs
@@ -95,8 +102,17 @@ export default function RightRail() {
     }
   }, [currentView, setSelectedFiles, pageEditorFunctions]);
 
-  const handleExportAll = useCallback(() => {
-    if (currentView === 'fileEditor' || currentView === 'viewer') {
+  const handleExportAll = useCallback(async () => {
+    if (currentView === 'viewer') {
+      // Check if signatures have been applied
+      if (!signaturesApplied) {
+        alert('You have unapplied signatures. Please use "Apply Signatures" first before exporting.');
+        return;
+      }
+
+      // Use EmbedPDF export functionality for viewer mode
+      viewerContext?.exportActions?.download();
+    } else if (currentView === 'fileEditor') {
       // Download selected files (or all if none selected)
       const filesToDownload = selectedFiles.length > 0 ? selectedFiles : activeFiles;
 
@@ -113,7 +129,7 @@ export default function RightRail() {
       // Export all pages (not just selected)
       pageEditorFunctions?.onExportAll?.();
     }
-  }, [currentView, activeFiles, selectedFiles, pageEditorFunctions]);
+  }, [currentView, activeFiles, selectedFiles, pageEditorFunctions, viewerContext, signaturesApplied, selectors, fileActions]);
 
   const handleCloseSelected = useCallback(() => {
     if (currentView !== 'fileEditor') return;
@@ -445,7 +461,9 @@ export default function RightRail() {
                 radius="md"
                 className="right-rail-icon"
                 onClick={handleExportAll}
-                disabled={currentView === 'viewer' || totalItems === 0}
+                disabled={
+                  currentView === 'viewer' ? !exportState?.canExport : totalItems === 0
+                }
               >
                 <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
               </ActionIcon>

frontend/src/components/shared/TextInput.tsx

@@ -107,3 +107,5 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
     </div>
   );
 });
+
+TextInput.displayName = 'TextInput';

frontend/src/components/shared/ToolChain.tsx

@@ -32,7 +32,7 @@ const ToolChain: React.FC<ToolChainProps> = ({
 
   const getToolName = (toolId: ToolId) => {
     return t(`home.${toolId}.title`, toolId);
-  }
+  };
 
   // Create full tool chain for tooltip
   const fullChainDisplay = displayStyle === 'badges' ? (

frontend/src/components/shared/TopControls.tsx

@@ -15,11 +15,11 @@ const viewOptionStyle = {
   gap: 6,
   whiteSpace: 'nowrap',
   paddingTop: '0.3rem',
-}
+};
 
 
 // Build view options showing text always
-const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null, isToolSelected: boolean) => {
+const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null) => {
   const viewerOption = {
     label: (
       <div style={viewOptionStyle as React.CSSProperties}>
@@ -75,7 +75,7 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp
   // Build options array conditionally
   return [
     viewerOption,
-    ...(isToolSelected ? [] : [pageEditorOption]),
+    pageEditorOption,
     fileEditorOption,
   ];
 };
@@ -83,19 +83,15 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp
 interface TopControlsProps {
   currentView: WorkbenchType;
   setCurrentView: (view: WorkbenchType) => void;
-  selectedToolKey?: string | null;
 }
 
 const TopControls = ({
   currentView,
   setCurrentView,
-  selectedToolKey,
-}: TopControlsProps) => {
+  }: TopControlsProps) => {
   const { isRainbowMode } = useRainbowThemeContext();
   const [switchingTo, setSwitchingTo] = useState<WorkbenchType | null>(null);
 
-  const isToolSelected = selectedToolKey !== null;
-
   const handleViewChange = useCallback((view: string) => {
     if (!isValidWorkbench(view)) {
       return;
@@ -122,7 +118,7 @@ const TopControls = ({
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
       <div className="flex justify-center mt-[0.5rem]">
         <SegmentedControl
-          data={createViewOptions(currentView, switchingTo, isToolSelected)}
+          data={createViewOptions(currentView, switchingTo)}
           value={currentView}
           onChange={handleViewChange}
           color="blue"

frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -33,8 +33,11 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
   const { getHomeNavigation } = useSidebarNavigation();
 
   // Determine if the indicator should be visible (do not require selectedTool to be resolved yet)
+  // Special case: multiTool should always show even when sidebars are hidden
   const indicatorShouldShow = Boolean(
-    selectedToolKey && leftPanelView === 'toolContent' && !NAV_IDS.includes(selectedToolKey)
+    selectedToolKey &&
+    ((leftPanelView === 'toolContent' && !NAV_IDS.includes(selectedToolKey)) ||
+     selectedToolKey === 'multiTool')
   );
 
   // Local animation and hover state
@@ -47,7 +50,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
   const animTimeoutRef = useRef<number | null>(null);
   const replayRafRef = useRef<number | null>(null);
 
-  const isSwitchingToNewTool = () => { return prevKeyRef.current && prevKeyRef.current !== selectedToolKey };
+  const isSwitchingToNewTool = () => { return prevKeyRef.current && prevKeyRef.current !== selectedToolKey; };
 
   const clearTimers = () => {
     if (collapseTimeoutRef.current) {
@@ -78,7 +81,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
       setReplayAnim(false);
       animTimeoutRef.current = null;
     }, 500);
-  }
+  };
 
   const firstShow = () => {
     clearTimers();
@@ -88,7 +91,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
     animTimeoutRef.current = window.setTimeout(() => {
       animTimeoutRef.current = null;
     }, 500);
-  }
+  };
 
   const triggerCollapse = () => {
     clearTimers();
@@ -98,7 +101,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
       prevKeyRef.current = null;
       collapseTimeoutRef.current = null;
     }, 500); // match CSS transition duration
-  }
+  };
 
   useEffect(() => {
     if (indicatorShouldShow) {

frontend/src/components/shared/quickAccessBar/QuickAccessBar.ts

@@ -12,7 +12,7 @@ export const isNavButtonActive = (
   isFilesModalOpen: boolean,
   configModalOpen: boolean,
   selectedToolKey?: string | null,
-  leftPanelView?: 'toolPicker' | 'toolContent'
+  leftPanelView?: 'toolPicker' | 'toolContent' | 'hidden'
 ): boolean => {
   const isActiveByLocalState = config.type === 'navigation' && activeButton === config.id;
   const isActiveByContext =
@@ -35,7 +35,7 @@ export const getNavButtonStyle = (
   isFilesModalOpen: boolean,
   configModalOpen: boolean,
   selectedToolKey?: string | null,
-  leftPanelView?: 'toolPicker' | 'toolContent'
+  leftPanelView?: 'toolPicker' | 'toolContent' | 'hidden'
 ) => {
   const isActive = isNavButtonActive(
     config,

frontend/src/components/toast/ToastRenderer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useToast } from './ToastContext';
 import { ToastInstance, ToastLocation } from './types';
 import { LocalIcon } from '../shared/LocalIcon';
@@ -66,7 +65,7 @@ export default function ToastRenderer() {
                       <LocalIcon icon={`material-symbols:${getDefaultIconName(t)}`} width={20} height={20} />
                     )}
                   </div>
-                  
+
                   {/* Title + count badge */}
                   <div className="toast-title-container">
                     <span>{t.title}</span>
@@ -74,7 +73,7 @@ export default function ToastRenderer() {
                       <span className="toast-count-badge">{t.count}</span>
                     )}
                   </div>
-                  
+
                   {/* Controls */}
                   <div className="toast-controls">
                     {t.expandable && (
@@ -101,20 +100,20 @@ export default function ToastRenderer() {
                 {/* Progress bar - always show when present */}
                 {typeof t.progress === 'number' && (
                   <div className="toast-progress-container">
-                    <div 
+                    <div
                       className={getProgressBarClass(t)}
                       style={{ width: `${t.progress}%` }}
                     />
                   </div>
                 )}
-                
+
                 {/* Body content - only show when expanded */}
                 {(t.isExpanded || !t.expandable) && (
                   <div className="toast-body">
                     {t.body}
                   </div>
                 )}
-                
+
                 {/* Button - always show when present, positioned below body */}
                 {t.buttonText && t.buttonCallback && (
                   <div className="toast-action-container">

frontend/src/components/tools/ToolLoadingFallback.tsx

@@ -10,5 +10,5 @@ export default function ToolLoadingFallback({ toolName }: { toolName?: string })
         </Text>
       </Stack>
     </Center>
-  )
+  );
 }

frontend/src/components/tools/ToolPanel.tsx

@@ -7,6 +7,8 @@ import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
 import { ScrollArea } from '@mantine/core';
+import { ToolId } from '../../types/toolId';
+import { useMediaQuery } from '@mantine/hooks';
 
 // No props needed - component uses context
 
@@ -14,6 +16,7 @@ export default function ToolPanel() {
   const { isRainbowMode } = useRainbowThemeContext();
   const { sidebarRefs } = useSidebarContext();
   const { toolPanelRef } = sidebarRefs;
+  const isMobile = useMediaQuery('(max-width: 1024px)');
 
 
   // Use context-based hooks to eliminate prop drilling
@@ -33,17 +36,17 @@ export default function ToolPanel() {
     <div
       ref={toolPanelRef}
       data-sidebar="tool-panel"
-      className={`h-screen flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
+      className={`flex flex-col overflow-hidden bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
         isRainbowMode ? rainbowStyles.rainbowPaper : ''
-      }`}
+      } ${isMobile ? 'h-full border-r-0' : 'h-screen'}`}
       style={{
-        width: isPanelVisible ? '18.5rem' : '0',
+        width: isMobile ? '100%' : isPanelVisible ? '18.5rem' : '0',
         padding: '0'
       }}
     >
       <div
         style={{
-          opacity: isPanelVisible ? 1 : 0,
+          opacity: isMobile || isPanelVisible ? 1 : 0,
           transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
           height: '100%',
           display: 'flex',
@@ -71,7 +74,7 @@ export default function ToolPanel() {
           <div className="flex-1 flex flex-col overflow-y-auto">
               <SearchResults
                 filteredTools={filteredTools}
-                onSelect={handleToolSelect}
+                onSelect={(id) => handleToolSelect(id as ToolId)}
                 searchQuery={searchQuery}
               />
           </div>
@@ -80,7 +83,7 @@ export default function ToolPanel() {
           <div className="flex-1 flex flex-col overflow-auto">
             <ToolPicker
               selectedToolKey={selectedToolKey}
-              onSelect={handleToolSelect}
+              onSelect={(id) => handleToolSelect(id as ToolId)}
               filteredTools={filteredTools}
               isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
             />

frontend/src/components/tools/ToolRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
 import { BaseToolProps } from "../../types/tool";
 import ToolLoadingFallback from "./ToolLoadingFallback";
@@ -26,7 +26,7 @@ const ToolRenderer = ({
 
   // Wrap lazy-loaded component with Suspense
   return (
-    <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}> 
+    <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}>
       <ToolComponent
         onPreviewFile={onPreviewFile}
         onComplete={onComplete}

frontend/src/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx

@@ -1,12 +1,11 @@
 /**
  * AddWatermarkSingleStepSettings - Used for automation only
- * 
+ *
  * This component combines all watermark settings into a single step interface
  * for use in the automation system. It includes type selection and all relevant
  * settings in one unified component.
  */
 
-import React from "react";
 import { Stack } from "@mantine/core";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
 import WatermarkTypeSettings from "./WatermarkTypeSettings";
@@ -67,4 +66,4 @@ const AddWatermarkSingleStepSettings = ({ parameters, onParameterChange, disable
   );
 };
 
-export default AddWatermarkSingleStepSettings;
+export default AddWatermarkSingleStepSettings;

frontend/src/components/tools/addWatermark/WatermarkFormatting.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Checkbox, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
@@ -80,4 +79,4 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
   );
 };
 
-export default WatermarkFormatting;
+export default WatermarkFormatting;

frontend/src/components/tools/addWatermark/WatermarkImageFile.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";

frontend/src/components/tools/addWatermark/WatermarkStyleSettings.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
@@ -60,4 +59,4 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
   );
 };
 
-export default WatermarkStyleSettings;
+export default WatermarkStyleSettings;

frontend/src/components/tools/addWatermark/WatermarkTextStyle.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, ColorInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { AddWatermarkParameters } from "../../../hooks/tools/addWatermark/useAddWatermarkParameters";
@@ -27,7 +26,7 @@ const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }:
           format="hex"
         />
       </Stack>
-      
+
       <Stack gap="xs">
         <Text size="xs" fw={500}>
           {t("watermark.settings.alphabet", "Alphabet")}

frontend/src/components/tools/automate/AutomationSelection.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Title, Stack, Divider } from "@mantine/core";
 import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
@@ -19,11 +18,11 @@ interface AutomationSelectionProps {
   toolRegistry: Record<string, ToolRegistryEntry>;
 }
 
-export default function AutomationSelection({ 
+export default function AutomationSelection({
   savedAutomations,
-  onCreateNew, 
-  onRun, 
-  onEdit, 
+  onCreateNew,
+  onRun,
+  onEdit,
   onDelete,
   onCopyFromSuggested,
   toolRegistry

frontend/src/components/tools/bookletImposition/BookletImpositionSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Stack, Text, Divider, Collapse, Button, NumberInput } from "@mantine/core";
 import { BookletImpositionParameters } from "../../../hooks/tools/bookletImposition/useBookletImpositionParameters";
@@ -176,4 +176,4 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
   );
 };
 
-export default BookletImpositionSettings;
+export default BookletImpositionSettings;

frontend/src/components/tools/compress/CompressSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "../../../hooks/tools/compress/useCompressParameters";

frontend/src/components/tools/convert/ConvertFromEmailSettings.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text, NumberInput, Checkbox } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '../../../hooks/tools/convert/useConvertParameters';

frontend/src/components/tools/convert/ConvertFromImageSettings.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, Switch } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { COLOR_TYPES, FIT_OPTIONS } from "../../../constants/convertConstants";

frontend/src/components/tools/convert/ConvertFromWebSettings.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text, NumberInput, Slider } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '../../../hooks/tools/convert/useConvertParameters';

frontend/src/components/tools/convert/ConvertSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { Stack, Text, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useTranslation } from "react-i18next";

frontend/src/components/tools/convert/ConvertToImageSettings.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Stack, Text, Select, NumberInput, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { COLOR_TYPES, OUTPUT_OPTIONS } from "../../../constants/convertConstants";

frontend/src/components/tools/convert/ConvertToPdfaSettings.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text, Select, Alert } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters } from '../../../hooks/tools/convert/useConvertParameters';

frontend/src/components/tools/convert/GroupedFormatDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
@@ -34,14 +34,14 @@ const GroupedFormatDropdown = ({
 
   const groupedOptions = useMemo(() => {
     const groups: Record<string, FormatOption[]> = {};
-    
+
     options.forEach(option => {
       if (!groups[option.group]) {
         groups[option.group] = [];
       }
       groups[option.group].push(option);
     });
-    
+
     return groups;
   }, [options]);
 
@@ -77,14 +77,14 @@ const GroupedFormatDropdown = ({
             padding: '0.5rem 0.75rem',
             border: `0.0625rem solid ${theme.colors.gray[4]}`,
             borderRadius: theme.radius.sm,
-            backgroundColor: disabled 
-              ? theme.colors.gray[1] 
-              : colorScheme === 'dark' 
-                ? theme.colors.dark[6] 
+            backgroundColor: disabled
+              ? theme.colors.gray[1]
+              : colorScheme === 'dark'
+                ? theme.colors.dark[6]
                 : theme.white,
             cursor: disabled ? 'not-allowed' : 'pointer',
             width: '100%',
-            color: disabled 
+            color: disabled
               ? colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.dark[7]
               : colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[9]
           }}
@@ -93,19 +93,19 @@ const GroupedFormatDropdown = ({
             <Text size="sm" c={value ? undefined : 'dimmed'}>
               {selectedLabel}
             </Text>
-            <KeyboardArrowDownIcon 
-              style={{ 
+            <KeyboardArrowDownIcon
+              style={{
                 fontSize: '1rem',
                 transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
                 transition: 'transform 0.2s ease',
                 color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
-              }} 
+              }}
             />
           </Group>
         </UnstyledButton>
       </Popover.Target>
-      <Popover.Dropdown 
-        style={{ 
+      <Popover.Dropdown
+        style={{
           minWidth: Math.min(350, parseInt(minWidth.replace('rem', '')) * 16),
           maxWidth: '90vw',
           maxHeight: '40vh',
@@ -117,10 +117,10 @@ const GroupedFormatDropdown = ({
         <Stack gap="md">
           {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
             <Box key={groupName}>
-              <Text 
-                size="sm" 
-                fw={600} 
-                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'} 
+              <Text
+                size="sm"
+                fw={600}
+                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'}
                 mb="xs"
               >
                 {groupName}
@@ -153,4 +153,4 @@ const GroupedFormatDropdown = ({
   );
 };
 
-export default GroupedFormatDropdown;
+export default GroupedFormatDropdown;

frontend/src/components/tools/extractImages/ExtractImagesSettings.tsx

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next';
+import { Stack, Select, Checkbox } from '@mantine/core';
+import { ExtractImagesParameters } from '../../../hooks/tools/extractImages/useExtractImagesParameters';
+
+interface ExtractImagesSettingsProps {
+  parameters: ExtractImagesParameters;
+  onParameterChange: <K extends keyof ExtractImagesParameters>(key: K, value: ExtractImagesParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ExtractImagesSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false
+}: ExtractImagesSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Select
+        label={t('extractImages.selectText', 'Output Format')}
+        value={parameters.format}
+        onChange={(value) => {
+          const allowedFormats = ['png', 'jpg', 'gif'] as const;
+          const format = allowedFormats.includes(value as any) ? (value as typeof allowedFormats[number]) : 'png';
+          onParameterChange('format', format);
+        }}
+        data={[
+          { value: 'png', label: 'PNG' },
+          { value: 'jpg', label: 'JPG' },
+          { value: 'gif', label: 'GIF' },
+        ]}
+        disabled={disabled}
+      />
+
+      <Checkbox
+        label={t('extractImages.allowDuplicates', 'Allow Duplicate Images')}
+        checked={parameters.allowDuplicates}
+        onChange={(event) => onParameterChange('allowDuplicates', event.currentTarget.checked)}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+};
+
+export default ExtractImagesSettings;

frontend/src/components/tools/pageLayout/PageLayoutSettings.tsx

@@ -0,0 +1,61 @@
+import { Divider, Select, Stack, Switch } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { PageLayoutParameters } from '../../../hooks/tools/pageLayout/usePageLayoutParameters';
+import { getPagesPerSheetOptions } from './constants';
+
+export default function PageLayoutSettings({
+  parameters,
+  onParameterChange,
+  disabled,
+}: {
+  parameters: PageLayoutParameters;
+  onParameterChange: <K extends keyof PageLayoutParameters>(
+    key: K,
+    value: PageLayoutParameters[K]
+  ) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+
+  const options = getPagesPerSheetOptions(t);
+  const selected = options.find((o) => o.value === parameters.pagesPerSheet) || options[0];
+
+  return (
+    <Stack gap="sm">
+      <Select
+        label={t('pageLayout.pagesPerSheet', 'Pages per sheet:')}
+        data={options.map(o => ({ value: String(o.value), label: o.label }))}
+        value={String(parameters.pagesPerSheet)}
+        onChange={(v) => onParameterChange('pagesPerSheet', Number(v))}
+        disabled={disabled}
+      />
+
+      {selected && (
+        <div
+          style={{
+            backgroundColor: 'var(--information-text-bg)',
+            color: 'var(--information-text-color)',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            marginTop: '4px',
+            fontSize: '0.75rem',
+            textAlign: 'center',
+          }}
+        >
+          {selected.description}
+        </div>
+      )}
+
+      <Divider />
+
+      <Switch
+        checked={parameters.addBorder}
+        onChange={(e) => onParameterChange('addBorder', e.currentTarget.checked)}
+        label={t('pageLayout.addBorder', 'Add Borders')}
+        disabled={disabled}
+      />
+    </Stack>
+  );
+}
+
+

frontend/src/components/tools/pageLayout/constants.ts

@@ -0,0 +1,37 @@
+import { TFunction } from 'i18next';
+
+export type PagesPerSheetOption = {
+  value: number;
+  label: string;
+  description: string;
+};
+
+export const getPagesPerSheetOptions = (t: TFunction): PagesPerSheetOption[] => [
+  {
+    value: 2,
+    label: '2',
+    description: t('pageLayout.desc.2', 'Place 2 pages side-by-side on a single sheet.')
+  },
+  {
+    value: 3,
+    label: '3',
+    description: t('pageLayout.desc.3', 'Place 3 pages on a single sheet in a single row.')
+  },
+  {
+    value: 4,
+    label: '4',
+    description: t('pageLayout.desc.4', 'Place 4 pages on a single sheet (2 × 2 grid).')
+  },
+  {
+    value: 9,
+    label: '9',
+    description: t('pageLayout.desc.9', 'Place 9 pages on a single sheet (3 × 3 grid).')
+  },
+  {
+    value: 16,
+    label: '16',
+    description: t('pageLayout.desc.16', 'Place 16 pages on a single sheet (4 × 4 grid).')
+  },
+];
+
+

frontend/src/components/tools/removeAnnotations/RemoveAnnotationsSettings.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+import { Stack, Text, Alert } from '@mantine/core';
+import LocalIcon from '../../shared/LocalIcon';
+
+const RemoveAnnotationsSettings = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      <Alert
+        icon={<LocalIcon icon="info-rounded" width="1.2rem" height="1.2rem" />}
+        title={t('removeAnnotations.info.title', 'About Remove Annotations')}
+        color="blue"
+        variant="light"
+      >
+        <Text size="sm">
+          {t('removeAnnotations.info.description',
+            'This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents.'
+          )}
+        </Text>
+      </Alert>
+    </Stack>
+  );
+};
+
+export default RemoveAnnotationsSettings;

frontend/src/components/tools/reorganizePages/ReorganizePagesSettings.tsx

@@ -0,0 +1,64 @@
+import { Divider, Select, Stack, TextInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ReorganizePagesParameters } from '../../../hooks/tools/reorganizePages/useReorganizePagesParameters';
+import { getReorganizePagesModeData } from './constants';
+
+export default function ReorganizePagesSettings({
+  parameters,
+  onParameterChange,
+  disabled,
+}: {
+  parameters: ReorganizePagesParameters;
+  onParameterChange: <K extends keyof ReorganizePagesParameters>(
+    key: K,
+    value: ReorganizePagesParameters[K]
+  ) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation();
+  const modeData = getReorganizePagesModeData(t);
+
+  const requiresOrder = parameters.customMode === '' || parameters.customMode === 'DUPLICATE';
+  const selectedMode = modeData.find(mode => mode.value === parameters.customMode) || modeData[0];
+  return (
+    <Stack gap="sm">
+      <Select
+        label={t('pdfOrganiser.mode._value', 'Organization mode')}
+        data={modeData}
+        value={parameters.customMode}
+        onChange={(v) => onParameterChange('customMode', v ?? '')}
+        disabled={disabled}
+      />
+      {selectedMode && (
+        <div
+          style={{
+            backgroundColor: 'var(--information-text-bg)',
+            color: 'var(--information-text-color)',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            marginTop: '4px',
+            fontSize: '0.75rem',
+            textAlign: 'center'
+          }}
+        >
+          {selectedMode.description}
+        </div>
+      )}
+
+      {requiresOrder && (
+        <>
+        <Divider/>
+        <TextInput
+          label={t('pageOrderPrompt', 'Page order / ranges')}
+          placeholder={t('pdfOrganiser.placeholder', 'e.g. 1,3,2,4-6')}
+          value={parameters.pageNumbers}
+          onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
+          disabled={disabled}
+        />
+        </>
+      )}
+    </Stack>
+  );
+}
+
+

frontend/src/components/tools/reorganizePages/constants.ts

@@ -0,0 +1,59 @@
+import { TFunction } from 'i18next';
+
+export const getReorganizePagesModeData = (t: TFunction) => [
+  { 
+    value: '', 
+    label: t('pdfOrganiser.mode.1', 'Custom Page Order'),
+    description: t('pdfOrganiser.mode.desc.CUSTOM', 'Use a custom sequence of page numbers or expressions to define a new order.')
+  },
+  { 
+    value: 'REVERSE_ORDER', 
+    label: t('pdfOrganiser.mode.2', 'Reverse Order'),
+    description: t('pdfOrganiser.mode.desc.REVERSE_ORDER', 'Flip the document so the last page becomes first and so on.')
+  },
+  { 
+    value: 'DUPLEX_SORT', 
+    label: t('pdfOrganiser.mode.3', 'Duplex Sort'),
+    description: t('pdfOrganiser.mode.desc.DUPLEX_SORT', 'Interleave fronts then backs as if a duplex scanner scanned all fronts, then all backs (1, n, 2, n-1, …).')
+  },
+  { 
+    value: 'BOOKLET_SORT', 
+    label: t('pdfOrganiser.mode.4', 'Booklet Sort'),
+    description: t('pdfOrganiser.mode.desc.BOOKLET_SORT', 'Arrange pages for booklet printing (last, first, second, second last, …).')
+  },
+  { 
+    value: 'SIDE_STITCH_BOOKLET_SORT', 
+    label: t('pdfOrganiser.mode.5', 'Side Stitch Booklet Sort'),
+    description: t('pdfOrganiser.mode.desc.SIDE_STITCH_BOOKLET_SORT', 'Arrange pages for side‑stitch booklet printing (optimized for binding on the side).')
+  },
+  { 
+    value: 'ODD_EVEN_SPLIT', 
+    label: t('pdfOrganiser.mode.6', 'Odd-Even Split'),
+    description: t('pdfOrganiser.mode.desc.ODD_EVEN_SPLIT', 'Split the document into two outputs: all odd pages and all even pages.')
+  },
+  { 
+    value: 'ODD_EVEN_MERGE', 
+    label: t('pdfOrganiser.mode.10', 'Odd-Even Merge'),
+    description: t('pdfOrganiser.mode.desc.ODD_EVEN_MERGE', 'Merge two PDFs by alternating pages: odd from the first, even from the second.')
+  },
+  { 
+    value: 'DUPLICATE', 
+    label: t('pdfOrganiser.mode.11', 'Duplicate all pages'),
+    description: t('pdfOrganiser.mode.desc.DUPLICATE', 'Duplicate each page according to the custom order count (e.g., 4 duplicates each page 4×).')
+  },
+  { 
+    value: 'REMOVE_FIRST', 
+    label: t('pdfOrganiser.mode.7', 'Remove First'),
+    description: t('pdfOrganiser.mode.desc.REMOVE_FIRST', 'Remove the first page from the document.')
+  },
+  { 
+    value: 'REMOVE_LAST', 
+    label: t('pdfOrganiser.mode.8', 'Remove Last'),
+    description: t('pdfOrganiser.mode.desc.REMOVE_LAST', 'Remove the last page from the document.')
+  },
+  { 
+    value: 'REMOVE_FIRST_AND_LAST', 
+    label: t('pdfOrganiser.mode.9', 'Remove First and Last'),
+    description: t('pdfOrganiser.mode.desc.REMOVE_FIRST_AND_LAST', 'Remove both the first and last pages from the document.')
+  },
+];

frontend/src/components/tools/replaceColor/ReplaceColorSettings.tsx

@@ -0,0 +1,107 @@
+import { Stack, Text, Select, ColorInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ReplaceColorParameters } from "../../../hooks/tools/replaceColor/useReplaceColorParameters";
+
+interface ReplaceColorSettingsProps {
+  parameters: ReplaceColorParameters;
+  onParameterChange: <K extends keyof ReplaceColorParameters>(key: K, value: ReplaceColorParameters[K]) => void;
+  disabled?: boolean;
+}
+
+const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false }: ReplaceColorSettingsProps) => {
+  const { t } = useTranslation();
+
+  const replaceAndInvertOptions = [
+    {
+      value: 'HIGH_CONTRAST_COLOR',
+      label: t('replaceColor.options.highContrast', 'High contrast')
+    },
+    {
+      value: 'FULL_INVERSION',
+      label: t('replaceColor.options.invertAll', 'Invert all colours')
+    },
+    {
+      value: 'CUSTOM_COLOR',
+      label: t('replaceColor.options.custom', 'Custom')
+    }
+  ];
+
+  const highContrastOptions = [
+    {
+      value: 'WHITE_TEXT_ON_BLACK',
+      label: t('replace-color.selectText.6', 'White text on black background')
+    },
+    {
+      value: 'BLACK_TEXT_ON_WHITE',
+      label: t('replace-color.selectText.7', 'Black text on white background')
+    },
+    {
+      value: 'YELLOW_TEXT_ON_BLACK',
+      label: t('replace-color.selectText.8', 'Yellow text on black background')
+    },
+    {
+      value: 'GREEN_TEXT_ON_BLACK',
+      label: t('replace-color.selectText.9', 'Green text on black background')
+    }
+  ];
+
+  return (
+    <Stack gap="md">
+      <Stack gap="xs">
+        <Text size="sm" fw={500}>
+          {t('replaceColor.labels.colourOperation', 'Colour operation')}
+        </Text>
+        <Select
+          value={parameters.replaceAndInvertOption}
+          onChange={(value) => value && onParameterChange('replaceAndInvertOption', value as ReplaceColorParameters['replaceAndInvertOption'])}
+          data={replaceAndInvertOptions}
+          disabled={disabled}
+        />
+      </Stack>
+
+      {parameters.replaceAndInvertOption === 'HIGH_CONTRAST_COLOR' && (
+        <Stack gap="xs">
+          <Text size="sm" fw={500}>
+            {t('replace-color.selectText.5', 'High contrast color options')}
+          </Text>
+          <Select
+            value={parameters.highContrastColorCombination}
+            onChange={(value) => value && onParameterChange('highContrastColorCombination', value as ReplaceColorParameters['highContrastColorCombination'])}
+            data={highContrastOptions}
+            disabled={disabled}
+          />
+        </Stack>
+      )}
+
+      {parameters.replaceAndInvertOption === 'CUSTOM_COLOR' && (
+        <>
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>
+              {t('replace-color.selectText.10', 'Choose text Color')}
+            </Text>
+            <ColorInput
+              value={parameters.textColor}
+              onChange={(value) => onParameterChange('textColor', value)}
+              format="hex"
+              disabled={disabled}
+            />
+          </Stack>
+
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>
+              {t('replace-color.selectText.11', 'Choose background Color')}
+            </Text>
+            <ColorInput
+              value={parameters.backGroundColor}
+              onChange={(value) => onParameterChange('backGroundColor', value)}
+              format="hex"
+              disabled={disabled}
+            />
+          </Stack>
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default ReplaceColorSettings;

frontend/src/components/tools/shared/ErrorNotification.tsx

@@ -30,6 +30,6 @@ const ErrorNotification = ({
       {error}
     </Notification>
   );
-}
+};
 
 export default ErrorNotification;

frontend/src/components/tools/shared/FileMetadata.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Text } from '@mantine/core';
 import { formatFileSize, getFileDate } from '../../../utils/fileUtils';
 
@@ -24,4 +23,4 @@ const FileMetadata = ({ file }: FileMetadataProps) => {
   );
 };
 
-export default FileMetadata;
+export default FileMetadata;

frontend/src/components/tools/shared/NavigationControls.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Stack, Group, ActionIcon, Text } from '@mantine/core';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';

frontend/src/components/tools/shared/NumberInputWithUnit.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Stack, Text, NumberInput } from "@mantine/core";
 
 interface NumberInputWithUnitProps {
@@ -11,14 +11,14 @@ interface NumberInputWithUnitProps {
   disabled?: boolean;
 }
 
-const NumberInputWithUnit = ({ 
-  label, 
-  value, 
-  onChange, 
-  unit, 
-  min, 
-  max, 
-  disabled = false 
+const NumberInputWithUnit = ({
+  label,
+  value,
+  onChange,
+  unit,
+  min,
+  max,
+  disabled = false
 }: NumberInputWithUnitProps) => {
   const [localValue, setLocalValue] = useState<number | string>(value);
 
@@ -54,4 +54,4 @@ const NumberInputWithUnit = ({
   );
 };
 
-export default NumberInputWithUnit;
+export default NumberInputWithUnit;

frontend/src/components/tools/shared/OperationButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 
@@ -52,6 +51,6 @@ const OperationButton = ({
       }
     </Button>
   );
-}
+};
 
 export default OperationButton;

frontend/src/components/tools/shared/ResultsPreview.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Text, Loader, Stack, Center, Flex } from '@mantine/core';
 import FilePreview from '../../shared/FilePreview';
 import FileMetadata from './FileMetadata';

frontend/src/components/tools/shared/ToolStep.tsx

@@ -149,7 +149,7 @@ const ToolStep = ({
       <Divider style={{ color: '#E2E8F0', marginLeft: '1rem', marginRight: '-0.5rem' }} />
     </div>
   );
-}
+};
 
 // ToolStepFactory for creating numbered steps
 export function createToolSteps() {
@@ -164,13 +164,16 @@ export function createToolSteps() {
     const isVisible = props.isVisible !== false;
     const currentStepNumber = isVisible ? stepNumber++ : undefined;
 
-    const step = React.createElement(ToolStep, {
-      ...props,
-      title,
-      _stepNumber: currentStepNumber,
-      children,
-      key: `step-${title.toLowerCase().replace(/\s+/g, '-')}`
-    });
+    const step = React.createElement(
+      ToolStep,
+      {
+        ...props,
+        title,
+        _stepNumber: currentStepNumber,
+        key: `step-${title.toLowerCase().replace(/\s+/g, '-')}`
+      },
+      children
+    );
 
     steps.push(step);
     return step;
@@ -186,9 +189,9 @@ export function createToolSteps() {
 
   const getVisibleCount = () => {
     return steps.filter(step => {
-      const props = step.props as ToolStepProps;
-      const isVisible = props.isVisible !== false;
-      const excludeFromCount = props._excludeFromCount === true;
+      const stepProps = step.props as ToolStepProps;
+      const isVisible = stepProps.isVisible !== false;
+      const excludeFromCount = stepProps._excludeFromCount === true;
       return isVisible && !excludeFromCount;
     }).length;
   };
@@ -203,9 +206,9 @@ export function ToolStepProvider({ children, forceStepNumbers }: { children: Rea
     let count = 0;
     React.Children.forEach(children, (child) => {
       if (React.isValidElement(child) && child.type === ToolStep) {
-        const props = child.props as ToolStepProps;
-        const isVisible = props.isVisible !== false;
-        const excludeFromCount = props._excludeFromCount === true;
+        const stepProps = child.props as ToolStepProps;
+        const isVisible = stepProps.isVisible !== false;
+        const excludeFromCount = stepProps._excludeFromCount === true;
         if (isVisible && !excludeFromCount) count++;
       }
     });

frontend/src/components/tools/sign/PenSizeSelector.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { TextInput, Combobox, useCombobox } from '@mantine/core';
+
+interface PenSizeSelectorProps {
+  value: number;
+  inputValue: string;
+  onValueChange: (size: number) => void;
+  onInputChange: (input: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  style?: React.CSSProperties;
+  size?: string;
+}
+
+const PenSizeSelector = ({
+  value,
+  inputValue,
+  onValueChange,
+  onInputChange,
+  disabled = false,
+  placeholder = "Type or select pen size (1-200)",
+  style,
+  size
+}: PenSizeSelectorProps) => {
+  const combobox = useCombobox();
+
+  const penSizeOptions = ['1', '2', '3', '4', '5', '8', '10', '12', '15', '20'];
+
+  return (
+    <Combobox
+      onOptionSubmit={(optionValue) => {
+        const penSize = parseInt(optionValue);
+        if (!isNaN(penSize)) {
+          onValueChange(penSize);
+          onInputChange(optionValue);
+        }
+        combobox.closeDropdown();
+      }}
+      store={combobox}
+      withinPortal={false}
+    >
+      <Combobox.Target>
+        <TextInput
+          placeholder={placeholder}
+          size={size}
+          value={inputValue}
+          onChange={(event) => {
+            const inputVal = event.currentTarget.value;
+            onInputChange(inputVal);
+
+            const penSize = parseInt(inputVal);
+            if (!isNaN(penSize) && penSize >= 1 && penSize <= 200) {
+              onValueChange(penSize);
+            }
+
+            combobox.openDropdown();
+            combobox.updateSelectedOptionIndex();
+          }}
+          onClick={() => combobox.openDropdown()}
+          onFocus={() => combobox.openDropdown()}
+          onBlur={() => {
+            combobox.closeDropdown();
+            const penSize = parseInt(inputValue);
+            if (isNaN(penSize) || penSize < 1 || penSize > 200) {
+              onInputChange(value.toString());
+            }
+          }}
+          disabled={disabled}
+          style={style}
+        />
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Options>
+          {penSizeOptions.map((sizeOption) => (
+            <Combobox.Option value={sizeOption} key={sizeOption}>
+              {sizeOption}px
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+};
+
+export default PenSizeSelector;

frontend/src/components/tools/sign/SignSettings.tsx

@@ -0,0 +1,259 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from "react-i18next";
+import { Stack, Button, Text, Alert, Tabs } from '@mantine/core';
+import { SignParameters } from "../../../hooks/tools/sign/useSignParameters";
+import { SuggestedToolsSection } from "../shared/SuggestedToolsSection";
+
+// Import the new reusable components
+import { DrawingCanvas } from "../../annotation/shared/DrawingCanvas";
+import { DrawingControls } from "../../annotation/shared/DrawingControls";
+import { ImageUploader } from "../../annotation/shared/ImageUploader";
+import { TextInputWithFont } from "../../annotation/shared/TextInputWithFont";
+import { ColorPicker } from "../../annotation/shared/ColorPicker";
+
+interface SignSettingsProps {
+  parameters: SignParameters;
+  onParameterChange: <K extends keyof SignParameters>(key: K, value: SignParameters[K]) => void;
+  disabled?: boolean;
+  onActivateDrawMode?: () => void;
+  onActivateSignaturePlacement?: () => void;
+  onDeactivateSignature?: () => void;
+  onUpdateDrawSettings?: (color: string, size: number) => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onSave?: () => void;
+}
+
+const SignSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+  onActivateSignaturePlacement,
+  onDeactivateSignature,
+  onUndo,
+  onRedo,
+  onSave
+}: SignSettingsProps) => {
+  const { t } = useTranslation();
+
+  // State for drawing
+  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [penSize, setPenSize] = useState(2);
+  const [penSizeInput, setPenSizeInput] = useState('2');
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+
+  // State for different signature types
+  const [canvasSignatureData, setCanvasSignatureData] = useState<string | null>(null);
+  const [imageSignatureData, setImageSignatureData] = useState<string | null>(null);
+
+  // Handle image upload
+  const handleImageChange = async (file: File | null) => {
+    if (file && !disabled) {
+      try {
+        const result = await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            if (e.target?.result) {
+              resolve(e.target.result as string);
+            } else {
+              reject(new Error('Failed to read file'));
+            }
+          };
+          reader.onerror = () => reject(reader.error);
+          reader.readAsDataURL(file);
+        });
+
+        // Clear any existing canvas signatures when uploading image
+        setCanvasSignatureData(null);
+        setImageSignatureData(result);
+      } catch (error) {
+        console.error('Error reading file:', error);
+      }
+    } else if (!file) {
+      setImageSignatureData(null);
+      if (onDeactivateSignature) {
+        onDeactivateSignature();
+      }
+    }
+  };
+
+  // Handle signature data changes
+  const handleCanvasSignatureChange = (data: string | null) => {
+    setCanvasSignatureData(prev => {
+      if (prev === data) return prev; // Prevent unnecessary updates
+      return data;
+    });
+    if (data) {
+      // Clear image data when canvas is used
+      setImageSignatureData(null);
+    }
+  };
+
+  // Handle signature mode deactivation when switching types
+  useEffect(() => {
+    if (parameters.signatureType !== 'text' && onDeactivateSignature) {
+      onDeactivateSignature();
+    }
+  }, [parameters.signatureType]);
+
+  // Handle text signature activation
+  useEffect(() => {
+    if (parameters.signatureType === 'text' && parameters.signerName && parameters.signerName.trim() !== '') {
+      if (onActivateSignaturePlacement) {
+        setTimeout(() => {
+          onActivateSignaturePlacement();
+        }, 100);
+      }
+    } else if (parameters.signatureType === 'text' && (!parameters.signerName || parameters.signerName.trim() === '')) {
+      if (onDeactivateSignature) {
+        onDeactivateSignature();
+      }
+    }
+  }, [parameters.signatureType, parameters.signerName, onActivateSignaturePlacement, onDeactivateSignature]);
+
+  // Handle signature data updates
+  useEffect(() => {
+    let newSignatureData: string | undefined = undefined;
+
+    if (parameters.signatureType === 'image' && imageSignatureData) {
+      newSignatureData = imageSignatureData;
+    } else if (parameters.signatureType === 'canvas' && canvasSignatureData) {
+      newSignatureData = canvasSignatureData;
+    }
+
+    // Only update if the signature data has actually changed
+    if (parameters.signatureData !== newSignatureData) {
+      onParameterChange('signatureData', newSignatureData);
+    }
+  }, [parameters.signatureType, parameters.signatureData, canvasSignatureData, imageSignatureData]);
+
+  // Handle image signature activation - activate when image data syncs with parameters
+  useEffect(() => {
+    if (parameters.signatureType === 'image' && imageSignatureData && parameters.signatureData === imageSignatureData && onActivateSignaturePlacement) {
+      setTimeout(() => {
+        onActivateSignaturePlacement();
+      }, 100);
+    }
+  }, [parameters.signatureType, parameters.signatureData, imageSignatureData]);
+
+  // Draw settings are no longer needed since draw mode is removed
+
+  return (
+    <Stack gap="md">
+      {/* Signature Type Selection */}
+      <Tabs
+        value={parameters.signatureType}
+        onChange={(value) => onParameterChange('signatureType', value as 'image' | 'text' | 'canvas')}
+      >
+        <Tabs.List grow>
+          <Tabs.Tab value="canvas" style={{ fontSize: '0.8rem' }}>
+            {t('sign.type.canvas', 'Canvas')}
+          </Tabs.Tab>
+          <Tabs.Tab value="image" style={{ fontSize: '0.8rem' }}>
+            {t('sign.type.image', 'Image')}
+          </Tabs.Tab>
+          <Tabs.Tab value="text" style={{ fontSize: '0.8rem' }}>
+            {t('sign.type.text', 'Text')}
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+
+      {/* Drawing Controls */}
+      <DrawingControls
+        onUndo={onUndo}
+        onRedo={onRedo}
+        onPlaceSignature={() => {
+          if (onActivateSignaturePlacement) {
+            onActivateSignaturePlacement();
+          }
+        }}
+        hasSignatureData={!!(canvasSignatureData || imageSignatureData || (parameters.signerName && parameters.signerName.trim() !== ''))}
+        disabled={disabled}
+        showPlaceButton={false}
+        placeButtonText="Update and Place"
+      />
+
+      {/* Signature Creation based on type */}
+      {parameters.signatureType === 'canvas' && (
+        <DrawingCanvas
+          selectedColor={selectedColor}
+          penSize={penSize}
+          penSizeInput={penSizeInput}
+          onColorSwatchClick={() => setIsColorPickerOpen(true)}
+          onPenSizeChange={setPenSize}
+          onPenSizeInputChange={setPenSizeInput}
+          onSignatureDataChange={handleCanvasSignatureChange}
+          disabled={disabled}
+          additionalButtons={
+            <Button
+              onClick={() => {
+                if (onActivateSignaturePlacement) {
+                  onActivateSignaturePlacement();
+                }
+              }}
+              color="blue"
+              variant="filled"
+              disabled={disabled || !canvasSignatureData}
+            >
+              Update and Place
+            </Button>
+          }
+        />
+      )}
+
+      {parameters.signatureType === 'image' && (
+        <ImageUploader
+          onImageChange={handleImageChange}
+          disabled={disabled}
+        />
+      )}
+
+      {parameters.signatureType === 'text' && (
+        <TextInputWithFont
+          text={parameters.signerName || ''}
+          onTextChange={(text) => onParameterChange('signerName', text)}
+          fontSize={parameters.fontSize || 16}
+          onFontSizeChange={(size) => onParameterChange('fontSize', size)}
+          fontFamily={parameters.fontFamily || 'Helvetica'}
+          onFontFamilyChange={(family) => onParameterChange('fontFamily', family)}
+          disabled={disabled}
+        />
+      )}
+
+
+      {/* Instructions for placing signature */}
+      <Alert color="blue" title={t('sign.instructions.title', 'How to add signature')}>
+        <Text size="sm">
+          {parameters.signatureType === 'canvas' && 'After drawing your signature in the canvas above, click "Update and Place" then click anywhere on the PDF to place it.'}
+          {parameters.signatureType === 'image' && 'After uploading your signature image above, click anywhere on the PDF to place it.'}
+          {parameters.signatureType === 'text' && 'After entering your name above, click anywhere on the PDF to place your signature.'}
+        </Text>
+      </Alert>
+
+      {/* Color Picker Modal */}
+      <ColorPicker
+        isOpen={isColorPickerOpen}
+        onClose={() => setIsColorPickerOpen(false)}
+        selectedColor={selectedColor}
+        onColorChange={setSelectedColor}
+      />
+
+      {/* Apply Signatures Button */}
+      {onSave && (
+        <Button
+          onClick={onSave}
+          color="blue"
+          variant="filled"
+          fullWidth
+        >
+          {t('sign.applySignatures', 'Apply Signatures')}
+        </Button>
+      )}
+
+      {/* Suggested Tools Section */}
+      <SuggestedToolsSection />
+    </Stack>
+  );
+};
+
+export default SignSettings;

frontend/src/components/tools/split/SplitSettings.tsx

@@ -158,6 +158,6 @@ const SplitSettings = ({
       {parameters.method === SPLIT_METHODS.BY_PAGE_DIVIDER && renderByPageDividerForm()}
     </Stack>
   );
-}
+};
 
 export default SplitSettings;

frontend/src/components/tools/toolPicker/ToolButton.tsx

@@ -17,7 +17,8 @@ interface ToolButtonProps {
 }
 
 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym }) => {
-  const isUnavailable = !tool.component && !tool.link;
+  // Special case: read and multiTool are navigational tools that are always available
+  const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
   const { getToolNavigation } = useToolNavigation();
 
   const handleClick = (id: string) => {

frontend/src/components/tools/toolPicker/ToolSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { Stack, Button, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import LocalIcon from '../../shared/LocalIcon';

frontend/src/components/tooltips/useReplaceColorTips.ts

@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next';
+import { TooltipContent } from '../../types/tips';
+
+export const useReplaceColorTips = (): TooltipContent => {
+  const { t } = useTranslation();
+
+  return {
+    header: {
+      title: t("replaceColor.tooltip.header.title", "Replace & Invert Colour Settings Overview")
+    },
+    tips: [
+      {
+        title: t("replaceColor.tooltip.description.title", "Description"),
+        description: t("replaceColor.tooltip.description.text", "Transform PDF colours to improve readability and accessibility. Choose from high contrast presets, invert all colours, or create custom colour schemes.")
+      },
+      {
+        title: t("replaceColor.tooltip.highContrast.title", "High Contrast"),
+        description: t("replaceColor.tooltip.highContrast.text", "Apply predefined high contrast colour combinations designed for better readability and accessibility compliance."),
+        bullets: [
+          t("replaceColor.tooltip.highContrast.bullet1", "White text on black background - Classic dark mode"),
+          t("replaceColor.tooltip.highContrast.bullet2", "Black text on white background - Standard high contrast"),
+          t("replaceColor.tooltip.highContrast.bullet3", "Yellow text on black background - High visibility option"),
+          t("replaceColor.tooltip.highContrast.bullet4", "Green text on black background - Alternative high contrast")
+        ]
+      },
+      {
+        title: t("replaceColor.tooltip.invertAll.title", "Invert All Colours"),
+        description: t("replaceColor.tooltip.invertAll.text", "Completely invert all colours in the PDF, creating a negative-like effect. Useful for creating dark mode versions of documents or reducing eye strain in low-light conditions.")
+      },
+      {
+        title: t("replaceColor.tooltip.custom.title", "Custom Colours"),
+        description: t("replaceColor.tooltip.custom.text", "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements."),
+        bullets: [
+          t("replaceColor.tooltip.custom.bullet1", "Text colour - Choose the colour for text elements"),
+          t("replaceColor.tooltip.custom.bullet2", "Background colour - Set the background colour for the document")
+        ]
+      }
+    ]
+  };
+};

frontend/src/components/viewer/CustomSearchLayer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useSearch } from '@embedpdf/plugin-search/react';
 import { useViewer } from '../../contexts/ViewerContext';
 import { SEARCH_CONSTANTS } from './constants/search';
@@ -24,9 +24,9 @@ interface SearchResultState {
   activeResultIndex?: number;
 }
 
-export function CustomSearchLayer({ 
-  pageIndex, 
-  scale, 
+export function CustomSearchLayer({
+  pageIndex,
+  scale,
   highlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.BACKGROUND,
   activeHighlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND,
   opacity = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.OPACITY,
@@ -42,17 +42,17 @@ export function CustomSearchLayer({
     if (!searchProvides) {
       return;
     }
-    
+
     const unsubscribe = searchProvides.onSearchResultStateChange?.((state: SearchResultState) => {
       // Auto-scroll to active search result
       if (state?.results && state.activeResultIndex !== undefined && state.activeResultIndex >= 0) {
         const activeResult = state.results[state.activeResultIndex];
-        if (activeResult) {            
+        if (activeResult) {
           const pageNumber = activeResult.pageIndex + 1; // Convert to 1-based page number
           scrollActions.scrollToPage(pageNumber);
         }
       }
-      
+
       setSearchResultState(state);
     });
 
@@ -69,7 +69,7 @@ export function CustomSearchLayer({
     const filtered = searchResultState.results
       .map((result, originalIndex) => ({ result, originalIndex }))
       .filter(({ result }) => result.pageIndex === pageIndex);
-    
+
     return filtered;
   }, [searchResultState, pageIndex]);
 
@@ -78,7 +78,7 @@ export function CustomSearchLayer({
   }
 
   return (
-    <div style={{ 
+    <div style={{
       position: 'absolute',
       top: 0,
       left: 0,
@@ -117,4 +117,4 @@ export function CustomSearchLayer({
       ))}
     </div>
   );
-}
+}

frontend/src/components/viewer/EmbedPdfViewer.tsx

@@ -9,6 +9,8 @@ import { useViewer } from "../../contexts/ViewerContext";
 import { LocalEmbedPDF } from './LocalEmbedPDF';
 import { PdfViewerToolbar } from './PdfViewerToolbar';
 import { ThumbnailSidebar } from './ThumbnailSidebar';
+import { useNavigationState } from '../../contexts/NavigationContext';
+import { useSignature } from '../../contexts/SignatureContext';
 
 export interface EmbedPdfViewerProps {
   sidebarsVisible: boolean;
@@ -33,6 +35,12 @@ const EmbedPdfViewerContent = ({
   const zoomState = getZoomState();
   const spreadState = getSpreadState();
 
+  // Check if we're in signature mode
+  const { selectedTool } = useNavigationState();
+  const isSignatureMode = selectedTool === 'sign';
+
+  // Get signature context
+  const { signatureApiRef, historyApiRef } = useSignature();
 
   // Get current file from FileContext
   const { selectors } = useFileState();
@@ -178,6 +186,13 @@ const EmbedPdfViewerContent = ({
             <LocalEmbedPDF
               file={effectiveFile.file}
               url={effectiveFile.url}
+              enableSignature={isSignatureMode}
+              signatureApiRef={signatureApiRef as React.RefObject<any>}
+              historyApiRef={historyApiRef as React.RefObject<any>}
+              onSignatureAdded={() => {
+                // Handle signature added - for debugging, enable console logs as needed
+                // Future: Handle signature completion
+              }}
             />
           </Box>
         </>

frontend/src/components/viewer/ExportAPIBridge.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useExportCapability } from '@embedpdf/plugin-export/react';
+import { useViewer } from '../../contexts/ViewerContext';
+
+/**
+ * Component that runs inside EmbedPDF context and provides export functionality
+ */
+export function ExportAPIBridge() {
+  const { provides: exportApi } = useExportCapability();
+  const { registerBridge } = useViewer();
+
+  useEffect(() => {
+    if (exportApi) {
+      // Register this bridge with ViewerContext
+      registerBridge('export', {
+        state: {
+          canExport: true,
+        },
+        api: exportApi
+      });
+    }
+  }, [exportApi, registerBridge]);
+
+  return null;
+}

frontend/src/components/viewer/HistoryAPIBridge.tsx

@@ -0,0 +1,116 @@
+import { useImperativeHandle, forwardRef, useEffect } from 'react';
+import { useHistoryCapability } from '@embedpdf/plugin-history/react';
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
+import { useSignature } from '../../contexts/SignatureContext';
+import { uuidV4 } from '@embedpdf/models';
+
+export interface HistoryAPI {
+  undo: () => void;
+  redo: () => void;
+  canUndo: () => boolean;
+  canRedo: () => boolean;
+}
+
+export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge(_, ref) {
+  const { provides: historyApi } = useHistoryCapability();
+  const { provides: annotationApi } = useAnnotationCapability();
+  const { getImageData, storeImageData } = useSignature();
+
+  // Monitor annotation events to detect when annotations are restored
+  useEffect(() => {
+    if (!annotationApi) return;
+
+    const handleAnnotationEvent = (event: any) => {
+      const annotation = event.annotation;
+
+      // Store image data for all STAMP annotations immediately when created or modified
+      if (annotation && annotation.type === 13 && annotation.id && annotation.imageSrc) {
+        const storedImageData = getImageData(annotation.id);
+        if (!storedImageData || storedImageData !== annotation.imageSrc) {
+          storeImageData(annotation.id, annotation.imageSrc);
+        }
+      }
+
+      // Handle annotation restoration after undo operations
+      if (event.type === 'create' && event.committed) {
+        // Check if this is a STAMP annotation (signature) that might need image data restoration
+        if (annotation && annotation.type === 13 && annotation.id) {
+          getImageData(annotation.id);
+
+          // Delay the check to allow the annotation to be fully created
+          setTimeout(() => {
+            const currentStoredData = getImageData(annotation.id);
+            // Check if the annotation lacks image data but we have it stored
+            if (currentStoredData && (!annotation.imageSrc || annotation.imageSrc !== currentStoredData)) {
+              
+              // Generate new ID to avoid React key conflicts
+              const newId = uuidV4();
+
+              // Recreation with stored image data
+              const restoredData = {
+                type: annotation.type,
+                rect: annotation.rect,
+                author: annotation.author || 'Digital Signature',
+                subject: annotation.subject || 'Digital Signature',
+                pageIndex: event.pageIndex,
+                id: newId,
+                created: annotation.created || new Date(),
+                imageSrc: currentStoredData
+              };
+
+              // Update stored data to use new ID
+              storeImageData(newId, currentStoredData);
+
+              // Replace the annotation with one that has proper image data
+              try {
+                annotationApi.deleteAnnotation(event.pageIndex, annotation.id);
+                // Small delay to ensure deletion completes
+                setTimeout(() => {
+                  annotationApi.createAnnotation(event.pageIndex, restoredData);
+                }, 50);
+              } catch (error) {
+                console.error('HistoryAPI: Failed to restore annotation:', error);
+              }
+            }
+          }, 100);
+        }
+      }
+    };
+
+    // Add the event listener
+    annotationApi.onAnnotationEvent(handleAnnotationEvent);
+
+    // Cleanup function
+    return () => {
+      // Note: EmbedPDF doesn't provide a way to remove event listeners
+      // This is a limitation of the current API
+    };
+  }, [annotationApi, getImageData, storeImageData]);
+
+
+  useImperativeHandle(ref, () => ({
+    undo: () => {
+      if (historyApi) {
+        historyApi.undo();
+      }
+    },
+
+    redo: () => {
+      if (historyApi) {
+        historyApi.redo();
+      }
+    },
+
+    canUndo: () => {
+      return historyApi ? historyApi.canUndo() : false;
+    },
+
+    canRedo: () => {
+      return historyApi ? historyApi.canRedo() : false;
+    },
+  }), [historyApi]);
+
+  return null; // This is a bridge component with no UI
+});
+
+HistoryAPIBridge.displayName = 'HistoryAPIBridge';

frontend/src/components/viewer/LocalEmbedPDF.tsx

@@ -17,7 +17,13 @@ import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
 import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
 import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
 import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
+import { ExportPluginPackage } from '@embedpdf/plugin-export/react';
 import { Rotation } from '@embedpdf/models';
+
+// Import annotation plugins
+import { HistoryPluginPackage } from '@embedpdf/plugin-history/react';
+import { AnnotationLayer, AnnotationPluginPackage } from '@embedpdf/plugin-annotation/react';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
 import { CustomSearchLayer } from './CustomSearchLayer';
 import { ZoomAPIBridge } from './ZoomAPIBridge';
 import ToolLoadingFallback from '../tools/ToolLoadingFallback';
@@ -29,14 +35,22 @@ import { SpreadAPIBridge } from './SpreadAPIBridge';
 import { SearchAPIBridge } from './SearchAPIBridge';
 import { ThumbnailAPIBridge } from './ThumbnailAPIBridge';
 import { RotateAPIBridge } from './RotateAPIBridge';
+import { SignatureAPIBridge, SignatureAPI } from './SignatureAPIBridge';
+import { HistoryAPIBridge, HistoryAPI } from './HistoryAPIBridge';
+import { ExportAPIBridge } from './ExportAPIBridge';
 
 interface LocalEmbedPDFProps {
   file?: File | Blob;
   url?: string | null;
+  enableSignature?: boolean;
+  onSignatureAdded?: (annotation: any) => void;
+  signatureApiRef?: React.RefObject<SignatureAPI>;
+  historyApiRef?: React.RefObject<HistoryAPI>;
 }
 
-export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
+export function LocalEmbedPDF({ file, url, enableSignature = false, onSignatureAdded, signatureApiRef, historyApiRef }: LocalEmbedPDFProps) {
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+  const [, setAnnotations] = useState<Array<{id: string, pageIndex: number, rect: any}>>([]);
 
   // Convert File to URL if needed
   useEffect(() => {
@@ -78,6 +92,17 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
       // Register selection plugin (depends on InteractionManager)
       createPluginRegistration(SelectionPluginPackage),
 
+      // Register history plugin for undo/redo (recommended for annotations)
+      ...(enableSignature ? [createPluginRegistration(HistoryPluginPackage)] : []),
+
+      // Register annotation plugin (depends on InteractionManager, Selection, History)
+      ...(enableSignature ? [createPluginRegistration(AnnotationPluginPackage, {
+        annotationAuthor: 'Digital Signature',
+        autoCommit: true,
+        deactivateToolAfterCreate: false,
+        selectAfterCreate: true,
+      })] : []),
+
       // Register pan plugin (depends on Viewport, InteractionManager)
       createPluginRegistration(PanPluginPackage, {
         defaultMode: 'mobile', // Try mobile mode which might be more permissive
@@ -112,6 +137,11 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
       createPluginRegistration(RotatePluginPackage, {
         defaultRotation: Rotation.Degree0, // Start with no rotation
       }),
+
+      // Register export plugin for downloading PDFs
+      createPluginRegistration(ExportPluginPackage, {
+        defaultFileName: 'document.pdf',
+      }),
     ];
   }, [pdfUrl]);
 
@@ -161,7 +191,72 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
       minHeight: 0,
       minWidth: 0
     }}>
-      <EmbedPDF engine={engine} plugins={plugins}>
+      <EmbedPDF
+        engine={engine}
+        plugins={plugins}
+        onInitialized={enableSignature ? async (registry) => {
+          const annotationPlugin = registry.getPlugin('annotation');
+          if (!annotationPlugin || !annotationPlugin.provides) return;
+
+          const annotationApi = annotationPlugin.provides();
+          if (!annotationApi) return;
+
+          // Add custom signature stamp tool for image signatures
+          annotationApi.addTool({
+            id: 'signatureStamp',
+            name: 'Digital Signature',
+            interaction: { exclusive: false, cursor: 'copy' },
+            matchScore: () => 0,
+            defaults: {
+              type: PdfAnnotationSubtype.STAMP,
+              // Image will be set dynamically when signature is created
+            },
+          });
+
+          // Add custom ink signature tool for drawn signatures
+          annotationApi.addTool({
+            id: 'signatureInk',
+            name: 'Signature Draw',
+            interaction: { exclusive: true, cursor: 'crosshair' },
+            matchScore: () => 0,
+            defaults: {
+              type: PdfAnnotationSubtype.INK,
+              color: '#000000',
+              opacity: 1.0,
+              borderWidth: 2,
+            },
+          });
+
+          // Listen for annotation events to track annotations and notify parent
+          annotationApi.onAnnotationEvent((event: any) => {
+            if (event.type === 'create' && event.committed) {
+              // Add to annotations list
+              setAnnotations(prev => [...prev, {
+                id: event.annotation.id,
+                pageIndex: event.pageIndex,
+                rect: event.annotation.rect
+              }]);
+
+
+              // Notify parent if callback provided
+              if (onSignatureAdded) {
+                onSignatureAdded(event.annotation);
+              }
+            } else if (event.type === 'delete' && event.committed) {
+              // Remove from annotations list
+              setAnnotations(prev => prev.filter(ann => ann.id !== event.annotation.id));
+            } else if (event.type === 'loaded') {
+              // Handle initial load of annotations
+              const loadedAnnotations = event.annotations || [];
+              setAnnotations(loadedAnnotations.map((ann: any) => ({
+                id: ann.id,
+                pageIndex: ann.pageIndex || 0,
+                rect: ann.rect
+              })));
+            }
+          });
+        } : undefined}
+      >
         <ZoomAPIBridge />
         <ScrollAPIBridge />
         <SelectionAPIBridge />
@@ -170,6 +265,9 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
         <SearchAPIBridge />
         <ThumbnailAPIBridge />
         <RotateAPIBridge />
+        {enableSignature && <SignatureAPIBridge ref={signatureApiRef} />}
+        {enableSignature && <HistoryAPIBridge ref={historyApiRef} />}
+        <ExportAPIBridge />
         <GlobalPointerProvider>
           <Viewport
             style={{
@@ -213,6 +311,17 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
 
                     {/* Selection layer for text interaction */}
                     <SelectionLayer pageIndex={pageIndex} scale={scale} />
+                    {/* Annotation layer for signatures (only when enabled) */}
+                    {enableSignature && (
+                      <AnnotationLayer
+                        pageIndex={pageIndex}
+                        scale={scale}
+                        pageWidth={width}
+                        pageHeight={height}
+                        rotation={rotation || 0}
+                        selectionOutlineColor="#007ACC"
+                      />
+                    )}
                   </div>
                 </PagePointerProvider>
               </Rotate>

frontend/src/components/viewer/LocalEmbedPDFWithAnnotations.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useMemo, useState } from 'react';
+import { createPluginRegistration } from '@embedpdf/core';
+import { EmbedPDF } from '@embedpdf/core/react';
+import { usePdfiumEngine } from '@embedpdf/engines/react';
+
+// Import the essential plugins
+import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
+import { Scroller, ScrollPluginPackage, ScrollStrategy } from '@embedpdf/plugin-scroll/react';
+import { LoaderPluginPackage } from '@embedpdf/plugin-loader/react';
+import { RenderPluginPackage } from '@embedpdf/plugin-render/react';
+import { ZoomPluginPackage } from '@embedpdf/plugin-zoom/react';
+import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/react';
+import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
+import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
+import { PanPluginPackage } from '@embedpdf/plugin-pan/react';
+import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
+import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
+import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
+import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
+import { Rotation } from '@embedpdf/models';
+
+// Import annotation plugins
+import { HistoryPluginPackage } from '@embedpdf/plugin-history/react';
+import { AnnotationLayer, AnnotationPluginPackage } from '@embedpdf/plugin-annotation/react';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
+
+import { CustomSearchLayer } from './CustomSearchLayer';
+import { ZoomAPIBridge } from './ZoomAPIBridge';
+import ToolLoadingFallback from '../tools/ToolLoadingFallback';
+import { Center, Stack, Text } from '@mantine/core';
+import { ScrollAPIBridge } from './ScrollAPIBridge';
+import { SelectionAPIBridge } from './SelectionAPIBridge';
+import { PanAPIBridge } from './PanAPIBridge';
+import { SpreadAPIBridge } from './SpreadAPIBridge';
+import { SearchAPIBridge } from './SearchAPIBridge';
+import { ThumbnailAPIBridge } from './ThumbnailAPIBridge';
+import { RotateAPIBridge } from './RotateAPIBridge';
+
+interface LocalEmbedPDFWithAnnotationsProps {
+  file?: File | Blob;
+  url?: string | null;
+  onAnnotationChange?: (annotations: any[]) => void;
+}
+
+export function LocalEmbedPDFWithAnnotations({
+  file,
+  url,
+  onAnnotationChange
+}: LocalEmbedPDFWithAnnotationsProps) {
+  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+
+  // Convert File to URL if needed
+  useEffect(() => {
+    if (file) {
+      const objectUrl = URL.createObjectURL(file);
+      setPdfUrl(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
+    } else if (url) {
+      setPdfUrl(url);
+    }
+  }, [file, url]);
+
+  // Create plugins configuration with annotation support
+  const plugins = useMemo(() => {
+    if (!pdfUrl) return [];
+
+    return [
+      createPluginRegistration(LoaderPluginPackage, {
+        loadingOptions: {
+          type: 'url',
+          pdfFile: {
+            id: 'stirling-pdf-signing-viewer',
+            url: pdfUrl,
+          },
+        },
+      }),
+      createPluginRegistration(ViewportPluginPackage, {
+        viewportGap: 10,
+      }),
+      createPluginRegistration(ScrollPluginPackage, {
+        strategy: ScrollStrategy.Vertical,
+        initialPage: 0,
+      }),
+      createPluginRegistration(RenderPluginPackage),
+
+      // Register interaction manager (required for annotations)
+      createPluginRegistration(InteractionManagerPluginPackage),
+
+      // Register selection plugin (depends on InteractionManager)
+      createPluginRegistration(SelectionPluginPackage),
+
+      // Register history plugin for undo/redo (recommended for annotations)
+      createPluginRegistration(HistoryPluginPackage),
+
+      // Register annotation plugin (depends on InteractionManager, Selection, History)
+      createPluginRegistration(AnnotationPluginPackage, {
+        annotationAuthor: 'Digital Signature',
+        autoCommit: true,
+        deactivateToolAfterCreate: false,
+        selectAfterCreate: true,
+      }),
+
+      // Register pan plugin
+      createPluginRegistration(PanPluginPackage, {
+        defaultMode: 'mobile',
+      }),
+
+      // Register zoom plugin
+      createPluginRegistration(ZoomPluginPackage, {
+        defaultZoomLevel: 1.4,
+        minZoom: 0.2,
+        maxZoom: 3.0,
+      }),
+
+      // Register tiling plugin
+      createPluginRegistration(TilingPluginPackage, {
+        tileSize: 768,
+        overlapPx: 5,
+        extraRings: 1,
+      }),
+
+      // Register spread plugin
+      createPluginRegistration(SpreadPluginPackage, {
+        defaultSpreadMode: SpreadMode.None,
+      }),
+
+      // Register search plugin
+      createPluginRegistration(SearchPluginPackage),
+
+      // Register thumbnail plugin
+      createPluginRegistration(ThumbnailPluginPackage),
+
+      // Register rotate plugin
+      createPluginRegistration(RotatePluginPackage, {
+        defaultRotation: Rotation.Degree0,
+      }),
+    ];
+  }, [pdfUrl]);
+
+  // Initialize the engine
+  const { engine, isLoading, error } = usePdfiumEngine();
+
+  // Early return if no file or URL provided
+  if (!file && !url) {
+    return (
+      <Center h="100%" w="100%">
+        <Stack align="center" gap="md">
+          <div style={{ fontSize: '24px' }}>📄</div>
+          <Text c="dimmed" size="sm">
+            No PDF provided
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
+
+  if (isLoading || !engine || !pdfUrl) {
+    return <ToolLoadingFallback toolName="PDF Engine" />;
+  }
+
+  if (error) {
+    return (
+      <Center h="100%" w="100%">
+        <Stack align="center" gap="md">
+          <div style={{ fontSize: '24px' }}>❌</div>
+          <Text c="red" size="sm" style={{ textAlign: 'center' }}>
+            Error loading PDF engine: {error.message}
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
+
+  return (
+    <div style={{
+      height: '100%',
+      width: '100%',
+      position: 'relative',
+      overflow: 'hidden',
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0
+    }}>
+      <EmbedPDF
+        engine={engine}
+        plugins={plugins}
+        onInitialized={async (registry) => {
+          const annotationPlugin = registry.getPlugin('annotation');
+          if (!annotationPlugin || !annotationPlugin.provides) return;
+
+          const annotationApi = annotationPlugin.provides();
+          if (!annotationApi) return;
+
+          // Add custom signature stamp tool
+          annotationApi.addTool({
+            id: 'signatureStamp',
+            name: 'Digital Signature',
+            interaction: { exclusive: false, cursor: 'copy' },
+            matchScore: () => 0,
+            defaults: {
+              type: PdfAnnotationSubtype.STAMP,
+              // Will be set dynamically when user creates signature
+            },
+          });
+
+          // Add custom ink signature tool
+          annotationApi.addTool({
+            id: 'signatureInk',
+            name: 'Signature Draw',
+            interaction: { exclusive: true, cursor: 'crosshair' },
+            matchScore: () => 0,
+            defaults: {
+              type: PdfAnnotationSubtype.INK,
+              color: '#000000',
+              opacity: 1.0,
+              borderWidth: 2,
+            },
+          });
+
+          // Listen for annotation events to notify parent
+          if (onAnnotationChange) {
+            annotationApi.onAnnotationEvent((event: any) => {
+              if (event.committed) {
+                // Get all annotations and notify parent
+                // This is a simplified approach - in reality you'd need to get all annotations
+                onAnnotationChange([event.annotation]);
+              }
+            });
+          }
+        }}
+      >
+        <ZoomAPIBridge />
+        <ScrollAPIBridge />
+        <SelectionAPIBridge />
+        <PanAPIBridge />
+        <SpreadAPIBridge />
+        <SearchAPIBridge />
+        <ThumbnailAPIBridge />
+        <RotateAPIBridge />
+        <GlobalPointerProvider>
+          <Viewport
+            style={{
+              backgroundColor: 'var(--bg-surface)',
+              height: '100%',
+              width: '100%',
+              maxHeight: '100%',
+              maxWidth: '100%',
+              overflow: 'auto',
+              position: 'relative',
+              flex: 1,
+              minHeight: 0,
+              minWidth: 0,
+              contain: 'strict',
+            }}
+          >
+            <Scroller
+              renderPage={({ width, height, pageIndex, scale, rotation }: {
+                width: number;
+                height: number;
+                pageIndex: number;
+                scale: number;
+                rotation?: number;
+              }) => (
+                <Rotate pageSize={{ width, height }}>
+                  <PagePointerProvider {...{
+                    pageWidth: width,
+                    pageHeight: height,
+                    pageIndex,
+                    scale,
+                    rotation: rotation || 0
+                  }}>
+                    <div
+                      style={{
+                        width,
+                        height,
+                        position: 'relative',
+                        userSelect: 'none',
+                        WebkitUserSelect: 'none',
+                        MozUserSelect: 'none',
+                        msUserSelect: 'none'
+                      }}
+                      draggable={false}
+                      onDragStart={(e) => e.preventDefault()}
+                      onDrop={(e) => e.preventDefault()}
+                      onDragOver={(e) => e.preventDefault()}
+                    >
+                      {/* High-resolution tile layer */}
+                      <TilingLayer pageIndex={pageIndex} scale={scale} />
+
+                      {/* Search highlight layer */}
+                      <CustomSearchLayer pageIndex={pageIndex} scale={scale} />
+
+                      {/* Selection layer for text interaction */}
+                      <SelectionLayer pageIndex={pageIndex} scale={scale} />
+
+                      {/* Annotation layer for signatures */}
+                      <AnnotationLayer
+                        pageIndex={pageIndex}
+                        scale={scale}
+                        pageWidth={width}
+                        pageHeight={height}
+                        rotation={rotation || 0}
+                        selectionOutlineColor="#007ACC"
+                      />
+                    </div>
+                  </PagePointerProvider>
+                </Rotate>
+              )}
+            />
+          </Viewport>
+        </GlobalPointerProvider>
+      </EmbedPDF>
+    </div>
+  );
+}

frontend/src/components/viewer/PdfViewerToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Button, Paper, Group, NumberInput } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useViewer } from '../../contexts/ViewerContext';
@@ -14,11 +14,11 @@ interface PdfViewerToolbarProps {
   currentPage?: number;
   totalPages?: number;
   onPageChange?: (page: number) => void;
-  
+
   // Dual page toggle (placeholder for now)
   dualPage?: boolean;
   onDualPageToggle?: () => void;
-  
+
   // Zoom controls (connected via ViewerContext)
   currentZoom?: number;
 }
@@ -33,7 +33,7 @@ export function PdfViewerToolbar({
 }: PdfViewerToolbarProps) {
   const { t } = useTranslation();
   const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate, registerImmediateScrollUpdate } = useViewer();
-  
+
   const scrollState = getScrollState();
   const zoomState = getZoomState();
   const [pageInput, setPageInput] = useState(scrollState.currentPage || currentPage);
@@ -151,7 +151,7 @@ export function PdfViewerToolbar({
             input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16 },
           }}
         />
-        
+
         <span style={{ fontWeight: 500, fontSize: 16 }}>
           / {scrollState.totalPages}
         </span>
@@ -229,4 +229,4 @@ export function PdfViewerToolbar({
         </Group>
       </Paper>
   );
-}
+}

frontend/src/components/viewer/SignatureAPIBridge.tsx

@@ -0,0 +1,370 @@
+import { useImperativeHandle, forwardRef, useEffect } from 'react';
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
+import { PdfAnnotationSubtype, PdfStandardFont, PdfTextAlignment, PdfVerticalAlignment, uuidV4 } from '@embedpdf/models';
+import { SignParameters } from '../../hooks/tools/sign/useSignParameters';
+import { useSignature } from '../../contexts/SignatureContext';
+
+export interface SignatureAPI {
+  addImageSignature: (signatureData: string, x: number, y: number, width: number, height: number, pageIndex: number) => void;
+  addTextSignature: (text: string, x: number, y: number, pageIndex: number) => void;
+  activateDrawMode: () => void;
+  activateSignaturePlacementMode: () => void;
+  activateDeleteMode: () => void;
+  deleteAnnotation: (annotationId: string, pageIndex: number) => void;
+  updateDrawSettings: (color: string, size: number) => void;
+  deactivateTools: () => void;
+  applySignatureFromParameters: (params: SignParameters) => void;
+  getPageAnnotations: (pageIndex: number) => Promise<any[]>;
+}
+
+export const SignatureAPIBridge = forwardRef<SignatureAPI>(function SignatureAPIBridge(_, ref) {
+  const { provides: annotationApi } = useAnnotationCapability();
+  const { signatureConfig, storeImageData, isPlacementMode } = useSignature();
+
+
+  // Enable keyboard deletion of selected annotations - only when in signature placement mode
+  useEffect(() => {
+    if (!annotationApi || !isPlacementMode) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        const selectedAnnotation = annotationApi.getSelectedAnnotation?.();
+
+        if (selectedAnnotation) {
+          const annotation = selectedAnnotation as any;
+          const pageIndex = annotation.object?.pageIndex || 0;
+          const id = annotation.object?.id;
+
+          // For STAMP annotations, ensure image data is preserved before deletion
+          if (annotation.object?.type === 13 && id) {
+            // Get current annotation data to ensure we have latest image data stored
+            const pageAnnotationsTask = annotationApi.getPageAnnotations?.({ pageIndex });
+            if (pageAnnotationsTask) {
+              pageAnnotationsTask.toPromise().then((pageAnnotations: any) => {
+                const currentAnn = pageAnnotations?.find((ann: any) => ann.id === id);
+                if (currentAnn && currentAnn.imageSrc) {
+                  // Ensure the image data is stored in our persistent store
+                  storeImageData(id, currentAnn.imageSrc);
+                }
+              }).catch(console.error);
+            }
+          }
+
+          // Use EmbedPDF's native deletion which should integrate with history
+          if ((annotationApi as any).deleteSelected) {
+            (annotationApi as any).deleteSelected();
+          } else {
+            // Fallback to direct deletion - less ideal for history
+            if (id) {
+              annotationApi.deleteAnnotation(pageIndex, id);
+            }
+          }
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [annotationApi, storeImageData, isPlacementMode]);
+
+  useImperativeHandle(ref, () => ({
+    addImageSignature: (signatureData: string, x: number, y: number, width: number, height: number, pageIndex: number) => {
+      if (!annotationApi) return;
+
+      // Create image stamp annotation with proper image data
+
+      const annotationId = uuidV4();
+
+      // Store image data in our persistent store
+      storeImageData(annotationId, signatureData);
+
+      annotationApi.createAnnotation(pageIndex, {
+        type: PdfAnnotationSubtype.STAMP,
+        rect: {
+          origin: { x, y },
+          size: { width, height }
+        },
+        author: 'Digital Signature',
+        subject: 'Digital Signature',
+        pageIndex: pageIndex,
+        id: annotationId,
+        created: new Date(),
+        // Store image data in multiple places to ensure history captures it
+        imageSrc: signatureData,
+        contents: signatureData, // Some annotation systems use contents
+        data: signatureData, // Try data field
+        imageData: signatureData, // Try imageData field
+        appearance: signatureData // Try appearance field
+      });
+    },
+
+    addTextSignature: (text: string, x: number, y: number, pageIndex: number) => {
+      if (!annotationApi) return;
+
+      // Create text annotation for signature
+      annotationApi.createAnnotation(pageIndex, {
+        type: PdfAnnotationSubtype.FREETEXT,
+        rect: {
+          origin: { x, y },
+          size: { width: 200, height: 50 }
+        },
+        contents: text,
+        author: 'Digital Signature',
+        fontSize: 16,
+        fontColor: '#000000',
+        fontFamily: PdfStandardFont.Helvetica,
+        textAlign: PdfTextAlignment.Left,
+        verticalAlign: PdfVerticalAlignment.Top,
+        opacity: 1,
+        pageIndex: pageIndex,
+        id: uuidV4(),
+        created: new Date(),
+        customData: {
+          signatureText: text,
+          signatureType: 'text'
+        }
+      });
+    },
+
+    activateDrawMode: () => {
+      if (!annotationApi) return;
+
+      // Activate the built-in ink tool for drawing
+      annotationApi.setActiveTool('ink');
+
+      // Set default ink tool properties (black color, 2px width)
+      const activeTool = annotationApi.getActiveTool();
+      if (activeTool && activeTool.id === 'ink') {
+        annotationApi.setToolDefaults('ink', {
+          color: '#000000',
+          thickness: 2,
+          lineWidth: 2,
+          strokeWidth: 2,
+          width: 2
+        });
+      }
+    },
+
+    activateSignaturePlacementMode: () => {
+      if (!annotationApi || !signatureConfig) return;
+
+      try {
+        if (signatureConfig.signatureType === 'text' && signatureConfig.signerName) {
+          // Try different tool names for text annotations
+          const textToolNames = ['freetext', 'text', 'textbox', 'annotation-text'];
+          let activatedTool = null;
+
+          for (const toolName of textToolNames) {
+            annotationApi.setActiveTool(toolName);
+            const tool = annotationApi.getActiveTool();
+
+            if (tool && tool.id === toolName) {
+              activatedTool = tool;
+              annotationApi.setToolDefaults(toolName, {
+                contents: signatureConfig.signerName,
+                fontSize: signatureConfig.fontSize || 16,
+                fontFamily: signatureConfig.fontFamily === 'Times-Roman' ? PdfStandardFont.Times_Roman :
+                          signatureConfig.fontFamily === 'Courier' ? PdfStandardFont.Courier :
+                          PdfStandardFont.Helvetica,
+                fontColor: '#000000',
+              });
+              break;
+            }
+          }
+
+          if (!activatedTool) {
+            // Fallback: create a simple text image as stamp
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+              const fontSize = signatureConfig.fontSize || 16;
+              const fontFamily = signatureConfig.fontFamily || 'Helvetica';
+
+              canvas.width = Math.max(200, signatureConfig.signerName.length * fontSize * 0.6);
+              canvas.height = fontSize + 20;
+              ctx.fillStyle = '#000000';
+              ctx.font = `${fontSize}px ${fontFamily}`;
+              ctx.textAlign = 'left';
+              ctx.textBaseline = 'middle';
+              ctx.fillText(signatureConfig.signerName, 10, canvas.height / 2);
+              const dataURL = canvas.toDataURL();
+
+              annotationApi.setActiveTool('stamp');
+              const stampTool = annotationApi.getActiveTool();
+              if (stampTool && stampTool.id === 'stamp') {
+                annotationApi.setToolDefaults('stamp', {
+                  imageSrc: dataURL,
+                  subject: `Text Signature - ${signatureConfig.signerName}`,
+                });
+              }
+            }
+          }
+        } else if (signatureConfig.signatureData) {
+          // Use stamp tool for image/canvas signatures
+          annotationApi.setActiveTool('stamp');
+          const activeTool = annotationApi.getActiveTool();
+          if (activeTool && activeTool.id === 'stamp') {
+            annotationApi.setToolDefaults('stamp', {
+              imageSrc: signatureConfig.signatureData,
+              subject: `Digital Signature - ${signatureConfig.reason || 'Document signing'}`,
+            });
+          }
+        }
+      } catch (error) {
+        console.error('Error activating signature tool:', error);
+      }
+    },
+
+    updateDrawSettings: (color: string, size: number) => {
+      if (!annotationApi) return;
+
+      // Always update ink tool defaults - use multiple property names for compatibility
+      annotationApi.setToolDefaults('ink', {
+        color: color,
+        thickness: size,
+        lineWidth: size,
+        strokeWidth: size,
+        width: size
+      });
+
+      // Force reactivate ink tool to ensure new settings take effect
+      annotationApi.setActiveTool(null); // Deactivate first
+      setTimeout(() => {
+        annotationApi.setActiveTool('ink'); // Reactivate with new settings
+      }, 50);
+    },
+
+    activateDeleteMode: () => {
+      if (!annotationApi) return;
+      // Activate selection tool to allow selecting and deleting annotations
+      // Users can click annotations to select them, then press Delete key or right-click to delete
+      annotationApi.setActiveTool('select');
+    },
+
+    deleteAnnotation: (annotationId: string, pageIndex: number) => {
+      if (!annotationApi) return;
+
+      // Before deleting, try to preserve image data for potential undo
+      const pageAnnotationsTask = annotationApi.getPageAnnotations?.({ pageIndex });
+      if (pageAnnotationsTask) {
+        pageAnnotationsTask.toPromise().then((pageAnnotations: any) => {
+          const annotation = pageAnnotations?.find((ann: any) => ann.id === annotationId);
+          if (annotation && annotation.type === 13 && annotation.imageSrc) {
+            // Store image data before deletion
+            storeImageData(annotationId, annotation.imageSrc);
+          }
+        }).catch(console.error);
+      }
+
+      // Delete specific annotation by ID
+      annotationApi.deleteAnnotation(pageIndex, annotationId);
+    },
+
+    deactivateTools: () => {
+      if (!annotationApi) return;
+      annotationApi.setActiveTool(null);
+    },
+
+    applySignatureFromParameters: (params: SignParameters) => {
+      if (!annotationApi || !params.signaturePosition) return;
+
+      const { x, y, width, height, page } = params.signaturePosition;
+
+      switch (params.signatureType) {
+        case 'image':
+          if (params.signatureData) {
+            const annotationId = uuidV4();
+
+            // Store image data in our persistent store
+            storeImageData(annotationId, params.signatureData);
+
+            annotationApi.createAnnotation(page, {
+              type: PdfAnnotationSubtype.STAMP,
+              rect: {
+                origin: { x, y },
+                size: { width, height }
+              },
+              author: 'Digital Signature',
+              subject: `Digital Signature - ${params.reason || 'Document signing'}`,
+              pageIndex: page,
+              id: annotationId,
+              created: new Date(),
+              // Store image data in multiple places to ensure history captures it
+              imageSrc: params.signatureData,
+              contents: params.signatureData, // Some annotation systems use contents
+              data: params.signatureData, // Try data field
+              imageData: params.signatureData, // Try imageData field
+              appearance: params.signatureData // Try appearance field
+            });
+
+            // Switch to select mode after placing signature so it can be easily deleted
+            setTimeout(() => {
+              annotationApi.setActiveTool('select');
+            }, 100);
+          }
+          break;
+
+        case 'text':
+          if (params.signerName) {
+            annotationApi.createAnnotation(page, {
+              type: PdfAnnotationSubtype.FREETEXT,
+              rect: {
+                origin: { x, y },
+                size: { width, height }
+              },
+              contents: params.signerName,
+              author: 'Digital Signature',
+              fontSize: 16,
+              fontColor: '#000000',
+              fontFamily: PdfStandardFont.Helvetica,
+              textAlign: PdfTextAlignment.Left,
+              verticalAlign: PdfVerticalAlignment.Top,
+              opacity: 1,
+              pageIndex: page,
+              id: uuidV4(),
+              created: new Date(),
+              customData: {
+                signatureText: params.signerName,
+                signatureType: 'text'
+              }
+            });
+
+            // Switch to select mode after placing signature so it can be easily deleted
+            setTimeout(() => {
+              annotationApi.setActiveTool('select');
+            }, 100);
+          }
+          break;
+
+        case 'draw':
+          // For draw mode, we activate the tool and let user draw
+          annotationApi.setActiveTool('ink');
+          break;
+      }
+    },
+
+    getPageAnnotations: async (pageIndex: number): Promise<any[]> => {
+      if (!annotationApi || !annotationApi.getPageAnnotations) {
+        console.warn('getPageAnnotations not available');
+        return [];
+      }
+
+      try {
+        const pageAnnotationsTask = annotationApi.getPageAnnotations({ pageIndex });
+        if (pageAnnotationsTask && pageAnnotationsTask.toPromise) {
+          const annotations = await pageAnnotationsTask.toPromise();
+          return annotations || [];
+        }
+        return [];
+      } catch (error) {
+        console.error(`Error getting annotations for page ${pageIndex}:`, error);
+        return [];
+      }
+    },
+  }), [annotationApi, signatureConfig]);
+
+
+  return null; // This is a bridge component with no UI
+});
+
+SignatureAPIBridge.displayName = 'SignatureAPIBridge';

frontend/src/components/viewer/ThumbnailSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Box, ScrollArea } from '@mantine/core';
 import { useViewer } from '../../contexts/ViewerContext';
 
@@ -25,7 +25,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
       });
       setThumbnails({});
     }
-  }, [visible, thumbnails]);
+  }, [visible]); // Remove thumbnails from dependency to prevent infinite loop
 
   // Generate thumbnails when sidebar becomes visible
   useEffect(() => {

frontend/src/components/viewer/Viewer.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import EmbedPdfViewer from './EmbedPdfViewer';
 
 export interface ViewerProps {
@@ -13,4 +12,4 @@ const Viewer = (props: ViewerProps) => {
   return <EmbedPdfViewer {...props} />;
 };
 
-export default Viewer;
+export default Viewer;

frontend/src/constants/splitConstants.ts

@@ -22,7 +22,7 @@ export const ENDPOINTS = {
 export type SplitMethod = typeof SPLIT_METHODS[keyof typeof SPLIT_METHODS];
 export const isSplitMethod = (value: string | null): value is SplitMethod => {
   return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
-}
+};
 
 import { CardOption } from '../components/shared/CardSelector';
 

frontend/src/contexts/FileContext.tsx

@@ -12,7 +12,7 @@
  * Memory management handled by FileLifecycleManager (PDF.js cleanup, blob URL revocation).
  */
 
-import React, { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useReducer, useCallback, useEffect, useRef, useMemo } from 'react';
 import {
   FileContextProviderProps,
   FileContextSelectors,
@@ -76,7 +76,7 @@ function FileContextInner({
     const currentSelection = stateRef.current.ui.selectedFileIds;
     const newFileIds = stirlingFiles.map(stirlingFile => stirlingFile.fileId);
     dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds: [...currentSelection, ...newFileIds] } });
-  }
+  };
 
   // File operations using unified addFiles helper with persistence
   const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean }): Promise<StirlingFile[]> => {

frontend/src/contexts/NavigationContext.tsx

@@ -109,16 +109,34 @@ export const NavigationProvider: React.FC<{
 
   const actions: NavigationContextActions = {
     setWorkbench: useCallback((workbench: WorkbenchType) => {
-      dispatch({ type: 'SET_WORKBENCH', payload: { workbench } });
-    }, []),
+      // If we're leaving pageEditor workbench and have unsaved changes, request navigation
+      if (state.workbench === 'pageEditor' && workbench !== 'pageEditor' && state.hasUnsavedChanges) {
+        const performWorkbenchChange = () => {
+          dispatch({ type: 'SET_WORKBENCH', payload: { workbench } });
+        };
+        dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: performWorkbenchChange } });
+        dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+      } else {
+        dispatch({ type: 'SET_WORKBENCH', payload: { workbench } });
+      }
+    }, [state.workbench, state.hasUnsavedChanges]),
 
     setSelectedTool: useCallback((toolId: ToolId | null) => {
       dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolId } });
     }, []),
 
     setToolAndWorkbench: useCallback((toolId: ToolId | null, workbench: WorkbenchType) => {
-      dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId, workbench } });
-    }, []),
+      // If we're leaving pageEditor workbench and have unsaved changes, request navigation
+      if (state.workbench === 'pageEditor' && workbench !== 'pageEditor' && state.hasUnsavedChanges) {
+        const performWorkbenchChange = () => {
+          dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId, workbench } });
+        };
+        dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: performWorkbenchChange } });
+        dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+      } else {
+        dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId, workbench } });
+      }
+    }, [state.workbench, state.hasUnsavedChanges]),
 
     setHasUnsavedChanges: useCallback((hasChanges: boolean) => {
       dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });

frontend/src/contexts/SidebarContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef, useMemo } from 'react';
+import { createContext, useContext, useState, useRef, useMemo } from 'react';
 import { SidebarState, SidebarRefs, SidebarContextValue, SidebarProviderProps } from '../types/sidebar';
 
 const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
@@ -7,7 +7,7 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
   // All sidebar state management
   const quickAccessRef = useRef<HTMLDivElement>(null);
   const toolPanelRef = useRef<HTMLDivElement>(null);
-  
+
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
   const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
   const [readerMode, setReaderMode] = useState(false);
@@ -44,4 +44,4 @@ export function useSidebarContext(): SidebarContextValue {
     throw new Error('useSidebarContext must be used within a SidebarProvider');
   }
   return context;
-} 
+}

frontend/src/contexts/SignatureContext.tsx

@@ -0,0 +1,178 @@
+import React, { createContext, useContext, useState, ReactNode, useCallback, useRef } from 'react';
+import { SignParameters } from '../hooks/tools/sign/useSignParameters';
+import { SignatureAPI } from '../components/viewer/SignatureAPIBridge';
+import { HistoryAPI } from '../components/viewer/HistoryAPIBridge';
+
+// Signature state interface
+interface SignatureState {
+  // Current signature configuration from the tool
+  signatureConfig: SignParameters | null;
+  // Whether we're in signature placement mode
+  isPlacementMode: boolean;
+  // Whether signatures have been applied (allows export)
+  signaturesApplied: boolean;
+}
+
+// Signature actions interface
+interface SignatureActions {
+  setSignatureConfig: (config: SignParameters | null) => void;
+  setPlacementMode: (enabled: boolean) => void;
+  activateDrawMode: () => void;
+  deactivateDrawMode: () => void;
+  activateSignaturePlacementMode: () => void;
+  activateDeleteMode: () => void;
+  updateDrawSettings: (color: string, size: number) => void;
+  undo: () => void;
+  redo: () => void;
+  storeImageData: (id: string, data: string) => void;
+  getImageData: (id: string) => string | undefined;
+  setSignaturesApplied: (applied: boolean) => void;
+}
+
+// Combined context interface
+interface SignatureContextValue extends SignatureState, SignatureActions {
+  signatureApiRef: React.RefObject<SignatureAPI | null>;
+  historyApiRef: React.RefObject<HistoryAPI | null>;
+}
+
+// Create context
+const SignatureContext = createContext<SignatureContextValue | undefined>(undefined);
+
+// Initial state
+const initialState: SignatureState = {
+  signatureConfig: null,
+  isPlacementMode: false,
+  signaturesApplied: true, // Start as true (no signatures placed yet)
+};
+
+// Provider component
+export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [state, setState] = useState<SignatureState>(initialState);
+  const signatureApiRef = useRef<SignatureAPI>(null);
+  const historyApiRef = useRef<HistoryAPI>(null);
+  const imageDataStore = useRef<Map<string, string>>(new Map());
+
+  // Actions
+  const setSignatureConfig = useCallback((config: SignParameters | null) => {
+    setState(prev => ({
+      ...prev,
+      signatureConfig: config,
+    }));
+  }, []);
+
+  const setPlacementMode = useCallback((enabled: boolean) => {
+    setState(prev => ({
+      ...prev,
+      isPlacementMode: enabled,
+    }));
+  }, []);
+
+  const activateDrawMode = useCallback(() => {
+    if (signatureApiRef.current) {
+      signatureApiRef.current.activateDrawMode();
+      setPlacementMode(true);
+      // Mark signatures as not applied when entering draw mode
+      setState(prev => ({ ...prev, signaturesApplied: false }));
+    }
+  }, [setPlacementMode]);
+
+  const deactivateDrawMode = useCallback(() => {
+    if (signatureApiRef.current) {
+      signatureApiRef.current.deactivateTools();
+      setPlacementMode(false);
+    }
+  }, [setPlacementMode]);
+
+  const activateSignaturePlacementMode = useCallback(() => {
+    if (signatureApiRef.current) {
+      signatureApiRef.current.activateSignaturePlacementMode();
+      setPlacementMode(true);
+      // Mark signatures as not applied when placing new signatures
+      setState(prev => ({ ...prev, signaturesApplied: false }));
+    }
+  }, [setPlacementMode]);
+
+  const activateDeleteMode = useCallback(() => {
+    if (signatureApiRef.current) {
+      signatureApiRef.current.activateDeleteMode();
+      setPlacementMode(true);
+    }
+  }, [setPlacementMode]);
+
+  const updateDrawSettings = useCallback((color: string, size: number) => {
+    if (signatureApiRef.current) {
+      signatureApiRef.current.updateDrawSettings(color, size);
+    }
+  }, []);
+
+  const undo = useCallback(() => {
+    if (historyApiRef.current) {
+      historyApiRef.current.undo();
+    }
+  }, []);
+
+  const redo = useCallback(() => {
+    if (historyApiRef.current) {
+      historyApiRef.current.redo();
+    }
+  }, []);
+
+  const storeImageData = useCallback((id: string, data: string) => {
+    imageDataStore.current.set(id, data);
+  }, []);
+
+  const getImageData = useCallback((id: string) => {
+    return imageDataStore.current.get(id);
+  }, []);
+
+  const setSignaturesApplied = useCallback((applied: boolean) => {
+    setState(prev => ({
+      ...prev,
+      signaturesApplied: applied,
+    }));
+  }, []);
+
+  // No auto-activation - all modes use manual buttons
+
+  const contextValue: SignatureContextValue = {
+    ...state,
+    signatureApiRef,
+    historyApiRef,
+    setSignatureConfig,
+    setPlacementMode,
+    activateDrawMode,
+    deactivateDrawMode,
+    activateSignaturePlacementMode,
+    activateDeleteMode,
+    updateDrawSettings,
+    undo,
+    redo,
+    storeImageData,
+    getImageData,
+    setSignaturesApplied,
+  };
+
+  return (
+    <SignatureContext.Provider value={contextValue}>
+      {children}
+    </SignatureContext.Provider>
+  );
+};
+
+// Hook to use signature context
+export const useSignature = (): SignatureContextValue => {
+  const context = useContext(SignatureContext);
+  if (context === undefined) {
+    throw new Error('useSignature must be used within a SignatureProvider');
+  }
+  return context;
+};
+
+// Hook for components that need to check if signature mode is active
+export const useSignatureMode = () => {
+  const context = useContext(SignatureContext);
+  return {
+    isSignatureModeActive: context?.isPlacementMode || false,
+    hasSignatureConfig: context?.signatureConfig !== null,
+  };
+};

frontend/src/contexts/ToolWorkflowContext.tsx

@@ -17,7 +17,7 @@ import { filterToolRegistryByQuery } from '../utils/toolSearch';
 interface ToolWorkflowState {
   // UI State
   sidebarsVisible: boolean;
-  leftPanelView: 'toolPicker' | 'toolContent';
+  leftPanelView: 'toolPicker' | 'toolContent' | 'hidden';
   readerMode: boolean;
 
   // File/Preview State
@@ -31,7 +31,7 @@ interface ToolWorkflowState {
 // Actions
 type ToolWorkflowAction =
   | { type: 'SET_SIDEBARS_VISIBLE'; payload: boolean }
-  | { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' }
+  | { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' | 'hidden' }
   | { type: 'SET_READER_MODE'; payload: boolean }
   | { type: 'SET_PREVIEW_FILE'; payload: File | null }
   | { type: 'SET_PAGE_EDITOR_FUNCTIONS'; payload: PageEditorFunctions | null }
@@ -80,7 +80,7 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
 
   // UI Actions
   setSidebarsVisible: (visible: boolean) => void;
-  setLeftPanelView: (view: 'toolPicker' | 'toolContent') => void;
+  setLeftPanelView: (view: 'toolPicker' | 'toolContent' | 'hidden') => void;
   setReaderMode: (mode: boolean) => void;
   setPreviewFile: (file: File | null) => void;
   setPageEditorFunctions: (functions: PageEditorFunctions | null) => void;
@@ -96,7 +96,7 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
   resetTool: (toolId: string) => void;
 
   // Workflow Actions (compound actions)
-  handleToolSelect: (toolId: string) => void;
+  handleToolSelect: (toolId: ToolId) => void;
   handleBackToTools: () => void;
   handleReaderToggle: () => void;
 
@@ -136,7 +136,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     dispatch({ type: 'SET_SIDEBARS_VISIBLE', payload: visible });
   }, []);
 
-  const setLeftPanelView = useCallback((view: 'toolPicker' | 'toolContent') => {
+  const setLeftPanelView = useCallback((view: 'toolPicker' | 'toolContent' | 'hidden') => {
     dispatch({ type: 'SET_LEFT_PANEL_VIEW', payload: view });
   }, []);
 
@@ -180,7 +180,26 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   }, []); // Empty dependency array makes this stable
 
   // Workflow actions (compound actions that coordinate multiple state changes)
-  const handleToolSelect = useCallback((toolId: string) => {
+  const handleToolSelect = useCallback((toolId: ToolId) => {
+    // Handle read tool selection - should behave exactly like QuickAccessBar read button
+    if (toolId === 'read') {
+      setReaderMode(true);
+      actions.setSelectedTool('read');
+      actions.setWorkbench('viewer');
+      setSearchQuery('');
+      return;
+    }
+
+    // Handle multiTool selection - enable page editor workbench and hide left panel
+    if (toolId === 'multiTool') {
+      setReaderMode(false);
+      setLeftPanelView('hidden');
+      actions.setSelectedTool('multiTool');
+      actions.setWorkbench('pageEditor');
+      setSearchQuery('');
+      return;
+    }
+
     // Set the selected tool and determine the appropriate workbench
     const validToolId = isValidToolId(toolId) ? toolId : null;
     actions.setSelectedTool(validToolId);
@@ -195,19 +214,8 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
 
     // Clear search query when selecting a tool
     setSearchQuery('');
-
-    // Handle view switching logic
-    if (toolId === 'allTools' || toolId === 'read' || toolId === 'view-pdf') {
-      setLeftPanelView('toolPicker');
-      if (toolId === 'read' || toolId === 'view-pdf') {
-        setReaderMode(true);
-      } else {
-        setReaderMode(false);
-      }
-    } else {
-      setLeftPanelView('toolContent');
-      setReaderMode(false); // Disable read mode when selecting tools
-    }
+    setLeftPanelView('toolContent');
+    setReaderMode(false); // Disable read mode when selecting tools
   }, [actions, getSelectedTool, setLeftPanelView, setReaderMode, setSearchQuery]);
 
   const handleBackToTools = useCallback(() => {
@@ -227,8 +235,8 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   }, [toolRegistry, state.searchQuery]);
 
   const isPanelVisible = useMemo(() =>
-    state.sidebarsVisible && !state.readerMode,
-    [state.sidebarsVisible, state.readerMode]
+    state.sidebarsVisible && !state.readerMode && state.leftPanelView !== 'hidden',
+    [state.sidebarsVisible, state.readerMode, state.leftPanelView]
   );
 
   // URL sync for proper tool navigation

frontend/src/contexts/ViewerContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useState, ReactNode, useRef } from 'react';
 import { SpreadMode } from '@embedpdf/plugin-spread/react';
+import { useNavigation } from './NavigationContext';
 
 // Bridge API interfaces - these match what the bridges provide
 interface ScrollAPIWrapper {
@@ -51,6 +52,11 @@ interface ThumbnailAPIWrapper {
   renderThumb: (pageIndex: number, scale: number) => { toPromise: () => Promise<Blob> };
 }
 
+interface ExportAPIWrapper {
+  download: () => void;
+  saveAsCopy: () => { toPromise: () => Promise<ArrayBuffer> };
+}
+
 
 // State interfaces - represent the shape of data from each bridge
 interface ScrollState {
@@ -93,6 +99,10 @@ interface SearchState {
   activeIndex: number;
 }
 
+interface ExportState {
+  canExport: boolean;
+}
+
 // Bridge registration interface - bridges register with state and API
 interface BridgeRef<TState = unknown, TApi = unknown> {
   state: TState;
@@ -122,6 +132,7 @@ interface ViewerContextType {
   getRotationState: () => RotationState;
   getSearchState: () => SearchState;
   getThumbnailAPI: () => ThumbnailAPIWrapper | null;
+  getExportState: () => ExportState;
 
   // Immediate update callbacks
   registerImmediateZoomUpdate: (callback: (percent: number) => void) => void;
@@ -179,6 +190,11 @@ interface ViewerContextType {
     clear: () => void;
   };
 
+  exportActions: {
+    download: () => void;
+    saveAsCopy: () => Promise<ArrayBuffer | null>;
+  };
+
   // Bridge registration - internal use by bridges  
   registerBridge: (type: string, ref: BridgeRef) => void;
 }
@@ -193,6 +209,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   // UI state - only state directly managed by this context
   const [isThumbnailSidebarVisible, setIsThumbnailSidebarVisible] = useState(false);
 
+  // Get current navigation state to check if we're in sign mode
+  useNavigation();
+
   // Bridge registry - bridges register their state and APIs here
   const bridgeRefs = useRef({
     scroll: null as BridgeRef<ScrollState, ScrollAPIWrapper> | null,
@@ -203,6 +222,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     spread: null as BridgeRef<SpreadState, SpreadAPIWrapper> | null,
     rotation: null as BridgeRef<RotationState, RotationAPIWrapper> | null,
     thumbnail: null as BridgeRef<unknown, ThumbnailAPIWrapper> | null,
+    export: null as BridgeRef<ExportState, ExportAPIWrapper> | null,
   });
 
   // Immediate zoom callback for responsive display updates
@@ -238,6 +258,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
       case 'thumbnail':
         bridgeRefs.current.thumbnail = ref as BridgeRef<unknown, ThumbnailAPIWrapper>;
         break;
+      case 'export':
+        bridgeRefs.current.export = ref as BridgeRef<ExportState, ExportAPIWrapper>;
+        break;
     }
   };
 
@@ -278,6 +301,10 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     return bridgeRefs.current.thumbnail?.api || null;
   };
 
+  const getExportState = (): ExportState => {
+    return bridgeRefs.current.export?.state || { canExport: false };
+  };
+
   // Action handlers - call APIs directly
   const scrollActions = {
     scrollToPage: (page: number) => {
@@ -473,6 +500,28 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     }
   };
 
+  const exportActions = {
+    download: () => {
+      const api = bridgeRefs.current.export?.api;
+      if (api?.download) {
+        api.download();
+      }
+    },
+    saveAsCopy: async () => {
+      const api = bridgeRefs.current.export?.api;
+      if (api?.saveAsCopy) {
+        try {
+          const result = api.saveAsCopy();
+          return await result.toPromise();
+        } catch (error) {
+          console.error('Failed to save PDF copy:', error);
+          return null;
+        }
+      }
+      return null;
+    }
+  };
+
   const registerImmediateZoomUpdate = (callback: (percent: number) => void) => {
     immediateZoomUpdateCallback.current = callback;
   };
@@ -507,6 +556,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     getRotationState,
     getSearchState,
     getThumbnailAPI,
+    getExportState,
 
     // Immediate updates
     registerImmediateZoomUpdate,
@@ -522,6 +572,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     spreadActions,
     rotationActions,
     searchActions,
+    exportActions,
 
     // Bridge registration
     registerBridge,

frontend/src/data/useTranslatedToolRegistry.tsx

@@ -10,23 +10,29 @@ import AddPassword from "../tools/AddPassword";
 import ChangePermissions from "../tools/ChangePermissions";
 import RemoveBlanks from "../tools/RemoveBlanks";
 import RemovePages from "../tools/RemovePages";
+import ReorganizePages from "../tools/ReorganizePages";
+import { reorganizePagesOperationConfig } from "../hooks/tools/reorganizePages/useReorganizePagesOperation";
 import RemovePassword from "../tools/RemovePassword";
 import { SubcategoryId, ToolCategoryId, ToolRegistry } from "./toolsTaxonomy";
 import { getSynonyms } from "../utils/toolSynonyms";
 import AddWatermark from "../tools/AddWatermark";
 import AddStamp from "../tools/AddStamp";
+import AddAttachments from "../tools/AddAttachments";
 import Merge from '../tools/Merge';
 import Repair from "../tools/Repair";
 import AutoRename from "../tools/AutoRename";
 import SingleLargePage from "../tools/SingleLargePage";
+import PageLayout from "../tools/PageLayout";
 import UnlockPdfForms from "../tools/UnlockPdfForms";
 import RemoveCertificateSign from "../tools/RemoveCertificateSign";
+import RemoveImage from "../tools/RemoveImage";
 import CertSign from "../tools/CertSign";
 import BookletImposition from "../tools/BookletImposition";
 import Flatten from "../tools/Flatten";
 import Rotate from "../tools/Rotate";
 import ChangeMetadata from "../tools/ChangeMetadata";
 import Crop from "../tools/Crop";
+import Sign from "../tools/Sign";
 import { compressOperationConfig } from "../hooks/tools/compress/useCompressOperation";
 import { splitOperationConfig } from "../hooks/tools/split/useSplitOperation";
 import { addPasswordOperationConfig } from "../hooks/tools/addPassword/useAddPasswordOperation";
@@ -35,6 +41,7 @@ import { sanitizeOperationConfig } from "../hooks/tools/sanitize/useSanitizeOper
 import { repairOperationConfig } from "../hooks/tools/repair/useRepairOperation";
 import { addWatermarkOperationConfig } from "../hooks/tools/addWatermark/useAddWatermarkOperation";
 import { addStampOperationConfig } from "../components/tools/addStamp/useAddStampOperation";
+import { addAttachmentsOperationConfig } from "../hooks/tools/addAttachments/useAddAttachmentsOperation";
 import { unlockPdfFormsOperationConfig } from "../hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation";
 import { singleLargePageOperationConfig } from "../hooks/tools/singleLargePage/useSingleLargePageOperation";
 import { ocrOperationConfig } from "../hooks/tools/ocr/useOCROperation";
@@ -49,7 +56,11 @@ import { flattenOperationConfig } from "../hooks/tools/flatten/useFlattenOperati
 import { redactOperationConfig } from "../hooks/tools/redact/useRedactOperation";
 import { rotateOperationConfig } from "../hooks/tools/rotate/useRotateOperation";
 import { changeMetadataOperationConfig } from "../hooks/tools/changeMetadata/useChangeMetadataOperation";
+import { signOperationConfig } from "../hooks/tools/sign/useSignOperation";
 import { cropOperationConfig } from "../hooks/tools/crop/useCropOperation";
+import { removeAnnotationsOperationConfig } from "../hooks/tools/removeAnnotations/useRemoveAnnotationsOperation";
+import { extractImagesOperationConfig } from "../hooks/tools/extractImages/useExtractImagesOperation";
+import { replaceColorOperationConfig } from "../hooks/tools/replaceColor/useReplaceColorOperation";
 import CompressSettings from "../components/tools/compress/CompressSettings";
 import SplitSettings from "../components/tools/split/SplitSettings";
 import AddPasswordSettings from "../components/tools/addPassword/AddPasswordSettings";
@@ -68,6 +79,7 @@ import RedactSingleStepSettings from "../components/tools/redact/RedactSingleSte
 import RotateSettings from "../components/tools/rotate/RotateSettings";
 import Redact from "../tools/Redact";
 import AdjustPageScale from "../tools/AdjustPageScale";
+import ReplaceColor from "../tools/ReplaceColor";
 import ScannerImageSplit from "../tools/ScannerImageSplit";
 import { ToolId } from "../types/toolId";
 import MergeSettings from '../components/tools/merge/MergeSettings';
@@ -76,7 +88,14 @@ import { scannerImageSplitOperationConfig } from "../hooks/tools/scannerImageSpl
 import AdjustPageScaleSettings from "../components/tools/adjustPageScale/AdjustPageScaleSettings";
 import ScannerImageSplitSettings from "../components/tools/scannerImageSplit/ScannerImageSplitSettings";
 import ChangeMetadataSingleStep from "../components/tools/changeMetadata/ChangeMetadataSingleStep";
+import SignSettings from "../components/tools/sign/SignSettings";
 import CropSettings from "../components/tools/crop/CropSettings";
+import RemoveAnnotations from "../tools/RemoveAnnotations";
+import RemoveAnnotationsSettings from "../components/tools/removeAnnotations/RemoveAnnotationsSettings";
+import PageLayoutSettings from "../components/tools/pageLayout/PageLayoutSettings";
+import ExtractImages from "../tools/ExtractImages";
+import ExtractImagesSettings from "../components/tools/extractImages/ExtractImagesSettings";
+import ReplaceColorSettings from "../components/tools/replaceColor/ReplaceColorSettings";
 
 const showPlaceholderTools = true; // Show all tools; grey out unavailable ones in UI
 
@@ -167,8 +186,32 @@ export function useFlatToolRegistry(): ToolRegistry {
 
   return useMemo(() => {
     const allTools: ToolRegistry = {
+      // Recommended Tools in order
+      multiTool: {
+        icon: <LocalIcon icon="dashboard-customize-rounded" width="1.5rem" height="1.5rem" />,
+        name: t("home.multiTool.title", "Multi-Tool"),
+        component: null,
+        workbench: "pageEditor",
+        description: t("home.multiTool.desc", "Use multiple tools on a single PDF document"),
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
+        maxFiles: -1,
+        synonyms: getSynonyms(t, "multiTool"),
+      },
+      merge: {
+        icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
+        name: t("home.merge.title", "Merge"),
+        component: Merge,
+        description: t("home.merge.desc", "Merge multiple PDFs into a single document"),
+        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
+        maxFiles: -1,
+        endpoints: ["merge-pdfs"],
+        operationConfig: mergeOperationConfig,
+        settingsComponent: MergeSettings,
+        synonyms: getSynonyms(t, "merge")
+      },
       // Signing
-
       certSign: {
         icon: <LocalIcon icon="workspace-premium-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.certSign.title", "Certificate Sign"),
@@ -185,10 +228,12 @@ export function useFlatToolRegistry(): ToolRegistry {
       sign: {
         icon: <LocalIcon icon="signature-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.sign.title", "Sign"),
-        component: null,
+        component: Sign,
         description: t("home.sign.desc", "Adds signature to PDF by drawing, text or image"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.SIGNING,
+        operationConfig: signOperationConfig,
+        settingsComponent: SignSettings,
         synonyms: getSynonyms(t, "sign")
       },
 
@@ -271,18 +316,6 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: UnlockPdfFormsSettings,
         synonyms: getSynonyms(t, "unlockPDFForms"),
       },
-      manageCertificates: {
-        icon: <LocalIcon icon="license-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.manageCertificates.title", "Manage Certificates"),
-        component: null,
-        description: t(
-          "home.manageCertificates.desc",
-          "Import, export, or delete digital certificate files used for signing PDFs."
-        ),
-        categoryId: ToolCategoryId.STANDARD_TOOLS,
-        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
-        synonyms: getSynonyms(t, "manageCertificates"),
-      },
       changePermissions: {
         icon: <LocalIcon icon="lock-outline" width="1.5rem" height="1.5rem" />,
         name: t("home.changePermissions.title", "Change Permissions"),
@@ -384,14 +417,15 @@ export function useFlatToolRegistry(): ToolRegistry {
       reorganizePages: {
         icon: <LocalIcon icon="move-down-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.reorganizePages.title", "Reorganize Pages"),
-        component: null,
-        workbench: "pageEditor",
+        component: ReorganizePages,
         description: t(
           "home.reorganizePages.desc",
           "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."
         ),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
+        endpoints: ["rearrange-pages"],
+        operationConfig: reorganizePagesOperationConfig,
         synonyms: getSynonyms(t, "reorganizePages")
       },
       scalePages: {
@@ -420,11 +454,13 @@ export function useFlatToolRegistry(): ToolRegistry {
       pageLayout: {
         icon: <LocalIcon icon="dashboard-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.pageLayout.title", "Multi-Page Layout"),
-        component: null,
-
+        component: PageLayout,
         description: t("home.pageLayout.desc", "Merge multiple pages of a PDF document into a single page"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
+        maxFiles: -1,
+        endpoints: ["multi-page-layout"],
+        settingsComponent: PageLayoutSettings,
         synonyms: getSynonyms(t, "pageLayout")
       },
       bookletImposition: {
@@ -455,12 +491,14 @@ export function useFlatToolRegistry(): ToolRegistry {
       addAttachments: {
         icon: <LocalIcon icon="attachment-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.addAttachments.title", "Add Attachments"),
-        component: null,
-
+        component: AddAttachments,
         description: t("home.addAttachments.desc", "Add or remove embedded files (attachments) to/from a PDF"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
-        synonyms: getSynonyms(t, "addAttachments")
+        synonyms: getSynonyms(t, "addAttachments"),
+        maxFiles: 1,
+        endpoints: ["add-attachments"],
+        operationConfig: addAttachmentsOperationConfig,
       },
 
       // Extraction
@@ -475,12 +513,16 @@ export function useFlatToolRegistry(): ToolRegistry {
         synonyms: getSynonyms(t, "extractPages")
       },
       extractImages: {
-        icon: <LocalIcon icon="filter-alt" width="1.5rem" height="1.5rem" />,
+        icon: <LocalIcon icon="photo-library-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.extractImages.title", "Extract Images"),
-        component: null,
+        component: ExtractImages,
         description: t("home.extractImages.desc", "Extract images from PDF documents"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.EXTRACTION,
+        maxFiles: -1,
+        endpoints: ["extract-images"],
+        operationConfig: extractImagesOperationConfig,
+        settingsComponent: ExtractImagesSettings,
         synonyms: getSynonyms(t, "extractImages")
       },
 
@@ -511,19 +553,25 @@ export function useFlatToolRegistry(): ToolRegistry {
       removeAnnotations: {
         icon: <LocalIcon icon="thread-unread-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.removeAnnotations.title", "Remove Annotations"),
-        component: null,
+        component: RemoveAnnotations,
         description: t("home.removeAnnotations.desc", "Remove annotations and comments from PDF documents"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.REMOVAL,
+        maxFiles: -1,
+        operationConfig: removeAnnotationsOperationConfig,
+        settingsComponent: RemoveAnnotationsSettings,
         synonyms: getSynonyms(t, "removeAnnotations")
       },
       removeImage: {
         icon: <LocalIcon icon="remove-selection-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.removeImage.title", "Remove Image"),
-        component: null,
-        description: t("home.removeImage.desc", "Remove images from PDF documents"),
+        name: t("home.removeImage.title", "Remove Images"),
+        component: RemoveImage,
+        description: t("home.removeImage.desc", "Remove all images from a PDF document"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.REMOVAL,
+        maxFiles: -1,
+        endpoints: ["remove-image-pdf"],
+        operationConfig: undefined,
         synonyms: getSynonyms(t, "removeImage"),
       },
       removePassword: {
@@ -581,24 +629,6 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.AUTOMATION,
         synonyms: getSynonyms(t, "autoRename"),
       },
-      autoSplitPDF: {
-        icon: <LocalIcon icon="split-scene-right-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.autoSplitPDF.title", "Auto Split Pages"),
-        component: null,
-        description: t("home.autoSplitPDF.desc", "Automatically split PDF pages based on content detection"),
-        categoryId: ToolCategoryId.ADVANCED_TOOLS,
-        subcategoryId: SubcategoryId.AUTOMATION,
-        synonyms: getSynonyms(t, "autoSplitPDF"),
-      },
-      autoSizeSplitPDF: {
-        icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.autoSizeSplitPDF.title", "Auto Split by Size/Count"),
-        component: null,
-        description: t("home.autoSizeSplitPDF.desc", "Automatically split PDFs by file size or page count"),
-        categoryId: ToolCategoryId.ADVANCED_TOOLS,
-        subcategoryId: SubcategoryId.AUTOMATION,
-        synonyms: getSynonyms(t, "autoSizeSplitPDF"),
-      },
 
       // Advanced Formatting
 
@@ -646,14 +676,18 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
         synonyms: getSynonyms(t, "overlayPdfs"),
       },
-      replaceColorPdf: {
+      replaceColor: {
         icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.replaceColorPdf.title", "Replace & Invert Color"),
-        component: null,
-        description: t("home.replaceColorPdf.desc", "Replace or invert colors in PDF documents"),
+        name: t("home.replaceColor.title", "Replace & Invert Color"),
+        component: ReplaceColor,
+        description: t("home.replaceColor.desc", "Replace or invert colors in PDF documents"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
-        synonyms: getSynonyms(t, "replaceColorPdf"),
+        maxFiles: -1,
+        endpoints: ["replace-invert-pdf"],
+        operationConfig: replaceColorOperationConfig,
+        settingsComponent: ReplaceColorSettings,
+        synonyms: getSynonyms(t, "replaceColor"),
       },
       addImage: {
         icon: <LocalIcon icon="image-rounded" width="1.5rem" height="1.5rem" />,
@@ -673,14 +707,14 @@ export function useFlatToolRegistry(): ToolRegistry {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
         synonyms: getSynonyms(t, "editTableOfContents"),
       },
-      fakeScan: {
+      scannerEffect: {
         icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.fakeScan.title", "Scanner Effect"),
+        name: t("home.scannerEffect.title", "Scanner Effect"),
         component: null,
-        description: t("home.fakeScan.desc", "Create a PDF that looks like it was scanned"),
+        description: t("home.scannerEffect.desc", "Create a PDF that looks like it was scanned"),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
-        synonyms: getSynonyms(t, "fakeScan"),
+        synonyms: getSynonyms(t, "scannerEffect"),
       },
 
       // Developer Tools
@@ -787,30 +821,7 @@ export function useFlatToolRegistry(): ToolRegistry {
         settingsComponent: ConvertSettings,
         synonyms: getSynonyms(t, "convert")
       },
-      merge: {
-        icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.merge.title", "Merge"),
-        component: Merge,
-        description: t("home.merge.desc", "Merge multiple PDFs into a single document"),
-        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
-        subcategoryId: SubcategoryId.GENERAL,
-        maxFiles: -1,
-        endpoints: ["merge-pdfs"],
-        operationConfig: mergeOperationConfig,
-        settingsComponent: MergeSettings,
-        synonyms: getSynonyms(t, "merge")
-      },
-      multiTool: {
-        icon: <LocalIcon icon="dashboard-customize-rounded" width="1.5rem" height="1.5rem" />,
-        name: t("home.multiTool.title", "Multi-Tool"),
-        component: null,
-        workbench: "pageEditor",
-        description: t("home.multiTool.desc", "Use multiple tools on a single PDF document"),
-        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
-        subcategoryId: SubcategoryId.GENERAL,
-        maxFiles: -1,
-        synonyms: getSynonyms(t, "multiTool"),
-      },
+
       ocr: {
         icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.ocr.title", "OCR"),

frontend/src/global.d.ts

@@ -18,6 +18,5 @@ declare module '../assets/material-symbols-icons.json' {
 }
 
 declare module 'pdfjs-dist/legacy/build/pdf.mjs'
-// TODO: Add proper EmbedPDF types for local submodule integration
 
 export {};

frontend/src/hooks/tools/addAttachments/useAddAttachmentsOperation.ts

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation, ToolOperationConfig, ToolType } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { AddAttachmentsParameters } from './useAddAttachmentsParameters';
+
+const buildFormData = (parameters: AddAttachmentsParameters, file: File): FormData => {
+  const formData = new FormData();
+
+  // Add the main PDF file (single file per request in singleFile mode)
+  if (file) {
+    formData.append("fileInput", file);
+  }
+
+  // Add attachment files
+  (parameters.attachments || []).forEach((attachment) => {
+    if (attachment) formData.append("attachments", attachment);
+  });
+
+  return formData;
+};
+
+// Operation configuration for automation
+export const addAttachmentsOperationConfig: ToolOperationConfig<AddAttachmentsParameters> = {
+  toolType: ToolType.singleFile,
+  buildFormData,
+  operationType: 'addAttachments',
+  endpoint: '/api/v1/misc/add-attachments',
+};
+
+export const useAddAttachmentsOperation = () => {
+  const { t } = useTranslation();
+
+  return useToolOperation<AddAttachmentsParameters>({
+    ...addAttachmentsOperationConfig,
+    getErrorMessage: createStandardErrorHandler(t('addAttachments.error.failed', 'An error occurred while adding attachments to the PDF.'))
+  });
+};

frontend/src/hooks/tools/addAttachments/useAddAttachmentsParameters.ts

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+export interface AddAttachmentsParameters {
+  attachments: File[];
+}
+
+const defaultParameters: AddAttachmentsParameters = {
+  attachments: []
+};
+
+export const useAddAttachmentsParameters = () => {
+  const [parameters, setParameters] = useState<AddAttachmentsParameters>(defaultParameters);
+
+  const updateParameter = <K extends keyof AddAttachmentsParameters>(
+    key: K,
+    value: AddAttachmentsParameters[K]
+  ) => {
+    setParameters(prev => ({ ...prev, [key]: value }));
+  };
+
+  const resetParameters = () => {
+    setParameters(defaultParameters);
+  };
+
+  const validateParameters = (): boolean => {
+    return parameters.attachments.length > 0;
+  };
+
+  return {
+    parameters,
+    updateParameter,
+    resetParameters,
+    validateParameters
+  };
+};

frontend/src/hooks/tools/convert/useConvertOperation.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import axios from 'axios';
+import apiClient from '../../../services/apiClient';
 import { useTranslation } from 'react-i18next';
 import { ConvertParameters, defaultParameters } from './useConvertParameters';
 import { createFileFromApiResponse } from '../../../utils/fileResponseUtils';
@@ -108,7 +108,7 @@ export const convertProcessor = async (
     for (const file of selectedFiles) {
       try {
         const formData = buildConvertFormData(parameters, [file]);
-        const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+        const response = await apiClient.post(endpoint, formData, { responseType: 'blob' });
 
         const convertedFile = createFileFromResponse(response.data, response.headers, file.name, parameters.toExtension);
 
@@ -120,7 +120,7 @@ export const convertProcessor = async (
   } else {
     // Batch processing for simple cases (image→PDF combine)
     const formData = buildConvertFormData(parameters, selectedFiles);
-    const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+    const response = await apiClient.post(endpoint, formData, { responseType: 'blob' });
 
     const baseFilename = selectedFiles.length === 1
       ? selectedFiles[0].name

frontend/src/hooks/tools/extractImages/useExtractImagesOperation.ts

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import { useToolOperation, ToolType } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { ExtractImagesParameters, defaultParameters } from './useExtractImagesParameters';
+import JSZip from 'jszip';
+
+// Static configuration that can be used by both the hook and automation executor
+export const buildExtractImagesFormData = (parameters: ExtractImagesParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append("fileInput", file);
+  formData.append("format", parameters.format);
+  formData.append("allowDuplicates", parameters.allowDuplicates.toString());
+  return formData;
+};
+
+// Response handler for extract-images which returns a ZIP file
+const extractImagesResponseHandler = async (responseData: Blob, _originalFiles: File[]): Promise<File[]> => {
+  const zip = new JSZip();
+  const zipContent = await zip.loadAsync(responseData);
+  const extractedFiles: File[] = [];
+
+  for (const [filename, file] of Object.entries(zipContent.files)) {
+    if (!file.dir) {
+      const blob = await file.async('blob');
+      const extractedFile = new File([blob], filename, { type: blob.type });
+      extractedFiles.push(extractedFile);
+    }
+  }
+
+  return extractedFiles;
+};
+
+// Static configuration object
+export const extractImagesOperationConfig = {
+  toolType: ToolType.singleFile,
+  buildFormData: buildExtractImagesFormData,
+  operationType: 'extractImages',
+  endpoint: '/api/v1/misc/extract-images',
+  defaultParameters,
+  // Extract-images returns a ZIP file containing multiple image files
+  responseHandler: extractImagesResponseHandler,
+} as const;
+
+export const useExtractImagesOperation = () => {
+  const { t } = useTranslation();
+
+  return useToolOperation<ExtractImagesParameters>({
+    ...extractImagesOperationConfig,
+    getErrorMessage: createStandardErrorHandler(t('extractImages.error.failed', 'An error occurred while extracting images from the PDF.'))
+  });
+};

frontend/src/hooks/tools/extractImages/useExtractImagesParameters.ts

@@ -0,0 +1,19 @@
+import { useBaseParameters } from '../shared/useBaseParameters';
+
+export interface ExtractImagesParameters {
+  format: 'png' | 'jpg' | 'gif';
+  allowDuplicates: boolean;
+}
+
+export const defaultParameters: ExtractImagesParameters = {
+  format: 'png',
+  allowDuplicates: false,
+};
+
+export const useExtractImagesParameters = () => {
+  return useBaseParameters<ExtractImagesParameters>({
+    defaultParameters,
+    endpointName: 'extract-images',
+    validateFn: () => true, // All parameters have valid defaults
+  });
+};