bottom button test

- Display both icon-only and text logos side by side in mobile header
- Use correct file paths: StirlingPDFLogoWhiteText/BlackText for text logos
- Add proper gap and sizing for both logo elements
- Remove single text span in favor of dual logo approach

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.github/scripts/check_language_json.py

@@ -0,0 +1,345 @@
+"""
+Author: Ludy87
+Description: This script processes JSON translation files for localization checks. It compares translation files in a branch with
+a reference file to ensure consistency. The script performs two main checks:
+1. Verifies that the number of translation keys in the translation files matches the reference file.
+2. Ensures that all keys in the translation files are present in the reference file and vice versa.
+
+The script also provides functionality to update the translation files to match the reference file by adding missing keys and
+adjusting the format.
+
+Usage:
+    python check_language_json.py --reference-file <path_to_reference_file> --branch <branch_name> [--actor <actor_name>] [--files <list_of_changed_files>]
+"""
+# Sample for Windows:
+# python .github/scripts/check_language_json.py --reference-file frontend/public/locales/en-GB/translation.json --branch "" --files frontend/public/locales/de-DE/translation.json frontend/public/locales/fr-FR/translation.json
+
+import copy
+import glob
+import os
+import argparse
+import re
+import json
+
+
+def find_duplicate_keys(file_path, keys=None, prefix=""):
+    """
+    Identifies duplicate keys in a JSON file (including nested keys).
+    :param file_path: Path to the JSON file.
+    :param keys: Dictionary to track keys (used for recursion).
+    :param prefix: Prefix for nested keys.
+    :return: List of tuples (key, first_occurrence_path, duplicate_path).
+    """
+    if keys is None:
+        keys = {}
+
+    duplicates = []
+
+    with open(file_path, "r", encoding="utf-8") as file:
+        data = json.load(file)
+
+    def process_dict(obj, current_prefix=""):
+        for key, value in obj.items():
+            full_key = f"{current_prefix}.{key}" if current_prefix else key
+
+            if isinstance(value, dict):
+                process_dict(value, full_key)
+            else:
+                if full_key in keys:
+                    duplicates.append((full_key, keys[full_key], full_key))
+                else:
+                    keys[full_key] = full_key
+
+    process_dict(data, prefix)
+    return duplicates
+
+
+# Maximum size for JSON files (e.g., 500 KB)
+MAX_FILE_SIZE = 500 * 1024
+
+
+def parse_json_file(file_path):
+    """
+    Parses a JSON translation file and returns a flat dictionary of all keys.
+    :param file_path: Path to the JSON file.
+    :return: Dictionary with flattened keys.
+    """
+    with open(file_path, "r", encoding="utf-8") as file:
+        data = json.load(file)
+
+    def flatten_dict(d, parent_key="", sep="."):
+        items = {}
+        for k, v in d.items():
+            new_key = f"{parent_key}{sep}{k}" if parent_key else k
+            if isinstance(v, dict):
+                items.update(flatten_dict(v, new_key, sep=sep))
+            else:
+                items[new_key] = v
+        return items
+
+    return flatten_dict(data)
+
+
+def unflatten_dict(d, sep="."):
+    """
+    Converts a flat dictionary with dot notation keys back to nested dict.
+    :param d: Flattened dictionary.
+    :param sep: Separator used in keys.
+    :return: Nested dictionary.
+    """
+    result = {}
+    for key, value in d.items():
+        parts = key.split(sep)
+        current = result
+        for part in parts[:-1]:
+            if part not in current:
+                current[part] = {}
+            current = current[part]
+        current[parts[-1]] = value
+    return result
+
+
+def write_json_file(file_path, updated_properties):
+    """
+    Writes updated properties back to the JSON file.
+    :param file_path: Path to the JSON file.
+    :param updated_properties: Dictionary of updated properties to write.
+    """
+    nested_data = unflatten_dict(updated_properties)
+
+    with open(file_path, "w", encoding="utf-8", newline="\n") as file:
+        json.dump(nested_data, file, ensure_ascii=False, indent=2)
+        file.write("\n")  # Add trailing newline
+
+
+def update_missing_keys(reference_file, file_list, branch=""):
+    """
+    Updates missing keys in the translation files based on the reference file.
+    :param reference_file: Path to the reference JSON file.
+    :param file_list: List of translation files to update.
+    :param branch: Branch where the files are located.
+    """
+    reference_properties = parse_json_file(reference_file)
+
+    for file_path in file_list:
+        basename_current_file = os.path.basename(os.path.join(branch, file_path))
+        if (
+            basename_current_file == os.path.basename(reference_file)
+            or not file_path.endswith(".json")
+            or not os.path.dirname(file_path).endswith("locales")
+        ):
+            continue
+
+        current_properties = parse_json_file(os.path.join(branch, file_path))
+        updated_properties = {}
+
+        for ref_key, ref_value in reference_properties.items():
+            if ref_key in current_properties:
+                # Keep the current translation
+                updated_properties[ref_key] = current_properties[ref_key]
+            else:
+                # Add missing key with reference value
+                updated_properties[ref_key] = ref_value
+
+        write_json_file(os.path.join(branch, file_path), updated_properties)
+
+
+def check_for_missing_keys(reference_file, file_list, branch):
+    update_missing_keys(reference_file, file_list, branch)
+
+
+def read_json_keys(file_path):
+    if os.path.isfile(file_path) and os.path.exists(file_path):
+        return parse_json_file(file_path)
+    return {}
+
+
+def check_for_differences(reference_file, file_list, branch, actor):
+    reference_branch = branch
+    basename_reference_file = os.path.basename(reference_file)
+
+    report = []
+    report.append(f"#### 🔄 Reference Branch: `{reference_branch}`")
+    reference_keys = read_json_keys(reference_file)
+    has_differences = False
+
+    only_reference_file = True
+
+    file_arr = file_list
+
+    if len(file_list) == 1:
+        file_arr = file_list[0].split()
+
+    base_dir = os.path.abspath(
+        os.path.join(os.getcwd(), "frontend", "public", "locales")
+    )
+
+    for file_path in file_arr:
+        file_normpath = os.path.normpath(file_path)
+        absolute_path = os.path.abspath(file_normpath)
+
+        # Verify that file is within the expected directory
+        if not absolute_path.startswith(base_dir):
+            raise ValueError(f"Unsafe file found: {file_normpath}")
+
+        # Verify file size before processing
+        if os.path.getsize(os.path.join(branch, file_normpath)) > MAX_FILE_SIZE:
+            raise ValueError(
+                f"The file {file_normpath} is too large and could pose a security risk."
+            )
+
+        basename_current_file = os.path.basename(os.path.join(branch, file_normpath))
+        locale_dir = os.path.basename(os.path.dirname(file_normpath))
+
+        if (
+            basename_current_file == basename_reference_file
+            and locale_dir == "en-GB"
+        ):
+            continue
+
+        if not file_normpath.endswith(".json") or basename_current_file != "translation.json":
+            continue
+
+        only_reference_file = False
+        report.append(f"#### 📃 **File Check:** `{locale_dir}/{basename_current_file}`")
+        current_keys = read_json_keys(os.path.join(branch, file_path))
+        reference_key_count = len(reference_keys)
+        current_key_count = len(current_keys)
+
+        if reference_key_count != current_key_count:
+            report.append("")
+            report.append("1. **Test Status:** ❌ **_Failed_**")
+            report.append("  - **Issue:**")
+            has_differences = True
+            if reference_key_count > current_key_count:
+                report.append(
+                    f"    - **_Mismatched key count_**: {reference_key_count} (reference) vs {current_key_count} (current). Translation keys are missing."
+                )
+            elif reference_key_count < current_key_count:
+                report.append(
+                    f"    - **_Too many keys_**: {reference_key_count} (reference) vs {current_key_count} (current). Please verify if there are additional keys that need to be removed."
+                )
+        else:
+            report.append("1. **Test Status:** ✅ **_Passed_**")
+
+        # Check for missing or extra keys
+        current_keys_set = set(current_keys.keys())
+        reference_keys_set = set(reference_keys.keys())
+        missing_keys = current_keys_set.difference(reference_keys_set)
+        extra_keys = reference_keys_set.difference(current_keys_set)
+        missing_keys_list = list(missing_keys)
+        extra_keys_list = list(extra_keys)
+
+        if missing_keys_list or extra_keys_list:
+            has_differences = True
+            missing_keys_str = "`, `".join(missing_keys_list)
+            extra_keys_str = "`, `".join(extra_keys_list)
+            report.append("2. **Test Status:** ❌ **_Failed_**")
+            report.append("  - **Issue:**")
+            if missing_keys_list:
+                report.append(
+                    f"    - **_Extra keys in `{locale_dir}/{basename_current_file}`_**: `{missing_keys_str}` that are not present in **_`{basename_reference_file}`_**."
+                )
+            if extra_keys_list:
+                report.append(
+                    f"    - **_Missing keys in `{locale_dir}/{basename_current_file}`_**: `{extra_keys_str}` that are not present in **_`{basename_reference_file}`_**."
+                )
+        else:
+            report.append("2. **Test Status:** ✅ **_Passed_**")
+
+        if find_duplicate_keys(os.path.join(branch, file_normpath)):
+            has_differences = True
+            output = "\n".join(
+                [
+                    f"      - `{key}`: first at {first}, duplicate at `{duplicate}`"
+                    for key, first, duplicate in find_duplicate_keys(
+                        os.path.join(branch, file_normpath)
+                    )
+                ]
+            )
+            report.append("3. **Test Status:** ❌ **_Failed_**")
+            report.append("  - **Issue:**")
+            report.append("    - duplicate entries were found:")
+            report.append(output)
+        else:
+            report.append("3. **Test Status:** ✅ **_Passed_**")
+
+        report.append("")
+        report.append("---")
+        report.append("")
+
+    if has_differences:
+        report.append("## ❌ Overall Check Status: **_Failed_**")
+        report.append("")
+        report.append(
+            f"@{actor} please check your translation if it conforms to the standard. Follow the format of [en-GB/translation.json](https://github.com/Stirling-Tools/Stirling-PDF/blob/V2/frontend/public/locales/en-GB/translation.json)"
+        )
+    else:
+        report.append("## ✅ Overall Check Status: **_Success_**")
+        report.append("")
+        report.append(
+            f"Thanks @{actor} for your help in keeping the translations up to date."
+        )
+
+    if not only_reference_file:
+        print("\n".join(report))
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Find missing keys")
+    parser.add_argument(
+        "--actor",
+        required=False,
+        help="Actor from PR.",
+    )
+    parser.add_argument(
+        "--reference-file",
+        required=True,
+        help="Path to the reference file.",
+    )
+    parser.add_argument(
+        "--branch",
+        type=str,
+        required=True,
+        help="Branch name.",
+    )
+    parser.add_argument(
+        "--check-file",
+        type=str,
+        required=False,
+        help="List of changed files, separated by spaces.",
+    )
+    parser.add_argument(
+        "--files",
+        nargs="+",
+        required=False,
+        help="List of changed files, separated by spaces.",
+    )
+    args = parser.parse_args()
+
+    # Sanitize --actor input to avoid injection attacks
+    if args.actor:
+        args.actor = re.sub(r"[^a-zA-Z0-9_\\-]", "", args.actor)
+
+    # Sanitize --branch input to avoid injection attacks
+    if args.branch:
+        args.branch = re.sub(r"[^a-zA-Z0-9\\-]", "", args.branch)
+
+    file_list = args.files
+    if file_list is None:
+        if args.check_file:
+            file_list = [args.check_file]
+        else:
+            file_list = glob.glob(
+                os.path.join(
+                    os.getcwd(),
+                    "frontend",
+                    "public",
+                    "locales",
+                    "*",
+                    "translation.json",
+                )
+            )
+        update_missing_keys(args.reference_file, file_list)
+    else:
+        check_for_differences(args.reference_file, file_list, args.branch, args.actor)

.github/workflows/PR-Auto-Deploy-V2.yml

@@ -3,7 +3,15 @@ name: Auto PR V2 Deployment
 on:
   pull_request:
     types: [opened, synchronize, reopened, closed]
-
+  workflow_dispatch:
+    inputs:
+      pr:
+        description: "PR number to deploy"
+        required: true
+      allow_fork:
+        description: "Allow deploying fork PR?"
+        required: false
+        default: "false"
 
 permissions:
   contents: read
@@ -12,102 +20,93 @@ permissions:
 
 jobs:
   check-pr:
-    if: github.event.action != 'closed'
+    if: (github.event_name == 'pull_request' && github.event.action != 'closed') || github.event_name == 'workflow_dispatch'
     runs-on: ubuntu-latest
     outputs:
-      should_deploy: ${{ steps.check-conditions.outputs.should_deploy }}
-      pr_number: ${{ github.event.number }}
-      pr_repository: ${{ steps.get-pr-info.outputs.repository }}
-      pr_ref: ${{ steps.get-pr-info.outputs.ref }}
+      should_deploy: ${{ steps.decide.outputs.should_deploy }}
+      is_fork: ${{ steps.resolve.outputs.is_fork }}
+      allow_fork: ${{ steps.decide.outputs.allow_fork }}
+      pr_number: ${{ steps.resolve.outputs.pr_number }}
+      pr_repository: ${{ steps.resolve.outputs.repository }}
+      pr_ref: ${{ steps.resolve.outputs.ref }}
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@002fdce3c6a235733a90a27c80493a3241e56863 # v2.12.1
+        uses: step-security/harden-runner@6c439dc8bdf85cadbbce9ed30d1c7b959517bc49 # v2.12.2
         with:
           egress-policy: audit
 
-      - name: Check deployment conditions
-        id: check-conditions
+      - name: Resolve PR info
+        id: resolve
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            let prNumber = context.eventName === 'workflow_dispatch'
+              ? parseInt(process.env.INPUT_PR, 10)
+              : context.payload.number;
+
+            if (!Number.isInteger(prNumber)) { core.setFailed('Invalid PR number'); return; }
+
+            const { data: pr } = await github.rest.pulls.get({ owner, repo, pull_number: prNumber });
+            core.setOutput('pr_number', String(prNumber));
+            core.setOutput('repository', pr.head.repo.full_name);
+            core.setOutput('ref', pr.head.ref);
+            core.setOutput('is_fork', String(pr.head.repo.fork));
+            core.setOutput('base_ref', pr.base.ref);
+            core.setOutput('author', pr.user.login);
+            core.setOutput('state', pr.state);
+
+      - name: Decide deploy
+        id: decide
+        shell: bash
         env:
+          EVENT_NAME: ${{ github.event_name }}
+          STATE: ${{ steps.resolve.outputs.state }}
+          IS_FORK: ${{ steps.resolve.outputs.is_fork }}
+          # nur bei workflow_dispatch gesetzt:
+          ALLOW_FORK_INPUT: ${{ inputs.allow_fork }}
+          # für Auto-PR-Logik:
           PR_TITLE: ${{ github.event.pull_request.title }}
-          PR_AUTHOR: ${{ github.event.pull_request.user.login }}
           PR_BRANCH: ${{ github.event.pull_request.head.ref }}
+          PR_BASE: ${{ steps.resolve.outputs.base_ref }}
+          PR_AUTHOR: ${{ steps.resolve.outputs.author }}
         run: |
-          echo "PR Title: $PR_TITLE"
-          echo "PR Author: $PR_AUTHOR"
-          echo "PR Branch: $PR_BRANCH"
-          echo "PR Base Branch: ${{ github.event.pull_request.base.ref }}"
-          
-          # Define authorized users
-          authorized_users=(
-            "Frooodle"
-            "sf298"
-            "Ludy87"
-            "LaserKaspar"
-            "sbplat"
-            "reecebrowne"
-            "DarioGii"
-            "ConnorYoh"
-            "EthanHealy01"
-            "jbrunton96"
-          )
-          
-          # Check if author is in the authorized list
-          is_authorized=false
-          for user in "${authorized_users[@]}"; do
-            if [[ "$PR_AUTHOR" == "$user" ]]; then
-              is_authorized=true
-              break
+          set -e
+          # Standard: nichts deployen
+          should=false
+          allow_fork="$(echo "${ALLOW_FORK_INPUT:-false}" | tr '[:upper:]' '[:lower:]')"
+
+          if [ "$EVENT_NAME" = "workflow_dispatch" ]; then
+            if [ "$STATE" != "open" ]; then
+              echo "PR not open -> skip"
+            else
+              if [ "$IS_FORK" = "true" ] && [ "$allow_fork" != "true" ]; then
+                echo "Fork PR and allow_fork=false -> skip"
+              else
+                should=true
+              fi
             fi
-          done
-          
-          # If PR is targeting V2 and user is authorized, deploy unconditionally
-          PR_BASE_BRANCH="${{ github.event.pull_request.base.ref }}"
-          if [[ "$PR_BASE_BRANCH" == "V2" && "$is_authorized" == "true" ]]; then
-            echo "✅ Deployment forced: PR targets V2 and author is authorized."
-            echo "should_deploy=true" >> $GITHUB_OUTPUT
-            exit 0
-          fi
-          
-          # Otherwise, continue with original keyword checks
-          has_v2_keyword=false
-          if [[ "$PR_TITLE" =~ [Vv]2 ]] || [[ "$PR_TITLE" =~ [Vv]ersion.?2 ]] || [[ "$PR_TITLE" =~ [Vv]ersion.?[Tt]wo ]]; then
-            has_v2_keyword=true
-          fi
-          
-          has_branch_keyword=false
-          if [[ "$PR_BRANCH" =~ [Vv]2 ]] || [[ "$PR_BRANCH" =~ [Rr]eact ]]; then
-            has_branch_keyword=true
-          fi
-          
-          if [[ "$is_authorized" == "true" && ( "$has_v2_keyword" == "true" || "$has_branch_keyword" == "true" ) ]]; then
-            echo "✅ Deployment conditions met"
-            echo "should_deploy=true" >> $GITHUB_OUTPUT
           else
-            echo "❌ Deployment conditions not met"
-            echo "  - Authorized user: $is_authorized"
-            echo "  - Has V2 keyword in title: $has_v2_keyword"
-            echo "  - Has V2/React keyword in branch: $has_branch_keyword"
-            echo "should_deploy=false" >> $GITHUB_OUTPUT
+            auth_users=("Frooodle" "sf298" "Ludy87" "LaserKaspar" "sbplat" "reecebrowne" "DarioGii" "ConnorYoh" "EthanHealy01" "jbrunton96")
+            is_auth=false; for u in "${auth_users[@]}"; do [ "$u" = "$PR_AUTHOR" ] && is_auth=true && break; done
+            if [ "$PR_BASE" = "V2" ] && [ "$is_auth" = true ]; then
+              should=true
+            else
+              title_has_v2=false; echo "$PR_TITLE" | grep -qiE 'v2|version.?2|version.?two' && title_has_v2=true
+              branch_has_kw=false; echo "$PR_BRANCH" | grep -qiE 'v2|react' && branch_has_kw=true
+              if [ "$is_auth" = true ] && { [ "$title_has_v2" = true ] || [ "$branch_has_kw" = true ]; }; then
+                should=true
+              fi
+            fi
           fi
 
-      - name: Get PR repository and ref
-        id: get-pr-info
-        if: steps.check-conditions.outputs.should_deploy == 'true'
-        run: |
-          # For forks, use the full repository name, for internal PRs use the current repo
-          if [[ "${{ github.event.pull_request.head.repo.fork }}" == "true" ]]; then
-            repository="${{ github.event.pull_request.head.repo.full_name }}"
-          else
-            repository="${{ github.repository }}"
-          fi
-          
-          echo "repository=$repository" >> $GITHUB_OUTPUT
-          echo "ref=${{ github.event.pull_request.head.ref }}" >> $GITHUB_OUTPUT
+          echo "should_deploy=$should" >> $GITHUB_OUTPUT
+          echo "allow_fork=${allow_fork:-false}" >> $GITHUB_OUTPUT
 
   deploy-v2-pr:
     needs: check-pr
     runs-on: ubuntu-latest
-    if: needs.check-pr.outputs.should_deploy == 'true'
+    if: needs.check-pr.outputs.should_deploy == 'true' && (needs.check-pr.outputs.is_fork == 'false' || needs.check-pr.outputs.allow_fork == 'true')
     # Concurrency control - only one deployment per PR at a time
     concurrency:
       group: v2-deploy-pr-${{ needs.check-pr.outputs.pr_number }}
@@ -119,7 +118,7 @@ jobs:
 
     steps:
       - name: Harden Runner
-        uses: step-security/harden-runner@002fdce3c6a235733a90a27c80493a3241e56863 # v2.12.1
+        uses: step-security/harden-runner@6c439dc8bdf85cadbbce9ed30d1c7b959517bc49 # v2.12.2
         with:
           egress-policy: audit
 
@@ -154,13 +153,13 @@ jobs:
               issue_number: prNumber,
               per_page: 100
             });
-            
+
             const v2Comments = comments.filter(comment => 
               comment.body.includes('🚀 **Auto-deploying V2 version**') ||
               comment.body.includes('## 🚀 V2 Auto-Deployment Complete!') ||
               comment.body.includes('❌ **V2 Auto-deployment failed**')
             );
-            
+
             for (const comment of v2Comments) {
               console.log(`Deleting old V2 comment: ${comment.id}`);
               await github.rest.issues.deleteComment({
@@ -177,7 +176,6 @@ jobs:
               issue_number: prNumber,
               body: `🚀 **Auto-deploying V2 version** for PR #${prNumber}...\n\n_This is an automated deployment triggered by V2/version2 keywords in the PR title or V2/React keywords in the branch name._\n\n⚠️ **Note:** If new commits are pushed during deployment, this build will be cancelled and replaced with the latest version.`
             });
-            
             return newComment.id;
 
       - name: Checkout PR
@@ -188,7 +186,6 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           fetch-depth: 0  # Fetch full history for commit hash detection
 
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3.11.1
 
@@ -212,7 +209,7 @@ jobs:
           if [ -z "$FRONTEND_HASH" ]; then
             FRONTEND_HASH="no-frontend-changes"
           fi
-          
+
           # Get last commit that touched backend code, docker/backend, or docker/compose
           BACKEND_HASH=$(git log -1 --format="%H" -- app/ docker/backend/ docker/compose/ 2>/dev/null || echo "")
           if [ -z "$BACKEND_HASH" ]; then
@@ -321,7 +318,7 @@ jobs:
                 SWAGGER_SERVER_URL: "https://${V2_PORT}.ssl.stirlingpdf.cloud"
                 baseUrl: "https://${V2_PORT}.ssl.stirlingpdf.cloud"
               restart: on-failure:5
-              
+
             stirling-pdf-v2-frontend:
               container_name: stirling-pdf-v2-frontend-pr-${{ needs.check-pr.outputs.pr_number }}
               image: ${{ secrets.DOCKER_HUB_USERNAME }}/test:v2-frontend-${{ steps.commit-hashes.outputs.frontend_short }}
@@ -354,7 +351,7 @@ jobs:
             
             # Clean up unused Docker resources to save space
             docker system prune -af --volumes || true
-            
+
             # Clean up old backend/frontend images (older than 2 weeks)
             docker image prune -af --filter "until=336h" --filter "label!=keep=true" || true
           ENDSSH
@@ -492,7 +489,7 @@ jobs:
             
             # Clean up old unused images (older than 2 weeks) but keep recent ones for reuse
             docker image prune -af --filter "until=336h" --filter "label!=keep=true" || true
-            
+
             # Note: We don't remove the commit-based images since they can be reused across PRs
             # Only remove PR-specific containers and directories
           ENDSSH
@@ -501,5 +498,4 @@ jobs:
         if: always()
         run: |
           rm -f ../private.key
-        continue-on-error: true
-
+        continue-on-error: true

.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,37 +29,81 @@ 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: Check out code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - name: Checkout PR head (default)
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           fetch-depth: 0
+          persist-credentials: false
 
       - name: Setup GitHub App Bot
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false)
         id: setup-bot
         uses: ./.github/actions/setup-bot
         with:
           app-id: ${{ secrets.GH_APP_ID }}
           private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
 
-      - name: Set up Node.js
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
+      - name: Checkout BASE branch (safe script)
+        if: github.event_name == 'pull_request'
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
-          node-version: '18'
+          ref: ${{ github.event.pull_request.base.sha }}
+          path: base
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        with:
+          node-version: '22'
           cache: 'npm'
           cache-dependency-path: frontend/package-lock.json
 
       - name: Install frontend dependencies
         working-directory: frontend
-        run: npm ci
+        env:
+          NPM_CONFIG_IGNORE_SCRIPTS: "true"
+        run: npm ci --ignore-scripts --audit=false --fund=false
 
-      - name: Generate frontend license report
+      - name: Generate frontend license report (internal PR)
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
         working-directory: frontend
+        env:
+          PR_IS_FORK: "false"
         run: npm run generate-licenses
 
+      - name: Generate frontend license report (fork PRs, pinned)
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true
+        env:
+          NPM_CONFIG_IGNORE_SCRIPTS: "true"
+        working-directory: frontend
+        run: |
+          mkdir -p src/assets
+          npx --yes license-report --only=prod --output=json > src/assets/3rdPartyLicenses.json
+
+      - name: Postprocess with project script (BASE version)
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true
+        env:
+          PR_IS_FORK: "true"
+        run: |
+          node base/frontend/scripts/generate-licenses.js \
+            --input frontend/src/assets/3rdPartyLicenses.json
+
+      - name: Copy postprocessed artifacts back (fork PRs)
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true
+        run: |
+          mkdir -p frontend/src/assets
+          if [ -f "base/frontend/src/assets/3rdPartyLicenses.json" ]; then
+            cp base/frontend/src/assets/3rdPartyLicenses.json frontend/src/assets/3rdPartyLicenses.json
+          fi
+          if [ -f "base/frontend/src/assets/license-warnings.json" ]; then
+            cp base/frontend/src/assets/license-warnings.json frontend/src/assets/license-warnings.json
+          fi
+
       - name: Check for license warnings
         run: |
           if [ -f "frontend/src/assets/license-warnings.json" ]; then
@@ -69,8 +114,8 @@ jobs:
 
       # PR Event: Check licenses and comment on PR
       - name: Delete previous license check comments
-        if: github.event_name == 'pull_request'
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ steps.setup-bot.outputs.token }}
           script: |
@@ -101,9 +146,29 @@ jobs:
               });
             }
 
+      - name: Summarize results (fork PRs)
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true
+        run: |
+          {
+            echo "## Frontend License Check"
+            echo ""
+            if [ "${LICENSE_WARNINGS_EXIST}" = "true" ]; then
+              echo "❌ **Failed** – incompatible or unknown licenses found."
+              if [ -f "frontend/src/assets/license-warnings.json" ]; then
+                echo ""
+                echo "### Warnings"
+                jq -r '.warnings[] | "- \(.message)"' frontend/src/assets/license-warnings.json || true
+              fi
+            else
+              echo "✅ **Passed** – no license warnings detected."
+            fi
+            echo ""
+            echo "_Note: This is a fork PR. PR comments are disabled; use this summary._"
+          } >> "$GITHUB_STEP_SUMMARY"
+
       - name: Comment on PR - License Check Results
-        if: github.event_name == 'pull_request'
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == false
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
         with:
           github-token: ${{ steps.setup-bot.outputs.token }}
           script: |

.github/workflows/sync_files_v2.yml

@@ -0,0 +1,118 @@
+name: Sync Files V2
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - V2
+      - syncLangTest
+    paths:
+      - "build.gradle"
+      - "README.md"
+      - "frontend/public/locales/*/translation.json"
+      - "app/core/src/main/resources/static/3rdPartyLicenses.json"
+      - "scripts/ignore_translation.toml"
+
+# cancel in-progress jobs if a new job is triggered
+# This is useful to avoid running multiple builds for the same branch if a new commit is pushed
+# or a pull request is updated.
+# It helps to save resources and time by ensuring that only the latest commit is built and tested
+# This is particularly useful for long-running jobs that may take a while to complete.
+# The `group` is set to a combination of the workflow name, event name, and branch name.
+# This ensures that jobs are grouped by the workflow and branch, allowing for cancellation of
+# in-progress jobs when a new commit is pushed to the same branch or a new pull request is opened.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref_name || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  sync-files:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
+
+      - name: Setup GitHub App Bot
+        id: setup-bot
+        uses: ./.github/actions/setup-bot
+        with:
+          app-id: ${{ secrets.GH_APP_ID }}
+          private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
+
+      - name: Set up Python
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 # v5.6.0
+        with:
+          python-version: "3.12"
+          cache: "pip" # caching pip dependencies
+
+      - name: Sync translation JSON files
+        run: |
+          python .github/scripts/check_language_json.py --reference-file "frontend/public/locales/en-GB/translation.json" --branch V2
+
+      - name: Commit translation files
+        run: |
+          git add frontend/public/locales/*/translation.json
+          git diff --staged --quiet || git commit -m ":memo: Sync translation files" || echo "No changes detected"
+
+      - name: Install dependencies
+        run: pip install --require-hashes -r ./.github/scripts/requirements_sync_readme.txt
+
+      - name: Sync README.md
+        run: |
+          python scripts/counter_translation_v2.py
+
+      - name: Run git add
+        run: |
+          git add README.md scripts/ignore_translation.toml
+          git diff --staged --quiet || git commit -m ":memo: Sync README.md & scripts/ignore_translation.toml" || echo "No changes detected"
+
+      - name: Create Pull Request
+        if: always()
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
+        with:
+          token: ${{ steps.setup-bot.outputs.token }}
+          commit-message: Update files
+          committer: ${{ steps.setup-bot.outputs.committer }}
+          author: ${{ steps.setup-bot.outputs.committer }}
+          signoff: true
+          branch: sync_readme_v2
+          base: V2
+          title: ":globe_with_meridians: [V2] Sync Translations + Update README Progress Table"
+          body: |
+            ### Description of Changes
+
+            This Pull Request was automatically generated to synchronize updates to translation files and documentation for the **V2 branch**. Below are the details of the changes made:
+
+            #### **1. Synchronization of Translation Files**
+            - Updated translation files (`frontend/public/locales/*/translation.json`) to reflect changes in the reference file `en-GB/translation.json`.
+            - Ensured consistency and synchronization across all supported language files.
+            - Highlighted any missing or incomplete translations.
+
+            #### **2. Update README.md**
+            - Generated the translation progress table in `README.md`.
+            - Added a summary of the current translation status for all supported languages.
+            - Included up-to-date statistics on translation coverage.
+
+            #### **Why these changes are necessary**
+            - Keeps translation files aligned with the latest reference updates.
+            - Ensures the documentation reflects the current translation progress.
+
+            ---
+
+            Auto-generated by [create-pull-request][1].
+
+            [1]: https://github.com/peter-evans/create-pull-request
+          draft: false
+          delete-branch: true
+          labels: github-actions
+          sign-commits: true
+          add-paths: |
+            README.md
+            frontend/public/locales/*/translation.json

.gitignore

@@ -203,3 +203,10 @@ id_ed25519.pub
 
 # node_modules
 node_modules/
+
+# Translation temp files
+*_compact.json
+*compact*.json
+test_batch.json
+*.backup.*.json
+frontend/public/locales/*/translation.backup*.json

README.md

@@ -97,7 +97,6 @@ All documentation available at [https://docs.stirlingpdf.com/](https://docs.stir
 
 
 
-
 # 📖 Get Started
 
 Visit our comprehensive documentation at [docs.stirlingpdf.com](https://docs.stirlingpdf.com) for:
@@ -116,46 +115,46 @@ Stirling-PDF currently supports 40 languages!
 
 | Language                                     | Progress                               |
 | -------------------------------------------- | -------------------------------------- |
-| Arabic (العربية) (ar_AR)                        | ![61%](https://geps.dev/progress/61)   |
-| Azerbaijani (Azərbaycan Dili) (az_AZ)        | ![62%](https://geps.dev/progress/62)   |
-| Basque (Euskara) (eu_ES)                     | ![36%](https://geps.dev/progress/36)   |
-| Bulgarian (Български) (bg_BG)                | ![68%](https://geps.dev/progress/68)   |
-| Catalan (Català) (ca_CA)                     | ![68%](https://geps.dev/progress/68)   |
-| Croatian (Hrvatski) (hr_HR)                  | ![60%](https://geps.dev/progress/60)   |
-| Czech (Česky) (cs_CZ)                        | ![70%](https://geps.dev/progress/70)   |
-| Danish (Dansk) (da_DK)                       | ![61%](https://geps.dev/progress/61)   |
-| Dutch (Nederlands) (nl_NL)                   | ![60%](https://geps.dev/progress/60)   |
+| Arabic (العربية) (ar_AR)                        | ![37%](https://geps.dev/progress/37)   |
+| Azerbaijani (Azərbaycan Dili) (az_AZ)        | ![37%](https://geps.dev/progress/37)   |
+| Basque (Euskara) (eu_ES)                     | ![21%](https://geps.dev/progress/21)   |
+| Bulgarian (Български) (bg_BG)                | ![40%](https://geps.dev/progress/40)   |
+| Catalan (Català) (ca_CA)                     | ![39%](https://geps.dev/progress/39)   |
+| Croatian (Hrvatski) (hr_HR)                  | ![36%](https://geps.dev/progress/36)   |
+| Czech (Česky) (cs_CZ)                        | ![39%](https://geps.dev/progress/39)   |
+| Danish (Dansk) (da_DK)                       | ![35%](https://geps.dev/progress/35)   |
+| Dutch (Nederlands) (nl_NL)                   | ![35%](https://geps.dev/progress/35)   |
 | English (English) (en_GB)                    | ![100%](https://geps.dev/progress/100) |
 | English (US) (en_US)                         | ![100%](https://geps.dev/progress/100) |
-| French (Français) (fr_FR)                    | ![89%](https://geps.dev/progress/89)   |
+| French (Français) (fr_FR)                    | ![42%](https://geps.dev/progress/42)   |
 | German (Deutsch) (de_DE)                     | ![98%](https://geps.dev/progress/98)   |
-| Greek (Ελληνικά) (el_GR)                     | ![67%](https://geps.dev/progress/67)   |
-| Hindi (हिंदी) (hi_IN)                          | ![67%](https://geps.dev/progress/67)   |
-| Hungarian (Magyar) (hu_HU)                   | ![99%](https://geps.dev/progress/99)   |
-| Indonesian (Bahasa Indonesia) (id_ID)        | ![62%](https://geps.dev/progress/62)   |
-| Irish (Gaeilge) (ga_IE)                      | ![68%](https://geps.dev/progress/68)   |
+| Greek (Ελληνικά) (el_GR)                     | ![39%](https://geps.dev/progress/39)   |
+| Hindi (हिंदी) (hi_IN)                          | ![40%](https://geps.dev/progress/40)   |
+| Hungarian (Magyar) (hu_HU)                   | ![43%](https://geps.dev/progress/43)   |
+| Indonesian (Bahasa Indonesia) (id_ID)        | ![36%](https://geps.dev/progress/36)   |
+| Irish (Gaeilge) (ga_IE)                      | ![40%](https://geps.dev/progress/40)   |
 | Italian (Italiano) (it_IT)                   | ![98%](https://geps.dev/progress/98)   |
-| Japanese (日本語) (ja_JP)                    | ![93%](https://geps.dev/progress/93)   |
-| Korean (한국어) (ko_KR)                      | ![67%](https://geps.dev/progress/67)   |
-| Norwegian (Norsk) (no_NB)                    | ![66%](https://geps.dev/progress/66)   |
-| Persian (فارسی) (fa_IR)                      | ![64%](https://geps.dev/progress/64)   |
-| Polish (Polski) (pl_PL)                      | ![72%](https://geps.dev/progress/72)   |
-| Portuguese (Português) (pt_PT)               | ![69%](https://geps.dev/progress/69)   |
-| Portuguese Brazilian (Português) (pt_BR)     | ![76%](https://geps.dev/progress/76)   |
-| Romanian (Română) (ro_RO)                    | ![57%](https://geps.dev/progress/57)   |
-| Russian (Русский) (ru_RU)                    | ![88%](https://geps.dev/progress/88)   |
-| Serbian Latin alphabet (Srpski) (sr_LATN_RS) | ![95%](https://geps.dev/progress/95)   |
-| Simplified Chinese (简体中文) (zh_CN)         | ![93%](https://geps.dev/progress/93)   |
-| Slovakian (Slovensky) (sk_SK)                | ![51%](https://geps.dev/progress/51)   |
-| Slovenian (Slovenščina) (sl_SI)              | ![71%](https://geps.dev/progress/71)   |
-| Spanish (Español) (es_ES)                    | ![74%](https://geps.dev/progress/74)   |
-| Swedish (Svenska) (sv_SE)                    | ![65%](https://geps.dev/progress/65)   |
-| Thai (ไทย) (th_TH)                           | ![59%](https://geps.dev/progress/59)   |
+| Japanese (日本語) (ja_JP)                    | ![41%](https://geps.dev/progress/41)   |
+| Korean (한국어) (ko_KR)                      | ![40%](https://geps.dev/progress/40)   |
+| Norwegian (Norsk) (no_NB)                    | ![37%](https://geps.dev/progress/37)   |
+| Persian (فارسی) (fa_IR)                      | ![39%](https://geps.dev/progress/39)   |
+| Polish (Polski) (pl_PL)                      | ![41%](https://geps.dev/progress/41)   |
+| Portuguese (Português) (pt_PT)               | ![40%](https://geps.dev/progress/40)   |
+| Portuguese Brazilian (Português) (pt_BR)     | ![42%](https://geps.dev/progress/42)   |
+| Romanian (Română) (ro_RO)                    | ![33%](https://geps.dev/progress/33)   |
+| Russian (Русский) (ru_RU)                    | ![43%](https://geps.dev/progress/43)   |
+| Serbian Latin alphabet (Srpski) (sr_LATN_RS) | ![43%](https://geps.dev/progress/43)   |
+| Simplified Chinese (简体中文) (zh_CN)         | ![99%](https://geps.dev/progress/99)   |
+| Slovakian (Slovensky) (sk_SK)                | ![30%](https://geps.dev/progress/30)   |
+| Slovenian (Slovenščina) (sl_SI)              | ![41%](https://geps.dev/progress/41)   |
+| Spanish (Español) (es_ES)                    | ![98%](https://geps.dev/progress/98)   |
+| Swedish (Svenska) (sv_SE)                    | ![38%](https://geps.dev/progress/38)   |
+| Thai (ไทย) (th_TH)                           | ![35%](https://geps.dev/progress/35)   |
 | Tibetan (བོད་ཡིག་) (bo_CN)                     | ![65%](https://geps.dev/progress/65) |
-| Traditional Chinese (繁體中文) (zh_TW)        | ![97%](https://geps.dev/progress/97)   |
-| Turkish (Türkçe) (tr_TR)                     | ![80%](https://geps.dev/progress/80)   |
-| Ukrainian (Українська) (uk_UA)               | ![71%](https://geps.dev/progress/71)   |
-| Vietnamese (Tiếng Việt) (vi_VN)              | ![57%](https://geps.dev/progress/57)   |
+| Traditional Chinese (繁體中文) (zh_TW)        | ![43%](https://geps.dev/progress/43)   |
+| Turkish (Türkçe) (tr_TR)                     | ![43%](https://geps.dev/progress/43)   |
+| Ukrainian (Українська) (uk_UA)               | ![42%](https://geps.dev/progress/42)   |
+| Vietnamese (Tiếng Việt) (vi_VN)              | ![32%](https://geps.dev/progress/32)   |
 | Malayalam (മലയാളം) (ml_IN)              | ![73%](https://geps.dev/progress/73)   |
 
 ## Stirling PDF Enterprise

app/common/src/main/java/stirling/software/common/model/api/PDFFile.java

@@ -18,7 +18,9 @@ public class PDFFile {
     @Schema(description = "The input PDF file", format = "binary")
     private MultipartFile fileInput;
 
-    @Schema(description = "File ID for server-side files (can be used instead of fileInput if job was previously done on file in async mode)")
+    @Schema(
+            description =
+                    "File ID for server-side files (can be used instead of fileInput if job was previously done on file in async mode)")
     private String fileId;
 
     @AssertTrue(message = "Either fileInput or fileId must be provided")

app/common/src/main/java/stirling/software/common/service/ServerCertificateServiceInterface.java

@@ -0,0 +1,42 @@
+package stirling.software.common.service;
+
+import java.io.InputStream;
+import java.security.KeyStore;
+import java.security.cert.X509Certificate;
+import java.util.Date;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
+public interface ServerCertificateServiceInterface {
+
+    boolean isEnabled();
+
+    boolean hasServerCertificate();
+
+    void initializeServerCertificate();
+
+    KeyStore getServerKeyStore() throws Exception;
+
+    String getServerCertificatePassword();
+
+    X509Certificate getServerCertificate() throws Exception;
+
+    byte[] getServerCertificatePublicKey() throws Exception;
+
+    void uploadServerCertificate(InputStream p12Stream, String password) throws Exception;
+
+    void deleteServerCertificate() throws Exception;
+
+    ServerCertificateInfo getServerCertificateInfo() throws Exception;
+
+    @Getter
+    @AllArgsConstructor
+    class ServerCertificateInfo {
+        private final boolean exists;
+        private final String subject;
+        private final String issuer;
+        private final Date validFrom;
+        private final Date validTo;
+    }
+}

app/core/src/main/java/stirling/software/SPDF/config/EndpointConfiguration.java

@@ -237,6 +237,7 @@ public class EndpointConfiguration {
         addEndpointToGroup("PageOps", "pdf-organizer");
         addEndpointToGroup("PageOps", "rotate-pdf");
         addEndpointToGroup("PageOps", "multi-page-layout");
+        addEndpointToGroup("PageOps", "booklet-imposition");
         addEndpointToGroup("PageOps", "scale-pages");
         addEndpointToGroup("PageOps", "crop");
         addEndpointToGroup("PageOps", "extract-page");
@@ -366,6 +367,7 @@ public class EndpointConfiguration {
         addEndpointToGroup("Java", "cert-sign");
         addEndpointToGroup("Java", "remove-cert-sign");
         addEndpointToGroup("Java", "multi-page-layout");
+        addEndpointToGroup("Java", "booklet-imposition");
         addEndpointToGroup("Java", "scale-pages");
         addEndpointToGroup("Java", "add-page-numbers");
         addEndpointToGroup("Java", "auto-rename");

app/core/src/main/java/stirling/software/SPDF/controller/api/BookletImpositionController.java

@@ -0,0 +1,324 @@
+package stirling.software.SPDF.controller.api;
+
+import java.awt.*;
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
+
+import org.apache.pdfbox.multipdf.LayerUtility;
+import org.apache.pdfbox.pdmodel.PDDocument;
+import org.apache.pdfbox.pdmodel.PDPage;
+import org.apache.pdfbox.pdmodel.PDPageContentStream;
+import org.apache.pdfbox.pdmodel.common.PDRectangle;
+import org.apache.pdfbox.pdmodel.graphics.form.PDFormXObject;
+import org.apache.pdfbox.util.Matrix;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import io.github.pixee.security.Filenames;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+
+import lombok.RequiredArgsConstructor;
+
+import stirling.software.SPDF.model.api.general.BookletImpositionRequest;
+import stirling.software.common.annotations.AutoJobPostMapping;
+import stirling.software.common.service.CustomPDFDocumentFactory;
+import stirling.software.common.util.WebResponseUtils;
+
+@RestController
+@RequestMapping("/api/v1/general")
+@Tag(name = "General", description = "General APIs")
+@RequiredArgsConstructor
+public class BookletImpositionController {
+
+    private final CustomPDFDocumentFactory pdfDocumentFactory;
+
+    @AutoJobPostMapping(value = "/booklet-imposition", consumes = "multipart/form-data")
+    @Operation(
+            summary = "Create a booklet with proper page imposition",
+            description =
+                    "This operation combines page reordering for booklet printing with multi-page layout. "
+                            + "It rearranges pages in the correct order for booklet printing and places multiple pages "
+                            + "on each sheet for proper folding and binding. Input:PDF Output:PDF Type:SISO")
+    public ResponseEntity<byte[]> createBookletImposition(
+            @ModelAttribute BookletImpositionRequest request) throws IOException {
+
+        MultipartFile file = request.getFileInput();
+        int pagesPerSheet = request.getPagesPerSheet();
+        boolean addBorder = Boolean.TRUE.equals(request.getAddBorder());
+        String spineLocation =
+                request.getSpineLocation() != null ? request.getSpineLocation() : "LEFT";
+        boolean addGutter = Boolean.TRUE.equals(request.getAddGutter());
+        float gutterSize = request.getGutterSize();
+        boolean doubleSided = Boolean.TRUE.equals(request.getDoubleSided());
+        String duplexPass = request.getDuplexPass() != null ? request.getDuplexPass() : "BOTH";
+        boolean flipOnShortEdge = Boolean.TRUE.equals(request.getFlipOnShortEdge());
+
+        // Validate pages per sheet for booklet - only 2-up landscape is proper booklet
+        if (pagesPerSheet != 2) {
+            throw new IllegalArgumentException(
+                    "Booklet printing uses 2 pages per side (landscape). For 4-up, use the N-up feature.");
+        }
+
+        PDDocument sourceDocument = pdfDocumentFactory.load(file);
+        int totalPages = sourceDocument.getNumberOfPages();
+
+        // Create proper booklet with signature-based page ordering
+        PDDocument newDocument =
+                createSaddleBooklet(
+                        sourceDocument,
+                        totalPages,
+                        addBorder,
+                        spineLocation,
+                        addGutter,
+                        gutterSize,
+                        doubleSided,
+                        duplexPass,
+                        flipOnShortEdge);
+
+        sourceDocument.close();
+
+        ByteArrayOutputStream baos = new ByteArrayOutputStream();
+        newDocument.save(baos);
+        newDocument.close();
+
+        byte[] result = baos.toByteArray();
+        return WebResponseUtils.bytesToWebResponse(
+                result,
+                Filenames.toSimpleFileName(file.getOriginalFilename()).replaceFirst("[.][^.]+$", "")
+                        + "_booklet.pdf");
+    }
+
+    private static int padToMultipleOf4(int n) {
+        return (n + 3) / 4 * 4;
+    }
+
+    private static class Side {
+        final int left, right;
+        final boolean isBack;
+
+        Side(int left, int right, boolean isBack) {
+            this.left = left;
+            this.right = right;
+            this.isBack = isBack;
+        }
+    }
+
+    private static List<Side> saddleStitchSides(
+            int totalPagesOriginal,
+            boolean doubleSided,
+            String duplexPass,
+            boolean flipOnShortEdge) {
+        int N = padToMultipleOf4(totalPagesOriginal);
+        List<Side> out = new ArrayList<>();
+        int sheets = N / 4;
+
+        for (int s = 0; s < sheets; s++) {
+            int a = N - 1 - (s * 2); // left, front
+            int b = (s * 2); // right, front
+            int c = (s * 2) + 1; // left, back
+            int d = N - 2 - (s * 2); // right, back
+
+            // clamp to -1 (blank) if >= totalPagesOriginal
+            a = (a < totalPagesOriginal) ? a : -1;
+            b = (b < totalPagesOriginal) ? b : -1;
+            c = (c < totalPagesOriginal) ? c : -1;
+            d = (d < totalPagesOriginal) ? d : -1;
+
+            // Handle duplex pass selection
+            boolean includeFront = "BOTH".equals(duplexPass) || "FIRST".equals(duplexPass);
+            boolean includeBack = "BOTH".equals(duplexPass) || "SECOND".equals(duplexPass);
+
+            if (includeFront) {
+                out.add(new Side(a, b, false)); // front side
+            }
+
+            if (includeBack) {
+                // For short-edge duplex, swap back-side left/right
+                // Note: flipOnShortEdge is ignored in manual duplex mode since users physically
+                // flip the stack
+                if (doubleSided && flipOnShortEdge) {
+                    out.add(new Side(d, c, true)); // swapped back side (automatic duplex only)
+                } else {
+                    out.add(new Side(c, d, true)); // normal back side
+                }
+            }
+        }
+        return out;
+    }
+
+    private PDDocument createSaddleBooklet(
+            PDDocument src,
+            int totalPages,
+            boolean addBorder,
+            String spineLocation,
+            boolean addGutter,
+            float gutterSize,
+            boolean doubleSided,
+            String duplexPass,
+            boolean flipOnShortEdge)
+            throws IOException {
+
+        PDDocument dst = pdfDocumentFactory.createNewDocumentBasedOnOldDocument(src);
+
+        // Derive paper size from source document's first page CropBox
+        PDRectangle srcBox = src.getPage(0).getCropBox();
+        PDRectangle portraitPaper = new PDRectangle(srcBox.getWidth(), srcBox.getHeight());
+        // Force landscape for booklet (Acrobat booklet uses landscape paper to fold to portrait)
+        PDRectangle pageSize = new PDRectangle(portraitPaper.getHeight(), portraitPaper.getWidth());
+
+        // Validate and clamp gutter size
+        if (gutterSize < 0) gutterSize = 0;
+        if (gutterSize >= pageSize.getWidth() / 2f) gutterSize = pageSize.getWidth() / 2f - 1f;
+
+        List<Side> sides = saddleStitchSides(totalPages, doubleSided, duplexPass, flipOnShortEdge);
+
+        for (Side side : sides) {
+            PDPage out = new PDPage(pageSize);
+            dst.addPage(out);
+
+            float cellW = pageSize.getWidth() / 2f;
+            float cellH = pageSize.getHeight();
+
+            // For RIGHT spine (RTL), swap left/right placements
+            boolean rtl = "RIGHT".equalsIgnoreCase(spineLocation);
+            int leftCol = rtl ? 1 : 0;
+            int rightCol = rtl ? 0 : 1;
+
+            // Apply gutter margins with centered gap option
+            float g = addGutter ? gutterSize : 0f;
+            float leftCellX = leftCol * cellW + (g / 2f);
+            float rightCellX = rightCol * cellW - (g / 2f);
+            float leftCellW = cellW - (g / 2f);
+            float rightCellW = cellW - (g / 2f);
+
+            // Create LayerUtility once per page for efficiency
+            LayerUtility layerUtility = new LayerUtility(dst);
+
+            try (PDPageContentStream cs =
+                    new PDPageContentStream(
+                            dst, out, PDPageContentStream.AppendMode.APPEND, true, true)) {
+
+                if (addBorder) {
+                    cs.setLineWidth(1.5f);
+                    cs.setStrokingColor(Color.BLACK);
+                }
+
+                // draw left cell
+                drawCell(
+                        src,
+                        dst,
+                        cs,
+                        layerUtility,
+                        side.left,
+                        leftCellX,
+                        0f,
+                        leftCellW,
+                        cellH,
+                        addBorder);
+                // draw right cell
+                drawCell(
+                        src,
+                        dst,
+                        cs,
+                        layerUtility,
+                        side.right,
+                        rightCellX,
+                        0f,
+                        rightCellW,
+                        cellH,
+                        addBorder);
+            }
+        }
+        return dst;
+    }
+
+    private void drawCell(
+            PDDocument src,
+            PDDocument dst,
+            PDPageContentStream cs,
+            LayerUtility layerUtility,
+            int pageIndex,
+            float cellX,
+            float cellY,
+            float cellW,
+            float cellH,
+            boolean addBorder)
+            throws IOException {
+
+        if (pageIndex < 0) {
+            // Draw border for blank cell if needed
+            if (addBorder) {
+                cs.addRect(cellX, cellY, cellW, cellH);
+                cs.stroke();
+            }
+            return;
+        }
+
+        PDPage srcPage = src.getPage(pageIndex);
+        PDRectangle r = srcPage.getCropBox(); // Use CropBox instead of MediaBox
+        int rot = (srcPage.getRotation() + 360) % 360;
+
+        // Calculate scale factors, accounting for rotation
+        float sx = cellW / r.getWidth();
+        float sy = cellH / r.getHeight();
+        float s = Math.min(sx, sy);
+
+        // If rotated 90/270 degrees, swap dimensions for fitting
+        if (rot == 90 || rot == 270) {
+            sx = cellW / r.getHeight();
+            sy = cellH / r.getWidth();
+            s = Math.min(sx, sy);
+        }
+
+        float drawnW = (rot == 90 || rot == 270) ? r.getHeight() * s : r.getWidth() * s;
+        float drawnH = (rot == 90 || rot == 270) ? r.getWidth() * s : r.getHeight() * s;
+
+        // Center in cell, accounting for CropBox offset
+        float tx = cellX + (cellW - drawnW) / 2f - r.getLowerLeftX() * s;
+        float ty = cellY + (cellH - drawnH) / 2f - r.getLowerLeftY() * s;
+
+        cs.saveGraphicsState();
+        cs.transform(Matrix.getTranslateInstance(tx, ty));
+        cs.transform(Matrix.getScaleInstance(s, s));
+
+        // Apply rotation if needed (rotate about origin), then translate to keep in cell
+        switch (rot) {
+            case 90:
+                cs.transform(Matrix.getRotateInstance(Math.PI / 2, 0, 0));
+                // After 90° CCW, the content spans x in [-r.getHeight(), 0] and y in [0,
+                // r.getWidth()]
+                cs.transform(Matrix.getTranslateInstance(0, -r.getWidth()));
+                break;
+            case 180:
+                cs.transform(Matrix.getRotateInstance(Math.PI, 0, 0));
+                cs.transform(Matrix.getTranslateInstance(-r.getWidth(), -r.getHeight()));
+                break;
+            case 270:
+                cs.transform(Matrix.getRotateInstance(3 * Math.PI / 2, 0, 0));
+                // After 270° CCW, the content spans x in [0, r.getHeight()] and y in
+                // [-r.getWidth(), 0]
+                cs.transform(Matrix.getTranslateInstance(-r.getHeight(), 0));
+                break;
+            default:
+                // 0°: no-op
+        }
+
+        // Reuse LayerUtility passed from caller
+        PDFormXObject form = layerUtility.importPageAsForm(src, pageIndex);
+        cs.drawForm(form);
+
+        cs.restoreGraphicsState();
+
+        // Draw border on top of form to ensure visibility
+        if (addBorder) {
+            cs.addRect(cellX, cellY, cellW, cellH);
+            cs.stroke();
+        }
+    }
+}

app/core/src/main/java/stirling/software/SPDF/controller/api/MergeController.java

@@ -3,6 +3,7 @@ package stirling.software.SPDF.controller.api;
 import java.io.ByteArrayOutputStream;
 import java.io.File;
 import java.io.IOException;
+import java.nio.charset.StandardCharsets;
 import java.nio.file.Files;
 import java.nio.file.Paths;
 import java.nio.file.attribute.BasicFileAttributes;
@@ -20,6 +21,8 @@ import org.apache.pdfbox.pdmodel.interactive.documentnavigation.outline.PDOutlin
 import org.apache.pdfbox.pdmodel.interactive.form.PDAcroForm;
 import org.apache.pdfbox.pdmodel.interactive.form.PDField;
 import org.apache.pdfbox.pdmodel.interactive.form.PDSignatureField;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.multipart.MultipartFile;
@@ -111,6 +114,32 @@ public class MergeController {
         }
     }
 
+    // Parse client file IDs from JSON string
+    private String[] parseClientFileIds(String clientFileIds) {
+        if (clientFileIds == null || clientFileIds.trim().isEmpty()) {
+            return new String[0];
+        }
+        try {
+            // Simple JSON array parsing - remove brackets and split by comma
+            String trimmed = clientFileIds.trim();
+            if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+                String inside = trimmed.substring(1, trimmed.length() - 1).trim();
+                if (inside.isEmpty()) {
+                    return new String[0];
+                }
+                String[] parts = inside.split(",");
+                String[] result = new String[parts.length];
+                for (int i = 0; i < parts.length; i++) {
+                    result[i] = parts[i].trim().replaceAll("^\"|\"$", "");
+                }
+                return result;
+            }
+        } catch (Exception e) {
+            log.warn("Failed to parse client file IDs: {}", clientFileIds, e);
+        }
+        return new String[0];
+    }
+
     // Adds a table of contents to the merged document using filenames as chapter titles
     private void addTableOfContents(PDDocument mergedDocument, MultipartFile[] files) {
         // Create the document outline
@@ -177,15 +206,48 @@ public class MergeController {
 
             PDFMergerUtility mergerUtility = new PDFMergerUtility();
             long totalSize = 0;
-            for (MultipartFile multipartFile : files) {
+            List<Integer> invalidIndexes = new ArrayList<>();
+            for (int index = 0; index < files.length; index++) {
+                MultipartFile multipartFile = files[index];
                 totalSize += multipartFile.getSize();
                 File tempFile =
                         GeneralUtils.convertMultipartFileToFile(
                                 multipartFile); // Convert MultipartFile to File
                 filesToDelete.add(tempFile); // Add temp file to the list for later deletion
+
+                // Pre-validate each PDF so we can report which one(s) are broken
+                // Use the original MultipartFile to avoid deleting the tempFile during validation
+                try (PDDocument ignored = pdfDocumentFactory.load(multipartFile)) {
+                    // OK
+                } catch (IOException e) {
+                    ExceptionUtils.logException("PDF pre-validate", e);
+                    invalidIndexes.add(index);
+                }
                 mergerUtility.addSource(tempFile); // Add source file to the merger utility
             }
 
+            if (!invalidIndexes.isEmpty()) {
+                // Parse client file IDs (always present from frontend)
+                String[] clientIds = parseClientFileIds(request.getClientFileIds());
+
+                // Map invalid indexes to client IDs
+                List<String> errorFileIds = new ArrayList<>();
+                for (Integer index : invalidIndexes) {
+                    if (index < clientIds.length) {
+                        errorFileIds.add(clientIds[index]);
+                    }
+                }
+
+                String payload =
+                        String.format(
+                                "{\"errorFileIds\":%s,\"message\":\"Some of the selected files can't be merged\"}",
+                                errorFileIds.toString());
+
+                return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY)
+                        .header("Content-Type", MediaType.APPLICATION_JSON_VALUE)
+                        .body(payload.getBytes(StandardCharsets.UTF_8));
+            }
+
             mergedTempFile = Files.createTempFile("merged-", ".pdf").toFile();
             mergerUtility.setDestinationFileName(mergedTempFile.getAbsolutePath());
 

app/core/src/main/java/stirling/software/SPDF/controller/api/misc/ConfigController.java

@@ -10,21 +10,32 @@ import org.springframework.web.bind.annotation.RequestParam;
 
 import io.swagger.v3.oas.annotations.Hidden;
 
-import lombok.RequiredArgsConstructor;
-
 import stirling.software.SPDF.config.EndpointConfiguration;
 import stirling.software.common.annotations.api.ConfigApi;
 import stirling.software.common.configuration.AppConfig;
 import stirling.software.common.model.ApplicationProperties;
+import stirling.software.common.service.ServerCertificateServiceInterface;
 
 @ConfigApi
-@RequiredArgsConstructor
 @Hidden
 public class ConfigController {
 
     private final ApplicationProperties applicationProperties;
     private final ApplicationContext applicationContext;
     private final EndpointConfiguration endpointConfiguration;
+    private final ServerCertificateServiceInterface serverCertificateService;
+
+    public ConfigController(
+            ApplicationProperties applicationProperties,
+            ApplicationContext applicationContext,
+            EndpointConfiguration endpointConfiguration,
+            @org.springframework.beans.factory.annotation.Autowired(required = false)
+                    ServerCertificateServiceInterface serverCertificateService) {
+        this.applicationProperties = applicationProperties;
+        this.applicationContext = applicationContext;
+        this.endpointConfiguration = endpointConfiguration;
+        this.serverCertificateService = serverCertificateService;
+    }
 
     @GetMapping("/app-config")
     public ResponseEntity<Map<String, Object>> getAppConfig() {
@@ -58,6 +69,11 @@ public class ConfigController {
             // Premium/Enterprise settings
             configData.put("premiumEnabled", applicationProperties.getPremium().isEnabled());
 
+            // Server certificate settings
+            configData.put(
+                    "serverCertificateEnabled",
+                    serverCertificateService != null && serverCertificateService.isEnabled());
+
             // Legal settings
             configData.put(
                     "termsAndConditions", applicationProperties.getLegal().getTermsAndConditions());

app/core/src/main/java/stirling/software/SPDF/controller/api/misc/StampController.java

@@ -237,34 +237,54 @@ public class StampController {
 
         PDRectangle pageSize = page.getMediaBox();
         float x, y;
-
-        if (overrideX >= 0 && overrideY >= 0) {
-            // Use override values if provided
-            x = overrideX;
-            y = overrideY;
-        } else {
-            x = calculatePositionX(pageSize, position, fontSize, font, fontSize, stampText, margin);
-            y =
-                    calculatePositionY(
-                            pageSize, position, calculateTextCapHeight(font, fontSize), margin);
-        }
         // Split the stampText into multiple lines
-        String[] lines = stampText.split("\\\\n");
+        String[] lines = stampText.split("\\r?\\n|\\\\n");
 
         // Calculate dynamic line height based on font ascent and descent
         float ascent = font.getFontDescriptor().getAscent();
         float descent = font.getFontDescriptor().getDescent();
         float lineHeight = ((ascent - descent) / 1000) * fontSize;
 
+        // Compute a single pivot for the entire text block to avoid line-by-line wobble
+        float capHeight = calculateTextCapHeight(font, fontSize);
+        float blockHeight = Math.max(lineHeight, lineHeight * Math.max(1, lines.length));
+        float maxWidth = 0f;
+        for (String ln : lines) {
+            maxWidth = Math.max(maxWidth, calculateTextWidth(ln, font, fontSize));
+        }
+
+        if (overrideX >= 0 && overrideY >= 0) {
+            // Use override values if provided
+            x = overrideX;
+            y = overrideY;
+        } else {
+            // Base positioning on the true multi-line block size
+            x = calculatePositionX(pageSize, position, maxWidth, null, 0, null, margin);
+            y = calculatePositionY(pageSize, position, blockHeight, margin);
+        }
+
+        // After anchoring the block, draw from the top line downward
+        float adjustedX = x;
+        float adjustedY = y;
+        float pivotX = adjustedX + maxWidth / 2f;
+        float pivotY = adjustedY + blockHeight / 2f;
+
+        // Apply rotation about the block center at the graphics state level
+        contentStream.saveGraphicsState();
+        contentStream.transform(Matrix.getTranslateInstance(pivotX, pivotY));
+        contentStream.transform(Matrix.getRotateInstance(Math.toRadians(rotation), 0, 0));
+        contentStream.transform(Matrix.getTranslateInstance(-pivotX, -pivotY));
+
         contentStream.beginText();
         for (int i = 0; i < lines.length; i++) {
             String line = lines[i];
-            // Set the text matrix for each line with rotation
-            contentStream.setTextMatrix(
-                    Matrix.getRotateInstance(Math.toRadians(rotation), x, y - (i * lineHeight)));
+            // Start from top line: yTop = adjustedY + blockHeight - capHeight
+            float yLine = adjustedY + blockHeight - capHeight - (i * lineHeight);
+            contentStream.setTextMatrix(Matrix.getTranslateInstance(adjustedX, yLine));
             contentStream.showText(line);
         }
         contentStream.endText();
+        contentStream.restoreGraphicsState();
     }
 
     private void addImageStamp(
@@ -308,9 +328,17 @@ public class StampController {
         }
 
         contentStream.saveGraphicsState();
-        contentStream.transform(Matrix.getTranslateInstance(x, y));
+        // Rotate and scale about the center of the image
+        float centerX = x + (desiredPhysicalWidth / 2f);
+        float centerY = y + (desiredPhysicalHeight / 2f);
+        contentStream.transform(Matrix.getTranslateInstance(centerX, centerY));
         contentStream.transform(Matrix.getRotateInstance(Math.toRadians(rotation), 0, 0));
-        contentStream.drawImage(xobject, 0, 0, desiredPhysicalWidth, desiredPhysicalHeight);
+        contentStream.drawImage(
+                xobject,
+                -desiredPhysicalWidth / 2f,
+                -desiredPhysicalHeight / 2f,
+                desiredPhysicalWidth,
+                desiredPhysicalHeight);
         contentStream.restoreGraphicsState();
     }
 

app/core/src/main/java/stirling/software/SPDF/controller/api/security/CertSignController.java

@@ -53,6 +53,7 @@ import org.bouncycastle.operator.InputDecryptorProvider;
 import org.bouncycastle.operator.OperatorCreationException;
 import org.bouncycastle.pkcs.PKCS8EncryptedPrivateKeyInfo;
 import org.bouncycastle.pkcs.PKCSException;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.core.io.ClassPathResource;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
@@ -68,13 +69,13 @@ import io.micrometer.common.util.StringUtils;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 
-import lombok.RequiredArgsConstructor;
 import lombok.extern.slf4j.Slf4j;
 
 import stirling.software.SPDF.config.swagger.StandardPdfResponse;
 import stirling.software.SPDF.model.api.security.SignPDFWithCertRequest;
 import stirling.software.common.annotations.AutoJobPostMapping;
 import stirling.software.common.service.CustomPDFDocumentFactory;
+import stirling.software.common.service.ServerCertificateServiceInterface;
 import stirling.software.common.util.ExceptionUtils;
 import stirling.software.common.util.WebResponseUtils;
 
@@ -82,7 +83,6 @@ import stirling.software.common.util.WebResponseUtils;
 @RequestMapping("/api/v1/security")
 @Slf4j
 @Tag(name = "Security", description = "Security APIs")
-@RequiredArgsConstructor
 public class CertSignController {
 
     static {
@@ -102,6 +102,15 @@ public class CertSignController {
     }
 
     private final CustomPDFDocumentFactory pdfDocumentFactory;
+    private final ServerCertificateServiceInterface serverCertificateService;
+
+    public CertSignController(
+            CustomPDFDocumentFactory pdfDocumentFactory,
+            @Autowired(required = false)
+                    ServerCertificateServiceInterface serverCertificateService) {
+        this.pdfDocumentFactory = pdfDocumentFactory;
+        this.serverCertificateService = serverCertificateService;
+    }
 
     private static void sign(
             CustomPDFDocumentFactory pdfDocumentFactory,
@@ -177,6 +186,7 @@ public class CertSignController {
         }
 
         KeyStore ks = null;
+        String keystorePassword = password;
 
         switch (certType) {
             case "PEM":
@@ -195,6 +205,24 @@ public class CertSignController {
                 ks = KeyStore.getInstance("JKS");
                 ks.load(jksfile.getInputStream(), password.toCharArray());
                 break;
+            case "SERVER":
+                if (serverCertificateService == null) {
+                    throw ExceptionUtils.createIllegalArgumentException(
+                            "error.serverCertificateNotAvailable",
+                            "Server certificate service is not available in this edition");
+                }
+                if (!serverCertificateService.isEnabled()) {
+                    throw ExceptionUtils.createIllegalArgumentException(
+                            "error.serverCertificateDisabled",
+                            "Server certificate feature is disabled");
+                }
+                if (!serverCertificateService.hasServerCertificate()) {
+                    throw ExceptionUtils.createIllegalArgumentException(
+                            "error.serverCertificateNotFound", "No server certificate configured");
+                }
+                ks = serverCertificateService.getServerKeyStore();
+                keystorePassword = serverCertificateService.getServerCertificatePassword();
+                break;
             default:
                 throw ExceptionUtils.createIllegalArgumentException(
                         "error.invalidArgument",
@@ -202,7 +230,7 @@ public class CertSignController {
                         "certificate type: " + certType);
         }
 
-        CreateSignature createSignature = new CreateSignature(ks, password.toCharArray());
+        CreateSignature createSignature = new CreateSignature(ks, keystorePassword.toCharArray());
         ByteArrayOutputStream baos = new ByteArrayOutputStream();
         sign(
                 pdfDocumentFactory,

app/core/src/main/java/stirling/software/SPDF/model/api/general/BookletImpositionRequest.java

@@ -0,0 +1,54 @@
+package stirling.software.SPDF.model.api.general;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+import stirling.software.common.model.api.PDFFile;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+public class BookletImpositionRequest extends PDFFile {
+
+    @Schema(
+            description =
+                    "The number of pages per side for booklet printing (always 2 for proper booklet).",
+            type = "number",
+            defaultValue = "2",
+            requiredMode = Schema.RequiredMode.REQUIRED,
+            allowableValues = {"2"})
+    private int pagesPerSheet = 2;
+
+    @Schema(description = "Boolean for if you wish to add border around the pages")
+    private Boolean addBorder = false;
+
+    @Schema(
+            description = "The spine location for the booklet.",
+            type = "string",
+            defaultValue = "LEFT",
+            allowableValues = {"LEFT", "RIGHT"})
+    private String spineLocation = "LEFT";
+
+    @Schema(description = "Add gutter margin (inner margin for binding)")
+    private Boolean addGutter = false;
+
+    @Schema(
+            description = "Gutter margin size in points (used when addGutter is true)",
+            type = "number",
+            defaultValue = "12")
+    private float gutterSize = 12f;
+
+    @Schema(description = "Generate both front and back sides (double-sided printing)")
+    private Boolean doubleSided = true;
+
+    @Schema(
+            description = "For manual duplex: which pass to generate",
+            type = "string",
+            defaultValue = "BOTH",
+            allowableValues = {"BOTH", "FIRST", "SECOND"})
+    private String duplexPass = "BOTH";
+
+    @Schema(description = "Flip back sides for short-edge duplex printing (default is long-edge)")
+    private Boolean flipOnShortEdge = false;
+}

app/core/src/main/java/stirling/software/SPDF/model/api/general/MergePdfsRequest.java

@@ -39,4 +39,10 @@ public class MergePdfsRequest extends MultiplePDFFiles {
             requiredMode = Schema.RequiredMode.NOT_REQUIRED,
             defaultValue = "false")
     private boolean generateToc = false;
+
+    @Schema(
+            description =
+                    "JSON array of client-provided IDs for each uploaded file (same order as fileInput)",
+            requiredMode = Schema.RequiredMode.NOT_REQUIRED)
+    private String clientFileIds;
 }

app/core/src/main/java/stirling/software/SPDF/model/api/security/SignPDFWithCertRequest.java

@@ -15,7 +15,7 @@ public class SignPDFWithCertRequest extends PDFFile {
 
     @Schema(
             description = "The type of the digital certificate",
-            allowableValues = {"PEM", "PKCS12", "JKS"},
+            allowableValues = {"PEM", "PKCS12", "JKS", "SERVER"},
             requiredMode = Schema.RequiredMode.REQUIRED)
     private String certType;
 

app/core/src/main/resources/settings.yml.template

@@ -114,6 +114,11 @@ system:
   enableUrlToPDF: false # Set to 'true' to enable URL to PDF, INTERNAL ONLY, known security issues, should not be used externally
   disableSanitize: false # set to true to disable Sanitize HTML; (can lead to injections in HTML)
   maxDPI: 500 # Maximum allowed DPI for PDF to image conversion
+  serverCertificate:
+    enabled: true # Enable server-side certificate for "Sign with Stirling-PDF" option
+    organizationName: Stirling-PDF # Organization name for generated certificates
+    validity: 365 # Certificate validity in days
+    regenerateOnStartup: false # Generate new certificate on each startup
   html:
     urlSecurity:
       enabled: true # Enable URL security restrictions for HTML processing

app/proprietary/src/main/java/stirling/software/proprietary/configuration/ServerCertificateInitializer.java

@@ -0,0 +1,27 @@
+package stirling.software.proprietary.configuration;
+
+import org.springframework.boot.context.event.ApplicationReadyEvent;
+import org.springframework.context.event.EventListener;
+import org.springframework.stereotype.Component;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+
+import stirling.software.common.service.ServerCertificateServiceInterface;
+
+@Component
+@RequiredArgsConstructor
+@Slf4j
+public class ServerCertificateInitializer {
+
+    private final ServerCertificateServiceInterface serverCertificateService;
+
+    @EventListener(ApplicationReadyEvent.class)
+    public void initializeServerCertificate() {
+        try {
+            serverCertificateService.initializeServerCertificate();
+        } catch (Exception e) {
+            log.error("Failed to initialize server certificate", e);
+        }
+    }
+}

app/proprietary/src/main/java/stirling/software/proprietary/security/controller/api/ServerCertificateController.java

@@ -0,0 +1,144 @@
+package stirling.software.proprietary.security.controller.api;
+
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;
+
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.Parameter;
+import io.swagger.v3.oas.annotations.tags.Tag;
+
+import lombok.RequiredArgsConstructor;
+import lombok.extern.slf4j.Slf4j;
+
+import stirling.software.common.service.ServerCertificateServiceInterface;
+
+@RestController
+@RequestMapping("/api/v1/admin/server-certificate")
+@Slf4j
+@Tag(
+        name = "Admin - Server Certificate",
+        description = "Admin APIs for server certificate management")
+@RequiredArgsConstructor
+@PreAuthorize("hasRole('ADMIN')")
+public class ServerCertificateController {
+
+    private final ServerCertificateServiceInterface serverCertificateService;
+
+    @GetMapping("/info")
+    @Operation(
+            summary = "Get server certificate information",
+            description = "Returns information about the current server certificate")
+    public ResponseEntity<ServerCertificateServiceInterface.ServerCertificateInfo>
+            getServerCertificateInfo() {
+        try {
+            ServerCertificateServiceInterface.ServerCertificateInfo info =
+                    serverCertificateService.getServerCertificateInfo();
+            return ResponseEntity.ok(info);
+        } catch (Exception e) {
+            log.error("Failed to get server certificate info", e);
+            return ResponseEntity.internalServerError().build();
+        }
+    }
+
+    @PostMapping("/upload")
+    @Operation(
+            summary = "Upload server certificate",
+            description =
+                    "Upload a new PKCS12 certificate file to be used as the server certificate")
+    public ResponseEntity<String> uploadServerCertificate(
+            @Parameter(description = "PKCS12 certificate file", required = true)
+                    @RequestParam("file")
+                    MultipartFile file,
+            @Parameter(description = "Certificate password", required = true)
+                    @RequestParam("password")
+                    String password) {
+
+        if (file.isEmpty()) {
+            return ResponseEntity.badRequest().body("Certificate file cannot be empty");
+        }
+
+        if (!file.getOriginalFilename().toLowerCase().endsWith(".p12")
+                && !file.getOriginalFilename().toLowerCase().endsWith(".pfx")) {
+            return ResponseEntity.badRequest()
+                    .body("Only PKCS12 (.p12 or .pfx) files are supported");
+        }
+
+        try {
+            serverCertificateService.uploadServerCertificate(file.getInputStream(), password);
+            return ResponseEntity.ok("Server certificate uploaded successfully");
+        } catch (IllegalArgumentException e) {
+            log.warn("Invalid certificate upload: {}", e.getMessage());
+            return ResponseEntity.badRequest().body("Invalid certificate or password.");
+        } catch (Exception e) {
+            log.error("Failed to upload server certificate", e);
+            return ResponseEntity.internalServerError().body("Failed to upload server certificate");
+        }
+    }
+
+    @DeleteMapping
+    @Operation(
+            summary = "Delete server certificate",
+            description = "Delete the current server certificate")
+    public ResponseEntity<String> deleteServerCertificate() {
+        try {
+            serverCertificateService.deleteServerCertificate();
+            return ResponseEntity.ok("Server certificate deleted successfully");
+        } catch (Exception e) {
+            log.error("Failed to delete server certificate", e);
+            return ResponseEntity.internalServerError().body("Failed to delete server certificate");
+        }
+    }
+
+    @PostMapping("/generate")
+    @Operation(
+            summary = "Generate new server certificate",
+            description = "Generate a new self-signed server certificate")
+    public ResponseEntity<String> generateServerCertificate() {
+        try {
+            serverCertificateService.deleteServerCertificate(); // Remove existing if any
+            serverCertificateService.initializeServerCertificate(); // Generate new
+            return ResponseEntity.ok("New server certificate generated successfully");
+        } catch (Exception e) {
+            log.error("Failed to generate server certificate", e);
+            return ResponseEntity.internalServerError()
+                    .body("Failed to generate server certificate");
+        }
+    }
+
+    @GetMapping("/certificate")
+    @Operation(
+            summary = "Download server certificate",
+            description = "Download the server certificate in DER format for validation purposes")
+    public ResponseEntity<byte[]> getServerCertificate() {
+        try {
+            if (!serverCertificateService.hasServerCertificate()) {
+                return ResponseEntity.notFound().build();
+            }
+
+            byte[] certificate = serverCertificateService.getServerCertificatePublicKey();
+
+            return ResponseEntity.ok()
+                    .header(
+                            HttpHeaders.CONTENT_DISPOSITION,
+                            "attachment; filename=\"server-cert.cer\"")
+                    .contentType(MediaType.valueOf("application/pkix-cert"))
+                    .body(certificate);
+        } catch (Exception e) {
+            log.error("Failed to get server certificate", e);
+            return ResponseEntity.internalServerError().build();
+        }
+    }
+
+    @GetMapping("/enabled")
+    @Operation(
+            summary = "Check if server certificate feature is enabled",
+            description =
+                    "Returns whether the server certificate feature is enabled in configuration")
+    public ResponseEntity<Boolean> isServerCertificateEnabled() {
+        return ResponseEntity.ok(serverCertificateService.isEnabled());
+    }
+}

app/proprietary/src/main/java/stirling/software/proprietary/service/ServerCertificateService.java

@@ -0,0 +1,252 @@
+package stirling.software.proprietary.service;
+
+import java.io.*;
+import java.math.BigInteger;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.security.*;
+import java.security.cert.Certificate;
+import java.security.cert.X509Certificate;
+import java.util.Date;
+
+import org.bouncycastle.asn1.x500.X500Name;
+import org.bouncycastle.asn1.x509.BasicConstraints;
+import org.bouncycastle.asn1.x509.ExtendedKeyUsage;
+import org.bouncycastle.asn1.x509.Extension;
+import org.bouncycastle.asn1.x509.KeyPurposeId;
+import org.bouncycastle.asn1.x509.KeyUsage;
+import org.bouncycastle.cert.X509CertificateHolder;
+import org.bouncycastle.cert.jcajce.JcaX509CertificateConverter;
+import org.bouncycastle.cert.jcajce.JcaX509ExtensionUtils;
+import org.bouncycastle.cert.jcajce.JcaX509v3CertificateBuilder;
+import org.bouncycastle.jce.provider.BouncyCastleProvider;
+import org.bouncycastle.operator.ContentSigner;
+import org.bouncycastle.operator.jcajce.JcaContentSignerBuilder;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import lombok.extern.slf4j.Slf4j;
+
+import stirling.software.common.configuration.InstallationPathConfig;
+import stirling.software.common.service.ServerCertificateServiceInterface;
+
+@Service
+@Slf4j
+public class ServerCertificateService implements ServerCertificateServiceInterface {
+
+    private static final String KEYSTORE_FILENAME = "server-certificate.p12";
+    private static final String KEYSTORE_ALIAS = "stirling-pdf-server";
+    private static final String DEFAULT_PASSWORD = "stirling-pdf-server-cert";
+
+    @Value("${system.serverCertificate.enabled:false}")
+    private boolean enabled;
+
+    @Value("${system.serverCertificate.organizationName:Stirling-PDF}")
+    private String organizationName;
+
+    @Value("${system.serverCertificate.validity:365}")
+    private int validityDays;
+
+    @Value("${system.serverCertificate.regenerateOnStartup:false}")
+    private boolean regenerateOnStartup;
+
+    static {
+        Security.addProvider(new BouncyCastleProvider());
+    }
+
+    private Path getKeystorePath() {
+        return Paths.get(InstallationPathConfig.getConfigPath(), KEYSTORE_FILENAME);
+    }
+
+    public boolean isEnabled() {
+        return enabled;
+    }
+
+    public boolean hasServerCertificate() {
+        return Files.exists(getKeystorePath());
+    }
+
+    public void initializeServerCertificate() {
+        if (!enabled) {
+            log.debug("Server certificate feature is disabled");
+            return;
+        }
+
+        Path keystorePath = getKeystorePath();
+
+        if (!Files.exists(keystorePath) || regenerateOnStartup) {
+            try {
+                generateServerCertificate();
+                log.info("Generated new server certificate at: {}", keystorePath);
+            } catch (Exception e) {
+                log.error("Failed to generate server certificate", e);
+            }
+        } else {
+            log.info("Server certificate already exists at: {}", keystorePath);
+        }
+    }
+
+    public KeyStore getServerKeyStore() throws Exception {
+        if (!enabled || !hasServerCertificate()) {
+            throw new IllegalStateException("Server certificate is not available");
+        }
+
+        KeyStore keyStore = KeyStore.getInstance("PKCS12");
+        try (FileInputStream fis = new FileInputStream(getKeystorePath().toFile())) {
+            keyStore.load(fis, DEFAULT_PASSWORD.toCharArray());
+        }
+        return keyStore;
+    }
+
+    public String getServerCertificatePassword() {
+        return DEFAULT_PASSWORD;
+    }
+
+    public X509Certificate getServerCertificate() throws Exception {
+        KeyStore keyStore = getServerKeyStore();
+        return (X509Certificate) keyStore.getCertificate(KEYSTORE_ALIAS);
+    }
+
+    public byte[] getServerCertificatePublicKey() throws Exception {
+        X509Certificate cert = getServerCertificate();
+        return cert.getEncoded();
+    }
+
+    public void uploadServerCertificate(InputStream p12Stream, String password) throws Exception {
+        // Validate the uploaded certificate
+        KeyStore uploadedKeyStore = KeyStore.getInstance("PKCS12");
+        uploadedKeyStore.load(p12Stream, password.toCharArray());
+
+        // Find the first private key entry
+        String alias = null;
+        for (String a : java.util.Collections.list(uploadedKeyStore.aliases())) {
+            if (uploadedKeyStore.isKeyEntry(a)) {
+                alias = a;
+                break;
+            }
+        }
+
+        if (alias == null) {
+            throw new IllegalArgumentException("No private key found in uploaded certificate");
+        }
+
+        // Create new keystore with our standard alias and password
+        KeyStore newKeyStore = KeyStore.getInstance("PKCS12");
+        newKeyStore.load(null, null);
+
+        PrivateKey privateKey = (PrivateKey) uploadedKeyStore.getKey(alias, password.toCharArray());
+        Certificate[] chain = uploadedKeyStore.getCertificateChain(alias);
+
+        newKeyStore.setKeyEntry(KEYSTORE_ALIAS, privateKey, DEFAULT_PASSWORD.toCharArray(), chain);
+
+        // Save to server keystore location
+        Path keystorePath = getKeystorePath();
+        Files.createDirectories(keystorePath.getParent());
+
+        try (FileOutputStream fos = new FileOutputStream(keystorePath.toFile())) {
+            newKeyStore.store(fos, DEFAULT_PASSWORD.toCharArray());
+        }
+
+        log.info("Server certificate updated from uploaded file");
+    }
+
+    public void deleteServerCertificate() throws Exception {
+        Path keystorePath = getKeystorePath();
+        if (Files.exists(keystorePath)) {
+            Files.delete(keystorePath);
+            log.info("Server certificate deleted");
+        }
+    }
+
+    public ServerCertificateInfo getServerCertificateInfo() throws Exception {
+        if (!hasServerCertificate()) {
+            return new ServerCertificateInfo(false, null, null, null, null);
+        }
+
+        X509Certificate cert = getServerCertificate();
+        return new ServerCertificateInfo(
+                true,
+                cert.getSubjectX500Principal().getName(),
+                cert.getIssuerX500Principal().getName(),
+                cert.getNotBefore(),
+                cert.getNotAfter());
+    }
+
+    private void generateServerCertificate() throws Exception {
+        // Generate key pair
+        KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA", "BC");
+        keyPairGenerator.initialize(2048, new SecureRandom());
+        KeyPair keyPair = keyPairGenerator.generateKeyPair();
+
+        // Certificate details
+        X500Name subject =
+                new X500Name(
+                        "CN=" + organizationName + " Server, O=" + organizationName + ", C=US");
+        BigInteger serialNumber = BigInteger.valueOf(System.currentTimeMillis());
+        Date notBefore = new Date();
+        Date notAfter = new Date(notBefore.getTime() + ((long) validityDays * 24 * 60 * 60 * 1000));
+
+        // Build certificate
+        JcaX509v3CertificateBuilder certBuilder =
+                new JcaX509v3CertificateBuilder(
+                        subject, serialNumber, notBefore, notAfter, subject, keyPair.getPublic());
+
+        // Add PDF-specific certificate extensions for optimal PDF signing compatibility
+        JcaX509ExtensionUtils extUtils = new JcaX509ExtensionUtils();
+
+        // 1) End-entity certificate, not a CA (critical)
+        certBuilder.addExtension(Extension.basicConstraints, true, new BasicConstraints(false));
+
+        // 2) Key usage for PDF digital signatures (critical)
+        certBuilder.addExtension(
+                Extension.keyUsage,
+                true,
+                new KeyUsage(KeyUsage.digitalSignature | KeyUsage.nonRepudiation));
+
+        // 3) Extended key usage for document signing (non-critical, widely accepted)
+        certBuilder.addExtension(
+                Extension.extendedKeyUsage,
+                false,
+                new ExtendedKeyUsage(KeyPurposeId.id_kp_codeSigning));
+
+        // 4) Subject Key Identifier for chain building (non-critical)
+        certBuilder.addExtension(
+                Extension.subjectKeyIdentifier,
+                false,
+                extUtils.createSubjectKeyIdentifier(keyPair.getPublic()));
+
+        // 5) Authority Key Identifier for self-signed cert (non-critical)
+        certBuilder.addExtension(
+                Extension.authorityKeyIdentifier,
+                false,
+                extUtils.createAuthorityKeyIdentifier(keyPair.getPublic()));
+
+        // Sign certificate
+        ContentSigner signer =
+                new JcaContentSignerBuilder("SHA256WithRSA")
+                        .setProvider("BC")
+                        .build(keyPair.getPrivate());
+
+        X509CertificateHolder certHolder = certBuilder.build(signer);
+        X509Certificate cert =
+                new JcaX509CertificateConverter().setProvider("BC").getCertificate(certHolder);
+
+        // Create keystore
+        KeyStore keyStore = KeyStore.getInstance("PKCS12");
+        keyStore.load(null, null);
+        keyStore.setKeyEntry(
+                KEYSTORE_ALIAS,
+                keyPair.getPrivate(),
+                DEFAULT_PASSWORD.toCharArray(),
+                new Certificate[] {cert});
+
+        // Save keystore
+        Path keystorePath = getKeystorePath();
+        Files.createDirectories(keystorePath.getParent());
+
+        try (FileOutputStream fos = new FileOutputStream(keystorePath.toFile())) {
+            keyStore.store(fos, DEFAULT_PASSWORD.toCharArray());
+        }
+    }
+}

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/index.html

@@ -2,6 +2,7 @@
 <html lang="en-GB">
   <head>
     <meta charset="UTF-8" />
+    <base href="%BASE_URL%" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#000000" />

frontend/package.json

@@ -5,52 +5,52 @@
   "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE",
   "proxy": "http://localhost:8080",
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
-    "@embedpdf/core": "^1.1.1",
-    "@embedpdf/engines": "^1.1.1",
-    "@embedpdf/plugin-interaction-manager": "^1.1.1",
-    "@embedpdf/plugin-loader": "^1.1.1",
-    "@embedpdf/plugin-pan": "^1.1.1",
-    "@embedpdf/plugin-render": "^1.1.1",
-    "@embedpdf/plugin-rotate": "^1.1.1",
-    "@embedpdf/plugin-scroll": "^1.1.1",
-    "@embedpdf/plugin-search": "^1.1.1",
-    "@embedpdf/plugin-selection": "^1.1.1",
-    "@embedpdf/plugin-spread": "^1.1.1",
-    "@embedpdf/plugin-thumbnail": "^1.1.1",
-    "@embedpdf/plugin-tiling": "^1.1.1",
-    "@embedpdf/plugin-viewport": "^1.1.1",
-    "@embedpdf/plugin-zoom": "^1.1.1",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
+    "@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.0",
-    "@iconify/react": "^6.0.0",
-    "@mantine/core": "^8.0.1",
-    "@mantine/dates": "^8.0.1",
-    "@mantine/dropzone": "^8.0.1",
-    "@mantine/hooks": "^8.0.1",
-    "@mui/icons-material": "^7.1.0",
-    "@mui/material": "^7.1.0",
-    "@tailwindcss/postcss": "^4.1.8",
+    "@emotion/styled": "^11.14.1",
+    "@iconify/react": "^6.0.2",
+    "@mantine/core": "^8.3.1",
+    "@mantine/dates": "^8.3.1",
+    "@mantine/dropzone": "^8.3.1",
+    "@mantine/hooks": "^8.3.1",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@tailwindcss/postcss": "^4.1.13",
     "@tanstack/react-virtual": "^3.13.12",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^10.4.21",
-    "axios": "^1.9.0",
-    "i18next": "^25.2.1",
-    "i18next-browser-languagedetector": "^8.1.0",
+    "axios": "^1.12.2",
+    "i18next": "^25.5.2",
+    "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "jszip": "^3.10.1",
+    "license-report": "^6.8.0",
     "pdf-lib": "^1.17.1",
-    "pdfjs-dist": "^3.11.174",
-    "posthog-js": "^1.261.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-i18next": "^15.5.2",
-    "react-router-dom": "^7.6.0",
-    "tailwindcss": "^4.1.8",
-    "web-vitals": "^2.1.4"
+    "pdfjs-dist": "^5.4.149",
+    "posthog-js": "^1.268.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-i18next": "^15.7.3",
+    "react-router-dom": "^7.9.1",
+    "tailwindcss": "^4.1.13",
+    "web-vitals": "^5.1.0"
   },
   "scripts": {
     "predev": "npm run generate-icons",
@@ -70,12 +70,17 @@
     "test:coverage": "vitest --coverage",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
-    "test:e2e:install": "playwright install"
+    "test:e2e:install": "playwright install",
+    "update:minor": "npm outdated || npm update && npm audit fix && npm test",
+    "update:major": "npx npm-check-updates -u && npm install",
+    "update:interactive": "npx npm-check-updates -i",
+    "update:minor-strict": "npx npm-check-updates -u --target minor && npm install"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended"
     ]
   },
   "browserslist": {
@@ -91,26 +96,41 @@
     ]
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
-    "@iconify-json/material-symbols": "^1.2.33",
-    "@iconify/utils": "^3.0.1",
-    "@playwright/test": "^1.40.0",
-    "@types/node": "^24.2.1",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
-    "@vitejs/plugin-react": "^4.5.0",
-    "@vitest/coverage-v8": "^1.0.0",
-    "eslint": "^9.34.0",
-    "jsdom": "^23.0.0",
+    "@eslint/js": "^9.36.0",
+    "@iconify-json/material-symbols": "^1.2.37",
+    "@iconify/utils": "^3.0.2",
+    "@playwright/test": "^1.55.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
+    "@vitejs/plugin-react-swc": "^4.1.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "jsdom": "^27.0.0",
     "license-checker": "^25.0.1",
     "madge": "^8.0.0",
-    "postcss": "^8.5.3",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-preset-mantine": "^1.17.0",
+    "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vite": "^6.3.5",
-    "vitest": "^1.0.0"
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7",
+    "vitest": "^3.2.4"
+  },
+  "depcheck": {
+    "ignoreMatches": [
+      "@emotion/*",
+      "tailwindcss",
+      "@testing-library/user-event",
+      "@vitest/coverage-v8"
+    ]
   }
 }

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

@@ -68,6 +68,8 @@
   },
   "error": {
     "pdfPassword": "The PDF Document is passworded and either the password was not provided or was incorrect",
+    "encryptedPdfMustRemovePassword": "This PDF is encrypted or password-protected. Please unlock it before converting to PDF/A.",
+    "incorrectPasswordProvided": "The PDF password is incorrect or not provided.",
     "_value": "Error",
     "sorry": "Sorry for the issue!",
     "needHelp": "Need help / Found an issue?",
@@ -348,202 +350,257 @@
     "globalPopularity": "Global Popularity",
     "sortBy": "Sort by:",
     "multiTool": {
+      "tags": "multiple,tools",
       "title": "PDF Multi Tool",
       "desc": "Merge, Rotate, Rearrange, Split, and Remove pages"
     },
     "merge": {
+      "tags": "combine,join,unite",
       "title": "Merge",
       "desc": "Easily merge multiple PDFs into one."
     },
     "split": {
+      "tags": "divide,separate,break",
       "title": "Split",
       "desc": "Split PDFs into multiple documents"
     },
     "rotate": {
+      "tags": "turn,flip,orient",
       "title": "Rotate",
       "desc": "Easily rotate your PDFs."
     },
     "imageToPDF": {
+      "tags": "convert,image,transform",
       "title": "Image to PDF",
       "desc": "Convert a image (PNG, JPEG, GIF) to PDF."
     },
     "pdfToImage": {
+      "tags": "convert,image,extract",
       "title": "PDF to Image",
       "desc": "Convert a PDF to a image. (PNG, JPEG, GIF)"
     },
     "pdfOrganiser": {
+      "tags": "organize,rearrange,reorder",
       "title": "Organize",
       "desc": "Remove/Rearrange pages in any order"
     },
     "addImage": {
+      "tags": "insert,embed,place",
       "title": "Add image",
       "desc": "Adds a image onto a set location on the PDF"
     },
     "watermark": {
+      "tags": "stamp,mark,overlay",
       "title": "Add Watermark",
       "desc": "Add a custom watermark to your PDF document."
     },
     "permissions": {
+      "tags": "permissions,security,access",
       "title": "Change Permissions",
       "desc": "Change the permissions of your PDF document"
     },
     "pageRemover": {
+      "tags": "remove,delete,pages",
       "title": "Remove",
       "desc": "Delete unwanted pages from your PDF document."
     },
     "addPassword": {
+      "tags": "password,encrypt,secure",
       "title": "Add Password",
       "desc": "Encrypt your PDF document with a password."
     },
     "changePermissions": {
+      "tags": "permissions,restrictions,security",
       "title": "Change Permissions",
       "desc": "Change document restrictions and permissions."
     },
     "removePassword": {
+      "tags": "unlock,remove,password",
       "title": "Remove Password",
       "desc": "Remove password protection from your PDF document."
     },
     "compress": {
+      "tags": "shrink,reduce,optimize",
       "title": "Compress",
       "desc": "Compress PDFs to reduce their file size."
     },
     "sanitize": {
+      "tags": "clean,purge,remove",
       "title": "Sanitize",
       "desc": "Remove potentially harmful elements from PDF files."
     },
     "unlockPDFForms": {
+      "tags": "unlock,enable,edit",
       "title": "Unlock PDF Forms",
       "desc": "Remove read-only property of form fields in a PDF document."
     },
     "changeMetadata": {
+      "tags": "edit,modify,update",
       "title": "Change Metadata",
       "desc": "Change/Remove/Add metadata from a PDF document"
     },
     "fileToPDF": {
+      "tags": "convert,transform,change",
       "title": "Convert file to PDF",
       "desc": "Convert nearly any file to PDF (DOCX, PNG, XLS, PPT, TXT and more)"
     },
     "ocr": {
+      "tags": "extract,scan",
       "title": "OCR / Cleanup scans",
       "desc": "Cleanup scans and detects text from images within a PDF and re-adds it as text."
     },
     "extractImages": {
+      "tags": "pull,save,export",
       "title": "Extract Images",
       "desc": "Extracts all images from a PDF and saves them to zip"
     },
     "pdfToPDFA": {
+      "tags": "convert,archive,long-term",
       "title": "PDF to PDF/A",
       "desc": "Convert PDF to PDF/A for long-term storage"
     },
     "PDFToWord": {
+      "tags": "convert,word,doc",
       "title": "PDF to Word",
       "desc": "Convert PDF to Word formats (DOC, DOCX and ODT)"
     },
     "PDFToPresentation": {
+      "tags": "convert,presentation,ppt",
       "title": "PDF to Presentation",
       "desc": "Convert PDF to Presentation formats (PPT, PPTX and ODP)"
     },
     "PDFToText": {
+      "tags": "convert,text,rtf",
       "title": "PDF to RTF (Text)",
       "desc": "Convert PDF to Text or RTF format"
     },
     "PDFToHTML": {
+      "tags": "convert,html,web",
       "title": "PDF to HTML",
       "desc": "Convert PDF to HTML format"
     },
     "PDFToXML": {
+      "tags": "convert,xml,data",
       "title": "PDF to XML",
       "desc": "Convert PDF to XML format"
     },
     "ScannerImageSplit": {
+      "tags": "detect,split,photos",
       "title": "Detect/Split Scanned photos",
       "desc": "Splits multiple photos from within a photo/PDF"
     },
     "sign": {
+      "tags": "signature,autograph",
       "title": "Sign",
       "desc": "Adds signature to PDF by drawing, text or image"
     },
     "flatten": {
+      "tags": "simplify,remove,interactive",
       "title": "Flatten",
       "desc": "Remove all interactive elements and forms from a PDF"
     },
     "repair": {
+      "tags": "fix,restore",
       "title": "Repair",
       "desc": "Tries to repair a corrupt/broken PDF"
     },
     "removeBlanks": {
+      "tags": "delete,clean,empty",
       "title": "Remove Blank pages",
       "desc": "Detects and removes blank pages from a document"
     },
     "removeAnnotations": {
+      "tags": "delete,clean,strip",
       "title": "Remove Annotations",
       "desc": "Removes all comments/annotations from a PDF"
     },
     "compare": {
+      "tags": "difference",
       "title": "Compare",
       "desc": "Compares and shows the differences between 2 PDF Documents"
     },
     "certSign": {
+      "tags": "authenticate,PEM,P12,official,encrypt,sign,certificate,PKCS12,JKS,server,manual,auto",
       "title": "Sign with Certificate",
       "desc": "Signs a PDF with a Certificate/Key (PEM/P12)"
     },
     "removeCertSign": {
+      "tags": "remove,delete,unlock",
       "title": "Remove Certificate Sign",
       "desc": "Remove certificate signature from PDF"
     },
     "pageLayout": {
+      "tags": "layout,arrange,combine",
       "title": "Multi-Page Layout",
       "desc": "Merge multiple pages of a PDF document into a single page"
     },
+    "bookletImposition": {
+      "tags": "booklet,print,binding",
+      "title": "Booklet Imposition",
+      "desc": "Create booklets with proper page ordering and multi-page layout for printing and binding"
+    },
     "scalePages": {
+      "tags": "resize,adjust,scale",
       "title": "Adjust page size/scale",
       "desc": "Change the size/scale of a page and/or its contents."
     },
     "pipeline": {
+      "tags": "automation,script,workflow",
       "title": "Pipeline",
       "desc": "Run multiple actions on PDFs by defining pipeline scripts"
     },
     "addPageNumbers": {
+      "tags": "number,pagination,count",
       "title": "Add Page Numbers",
       "desc": "Add Page numbers throughout a document in a set location"
     },
     "auto-rename": {
+      "tags": "auto-detect,header-based,organize,relabel",
       "title": "Auto Rename PDF File",
       "desc": "Auto renames a PDF file based on its detected header"
     },
     "adjustContrast": {
+      "tags": "contrast,brightness,saturation",
       "title": "Adjust Colors/Contrast",
       "desc": "Adjust Contrast, Saturation and Brightness of a PDF"
     },
     "crop": {
+      "tags": "trim,cut,resize",
       "title": "Crop PDF",
       "desc": "Crop a PDF to reduce its size (maintains text!)"
     },
     "autoSplitPDF": {
+      "tags": "auto,split,QR",
       "title": "Auto Split Pages",
       "desc": "Auto Split Scanned PDF with physical scanned page splitter QR Code"
     },
     "sanitizePDF": {
+      "tags": "clean,purge,remove",
       "title": "Sanitize",
       "desc": "Remove scripts and other elements from PDF files"
     },
     "URLToPDF": {
+      "tags": "convert,url,website",
       "title": "URL/Website To PDF",
       "desc": "Converts any http(s)URL to PDF"
     },
     "HTMLToPDF": {
+      "tags": "convert,html,web",
       "title": "HTML to PDF",
       "desc": "Converts any HTML file or zip to PDF"
     },
     "MarkdownToPDF": {
+      "tags": "convert,markdown,md",
       "title": "Markdown to PDF",
       "desc": "Converts any Markdown file to PDF"
     },
     "PDFToMarkdown": {
+      "tags": "convert,markdown,md",
       "title": "PDF to Markdown",
       "desc": "Converts any PDF to Markdown"
     },
     "getPdfInfo": {
+      "tags": "info,metadata,details",
       "title": "Get ALL Info on PDF",
       "desc": "Grabs any and all information possible on PDFs"
     },
@@ -560,50 +617,62 @@
       "desc": "Searches and displays any JS injected into a PDF"
     },
     "autoRedact": {
+      "tags": "auto,redact,censor",
       "title": "Auto Redact",
       "desc": "Auto Redacts(Blacks out) text in a PDF based on input text"
     },
     "redact": {
+      "tags": "censor,blackout,hide",
       "title": "Manual Redaction",
       "desc": "Redacts a PDF based on selected text, drawn shapes and/or selected page(s)"
     },
     "PDFToCSV": {
+      "tags": "convert,csv,table",
       "title": "PDF to CSV",
       "desc": "Extracts Tables from a PDF converting it to CSV"
     },
     "split-by-size-or-count": {
+      "tags": "auto,split,size",
       "title": "Auto Split by Size/Count",
       "desc": "Split a single PDF into multiple documents based on size, page count, or document count"
     },
     "overlay-pdfs": {
+      "tags": "overlay,combine,stack",
       "title": "Overlay PDFs",
       "desc": "Overlays PDFs on-top of another PDF"
     },
     "split-by-sections": {
+      "tags": "split,sections,divide",
       "title": "Split PDF by Sections",
       "desc": "Divide each page of a PDF into smaller horizontal and vertical sections"
     },
     "AddStampRequest": {
+      "tags": "stamp,mark,seal",
       "title": "Add Stamp to PDF",
       "desc": "Add text or add image stamps at set locations"
     },
     "removeImage": {
+      "tags": "remove,delete,clean",
       "title": "Remove image",
       "desc": "Remove image from PDF to reduce file size"
     },
     "splitByChapters": {
+      "tags": "split,chapters,structure",
       "title": "Split PDF by Chapters",
       "desc": "Split a PDF into multiple files based on its chapter structure."
     },
     "validateSignature": {
+      "tags": "validate,verify,certificate",
       "title": "Validate PDF Signature",
       "desc": "Verify digital signatures and certificates in PDF documents"
     },
     "swagger": {
+      "tags": "API,documentation,test",
       "title": "API Documentation",
       "desc": "View API documentation and test endpoints"
     },
     "replace-color": {
+      "tags": "color,replace,invert",
       "title": "Replace and Invert Color",
       "desc": "Replace color for text and background in PDF and invert full color of pdf to reduce file size"
     }
@@ -700,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",
@@ -713,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": {
@@ -987,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",
@@ -1060,7 +1148,6 @@
     "info": "Python is not installed. It is required to run."
   },
   "sign": {
-    "tags": "authorize,initials,drawn-signature,text-sign,image-signature",
     "title": "Sign",
     "header": "Sign PDFs",
     "upload": "Upload Image",
@@ -1156,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",
@@ -1230,6 +1327,17 @@
     "addBorder": "Add Borders",
     "submit": "Submit"
   },
+  "bookletImposition": {
+    "tags": "booklet,imposition,printing,binding,folding,signature",
+    "title": "Booklet Imposition",
+    "header": "Booklet Imposition",
+    "submit": "Create Booklet",
+    "files": {
+    },
+    "error": {
+      "failed": "An error occurred while creating the booklet imposition."
+    }
+  },
   "scalePages": {
     "tags": "resize,modify,dimension,adapt",
     "title": "Adjust page-scale",
@@ -1455,6 +1563,7 @@
     "tags": "Stamp, Add image, center image, Watermark, PDF, Embed, Customize",
     "header": "Stamp PDF",
     "title": "Stamp PDF",
+    "stampSetup": "Stamp Setup",
     "stampType": "Stamp Type",
     "stampText": "Stamp Text",
     "stampImage": "Stamp Image",
@@ -1467,7 +1576,8 @@
     "overrideY": "Override Y Coordinate",
     "customMargin": "Custom Margin",
     "customColor": "Custom Text Color",
-    "submit": "Submit"
+    "submit": "Submit",
+    "noStampSelected": "No stamp selected. Return to Step 1."
   },
   "removeImagePdf": {
     "tags": "Remove Image,Page operations,Back end,server side"
@@ -1723,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",
@@ -1771,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",
@@ -1795,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",
@@ -2275,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,8 +1,15 @@
 #!/usr/bin/env node
 
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
+const { execSync } = require('node:child_process');
+const { existsSync, mkdirSync, writeFileSync, readFileSync } = require('node:fs');
+const path = require('node:path');
+
+const { argv } = require('node:process');
+const inputIdx = argv.indexOf('--input');
+const INPUT_FILE = inputIdx > -1 ? argv[inputIdx + 1] : null;
+const POSTPROCESS_ONLY = !!INPUT_FILE;
+
+// __dirname is available in CommonJS by default
 
 /**
  * Generate 3rd party licenses for frontend dependencies
@@ -14,59 +21,54 @@ const PACKAGE_JSON = path.join(__dirname, '..', 'package.json');
 
 // Ensure the output directory exists
 const outputDir = path.dirname(OUTPUT_FILE);
-if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
+if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, { recursive: true });
 }
 
 console.log('🔍 Generating frontend license report...');
 
 try {
-    // Install license-checker if not present
-    try {
-        require.resolve('license-checker');
-    } catch {
-        console.log('📦 Installing license-checker...');
-        execSync('npm install --save-dev license-checker', { stdio: 'inherit' });
+    // Safety guard: don't run this script on fork PRs (workflow setzt PR_IS_FORK)
+    if (process.env.PR_IS_FORK === 'true' && !POSTPROCESS_ONLY) {
+        console.error('Fork PR detected: only --input (postprocess-only) mode is allowed.');
+        process.exit(2);
     }
 
-    // Generate license report using license-checker (more reliable)
-    const licenseReport = execSync('npx license-checker --production --json', {
-        encoding: 'utf8',
-        cwd: path.dirname(PACKAGE_JSON)
-    });
-
     let licenseData;
-    try {
-        licenseData = JSON.parse(licenseReport);
-    } catch (parseError) {
-        console.error('❌ Failed to parse license data:', parseError.message);
-        console.error('Raw output:', licenseReport.substring(0, 500) + '...');
+    // Generate license report using pinned license-checker; disable lifecycle scripts
+    if (POSTPROCESS_ONLY) {
+      if (!INPUT_FILE || !existsSync(INPUT_FILE)) {
+        console.error('❌ --input file missing or not found');
         process.exit(1);
+      }
+      licenseData = JSON.parse(readFileSync(INPUT_FILE, 'utf8'));
+    } else {
+      const licenseReport = execSync(
+          // 'npx --yes license-checker@25.0.1 --production --json',
+          'npx --yes license-report --only=prod --output=json',
+          {
+              encoding: 'utf8',
+              cwd: path.dirname(PACKAGE_JSON),
+              env: { ...process.env, NPM_CONFIG_IGNORE_SCRIPTS: 'true' }
+          }
+      );
+      try {
+          licenseData = JSON.parse(licenseReport);
+      } catch (parseError) {
+          console.error('❌ Failed to parse license data:', parseError.message);
+          console.error('Raw output:', licenseReport.substring(0, 500) + '...');
+          process.exit(1);
+      }
     }
 
-    if (!licenseData || typeof licenseData !== 'object') {
+    if (!Array.isArray(licenseData)) {
         console.error('❌ Invalid license data structure');
         process.exit(1);
     }
 
     // Convert license-checker format to array
-    const licenseArray = Object.entries(licenseData).map(([key, value]) => {
-        let name, version;
-
-        // Handle scoped packages like @mantine/core@1.0.0
-        if (key.startsWith('@')) {
-            const parts = key.split('@');
-            name = `@${parts[1]}`;
-            version = parts[2];
-        } else {
-            // Handle regular packages like react@18.0.0
-            const lastAtIndex = key.lastIndexOf('@');
-            name = key.substring(0, lastAtIndex);
-            version = key.substring(lastAtIndex + 1);
-        }
-
-        // Normalize license types for edge cases
-        let licenseType = value.licenses;
+    const licenseArray = licenseData.map(dep => {
+        let licenseType = dep.licenseType;
 
         // Handle missing or null licenses
         if (!licenseType || licenseType === null || licenseType === undefined) {
@@ -88,13 +90,17 @@ try {
             licenseType = 'Unknown';
         }
 
+        if ( "posthog-js" === dep.name && licenseType.startsWith("SEE LICENSE IN LICENSE")) {
+            licenseType = "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE";
+        }
+
         return {
-            name: name,
-            version: version || value.version || 'unknown',
+            name: dep.name,
+            version: dep.installedVersion || dep.definedVersion || dep.remoteVersion || 'unknown',
             licenseType: licenseType,
-            repository: value.repository,
-            url: value.url,
-            link: value.licenseUrl
+            repository: dep.link,
+            url: dep.link,
+            link: dep.link
         };
     });
 
@@ -153,7 +159,7 @@ try {
 
         // Write license warnings to a separate file for CI/CD
         const warningsFile = path.join(__dirname, '..', 'src', 'assets', 'license-warnings.json');
-        fs.writeFileSync(warningsFile, JSON.stringify({
+        writeFileSync(warningsFile, JSON.stringify({
             warnings: problematicLicenses,
             generated: new Date().toISOString()
         }, null, 2));
@@ -163,7 +169,7 @@ try {
     }
 
     // Write to file
-    fs.writeFileSync(OUTPUT_FILE, JSON.stringify(transformedData, null, 4));
+    writeFileSync(OUTPUT_FILE, JSON.stringify(transformedData, null, 4));
 
     console.log(`✅ License report generated successfully!`);
     console.log(`📄 Found ${transformedData.dependencies.length} dependencies`);
@@ -274,7 +280,8 @@ function checkLicenseCompatibility(licenseSummary, licenseArray) {
         'MIT', 'MIT*', 'Apache-2.0', 'Apache License 2.0', 'BSD-2-Clause', 'BSD-3-Clause', 'BSD',
         'ISC', 'CC0-1.0', 'Public Domain', 'Unlicense', '0BSD', 'BlueOak-1.0.0',
         'Zlib', 'Artistic-2.0', 'Python-2.0', 'Ruby', 'MPL-2.0', 'CC-BY-4.0',
-        'SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE'
+        'SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE',
+        'SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE'
     ]);
 
     // Helper function to normalize license names for comparison

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/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/fileEditor/FileEditor.module.css

@@ -56,6 +56,20 @@
   border-bottom: 1px solid var(--header-selected-bg);
 }
 
+/* Error highlight (transient) */
+.headerError {
+  background: var(--color-red-200);
+  color: var(--text-primary);
+  border-bottom: 2px solid var(--color-red-500);
+}
+
+/* Unsupported (but not errored) header appearance */
+.headerUnsupported {
+  background: var(--unsupported-bar-bg); /* neutral gray */
+  color: #FFFFFF;
+  border-bottom: 1px solid var(--unsupported-bar-border);
+}
+
 /* Selected border color in light mode */
 :global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
   outline-color: var(--card-selected-border);
@@ -80,6 +94,7 @@
 
 .kebab {
   justify-self: end;
+  color: #FFFFFF !important;
 }
 
 /* Menu dropdown */
@@ -217,6 +232,22 @@
   height: 20px;
 }
 
+/* Error pill shown when a file failed processing */
+.errorPill {
+  margin-left: 1.75rem;
+  background: var(--color-red-500);
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 56px;
+  height: 20px;
+}
+
 /* Animations */
 @keyframes pulse {
   0%, 100% {

frontend/src/components/fileEditor/FileEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useRef, useMemo } from 'react';
 import {
-  Text, Center, Box, Notification, LoadingOverlay, Stack, Group, Portal
+  Text, Center, Box, LoadingOverlay, Stack, Group
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useFileSelection, useFileState, useFileManagement } from '../../contexts/FileContext';
@@ -11,6 +11,7 @@ import FileEditorThumbnail from './FileEditorThumbnail';
 import FilePickerModal from '../shared/FilePickerModal';
 import SkeletonLoader from '../shared/SkeletonLoader';
 import { FileId, StirlingFile } from '../../types/fileContext';
+import { alert } from '../toast';
 import { downloadBlob } from '../../utils/downloadUtils';
 
 
@@ -46,8 +47,16 @@ const FileEditor = ({
   // Get file selection context
   const { setSelectedFiles } = useFileSelection();
 
-  const [status, setStatus] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [_status, _setStatus] = useState<string | null>(null);
+  const [_error, _setError] = useState<string | null>(null);
+
+  // Toast helpers
+  const showStatus = useCallback((message: string, type: 'neutral' | 'success' | 'warning' | 'error' = 'neutral') => {
+    alert({ alertType: type, title: message, expandable: false, durationMs: 4000 });
+  }, []);
+  const showError = useCallback((message: string) => {
+    alert({ alertType: 'error', title: 'Error', body: message, expandable: true });
+  }, []);
   const [selectionMode, setSelectionMode] = useState(toolMode);
 
   // Enable selection mode automatically in tool mode
@@ -82,7 +91,7 @@ const FileEditor = ({
 
   // Process uploaded files using context
   const handleFileUpload = useCallback(async (uploadedFiles: File[]) => {
-    setError(null);
+    _setError(null);
 
     try {
       const allExtractedFiles: File[] = [];
@@ -157,18 +166,18 @@ const FileEditor = ({
 
       // Show any errors
       if (errors.length > 0) {
-        setError(errors.join('\n'));
+        showError(errors.join('\n'));
       }
 
       // Process all extracted files
       if (allExtractedFiles.length > 0) {
         // Add files to context (they will be processed automatically)
         await addFiles(allExtractedFiles);
-        setStatus(`Added ${allExtractedFiles.length} files`);
+        showStatus(`Added ${allExtractedFiles.length} files`, 'success');
       }
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to process files';
-      setError(errorMessage);
+      showError(errorMessage);
       console.error('File processing error:', err);
 
       // Reset extraction progress on error
@@ -206,7 +215,7 @@ const FileEditor = ({
       } else {
         // Check if we've hit the selection limit
         if (maxAllowed > 1 && currentSelectedIds.length >= maxAllowed) {
-          setStatus(`Maximum ${maxAllowed} files can be selected`);
+          showStatus(`Maximum ${maxAllowed} files can be selected`, 'warning');
           return;
         }
         newSelection = [...currentSelectedIds, contextFileId];
@@ -215,7 +224,7 @@ const FileEditor = ({
 
     // Update context (this automatically updates tool selection since they use the same action)
     setSelectedFiles(newSelection);
-  }, [setSelectedFiles, toolMode, setStatus, activeStirlingFileStubs]);
+  }, [setSelectedFiles, toolMode, _setStatus, activeStirlingFileStubs]);
 
 
   // File reordering handler for drag and drop
@@ -271,8 +280,8 @@ const FileEditor = ({
 
     // Update status
     const moveCount = filesToMove.length;
-    setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
-  }, [activeStirlingFileStubs, reorderFiles, setStatus]);
+    showStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
+  }, [activeStirlingFileStubs, reorderFiles, _setStatus]);
 
 
 
@@ -297,7 +306,7 @@ const FileEditor = ({
     if (record && file) {
        downloadBlob(file, file.name);
     }
-  }, [activeStirlingFileStubs, selectors, setStatus]);
+  }, [activeStirlingFileStubs, selectors, _setStatus]);
 
   const handleViewFile = useCallback((fileId: FileId) => {
     const record = activeStirlingFileStubs.find(r => r.id === fileId);
@@ -314,10 +323,10 @@ const FileEditor = ({
     try {
       // Use FileContext to handle loading stored files
       // The files are already in FileContext, just need to add them to active files
-      setStatus(`Loaded ${selectedFiles.length} files from storage`);
+      showStatus(`Loaded ${selectedFiles.length} files from storage`);
     } catch (err) {
       console.error('Error loading files from storage:', err);
-      setError('Failed to load some files from storage');
+      showError('Failed to load some files from storage');
     }
   }, []);
 
@@ -408,7 +417,7 @@ const FileEditor = ({
                   onToggleFile={toggleFile}
                   onDeleteFile={handleDeleteFile}
                   onViewFile={handleViewFile}
-                  onSetStatus={setStatus}
+                  _onSetStatus={showStatus}
                   onReorderFiles={handleReorderFiles}
                   onDownloadFile={handleDownloadFile}
                   toolMode={toolMode}
@@ -428,31 +437,7 @@ const FileEditor = ({
         onSelectFiles={handleLoadFromStorage}
       />
 
-      {status && (
-        <Portal>
-          <Notification
-            color="blue"
-            mt="md"
-            onClose={() => setStatus(null)}
-            style={{ position: 'fixed', bottom: 40, right: 80, zIndex: 10001 }}
-          >
-            {status}
-          </Notification>
-        </Portal>
-      )}
-
-      {error && (
-        <Portal>
-          <Notification
-            color="red"
-            mt="md"
-            onClose={() => setError(null)}
-            style={{ position: 'fixed', bottom: 80, right: 20, zIndex: 10001 }}
-          >
-            {error}
-          </Notification>
-        </Portal>
-      )}
+      
       </Box>
     </Dropzone>
   );

frontend/src/components/fileEditor/FileEditorThumbnail.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { Text, ActionIcon, CheckboxIndicator } from '@mantine/core';
+import { alert } from '../toast';
 import { useTranslation } from 'react-i18next';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
@@ -12,6 +13,7 @@ import { StirlingFileStub } from '../../types/fileContext';
 
 import styles from './FileEditor.module.css';
 import { useFileContext } from '../../contexts/FileContext';
+import { useFileState } from '../../contexts/file/fileHooks';
 import { FileId } from '../../types/file';
 import { formatFileSize } from '../../utils/fileUtils';
 import ToolChain from '../shared/ToolChain';
@@ -27,7 +29,7 @@ interface FileEditorThumbnailProps {
   onToggleFile: (fileId: FileId) => void;
   onDeleteFile: (fileId: FileId) => void;
   onViewFile: (fileId: FileId) => void;
-  onSetStatus: (status: string) => void;
+  _onSetStatus: (status: string) => void;
   onReorderFiles?: (sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => void;
   onDownloadFile: (fileId: FileId) => void;
   toolMode?: boolean;
@@ -40,13 +42,15 @@ const FileEditorThumbnail = ({
   selectedFiles,
   onToggleFile,
   onDeleteFile,
-  onSetStatus,
+  _onSetStatus,
   onReorderFiles,
   onDownloadFile,
   isSupported = true,
 }: FileEditorThumbnailProps) => {
   const { t } = useTranslation();
-  const { pinFile, unpinFile, isFilePinned, activeFiles } = useFileContext();
+  const { pinFile, unpinFile, isFilePinned, activeFiles, actions: fileActions } = useFileContext();
+  const { state } = useFileState();
+  const hasError = state.ui.errorFileIds.includes(file.id);
 
   // ---- Drag state ----
   const [isDragging, setIsDragging] = useState(false);
@@ -187,9 +191,20 @@ const FileEditorThumbnail = ({
   // ---- Card interactions ----
   const handleCardClick = () => {
     if (!isSupported) return;
+    // Clear error state if file has an error (click to clear error)
+    if (hasError) {
+      try { fileActions.clearFileError(file.id); } catch (_e) { void _e; }
+    }
     onToggleFile(file.id);
   };
 
+  // ---- Style helpers ----
+  const getHeaderClassName = () => {
+    if (hasError) return styles.headerError;
+    if (!isSupported) return styles.headerUnsupported;
+    return isSelected ? styles.headerSelected : styles.headerResting;
+  };
+
 
   return (
     <div
@@ -199,10 +214,7 @@ const FileEditorThumbnail = ({
       data-selected={isSelected}
       data-supported={isSupported}
       className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
-      style={{
-        opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
-        filter: isSupported ? 'none' : 'grayscale(50%)',
-      }}
+      style={{opacity: isDragging ? 0.9 : 1}}
       tabIndex={0}
       role="listitem"
       aria-selected={isSelected}
@@ -210,13 +222,16 @@ const FileEditorThumbnail = ({
     >
       {/* Header bar */}
       <div
-        className={`${styles.header} ${
-          isSelected ? styles.headerSelected : styles.headerResting
-        }`}
+        className={`${styles.header} ${getHeaderClassName()}`}
+        data-has-error={hasError}
       >
         {/* Logo/checkbox area */}
         <div className={styles.logoMark}>
-          {isSupported ? (
+          {hasError ? (
+            <div className={styles.errorPill}>
+              <span>{t('error._value', 'Error')}</span>
+            </div>
+          ) : isSupported ? (
             <CheckboxIndicator
               checked={isSelected}
               onChange={() => onToggleFile(file.id)}
@@ -263,10 +278,10 @@ const FileEditorThumbnail = ({
               if (actualFile) {
                 if (isPinned) {
                   unpinFile(actualFile);
-                  onSetStatus?.(`Unpinned ${file.name}`);
+                  alert({ alertType: 'neutral', title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
                 } else {
                   pinFile(actualFile);
-                  onSetStatus?.(`Pinned ${file.name}`);
+                  alert({ alertType: 'success', title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
                 }
               }
               setShowActions(false);
@@ -278,7 +293,7 @@ const FileEditorThumbnail = ({
 
           <button
             className={styles.actionRow}
-            onClick={() => { onDownloadFile(file.id); setShowActions(false); }}
+            onClick={() => { onDownloadFile(file.id); alert({ alertType: 'success', title: `Downloading ${file.name}`, expandable: false, durationMs: 2500 }); setShowActions(false); }}
           >
             <DownloadOutlinedIcon fontSize="small" />
             <span>{t('download', 'Download')}</span>
@@ -290,7 +305,7 @@ const FileEditorThumbnail = ({
             className={`${styles.actionRow} ${styles.actionDanger}`}
             onClick={() => {
               onDeleteFile(file.id);
-              onSetStatus(`Deleted ${file.name}`);
+              alert({ alertType: 'neutral', title: `Deleted ${file.name}`, expandable: false, durationMs: 3500 });
               setShowActions(false);
             }}
           >
@@ -328,7 +343,10 @@ const FileEditorThumbnail = ({
       </div>
 
       {/* Preview area */}
-      <div className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}>
+      <div
+        className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}
+        style={isSupported || hasError ? undefined : { filter: 'grayscale(80%)', opacity: 0.6 }}
+      >
         <div className={styles.previewPaper}>
           {file.thumbnailUrl && (
             <img

frontend/src/components/layout/Workbench.tsx

@@ -4,7 +4,6 @@ import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFileState } from '../../contexts/FileContext';
 import { useNavigationState, useNavigationActions } from '../../contexts/NavigationContext';
-import { useToolManagement } from '../../hooks/useToolManagement';
 import './Workbench.css';
 
 import TopControls from '../shared/TopControls';
@@ -14,6 +13,7 @@ import PageEditorControls from '../pageEditor/PageEditorControls';
 import Viewer from '../viewer/Viewer';
 import LandingPage from '../shared/LandingPage';
 import Footer from '../shared/Footer';
+import DismissAllErrorsButton from '../shared/DismissAllErrorsButton';
 
 // No props needed - component uses contexts directly
 export default function Workbench() {
@@ -39,8 +39,8 @@ export default function Workbench() {
   // Get navigation state - this is the source of truth
   const { selectedTool: selectedToolId } = useNavigationState();
 
-  // Get tool registry to look up selected tool
-  const { toolRegistry } = useToolManagement();
+  // Get tool registry from context (instead of direct hook call)
+  const { toolRegistry } = useToolWorkflow();
   const selectedTool = selectedToolId ? toolRegistry[selectedToolId] : null;
   const { addFiles } = useFileHandler();
 
@@ -149,9 +149,11 @@ export default function Workbench() {
       <TopControls
         currentView={currentView}
         setCurrentView={setCurrentView}
-        selectedToolKey={selectedToolId}
       />
 
+      {/* Dismiss All Errors Button */}
+      <DismissAllErrorsButton />
+
       {/* Main content area */}
       <Box
         className="flex-1 min-h-0 relative z-10 workbench-scrollable "

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/ButtonSelector.tsx

@@ -1,4 +1,5 @@
 import { Button, Group, Stack, Text } from "@mantine/core";
+import FitText from "./FitText";
 
 export interface ButtonOption<T> {
   value: T;
@@ -13,15 +14,19 @@ interface ButtonSelectorProps<T> {
   label?: string;
   disabled?: boolean;
   fullWidth?: boolean;
+  buttonClassName?: string;
+  textClassName?: string;
 }
 
-const ButtonSelector = <T extends string>({
+const ButtonSelector = <T extends string | number>({
   value,
   onChange,
   options,
   label = undefined,
   disabled = false,
   fullWidth = true,
+  buttonClassName,
+  textClassName,
 }: ButtonSelectorProps<T>) => {
   return (
     <Stack gap='var(--mantine-spacing-sm)'>
@@ -41,14 +46,24 @@ const ButtonSelector = <T extends string>({
             color={value === option.value ? 'var(--color-primary-500)' : 'var(--text-muted)'}
             onClick={() => onChange(option.value)}
             disabled={disabled || option.disabled}
+            className={buttonClassName}
             style={{
               flex: fullWidth ? 1 : undefined,
               height: 'auto',
               minHeight: '2.5rem',
-              fontSize: 'var(--mantine-font-size-sm)'
+              fontSize: 'var(--mantine-font-size-sm)',
+              lineHeight: '1.4',
+              paddingTop: '0.5rem',
+              paddingBottom: '0.5rem'
             }}
           >
-            {option.label}
+            <FitText
+              text={option.label}
+              lines={1}
+              minimumFontScale={0.5}
+              fontSize={10}
+              className={textClassName}
+            />
           </Button>
         ))}
       </Group>

frontend/src/components/shared/DismissAllErrorsButton.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Button, Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useFileState } from '../../contexts/FileContext';
+import { useFileActions } from '../../contexts/file/fileHooks';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface DismissAllErrorsButtonProps {
+  className?: string;
+}
+
+const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ className }) => {
+  const { t } = useTranslation();
+  const { state } = useFileState();
+  const { actions } = useFileActions();
+  
+  // Check if there are any files in error state
+  const hasErrors = state.ui.errorFileIds.length > 0;
+  
+  // Don't render if there are no errors
+  if (!hasErrors) {
+    return null;
+  }
+  
+  const handleDismissAllErrors = () => {
+    actions.clearAllFileErrors();
+  };
+  
+  return (
+    <Group className={className}>
+      <Button
+        variant="light"
+        color="red"
+        size="sm"
+        leftSection={<CloseIcon fontSize="small" />}
+        onClick={handleDismissAllErrors}
+        style={{
+          position: 'absolute',
+          top: '1rem',
+          right: '1rem',
+          zIndex: 1000,
+          pointerEvents: 'auto'
+        }}
+      >
+        {t('error.dismissAllErrors', 'Dismiss All Errors')} ({state.ui.errorFileIds.length})
+      </Button>
+    </Group>
+  );
+};
+
+export default DismissAllErrorsButton;

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.tsx

@@ -5,6 +5,7 @@ import LocalIcon from './LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileHandler } from '../../hooks/useFileHandler';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
+import { BASE_PATH } from '../../constants/app';
 
 const LandingPage = () => {
   const { addFiles } = useFileHandler();
@@ -72,7 +73,7 @@ const LandingPage = () => {
           }}
         >
           <img
-            src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoNoTextDark.svg' : '/branding/StirlingPDFLogoNoTextLight.svg'}
+            src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg` : `${BASE_PATH}/branding/StirlingPDFLogoNoTextLight.svg`}
             alt="Stirling PDF Logo"
             style={{
               height: 'auto',
@@ -98,7 +99,7 @@ const LandingPage = () => {
             {/* Stirling PDF Branding */}
             <Group gap="xs" align="center">
               <img
-                src={colorScheme === 'dark' ? '/branding/StirlingPDFLogoWhiteText.svg' : '/branding/StirlingPDFLogoGreyText.svg'}
+                src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
                 alt="Stirling PDF"
                 style={{ height: '2.2rem', width: 'auto' }}
               />

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/ObscuredOverlay.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styles from './ObscuredOverlay/ObscuredOverlay.module.css';
+
+type ObscuredOverlayProps = {
+  obscured: boolean;
+  overlayMessage?: React.ReactNode;
+  buttonText?: string;
+  onButtonClick?: () => void;
+  children: React.ReactNode;
+  // Optional border radius for the overlay container. If undefined, no radius is applied.
+  borderRadius?: string | number;
+};
+
+export default function ObscuredOverlay({
+  obscured,
+  overlayMessage,
+  buttonText,
+  onButtonClick,
+  children,
+  borderRadius,
+}: ObscuredOverlayProps) {
+  return (
+    <div className={styles.container}>
+      {children}
+      {obscured && (
+        <div
+          className={styles.overlay}
+          style={{
+            ...(borderRadius !== undefined ? { borderRadius } : {}),
+          }}
+        >
+          <div className={styles.overlayContent}>
+            {overlayMessage && (
+              <div className={styles.overlayMessage}>
+                {overlayMessage}
+              </div>
+            )}
+            {buttonText && onButtonClick && (
+              <button type="button" onClick={onButtonClick} className={styles.overlayButton}>
+                {buttonText}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+

frontend/src/components/shared/ObscuredOverlay/ObscuredOverlay.module.css

@@ -0,0 +1,41 @@
+.container {
+  position: relative;
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 16px;
+  color: #ffffff;
+  font-weight: 600;
+  background: rgba(16, 18, 27, 0.55);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  z-index: 2;
+}
+
+.overlayContent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+.overlayMessage {
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.overlayButton {
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+  color: #ffffff;
+  cursor: pointer;
+}

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,8 +1,11 @@
-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';
 import rainbowStyles from '../../styles/rainbow.module.css';
+import { ToastProvider } from '../toast';
+import ToastRenderer from '../toast/ToastRenderer';
+import { ToastPortalBinder } from '../toast';
 
 interface RainbowThemeContextType {
   themeMode: 'light' | 'dark' | 'rainbow';
@@ -44,7 +47,11 @@ export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
           className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
           style={{ minHeight: '100vh' }}
         >
-          {children}
+          <ToastProvider>
+            <ToastPortalBinder />
+            {children}
+            <ToastRenderer />
+          </ToastProvider>
         </div>
       </MantineProvider>
     </RainbowThemeContext.Provider>

frontend/src/components/shared/RightRail.tsx

@@ -4,7 +4,7 @@ import LocalIcon from './LocalIcon';
 import './rightRail/RightRail.css';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
 import { useRightRail } from '../../contexts/RightRailContext';
-import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext';
+import { useFileState, useFileSelection, useFileManagement, useFileContext } from '../../contexts/FileContext';
 import { useNavigationState } from '../../contexts/NavigationContext';
 import { useTranslation } from 'react-i18next';
 
@@ -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';
 
@@ -39,9 +40,13 @@ export default function RightRail() {
 
   // File state and selection
   const { state, selectors } = useFileState();
+  const { actions: fileActions } = useFileContext();
   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();
 
@@ -65,11 +70,16 @@ 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
       const allIds = state.files.ids;
       setSelectedFiles(allIds);
+      // Clear any previous error flags when selecting all
+      try { fileActions.clearAllFileErrors(); } catch (_e) { void _e; }
       return;
     }
 
@@ -82,6 +92,8 @@ export default function RightRail() {
   const handleDeselectAll = useCallback(() => {
     if (currentView === 'fileEditor' || currentView === 'viewer') {
       setSelectedFiles([]);
+      // Clear any previous error flags when deselecting all
+      try { fileActions.clearAllFileErrors(); } catch (_e) { void _e; }
       return;
     }
     if (currentView === 'pageEditor') {
@@ -90,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;
 
@@ -108,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;
@@ -440,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/Tooltip.tsx

@@ -6,6 +6,7 @@ import { useTooltipPosition } from '../../hooks/useTooltipPosition';
 import { TooltipTip } from '../../types/tips';
 import { TooltipContent } from './tooltip/TooltipContent';
 import { useSidebarContext } from '../../contexts/SidebarContext';
+import { BASE_PATH } from '../../constants/app';
 import styles from './tooltip/Tooltip.module.css';
 
 export interface TooltipProps {
@@ -328,7 +329,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
           <div className={styles['tooltip-logo']}>
             {header.logo || (
               <img
-                src="/logo-tooltip.svg"
+                src={`${BASE_PATH}/logo-tooltip.svg`}
                 alt="Stirling PDF"
                 style={{ width: '1.4rem', height: '1.4rem', display: 'block' }}
               />

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/Toast.README.md

@@ -0,0 +1,309 @@
+# Toast Component
+
+A global notification system with expandable content, progress tracking, and smart error coalescing. Provides an imperative API for showing success, error, warning, and neutral notifications with customizable content and behavior.
+
+---
+
+## Highlights
+
+* 🎯 **Global System**: Imperative API accessible from anywhere in the app via `alert()` function.
+* 🎨 **Four Alert Types**: Success (green), Error (red), Warning (yellow), Neutral (theme-aware).
+* 📱 **Expandable Content**: Collapsible toasts with chevron controls and smooth animations.
+* ⚡ **Smart Coalescing**: Duplicate error toasts merge with count badges (e.g., "Server error 4").
+* 📊 **Progress Tracking**: Built-in progress bars with completion animations.
+* 🎛️ **Customizable**: Rich JSX content, buttons with callbacks, custom icons.
+* 🌙 **Themeable**: Uses CSS variables; supports light/dark mode out of the box.
+* ♿ **Accessible**: Proper ARIA roles, keyboard navigation, and screen reader support.
+* 🔄 **Auto-dismiss**: Configurable duration with persistent popup option.
+* 📍 **Positioning**: Four corner positions with proper stacking.
+
+---
+
+## Behavior
+
+### Default
+* **Auto-dismiss**: Toasts disappear after 6 seconds unless `isPersistentPopup: true`.
+* **Expandable**: Click chevron to expand/collapse body content (default: collapsed).
+* **Coalescing**: Identical error toasts merge with count badges.
+* **Progress**: Progress bars always visible when present, even when collapsed.
+
+### Error Handling
+* **Network Errors**: Automatically caught by Axios and fetch interceptors.
+* **Friendly Fallbacks**: Shows "There was an error processing your request" for unhelpful backend responses.
+* **Smart Titles**: "Server error" for 5xx, "Request error" for 4xx, "Network error" for others.
+
+---
+
+## Installation
+
+The toast system is already integrated at the app root. No additional setup required.
+
+```tsx
+import { alert, updateToast, dismissToast } from '@/components/toast';
+```
+
+---
+
+## Basic Usage
+
+### Simple Notifications
+
+```tsx
+// Success notification
+alert({
+  alertType: 'success',
+  title: 'File processed successfully',
+  body: 'Your document has been converted to PDF.'
+});
+
+// Error notification
+alert({
+  alertType: 'error',
+  title: 'Processing failed',
+  body: 'Unable to process the selected files.'
+});
+
+// Warning notification
+alert({
+  alertType: 'warning',
+  title: 'Low disk space',
+  body: 'Consider freeing up some storage space.'
+});
+
+// Neutral notification
+alert({
+  alertType: 'neutral',
+  title: 'Information',
+  body: 'This is a neutral notification.'
+});
+```
+
+### With Custom Content
+
+```tsx
+// Rich JSX content with buttons
+alert({
+  alertType: 'success',
+  title: 'Download complete',
+  body: (
+    <div>
+      <p>File saved to Downloads folder</p>
+      <button onClick={() => openFolder()}>Open folder</button>
+    </div>
+  ),
+  buttonText: 'View file',
+  buttonCallback: () => openFile(),
+  isPersistentPopup: true
+});
+```
+
+### Progress Tracking
+
+```tsx
+// Show progress
+const toastId = alert({
+  alertType: 'neutral',
+  title: 'Processing files...',
+  body: 'Converting your documents',
+  progressBarPercentage: 0
+});
+
+// Update progress
+updateToast(toastId, { progressBarPercentage: 50 });
+
+// Complete with success
+updateToast(toastId, { 
+  alertType: 'success',
+  title: 'Processing complete',
+  body: 'All files converted successfully',
+  progressBarPercentage: 100
+});
+```
+
+### Custom Positioning
+
+```tsx
+alert({
+  alertType: 'error',
+  title: 'Connection lost',
+  body: 'Please check your internet connection.',
+  location: 'top-right'
+});
+```
+
+---
+
+## API
+
+### `alert(options: ToastOptions)`
+
+The primary function for showing toasts.
+
+```ts
+interface ToastOptions {
+  alertType?: 'success' | 'error' | 'warning' | 'neutral';
+  title: string;
+  body?: React.ReactNode;
+  buttonText?: string;
+  buttonCallback?: () => void;
+  isPersistentPopup?: boolean;
+  location?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  icon?: React.ReactNode;
+  progressBarPercentage?: number; // 0-1 as fraction or 0-100 as percent
+  durationMs?: number;
+  id?: string;
+  expandable?: boolean;
+}
+```
+
+### `updateToast(id: string, options: Partial<ToastOptions>)`
+
+Update an existing toast.
+
+```tsx
+const toastId = alert({ title: 'Processing...', progressBarPercentage: 0 });
+updateToast(toastId, { progressBarPercentage: 75 });
+```
+
+### `dismissToast(id: string)`
+
+Dismiss a specific toast.
+
+```tsx
+dismissToast(toastId);
+```
+
+### `dismissAllToasts()`
+
+Dismiss all visible toasts.
+
+```tsx
+dismissAllToasts();
+```
+
+---
+
+## Alert Types
+
+| Type | Color | Icon | Use Case |
+|------|-------|------|----------|
+| `success` | Green | ✓ | Successful operations, completions |
+| `error` | Red | ✗ | Failures, errors, exceptions |
+| `warning` | Yellow | ⚠ | Warnings, cautions, low resources |
+| `neutral` | Theme | ℹ | Information, general messages |
+
+---
+
+## Positioning
+
+| Location | Description |
+|----------|-------------|
+| `top-left` | Top-left corner |
+| `top-right` | Top-right corner |
+| `bottom-left` | Bottom-left corner |
+| `bottom-right` | Bottom-right corner (default) |
+
+---
+
+## Accessibility
+
+* Toasts use `role="status"` for screen readers.
+* Chevron and close buttons have proper `aria-label` attributes.
+* Keyboard navigation supported (Escape to dismiss).
+* Focus management for interactive content.
+
+---
+
+## Examples
+
+### File Processing Workflow
+
+```tsx
+// Start processing
+const toastId = alert({
+  alertType: 'neutral',
+  title: 'Processing files...',
+  body: 'Converting 5 documents',
+  progressBarPercentage: 0,
+  isPersistentPopup: true
+});
+
+// Update progress
+updateToast(toastId, { progressBarPercentage: 30 });
+updateToast(toastId, { progressBarPercentage: 60 });
+
+// Complete successfully
+updateToast(toastId, {
+  alertType: 'success',
+  title: 'Processing complete',
+  body: 'All 5 documents converted successfully',
+  progressBarPercentage: 100,
+  isPersistentPopup: false
+});
+```
+
+### Error with Action
+
+```tsx
+alert({
+  alertType: 'error',
+  title: 'Upload failed',
+  body: 'File size exceeds the 10MB limit.',
+  buttonText: 'Try again',
+  buttonCallback: () => retryUpload(),
+  isPersistentPopup: true
+});
+```
+
+### Non-expandable Toast
+
+```tsx
+alert({
+  alertType: 'success',
+  title: 'Settings saved',
+  body: 'Your preferences have been updated.',
+  expandable: false,
+  durationMs: 3000
+});
+```
+
+### Custom Icon
+
+```tsx
+alert({
+  alertType: 'neutral',
+  title: 'New feature available',
+  body: 'Check out the latest updates.',
+  icon: <LocalIcon icon="star" />
+});
+```
+
+---
+
+## Integration
+
+### Network Error Handling
+
+The toast system automatically catches network errors from Axios and fetch requests:
+
+```tsx
+// These automatically show error toasts
+axios.post('/api/convert', formData);
+fetch('/api/process', { method: 'POST', body: data });
+```
+
+### Manual Error Handling
+
+```tsx
+try {
+  await processFiles();
+  alert({ alertType: 'success', title: 'Files processed' });
+} catch (error) {
+  alert({ 
+    alertType: 'error', 
+    title: 'Processing failed',
+    body: error.message 
+  });
+}
+```
+

frontend/src/components/toast/ToastContext.tsx

@@ -0,0 +1,150 @@
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState, useEffect } from 'react';
+import { ToastApi, ToastInstance, ToastOptions } from './types';
+
+function normalizeProgress(value: number | undefined): number | undefined {
+  if (typeof value !== 'number' || Number.isNaN(value)) return undefined;
+  // Accept 0..1 as fraction or 0..100 as percent
+  if (value <= 1) return Math.max(0, Math.min(1, value)) * 100;
+  return Math.max(0, Math.min(100, value));
+}
+
+function generateId() {
+  return `toast_${Math.random().toString(36).slice(2, 9)}`;
+}
+
+type DefaultOpts = Required<Pick<ToastOptions, 'alertType' | 'title' | 'isPersistentPopup' | 'location' | 'durationMs'>> &
+  Partial<Omit<ToastOptions, 'id' | 'alertType' | 'title' | 'isPersistentPopup' | 'location' | 'durationMs'>>;
+
+const defaultOptions: DefaultOpts = {
+  alertType: 'neutral',
+  title: '',
+  isPersistentPopup: false,
+  location: 'bottom-right',
+  durationMs: 6000,
+};
+
+interface ToastContextShape extends ToastApi {
+  toasts: ToastInstance[];
+}
+
+const ToastContext = createContext<ToastContextShape | null>(null);
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within ToastProvider');
+  return ctx;
+}
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<ToastInstance[]>([]);
+  const timers = useRef<Record<string, number>>({});
+
+  const scheduleAutoDismiss = useCallback((toast: ToastInstance) => {
+    if (toast.isPersistentPopup) return;
+    window.clearTimeout(timers.current[toast.id]);
+    timers.current[toast.id] = window.setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== toast.id));
+    }, toast.durationMs);
+  }, []);
+
+  const show = useCallback<ToastApi['show']>((options) => {
+    const id = options.id || generateId();
+    const hasButton = !!(options.buttonText && options.buttonCallback);
+    const merged: ToastInstance = {
+      ...defaultOptions,
+      ...options,
+      id,
+      progress: normalizeProgress(options.progressBarPercentage),
+      justCompleted: false,
+      expandable: hasButton ? false : (options.expandable !== false),
+      isExpanded: hasButton ? true : (options.expandable === false ? true : (options.alertType === 'error' ? true : false)),
+      createdAt: Date.now(),
+    } as ToastInstance;
+    setToasts(prev => {
+      // Coalesce duplicates by alertType + title + body text if no explicit id was provided
+      if (!options.id) {
+        const bodyText = typeof merged.body === 'string' ? merged.body : '';
+        const existingIndex = prev.findIndex(t => t.alertType === merged.alertType && t.title === merged.title && (typeof t.body === 'string' ? t.body : '') === bodyText);
+        if (existingIndex !== -1) {
+          const updated = [...prev];
+          const existing = updated[existingIndex];
+          const nextCount = (existing.count ?? 1) + 1;
+          updated[existingIndex] = { ...existing, count: nextCount, createdAt: Date.now() };
+          return updated;
+        }
+      }
+      const next = [...prev.filter(t => t.id !== id), merged];
+      return next;
+    });
+    scheduleAutoDismiss(merged);
+    return id;
+  }, [scheduleAutoDismiss]);
+
+  const update = useCallback<ToastApi['update']>((id, updates) => {
+    setToasts(prev => prev.map(t => {
+      if (t.id !== id) return t;
+      const progress = updates.progressBarPercentage !== undefined
+        ? normalizeProgress(updates.progressBarPercentage)
+        : t.progress;
+
+      const next: ToastInstance = {
+        ...t,
+        ...updates,
+        progress,
+      } as ToastInstance;
+
+      // Detect completion
+      if (typeof progress === 'number' && progress >= 100 && !t.justCompleted) {
+        // On completion: finalize type as success unless explicitly provided otherwise
+        next.justCompleted = false;
+        if (!updates.alertType) {
+          next.alertType = 'success';
+        }
+      }
+
+      return next;
+    }));
+  }, []);
+
+  const updateProgress = useCallback<ToastApi['updateProgress']>((id, progress) => {
+    update(id, { progressBarPercentage: progress });
+  }, [update]);
+
+  const dismiss = useCallback<ToastApi['dismiss']>((id) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+    window.clearTimeout(timers.current[id]);
+    delete timers.current[id];
+  }, []);
+
+  const dismissAll = useCallback<ToastApi['dismissAll']>(() => {
+    setToasts([]);
+    Object.values(timers.current).forEach(t => window.clearTimeout(t));
+    timers.current = {};
+  }, []);
+
+  const value = useMemo<ToastContextShape>(() => ({
+    toasts,
+    show,
+    update,
+    updateProgress,
+    dismiss,
+    dismissAll,
+  }), [toasts, show, update, updateProgress, dismiss, dismissAll]);
+
+  // Handle expand/collapse toggles from renderer without widening API
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail as { id: string } | undefined;
+      if (!detail?.id) return;
+      setToasts(prev => prev.map(t => t.id === detail.id ? { ...t, isExpanded: !t.isExpanded } : t));
+    };
+    window.addEventListener('toast:toggle', handler as EventListener);
+    return () => window.removeEventListener('toast:toggle', handler as EventListener);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>
+  );
+}
+
+

frontend/src/components/toast/ToastRenderer.css

@@ -0,0 +1,209 @@
+/* Toast Container Styles */
+.toast-container {
+  position: fixed;
+  z-index: 1200;
+  display: flex;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.toast-container--top-left {
+  top: 16px;
+  left: 16px;
+  flex-direction: column;
+}
+
+.toast-container--top-right {
+  top: 16px;
+  right: 16px;
+  flex-direction: column;
+}
+
+.toast-container--bottom-left {
+  bottom: 16px;
+  left: 16px;
+  flex-direction: column-reverse;
+}
+
+.toast-container--bottom-right {
+  bottom: 16px;
+  right: 16px;
+  flex-direction: column-reverse;
+}
+
+/* Toast Item Styles */
+.toast-item {
+  min-width: 320px;
+  max-width: 560px;
+  box-shadow: var(--shadow-lg);
+  border-radius: 16px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: auto;
+}
+
+/* Toast Alert Type Colors */
+.toast-item--success {
+  background: var(--color-green-100);
+  color: var(--text-primary);
+  border: 1px solid var(--color-green-400);
+}
+
+.toast-item--error {
+  background: var(--color-red-100);
+  color: var(--text-primary);
+  border: 1px solid var(--color-red-400);
+}
+
+.toast-item--warning {
+  background: var(--color-yellow-100);
+  color: var(--text-primary);
+  border: 1px solid var(--color-yellow-400);
+}
+
+.toast-item--neutral {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border-default);
+}
+
+/* Toast Header Row */
+.toast-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.toast-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-title-container {
+  font-weight: 700;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toast-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  color: inherit;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.toast-controls {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.toast-button {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toast-expand-button {
+  transform: rotate(0deg);
+  transition: transform 160ms ease;
+}
+
+.toast-expand-button--expanded {
+  transform: rotate(180deg);
+}
+
+/* Progress Bar */
+.toast-progress-container {
+  margin-top: 8px;
+  height: 6px;
+  background: var(--bg-muted);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.toast-progress-bar {
+  height: 100%;
+  transition: width 160ms ease;
+}
+
+.toast-progress-bar--success {
+  background: var(--color-green-500);
+}
+
+.toast-progress-bar--error {
+  background: var(--color-red-500);
+}
+
+.toast-progress-bar--warning {
+  background: var(--color-yellow-500);
+}
+
+.toast-progress-bar--neutral {
+  background: var(--color-gray-500);
+}
+
+/* Toast Body */
+.toast-body {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-top: 8px;
+}
+
+/* Toast Action Button */
+.toast-action-container {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.toast-action-button {
+  padding: 8px 12px;
+  border-radius: 12px;
+  border: 1px solid;
+  background: transparent;
+  font-weight: 600;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+.toast-action-button--success {
+  color: var(--text-primary);
+  border-color: var(--color-green-400);
+}
+
+.toast-action-button--error {
+  color: var(--text-primary);
+  border-color: var(--color-red-400);
+}
+
+.toast-action-button--warning {
+  color: var(--text-primary);
+  border-color: var(--color-yellow-400);
+}
+
+.toast-action-button--neutral {
+  color: var(--text-primary);
+  border-color: var(--border-default);
+}

frontend/src/components/toast/ToastRenderer.tsx

@@ -0,0 +1,137 @@
+import { useToast } from './ToastContext';
+import { ToastInstance, ToastLocation } from './types';
+import { LocalIcon } from '../shared/LocalIcon';
+import './ToastRenderer.css';
+
+const locationToClass: Record<ToastLocation, string> = {
+  'top-left': 'toast-container--top-left',
+  'top-right': 'toast-container--top-right',
+  'bottom-left': 'toast-container--bottom-left',
+  'bottom-right': 'toast-container--bottom-right',
+};
+
+function getToastItemClass(t: ToastInstance): string {
+  return `toast-item toast-item--${t.alertType}`;
+}
+
+function getProgressBarClass(t: ToastInstance): string {
+  return `toast-progress-bar toast-progress-bar--${t.alertType}`;
+}
+
+function getActionButtonClass(t: ToastInstance): string {
+  return `toast-action-button toast-action-button--${t.alertType}`;
+}
+
+function getDefaultIconName(t: ToastInstance): string {
+  switch (t.alertType) {
+    case 'success':
+      return 'check-circle-rounded';
+    case 'error':
+      return 'close-rounded';
+    case 'warning':
+      return 'warning-rounded';
+    case 'neutral':
+    default:
+      return 'info-rounded';
+  }
+}
+
+export default function ToastRenderer() {
+  const { toasts, dismiss } = useToast();
+
+  const grouped = toasts.reduce<Record<ToastLocation, ToastInstance[]>>((acc, t) => {
+    const key = t.location;
+    if (!acc[key]) acc[key] = [] as ToastInstance[];
+    acc[key].push(t);
+    return acc;
+  }, { 'top-left': [], 'top-right': [], 'bottom-left': [], 'bottom-right': [] });
+
+  return (
+    <>
+      {(Object.keys(grouped) as ToastLocation[]).map((loc) => (
+        <div key={loc} className={`toast-container ${locationToClass[loc]}`}>
+          {grouped[loc].map(t => {
+            return (
+              <div
+                key={t.id}
+                role="status"
+                className={getToastItemClass(t)}
+              >
+                {/* Top row: Icon + Title + Controls */}
+                <div className="toast-header">
+                  {/* Icon */}
+                  <div className="toast-icon">
+                    {t.icon ?? (
+                      <LocalIcon icon={`material-symbols:${getDefaultIconName(t)}`} width={20} height={20} />
+                    )}
+                  </div>
+
+                  {/* Title + count badge */}
+                  <div className="toast-title-container">
+                    <span>{t.title}</span>
+                    {typeof t.count === 'number' && t.count > 1 && (
+                      <span className="toast-count-badge">{t.count}</span>
+                    )}
+                  </div>
+
+                  {/* Controls */}
+                  <div className="toast-controls">
+                    {t.expandable && (
+                      <button
+                        aria-label="Toggle details"
+                        onClick={() => {
+                          const evt = new CustomEvent('toast:toggle', { detail: { id: t.id } });
+                          window.dispatchEvent(evt);
+                        }}
+                        className={`toast-button toast-expand-button ${t.isExpanded ? 'toast-expand-button--expanded' : ''}`}
+                      >
+                        <LocalIcon icon="material-symbols:expand-more-rounded" />
+                      </button>
+                    )}
+                    <button
+                      aria-label="Dismiss"
+                      onClick={() => dismiss(t.id)}
+                      className="toast-button"
+                    >
+                      <LocalIcon icon="material-symbols:close-rounded" width={20} height={20} />
+                    </button>
+                  </div>
+                </div>
+                {/* Progress bar - always show when present */}
+                {typeof t.progress === 'number' && (
+                  <div className="toast-progress-container">
+                    <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">
+                    <button
+                      onClick={t.buttonCallback}
+                      className={getActionButtonClass(t)}
+                    >
+                      {t.buttonText}
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}
+
+

frontend/src/components/toast/index.ts

@@ -0,0 +1,61 @@
+import { ToastOptions } from './types';
+import { useToast, ToastProvider } from './ToastContext';
+import ToastRenderer from './ToastRenderer';
+
+export { useToast, ToastProvider, ToastRenderer };
+
+// Global imperative API via module singleton
+let _api: ReturnType<typeof createImperativeApi> | null = null;
+
+function createImperativeApi() {
+  const subscribers: Array<(fn: any) => void> = [];
+  let api: any = null;
+  return {
+    provide(instance: any) {
+      api = instance;
+      subscribers.splice(0).forEach(cb => cb(api));
+    },
+    get(): any | null { return api; },
+    onReady(cb: (api: any) => void) {
+      if (api) cb(api); else subscribers.push(cb);
+    }
+  };
+}
+
+if (!_api) _api = createImperativeApi();
+
+// Hook helper to wire context API back to singleton
+export function ToastPortalBinder() {
+  const ctx = useToast();
+  // Provide API once mounted
+  _api!.provide(ctx);
+  return null;
+}
+
+export function alert(options: ToastOptions) {
+  if (_api?.get()) {
+    return _api.get()!.show(options);
+  }
+  // Queue until provider mounts
+  let id = '';
+  _api?.onReady((api) => { id = api.show(options); });
+  return id;
+}
+
+export function updateToast(id: string, options: Partial<ToastOptions>) {
+  _api?.get()?.update(id, options);
+}
+
+export function updateToastProgress(id: string, progress: number) {
+  _api?.get()?.updateProgress(id, progress);
+}
+
+export function dismissToast(id: string) {
+  _api?.get()?.dismiss(id);
+}
+
+export function dismissAllToasts() {
+  _api?.get()?.dismissAll();
+}
+
+

frontend/src/components/toast/types.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+export type ToastLocation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ToastAlertType = 'success' | 'error' | 'warning' | 'neutral';
+
+export interface ToastOptions {
+  alertType?: ToastAlertType;
+  title: string;
+  body?: ReactNode;
+  buttonText?: string;
+  buttonCallback?: () => void;
+  isPersistentPopup?: boolean;
+  location?: ToastLocation;
+  icon?: ReactNode;
+  /** number 0-1 as fraction or 0-100 as percent */
+  progressBarPercentage?: number;
+  /** milliseconds to auto-close if not persistent */
+  durationMs?: number;
+  /** optional id to control/update later */
+  id?: string;
+  /** If true, show chevron and collapse/expand animation. Defaults to true. */
+  expandable?: boolean;
+}
+
+export interface ToastInstance extends Omit<ToastOptions, 'id' | 'progressBarPercentage'> {
+  id: string;
+  alertType: ToastAlertType;
+  isPersistentPopup: boolean;
+  location: ToastLocation;
+  durationMs: number;
+  expandable: boolean;
+  isExpanded: boolean;
+  /** Number of coalesced duplicates */
+  count?: number;
+  /** internal progress normalized 0..100 */
+  progress?: number;
+  /** if progress completed, briefly show check icon */
+  justCompleted: boolean;
+  createdAt: number;
+}
+
+export interface ToastApi {
+  show: (options: ToastOptions) => string;
+  update: (id: string, options: Partial<ToastOptions>) => void;
+  updateProgress: (id: string, progress: number) => void;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+

frontend/src/components/tools/SearchResults.tsx

@@ -9,13 +9,22 @@ import NoToolsFound from './shared/NoToolsFound';
 import "./toolPicker/ToolPicker.css";
 
 interface SearchResultsProps {
-  filteredTools: [string, ToolRegistryEntry][];
+  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
   onSelect: (id: string) => void;
+  searchQuery?: string;
 }
 
-const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }) => {
+const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect, searchQuery }) => {
   const { t } = useTranslation();
-  const { searchGroups } = useToolSections(filteredTools);
+  const { searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (filteredTools && Array.isArray(filteredTools)) {
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }
 
   if (searchGroups.length === 0) {
     return <NoToolsFound />;
@@ -28,15 +37,27 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect }
         <Box key={group.subcategoryId}  w="100%">
           <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
           <Stack  gap="xs">
-            {group.tools.map(({ id, tool }) => (
-              <ToolButton
-                key={id}
-                id={id}
-                tool={tool}
-                isSelected={false}
-                onSelect={onSelect}
-              />
-            ))}
+            {group.tools.map(({ id, tool }) => {
+              const matchedText = matchedTextMap.get(id);
+              // Check if the match was from synonyms and show the actual synonym that matched
+              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym => 
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              );
+              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym => 
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              ) : undefined;
+              
+              return (
+                <ToolButton
+                  key={id}
+                  id={id}
+                  tool={tool}
+                  isSelected={false}
+                  onSelect={onSelect}
+                  matchedSynonym={matchedSynonym}
+                />
+              );
+            })}
           </Stack>
         </Box>
       ))}

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,8 @@ 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>
         ) : leftPanelView === 'toolPicker' ? (
@@ -79,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/ToolPicker.tsx

@@ -10,7 +10,7 @@ import { renderToolButtons } from "./shared/renderToolButtons";
 interface ToolPickerProps {
   selectedToolKey: string | null;
   onSelect: (id: string) => void;
-  filteredTools: [string, ToolRegistryEntry][];
+  filteredTools: Array<{ item: [string, ToolRegistryEntry]; matchedText?: string }>;
   isSearching?: boolean;
 }
 

frontend/src/components/tools/ToolRenderer.tsx

@@ -1,5 +1,5 @@
-import React, { Suspense } from "react";
-import { useToolManagement } from "../../hooks/useToolManagement";
+import { Suspense } from "react";
+import { useToolWorkflow } from "../../contexts/ToolWorkflowContext";
 import { BaseToolProps } from "../../types/tool";
 import ToolLoadingFallback from "./ToolLoadingFallback";
 
@@ -14,8 +14,8 @@ const ToolRenderer = ({
   onComplete,
   onError,
 }: ToolRendererProps) => {
-  // Get the tool from registry
-  const { toolRegistry } = useToolManagement();
+  // Get the tool from context (instead of direct hook call)
+  const { toolRegistry } = useToolWorkflow();
   const selectedTool = toolRegistry[selectedToolKey];
 
   if (!selectedTool || !selectedTool.component) {
@@ -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/addPageNumbers/PageNumberPreview.module.css

@@ -0,0 +1,101 @@
+/* PageNumberPreview.module.css - EXACT copy from StampPreview */
+
+/* Container styles */
+.container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.containerWithThumbnail {
+  background-color: transparent;
+}
+
+.containerWithoutThumbnail {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.containerBorder {
+  border: 1px solid var(--border-default, #333);
+}
+
+/* Page thumbnail styles */
+.pageThumbnail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: grayscale(10%) contrast(95%) brightness(105%);
+}
+
+/* Quick grid overlay styles - EXACT copy from stamp */
+.quickGrid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px;
+  pointer-events: auto;
+}
+
+.gridTile {
+  border: 1px dashed rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  font-size: 20px;
+  user-select: none;
+  font-weight: 600;
+  position: relative;
+}
+
+/* Position numbers at edges within each tile with extra top/bottom spacing */
+.gridTile:nth-child(1) { align-items: flex-start; justify-content: flex-start; padding-top: 4px; } /* top-left */
+.gridTile:nth-child(2) { align-items: flex-start; justify-content: center; padding-top: 4px; }     /* top-center */
+.gridTile:nth-child(3) { align-items: flex-start; justify-content: flex-end; padding-top: 4px; }  /* top-right */
+.gridTile:nth-child(4) { align-items: center; justify-content: flex-start; }    /* middle-left */
+.gridTile:nth-child(5) { align-items: center; justify-content: center; }        /* center */
+.gridTile:nth-child(6) { align-items: center; justify-content: flex-end; }      /* middle-right */
+.gridTile:nth-child(7) { align-items: flex-end; justify-content: flex-start; padding-bottom: 4px; }  /* bottom-left */
+.gridTile:nth-child(8) { align-items: flex-end; justify-content: center; padding-bottom: 4px; }      /* bottom-center */
+.gridTile:nth-child(9) { align-items: flex-end; justify-content: flex-end; padding-bottom: 4px; }    /* bottom-right */
+
+/* Base padding for all tiles */
+.gridTile {
+  padding: 8px;
+}
+
+.gridTileSelected,
+.gridTileHovered {
+  border: 2px solid var(--mantine-primary-color-filled, #3b82f6);
+  background-color: rgba(59, 130, 246, 0.2);
+}
+
+/* Preview header */
+.previewHeader {
+  margin-bottom: 12px;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-default, #333);
+  margin-bottom: 8px;
+}
+
+.previewLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+/* Preview disclaimer */
+.previewDisclaimer {
+  margin-top: 8px;
+  opacity: 0.7;
+  font-size: 12px;
+}

frontend/src/components/tools/addPageNumbers/PageNumberPreview.tsx

@@ -0,0 +1,241 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AddPageNumbersParameters } from './useAddPageNumbersParameters';
+import { pdfWorkerManager } from '../../../services/pdfWorkerManager';
+import { useThumbnailGeneration } from '../../../hooks/useThumbnailGeneration';
+import styles from './PageNumberPreview.module.css';
+
+// Simple utilities for page numbers (adapted from stamp)
+const A4_ASPECT_RATIO = 0.707;
+
+const getFirstSelectedPage = (input: string): number => {
+  if (!input) return 1;
+  const parts = input.split(',').map(s => s.trim()).filter(Boolean);
+  for (const part of parts) {
+    if (/^\d+\s*-\s*\d+$/.test(part)) {
+      const low = parseInt(part.split('-')[0].trim(), 10);
+      if (Number.isFinite(low) && low > 0) return low;
+    }
+    const n = parseInt(part, 10);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return 1;
+};
+
+
+const detectOverallBackgroundColor = async (thumbnailSrc: string | null): Promise<'light' | 'dark'> => {
+  if (!thumbnailSrc) {
+    return 'light'; // Default to light background if no thumbnail
+  }
+
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        if (!ctx) {
+          resolve('light');
+          return;
+        }
+
+        canvas.width = img.width;
+        canvas.height = img.height;
+        ctx.drawImage(img, 0, 0);
+
+        // Sample the entire image at reduced resolution for performance
+        const sampleWidth = Math.min(100, img.width);
+        const sampleHeight = Math.min(100, img.height);
+        const imageData = ctx.getImageData(0, 0, img.width, img.height);
+        const data = imageData.data;
+
+        let totalBrightness = 0;
+        let pixelCount = 0;
+
+        // Sample every nth pixel for performance
+        const step = Math.max(1, Math.floor((img.width * img.height) / (sampleWidth * sampleHeight)));
+
+        for (let i = 0; i < data.length; i += 4 * step) {
+          const r = data[i];
+          const g = data[i + 1];
+          const b = data[i + 2];
+
+          // Calculate perceived brightness using luminance formula
+          const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
+          totalBrightness += brightness;
+          pixelCount++;
+        }
+
+        const averageBrightness = totalBrightness / pixelCount;
+
+        // Threshold: 128 is middle gray
+        resolve(averageBrightness > 128 ? 'light' : 'dark');
+      } catch (error) {
+        console.warn('Error detecting background color:', error);
+        resolve('light'); // Default fallback
+      }
+    };
+
+    img.onerror = () => resolve('light');
+    img.src = thumbnailSrc;
+  });
+};
+
+type Props = {
+  parameters: AddPageNumbersParameters;
+  onParameterChange: <K extends keyof AddPageNumbersParameters>(key: K, value: AddPageNumbersParameters[K]) => void;
+  file?: File | null;
+  showQuickGrid?: boolean;
+};
+
+export default function PageNumberPreview({ parameters, onParameterChange, file, showQuickGrid }: Props) {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [, setContainerSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const [pageSize, setPageSize] = useState<{ widthPts: number; heightPts: number } | null>(null);
+  const [pageThumbnail, setPageThumbnail] = useState<string | null>(null);
+  const { requestThumbnail } = useThumbnailGeneration();
+  const [hoverTile, setHoverTile] = useState<number | null>(null);
+  const [textColor, setTextColor] = useState<string>('#fff');
+
+  // Observe container size for responsive positioning
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const resize = () => {
+      const aspect = pageSize ? (pageSize.widthPts / pageSize.heightPts) : A4_ASPECT_RATIO;
+      setContainerSize({ width: node.clientWidth, height: node.clientWidth / aspect });
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(node);
+    return () => ro.disconnect();
+  }, [pageSize]);
+
+  // Load first PDF page size in points for accurate scaling
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageSize(null);
+        return;
+      }
+      try {
+        const buffer = await file.arrayBuffer();
+        const pdf = await pdfWorkerManager.createDocument(buffer, { disableAutoFetch: true, disableStream: true });
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 1 });
+        if (!cancelled) {
+          setPageSize({ widthPts: viewport.width, heightPts: viewport.height });
+        }
+        pdfWorkerManager.destroyDocument(pdf);
+      } catch {
+        if (!cancelled) setPageSize(null);
+      }
+    };
+    load();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  // Load first-page thumbnail for background preview
+  useEffect(() => {
+    let isActive = true;
+    const loadThumb = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageThumbnail(null);
+        return;
+      }
+      try {
+        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pagesToNumber || '1'));
+        const pageId = `${file.name}:${file.size}:${file.lastModified}:page:${pageNumber}`;
+        const thumb = await requestThumbnail(pageId, file, pageNumber);
+        if (isActive) setPageThumbnail(thumb || null);
+      } catch {
+        if (isActive) setPageThumbnail(null);
+      }
+    };
+    loadThumb();
+    return () => { isActive = false; };
+  }, [file, parameters.pagesToNumber, requestThumbnail]);
+
+  // Detect text color based on overall PDF background
+  useEffect(() => {
+    if (!pageThumbnail) {
+      setTextColor('#fff'); // Default to white for no thumbnail
+      return;
+    }
+
+    const detectColor = async () => {
+      const backgroundType = await detectOverallBackgroundColor(pageThumbnail);
+      setTextColor(backgroundType === 'light' ? '#000' : '#fff');
+    };
+
+    detectColor();
+  }, [pageThumbnail]);
+
+  const containerStyle = useMemo(() => ({
+    position: 'relative' as const,
+    width: '100%',
+    aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
+    backgroundColor: pageThumbnail ? 'transparent' : 'rgba(255,255,255,0.03)',
+    border: '1px solid var(--border-default, #333)',
+    overflow: 'hidden' as const
+  }), [pageSize, pageThumbnail]);
+
+  return (
+    <div>
+      <div className={styles.previewHeader}>
+        <div className={styles.divider} />
+        <div className={styles.previewLabel}>{t('addPageNumbers.preview', 'Preview Page Numbers')}</div>
+      </div>
+      <div
+        ref={containerRef}
+        className={`${styles.container} ${styles.containerBorder} ${pageThumbnail ? styles.containerWithThumbnail : styles.containerWithoutThumbnail}`}
+        style={containerStyle}
+      >
+        {pageThumbnail && (
+          <img
+            src={pageThumbnail}
+            alt="page preview"
+            className={styles.pageThumbnail}
+            draggable={false}
+          />
+        )}
+
+        {/* Quick position overlay grid - EXACT copy from stamp */}
+        {showQuickGrid && (
+          <div className={styles.quickGrid}>
+            {Array.from({ length: 9 }).map((_, i) => {
+              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const selected = parameters.position === idx;
+              return (
+                <button
+                  key={idx}
+                  type="button"
+                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ''} ${hoverTile === idx ? styles.gridTileHovered : ''}`}
+                  onClick={() => onParameterChange('position', idx as any)}
+                  onMouseEnter={() => setHoverTile(idx)}
+                  onMouseLeave={() => setHoverTile(null)}
+                  style={{
+                    color: textColor,
+                    textShadow: textColor === '#fff'
+                      ? '1px 1px 2px rgba(0, 0, 0, 0.8)'
+                      : '1px 1px 2px rgba(255, 255, 255, 0.8)'
+                  }}
+                >
+                  {idx}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className={styles.previewDisclaimer}>
+        {t('addPageNumbers.previewDisclaimer', 'Preview is approximate. Final output may vary due to PDF font metrics.')}
+      </div>
+    </div>
+  );
+}

frontend/src/components/tools/addPageNumbers/useAddPageNumbersOperation.ts

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+import { ToolType, useToolOperation } from '../../../hooks/tools/shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { AddPageNumbersParameters, defaultParameters } from './useAddPageNumbersParameters';
+
+export const buildAddPageNumbersFormData = (parameters: AddPageNumbersParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append('fileInput', file);
+  formData.append('customMargin', parameters.customMargin);
+  formData.append('position', String(parameters.position));
+  formData.append('fontSize', String(parameters.fontSize));
+  formData.append('fontType', parameters.fontType);
+  formData.append('startingNumber', String(parameters.startingNumber));
+  formData.append('pagesToNumber', parameters.pagesToNumber);
+  formData.append('customText', parameters.customText);
+
+  return formData;
+};
+
+export const addPageNumbersOperationConfig = {
+  toolType: ToolType.singleFile,
+  buildFormData: buildAddPageNumbersFormData,
+  operationType: 'addPageNumbers',
+  endpoint: '/api/v1/misc/add-page-numbers',
+  defaultParameters,
+} as const;
+
+export const useAddPageNumbersOperation = () => {
+  const { t } = useTranslation();
+
+  return useToolOperation<AddPageNumbersParameters>({
+    ...addPageNumbersOperationConfig,
+    getErrorMessage: createStandardErrorHandler(
+      t('addPageNumbers.error.failed', 'An error occurred while adding page numbers to the PDF.')
+    ),
+  });
+};

frontend/src/components/tools/addPageNumbers/useAddPageNumbersParameters.ts

@@ -0,0 +1,34 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, type BaseParametersHook } from '../../../hooks/tools/shared/useBaseParameters';
+
+export interface AddPageNumbersParameters extends BaseParameters {
+  customMargin: 'small' | 'medium' | 'large' | 'x-large';
+  position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+  fontSize: number;
+  fontType: 'Times' | 'Helvetica' | 'Courier';
+  startingNumber: number;
+  pagesToNumber: string;
+  customText: string;
+}
+
+export const defaultParameters: AddPageNumbersParameters = {
+  customMargin: 'medium',
+  position: 8, // Default to bottom center like the original HTML
+  fontSize: 12,
+  fontType: 'Times',
+  startingNumber: 1,
+  pagesToNumber: '',
+  customText: '',
+};
+
+export type AddPageNumbersParametersHook = BaseParametersHook<AddPageNumbersParameters>;
+
+export const useAddPageNumbersParameters = (): AddPageNumbersParametersHook => {
+  return useBaseParameters<AddPageNumbersParameters>({
+    defaultParameters,
+    endpointName: 'add-page-numbers',
+    validateFn: (params): boolean => {
+      return params.fontSize > 0 && params.startingNumber > 0;
+    },
+  });
+};

frontend/src/components/tools/addStamp/StampPreview.module.css

@@ -0,0 +1,195 @@
+/* StampPreview.module.css */
+
+/* Container styles */
+.container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.containerWithThumbnail {
+  background-color: transparent;
+}
+
+.containerWithoutThumbnail {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.containerBorder {
+  border: 1px solid var(--border-default, #333);
+}
+
+/* Page thumbnail styles */
+.pageThumbnail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: grayscale(10%) contrast(95%) brightness(105%);
+}
+
+/* Stamp item styles */
+.stampItem {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  line-height: 1;
+  transform-origin: left bottom;
+}
+
+.stampItemDraggable {
+  cursor: move;
+  pointer-events: auto;
+}
+
+.stampItemGridMode {
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Text stamp styles */
+.textLine {
+  white-space: pre;
+  display: block;
+  word-break: keep-all;
+  overflow: visible;
+}
+
+/* Image stamp styles */
+.stampImage {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Quick grid overlay styles */
+.quickGrid {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 8px;
+  padding: 8px;
+  pointer-events: auto;
+}
+
+.gridTile {
+  border: 1px dashed rgba(0, 0, 0, 0.15);
+  background-color: transparent;
+  color: transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  user-select: none;
+}
+
+.gridTileSelected,
+.gridTileHovered {
+  border: 2px solid var(--mantine-primary-color-filled, #3b82f6);
+}
+
+/* Preview header */
+.previewHeader {
+  margin-bottom: 12px;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-default, #333);
+  margin-bottom: 8px;
+}
+
+.previewLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+/* Preview disclaimer */
+.previewDisclaimer {
+  margin-top: 8px;
+  opacity: 0.7;
+  font-size: 12px;
+}
+
+/* AddStamp.tsx specific styles */
+
+/* Information text container */
+.informationContainer {
+  background-color: var(--information-text-bg);
+  padding: 2px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 10px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.informationText {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--information-text-color);
+}
+
+/* Mode toggle buttons */
+.modeToggleGroup {
+  gap: 0.25rem;
+  flex-grow: 1;
+}
+
+.modeToggleButton {
+  border-radius: 0.125rem;
+  font-size: 0.75rem;
+  width: 100%;
+}
+
+/* Icon pill buttons */
+.iconPillGroup {
+  gap: 0.25rem;
+  flex-grow: 1;
+}
+
+.iconPillButton {
+  border-radius: 0.125rem;
+  font-size: 0.75rem;
+  width: 100%;
+}
+
+/* Slider controls */
+.sliderGroup {
+  gap: 1rem;
+  align-items: center;
+}
+
+.numberInput {
+  width: 80px;
+  font-size: 0.875rem;
+}
+
+.slider {
+  flex: 1;
+}
+
+.sliderWide {
+  flex: 1.2;
+}
+
+/* Label text */
+.labelText {
+  font-size: 0.875rem;
+  font-weight: 500;
+}

frontend/src/components/tools/addStamp/StampPreview.tsx

@@ -0,0 +1,343 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { AddStampParameters } from './useAddStampParameters';
+import { pdfWorkerManager } from '../../../services/pdfWorkerManager';
+import { useThumbnailGeneration } from '../../../hooks/useThumbnailGeneration';
+import { A4_ASPECT_RATIO, getFirstSelectedPage, getFontFamily, computeStampPreviewStyle, getAlphabetPreviewScale } from './StampPreviewUtils';
+import styles from './StampPreview.module.css';
+
+type Props = {
+  parameters: AddStampParameters;
+  onParameterChange: <K extends keyof AddStampParameters>(key: K, value: AddStampParameters[K]) => void;
+  file?: File | null;
+  showQuickGrid?: boolean;
+};
+
+export default function StampPreview({ parameters, onParameterChange, file, showQuickGrid }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerSize, setContainerSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  const [imageMeta, setImageMeta] = useState<{ url: string; width: number; height: number } | null>(null);
+  const [pageSize, setPageSize] = useState<{ widthPts: number; heightPts: number } | null>(null);
+  const [pageThumbnail, setPageThumbnail] = useState<string | null>(null);
+  const { requestThumbnail } = useThumbnailGeneration();
+  const [hoverTile, setHoverTile] = useState<number | null>(null);
+
+  // Load image URL and meta for aspect ratio if an image is selected
+  useEffect(() => {
+    if (parameters.stampType === 'image' && parameters.stampImage) {
+      const url = URL.createObjectURL(parameters.stampImage);
+      const img = new Image();
+      img.onload = () => {
+        setImageMeta({ url, width: img.width, height: img.height });
+      };
+      img.src = url;
+      return () => URL.revokeObjectURL(url);
+    } else {
+      setImageMeta(null);
+    }
+  }, [parameters.stampType, parameters.stampImage]);
+
+  // Observe container size for responsive positioning
+  useEffect(() => {
+    const node = containerRef.current;
+    if (!node) return;
+    const resize = () => {
+      const aspect = pageSize ? (pageSize.widthPts / pageSize.heightPts) : A4_ASPECT_RATIO;
+      setContainerSize({ width: node.clientWidth, height: node.clientWidth / aspect });
+    };
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(node);
+    return () => ro.disconnect();
+  }, [pageSize]);
+
+  // Load first PDF page size in points for accurate scaling
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageSize(null);
+        return;
+      }
+      try {
+        const buffer = await file.arrayBuffer();
+        const pdf = await pdfWorkerManager.createDocument(buffer, { disableAutoFetch: true, disableStream: true });
+        const page = await pdf.getPage(1);
+        const viewport = page.getViewport({ scale: 1 });
+        if (!cancelled) {
+          setPageSize({ widthPts: viewport.width, heightPts: viewport.height });
+        }
+        pdfWorkerManager.destroyDocument(pdf);
+      } catch {
+        // Fallback to A4 if we cannot read page
+        if (!cancelled) setPageSize(null);
+      }
+    };
+    load();
+    return () => { cancelled = true; };
+  }, [file]);
+
+  // Load first-page thumbnail for background preview so users see the content
+  useEffect(() => {
+    let isActive = true;
+    const loadThumb = async () => {
+      if (!file || file.type !== 'application/pdf') {
+        setPageThumbnail(null);
+        return;
+      }
+      try {
+        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pageNumbers));
+        const pageId = `${file.name}:${file.size}:${file.lastModified}:page:${pageNumber}`;
+        const thumb = await requestThumbnail(pageId, file, pageNumber);
+        if (isActive) setPageThumbnail(thumb || null);
+      } catch {
+        if (isActive) setPageThumbnail(null);
+      }
+    };
+    loadThumb();
+    return () => { isActive = false; };
+  }, [file, parameters.pageNumbers, requestThumbnail]);
+
+  const style = useMemo(() => (
+    computeStampPreviewStyle(
+      parameters,
+      imageMeta,
+      pageSize,
+      containerSize,
+      showQuickGrid,
+      hoverTile,
+      !!pageThumbnail
+    )
+  ), [containerSize, parameters, imageMeta, pageSize, showQuickGrid, hoverTile, pageThumbnail]);
+
+  // Keep center fixed when scaling via slider (or any fontSize changes)
+  const prevDimsRef = useRef<{ fontSize: number; widthPx: number; heightPx: number; leftPx: number; bottomPx: number } | null>(null);
+  useEffect(() => {
+    const itemStyle = style.item as any;
+    if (!itemStyle || containerSize.width <= 0 || containerSize.height <= 0) return;
+
+    const parse = (v: any) => parseFloat(String(v).replace('px', '')) || 0;
+    const leftPx = parse(itemStyle.left);
+    const bottomPx = parse(itemStyle.bottom);
+    const widthPx = parse(itemStyle.width);
+    const heightPx = parse(itemStyle.height);
+
+    const prev = prevDimsRef.current;
+    const hasOverrides = parameters.overrideX >= 0 && parameters.overrideY >= 0;
+    const canAdjust = hasOverrides && !showQuickGrid;
+    if (
+      prev &&
+      canAdjust &&
+      parameters.fontSize !== prev.fontSize &&
+      prev.widthPx > 0 &&
+      prev.heightPx > 0 &&
+      widthPx > 0 &&
+      heightPx > 0
+    ) {
+      const centerX = prev.leftPx + prev.widthPx / 2;
+      const centerY = prev.bottomPx + prev.heightPx / 2;
+      const newLeftPx = centerX - widthPx / 2;
+      const newBottomPx = centerY - heightPx / 2;
+
+      const widthPts = pageSize?.widthPts ?? 595.28;
+      const heightPts = pageSize?.heightPts ?? 841.89;
+      const scaleX = containerSize.width / widthPts;
+      const scaleY = containerSize.height / heightPts;
+      const newLeftPts = Math.max(0, Math.min(containerSize.width, newLeftPx)) / scaleX;
+      const newBottomPts = Math.max(0, Math.min(containerSize.height, newBottomPx)) / scaleY;
+      onParameterChange('overrideX', newLeftPts as any);
+      onParameterChange('overrideY', newBottomPts as any);
+    }
+
+    prevDimsRef.current = { fontSize: parameters.fontSize, widthPx, heightPx, leftPx, bottomPx };
+  }, [parameters.fontSize, style.item, containerSize, pageSize, showQuickGrid, parameters.overrideX, parameters.overrideY, onParameterChange]);
+
+  // Drag/resize/rotate interactions
+  const draggingRef = useRef<{ type: 'move' | 'resize' | 'rotate'; startX: number; startY: number; initLeft: number; initBottom: number; initHeight: number; centerX: number; centerY: number } | null>(null);
+
+  const ensureOverrides = () => {
+    const pageWidth = containerSize.width;
+    const pageHeight = containerSize.height;
+    if (pageWidth <= 0 || pageHeight <= 0) return;
+
+    // Recompute current x,y from style (so that we start from visual position)
+    const itemStyle = style.item as any;
+    const leftPx = parseFloat(String(itemStyle.left).replace('px', '')) || 0;
+    const bottomPx = parseFloat(String(itemStyle.bottom).replace('px', '')) || 0;
+    const widthPts = pageSize?.widthPts ?? 595.28;
+    const heightPts = pageSize?.heightPts ?? 841.89;
+    const scaleX = containerSize.width / widthPts;
+    const scaleY = containerSize.height / heightPts;
+    if (parameters.overrideX < 0 || parameters.overrideY < 0) {
+      onParameterChange('overrideX', Math.max(0, Math.min(pageWidth, leftPx)) / scaleX as any);
+      onParameterChange('overrideY', Math.max(0, Math.min(pageHeight, bottomPx)) / scaleY as any);
+    }
+  };
+
+  const handlePointerDown = (e: React.PointerEvent, type: 'move' | 'resize' | 'rotate') => {
+    e.preventDefault();
+    ensureOverrides();
+
+    const item = style.item as any;
+    const left = parseFloat(String(item.left).replace('px', '')) || 0;
+    const bottom = parseFloat(String(item.bottom).replace('px', '')) || 0;
+    const width = parseFloat(String(item.width).replace('px', '')) || parameters.fontSize;
+    const height = parseFloat(String(item.height).replace('px', '')) || parameters.fontSize;
+
+    const rect = (e.currentTarget.parentElement as HTMLElement)?.getBoundingClientRect();
+    const centerX = left + width / 2;
+    const centerY = bottom + height / 2;
+
+    draggingRef.current = {
+      type,
+      startX: e.clientX - (rect?.left || 0),
+      startY: (rect ? rect.bottom - e.clientY : 0), // convert to bottom-based coords
+      initLeft: left,
+      initBottom: bottom,
+      initHeight: height,
+      centerX,
+      centerY,
+    };
+
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (!draggingRef.current) return;
+    const node = containerRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = rect.bottom - e.clientY; // bottom-based
+
+    const drag = draggingRef.current;
+
+    if (drag.type === 'move') {
+      const dx = x - drag.startX;
+      const dy = y - drag.startY;
+      const newLeftPx = Math.max(0, Math.min(containerSize.width, drag.initLeft + dx));
+      const newBottomPx = Math.max(0, Math.min(containerSize.height, drag.initBottom + dy));
+      const widthPts = pageSize?.widthPts ?? 595.28;
+      const heightPts = pageSize?.heightPts ?? 841.89;
+      const scaleX = containerSize.width / widthPts;
+      const scaleY = containerSize.height / heightPts;
+      const newLeftPts = newLeftPx / scaleX;
+      const newBottomPts = newBottomPx / scaleY;
+      onParameterChange('overrideX', newLeftPts as any);
+      onParameterChange('overrideY', newBottomPts as any);
+    }
+
+    if (drag.type === 'resize') {
+      // Height is our canonical size (fontSize)
+      const heightPts = pageSize?.heightPts ?? 841.89;
+      const scaleY = containerSize.height / heightPts;
+      const newHeightPx = Math.max(1, drag.initHeight + (y - drag.startY));
+      const newHeightPts = newHeightPx / scaleY;
+      onParameterChange('fontSize', newHeightPts as any);
+    }
+
+    if (drag.type === 'rotate') {
+      const angle = Math.atan2(y - drag.centerY, x - drag.centerX) * (180 / Math.PI);
+      onParameterChange('rotation', angle as any);
+    }
+  };
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = null;
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+  };
+
+  const itemHandles = null; // Drag-only per request
+
+  return (
+    <div>
+      <div className={styles.previewHeader}>
+        <div className={styles.divider} />
+        <div className={styles.previewLabel}>Preview Stamp</div>
+      </div>
+      <div 
+        ref={containerRef} 
+        className={`${styles.container} ${styles.containerBorder} ${pageThumbnail ? styles.containerWithThumbnail : styles.containerWithoutThumbnail}`}
+        style={style.container as React.CSSProperties} 
+        onPointerMove={handlePointerMove} 
+        onPointerUp={handlePointerUp}
+      >
+        {pageThumbnail && (
+          <img
+            src={pageThumbnail}
+            alt="page preview"
+            className={styles.pageThumbnail}
+            draggable={false}
+          />
+        )}
+        {parameters.stampType === 'text' && (
+          <div
+            className={`${styles.stampItem} ${styles.stampItemGridMode}`}
+            style={style.item as React.CSSProperties}
+          >
+            {(parameters.stampText || '').split('\n').map((line, idx) => (
+              <span
+                key={idx}
+                className={styles.textLine}
+                style={{
+                  fontFamily: getFontFamily(parameters.alphabet),
+                  fontSize: `${Math.max(1, (parameters.fontSize * getAlphabetPreviewScale(parameters.alphabet)) / 2)}px`,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {line || '\u00A0'}
+              </span>
+            ))}
+            {itemHandles}
+          </div>
+        )}
+        {parameters.stampType === 'image' && imageMeta && (
+          <div
+            className={`${styles.stampItem} ${showQuickGrid ? styles.stampItemGridMode : styles.stampItemDraggable}`}
+            style={style.item as React.CSSProperties}
+            onPointerDown={(e) => handlePointerDown(e, 'move')}
+          >
+            <img
+              src={imageMeta.url}
+              alt="stamp preview"
+              className={styles.stampImage}
+            />
+            {itemHandles}
+          </div>
+        )}
+
+        {/* Quick position overlay grid */}
+        {showQuickGrid && (
+          <div className={styles.quickGrid}>
+            {Array.from({ length: 9 }).map((_, i) => {
+              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const selected = parameters.position === idx && (parameters.overrideX < 0 || parameters.overrideY < 0);
+              return (
+                <button
+                  key={idx}
+                  type="button"
+                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ''} ${hoverTile === idx ? styles.gridTileHovered : ''}`}
+                  onClick={() => {
+                    // Clear overrides to use grid positioning and set position
+                    onParameterChange('overrideX', -1 as any);
+                    onParameterChange('overrideY', -1 as any);
+                    onParameterChange('position', idx as any);
+                  }}
+                  onMouseEnter={() => setHoverTile(idx)}
+                  onMouseLeave={() => setHoverTile(null)}
+                >
+                  {idx}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className={styles.previewDisclaimer}>
+        Preview is approximate. Final output may vary due to PDF font metrics.
+      </div>
+    </div>
+  );
+}
+
+

frontend/src/components/tools/addStamp/StampPreviewUtils.ts

@@ -0,0 +1,235 @@
+import type { AddStampParameters } from './useAddStampParameters';
+
+export type ContainerSize = { width: number; height: number };
+export type PageSizePts = { widthPts: number; heightPts: number } | null;
+export type ImageMeta = { url: string; width: number; height: number } | null;
+
+// Map UI margin option to backend margin factor
+export const marginFactorMap: Record<AddStampParameters['customMargin'], number> = {
+  'small': 0.02,
+  'medium': 0.035,
+  'large': 0.05,
+  'x-large': 0.075,
+};
+
+export const A4_ASPECT_RATIO = 0.707; // width/height used elsewhere in legacy UI
+
+// Get font family based on selected alphabet (matching backend logic)
+export const getFontFamily = (alphabet: string): string => {
+  switch (alphabet) {
+    case 'arabic':
+      return 'Noto Sans Arabic, Arial Unicode MS, sans-serif';
+    case 'japanese':
+      return 'Meiryo, Yu Gothic, Hiragino Sans, sans-serif';
+    case 'korean':
+      return 'Malgun Gothic, Dotum, sans-serif';
+    case 'chinese':
+      return 'SimSun, Microsoft YaHei, sans-serif';
+    case 'thai':
+      return 'Noto Sans Thai, Tahoma, sans-serif';
+    case 'roman':
+    default:
+      return 'Noto Sans, Arial, Helvetica, sans-serif';
+  }
+};
+
+// Lightweight parser: returns first page number from CSV/range input, otherwise 1
+export const getFirstSelectedPage = (input: string): number => {
+  if (!input) return 1;
+  const parts = input.split(',').map(s => s.trim()).filter(Boolean);
+  for (const part of parts) {
+    if (/^\d+\s*-\s*\d+$/.test(part)) {
+      const low = parseInt(part.split('-')[0].trim(), 10);
+      if (Number.isFinite(low) && low > 0) return low;
+    }
+    const n = parseInt(part, 10);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return 1;
+};
+
+export type StampPreviewStyle = { container: any; item: any };
+
+// Unified per-alphabet preview adjustments
+export type Alphabet = 'roman' | 'arabic' | 'japanese' | 'korean' | 'chinese' | 'thai';
+export type AlphabetTweaks = { scale: number; rowOffsetRem: [number, number, number]; lineHeight: number; capHeightRatio: number; defaultFontSize: number };
+export const ALPHABET_PREVIEW_TWEAKS: Record<Alphabet, AlphabetTweaks> = {
+  // [top, middle, bottom] row offsets in rem
+  roman: { scale: 1.0/1.18, rowOffsetRem: [0, 1, 2.2], lineHeight: 1.28, capHeightRatio: 0.70, defaultFontSize: 80 },
+  arabic: { scale: 1.2, rowOffsetRem: [0, 1.5, 2.5], lineHeight: 1, capHeightRatio: 0.68, defaultFontSize: 80 },
+  japanese: { scale: 1/1.2, rowOffsetRem: [-0.1, 1, 2], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
+  korean: { scale: 1.0/1.05, rowOffsetRem: [-0.2, 0.5, 1.4], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
+  chinese: { scale: 1/1.2, rowOffsetRem: [0, 2, 2.8], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 30 }, // temporary default font size so that it fits on the PDF
+  thai: { scale: 1/1.2, rowOffsetRem: [-1, 0, .8], lineHeight: 1, capHeightRatio: 0.66, defaultFontSize: 80 },
+};
+export const getAlphabetPreviewScale = (alphabet: string): number => (ALPHABET_PREVIEW_TWEAKS as any)[alphabet]?.scale ?? 1.0;
+
+export const getDefaultFontSizeForAlphabet = (alphabet: string): number => {
+  return (ALPHABET_PREVIEW_TWEAKS as any)[alphabet]?.defaultFontSize ?? 80;
+};
+
+export function computeStampPreviewStyle(
+  parameters: AddStampParameters,
+  imageMeta: ImageMeta,
+  pageSize: PageSizePts,
+  containerSize: ContainerSize,
+  showQuickGrid: boolean | undefined,
+  _hoverTile: number | null,
+  hasPageThumbnail: boolean
+): StampPreviewStyle {
+  const pageWidthPx = containerSize.width;
+  const pageHeightPx = containerSize.height;
+  const widthPts = pageSize?.widthPts ?? 595.28; // A4 width at 72 DPI
+  const heightPts = pageSize?.heightPts ?? 841.89; // A4 height at 72 DPI
+  const scaleX = pageWidthPx / widthPts;
+  const scaleY = pageHeightPx / heightPts;
+  if (pageWidthPx <= 0 || pageHeightPx <= 0) return { item: {}, container: {} } as any;
+
+  const marginPts = (widthPts + heightPts) / 2 * (marginFactorMap[parameters.customMargin] ?? 0.035);
+
+  // Compute content dimensions
+  const heightPtsContent = parameters.fontSize * getAlphabetPreviewScale(parameters.alphabet);
+  let widthPtsContent = heightPtsContent;
+
+
+  if (parameters.stampType === 'image' && imageMeta) {
+    const aspect = imageMeta.width / imageMeta.height;
+    widthPtsContent = heightPtsContent * aspect;
+  } else if (parameters.stampType === 'text') {
+    // Use Canvas 2D to measure text width for better fidelity than DOM spans
+    const textLine = (parameters.stampText || '').split('\n')[0] ?? '';
+    const fontPx = heightPtsContent * scaleY; // Convert point size to px using vertical scale
+    const fontFamily = getFontFamily(parameters.alphabet);
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.font = `${fontPx}px ${fontFamily}`;
+      const metrics = ctx.measureText(textLine);
+      const measuredWidthPx = metrics.width;
+      // Convert measured px width back to PDF points using horizontal scale
+      widthPtsContent = measuredWidthPx / scaleX;
+
+      let adjustmentFactor = 1.0;
+      switch (parameters.alphabet) {
+        case 'roman':
+          adjustmentFactor = 0.90;
+          break;
+        case 'arabic':
+        case 'thai':
+          adjustmentFactor = 0.92;
+          break;
+        case 'japanese':
+        case 'korean':
+        case 'chinese':
+          adjustmentFactor = 0.88;
+          break;
+        default:
+          adjustmentFactor = 0.93;
+      }
+      widthPtsContent *= adjustmentFactor;
+    }
+  }
+
+  // Positioning helpers - mirror backend logic
+  const position = parameters.position;
+  const calcX = () => {
+    if (parameters.overrideX >= 0 && parameters.overrideY >= 0) return parameters.overrideX;
+    switch (position % 3) {
+      case 1: // Left
+        return marginPts;
+      case 2: // Center
+        return (widthPts - widthPtsContent) / 2;
+      case 0: // Right
+        return widthPts - widthPtsContent - marginPts;
+      default:
+        return 0;
+    }
+  };
+  const calcY = () => {
+    if (parameters.overrideX >= 0 && parameters.overrideY >= 0) return parameters.overrideY;
+    // For text, backend positions using cap height, not full font size
+    const heightForY = parameters.stampType === 'text'
+      ? heightPtsContent * ((ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.capHeightRatio ?? 0.70)
+      : heightPtsContent;
+    switch (Math.floor((position - 1) / 3)) {
+      case 0: // Top
+        return heightPts - heightForY - marginPts;
+      case 1: // Middle
+        return (heightPts - heightForY) / 2;
+      case 2: // Bottom
+        return marginPts;
+      default:
+        return 0;
+    }
+  };
+
+  const xPts = calcX();
+  const yPts = calcY();
+  let xPx = xPts * scaleX;
+  let yPx = yPts * scaleY;
+  if (parameters.stampType === 'text') {
+    try {
+      const rootFontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
+      const rowIndex = Math.floor((position - 1) / 3); // 0 top, 1 middle, 2 bottom
+      const offsets = (ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.rowOffsetRem ?? [0, 0, 0];
+      const offsetRem = offsets[rowIndex] ?? 0;
+      yPx += offsetRem * rootFontSizePx;
+    } catch (e) {
+      // no-op
+      console.error(e);
+    }
+  }
+  const widthPx = widthPtsContent * scaleX;
+  const heightPx = heightPtsContent * scaleY;
+
+  xPx = Math.max(0, Math.min(xPx, pageWidthPx - widthPx));
+  yPx = Math.max(0, Math.min(yPx, pageHeightPx - heightPx));
+
+  const opacity = Math.max(0, Math.min(1, parameters.opacity / 100));
+  const displayOpacity = opacity;
+
+  let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';
+  if (parameters.stampType === 'text') {
+    const colIndex = position % 3; // 1: left, 2: center, 0: right
+    switch (colIndex) {
+      case 2: // center column
+        alignItems = 'center';
+        break;
+      case 0: // right column
+        alignItems = 'flex-end';
+        break;
+      default:
+        alignItems = 'flex-start';
+    }
+  }
+
+  return {
+    container: {
+      position: 'relative',
+      width: '100%',
+      aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
+      backgroundColor: hasPageThumbnail ? 'transparent' : 'rgba(255,255,255,0.03)',
+      border: '1px solid var(--border-default, #333)',
+      overflow: 'hidden'
+    },
+    item: {
+      position: 'absolute',
+      left: `${xPx}px`,
+      bottom: `${yPx}px`,
+      width: `${widthPx}px`,
+      height: `${heightPx}px`,
+      opacity: displayOpacity,
+      transform: `rotate(${-parameters.rotation}deg)`,
+      transformOrigin: 'center center',
+      color: parameters.customColor,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      lineHeight: (ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.lineHeight ?? 1,
+      alignItems,
+      cursor: showQuickGrid ? 'default' : 'move',
+      pointerEvents: showQuickGrid ? 'none' : 'auto',
+    }
+  };
+}

frontend/src/components/tools/addStamp/useAddStampOperation.ts

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import { ToolType, useToolOperation } from '../../../hooks/tools/shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { AddStampParameters, defaultParameters } from './useAddStampParameters';
+
+export const buildAddStampFormData = (parameters: AddStampParameters, file: File): FormData => {
+  const formData = new FormData();
+  formData.append('fileInput', file);
+  formData.append('pageNumbers', parameters.pageNumbers);
+  formData.append('customMargin', parameters.customMargin || 'medium'); 
+  formData.append('position', String(parameters.position));
+  const effectiveFontSize = parameters.fontSize;
+  formData.append('fontSize', String(effectiveFontSize));
+  formData.append('rotation', String(parameters.rotation));
+  formData.append('opacity', String(parameters.opacity / 100));
+  formData.append('overrideX', String(parameters.overrideX));
+  formData.append('overrideY', String(parameters.overrideY));
+  formData.append('customColor', parameters.customColor.startsWith('#') ? parameters.customColor : `#${parameters.customColor}`);
+  formData.append('alphabet', parameters.alphabet);
+
+  // Stamp type and payload
+  formData.append('stampType', parameters.stampType || 'text');
+  if (parameters.stampType === 'text') {
+    formData.append('stampText', parameters.stampText);
+  } else if (parameters.stampType === 'image' && parameters.stampImage) {
+    formData.append('stampImage', parameters.stampImage);
+  }
+
+  return formData;
+};
+
+export const addStampOperationConfig = {
+  toolType: ToolType.singleFile,
+  buildFormData: buildAddStampFormData,
+  operationType: 'addStamp',
+  endpoint: '/api/v1/misc/add-stamp',
+  defaultParameters,
+} as const;
+
+export const useAddStampOperation = () => {
+  const { t } = useTranslation();
+
+  return useToolOperation<AddStampParameters>({
+    ...addStampOperationConfig,
+    getErrorMessage: createStandardErrorHandler(
+      t('AddStampRequest.error.failed', 'An error occurred while adding stamp to the PDF.')
+    ),
+  });
+};
+
+

frontend/src/components/tools/addStamp/useAddStampParameters.ts

@@ -0,0 +1,53 @@
+import { BaseParameters } from '../../../types/parameters';
+import { useBaseParameters, type BaseParametersHook } from '../../../hooks/tools/shared/useBaseParameters';
+
+export interface AddStampParameters extends BaseParameters {
+  stampType?: 'text' | 'image';
+  stampText: string;
+  stampImage?: File;
+  alphabet: 'roman' | 'arabic' | 'japanese' | 'korean' | 'chinese' | 'thai';
+  fontSize: number; 
+  rotation: number; 
+  opacity: number;
+  position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; 
+  overrideX: number;
+  overrideY: number; 
+  customMargin: 'small' | 'medium' | 'large' | 'x-large';
+  customColor: string;
+  pageNumbers: string;
+  _activePill: 'fontSize' | 'rotation' | 'opacity';
+}
+
+export const defaultParameters: AddStampParameters = {
+  stampType: 'text',
+  stampText: '',
+  alphabet: 'roman',
+  fontSize: 80,
+  rotation: 0,
+  opacity: 50,
+  position: 5,
+  overrideX: -1,
+  overrideY: -1,
+  customMargin: 'medium',
+  customColor: '#d3d3d3',
+  pageNumbers: '1',
+  _activePill: 'fontSize',
+};
+
+export type AddStampParametersHook = BaseParametersHook<AddStampParameters>;
+
+export const useAddStampParameters = (): AddStampParametersHook => {
+  return useBaseParameters<AddStampParameters>({
+    defaultParameters,
+    endpointName: 'add-stamp',
+    validateFn: (params): boolean => {
+      if (!params.stampType) return false;
+      if (params.stampType === 'text') {
+        return params.stampText.trim().length > 0;
+      }
+      return params.stampImage !== undefined;
+    },
+  });
+};
+
+

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/automate/ToolSelector.tsx

@@ -58,8 +58,13 @@ export default function ToolSelector({
     return registry;
   }, [baseFilteredTools]);
 
+  // Transform filteredTools to the expected format for useToolSections
+  const transformedFilteredTools = useMemo(() => {
+    return filteredTools.map(([id, tool]) => ({ item: [id, tool] as [string, ToolRegistryEntry] }));
+  }, [filteredTools]);
+
   // Use the same tool sections logic as the main ToolPicker
-  const { sections, searchGroups } = useToolSections(filteredTools);
+  const { sections, searchGroups } = useToolSections(transformedFilteredTools);
 
   // Determine what to display: search results or organized sections
   const isSearching = searchTerm.trim().length > 0;

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

@@ -0,0 +1,179 @@
+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";
+import ButtonSelector from "../../shared/ButtonSelector";
+
+interface BookletImpositionSettingsProps {
+  parameters: BookletImpositionParameters;
+  onParameterChange: (key: keyof BookletImpositionParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = false }: BookletImpositionSettingsProps) => {
+  const { t } = useTranslation();
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  return (
+    <Stack gap="md">
+      <Divider ml='-md'></Divider>
+
+
+      {/* Double Sided */}
+      <Stack gap="sm">
+        <label
+          style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+          title={t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}
+        >
+          <input
+            type="checkbox"
+            checked={parameters.doubleSided}
+            onChange={(e) => {
+              const isDoubleSided = e.target.checked;
+              onParameterChange('doubleSided', isDoubleSided);
+              // Reset to BOTH when turning double-sided back on
+              if (isDoubleSided) {
+                onParameterChange('duplexPass', 'BOTH');
+              } else {
+                // Default to FIRST pass when going to manual duplex
+                onParameterChange('duplexPass', 'FIRST');
+              }
+            }}
+            disabled={disabled}
+          />
+          <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
+        </label>
+
+        {/* Manual Duplex Pass Selection - only show when double-sided is OFF */}
+        {!parameters.doubleSided && (
+          <Stack gap="xs" ml="lg">
+            <Text size="sm" fw={500} c="orange">
+              {t('bookletImposition.manualDuplex.title', 'Manual Duplex Mode')}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {t('bookletImposition.manualDuplex.instructions', 'For printers without automatic duplex. You\'ll need to run this twice:')}
+            </Text>
+
+            <ButtonSelector
+              label={t('bookletImposition.duplexPass.label', 'Print Pass')}
+              value={parameters.duplexPass}
+              onChange={(value) => onParameterChange('duplexPass', value)}
+              options={[
+                { value: 'FIRST', label: t('bookletImposition.duplexPass.first', '1st Pass') },
+                { value: 'SECOND', label: t('bookletImposition.duplexPass.second', '2nd Pass') }
+              ]}
+              disabled={disabled}
+            />
+
+            <Text size="xs" c="blue" fs="italic">
+              {parameters.duplexPass === 'FIRST'
+                ? t('bookletImposition.duplexPass.firstInstructions', 'Prints front sides → stack face-down → run again with 2nd Pass')
+                : t('bookletImposition.duplexPass.secondInstructions', 'Load printed stack face-down → prints back sides')
+              }
+            </Text>
+          </Stack>
+        )}
+      </Stack>
+
+      <Divider />
+
+      {/* Advanced Options */}
+      <Stack gap="sm">
+        <Button
+          variant="subtle"
+          onClick={() => setAdvancedOpen(!advancedOpen)}
+          disabled={disabled}
+        >
+          {t('bookletImposition.advanced.toggle', 'Advanced Options')} {advancedOpen ? '▲' : '▼'}
+        </Button>
+
+        <Collapse in={advancedOpen}>
+          <Stack gap="md" mt="md">
+            {/* Right-to-Left Binding */}
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+              title={t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}
+            >
+              <input
+                type="checkbox"
+                checked={parameters.spineLocation === 'RIGHT'}
+                onChange={(e) => onParameterChange('spineLocation', e.target.checked ? 'RIGHT' : 'LEFT')}
+                disabled={disabled}
+              />
+              <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
+            </label>
+
+            {/* Add Border Option */}
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+              title={t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}
+            >
+              <input
+                type="checkbox"
+                checked={parameters.addBorder}
+                onChange={(e) => onParameterChange('addBorder', e.target.checked)}
+                disabled={disabled}
+              />
+              <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
+            </label>
+
+            {/* Gutter Margin */}
+            <Stack gap="xs">
+              <label
+                style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+                title={t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}
+              >
+                <input
+                  type="checkbox"
+                  checked={parameters.addGutter}
+                  onChange={(e) => onParameterChange('addGutter', e.target.checked)}
+                  disabled={disabled}
+                />
+                <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
+              </label>
+
+              {parameters.addGutter && (
+                <NumberInput
+                  label={t('bookletImposition.gutterSize.label', 'Gutter size (points)')}
+                  value={parameters.gutterSize}
+                  onChange={(value) => onParameterChange('gutterSize', value || 12)}
+                  min={6}
+                  max={72}
+                  step={6}
+                  disabled={disabled}
+                  size="sm"
+                />
+              )}
+            </Stack>
+
+            {/* Flip on Short Edge */}
+            <label
+              style={{ display: 'flex', alignItems: 'center', gap: 'var(--mantine-spacing-xs)' }}
+              title={!parameters.doubleSided
+                ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
+                : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
+              }
+            >
+              <input
+                type="checkbox"
+                checked={parameters.flipOnShortEdge}
+                onChange={(e) => onParameterChange('flipOnShortEdge', e.target.checked)}
+                disabled={disabled || !parameters.doubleSided}
+              />
+              <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
+                {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
+              </Text>
+            </label>
+
+            {/* Paper Size Note */}
+            <Text size="xs" c="dimmed" fs="italic">
+              {t('bookletImposition.paperSizeNote', 'Paper size is automatically derived from your first page.')}
+            </Text>
+          </Stack>
+        </Collapse>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default BookletImpositionSettings;

frontend/src/components/tools/certSign/CertificateFilesSettings.tsx

@@ -0,0 +1,95 @@
+import { Stack, Text, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { CertSignParameters } from "../../../hooks/tools/certSign/useCertSignParameters";
+import FileUploadButton from "../../shared/FileUploadButton";
+
+interface CertificateFilesSettingsProps {
+  parameters: CertSignParameters;
+  onParameterChange: (key: keyof CertSignParameters, value: any) => void;
+  disabled?: boolean;
+}
+
+const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = false }: CertificateFilesSettingsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Stack gap="md">
+      {/* Certificate Files based on type */}
+      {parameters.certType === 'PEM' && (
+        <Stack gap="sm">
+          <FileUploadButton
+            file={parameters.privateKeyFile}
+            onChange={(file) => onParameterChange('privateKeyFile', file || undefined)}
+            accept=".pem,.der,.key"
+            disabled={disabled}
+            placeholder={t('certSign.choosePrivateKey', 'Choose Private Key File')}
+          />
+          {parameters.privateKeyFile && (
+            <FileUploadButton
+              file={parameters.certFile}
+              onChange={(file) => onParameterChange('certFile', file || undefined)}
+              accept=".pem,.der,.crt,.cer"
+              disabled={disabled}
+              placeholder={t('certSign.chooseCertificate', 'Choose Certificate File')}
+            />
+          )}
+        </Stack>
+      )}
+
+      {parameters.certType === 'PKCS12' && (
+        <FileUploadButton
+          file={parameters.p12File}
+          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          accept=".p12"
+          disabled={disabled}
+          placeholder={t('certSign.chooseP12File', 'Choose PKCS12 File')}
+        />
+      )}
+
+      {parameters.certType === 'PFX' && (
+        <FileUploadButton
+          file={parameters.p12File}
+          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          accept=".pfx"
+          disabled={disabled}
+          placeholder={t('certSign.choosePfxFile', 'Choose PFX File')}
+        />
+      )}
+
+      {parameters.certType === 'JKS' && (
+        <FileUploadButton
+          file={parameters.jksFile}
+          onChange={(file) => onParameterChange('jksFile', file || undefined)}
+          accept=".jks,.keystore"
+          disabled={disabled}
+          placeholder={t('certSign.chooseJksFile', 'Choose JKS File')}
+        />
+      )}
+
+      {parameters.signMode === 'AUTO' && (
+        <Text c="dimmed" size="sm">
+          {t('certSign.serverCertMessage', 'Using server certificate - no files or password required')}
+        </Text>
+      )}
+
+      {/* Password - only show when files are uploaded */}
+      {parameters.certType && (
+        (parameters.certType === 'PEM' && parameters.privateKeyFile && parameters.certFile) ||
+        (parameters.certType === 'PKCS12' && parameters.p12File) ||
+        (parameters.certType === 'PFX' && parameters.p12File) ||
+        (parameters.certType === 'JKS' && parameters.jksFile)
+      ) && (
+        <TextInput
+          label={t('certSign.password', 'Certificate Password')}
+          placeholder={t('certSign.passwordOptional', 'Leave empty if no password')}
+          type="password"
+          value={parameters.password}
+          onChange={(event) => onParameterChange('password', event.currentTarget.value)}
+          disabled={disabled}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default CertificateFilesSettings;