ui

Bumping version (#5268 )
Feature/annotations (#5260 )
2025-12-22 00:50:27 +00:00 · 2025-12-18 20:43:10 +00:00 · 2025-12-18 15:47:54 +00:00
46 changed files with 4107 additions and 448 deletions
@@ -268,6 +268,18 @@ tasks.register('cleanFrontendAssets', Delete) {
    delete generatedFrontendPaths.collect { new File(resourcesStaticDir, it) }
 }

+tasks.register('copyApiLandingPage', Copy) {
+    group = 'frontend'
+    description = 'Copy API landing page to index.html for backend-only mode'
+    from(new File(resourcesStaticDir, 'api-landing.html'))
+    into(resourcesStaticDir)
+    rename('api-landing.html', 'index.html')
+    dependsOn cleanFrontendAssets
+    doFirst {
+        println "Copying API landing page to index.html for backend-only mode..."
+    }
+}
+
 // Ensure copyFrontendAssets runs after spotless tasks
 tasks.named('copyFrontendAssets').configure {
    mustRunAfter tasks.matching { it.name.startsWith('spotless') }
@@ -277,9 +289,9 @@ if (buildWithFrontend) {
    println "Frontend build enabled - JAR will include React frontend"
    processResources.dependsOn copyFrontendAssets
 } else {
-    println "Frontend build disabled - JAR will be backend-only"
-    // When not building the UI, ensure any stale frontend assets are removed
-    processResources.dependsOn cleanFrontendAssets
+    println "Frontend build disabled - JAR will be backend-only with API landing page"
+    // When not building the UI, ensure any stale frontend assets are removed and use API landing page
+    processResources.dependsOn copyApiLandingPage
 }

 bootJar.dependsOn ':common:jar'
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="Stirling-PDF API Server">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stirling-PDF - API Server</title>
+
+    <!-- Icons -->
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+    <link rel="shortcut icon" href="favicon.ico">
+
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            background-color: #f3f4f6;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1.5rem 1.5rem 0;
+            overflow: auto;
+        }
+
+        .auth-card {
+            width: min(45rem, 96vw);
+            background-color: #ffffff;
+            border-radius: 1.25rem;
+            box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.12);
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+
+        .auth-content {
+            max-width: 26.25rem;
+            width: 100%;
+        }
+
+        .login-header {
+            margin-bottom: 1.5rem;
+            margin-top: 0.5rem;
+        }
+
+        .login-header-logos {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1.25rem;
+        }
+
+        .login-logo-icon {
+            width: 2.5rem;
+            height: 2.5rem;
+            border-radius: 0.5rem;
+        }
+
+        .login-logo-text {
+            height: 2rem;
+        }
+
+        .login-title {
+            font-size: 2rem;
+            font-weight: 800;
+            color: #111827;
+            margin: 0 0 0.375rem;
+        }
+
+        .login-subtitle {
+            color: #6b7280;
+            font-size: 0.875rem;
+            margin: 0;
+        }
+
+        .section {
+            margin: 1.5rem 0 0.75rem;
+        }
+
+        .section-title {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 0.5rem;
+        }
+
+        .section-text {
+            font-size: 0.875rem;
+            color: #6b7280;
+            line-height: 1.5;
+            margin-bottom: 0.75rem;
+        }
+
+        .section-list {
+            font-size: 0.875rem;
+            color: #6b7280;
+            line-height: 1.6;
+            margin-left: 1.25rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .section-list li {
+            margin-bottom: 0.5rem;
+        }
+
+        .section-list a,
+        .section-text a {
+            color: #AF3434;
+            text-decoration: none;
+            font-weight: 500;
+        }
+
+        .section-list a:hover,
+        .section-text a:hover {
+            text-decoration: underline;
+        }
+
+        .code-inline {
+            background-color: #f3f4f6;
+            padding: 0.2rem 0.4rem;
+            border-radius: 0.25rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.8125rem;
+            color: #374151;
+        }
+
+        .cta-button {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background-color: #AF3434;
+            color: white;
+            border: none;
+            border-radius: 0.625rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-block;
+            text-align: center;
+            transition: background-color 0.2s;
+            margin: 0.75rem 0;
+        }
+
+        .cta-button:hover {
+            background-color: #9a2e2e;
+        }
+
+        .divider {
+            margin: 1.5rem 0;
+            border: 0;
+            border-top: 1px solid #e5e7eb;
+        }
+
+        .footer-link {
+            font-size: 0.875rem;
+            color: #6b7280;
+            text-align: center;
+            display: block;
+            margin-top: 1rem;
+            text-decoration: none;
+        }
+
+        .footer-link:hover {
+            color: #374151;
+            text-decoration: underline;
+        }
+
+        .footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: 100%;
+            text-align: center;
+            padding: 1rem;
+            font-size: 0.875rem;
+            color: #6b7280;
+            background-color: transparent;
+            z-index: 10;
+        }
+
+        .footer a {
+            color: #AF3434;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="auth-card">
+        <div class="auth-content">
+            <div class="login-header">
+                <div class="login-header-logos">
+                    <img src="favicon.svg" alt="Stirling PDF" class="login-logo-icon">
+                    <img src="api-wordmark.svg" alt="Stirling PDF" class="login-logo-text">
+                </div>
+                <h1 class="login-title">API Server</h1>
+                <p class="login-subtitle">Backend-only mode without web UI</p>
+            </div>
+
+            <div class="section">
+                <p class="section-text">
+                    This Stirling-PDF instance is running in <strong>API-only mode</strong>. The web interface has not been included in this build.
+                </p>
+            </div>
+
+            <a href="swagger-ui/index.html" class="cta-button">Open API Documentation</a>
+
+            <hr class="divider">
+
+            <div class="section">
+                <h2 class="section-title">Looking for the Web UI?</h2>
+
+                <p class="section-text"><strong>If you're using Docker:</strong></p>
+                <ul class="section-list">
+                    <li>You may have pulled an <strong>API-only image</strong> or there was a build configuration issue</li>
+                    <li>Use the standard Docker image: <code class="code-inline">stirlingtools/stirling-pdf:latest</code></li>
+                </ul>
+
+                <p class="section-text"><strong>If you're using a JAR file:</strong></p>
+                <ul class="section-list">
+                    <li>You downloaded <code class="code-inline">Stirling-PDF-server.jar</code> which is the <strong>API-only version without UI</strong></li>
+                    <li>Download the full version from <a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank">GitHub Releases</a>:</li>
+                    <li style="margin-left: 1.5rem;"><code class="code-inline">Stirling-PDF.jar</code> - Standard version with UI</li>
+                    <li style="margin-left: 1.5rem;"><code class="code-inline">Stirling-PDF-with-login.jar</code> - Version with authentication features</li>
+                </ul>
+
+                <p class="section-text"><strong>If you built from source:</strong></p>
+                <ul class="section-list">
+                    <li>Rebuild with: <code class="code-inline">./gradlew build -PbuildWithFrontend=true</code></li>
+                    <li>Or deploy the frontend separately from the <code class="code-inline">/frontend</code> directory</li>
+                </ul>
+            </div>
+
+            <hr class="divider">
+
+            <div class="section">
+                <h2 class="section-title">Need Help?</h2>
+                <p class="section-text">Join our community for support:</p>
+                <ul class="section-list">
+                    <li><a href="https://discord.gg/Cn8pWhQRxZ" target="_blank">Discord Community</a> - Get help from the community</li>
+                    <li><a href="https://github.com/Stirling-Tools/Stirling-PDF/issues" target="_blank">GitHub Issues</a> - Report bugs or request features</li>
+                    <li><a href="https://github.com/Stirling-Tools/Stirling-PDF" target="_blank">GitHub Repository</a> - View documentation and source code</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <span>Powered by </span>
+        <a href="https://stirlingpdf.com">Stirling PDF</a>
+    </div>
+</body>
+</html>
@@ -59,7 +59,7 @@ repositories {

 allprojects {
    group = 'stirling.software'
-    version = '2.1.4'
+    version = '2.1.5'

    configurations.configureEach {
        exclude group: 'commons-logging', module: 'commons-logging'
@@ -102,7 +102,6 @@
        "postcss-preset-mantine": "^1.18.0",
        "postcss-simple-vars": "^7.0.1",
        "puppeteer": "^24.25.0",
-        "rollup-plugin-visualizer": "^6.0.5",
        "typescript": "^5.9.2",
        "typescript-eslint": "^8.44.1",
        "vite": "^7.1.7",
@@ -458,6 +457,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18"
      },
@@ -501,6 +501,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=18"
      }
@@ -581,6 +582,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/core/-/core-1.5.0.tgz",
      "integrity": "sha512-Yrh9XoVaT8cUgzgqpJ7hx5wg6BqQrCFirqqlSwVb+Ly9oNn4fZbR9GycIWmzJOU5XBnaOJjXfQSaDyoNP0woNA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/engines": "1.5.0",
        "@embedpdf/models": "1.5.0"
@@ -680,6 +682,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-history/-/plugin-history-1.5.0.tgz",
      "integrity": "sha512-p7PTNNaIr4gH3jLwX+eLJe1DeUXgi21kVGN6SRx/pocH8esg4jqoOeD/YiRRZoZnPOiy0jBXVhkPkwSmY7a2hQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -696,6 +699,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-interaction-manager/-/plugin-interaction-manager-1.5.0.tgz",
      "integrity": "sha512-ckHgTfvkW6c5Ta7Mc+Dl9C2foVnvEpqEJ84wyBnqrU0OWbe/jsiPhyKBVeartMGqNI/kVfaQTXupyrKhekAVmg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -713,6 +717,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-loader/-/plugin-loader-1.5.0.tgz",
      "integrity": "sha512-P4YpIZfaW69etYIjphyaL4cGl2pB14h3OdTE0tRQ2pZYZHFLTvlt4q9B3PVSdhlSrHK5nob7jfLGon2U7xCslg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -766,6 +771,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-render/-/plugin-render-1.5.0.tgz",
      "integrity": "sha512-ywwSj0ByrlkvrJIHKRzqxARkOZriki8VJUC+T4MV8fGyF4CzvCRJyKlPktahFz+VxhoodqTh7lBCib68dH+GvA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -800,6 +806,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.5.0.tgz",
      "integrity": "sha512-RNmTZCZ8X1mA8cw9M7TMDuhO9GtkOalGha2bBL3En3D1IlDRS7PzNNMSMV7eqT7OQICSTltlpJ8p8Qi5esvL/Q==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -836,6 +843,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-selection/-/plugin-selection-1.5.0.tgz",
      "integrity": "sha512-zrxLBAZQoPswDuf9q9DrYaQc6B0Ysc2U1hueTjNH/4+ydfl0BFXZkKR63C2e3YmWtXvKjkoIj0GyPzsiBORLUw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -911,6 +919,7 @@
      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.5.0.tgz",
      "integrity": "sha512-G8GDyYRhfehw72+r4qKkydnA5+AU8qH67g01Y12b0DzI0VIzymh/05Z4dK8DsY3jyWPXJfw2hlg5+KDHaMBHgQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@embedpdf/models": "1.5.0"
      },
@@ -1066,6 +1075,7 @@
      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.18.3",
        "@emotion/babel-plugin": "^11.13.5",
@@ -1109,6 +1119,7 @@
      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.18.3",
        "@emotion/babel-plugin": "^11.13.5",
@@ -2139,6 +2150,7 @@
      "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.6.tgz",
      "integrity": "sha512-paTl+0x+O/QtgMtqVJaG8maD8sfiOdgPmLOyG485FmeGZ1L3KMdEkhxZtmdGlDFsLXhmMGQ57ducT90bvhXX5A==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@floating-ui/react": "^0.27.16",
        "clsx": "^2.1.1",
@@ -2189,6 +2201,7 @@
      "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.6.tgz",
      "integrity": "sha512-liHfaWXHAkLjJy+Bkr29UsCwAoDQ/a64WrM67lksx8F0qqyjR5RQH8zVlhuOjdpQnwtlUkE/YiTvbJiPcoI0bw==",
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "react": "^18.x || ^19.x"
      }
@@ -2256,6 +2269,7 @@
      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
      "integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.28.4",
        "@mui/core-downloads-tracker": "^7.3.5",
@@ -3188,6 +3202,7 @@
      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-7.9.0.tgz",
      "integrity": "sha512-ggs5k+/0FUJcIgNY08aZTqpBTtbExkJMYMLSMwyucrhtWexVOEY1KJmhBsxf+E/Q15f5rbwBpj+t0t2AW2oCsQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12.16"
      }
@@ -3306,7 +3321,6 @@
      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.6.tgz",
      "integrity": "sha512-4awhxtMh4cx9blePWl10HRHj8Iivtqj+2QdDCSMDzxG+XKa9+VCNupQuCuvzEhYPzZSrX+0gC+0lHA/0fFKKQQ==",
      "license": "MIT",
-      "peer": true,
      "peerDependencies": {
        "acorn": "^8.9.0"
      }
@@ -4083,6 +4097,7 @@
      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.10.4",
        "@babel/runtime": "^7.12.5",
@@ -4411,6 +4426,7 @@
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@@ -4421,6 +4437,7 @@
      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "@types/react": "^19.2.0"
      }
@@ -4490,6 +4507,7 @@
      "integrity": "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.3",
        "@typescript-eslint/types": "8.46.3",
@@ -5203,7 +5221,6 @@
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.24.tgz",
      "integrity": "sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/shared": "3.5.24"
      }
@@ -5213,7 +5230,6 @@
      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.24.tgz",
      "integrity": "sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/reactivity": "3.5.24",
        "@vue/shared": "3.5.24"
@@ -5224,7 +5240,6 @@
      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.24.tgz",
      "integrity": "sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/reactivity": "3.5.24",
        "@vue/runtime-core": "3.5.24",
@@ -5237,7 +5252,6 @@
      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.24.tgz",
      "integrity": "sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-ssr": "3.5.24",
        "@vue/shared": "3.5.24"
@@ -5264,6 +5278,7 @@
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -5671,7 +5686,6 @@
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
      "license": "Apache-2.0",
-      "peer": true,
      "engines": {
        "node": ">= 0.4"
      }
@@ -5948,6 +5962,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.19",
        "caniuse-lite": "^1.0.30001751",
@@ -6743,16 +6758,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/define-lazy-prop": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/define-properties": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -7005,7 +7010,8 @@
      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
      "integrity": "sha512-vhE6eymDQSKWUXwwA37NtTTVEzjtGVfDr3pRbsWEQ5onH/Snp2c+2xZHWJJawG/0hCCJLRGt4xVtEVUVILol4w==",
      "dev": true,
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
    },
    "node_modules/dezalgo": {
      "version": "1.0.4",
@@ -7400,6 +7406,7 @@
      "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -7570,6 +7577,7 @@
      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@rtsao/scc": "^1.1.0",
        "array-includes": "^3.1.9",
@@ -7736,8 +7744,7 @@
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/espree": {
      "version": "10.4.0",
@@ -7802,7 +7809,6 @@
      "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.2.tgz",
      "integrity": "sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
      }
@@ -8893,6 +8899,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.27.6"
      },
@@ -9215,22 +9222,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -9385,7 +9376,6 @@
      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "^1.0.6"
      }
@@ -9590,19 +9580,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -9719,6 +9696,7 @@
      "integrity": "sha512-Pcfm3eZ+eO4JdZCXthW9tCDT3nF4K+9dmeZ+5X39n+Kqz0DDIABRP5CAEOHRFZk8RGuC2efksTJxrjp8EXCunQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@acemir/cssom": "^0.9.19",
        "@asamuzakjp/dom-selector": "^6.7.3",
@@ -10305,8 +10283,7 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/locate-path": {
      "version": "6.0.0",
@@ -10984,24 +10961,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/open": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/optionator": {
      "version": "0.9.4",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -11483,6 +11442,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -11762,6 +11722,7 @@
      "resolved": "https://registry.npmjs.org/preact/-/preact-10.27.2.tgz",
      "integrity": "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==",
      "license": "MIT",
+      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/preact"
@@ -12144,6 +12105,7 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -12153,6 +12115,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -12765,60 +12728,6 @@
        "fsevents": "~2.3.2"
      }
    },
-    "node_modules/rollup-plugin-visualizer": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-6.0.5.tgz",
-      "integrity": "sha512-9+HlNgKCVbJDs8tVtjQ43US12eqaiHyyiLMdBwQ7vSZPiHMysGNo2E88TAp1si5wx8NAoYriI2A5kuKfIakmJg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "open": "^8.0.0",
-        "picomatch": "^4.0.2",
-        "source-map": "^0.7.4",
-        "yargs": "^17.5.1"
-      },
-      "bin": {
-        "rollup-plugin-visualizer": "dist/bin/cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "rolldown": "1.x || ^1.0.0-beta",
-        "rollup": "2.x || 3.x || 4.x"
-      },
-      "peerDependenciesMeta": {
-        "rolldown": {
-          "optional": true
-        },
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/rollup-plugin-visualizer/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -13718,7 +13627,6 @@
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
      "license": "Apache-2.0",
-      "peer": true,
      "engines": {
        "node": ">= 0.4"
      }
@@ -13927,6 +13835,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -14228,6 +14137,7 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "devOptional": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -14309,6 +14219,7 @@
      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "napi-postinstall": "^0.3.0"
      },
@@ -14513,6 +14424,7 @@
      "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@@ -14683,6 +14595,7 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -14696,6 +14609,7 @@
      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/chai": "^5.2.2",
        "@vitest/expect": "3.2.4",
@@ -15307,8 +15221,7 @@
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
      "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/zod": {
      "version": "3.25.76",
@@ -68,7 +68,6 @@
  "scripts": {
    "predev": "npm run generate-icons",
    "dev": "vite",
-    "clean": "rm -rf dist",
    "prebuild": "npm run generate-icons",
    "lint": "eslint --max-warnings=0",
    "build": "vite build",
@@ -150,7 +149,6 @@
    "postcss-preset-mantine": "^1.18.0",
    "postcss-simple-vars": "^7.0.1",
    "puppeteer": "^24.25.0",
-    "rollup-plugin-visualizer": "^6.0.5",
    "typescript": "^5.9.2",
    "typescript-eslint": "^8.44.1",
    "vite": "^7.1.7",
@@ -736,6 +736,11 @@ tags = "signature,autograph"
 title = "Sign"
 desc = "Adds signature to PDF by drawing, text or image"

+[home.annotate]
+tags = "annotate,highlight,draw"
+title = "Annotate"
+desc = "Highlight, draw, add notes and shapes in the viewer"
+
 [home.flatten]
 tags = "simplify,remove,interactive"
 title = "Flatten"
@@ -4013,23 +4018,92 @@ deleteSelected = "Delete Selected Pages"
 closePdf = "Close PDF"
 exportAll = "Export PDF"
 downloadSelected = "Download Selected Files"
-downloadAll = "Download All"
-saveAll = "Save All"
+annotations = "Annotations"
+exportSelected = "Export Selected Pages"
+saveChanges = "Save Changes"
 toggleTheme = "Toggle Theme"
-toggleBookmarks = "Toggle Bookmarks"
 language = "Language"
+toggleAnnotations = "Toggle Annotations Visibility"
 search = "Search PDF"
 panMode = "Pan Mode"
 rotateLeft = "Rotate Left"
 rotateRight = "Rotate Right"
 toggleSidebar = "Toggle Sidebar"
-exportSelected = "Export Selected Pages"
-toggleAnnotations = "Toggle Annotations Visibility"
-annotationMode = "Toggle Annotation Mode"
+toggleBookmarks = "Toggle Bookmarks"
 print = "Print PDF"
-draw = "Draw"
-save = "Save"
-saveChanges = "Save Changes"
+downloadAll = "Download All"
+saveAll = "Save All"
+
+[textAlign]
+left = "Left"
+center = "Center"
+right = "Right"
+
+[annotation]
+title = "Annotate"
+desc = "Use highlight, pen, text, and notes. Changes stay live—no flattening required."
+highlight = "Highlight"
+pen = "Pen"
+text = "Text box"
+note = "Note"
+rectangle = "Rectangle"
+ellipse = "Ellipse"
+select = "Select"
+exit = "Exit annotation mode"
+strokeWidth = "Width"
+opacity = "Opacity"
+strokeOpacity = "Stroke Opacity"
+fillOpacity = "Fill Opacity"
+fontSize = "Font size"
+chooseColor = "Choose colour"
+color = "Colour"
+strokeColor = "Stroke Colour"
+fillColor = "Fill Colour"
+underline = "Underline"
+strikeout = "Strikeout"
+squiggly = "Squiggly"
+inkHighlighter = "Freehand Highlighter"
+freehandHighlighter = "Freehand Highlighter"
+square = "Square"
+circle = "Circle"
+polygon = "Polygon"
+line = "Line"
+stamp = "Add Image"
+textMarkup = "Text Markup"
+drawing = "Drawing"
+shapes = "Shapes"
+notesStamps = "Notes & Stamps"
+settings = "Settings"
+borderOn = "Border: On"
+borderOff = "Border: Off"
+editInk = "Edit Pen"
+editLine = "Edit Line"
+editNote = "Edit Note"
+editText = "Edit Text Box"
+editTextMarkup = "Edit Text Markup"
+editSelected = "Edit Annotation"
+editSquare = "Edit Square"
+editCircle = "Edit Circle"
+editPolygon = "Edit Polygon"
+unsupportedType = "This annotation type is not fully supported for editing."
+textAlignment = "Text Alignment"
+noteIcon = "Note Icon"
+imagePreview = "Preview"
+contents = "Text"
+backgroundColor = "Background colour"
+clearBackground = "Remove background"
+noBackground = "No background"
+stampSettings = "Stamp Settings"
+savingCopy = "Preparing download..."
+saveFailed = "Unable to save copy"
+saveReady = "Download ready"
+selectAndMove = "Select and Edit"
+editSelectDescription = "Click an existing annotation to edit its colour, opacity, text, or size."
+editStampHint = "To change the image, delete this stamp and add a new one."
+editSwitchToSelect = "Switch to Select & Edit to edit this annotation."
+undo = "Undo"
+redo = "Redo"
+applyChanges = "Apply Changes"

 [search]
 title = "Search PDF"
@@ -12,6 +12,7 @@ import { AppConfigProvider, AppConfigProviderProps, AppConfigRetryOptions } from
 import { RightRailProvider } from "@app/contexts/RightRailContext";
 import { ViewerProvider } from "@app/contexts/ViewerContext";
 import { SignatureProvider } from "@app/contexts/SignatureContext";
+import { AnnotationProvider } from "@app/contexts/AnnotationContext";
 import { TourOrchestrationProvider } from "@app/contexts/TourOrchestrationContext";
 import { AdminTourOrchestrationProvider } from "@app/contexts/AdminTourOrchestrationContext";
 import { PageEditorProvider } from "@app/contexts/PageEditorContext";
@@ -95,13 +96,15 @@ export function AppProviders({ children, appConfigRetryOptions, appConfigProvide
                                <ViewerProvider>
                                  <PageEditorProvider>
                                    <SignatureProvider>
-                                      <RightRailProvider>
-                                        <TourOrchestrationProvider>
-                                          <AdminTourOrchestrationProvider>
-                                            {children}
-                                          </AdminTourOrchestrationProvider>
-                                        </TourOrchestrationProvider>
-                                      </RightRailProvider>
+                                      <AnnotationProvider>
+                                        <RightRailProvider>
+                                          <TourOrchestrationProvider>
+                                            <AdminTourOrchestrationProvider>
+                                              {children}
+                                            </AdminTourOrchestrationProvider>
+                                          </TourOrchestrationProvider>
+                                        </RightRailProvider>
+                                      </AnnotationProvider>
                                    </SignatureProvider>
                                  </PageEditorProvider>
                                </ViewerProvider>
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch } from '@mantine/core';
+import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch, Slider, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';

 interface ColorPickerProps {
@@ -8,6 +8,10 @@ interface ColorPickerProps {
  selectedColor: string;
  onColorChange: (color: string) => void;
  title?: string;
+  opacity?: number;
+  onOpacityChange?: (opacity: number) => void;
+  showOpacity?: boolean;
+  opacityLabel?: string;
 }

 export const ColorPicker: React.FC<ColorPickerProps> = ({
@@ -15,10 +19,15 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
  onClose,
  selectedColor,
  onColorChange,
-  title
+  title,
+  opacity,
+  onOpacityChange,
+  showOpacity = false,
+  opacityLabel,
 }) => {
  const { t } = useTranslation();
  const resolvedTitle = title ?? t('colorPicker.title', 'Choose colour');
+  const resolvedOpacityLabel = opacityLabel ?? t('annotation.opacity', 'Opacity');

  return (
    <Modal
@@ -38,6 +47,23 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
          size="lg"
          fullWidth
        />
+        {showOpacity && onOpacityChange && opacity !== undefined && (
+          <Stack gap="xs">
+            <Text size="sm" fw={500}>{resolvedOpacityLabel}</Text>
+            <Slider
+              min={10}
+              max={100}
+              value={opacity}
+              onChange={onOpacityChange}
+              marks={[
+                { value: 25, label: '25%' },
+                { value: 50, label: '50%' },
+                { value: 75, label: '75%' },
+                { value: 100, label: '100%' },
+              ]}
+            />
+          </Stack>
+        )}
        <Group justify="flex-end">
          <Button onClick={onClose}>
            {t('common.done', 'Done')}
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Stack, TextInput, Select, Combobox, useCombobox, Group, Box } from '@mantine/core';
+import { Stack, TextInput, Select, Combobox, useCombobox, Group, Box, SegmentedControl } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';

 interface TextInputWithFontProps {
@@ -11,6 +12,8 @@ interface TextInputWithFontProps {
  onFontFamilyChange: (family: string) => void;
  textColor?: string;
  onTextColorChange?: (color: string) => void;
+  textAlign?: 'left' | 'center' | 'right';
+  onTextAlignChange?: (align: 'left' | 'center' | 'right') => void;
  disabled?: boolean;
  label: string;
  placeholder: string;
@@ -30,6 +33,8 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
  onFontFamilyChange,
  textColor = '#000000',
  onTextColorChange,
+  textAlign = 'left',
+  onTextAlignChange,
  disabled = false,
  label,
  placeholder,
@@ -39,6 +44,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
  colorLabel,
  onAnyChange
 }) => {
+  const { t } = useTranslation();
  const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
  const fontSizeCombobox = useCombobox();
  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
@@ -212,6 +218,23 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
          }}
        />
      )}
+
+      {/* Text Alignment */}
+      {onTextAlignChange && (
+        <SegmentedControl
+          value={textAlign}
+          onChange={(value: string) => {
+            onTextAlignChange(value as 'left' | 'center' | 'right');
+            onAnyChange?.();
+          }}
+          disabled={disabled}
+          data={[
+            { label: t('textAlign.left', 'Left'), value: 'left' },
+            { label: t('textAlign.center', 'Center'), value: 'center' },
+            { label: t('textAlign.right', 'Right'), value: 'right' },
+          ]}
+        />
+      )}
    </Stack>
  );
 };
@@ -1,7 +1,5 @@
 import { FileId } from '@app/types/file';
 import { PDFDocument, PDFPage, PageBreakSettings } from '@app/types/pageEditor';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { thumbnailGenerationService } from '@app/services/thumbnailGenerationService';

 // V1-style DOM-first command system (replaces the old React state commands)
 export abstract class DOMCommand {
@@ -729,6 +727,8 @@ export class InsertFilesCommand extends DOMCommand {

  private async generateThumbnailsForInsertedPages(updatedDocument: PDFDocument): Promise<void> {
    try {
+      const { thumbnailGenerationService } = await import('@app/services/thumbnailGenerationService');
+
      // Group pages by file ID to generate thumbnails efficiently
      const pagesByFileId = new Map<FileId, PDFPage[]>();

@@ -809,6 +809,7 @@ export class InsertFilesCommand extends DOMCommand {
          const clonedArrayBuffer = arrayBuffer.slice(0);

          // Use PDF.js via the worker manager to extract pages
+          const { pdfWorkerManager } = await import('@app/services/pdfWorkerManager');
          const pdf = await pdfWorkerManager.createDocument(clonedArrayBuffer);

          const pageCount = pdf.numPages;
@@ -1,5 +1,4 @@
 import { Dispatch, SetStateAction, useCallback } from "react";
-import JSZip from "jszip";

 import type {
  useFileActions,
@@ -195,7 +194,8 @@ export const usePageEditorExport = ({
      );

      if (files.length > 1) {
-        const zip = new JSZip();
+        const JSZip = await import("jszip");
+        const zip = new JSZip.default();

        files.forEach((file) => {
          zip.file(file.name, file);
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback, Suspense } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
 import { useNavigate, useLocation } from 'react-router-dom';
 import LocalIcon from '@app/components/shared/LocalIcon';
@@ -223,9 +223,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
              </ActionIcon>
            </div>
            <div className="modal-body">
-              <Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
-                {activeComponent}
-              </Suspense>
+              {activeComponent}
            </div>
          </div>
        </div>
@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef, useEffect, lazy, Suspense } from "react";
+import React, { useState, useRef, forwardRef, useEffect } from "react";
 import { Stack, Divider, Menu, Indicator } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -14,10 +14,8 @@ import '@app/components/shared/quickAccessBar/QuickAccessBar.css';
 import { Tooltip } from '@app/components/shared/Tooltip';
 import AllToolsNavButton from '@app/components/shared/AllToolsNavButton';
 import ActiveToolButton from "@app/components/shared/quickAccessBar/ActiveToolButton";
+import AppConfigModal from '@app/components/shared/AppConfigModal';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
-
-// Lazy-load AppConfigModal
-const AppConfigModal = lazy(() => import('@app/components/shared/AppConfigModal'));
 import { useLicenseAlert } from "@app/hooks/useLicenseAlert";
 import { requestStartTour } from '@app/constants/events';
 import QuickAccessButton from '@app/components/shared/quickAccessBar/QuickAccessButton';
@@ -367,12 +365,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
        </div>
      </div>

-      <Suspense fallback={null}>
-        <AppConfigModal
-          opened={configModalOpen}
-          onClose={() => setConfigModalOpen(false)}
-        />
-      </Suspense>
+      <AppConfigModal
+        opened={configModalOpen}
+        onClose={() => setConfigModalOpen(false)}
+      />
    </div>
  );
 });
@@ -17,7 +17,7 @@ export default function LoginRequiredBanner({ show }: LoginRequiredBannerProps)

  return (
    <Alert
-      icon={<LocalIcon icon="lock" width={20} height={20} />}
+      icon={<LocalIcon icon="lock-rounded" width={20} height={20} />}
      title={t('admin.settings.loginDisabled.title', 'Login Mode Required')}
      color="blue"
      variant="light"
@@ -1,10 +1,8 @@
-import React, { lazy } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavKey } from '@app/components/shared/config/types';
-
-// Lazy load config sections
-const HotkeysSection = lazy(() => import('@app/components/shared/config/configSections/HotkeysSection'));
-const GeneralSection = lazy(() => import('@app/components/shared/config/configSections/GeneralSection'));
+import HotkeysSection from '@app/components/shared/config/configSections/HotkeysSection';
+import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';

 export interface ConfigNavItem {
  key: NavKey;
@@ -193,7 +193,7 @@ const GeneralSection: React.FC<GeneralSectionProps> = ({ hideTitle = false }) =>
                    size="sm"
                    color={updateSummary.max_priority === 'urgent' ? 'red' : 'blue'}
                    onClick={() => setUpdateModalOpened(true)}
-                    leftSection={<LocalIcon icon="system-update-alt-rounded" width="1rem" height="1rem" />}
+                    leftSection={<LocalIcon icon="system-update-rounded" width="1rem" height="1rem" />}
                  >
                    {t('settings.general.updates.viewDetails', 'View Details')}
                  </Button>
@@ -25,6 +25,12 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
  const { selectedTool } = useNavigationState();
  const isSignMode = selectedTool === 'sign';

+  // Check if we're in any annotation tool that should disable the toggle
+  const isInAnnotationTool = selectedTool === 'annotate' || selectedTool === 'sign' || selectedTool === 'addImage' || selectedTool === 'addText';
+
+  // Check if we're on annotate tool to highlight the button
+  const isAnnotateActive = selectedTool === 'annotate';
+
  // Don't show any annotation controls in sign mode
  if (isSignMode) {
    return null;
@@ -35,13 +41,14 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
      {/* Annotation Visibility Toggle */}
      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position={tooltipPosition} offset={tooltipOffset} arrow portalTarget={document.body}>
        <ActionIcon
-          variant="subtle"
+          variant={isAnnotateActive ? "filled" : "subtle"}
+          color="blue"
          radius="md"
          className="right-rail-icon"
          onClick={() => {
            viewerContext?.toggleAnnotationsVisibility();
          }}
-          disabled={disabled || currentView !== 'viewer'}
+          disabled={disabled || currentView !== 'viewer' || isInAnnotationTool}
        >
          <LocalIcon
            icon={viewerContext?.isAnnotationsVisible ? "visibility" : "visibility-off-rounded"}
@@ -63,7 +63,7 @@ export default function ToastRenderer() {
                  {/* Icon */}
                  <div className="toast-icon">
                    {t.icon ?? (
-                      <LocalIcon icon={getDefaultIconName(t)} width={20} height={20} />
+                      <LocalIcon icon={`material-symbols:${getDefaultIconName(t)}`} width={20} height={20} />
                    )}
                  </div>

@@ -86,7 +86,7 @@ export default function ToastRenderer() {
                        }}
                        className={`toast-button toast-expand-button ${t.isExpanded ? 'toast-expand-button--expanded' : ''}`}
                      >
-                        <LocalIcon icon="expand-more-rounded" />
+                        <LocalIcon icon="material-symbols:expand-more-rounded" />
                      </button>
                    )}
                    <button
@@ -94,7 +94,7 @@ export default function ToastRenderer() {
                      onClick={() => dismiss(t.id)}
                      className="toast-button"
                    >
-                      <LocalIcon icon="close-rounded" width={20} height={20} />
+                      <LocalIcon icon="material-symbols:close-rounded" width={20} height={20} />
                    </button>
                  </div>
                </div>
@@ -42,7 +42,7 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
          component="label"
          htmlFor="attachments-input"
          disabled={disabled}
-          leftSection={<LocalIcon icon="add-rounded" width="14" height="14" />}
+          leftSection={<LocalIcon icon="plus" width="14" height="14" />}
        >
          {parameters.attachments?.length > 0
            ? t("AddAttachmentsRequest.addMoreFiles", "Add more files...")
@@ -234,7 +234,7 @@ export const SavedSignaturesSection = ({
          {groupedSignatures.personal.length > 0 && activePersonalSignature && (
            <Stack gap="xs">
              <Group gap="xs">
-                <LocalIcon icon="person-rounded" width={18} height={18} />
+                <LocalIcon icon="material-symbols:person-rounded" width={18} height={18} />
                <Text fw={600} size="sm">
                  {translate('saved.personalHeading', 'Personal Signatures')}
                </Text>
@@ -257,7 +257,7 @@ export const SavedSignaturesSection = ({
                    onClick={() => setActivePersonalIndex(prev => Math.max(0, prev - 1))}
                    disabled={disabled || activePersonalIndex === 0}
                  >
-                    <LocalIcon icon="chevron-left-rounded" width={18} height={18} />
+                    <LocalIcon icon="material-symbols:chevron-left-rounded" width={18} height={18} />
                  </ActionIcon>
                  <ActionIcon
                    variant="light"
@@ -265,7 +265,7 @@ export const SavedSignaturesSection = ({
                    onClick={() => setActivePersonalIndex(prev => Math.min(groupedSignatures.personal.length - 1, prev + 1))}
                    disabled={disabled || activePersonalIndex >= groupedSignatures.personal.length - 1}
                  >
-                    <LocalIcon icon="chevron-right-rounded" width={18} height={18} />
+                    <LocalIcon icon="material-symbols:chevron-right-rounded" width={18} height={18} />
                  </ActionIcon>
                </Group>
              </Group>
@@ -284,7 +284,7 @@ export const SavedSignaturesSection = ({
                        onClick={() => onUseSignature(activePersonalSignature)}
                        disabled={disabled}
                      >
-                        <LocalIcon icon="check-circle-outline-rounded" width={18} height={18} />
+                        <LocalIcon icon="material-symbols:check-circle-outline-rounded" width={18} height={18} />
                      </ActionIcon>
                      <Tooltip label={translate('saved.delete', 'Remove')}>
                        <ActionIcon
@@ -294,7 +294,7 @@ export const SavedSignaturesSection = ({
                          onClick={() => onDeleteSignature(activePersonalSignature)}
                          disabled={disabled}
                        >
-                          <LocalIcon icon="delete-outline-rounded" width={18} height={18} />
+                          <LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
                        </ActionIcon>
                      </Tooltip>
                    </Group>
@@ -317,7 +317,7 @@ export const SavedSignaturesSection = ({
          {groupedSignatures.shared.length > 0 && activeSharedSignature && (
            <Stack gap="xs">
              <Group gap="xs">
-                <LocalIcon icon="groups-rounded" width={18} height={18} />
+                <LocalIcon icon="material-symbols:groups-rounded" width={18} height={18} />
                <Text fw={600} size="sm">
                  {translate('saved.sharedHeading', 'Shared Signatures')}
                </Text>
@@ -340,7 +340,7 @@ export const SavedSignaturesSection = ({
                    onClick={() => setActiveSharedIndex(prev => Math.max(0, prev - 1))}
                    disabled={disabled || activeSharedIndex === 0}
                  >
-                    <LocalIcon icon="chevron-left-rounded" width={18} height={18} />
+                    <LocalIcon icon="material-symbols:chevron-left-rounded" width={18} height={18} />
                  </ActionIcon>
                  <ActionIcon
                    variant="light"
@@ -348,7 +348,7 @@ export const SavedSignaturesSection = ({
                    onClick={() => setActiveSharedIndex(prev => Math.min(groupedSignatures.shared.length - 1, prev + 1))}
                    disabled={disabled || activeSharedIndex >= groupedSignatures.shared.length - 1}
                  >
-                    <LocalIcon icon="chevron-right-rounded" width={18} height={18} />
+                    <LocalIcon icon="material-symbols:chevron-right-rounded" width={18} height={18} />
                  </ActionIcon>
                </Group>
              </Group>
@@ -367,7 +367,7 @@ export const SavedSignaturesSection = ({
                        onClick={() => onUseSignature(activeSharedSignature)}
                        disabled={disabled}
                      >
-                        <LocalIcon icon="check-circle-outline-rounded" width={18} height={18} />
+                        <LocalIcon icon="material-symbols:check-circle-outline-rounded" width={18} height={18} />
                      </ActionIcon>
                      {isAdmin && (
                        <Tooltip label={translate('saved.delete', 'Remove')}>
@@ -378,7 +378,7 @@ export const SavedSignaturesSection = ({
                            onClick={() => onDeleteSignature(activeSharedSignature)}
                            disabled={disabled}
                          >
-                            <LocalIcon icon="delete-outline-rounded" width={18} height={18} />
+                            <LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
                          </ActionIcon>
                        </Tooltip>
                      )}
@@ -424,7 +424,7 @@ export const SavedSignaturesSection = ({
                    onClick={() => setActiveLocalStorageIndex(prev => Math.max(0, prev - 1))}
                    disabled={disabled || activeLocalStorageIndex === 0}
                  >
-                    <LocalIcon icon="chevron-left-rounded" width={18} height={18} />
+                    <LocalIcon icon="material-symbols:chevron-left-rounded" width={18} height={18} />
                  </ActionIcon>
                  <ActionIcon
                    variant="light"
@@ -432,7 +432,7 @@ export const SavedSignaturesSection = ({
                    onClick={() => setActiveLocalStorageIndex(prev => Math.min(groupedSignatures.localStorage.length - 1, prev + 1))}
                    disabled={disabled || activeLocalStorageIndex >= groupedSignatures.localStorage.length - 1}
                  >
-                    <LocalIcon icon="chevron-right-rounded" width={18} height={18} />
+                    <LocalIcon icon="material-symbols:chevron-right-rounded" width={18} height={18} />
                  </ActionIcon>
                </Group>
              </Group>
@@ -451,7 +451,7 @@ export const SavedSignaturesSection = ({
                        onClick={() => onUseSignature(activeLocalStorageSignature)}
                        disabled={disabled}
                      >
-                        <LocalIcon icon="check-circle-outline-rounded" width={18} height={18} />
+                        <LocalIcon icon="material-symbols:check-circle-outline-rounded" width={18} height={18} />
                      </ActionIcon>
                      <Tooltip label={translate('saved.delete', 'Remove')}>
                        <ActionIcon
@@ -461,7 +461,7 @@ export const SavedSignaturesSection = ({
                          onClick={() => onDeleteSignature(activeLocalStorageSignature)}
                          disabled={disabled}
                        >
-                          <LocalIcon icon="delete-outline-rounded" width={18} height={18} />
+                          <LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
                        </ActionIcon>
                      </Tooltip>
                    </Group>
@@ -370,7 +370,7 @@ const SignSettings = ({
      isReady,
      onClick,
      'personal',
-      'person-rounded',
+      'material-symbols:person-rounded',
      translate('saved.savePersonal', 'Save Personal')
    );

@@ -379,7 +379,7 @@ const SignSettings = ({
      isReady,
      onClick,
      'shared',
-      'groups-rounded',
+      'material-symbols:groups-rounded',
      translate('saved.saveShared', 'Save Shared')
    );

@@ -964,7 +964,7 @@ const SignSettings = ({
                  gap: '0.4rem',
                }}
              >
-                <LocalIcon icon="pause-rounded" width={20} height={20} />
+                <LocalIcon icon="material-symbols:pause-rounded" width={20} height={20} />
                <Text component="span" size="sm" fw={500}>
                  {translate('mode.pause', 'Pause placement')}
                </Text>
@@ -987,7 +987,7 @@ const SignSettings = ({
                  gap: '0.4rem',
                }}
              >
-                <LocalIcon icon="play-arrow-rounded" width={20} height={20} />
+                <LocalIcon icon="material-symbols:play-arrow-rounded" width={20} height={20} />
                <Text component="span" size="sm" fw={500}>
                  {translate('mode.resume', 'Resume placement')}
                </Text>
@@ -0,0 +1,352 @@
+import { useImperativeHandle, forwardRef, useCallback } from 'react';
+import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
+import { PdfAnnotationSubtype, PdfAnnotationIcon } from '@embedpdf/models';
+import type {
+  AnnotationToolId,
+  AnnotationToolOptions,
+  AnnotationAPI,
+  AnnotationEvent,
+  AnnotationPatch,
+} from '@app/components/viewer/viewerTypes';
+
+type NoteIcon = NonNullable<AnnotationToolOptions['icon']>;
+type AnnotationDefaults =
+  | {
+      type:
+        | PdfAnnotationSubtype.HIGHLIGHT
+        | PdfAnnotationSubtype.UNDERLINE
+        | PdfAnnotationSubtype.STRIKEOUT
+        | PdfAnnotationSubtype.SQUIGGLY;
+      color: string;
+      opacity: number;
+      customData?: Record<string, unknown>;
+    }
+  | {
+      type: PdfAnnotationSubtype.INK;
+      color: string;
+      opacity?: number;
+      borderWidth?: number;
+      strokeWidth?: number;
+      lineWidth?: number;
+      customData?: Record<string, unknown>;
+    }
+  | {
+      type: PdfAnnotationSubtype.FREETEXT;
+      fontColor?: string;
+      fontSize?: number;
+      fontFamily?: string;
+      textAlign?: number;
+      opacity?: number;
+      backgroundColor?: string;
+      borderWidth?: number;
+      contents?: string;
+      icon?: PdfAnnotationIcon;
+      customData?: Record<string, unknown>;
+    }
+  | {
+      type: PdfAnnotationSubtype.SQUARE | PdfAnnotationSubtype.CIRCLE | PdfAnnotationSubtype.POLYGON;
+      color: string;
+      strokeColor: string;
+      opacity: number;
+      fillOpacity: number;
+      strokeOpacity: number;
+      borderWidth: number;
+      strokeWidth: number;
+      lineWidth: number;
+      customData?: Record<string, unknown>;
+    }
+  | {
+      type: PdfAnnotationSubtype.LINE | PdfAnnotationSubtype.POLYLINE;
+      color: string;
+      strokeColor?: string;
+      opacity: number;
+      borderWidth?: number;
+      strokeWidth?: number;
+      lineWidth?: number;
+      startStyle?: string;
+      endStyle?: string;
+      lineEndingStyles?: { start: string; end: string };
+      customData?: Record<string, unknown>;
+    }
+  | {
+      type: PdfAnnotationSubtype.STAMP;
+      imageSrc?: string;
+      imageSize?: { width: number; height: number };
+      customData?: Record<string, unknown>;
+    }
+  | null;
+
+type AnnotationApiSurface = {
+  setActiveTool: (toolId: AnnotationToolId | null) => void;
+  getActiveTool?: () => { id: AnnotationToolId } | null;
+  setToolDefaults?: (toolId: AnnotationToolId, defaults: AnnotationDefaults) => void;
+  getSelectedAnnotation?: () => unknown | null;
+  deselectAnnotation?: () => void;
+  updateAnnotation?: (pageIndex: number, annotationId: string, patch: AnnotationPatch) => void;
+  onAnnotationEvent?: (listener: (event: AnnotationEvent) => void) => void | (() => void);
+};
+
+type ToolDefaultsBuilder = (options?: AnnotationToolOptions) => AnnotationDefaults;
+
+const NOTE_ICON_MAP: Record<NoteIcon, PdfAnnotationIcon> = {
+  Comment: PdfAnnotationIcon.Comment,
+  Key: PdfAnnotationIcon.Key,
+  Note: PdfAnnotationIcon.Note,
+  Help: PdfAnnotationIcon.Help,
+  NewParagraph: PdfAnnotationIcon.NewParagraph,
+  Paragraph: PdfAnnotationIcon.Paragraph,
+  Insert: PdfAnnotationIcon.Insert,
+};
+
+const DEFAULTS = {
+  highlight: '#ffd54f',
+  underline: '#ffb300',
+  strikeout: '#e53935',
+  squiggly: '#00acc1',
+  ink: '#1f2933',
+  inkHighlighter: '#ffd54f',
+  text: '#111111',
+  note: '#ffd54f', // match highlight color
+  shapeFill: '#0000ff',
+  shapeStroke: '#cf5b5b',
+  shapeOpacity: 0.5,
+};
+
+const withCustomData = (options?: AnnotationToolOptions) =>
+  options?.customData ? { customData: options.customData } : {};
+
+const getIconEnum = (icon?: NoteIcon) => NOTE_ICON_MAP[icon ?? 'Comment'] ?? PdfAnnotationIcon.Comment;
+
+const buildStampDefaults: ToolDefaultsBuilder = (options) => ({
+  type: PdfAnnotationSubtype.STAMP,
+  ...(options?.imageSrc ? { imageSrc: options.imageSrc } : {}),
+  ...(options?.imageSize ? { imageSize: options.imageSize } : {}),
+  ...withCustomData(options),
+});
+
+const buildInkDefaults = (options?: AnnotationToolOptions, opacityOverride?: number): AnnotationDefaults => ({
+  type: PdfAnnotationSubtype.INK,
+  color: options?.color ?? (opacityOverride ? DEFAULTS.inkHighlighter : DEFAULTS.ink),
+  opacity: options?.opacity ?? opacityOverride ?? 1,
+  borderWidth: options?.thickness ?? (opacityOverride ? 6 : 2),
+  strokeWidth: options?.thickness ?? (opacityOverride ? 6 : 2),
+  lineWidth: options?.thickness ?? (opacityOverride ? 6 : 2),
+  ...withCustomData(options),
+});
+
+const TOOL_DEFAULT_BUILDERS: Record<AnnotationToolId, ToolDefaultsBuilder> = {
+  select: () => null,
+  highlight: (options) => ({
+    type: PdfAnnotationSubtype.HIGHLIGHT,
+    color: options?.color ?? DEFAULTS.highlight,
+    opacity: options?.opacity ?? 0.6,
+    ...withCustomData(options),
+  }),
+  underline: (options) => ({
+    type: PdfAnnotationSubtype.UNDERLINE,
+    color: options?.color ?? DEFAULTS.underline,
+    opacity: options?.opacity ?? 1,
+    ...withCustomData(options),
+  }),
+  strikeout: (options) => ({
+    type: PdfAnnotationSubtype.STRIKEOUT,
+    color: options?.color ?? DEFAULTS.strikeout,
+    opacity: options?.opacity ?? 1,
+    ...withCustomData(options),
+  }),
+  squiggly: (options) => ({
+    type: PdfAnnotationSubtype.SQUIGGLY,
+    color: options?.color ?? DEFAULTS.squiggly,
+    opacity: options?.opacity ?? 1,
+    ...withCustomData(options),
+  }),
+  ink: (options) => buildInkDefaults(options),
+  inkHighlighter: (options) => buildInkDefaults(options, options?.opacity ?? 0.6),
+  text: (options) => ({
+    type: PdfAnnotationSubtype.FREETEXT,
+    fontColor: options?.color ?? DEFAULTS.text,
+    fontSize: options?.fontSize ?? 14,
+    fontFamily: options?.fontFamily ?? 'Helvetica',
+    textAlign: options?.textAlign ?? 0,
+    opacity: options?.opacity ?? 1,
+    borderWidth: options?.thickness ?? 1,
+    ...(options?.fillColor ? { backgroundColor: options.fillColor } : {}),
+    ...withCustomData(options),
+  }),
+  note: (options) => {
+    const backgroundColor = options?.fillColor ?? DEFAULTS.note;
+    const fontColor = options?.color ?? DEFAULTS.text;
+    return {
+      type: PdfAnnotationSubtype.FREETEXT,
+      fontColor,
+      color: fontColor,
+      fontFamily: options?.fontFamily ?? 'Helvetica',
+      textAlign: options?.textAlign ?? 0,
+      fontSize: options?.fontSize ?? 12,
+      opacity: options?.opacity ?? 1,
+      backgroundColor,
+      borderWidth: options?.thickness ?? 0,
+      contents: options?.contents ?? 'Note',
+      icon: getIconEnum(options?.icon),
+      ...withCustomData(options),
+    };
+  },
+  square: (options) => ({
+    type: PdfAnnotationSubtype.SQUARE,
+    color: options?.color ?? DEFAULTS.shapeFill,
+    strokeColor: options?.strokeColor ?? DEFAULTS.shapeStroke,
+    opacity: options?.opacity ?? DEFAULTS.shapeOpacity,
+    fillOpacity: options?.fillOpacity ?? DEFAULTS.shapeOpacity,
+    strokeOpacity: options?.strokeOpacity ?? DEFAULTS.shapeOpacity,
+    borderWidth: options?.borderWidth ?? 1,
+    strokeWidth: options?.borderWidth ?? 1,
+    lineWidth: options?.borderWidth ?? 1,
+    ...withCustomData(options),
+  }),
+  circle: (options) => ({
+    type: PdfAnnotationSubtype.CIRCLE,
+    color: options?.color ?? DEFAULTS.shapeFill,
+    strokeColor: options?.strokeColor ?? DEFAULTS.shapeStroke,
+    opacity: options?.opacity ?? DEFAULTS.shapeOpacity,
+    fillOpacity: options?.fillOpacity ?? DEFAULTS.shapeOpacity,
+    strokeOpacity: options?.strokeOpacity ?? DEFAULTS.shapeOpacity,
+    borderWidth: options?.borderWidth ?? 1,
+    strokeWidth: options?.borderWidth ?? 1,
+    lineWidth: options?.borderWidth ?? 1,
+    ...withCustomData(options),
+  }),
+  line: (options) => ({
+    type: PdfAnnotationSubtype.LINE,
+    color: options?.color ?? '#1565c0',
+    strokeColor: options?.color ?? '#1565c0',
+    opacity: options?.opacity ?? 1,
+    borderWidth: options?.borderWidth ?? 2,
+    strokeWidth: options?.borderWidth ?? 2,
+    lineWidth: options?.borderWidth ?? 2,
+    ...withCustomData(options),
+  }),
+  lineArrow: (options) => ({
+    type: PdfAnnotationSubtype.LINE,
+    color: options?.color ?? '#1565c0',
+    strokeColor: options?.color ?? '#1565c0',
+    opacity: options?.opacity ?? 1,
+    borderWidth: options?.borderWidth ?? 2,
+    strokeWidth: options?.borderWidth ?? 2,
+    lineWidth: options?.borderWidth ?? 2,
+    startStyle: 'None',
+    endStyle: 'ClosedArrow',
+    lineEndingStyles: { start: 'None', end: 'ClosedArrow' },
+    ...withCustomData(options),
+  }),
+  polyline: (options) => ({
+    type: PdfAnnotationSubtype.POLYLINE,
+    color: options?.color ?? '#1565c0',
+    opacity: options?.opacity ?? 1,
+    borderWidth: options?.borderWidth ?? 2,
+    ...withCustomData(options),
+  }),
+  polygon: (options) => ({
+    type: PdfAnnotationSubtype.POLYGON,
+    color: options?.color ?? DEFAULTS.shapeFill,
+    strokeColor: options?.strokeColor ?? DEFAULTS.shapeStroke,
+    opacity: options?.opacity ?? DEFAULTS.shapeOpacity,
+    fillOpacity: options?.fillOpacity ?? DEFAULTS.shapeOpacity,
+    strokeOpacity: options?.strokeOpacity ?? DEFAULTS.shapeOpacity,
+    borderWidth: options?.borderWidth ?? 1,
+    strokeWidth: options?.borderWidth ?? 1,
+    lineWidth: options?.borderWidth ?? 1,
+    ...withCustomData(options),
+  }),
+  stamp: buildStampDefaults,
+  signatureStamp: buildStampDefaults,
+  signatureInk: (options) => buildInkDefaults(options),
+};
+
+export const AnnotationAPIBridge = forwardRef<AnnotationAPI>(function AnnotationAPIBridge(_props, ref) {
+  // Use the provided annotation API just like SignatureAPIBridge/HistoryAPIBridge
+  const { provides: annotationApi } = useAnnotationCapability();
+
+  const buildAnnotationDefaults = useCallback(
+    (toolId: AnnotationToolId, options?: AnnotationToolOptions) =>
+      TOOL_DEFAULT_BUILDERS[toolId]?.(options) ?? null,
+    []
+  );
+
+  const configureAnnotationTool = useCallback(
+    (toolId: AnnotationToolId, options?: AnnotationToolOptions) => {
+      const api = annotationApi as AnnotationApiSurface | undefined;
+      if (!api?.setActiveTool) return;
+
+      const defaults = buildAnnotationDefaults(toolId, options);
+
+      // Reset tool first, then activate (like SignatureAPIBridge does)
+      api.setActiveTool(null);
+      api.setActiveTool(toolId === 'select' ? null : toolId);
+
+      // Verify tool was activated before setting defaults (like SignatureAPIBridge does)
+      const activeTool = api.getActiveTool?.();
+      if (activeTool && activeTool.id === toolId && defaults) {
+        api.setToolDefaults?.(toolId, defaults);
+      }
+    },
+    [annotationApi, buildAnnotationDefaults]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      activateAnnotationTool: (toolId: AnnotationToolId, options?: AnnotationToolOptions) => {
+        configureAnnotationTool(toolId, options);
+      },
+      setAnnotationStyle: (toolId: AnnotationToolId, options?: AnnotationToolOptions) => {
+        const defaults = buildAnnotationDefaults(toolId, options);
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        if (defaults && api?.setToolDefaults) {
+          api.setToolDefaults(toolId, defaults);
+        }
+      },
+      getSelectedAnnotation: () => {
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        if (!api?.getSelectedAnnotation) {
+          return null;
+        }
+        try {
+          return api.getSelectedAnnotation();
+        } catch (error) {
+          // Some EmbedPDF builds expose getSelectedAnnotation with an internal
+          // `this`/state dependency (e.g. reading `selectedUid` from undefined).
+          // If that happens, fail gracefully and treat it as "no selection"
+          // instead of crashing the entire annotations tool.
+          console.error('[AnnotationAPIBridge] getSelectedAnnotation failed:', error);
+          return null;
+        }
+      },
+      deselectAnnotation: () => {
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        api?.deselectAnnotation?.();
+      },
+      updateAnnotation: (pageIndex: number, annotationId: string, patch: AnnotationPatch) => {
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        api?.updateAnnotation?.(pageIndex, annotationId, patch);
+      },
+      deactivateTools: () => {
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        api?.setActiveTool?.(null);
+      },
+      onAnnotationEvent: (listener: (event: AnnotationEvent) => void) => {
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        if (api?.onAnnotationEvent) {
+          return api.onAnnotationEvent(listener);
+        }
+        return undefined;
+      },
+      getActiveTool: () => {
+        const api = annotationApi as AnnotationApiSurface | undefined;
+        return api?.getActiveTool?.() ?? null;
+      },
+    }),
+    [annotationApi, configureAnnotationTool, buildAnnotationDefaults]
+  );
+
+  return null;
+});
@@ -56,9 +56,6 @@ const EmbedPdfViewerContent = ({
    exportActions,
  } = useViewer();

-  // Register viewer right-rail buttons
-  useViewerRightRailButtons();
-
  const scrollState = getScrollState();
  const rotationState = getRotationState();

@@ -70,8 +67,13 @@ const EmbedPdfViewerContent = ({
    }
  }, [rotationState.rotation]);

-  // Get signature context
-  const { signatureApiRef, historyApiRef, signatureConfig, isPlacementMode } = useSignature();
+  // Get signature and annotation contexts
+  const { signatureApiRef, annotationApiRef, historyApiRef, signatureConfig, isPlacementMode } = useSignature();
+
+  // Track whether there are unsaved annotation changes in this viewer session.
+  // This is our source of truth for navigation guards; it is set when the
+  // annotation history changes, and cleared after we successfully apply changes.
+  const hasAnnotationChangesRef = useRef(false);

  // Get current file from FileContext
  const { selectors, state } = useFileState();
@@ -85,8 +87,8 @@ const EmbedPdfViewerContent = ({

  // Check if we're in an annotation tool
  const { selectedTool } = useNavigationState();
-  // Tools that require the annotation layer (Sign, Add Text, Add Image)
-  const isInAnnotationTool = selectedTool === 'sign' || selectedTool === 'addText' || selectedTool === 'addImage';
+  // Tools that require the annotation layer (Sign, Add Text, Add Image, Annotate)
+  const isInAnnotationTool = selectedTool === 'sign' || selectedTool === 'addText' || selectedTool === 'addImage' || selectedTool === 'annotate';

  // Sync isAnnotationMode in ViewerContext with current tool
  useEffect(() => {
@@ -225,6 +227,31 @@ const EmbedPdfViewerContent = ({
    };
  }, [isViewerHovered, isSearchInterfaceVisible, zoomActions, searchInterfaceActions]);

+  // Watch the annotation history API to detect when the document becomes "dirty".
+  // We treat any change that makes the history undoable as unsaved changes until
+  // the user explicitly applies them via applyChanges.
+  useEffect(() => {
+    const historyApi = historyApiRef.current;
+    if (!historyApi || !historyApi.subscribe) {
+      return;
+    }
+
+    const updateHasChanges = () => {
+      const canUndo = historyApi.canUndo?.() ?? false;
+      if (!hasAnnotationChangesRef.current && canUndo) {
+        hasAnnotationChangesRef.current = true;
+        setHasUnsavedChanges(true);
+      }
+    };
+
+    const unsubscribe = historyApi.subscribe(updateHasChanges);
+    return () => {
+      if (typeof unsubscribe === 'function') {
+        unsubscribe();
+      }
+    };
+  }, [historyApiRef.current, setHasUnsavedChanges]);
+
  // Register checker for unsaved changes (annotations only for now)
  useEffect(() => {
    if (previewFile) {
@@ -232,39 +259,28 @@ const EmbedPdfViewerContent = ({
    }

    const checkForChanges = () => {
-      // Check for annotation changes via history
-      const hasAnnotationChanges = historyApiRef.current?.canUndo() || false;
-
-      console.log('[Viewer] Checking for unsaved changes:', {
-        hasAnnotationChanges
-      });
+      const hasAnnotationChanges = hasAnnotationChangesRef.current;
      return hasAnnotationChanges;
    };

-    console.log('[Viewer] Registering unsaved changes checker');
    registerUnsavedChangesChecker(checkForChanges);

    return () => {
-      console.log('[Viewer] Unregistering unsaved changes checker');
      unregisterUnsavedChangesChecker();
    };
-  }, [historyApiRef, previewFile, registerUnsavedChangesChecker, unregisterUnsavedChangesChecker]);
+  }, [previewFile, registerUnsavedChangesChecker, unregisterUnsavedChangesChecker]);

  // Apply changes - save annotations to new file version
  const applyChanges = useCallback(async () => {
    if (!currentFile || activeFileIds.length === 0) return;

    try {
-      console.log('[Viewer] Applying changes - exporting PDF with annotations');
-
      // Step 1: Export PDF with annotations using EmbedPDF
      const arrayBuffer = await exportActions.saveAsCopy();
      if (!arrayBuffer) {
        throw new Error('Failed to export PDF');
      }

-      console.log('[Viewer] Exported PDF size:', arrayBuffer.byteLength);
-
      // Step 2: Convert ArrayBuffer to File
      const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
      const filename = currentFile.name || 'document.pdf';
@@ -279,12 +295,29 @@ const EmbedPdfViewerContent = ({
      // Step 4: Consume files (replace in context)
      await actions.consumeFiles(activeFileIds, stirlingFiles, stubs);

+      // Mark annotations as saved so navigation away from the viewer is allowed.
+      hasAnnotationChangesRef.current = false;
      setHasUnsavedChanges(false);
    } catch (error) {
      console.error('Apply changes failed:', error);
    }
  }, [currentFile, activeFileIds, exportActions, actions, selectors, setHasUnsavedChanges]);

+  // Expose annotation apply via a global event so tools (like Annotate) can
+  // trigger saves from the left sidebar without tight coupling.
+  useEffect(() => {
+    const handler = () => {
+      void applyChanges();
+    };
+    window.addEventListener('stirling-annotations-apply', handler);
+    return () => {
+      window.removeEventListener('stirling-annotations-apply', handler);
+    };
+  }, [applyChanges]);
+
+  // Register viewer right-rail buttons
+  useViewerRightRailButtons();
+
  const sidebarWidthRem = 15;
  const totalRightMargin =
    (isThumbnailSidebarVisible ? sidebarWidthRem : 0) + (isBookmarkSidebarVisible ? sidebarWidthRem : 0);
@@ -340,6 +373,7 @@ const EmbedPdfViewerContent = ({
              enableAnnotations={isAnnotationMode}
              showBakedAnnotations={isAnnotationsVisible}
              signatureApiRef={signatureApiRef as React.RefObject<any>}
+              annotationApiRef={annotationApiRef as React.RefObject<any>}
              historyApiRef={historyApiRef as React.RefObject<any>}
              onSignatureAdded={() => {
                // Handle signature added - for debugging, enable console logs as needed
@@ -38,8 +38,9 @@ import { SearchAPIBridge } from '@app/components/viewer/SearchAPIBridge';
 import { ThumbnailAPIBridge } from '@app/components/viewer/ThumbnailAPIBridge';
 import { RotateAPIBridge } from '@app/components/viewer/RotateAPIBridge';
 import { SignatureAPIBridge } from '@app/components/viewer/SignatureAPIBridge';
+import { AnnotationAPIBridge } from '@app/components/viewer/AnnotationAPIBridge';
 import { HistoryAPIBridge } from '@app/components/viewer/HistoryAPIBridge';
-import type { SignatureAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
+import type { SignatureAPI, AnnotationAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
 import { ExportAPIBridge } from '@app/components/viewer/ExportAPIBridge';
 import { BookmarkAPIBridge } from '@app/components/viewer/BookmarkAPIBridge';
 import { PrintAPIBridge } from '@app/components/viewer/PrintAPIBridge';
@@ -55,10 +56,11 @@ interface LocalEmbedPDFProps {
  showBakedAnnotations?: boolean;
  onSignatureAdded?: (annotation: any) => void;
  signatureApiRef?: React.RefObject<SignatureAPI>;
+  annotationApiRef?: React.RefObject<AnnotationAPI>;
  historyApiRef?: React.RefObject<HistoryAPI>;
 }

-export function LocalEmbedPDF({ file, url, enableAnnotations = false, showBakedAnnotations = true, onSignatureAdded, signatureApiRef, historyApiRef }: LocalEmbedPDFProps) {
+export function LocalEmbedPDF({ file, url, enableAnnotations = false, showBakedAnnotations = true, onSignatureAdded, signatureApiRef, annotationApiRef, historyApiRef }: LocalEmbedPDFProps) {
  const { t } = useTranslation();
  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
  const [, setAnnotations] = useState<Array<{id: string, pageIndex: number, rect: any}>>([]);
@@ -123,10 +125,8 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, showBakedA
        selectAfterCreate: true,
      }),

-      // Register pan plugin (depends on Viewport, InteractionManager)
-      createPluginRegistration(PanPluginPackage, {
-        defaultMode: 'mobile', // Try mobile mode which might be more permissive
-      }),
+      // Register pan plugin (depends on Viewport, InteractionManager) - keep disabled to prevent drag panning
+      createPluginRegistration(PanPluginPackage, {}),

      // Register zoom plugin with configuration
      createPluginRegistration(ZoomPluginPackage, {
@@ -252,7 +252,315 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, showBakedA
          if (!annotationApi) return;

          if (enableAnnotations) {
-            annotationApi.addTool({
+            const ensureTool = (tool: any) => {
+              const existing = annotationApi.getTool?.(tool.id);
+              if (!existing) {
+                annotationApi.addTool(tool);
+              }
+            };
+
+            ensureTool({
+              id: 'highlight',
+              name: 'Highlight',
+              interaction: { exclusive: true, cursor: 'text', textSelection: true },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.HIGHLIGHT ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.HIGHLIGHT,
+                color: '#ffd54f',
+                opacity: 0.6,
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'underline',
+              name: 'Underline',
+              interaction: { exclusive: true, cursor: 'text', textSelection: true },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.UNDERLINE ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.UNDERLINE,
+                color: '#ffb300',
+                opacity: 1,
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'strikeout',
+              name: 'Strikeout',
+              interaction: { exclusive: true, cursor: 'text', textSelection: true },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.STRIKEOUT ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.STRIKEOUT,
+                color: '#e53935',
+                opacity: 1,
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'squiggly',
+              name: 'Squiggly',
+              interaction: { exclusive: true, cursor: 'text', textSelection: true },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.SQUIGGLY ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.SQUIGGLY,
+                color: '#00acc1',
+                opacity: 1,
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'ink',
+              name: 'Pen',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.INK ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.INK,
+                color: '#1f2933',
+                opacity: 1,
+                borderWidth: 2,
+                lineWidth: 2,
+                strokeWidth: 2,
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'inkHighlighter',
+              name: 'Ink Highlighter',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.INK && annotation.color === '#ffd54f' ? 8 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.INK,
+                color: '#ffd54f',
+                opacity: 0.5,
+                borderWidth: 6,
+                lineWidth: 6,
+                strokeWidth: 6,
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'square',
+              name: 'Square',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.SQUARE ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.SQUARE,
+                color: '#0000ff', // fill color (blue)
+                strokeColor: '#cf5b5b', // border color (reddish pink)
+                opacity: 0.5,
+                borderWidth: 1,
+                strokeWidth: 1,
+                lineWidth: 1,
+              },
+              clickBehavior: {
+                enabled: true,
+                defaultSize: { width: 120, height: 90 },
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'circle',
+              name: 'Circle',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.CIRCLE ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.CIRCLE,
+                color: '#0000ff', // fill color (blue)
+                strokeColor: '#cf5b5b', // border color (reddish pink)
+                opacity: 0.5,
+                borderWidth: 1,
+                strokeWidth: 1,
+                lineWidth: 1,
+              },
+              clickBehavior: {
+                enabled: true,
+                defaultSize: { width: 100, height: 100 },
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'line',
+              name: 'Line',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.LINE ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.LINE,
+                color: '#1565c0',
+                opacity: 1,
+                borderWidth: 2,
+                strokeWidth: 2,
+                lineWidth: 2,
+              },
+              clickBehavior: {
+                enabled: true,
+                defaultLength: 120,
+                defaultAngle: 0,
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'lineArrow',
+              name: 'Arrow',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.LINE && (annotation.endStyle === 'ClosedArrow' || annotation.lineEndingStyles?.end === 'ClosedArrow') ? 9 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.LINE,
+                color: '#1565c0',
+                opacity: 1,
+                borderWidth: 2,
+                startStyle: 'None',
+                endStyle: 'ClosedArrow',
+                lineEndingStyles: { start: 'None', end: 'ClosedArrow' },
+              },
+              clickBehavior: {
+                enabled: true,
+                defaultLength: 120,
+                defaultAngle: 0,
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'polyline',
+              name: 'Polyline',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.POLYLINE ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.POLYLINE,
+                color: '#1565c0',
+                opacity: 1,
+                borderWidth: 2,
+              },
+              clickBehavior: {
+                enabled: true,
+                finishOnDoubleClick: true,
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'polygon',
+              name: 'Polygon',
+              interaction: { exclusive: true, cursor: 'crosshair' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.POLYGON ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.POLYGON,
+                color: '#0000ff', // fill color (blue)
+                strokeColor: '#cf5b5b', // border color (reddish pink)
+                opacity: 0.5,
+                borderWidth: 1,
+              },
+              clickBehavior: {
+                enabled: true,
+                finishOnDoubleClick: true,
+                defaultSize: { width: 140, height: 100 },
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'text',
+              name: 'Text',
+              interaction: { exclusive: true, cursor: 'text' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 10 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.FREETEXT,
+                textColor: '#111111',
+                fontSize: 14,
+                fontFamily: 'Helvetica',
+                opacity: 1,
+                interiorColor: '#fffef7',
+                contents: 'Text',
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'note',
+              name: 'Note',
+              interaction: { exclusive: true, cursor: 'pointer' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 8 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.FREETEXT,
+                textColor: '#1b1b1b',
+                color: '#ffa000',
+                interiorColor: '#fff8e1',
+                opacity: 1,
+                contents: 'Note',
+                fontSize: 12,
+              },
+              clickBehavior: {
+                enabled: true,
+                defaultSize: { width: 160, height: 100 },
+              },
+              behavior: {
+                deactivateToolAfterCreate: false,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
+              id: 'stamp',
+              name: 'Image Stamp',
+              interaction: { exclusive: false, cursor: 'copy' },
+              matchScore: (annotation: any) => (annotation.type === PdfAnnotationSubtype.STAMP ? 5 : 0),
+              defaults: {
+                type: PdfAnnotationSubtype.STAMP,
+              },
+              behavior: {
+                deactivateToolAfterCreate: true,
+                selectAfterCreate: true,
+              },
+            });
+
+            ensureTool({
              id: 'signatureStamp',
              name: 'Digital Signature',
              interaction: { exclusive: false, cursor: 'copy' },
@@ -262,7 +570,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, showBakedA
              },
            });

-            annotationApi.addTool({
+            ensureTool({
              id: 'signatureInk',
              name: 'Signature Draw',
              interaction: { exclusive: true, cursor: 'crosshair' },
@@ -310,6 +618,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, showBakedA
        <ThumbnailAPIBridge />
        <RotateAPIBridge />
        {enableAnnotations && <SignatureAPIBridge ref={signatureApiRef} />}
+        {enableAnnotations && <AnnotationAPIBridge ref={annotationApiRef} />}
        {enableAnnotations && <HistoryAPIBridge ref={historyApiRef} />}
        <ExportAPIBridge />
        <BookmarkAPIBridge />
@@ -104,12 +104,20 @@ const createTextStampImage = (

  ctx.fillStyle = textColor;
  ctx.font = `${fontSize}px ${fontFamily}`;
-  ctx.textAlign = 'left';
+  ctx.textAlign = config.textAlign || 'left';
  ctx.textBaseline = 'middle';

  const horizontalPadding = paddingX;
  const verticalCenter = naturalHeight / 2;
-  ctx.fillText(text, horizontalPadding, verticalCenter);
+
+  let xPosition = horizontalPadding;
+  if (config.textAlign === 'center') {
+    xPosition = naturalWidth / 2;
+  } else if (config.textAlign === 'right') {
+    xPosition = naturalWidth - horizontalPadding;
+  }
+
+  ctx.fillText(text, xPosition, verticalCenter);

  return {
    dataUrl: canvas.toDataURL('image/png'),
@@ -199,12 +207,21 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI>(function SignatureAPI
    }
  }, [annotationApi, signatureConfig, placementPreviewSize, applyStampDefaults, cssToPdfSize]);

+
  // Enable keyboard deletion of selected annotations
  useEffect(() => {
    // Always enable delete key when we have annotation API and are in sign mode
    if (!annotationApi || (isPlacementMode === undefined)) return;

    const handleKeyDown = (event: KeyboardEvent) => {
+      // Skip delete/backspace while a text input/textarea is focused (e.g., editing textbox)
+      const target = event.target as HTMLElement | null;
+      const tag = target?.tagName?.toLowerCase();
+      const editable = target?.getAttribute?.('contenteditable');
+      if (tag === 'input' || tag === 'textarea' || editable === 'true') {
+        return;
+      }
+
      if (event.key === 'Delete' || event.key === 'Backspace') {
        const selectedAnnotation = annotationApi.getSelectedAnnotation?.();

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect, useCallback } from 'react';
 import { ActionIcon, Popover } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useViewer } from '@app/contexts/ViewerContext';
@@ -9,6 +9,9 @@ import { SearchInterface } from '@app/components/viewer/SearchInterface';
 import ViewerAnnotationControls from '@app/components/shared/rightRail/ViewerAnnotationControls';
 import { useSidebarContext } from '@app/contexts/SidebarContext';
 import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
+import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
+import { useNavigationState } from '@app/contexts/NavigationContext';
+import { BASE_PATH, withBasePath } from '@app/constants/app';

 export function useViewerRightRailButtons() {
  const { t, i18n } = useTranslation();
@@ -16,6 +19,32 @@ export function useViewerRightRailButtons() {
  const [isPanning, setIsPanning] = useState<boolean>(() => viewer.getPanState()?.isPanning ?? false);
  const { sidebarRefs } = useSidebarContext();
  const { position: tooltipPosition } = useRightRailTooltipSide(sidebarRefs, 12);
+  const { handleToolSelect } = useToolWorkflow();
+  const { selectedTool } = useNavigationState();
+
+  const stripBasePath = useCallback((path: string) => {
+    if (BASE_PATH && path.startsWith(BASE_PATH)) {
+      return path.slice(BASE_PATH.length) || '/';
+    }
+    return path;
+  }, []);
+
+  const isAnnotationsPath = useCallback(() => {
+    const cleanPath = stripBasePath(window.location.pathname).toLowerCase();
+    return cleanPath === '/annotations' || cleanPath.endsWith('/annotations');
+  }, [stripBasePath]);
+
+  const [isAnnotationsActive, setIsAnnotationsActive] = useState<boolean>(() => isAnnotationsPath());
+
+  useEffect(() => {
+    setIsAnnotationsActive(isAnnotationsPath());
+  }, [selectedTool, isAnnotationsPath]);
+
+  useEffect(() => {
+    const handlePopState = () => setIsAnnotationsActive(isAnnotationsPath());
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [isAnnotationsPath]);

  // Lift i18n labels out of memo for clarity
  const searchLabel = t('rightRail.search', 'Search PDF');
@@ -25,9 +54,11 @@ export function useViewerRightRailButtons() {
  const sidebarLabel = t('rightRail.toggleSidebar', 'Toggle Sidebar');
  const bookmarkLabel = t('rightRail.toggleBookmarks', 'Toggle Bookmarks');
  const printLabel = t('rightRail.print', 'Print PDF');
+  const annotationsLabel = t('rightRail.annotations', 'Annotations');
+  const saveChangesLabel = t('rightRail.saveChanges', 'Save Changes');

  const viewerButtons = useMemo<RightRailButtonWithAction[]>(() => {
-    return [
+    const buttons: RightRailButtonWithAction[] = [
      {
        id: 'viewer-search',
        tooltip: searchLabel,
@@ -147,6 +178,36 @@ export function useViewerRightRailButtons() {
          viewer.printActions.print();
        }
      },
+      {
+        id: 'viewer-annotations',
+        tooltip: annotationsLabel,
+        ariaLabel: annotationsLabel,
+        section: 'top' as const,
+        order: 58,
+        render: ({ disabled }) => (
+          <Tooltip content={annotationsLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
+            <ActionIcon
+              variant={isAnnotationsActive ? 'default' : 'subtle'}
+              radius="md"
+              className="right-rail-icon"
+              onClick={() => {
+                if (disabled || isAnnotationsActive) return;
+                const targetPath = withBasePath('/annotations');
+                if (window.location.pathname !== targetPath) {
+                  window.history.pushState(null, '', targetPath);
+                }
+                setIsAnnotationsActive(true);
+                handleToolSelect('annotate');
+              }}
+              disabled={disabled || isAnnotationsActive}
+              aria-pressed={isAnnotationsActive}
+              style={isAnnotationsActive ? { backgroundColor: 'var(--right-rail-pan-active-bg)' } : undefined}
+            >
+              <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />
+            </ActionIcon>
+          </Tooltip>
+        )
+      },
      {
        id: 'viewer-annotation-controls',
        section: 'top' as const,
@@ -154,9 +215,30 @@ export function useViewerRightRailButtons() {
        render: ({ disabled }) => (
          <ViewerAnnotationControls currentView="viewer" disabled={disabled} />
        )
-      }
+      },
    ];
-  }, [t, i18n.language, viewer, isPanning, searchLabel, panLabel, rotateLeftLabel, rotateRightLabel, sidebarLabel, bookmarkLabel, printLabel, tooltipPosition]);
+
+    // Optional: Save button for annotations (always registered when this hook is used
+    // with a save handler; uses a ref to avoid infinite re-registration loops).
+    return buttons;
+  }, [
+    t,
+    i18n.language,
+    viewer,
+    isPanning,
+    searchLabel,
+    panLabel,
+    rotateLeftLabel,
+    rotateRightLabel,
+    sidebarLabel,
+    bookmarkLabel,
+    printLabel,
+    tooltipPosition,
+    annotationsLabel,
+    saveChangesLabel,
+    isAnnotationsActive,
+    handleToolSelect,
+  ]);

  useRightRailButtons(viewerButtons);
 }
@@ -16,6 +16,17 @@ export interface SignatureAPI {
  getPageAnnotations: (pageIndex: number) => Promise<any[]>;
 }

+export interface AnnotationAPI {
+  activateAnnotationTool: (toolId: AnnotationToolId, options?: AnnotationToolOptions) => void;
+  setAnnotationStyle: (toolId: AnnotationToolId, options?: AnnotationToolOptions) => void;
+  getSelectedAnnotation: () => AnnotationSelection | null;
+  deselectAnnotation: () => void;
+  updateAnnotation: (pageIndex: number, annotationId: string, patch: AnnotationPatch) => void;
+  deactivateTools: () => void;
+  onAnnotationEvent?: (listener: (event: AnnotationEvent) => void) => void | (() => void);
+  getActiveTool?: () => { id: AnnotationToolId } | null;
+}
+
 export interface HistoryAPI {
  undo: () => void;
  redo: () => void;
@@ -23,3 +34,50 @@ export interface HistoryAPI {
  canRedo: () => boolean;
  subscribe?: (listener: () => void) => () => void;
 }
+
+export type AnnotationToolId =
+  | 'select'
+  | 'highlight'
+  | 'underline'
+  | 'strikeout'
+  | 'squiggly'
+  | 'ink'
+  | 'inkHighlighter'
+  | 'text'
+  | 'note'
+  | 'square'
+  | 'circle'
+  | 'line'
+  | 'lineArrow'
+  | 'polyline'
+  | 'polygon'
+  | 'stamp'
+  | 'signatureStamp'
+  | 'signatureInk';
+
+export interface AnnotationEvent {
+  type: string;
+  [key: string]: unknown;
+}
+
+export type AnnotationPatch = Record<string, unknown>;
+export type AnnotationSelection = unknown;
+
+export interface AnnotationToolOptions {
+  color?: string;
+  fillColor?: string;
+  strokeColor?: string;
+  opacity?: number;
+  strokeOpacity?: number;
+  fillOpacity?: number;
+  thickness?: number;
+  borderWidth?: number;
+  fontSize?: number;
+  fontFamily?: string;
+  textAlign?: number; // 0 = Left, 1 = Center, 2 = Right
+  imageSrc?: string;
+  imageSize?: { width: number; height: number };
+  icon?: 'Comment' | 'Key' | 'Note' | 'Help' | 'NewParagraph' | 'Paragraph' | 'Insert';
+  contents?: string;
+  customData?: Record<string, unknown>;
+}
@@ -0,0 +1,26 @@
+import React, { createContext, useContext, ReactNode, useRef } from 'react';
+import type { AnnotationAPI } from '@app/components/viewer/viewerTypes';
+
+interface AnnotationContextValue {
+  annotationApiRef: React.RefObject<AnnotationAPI | null>;
+}
+
+const AnnotationContext = createContext<AnnotationContextValue | undefined>(undefined);
+
+export const AnnotationProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const annotationApiRef = useRef<AnnotationAPI>(null);
+
+  const value: AnnotationContextValue = {
+    annotationApiRef,
+  };
+
+  return <AnnotationContext.Provider value={value}>{children}</AnnotationContext.Provider>;
+};
+
+export const useAnnotation = (): AnnotationContextValue => {
+  const context = useContext(AnnotationContext);
+  if (!context) {
+    throw new Error('useAnnotation must be used within an AnnotationProvider');
+  }
+  return context;
+};
@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, ReactNode, useCallback, useRef } from 'react';
 import { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import type { SignatureAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
+import type { SignatureAPI, HistoryAPI, AnnotationAPI } from '@app/components/viewer/viewerTypes';

 // Signature state interface
 interface SignatureState {
@@ -34,6 +34,7 @@ interface SignatureActions {
 // Combined context interface
 interface SignatureContextValue extends SignatureState, SignatureActions {
  signatureApiRef: React.RefObject<SignatureAPI | null>;
+  annotationApiRef: React.RefObject<AnnotationAPI | null>;
  historyApiRef: React.RefObject<HistoryAPI | null>;
 }

@@ -52,6 +53,7 @@ const initialState: SignatureState = {
 export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [state, setState] = useState<SignatureState>(initialState);
  const signatureApiRef = useRef<SignatureAPI>(null);
+  const annotationApiRef = useRef<AnnotationAPI>(null);
  const historyApiRef = useRef<HistoryAPI>(null);
  const imageDataStore = useRef<Map<string, string>>(new Map());

@@ -157,6 +159,7 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
  const contextValue: SignatureContextValue = {
    ...state,
    signatureApiRef,
+    annotationApiRef,
    historyApiRef,
    setSignatureConfig,
    setPlacementMode,
@@ -13,7 +13,7 @@ import {
  ProcessedFileMetadata,
 } from '@app/types/fileContext';
 import { FileId, ToolOperation } from '@app/types/file';
-import { generateThumbnailWithMetadata, generateThumbnailForFile } from '@app/utils/thumbnailUtils';
+import { generateThumbnailWithMetadata } from '@app/utils/thumbnailUtils';
 import { FileLifecycleManager } from '@app/contexts/file/lifecycle';
 import { buildQuickKeySet } from '@app/contexts/file/fileSelectors';
 import { StirlingFile } from '@app/types/fileContext';
@@ -296,6 +296,7 @@ export async function addFiles(
      // Non-PDF files: simple thumbnail generation, no processedFile metadata
      try {
        if (DEBUG) console.log(`📄 Generating simple thumbnail for non-PDF file ${file.name}`);
+        const { generateThumbnailForFile } = await import('@app/utils/thumbnailUtils');
        thumbnail = await generateThumbnailForFile(file);
        if (DEBUG) console.log(`📄 Generated simple thumbnail for ${file.name}: no page count, thumbnail: SUCCESS`);
      } catch (error) {
@@ -1,8 +1,19 @@
-import { useMemo, lazy } from "react";
+import { useMemo } from "react";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { useTranslation } from "react-i18next";
 import { devApiLink } from "@app/constants/links";
+import SplitPdfPanel from "@app/tools/Split";
+import CompressPdfPanel from "@app/tools/Compress";
+import OCRPanel from "@app/tools/OCR";
+import ConvertPanel from "@app/tools/Convert";
+import Sanitize from "@app/tools/Sanitize";
+import AddPassword from "@app/tools/AddPassword";
+import ChangePermissions from "@app/tools/ChangePermissions";
+import RemoveBlanks from "@app/tools/RemoveBlanks";
+import RemovePages from "@app/tools/RemovePages";
+import ReorganizePages from "@app/tools/ReorganizePages";
 import { reorganizePagesOperationConfig } from "@app/hooks/tools/reorganizePages/useReorganizePagesOperation";
+import RemovePassword from "@app/tools/RemovePassword";
 import {
  SubcategoryId,
  ToolCategoryId,
@@ -12,9 +23,35 @@ import {
  LinkToolRegistry,
 } from "@app/data/toolsTaxonomy";
 import { isSuperToolId, isLinkToolId } from '@app/types/toolId';
+import AdjustContrast from "@app/tools/AdjustContrast";
+import AdjustContrastSingleStepSettings from "@app/components/tools/adjustContrast/AdjustContrastSingleStepSettings";
 import { adjustContrastOperationConfig } from "@app/hooks/tools/adjustContrast/useAdjustContrastOperation";
 import { getSynonyms } from "@app/utils/toolSynonyms";
 import { useProprietaryToolRegistry } from "@app/data/useProprietaryToolRegistry";
+import GetPdfInfo from "@app/tools/GetPdfInfo";
+import AddWatermark from "@app/tools/AddWatermark";
+import AddStamp from "@app/tools/AddStamp";
+import AddAttachments from "@app/tools/AddAttachments";
+import Merge from '@app/tools/Merge';
+import EditTableOfContents from '@app/tools/EditTableOfContents';
+import Repair from "@app/tools/Repair";
+import AutoRename from "@app/tools/AutoRename";
+import SingleLargePage from "@app/tools/SingleLargePage";
+import PageLayout from "@app/tools/PageLayout";
+import UnlockPdfForms from "@app/tools/UnlockPdfForms";
+import RemoveCertificateSign from "@app/tools/RemoveCertificateSign";
+import RemoveImage from "@app/tools/RemoveImage";
+import CertSign from "@app/tools/CertSign";
+import BookletImposition from "@app/tools/BookletImposition";
+import Flatten from "@app/tools/Flatten";
+import Rotate from "@app/tools/Rotate";
+import PdfTextEditor from "@app/tools/pdfTextEditor/PdfTextEditor";
+import ChangeMetadata from "@app/tools/ChangeMetadata";
+import Crop from "@app/tools/Crop";
+import Sign from "@app/tools/Sign";
+import AddText from "@app/tools/AddText";
+import AddImage from "@app/tools/AddImage";
+import Annotate from "@app/tools/Annotate";
 import { compressOperationConfig } from "@app/hooks/tools/compress/useCompressOperation";
 import { splitOperationConfig } from "@app/hooks/tools/split/useSplitOperation";
 import { addPasswordOperationConfig } from "@app/hooks/tools/addPassword/useAddPasswordOperation";
@@ -52,7 +89,50 @@ import { scannerImageSplitOperationConfig } from "@app/hooks/tools/scannerImageS
 import { addPageNumbersOperationConfig } from "@app/components/tools/addPageNumbers/useAddPageNumbersOperation";
 import { extractPagesOperationConfig } from "@app/hooks/tools/extractPages/useExtractPagesOperation";
 import { ENDPOINTS as SPLIT_ENDPOINT_NAMES } from '@app/constants/splitConstants';
+import CompressSettings from "@app/components/tools/compress/CompressSettings";
+import AddPasswordSettings from "@app/components/tools/addPassword/AddPasswordSettings";
+import RemovePasswordSettings from "@app/components/tools/removePassword/RemovePasswordSettings";
+import SanitizeSettings from "@app/components/tools/sanitize/SanitizeSettings";
+import AddWatermarkSingleStepSettings from "@app/components/tools/addWatermark/AddWatermarkSingleStepSettings";
+import OCRSettings from "@app/components/tools/ocr/OCRSettings";
+import ConvertSettings from "@app/components/tools/convert/ConvertSettings";
+import ChangePermissionsSettings from "@app/components/tools/changePermissions/ChangePermissionsSettings";
+import BookletImpositionSettings from "@app/components/tools/bookletImposition/BookletImpositionSettings";
+import FlattenSettings from "@app/components/tools/flatten/FlattenSettings";
+import RedactSingleStepSettings from "@app/components/tools/redact/RedactSingleStepSettings";
+import Redact from "@app/tools/Redact";
+import AdjustPageScale from "@app/tools/AdjustPageScale";
+import ReplaceColor from "@app/tools/ReplaceColor";
+import ScannerImageSplit from "@app/tools/ScannerImageSplit";
+import OverlayPdfs from "@app/tools/OverlayPdfs";
 import { ToolId } from "@app/types/toolId";
+import MergeSettings from '@app/components/tools/merge/MergeSettings';
+import AdjustPageScaleSettings from "@app/components/tools/adjustPageScale/AdjustPageScaleSettings";
+import ScannerImageSplitSettings from "@app/components/tools/scannerImageSplit/ScannerImageSplitSettings";
+import ChangeMetadataSingleStep from "@app/components/tools/changeMetadata/ChangeMetadataSingleStep";
+import SignSettings from "@app/components/tools/sign/SignSettings";
+import AddPageNumbers from "@app/tools/AddPageNumbers";
+import RemoveAnnotations from "@app/tools/RemoveAnnotations";
+import PageLayoutSettings from "@app/components/tools/pageLayout/PageLayoutSettings";
+import ExtractImages from "@app/tools/ExtractImages";
+import ExtractPages from "@app/tools/ExtractPages";
+import ExtractImagesSettings from "@app/components/tools/extractImages/ExtractImagesSettings";
+import ExtractPagesSettings from "@app/components/tools/extractPages/ExtractPagesSettings";
+import ReplaceColorSettings from "@app/components/tools/replaceColor/ReplaceColorSettings";
+import AddStampAutomationSettings from "@app/components/tools/addStamp/AddStampAutomationSettings";
+import CertSignAutomationSettings from "@app/components/tools/certSign/CertSignAutomationSettings";
+import CropAutomationSettings from "@app/components/tools/crop/CropAutomationSettings";
+import RotateAutomationSettings from "@app/components/tools/rotate/RotateAutomationSettings";
+import SplitAutomationSettings from "@app/components/tools/split/SplitAutomationSettings";
+import AddAttachmentsSettings from "@app/components/tools/addAttachments/AddAttachmentsSettings";
+import RemovePagesSettings from "@app/components/tools/removePages/RemovePagesSettings";
+import RemoveBlanksSettings from "@app/components/tools/removeBlanks/RemoveBlanksSettings";
+import AddPageNumbersAutomationSettings from "@app/components/tools/addPageNumbers/AddPageNumbersAutomationSettings";
+import OverlayPdfsSettings from "@app/components/tools/overlayPdfs/OverlayPdfsSettings";
+import ValidateSignature from "@app/tools/ValidateSignature";
+import ShowJS from "@app/tools/ShowJS";
+import Automate from "@app/tools/Automate";
+import Compare from "@app/tools/Compare";
 import { CONVERT_SUPPORTED_FORMATS } from "@app/constants/convertSupportedFornats";


@@ -77,7 +157,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      pdfTextEditor: {
        icon: <LocalIcon icon="edit-square-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.pdfTextEditor.title", "PDF Text Editor"),
-        component: lazy(() => import("@app/tools/pdfTextEditor/PdfTextEditor")),
+        component: PdfTextEditor,
        description: t(
          "home.pdfTextEditor.desc",
          "Review and edit text and images in PDFs with grouped text editing and PDF regeneration"
@@ -107,21 +187,21 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      merge: {
        icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.merge.title", "Merge"),
-        component: lazy(() => import("@app/tools/Merge")),
+        component: Merge,
        description: t("home.merge.desc", "Merge multiple PDFs into a single document"),
        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
        maxFiles: -1,
        endpoints: ["merge-pdfs"],
        operationConfig: mergeOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/merge/MergeSettings")),
+        automationSettings: MergeSettings,
        synonyms: getSynonyms(t, "merge")
      },
      // Signing
      certSign: {
        icon: <LocalIcon icon="workspace-premium-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.certSign.title", "Certificate Sign"),
-        component: lazy(() => import("@app/tools/CertSign")),
+        component: CertSign,
        description: t("home.certSign.desc", "Sign PDF documents using digital certificates"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.SIGNING,
@@ -129,24 +209,24 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        maxFiles: -1,
        endpoints: ["cert-sign"],
        operationConfig: certSignOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/certSign/CertSignAutomationSettings")),
+        automationSettings: CertSignAutomationSettings,
      },
      sign: {
        icon: <LocalIcon icon="signature-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.sign.title", "Sign"),
-        component: lazy(() => import("@app/tools/Sign")),
+        component: Sign,
        description: t("home.sign.desc", "Adds signature to PDF by drawing, text or image"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.SIGNING,
        operationConfig: signOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/sign/SignSettings")), // TODO:: not all settings shown, suggested next tools shown
+        automationSettings: SignSettings, // TODO:: not all settings shown, suggested next tools shown
        synonyms: getSynonyms(t, "sign"),
        supportsAutomate: false, //TODO make support Sign
      },
      addText: {
-        icon: <LocalIcon icon="text-fields-rounded" width="1.5rem" height="1.5rem" />,
+        icon: <LocalIcon icon="material-symbols:text-fields-rounded" width="1.5rem" height="1.5rem" />,
        name: t('home.addText.title', 'Add Text'),
-        component: lazy(() => import("@app/tools/AddText")),
+        component: AddText,
        description: t('home.addText.desc', 'Add custom text anywhere in your PDF'),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
@@ -158,7 +238,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      addImage: {
        icon: <LocalIcon icon="image-rounded" width="1.5rem" height="1.5rem" />,
        name: t('home.addImage.title', 'Add Image'),
-        component: lazy(() => import("@app/tools/AddImage")),
+        component: AddImage,
        description: t('home.addImage.desc', 'Add images anywhere in your PDF'),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
@@ -167,39 +247,52 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        synonyms: getSynonyms(t, 'addImage'),
        supportsAutomate: false,
      },
+      annotate: {
+        icon: <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />,
+        name: t('home.annotate.title', 'Annotate'),
+        component: Annotate,
+        description: t('home.annotate.desc', 'Highlight, draw, add notes, and shapes directly in the viewer'),
+        categoryId: ToolCategoryId.STANDARD_TOOLS,
+        subcategoryId: SubcategoryId.GENERAL,
+        workbench: 'viewer',
+        operationConfig: signOperationConfig,
+        automationSettings: null,
+        synonyms: getSynonyms(t, 'annotate'),
+        supportsAutomate: false,
+      },

      // Document Security

      addPassword: {
        icon: <LocalIcon icon="password-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.addPassword.title", "Add Password"),
-        component: lazy(() => import("@app/tools/AddPassword")),
+        component: AddPassword,
        description: t("home.addPassword.desc", "Add password protection and restrictions to PDF files"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
        maxFiles: -1,
        endpoints: ["add-password"],
        operationConfig: addPasswordOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/addPassword/AddPasswordSettings")),
+        automationSettings: AddPasswordSettings,
        synonyms: getSynonyms(t, "addPassword")
     },
      watermark: {
        icon: <LocalIcon icon="branding-watermark-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.watermark.title", "Add Watermark"),
-        component: lazy(() => import("@app/tools/AddWatermark")),
+        component: AddWatermark,
        maxFiles: -1,
        description: t("home.watermark.desc", "Add a custom watermark to your PDF document."),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
        endpoints: ["add-watermark"],
        operationConfig: addWatermarkOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/addWatermark/AddWatermarkSingleStepSettings")),
+        automationSettings: AddWatermarkSingleStepSettings,
        synonyms: getSynonyms(t, "watermark")
      },
      addStamp: {
        icon: <LocalIcon icon="approval-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.addStamp.title", "Add Stamp to PDF"),
-        component: lazy(() => import("@app/tools/AddStamp")),
+        component: AddStamp,
        description: t("home.addStamp.desc", "Add text or add image stamps at set locations"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
@@ -207,38 +300,38 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        maxFiles: -1,
        endpoints: ["add-stamp"],
        operationConfig: addStampOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/addStamp/AddStampAutomationSettings")),
+        automationSettings: AddStampAutomationSettings,
      },
      sanitize: {
        icon: <LocalIcon icon="cleaning-services-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.sanitize.title", "Sanitize"),
-        component: lazy(() => import("@app/tools/Sanitize")),
+        component: Sanitize,
        maxFiles: -1,
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
        description: t("home.sanitize.desc", "Remove potentially harmful elements from PDF files"),
        endpoints: ["sanitize-pdf"],
        operationConfig: sanitizeOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/sanitize/SanitizeSettings")),
+        automationSettings: SanitizeSettings,
        synonyms: getSynonyms(t, "sanitize")
      },
      flatten: {
        icon: <LocalIcon icon="layers-clear-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.flatten.title", "Flatten"),
-        component: lazy(() => import("@app/tools/Flatten")),
+        component: Flatten,
        description: t("home.flatten.desc", "Remove all interactive elements and forms from a PDF"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
        maxFiles: -1,
        endpoints: ["flatten"],
        operationConfig: flattenOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/flatten/FlattenSettings")),
+        automationSettings: FlattenSettings,
        synonyms: getSynonyms(t, "flatten")
      },
      unlockPDFForms: {
        icon: <LocalIcon icon="preview-off-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.unlockPDFForms.title", "Unlock PDF Forms"),
-        component: lazy(() => import("@app/tools/UnlockPdfForms")),
+        component: UnlockPdfForms,
        description: t("home.unlockPDFForms.desc", "Remove read-only property of form fields in a PDF document."),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
@@ -251,20 +344,20 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      changePermissions: {
        icon: <LocalIcon icon="lock-outline" width="1.5rem" height="1.5rem" />,
        name: t("home.changePermissions.title", "Change Permissions"),
-        component: lazy(() => import("@app/tools/ChangePermissions")),
+        component: ChangePermissions,
        description: t("home.changePermissions.desc", "Change document restrictions and permissions"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_SECURITY,
        maxFiles: -1,
        endpoints: ["add-password"],
        operationConfig: changePermissionsOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/changePermissions/ChangePermissionsSettings")),
+        automationSettings: ChangePermissionsSettings,
        synonyms: getSynonyms(t, "changePermissions"),
      },
      getPdfInfo: {
        icon: <LocalIcon icon="fact-check-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.getPdfInfo.title", "Get ALL Info on PDF"),
-        component: lazy(() => import("@app/tools/GetPdfInfo")),
+        component: GetPdfInfo,
        description: t("home.getPdfInfo.desc", "Grabs any and all information possible on PDFs"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.VERIFICATION,
@@ -277,7 +370,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      validateSignature: {
        icon: <LocalIcon icon="verified-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.validateSignature.title", "Validate PDF Signature"),
-        component: lazy(() => import("@app/tools/ValidateSignature")),
+        component: ValidateSignature,
        description: t("home.validateSignature.desc", "Verify digital signatures and certificates in PDF documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.VERIFICATION,
@@ -307,20 +400,20 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      changeMetadata: {
        icon: <LocalIcon icon="assignment-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.changeMetadata.title", "Change Metadata"),
-        component: lazy(() => import("@app/tools/ChangeMetadata")),
+        component: ChangeMetadata,
        description: t("home.changeMetadata.desc", "Change/Remove/Add metadata from a PDF document"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.DOCUMENT_REVIEW,
        maxFiles: -1,
        endpoints: ["update-metadata"],
        operationConfig: changeMetadataOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/changeMetadata/ChangeMetadataSingleStep")),
+        automationSettings: ChangeMetadataSingleStep,
        synonyms: getSynonyms(t, "changeMetadata")
      },
      editTableOfContents: {
        icon: <LocalIcon icon="toc-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.editTableOfContents.title", "Edit Table of Contents"),
-        component: lazy(() => import("@app/tools/EditTableOfContents")),
+        component: EditTableOfContents,
        description: t(
          "home.editTableOfContents.desc",
          "Add or edit bookmarks and table of contents in PDF documents"
@@ -339,44 +432,44 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      crop: {
        icon: <LocalIcon icon="crop-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.crop.title", "Crop PDF"),
-        component: lazy(() => import("@app/tools/Crop")),
+        component: Crop,
        description: t("home.crop.desc", "Crop a PDF to reduce its size (maintains text!)"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
        maxFiles: -1,
        endpoints: ["crop"],
        operationConfig: cropOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/crop/CropAutomationSettings")),
+        automationSettings: CropAutomationSettings,
      },
      rotate: {
        icon: <LocalIcon icon="rotate-right-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.rotate.title", "Rotate"),
-        component: lazy(() => import("@app/tools/Rotate")),
+        component: Rotate,
        description: t("home.rotate.desc", "Easily rotate your PDFs."),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
        maxFiles: -1,
        endpoints: ["rotate-pdf"],
        operationConfig: rotateOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/rotate/RotateAutomationSettings")),
+        automationSettings: RotateAutomationSettings,
        synonyms: getSynonyms(t, "rotate")
      },
      split: {
        icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.split.title", "Split"),
-        component: lazy(() => import("@app/tools/Split")),
+        component: SplitPdfPanel,
        description: t("home.split.desc", "Split PDFs into multiple documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
        endpoints: Array.from(new Set(Object.values(SPLIT_ENDPOINT_NAMES))),
        operationConfig: splitOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/split/SplitAutomationSettings")),
+        automationSettings: SplitAutomationSettings,
        synonyms: getSynonyms(t, "split")
      },
      reorganizePages: {
        icon: <LocalIcon icon="move-down-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.reorganizePages.title", "Reorganize Pages"),
-        component: lazy(() => import("@app/tools/ReorganizePages")),
+        component: ReorganizePages,
        description: t(
          "home.reorganizePages.desc",
          "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."
@@ -392,24 +485,24 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      scalePages: {
        icon: <LocalIcon icon="crop-free-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.scalePages.title", "Adjust page size/scale"),
-        component: lazy(() => import("@app/tools/AdjustPageScale")),
+        component: AdjustPageScale,
        description: t("home.scalePages.desc", "Change the size/scale of a page and/or its contents."),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
        maxFiles: -1,
        endpoints: ["scale-pages"],
        operationConfig: adjustPageScaleOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/adjustPageScale/AdjustPageScaleSettings")),
+        automationSettings: AdjustPageScaleSettings,
        synonyms: getSynonyms(t, "scalePages")
      },
      addPageNumbers: {
        icon: <LocalIcon icon="123-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.addPageNumbers.title", "Add Page Numbers"),
-        component: lazy(() => import("@app/tools/AddPageNumbers")),
+        component: AddPageNumbers,
        description: t("home.addPageNumbers.desc", "Add Page numbers throughout a document in a set location"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
-        automationSettings: lazy(() => import("@app/components/tools/addPageNumbers/AddPageNumbersAutomationSettings")),
+        automationSettings: AddPageNumbersAutomationSettings,
        maxFiles: -1,
        endpoints: ["add-page-numbers"],
        operationConfig: addPageNumbersOperationConfig,
@@ -418,21 +511,21 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      pageLayout: {
        icon: <LocalIcon icon="dashboard-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.pageLayout.title", "Multi-Page Layout"),
-        component: lazy(() => import("@app/tools/PageLayout")),
+        component: PageLayout,
        description: t("home.pageLayout.desc", "Merge multiple pages of a PDF document into a single page"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
        maxFiles: -1,
        endpoints: ["multi-page-layout"],
-        automationSettings: lazy(() => import("@app/components/tools/pageLayout/PageLayoutSettings")),
+        automationSettings: PageLayoutSettings,
        synonyms: getSynonyms(t, "pageLayout")
      },
      bookletImposition: {
        icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.bookletImposition.title", "Booklet Imposition"),
-        component: lazy(() => import("@app/tools/BookletImposition")),
+        component: BookletImposition,
        operationConfig: bookletImpositionOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/bookletImposition/BookletImpositionSettings")),
+        automationSettings: BookletImpositionSettings,
        description: t("home.bookletImposition.desc", "Create booklets with proper page ordering and multi-page layout for printing and binding"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
@@ -442,7 +535,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {

        icon: <LocalIcon icon="looks-one-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"),
-        component: lazy(() => import("@app/tools/SingleLargePage")),
+        component: SingleLargePage,

        description: t("home.pdfToSinglePage.desc", "Merges all PDF pages into one large single page"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
@@ -456,7 +549,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      addAttachments: {
        icon: <LocalIcon icon="attachment-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.addAttachments.title", "Add Attachments"),
-        component: lazy(() => import("@app/tools/AddAttachments")),
+        component: AddAttachments,
        description: t("home.addAttachments.desc", "Add or remove embedded files (attachments) to/from a PDF"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.PAGE_FORMATTING,
@@ -464,7 +557,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        maxFiles: 1,
        endpoints: ["add-attachments"],
        operationConfig: addAttachmentsOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/addAttachments/AddAttachmentsSettings")),
+        automationSettings: AddAttachmentsSettings,
      },

      // Extraction
@@ -472,26 +565,26 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      extractPages: {
        icon: <LocalIcon icon="upload-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.extractPages.title", "Extract Pages"),
-        component: lazy(() => import("@app/tools/ExtractPages")),
+        component: ExtractPages,
        description: t("home.extractPages.desc", "Extract specific pages from a PDF document"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.EXTRACTION,
        synonyms: getSynonyms(t, "extractPages"),
-        automationSettings: lazy(() => import("@app/components/tools/extractPages/ExtractPagesSettings")),
+        automationSettings: ExtractPagesSettings,
        operationConfig: extractPagesOperationConfig,
        endpoints: ["rearrange-pages"],
      },
      extractImages: {
        icon: <LocalIcon icon="photo-library-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.extractImages.title", "Extract Images"),
-        component: lazy(() => import("@app/tools/ExtractImages")),
+        component: ExtractImages,
        description: t("home.extractImages.desc", "Extract images from PDF documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.EXTRACTION,
        maxFiles: -1,
        endpoints: ["extract-images"],
        operationConfig: extractImagesOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/extractImages/ExtractImagesSettings")),
+        automationSettings: ExtractImagesSettings,
        synonyms: getSynonyms(t, "extractImages")
      },

@@ -500,7 +593,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      removePages: {
        icon: <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.removePages.title", "Remove Pages"),
-        component: lazy(() => import("@app/tools/RemovePages")),
+        component: RemovePages,
        description: t("home.removePages.desc", "Remove specific pages from a PDF document"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.REMOVAL,
@@ -508,12 +601,12 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        endpoints: ["remove-pages"],
        synonyms: getSynonyms(t, "removePages"),
        operationConfig: removePagesOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/removePages/RemovePagesSettings")),
+        automationSettings: RemovePagesSettings,
      },
      removeBlanks: {
        icon: <LocalIcon icon="scan-delete-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.removeBlanks.title", "Remove Blank Pages"),
-        component: lazy(() => import("@app/tools/RemoveBlanks")),
+        component: RemoveBlanks,
        description: t("home.removeBlanks.desc", "Remove blank pages from PDF documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.REMOVAL,
@@ -521,12 +614,12 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        endpoints: ["remove-blanks"],
        synonyms: getSynonyms(t, "removeBlanks"),
        operationConfig: removeBlanksOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/removeBlanks/RemoveBlanksSettings")),
+        automationSettings: RemoveBlanksSettings,
      },
      removeAnnotations: {
        icon: <LocalIcon icon="thread-unread-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.removeAnnotations.title", "Remove Annotations"),
-        component: lazy(() => import("@app/tools/RemoveAnnotations")),
+        component: RemoveAnnotations,
        description: t("home.removeAnnotations.desc", "Remove annotations and comments from PDF documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.REMOVAL,
@@ -539,7 +632,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      removeImage: {
        icon: <LocalIcon icon="remove-selection-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.removeImage.title", "Remove Images"),
-        component: lazy(() => import("@app/tools/RemoveImage")),
+        component: RemoveImage,
        description: t("home.removeImage.desc", "Remove all images from a PDF document"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.REMOVAL,
@@ -552,20 +645,20 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      removePassword: {
        icon: <LocalIcon icon="lock-open-right-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.removePassword.title", "Remove Password"),
-        component: lazy(() => import("@app/tools/RemovePassword")),
+        component: RemovePassword,
        description: t("home.removePassword.desc", "Remove password protection from PDF documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.REMOVAL,
        endpoints: ["remove-password"],
        maxFiles: -1,
        operationConfig: removePasswordOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/removePassword/RemovePasswordSettings")),
+        automationSettings: RemovePasswordSettings,
        synonyms: getSynonyms(t, "removePassword")
      },
      removeCertSign: {
        icon: <LocalIcon icon="remove-moderator-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.removeCertSign.title", "Remove Certificate Sign"),
-        component: lazy(() => import("@app/tools/RemoveCertificateSign")),
+        component: RemoveCertificateSign,
        description: t("home.removeCertSign.desc", "Remove digital signature from PDF documents"),
        categoryId: ToolCategoryId.STANDARD_TOOLS,
        subcategoryId: SubcategoryId.REMOVAL,
@@ -581,7 +674,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      automate: {
        icon: <LocalIcon icon="automation-outline" width="1.5rem" height="1.5rem" />,
        name: t("home.automate.title", "Automate"),
-        component: lazy(() => import("@app/tools/Automate")),
+        component: Automate,
        description: t(
          "home.automate.desc",
          "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."
@@ -597,7 +690,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      autoRename: {
        icon: <LocalIcon icon="match-word-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.autoRename.title", "Auto Rename PDF File"),
-        component: lazy(() => import("@app/tools/AutoRename")),
+        component: AutoRename,
        maxFiles: -1,
        endpoints: ["auto-rename"],
        operationConfig: autoRenameOperationConfig,
@@ -613,18 +706,18 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      adjustContrast: {
        icon: <LocalIcon icon="palette" width="1.5rem" height="1.5rem" />,
        name: t("home.adjustContrast.title", "Adjust Colors/Contrast"),
-        component: lazy(() => import("@app/tools/AdjustContrast")),
+        component: AdjustContrast,
        description: t("home.adjustContrast.desc", "Adjust colors and contrast of PDF documents"),
        categoryId: ToolCategoryId.ADVANCED_TOOLS,
        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
        operationConfig: adjustContrastOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/adjustContrast/AdjustContrastSingleStepSettings")),
+        automationSettings: AdjustContrastSingleStepSettings,
        synonyms: getSynonyms(t, "adjustContrast"),
      },
      repair: {
        icon: <LocalIcon icon="build-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.repair.title", "Repair"),
-        component: lazy(() => import("@app/tools/Repair")),
+        component: Repair,
        description: t("home.repair.desc", "Repair corrupted or damaged PDF files"),
        categoryId: ToolCategoryId.ADVANCED_TOOLS,
        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
@@ -637,39 +730,39 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      scannerImageSplit: {
        icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.scannerImageSplit.title", "Detect & Split Scanned Photos"),
-        component: lazy(() => import("@app/tools/ScannerImageSplit")),
+        component: ScannerImageSplit,
        description: t("home.scannerImageSplit.desc", "Detect and split scanned photos into separate pages"),
        categoryId: ToolCategoryId.ADVANCED_TOOLS,
        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
        maxFiles: -1,
        endpoints: ["extract-image-scans"],
        operationConfig: scannerImageSplitOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/scannerImageSplit/ScannerImageSplitSettings")),
+        automationSettings: ScannerImageSplitSettings,
        synonyms: getSynonyms(t, "ScannerImageSplit"),
      },
      overlayPdfs: {
        icon: <LocalIcon icon="layers-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.overlay-pdfs.title", "Overlay PDFs"),
-        component: lazy(() => import("@app/tools/OverlayPdfs")),
+        component: OverlayPdfs,
        description: t("home.overlay-pdfs.desc", "Overlay one PDF on top of another"),
        categoryId: ToolCategoryId.ADVANCED_TOOLS,
        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
        endpoints: ["overlay-pdf"],
        operationConfig: overlayPdfsOperationConfig,
        synonyms: getSynonyms(t, "overlay-pdfs"),
-        automationSettings: lazy(() => import("@app/components/tools/overlayPdfs/OverlayPdfsSettings"))
+        automationSettings: OverlayPdfsSettings
      },
      replaceColor: {
        icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.replaceColor.title", "Replace & Invert Color"),
-        component: lazy(() => import("@app/tools/ReplaceColor")),
+        component: ReplaceColor,
        description: t("home.replaceColor.desc", "Replace or invert colors in PDF documents"),
        categoryId: ToolCategoryId.ADVANCED_TOOLS,
        subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
        maxFiles: -1,
        endpoints: ["replace-invert-pdf"],
        operationConfig: replaceColorOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/replaceColor/ReplaceColorSettings")),
+        automationSettings: ReplaceColorSettings,
        synonyms: getSynonyms(t, "replaceColor"),
      },
      scannerEffect: {
@@ -689,7 +782,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      showJS: {
        icon: <LocalIcon icon="javascript-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.showJS.title", "Show JavaScript"),
-        component: lazy(() => import("@app/tools/ShowJS")),
+        component: ShowJS,
        description: t("home.showJS.desc", "Extract and display JavaScript code from PDF documents"),
        categoryId: ToolCategoryId.ADVANCED_TOOLS,
        subcategoryId: SubcategoryId.DEVELOPER_TOOLS,
@@ -752,7 +845,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      compare: {
        icon: <LocalIcon icon="compare-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.compare.title", "Compare"),
-        component: lazy(() => import("@app/tools/Compare")),
+        component: Compare,
        description: t("home.compare.desc", "Compare two PDF documents and highlight differences"),
        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
@@ -765,20 +858,20 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
      compress: {
        icon: <LocalIcon icon="zoom-in-map-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.compress.title", "Compress"),
-        component: lazy(() => import("@app/tools/Compress")),
+        component: CompressPdfPanel,
        description: t("home.compress.desc", "Compress PDFs to reduce their file size."),
        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
        maxFiles: -1,
        endpoints: ["compress-pdf"],
        operationConfig: compressOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/compress/CompressSettings")),
+        automationSettings: CompressSettings,
        synonyms: getSynonyms(t, "compress")
      },
      convert: {
        icon: <LocalIcon icon="sync-alt-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.convert.title", "Convert"),
-        component: lazy(() => import("@app/tools/Convert")),
+        component: ConvertPanel,
        description: t("home.convert.desc", "Convert files to and from PDF format"),
        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
@@ -802,34 +895,34 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
        ],

        operationConfig: convertOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/convert/ConvertSettings")),
+        automationSettings: ConvertSettings,
        synonyms: getSynonyms(t, "convert")
      },

      ocr: {
        icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.ocr.title", "OCR"),
-        component: lazy(() => import("@app/tools/OCR")),
+        component: OCRPanel,
        description: t("home.ocr.desc", "Extract text from scanned PDFs using Optical Character Recognition"),
        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
        maxFiles: -1,
        endpoints: ["ocr-pdf"],
        operationConfig: ocrOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/ocr/OCRSettings")),
+        automationSettings: OCRSettings,
        synonyms: getSynonyms(t, "ocr")
      },
      redact: {
        icon: <LocalIcon icon="visibility-off-rounded" width="1.5rem" height="1.5rem" />,
        name: t("home.redact.title", "Redact"),
-        component: lazy(() => import("@app/tools/Redact")),
+        component: Redact,
        description: t("home.redact.desc", "Permanently remove sensitive information from PDF documents"),
        categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
        subcategoryId: SubcategoryId.GENERAL,
        maxFiles: -1,
        endpoints: ["auto-redact"],
        operationConfig: redactOperationConfig,
-        automationSettings: lazy(() => import("@app/components/tools/redact/RedactSingleStepSettings")),
+        automationSettings: RedactSingleStepSettings,
        synonyms: getSynonyms(t, "redact")
      },
    };
@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import JSZip from 'jszip';
 import { OCRParameters, defaultParameters } from '@app/hooks/tools/ocr/useOCRParameters';
 import { useToolOperation, ToolOperationConfig, ToolType } from '@app/hooks/tools/shared/useToolOperation';
 import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
@@ -19,7 +18,8 @@ function getMimeType(filename: string): string {

 // Lightweight ZIP extractor (keep or replace with a shared util if you have one)
 async function extractZipFile(zipBlob: Blob): Promise<File[]> {
-  const zip = new JSZip();
+  const JSZip = await import('jszip');
+  const zip = new JSZip.default();
  const zipContent = await zip.loadAsync(await zipBlob.arrayBuffer());
  const out: File[] = [];
  for (const [filename, file] of Object.entries(zipContent.files)) {
@@ -18,6 +18,7 @@ export interface SignParameters {
  fontFamily?: string;
  fontSize?: number;
  textColor?: string;
+  textAlign?: 'left' | 'center' | 'right';
 }

 export const DEFAULT_PARAMETERS: SignParameters = {
@@ -28,6 +29,7 @@ export const DEFAULT_PARAMETERS: SignParameters = {
  fontFamily: 'Helvetica',
  fontSize: 16,
  textColor: '#000000',
+  textAlign: 'left',
 };

 const validateSignParameters = (parameters: SignParameters): boolean => {
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, lazy, Suspense } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 import { Group, useMantineColorScheme } from "@mantine/core";
@@ -15,16 +15,13 @@ import { useViewer } from "@app/contexts/ViewerContext";
 import AppsIcon from '@mui/icons-material/AppsRounded';

 import ToolPanel from "@app/components/tools/ToolPanel";
+import Workbench from "@app/components/layout/Workbench";
 import QuickAccessBar from "@app/components/shared/QuickAccessBar";
 import RightRail from "@app/components/shared/RightRail";
+import FileManager from "@app/components/FileManager";
 import LocalIcon from "@app/components/shared/LocalIcon";
-
-// Lazy-load heavy components that aren't needed on initial render
-const Workbench = lazy(() => import("@app/components/layout/Workbench"));
-const FileManager = lazy(() => import("@app/components/FileManager"));
-const AppConfigModal = lazy(() => import("@app/components/shared/AppConfigModal"));
-
 import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import AppConfigModal from "@app/components/shared/AppConfigModal";

 import "@app/pages/HomePage.css";

@@ -221,9 +218,7 @@ export default function HomePage() {
            <div className="mobile-slide" aria-label={t('home.mobile.workbenchSlide', 'Workspace panel')}>
              <div className="mobile-slide-content">
                <div className="flex-1 min-h-0 flex">
-                  <Suspense fallback={<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>}>
-                    <Workbench />
-                  </Suspense>
+                  <Workbench />
                  <RightRail />
                </div>
              </div>
@@ -273,15 +268,11 @@ export default function HomePage() {
              <span className="mobile-bottom-button-label">{t('quickAccess.config', 'Config')}</span>
            </button>
          </div>
-          <Suspense fallback={null}>
-            <FileManager selectedTool={selectedTool as any /* FIX ME */} />
-          </Suspense>
-          <Suspense fallback={null}>
-            <AppConfigModal
-              opened={configModalOpen}
-              onClose={() => setConfigModalOpen(false)}
-            />
-          </Suspense>
+          <FileManager selectedTool={selectedTool as any /* FIX ME */} />
+          <AppConfigModal
+            opened={configModalOpen}
+            onClose={() => setConfigModalOpen(false)}
+          />
        </div>
      ) : (
        <Group
@@ -292,13 +283,9 @@ export default function HomePage() {
        >
          <QuickAccessBar ref={quickAccessRef} />
          <ToolPanel />
-          <Suspense fallback={<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>}>
-            <Workbench />
-          </Suspense>
+          <Workbench />
          <RightRail />
-          <Suspense fallback={null}>
-            <FileManager selectedTool={selectedTool as any /* FIX ME */} />
-          </Suspense>
+          <FileManager selectedTool={selectedTool as any /* FIX ME */} />
        </Group>
      )}
    </div>
@@ -3,14 +3,9 @@
 *
 * Prevents infinite worker creation by managing PDF.js workers globally
 * and ensuring proper cleanup when operations complete.
- *
- * Uses dynamic imports to avoid bundling PDF.js in main bundle.
 */

-// Dynamic import types for TypeScript
-type PDFDocumentProxy = import('pdfjs-dist').PDFDocumentProxy;
-type GlobalWorkerOptions = typeof import('pdfjs-dist').GlobalWorkerOptions;
-type GetDocumentFn = typeof import('pdfjs-dist').getDocument;
+import { GlobalWorkerOptions, getDocument, PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';

 class PDFWorkerManager {
  private static instance: PDFWorkerManager;
@@ -18,10 +13,9 @@ class PDFWorkerManager {
  private workerCount = 0;
  private maxWorkers = 10; // Limit concurrent workers
  private isInitialized = false;
-  private pdfjsLib: { GlobalWorkerOptions: GlobalWorkerOptions; getDocument: GetDocumentFn } | null = null;

  private constructor() {
-    // Don't initialize worker in constructor - defer until first use
+    this.initializeWorker();
  }

  static getInstance(): PDFWorkerManager {
@@ -32,14 +26,11 @@ class PDFWorkerManager {
  }

  /**
-   * Lazy-load PDF.js library and initialize worker once globally
+   * Initialize PDF.js worker once globally
   */
-  private async initializeWorker(): Promise<void> {
+  private initializeWorker(): void {
    if (!this.isInitialized) {
-      // Dynamic import - only loads when first PDF operation is needed
-      this.pdfjsLib = await import('pdfjs-dist/legacy/build/pdf.mjs');
-
-      this.pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+      GlobalWorkerOptions.workerSrc = new URL(
        'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
        import.meta.url
      ).toString();
@@ -60,13 +51,6 @@ class PDFWorkerManager {
      verbosity?: number;
    } = {}
  ): Promise<PDFDocumentProxy> {
-    // Lazy-load PDF.js on first use
-    await this.initializeWorker();
-
-    if (!this.pdfjsLib) {
-      throw new Error('Failed to load PDF.js library');
-    }
-
    // Wait if we've hit the worker limit
    if (this.activeDocuments.size >= this.maxWorkers) {
      await this.waitForAvailableWorker();
@@ -84,7 +68,7 @@ class PDFWorkerManager {
      pdfData = data; // Pass through as-is
    }

-    const loadingTask = this.pdfjsLib.getDocument(
+    const loadingTask = getDocument(
      typeof pdfData === 'string' ? {
        url: pdfData,
        disableAutoFetch: options.disableAutoFetch ?? true,
@@ -0,0 +1,416 @@
+import { useEffect, useState, useContext, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
+import { useNavigation } from '@app/contexts/NavigationContext';
+import { useFileSelection } from '@app/contexts/FileContext';
+import { BaseToolProps } from '@app/types/tool';
+import { useSignature } from '@app/contexts/SignatureContext';
+import { ViewerContext, useViewer } from '@app/contexts/ViewerContext';
+import type { AnnotationToolId } from '@app/components/viewer/viewerTypes';
+import { useAnnotationStyleState } from '@app/tools/annotate/useAnnotationStyleState';
+import { useAnnotationSelection } from '@app/tools/annotate/useAnnotationSelection';
+import { AnnotationPanel } from '@app/tools/annotate/AnnotationPanel';
+
+const KNOWN_ANNOTATION_TOOLS: AnnotationToolId[] = [
+  'select',
+  'highlight',
+  'underline',
+  'strikeout',
+  'squiggly',
+  'ink',
+  'inkHighlighter',
+  'text',
+  'note',
+  'square',
+  'circle',
+  'line',
+  'lineArrow',
+  'polyline',
+  'polygon',
+  'stamp',
+  'signatureStamp',
+  'signatureInk',
+];
+
+const isKnownAnnotationTool = (toolId: string | undefined | null): toolId is AnnotationToolId =>
+  !!toolId && (KNOWN_ANNOTATION_TOOLS as string[]).includes(toolId);
+
+const Annotate = (_props: BaseToolProps) => {
+  const { t } = useTranslation();
+  const { selectedTool, workbench, hasUnsavedChanges } = useNavigation();
+  const { selectedFiles } = useFileSelection();
+  const {
+    signatureApiRef,
+    annotationApiRef,
+    historyApiRef,
+    undo,
+    redo,
+    setSignatureConfig,
+    setPlacementMode,
+    placementPreviewSize,
+    setPlacementPreviewSize,
+  } = useSignature();
+  const viewerContext = useContext(ViewerContext);
+  const { getZoomState, registerImmediateZoomUpdate } = useViewer();
+
+  const [activeTool, setActiveTool] = useState<AnnotationToolId>('select');
+  const activeToolRef = useRef<AnnotationToolId>('select');
+  const wasAnnotateActiveRef = useRef<boolean>(false);
+  const [selectedTextDraft, setSelectedTextDraft] = useState<string>('');
+  const [selectedFontSize, setSelectedFontSize] = useState<number>(14);
+  const [stampImageData, setStampImageData] = useState<string | undefined>();
+  const [stampImageSize, setStampImageSize] = useState<{ width: number; height: number } | null>(null);
+  const [historyAvailability, setHistoryAvailability] = useState({ canUndo: false, canRedo: false });
+  const manualToolSwitch = useRef<boolean>(false);
+
+  // Zoom tracking for stamp size conversion
+  const [currentZoom, setCurrentZoom] = useState(() => {
+    const zoomState = getZoomState();
+    if (!zoomState) return 1;
+    if (typeof zoomState.zoomPercent === 'number') {
+      return Math.max(zoomState.zoomPercent / 100, 0.01);
+    }
+    return Math.max(zoomState.currentZoom ?? 1, 0.01);
+  });
+
+  useEffect(() => {
+    return registerImmediateZoomUpdate((newZoomPercent) => {
+      setCurrentZoom(Math.max(newZoomPercent / 100, 0.01));
+    });
+  }, [registerImmediateZoomUpdate]);
+
+  useEffect(() => {
+    activeToolRef.current = activeTool;
+  }, [activeTool]);
+
+  // CSS to PDF size conversion accounting for zoom
+  const cssToPdfSize = useCallback(
+    (size: { width: number; height: number }) => {
+      const zoom = currentZoom || 1;
+      const factor = 1 / zoom;
+      return {
+        width: size.width * factor,
+        height: size.height * factor,
+      };
+    },
+    [currentZoom]
+  );
+
+  const computeStampDisplaySize = useCallback((natural: { width: number; height: number } | null) => {
+    if (!natural) {
+      return { width: 180, height: 120 };
+    }
+    const maxSide = 260;
+    const minSide = 24;
+    const { width, height } = natural;
+    const largest = Math.max(width || maxSide, height || maxSide, 1);
+    const scale = Math.min(1, maxSide / largest);
+    return {
+      width: Math.max(minSide, Math.round(width * scale)),
+      height: Math.max(minSide, Math.round(height * scale)),
+    };
+  }, []);
+
+  const {
+    styleState,
+    styleActions,
+    buildToolOptions,
+    getActiveColor,
+  } = useAnnotationStyleState(cssToPdfSize);
+
+  const {
+    setInkWidth,
+    setShapeThickness,
+    setTextColor,
+    setTextBackgroundColor,
+    setNoteBackgroundColor,
+    setInkColor,
+    setHighlightColor,
+    setHighlightOpacity,
+    setFreehandHighlighterWidth,
+    setUnderlineColor,
+    setUnderlineOpacity,
+    setStrikeoutColor,
+    setStrikeoutOpacity,
+    setSquigglyColor,
+    setSquigglyOpacity,
+    setShapeStrokeColor,
+    setShapeFillColor,
+    setShapeOpacity,
+    setShapeStrokeOpacity,
+    setShapeFillOpacity,
+    setTextAlignment,
+  } = styleActions;
+
+  const handleApplyChanges = useCallback(() => {
+    window.dispatchEvent(new CustomEvent('stirling-annotations-apply'));
+  }, []);
+
+  useEffect(() => {
+    const isAnnotateActive = workbench === 'viewer' && selectedTool === 'annotate';
+    if (wasAnnotateActiveRef.current && !isAnnotateActive) {
+      annotationApiRef?.current?.deactivateTools?.();
+      signatureApiRef?.current?.deactivateTools?.();
+      setPlacementMode(false);
+    } else if (!wasAnnotateActiveRef.current && isAnnotateActive) {
+      // When entering annotate mode, activate the select tool by default
+      const toolOptions = buildToolOptions('select');
+      annotationApiRef?.current?.activateAnnotationTool?.('select', toolOptions);
+    }
+    wasAnnotateActiveRef.current = isAnnotateActive;
+  }, [workbench, selectedTool, annotationApiRef, signatureApiRef, setPlacementMode, buildToolOptions]);
+
+  // Monitor history state for undo/redo availability
+  useEffect(() => {
+    const historyApi = historyApiRef?.current;
+    if (!historyApi) return;
+
+    const updateAvailability = () =>
+      setHistoryAvailability({
+        canUndo: historyApi.canUndo?.() ?? false,
+        canRedo: historyApi.canRedo?.() ?? false,
+      });
+
+    updateAvailability();
+
+    let interval: ReturnType<typeof setInterval> | undefined;
+    if (!historyApi.subscribe) {
+      // Fallback polling in case the history API doesn't support subscriptions
+      interval = setInterval(updateAvailability, 350);
+    } else {
+      const unsubscribe = historyApi.subscribe(updateAvailability);
+      return () => {
+        if (typeof unsubscribe === 'function') {
+          unsubscribe();
+        }
+        if (interval) clearInterval(interval);
+      };
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [historyApiRef?.current]);
+
+  useEffect(() => {
+    if (!viewerContext) return;
+    if (viewerContext.isAnnotationMode) return;
+
+    viewerContext.setAnnotationMode(true);
+    const toolOptions =
+      activeTool === 'stamp'
+        ? buildToolOptions('stamp', { stampImageData, stampImageSize })
+        : buildToolOptions(activeTool);
+    annotationApiRef?.current?.activateAnnotationTool?.(activeTool, toolOptions);
+  }, [viewerContext?.isAnnotationMode, signatureApiRef, activeTool, buildToolOptions, stampImageData, stampImageSize]);
+
+  const activateAnnotationTool = (toolId: AnnotationToolId) => {
+    // If leaving stamp tool, clean up placement mode
+    if (activeTool === 'stamp' && toolId !== 'stamp') {
+      setPlacementMode(false);
+      setSignatureConfig(null);
+    }
+
+    viewerContext?.setAnnotationMode(true);
+
+    // Mark as manual tool switch to prevent auto-switch back
+    manualToolSwitch.current = true;
+
+    // Deselect annotation in the viewer first
+    annotationApiRef?.current?.deselectAnnotation?.();
+
+    // Clear selection state to show default controls
+    setSelectedAnn(null);
+    setSelectedAnnId(null);
+
+    // Change the tool
+    setActiveTool(toolId);
+    const options =
+      toolId === 'stamp'
+        ? buildToolOptions('stamp', { stampImageData, stampImageSize })
+        : buildToolOptions(toolId);
+
+    // For stamp, apply the image if we have one
+    annotationApiRef?.current?.setAnnotationStyle?.(toolId, options);
+    annotationApiRef?.current?.activateAnnotationTool?.(toolId === 'stamp' ? 'stamp' : toolId, options);
+
+    // Reset flag after a short delay
+    setTimeout(() => {
+      manualToolSwitch.current = false;
+    }, 300);
+  };
+
+  useEffect(() => {
+    // push style updates to EmbedPDF when sliders/colors change
+    if (activeTool === 'stamp') {
+      const options = buildToolOptions('stamp', { stampImageData, stampImageSize });
+      annotationApiRef?.current?.setAnnotationStyle?.('stamp', options);
+    } else {
+      annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
+    }
+  }, [activeTool, buildToolOptions, signatureApiRef, stampImageData, stampImageSize]);
+
+  // Sync preview size from overlay to annotation engine
+  useEffect(() => {
+    // When preview size changes, update stamp annotation sizing
+    // The SignatureAPIBridge will use placementPreviewSize from SignatureContext
+    // and apply the converted size to the stamp tool automatically
+    if (activeTool === 'stamp' && stampImageData) {
+      const size = placementPreviewSize ?? stampImageSize;
+      const stampOptions = buildToolOptions('stamp', { stampImageData, stampImageSize: size ?? null });
+      annotationApiRef?.current?.setAnnotationStyle?.('stamp', stampOptions);
+    }
+  }, [placementPreviewSize, activeTool, stampImageData, signatureApiRef, stampImageSize, cssToPdfSize, buildToolOptions]);
+
+  // Allow exiting multi-point tools with Escape (e.g., polyline)
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      if (['polyline', 'polygon'].includes(activeTool)) {
+        annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
+        annotationApiRef?.current?.activateAnnotationTool?.(null as any);
+        setTimeout(() => {
+          annotationApiRef?.current?.activateAnnotationTool?.(activeTool, buildToolOptions(activeTool));
+        }, 50);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [activeTool, buildToolOptions, signatureApiRef]);
+
+  const deriveToolFromAnnotation = useCallback((annotation: any): AnnotationToolId | undefined => {
+    if (!annotation) return undefined;
+    const customToolId = annotation.customData?.toolId || annotation.customData?.annotationToolId;
+    if (isKnownAnnotationTool(customToolId)) {
+      return customToolId;
+    }
+
+    const type = annotation.type ?? annotation.object?.type;
+    switch (type) {
+      case 3: return 'text';        // FREETEXT
+      case 4: return 'line';        // LINE
+      case 5: return 'square';      // SQUARE
+      case 6: return 'circle';      // CIRCLE
+      case 7: return 'polygon';     // POLYGON
+      case 8: return 'polyline';    // POLYLINE
+      case 9: return 'highlight';   // HIGHLIGHT
+      case 10: return 'underline';  // UNDERLINE
+      case 11: return 'squiggly';   // SQUIGGLY
+      case 12: return 'strikeout';  // STRIKEOUT
+      case 13: return 'stamp';      // STAMP
+      case 15: return 'ink';        // INK
+      default: return undefined;
+    }
+  }, []);
+
+  const {
+    selectedAnn,
+    setSelectedAnn,
+    setSelectedAnnId,
+  } = useAnnotationSelection({
+    annotationApiRef,
+    deriveToolFromAnnotation,
+    activeToolRef,
+    manualToolSwitch,
+    setActiveTool,
+    setSelectedTextDraft,
+    setSelectedFontSize,
+    setInkWidth,
+    setShapeThickness,
+    setTextColor,
+    setTextBackgroundColor,
+    setNoteBackgroundColor,
+    setInkColor,
+    setHighlightColor,
+    setHighlightOpacity,
+    setFreehandHighlighterWidth,
+    setUnderlineColor,
+    setUnderlineOpacity,
+    setStrikeoutColor,
+    setStrikeoutOpacity,
+    setSquigglyColor,
+    setSquigglyOpacity,
+    setShapeStrokeColor,
+    setShapeFillColor,
+    setShapeOpacity,
+    setShapeStrokeOpacity,
+    setShapeFillOpacity,
+    setTextAlignment,
+  });
+
+  const steps =
+    selectedFiles.length === 0
+      ? []
+      : [
+          {
+            title: t('annotation.title', 'Annotate'),
+            isCollapsed: false,
+            onCollapsedClick: undefined,
+            content: (
+              <AnnotationPanel
+                activeTool={activeTool}
+                activateAnnotationTool={activateAnnotationTool}
+                styleState={styleState}
+                styleActions={styleActions}
+                getActiveColor={getActiveColor}
+                buildToolOptions={buildToolOptions}
+                deriveToolFromAnnotation={deriveToolFromAnnotation}
+                selectedAnn={selectedAnn}
+                selectedTextDraft={selectedTextDraft}
+                setSelectedTextDraft={setSelectedTextDraft}
+                selectedFontSize={selectedFontSize}
+                setSelectedFontSize={setSelectedFontSize}
+                annotationApiRef={annotationApiRef}
+                signatureApiRef={signatureApiRef}
+                viewerContext={viewerContext}
+                setPlacementMode={setPlacementMode}
+                setSignatureConfig={setSignatureConfig}
+                computeStampDisplaySize={computeStampDisplaySize}
+                stampImageData={stampImageData}
+                setStampImageData={setStampImageData}
+                stampImageSize={stampImageSize}
+                setStampImageSize={setStampImageSize}
+                setPlacementPreviewSize={setPlacementPreviewSize}
+                undo={undo}
+                redo={redo}
+                historyAvailability={historyAvailability}
+                onApplyChanges={handleApplyChanges}
+                applyDisabled={!hasUnsavedChanges}
+              />
+            ),
+          },
+        ];
+  return createToolFlow({
+    files: {
+      selectedFiles,
+      isCollapsed: false,
+    },
+    steps,
+    review: {
+      isVisible: false,
+      operation: {
+        files: [],
+        thumbnails: [],
+        isGeneratingThumbnails: false,
+        downloadUrl: null,
+        downloadFilename: '',
+        isLoading: false,
+        status: '',
+        errorMessage: null,
+        progress: null,
+        executeOperation: async () => {},
+        resetResults: () => {},
+        clearError: () => {},
+        cancelOperation: () => {},
+        undoOperation: async () => {},
+      },
+      title: '',
+      onFileClick: () => {},
+      onUndo: () => {},
+    },
+    forceStepNumbers: true,
+  });
+};
+
+export default Annotate;
@@ -0,0 +1,383 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { AnnotationAPI, AnnotationToolId } from '@app/components/viewer/viewerTypes';
+
+interface UseAnnotationSelectionParams {
+  annotationApiRef: React.RefObject<AnnotationAPI | null>;
+  deriveToolFromAnnotation: (annotation: any) => AnnotationToolId | undefined;
+  activeToolRef: React.MutableRefObject<AnnotationToolId>;
+  manualToolSwitch: React.MutableRefObject<boolean>;
+  setActiveTool: (toolId: AnnotationToolId) => void;
+  setSelectedTextDraft: (text: string) => void;
+  setSelectedFontSize: (size: number) => void;
+  setInkWidth: (value: number) => void;
+  setFreehandHighlighterWidth?: (value: number) => void;
+  setShapeThickness: (value: number) => void;
+  setTextColor: (value: string) => void;
+  setTextBackgroundColor: (value: string) => void;
+  setNoteBackgroundColor: (value: string) => void;
+  setInkColor: (value: string) => void;
+  setHighlightColor: (value: string) => void;
+  setHighlightOpacity: (value: number) => void;
+  setUnderlineColor: (value: string) => void;
+  setUnderlineOpacity: (value: number) => void;
+  setStrikeoutColor: (value: string) => void;
+  setStrikeoutOpacity: (value: number) => void;
+  setSquigglyColor: (value: string) => void;
+  setSquigglyOpacity: (value: number) => void;
+  setShapeStrokeColor: (value: string) => void;
+  setShapeFillColor: (value: string) => void;
+  setShapeOpacity: (value: number) => void;
+  setShapeStrokeOpacity: (value: number) => void;
+  setShapeFillOpacity: (value: number) => void;
+  setTextAlignment: (value: 'left' | 'center' | 'right') => void;
+}
+
+const MARKUP_TOOL_IDS = ['highlight', 'underline', 'strikeout', 'squiggly'] as const;
+const DRAWING_TOOL_IDS = ['ink', 'inkHighlighter'] as const;
+
+const isTextMarkupAnnotation = (annotation: any): boolean => {
+  const toolId =
+    annotation?.customData?.annotationToolId ||
+    annotation?.customData?.toolId ||
+    annotation?.object?.customData?.annotationToolId ||
+    annotation?.object?.customData?.toolId;
+  if (toolId && MARKUP_TOOL_IDS.includes(toolId)) return true;
+
+  const type = annotation?.type ?? annotation?.object?.type;
+  if (typeof type === 'number' && [9, 10, 11, 12].includes(type)) return true;
+
+  const subtype = annotation?.subtype ?? annotation?.object?.subtype;
+  if (typeof subtype === 'string') {
+    const lower = subtype.toLowerCase();
+    if (MARKUP_TOOL_IDS.some((t) => lower.includes(t))) return true;
+  }
+  return false;
+};
+
+const shouldStayOnPlacementTool = (annotation: any, derivedTool?: string | null | undefined): boolean => {
+  const toolId =
+    derivedTool ||
+    annotation?.customData?.annotationToolId ||
+    annotation?.customData?.toolId ||
+    annotation?.object?.customData?.annotationToolId ||
+    annotation?.object?.customData?.toolId;
+
+  if (toolId && (MARKUP_TOOL_IDS.includes(toolId as any) || DRAWING_TOOL_IDS.includes(toolId as any))) {
+    return true;
+  }
+  const type = annotation?.type ?? annotation?.object?.type;
+  if (typeof type === 'number' && type === 15) return true; // ink family
+  if (isTextMarkupAnnotation(annotation)) return true;
+  return false;
+};
+
+export function useAnnotationSelection({
+  annotationApiRef,
+  deriveToolFromAnnotation,
+  activeToolRef,
+  manualToolSwitch,
+  setActiveTool,
+  setSelectedTextDraft,
+  setSelectedFontSize,
+  setInkWidth,
+  setShapeThickness,
+  setTextColor,
+  setTextBackgroundColor,
+  setNoteBackgroundColor,
+  setInkColor,
+  setHighlightColor,
+  setHighlightOpacity,
+  setUnderlineColor,
+  setUnderlineOpacity,
+  setStrikeoutColor,
+  setStrikeoutOpacity,
+  setSquigglyColor,
+  setSquigglyOpacity,
+  setShapeStrokeColor,
+  setShapeFillColor,
+  setShapeOpacity,
+  setShapeStrokeOpacity,
+  setShapeFillOpacity,
+  setTextAlignment,
+  setFreehandHighlighterWidth,
+}: UseAnnotationSelectionParams) {
+  const [selectedAnn, setSelectedAnn] = useState<any | null>(null);
+  const [selectedAnnId, setSelectedAnnId] = useState<string | null>(null);
+  const selectedAnnIdRef = useRef<string | null>(null);
+
+  const applySelectionFromAnnotation = useCallback(
+    (ann: any | null) => {
+      const annObject = ann?.object ?? ann ?? null;
+      const annId = annObject?.id ?? null;
+      const type = annObject?.type;
+      const derivedTool = annObject ? deriveToolFromAnnotation(annObject) : undefined;
+      selectedAnnIdRef.current = annId;
+      setSelectedAnnId(annId);
+      // Normalize selected annotation to always expose .object for edit panels
+      const normalizedSelection = ann?.object ? ann : annObject ? { object: annObject } : null;
+      setSelectedAnn(normalizedSelection);
+
+      if (annObject?.contents !== undefined) {
+        setSelectedTextDraft(annObject.contents ?? '');
+      }
+      if (annObject?.fontSize !== undefined) {
+        setSelectedFontSize(annObject.fontSize ?? 14);
+      }
+      if (annObject?.textAlign !== undefined) {
+        const align = annObject.textAlign;
+        if (typeof align === 'string') {
+          const normalized = align === 'center' ? 'center' : align === 'right' ? 'right' : 'left';
+          setTextAlignment(normalized);
+        } else if (typeof align === 'number') {
+          const normalized = align === 1 ? 'center' : align === 2 ? 'right' : 'left';
+          setTextAlignment(normalized);
+        }
+      }
+      if (type === 3) {
+        const background =
+          (annObject?.backgroundColor as string | undefined) ||
+          (annObject?.fillColor as string | undefined) ||
+          undefined;
+        const textColor = (annObject?.textColor as string | undefined) || (annObject?.color as string | undefined);
+        if (textColor) {
+          setTextColor(textColor);
+        }
+        if (derivedTool === 'note') {
+          setNoteBackgroundColor(background || '');
+        } else {
+          setTextBackgroundColor(background || '');
+        }
+      }
+
+      if (type === 15) {
+        const width =
+          annObject?.strokeWidth ?? annObject?.borderWidth ?? annObject?.lineWidth ?? annObject?.thickness;
+        if (derivedTool === 'inkHighlighter') {
+          if (annObject?.color) setHighlightColor(annObject.color);
+          if (annObject?.opacity !== undefined) {
+            setHighlightOpacity(Math.round((annObject.opacity ?? 1) * 100));
+          }
+          if (width !== undefined && setFreehandHighlighterWidth) {
+            setFreehandHighlighterWidth(width);
+          }
+        } else {
+          if (width !== undefined) setInkWidth(width ?? 2);
+          if (annObject?.color) {
+            setInkColor(annObject.color);
+          }
+        }
+      } else if (type >= 4 && type <= 8) {
+        const width = annObject?.strokeWidth ?? annObject?.borderWidth ?? annObject?.lineWidth;
+        if (width !== undefined) {
+          setShapeThickness(width ?? 1);
+        }
+      }
+
+      if (type === 9) {
+        if (annObject?.color) setHighlightColor(annObject.color);
+        if (annObject?.opacity !== undefined) setHighlightOpacity(Math.round((annObject.opacity ?? 1) * 100));
+      } else if (type === 10) {
+        if (annObject?.color) setUnderlineColor(annObject.color);
+        if (annObject?.opacity !== undefined) setUnderlineOpacity(Math.round((annObject.opacity ?? 1) * 100));
+      } else if (type === 12) {
+        if (annObject?.color) setStrikeoutColor(annObject.color);
+        if (annObject?.opacity !== undefined) setStrikeoutOpacity(Math.round((annObject.opacity ?? 1) * 100));
+      } else if (type === 11) {
+        if (annObject?.color) setSquigglyColor(annObject.color);
+        if (annObject?.opacity !== undefined) setSquigglyOpacity(Math.round((annObject.opacity ?? 1) * 100));
+      }
+
+      if ([4, 5, 6, 7, 8].includes(type)) {
+        const stroke = (annObject?.strokeColor as string | undefined) ?? (annObject?.color as string | undefined);
+        if (stroke) setShapeStrokeColor(stroke);
+        if ([5, 6, 7].includes(type)) {
+          const fill = (annObject?.color as string | undefined) ?? (annObject?.fillColor as string | undefined);
+          if (fill) setShapeFillColor(fill);
+        }
+        const opacity =
+          annObject?.opacity !== undefined ? Math.round((annObject.opacity ?? 1) * 100) : undefined;
+        const strokeOpacityValue =
+          annObject?.strokeOpacity !== undefined
+            ? Math.round((annObject.strokeOpacity ?? 1) * 100)
+            : undefined;
+        const fillOpacityValue =
+          annObject?.fillOpacity !== undefined ? Math.round((annObject.fillOpacity ?? 1) * 100) : undefined;
+        if (opacity !== undefined) {
+          setShapeOpacity(opacity);
+          setShapeStrokeOpacity(strokeOpacityValue ?? opacity);
+          setShapeFillOpacity(fillOpacityValue ?? opacity);
+        } else {
+          if (strokeOpacityValue !== undefined) setShapeStrokeOpacity(strokeOpacityValue);
+          if (fillOpacityValue !== undefined) setShapeFillOpacity(fillOpacityValue);
+        }
+      }
+
+      const matchingTool = derivedTool;
+      const stayOnPlacement = shouldStayOnPlacementTool(annObject, matchingTool);
+      if (matchingTool && activeToolRef.current !== 'select' && !stayOnPlacement) {
+        activeToolRef.current = 'select';
+        setActiveTool('select');
+        // Immediately enable select tool to avoid re-entering placement after creation.
+        annotationApiRef.current?.activateAnnotationTool?.('select');
+      } else if (activeToolRef.current === 'select') {
+        // Keep the viewer in Select mode so clicking existing annotations does not re-enable placement.
+        annotationApiRef.current?.activateAnnotationTool?.('select');
+      }
+    },
+    [
+      activeToolRef,
+      deriveToolFromAnnotation,
+      manualToolSwitch,
+      setActiveTool,
+      setInkWidth,
+      setNoteBackgroundColor,
+      setSelectedFontSize,
+      setSelectedTextDraft,
+      setShapeThickness,
+      setTextBackgroundColor,
+      setTextColor,
+      setInkColor,
+      setHighlightColor,
+      setHighlightOpacity,
+      setUnderlineColor,
+      setUnderlineOpacity,
+      setStrikeoutColor,
+      setStrikeoutOpacity,
+      setSquigglyColor,
+      setSquigglyOpacity,
+      setShapeStrokeColor,
+      setShapeFillColor,
+      setShapeOpacity,
+      setShapeStrokeOpacity,
+      setShapeFillOpacity,
+      setTextAlignment,
+      setFreehandHighlighterWidth,
+      shouldStayOnPlacementTool,
+    ]
+  );
+
+  useEffect(() => {
+    const api = annotationApiRef.current as any;
+    if (!api) return;
+
+    const checkSelection = () => {
+      let ann: any = null;
+      if (typeof api.getSelectedAnnotation === 'function') {
+        try {
+          ann = api.getSelectedAnnotation();
+        } catch (error) {
+          // Some builds of the annotation plugin can throw when reading
+          // internal selection state (e.g., accessing `selectedUid` on
+          // an undefined object). Treat this as "no current selection"
+          // instead of crashing the annotations tool.
+          console.error('[useAnnotationSelection] getSelectedAnnotation failed:', error);
+          ann = null;
+        }
+      }
+      const currentId = ann?.object?.id ?? ann?.id ?? null;
+      if (currentId !== selectedAnnIdRef.current) {
+        applySelectionFromAnnotation(ann ?? null);
+      }
+    };
+
+    let interval: ReturnType<typeof setInterval> | null = null;
+
+    if (typeof api.onAnnotationEvent === 'function') {
+      const handler = (event: any) => {
+        const ann = event?.annotation ?? event?.selectedAnnotation ?? null;
+        const eventType = event?.type;
+        switch (eventType) {
+          case 'create':
+          case 'add':
+          case 'added':
+          case 'created':
+          case 'annotationCreated':
+          case 'annotationAdded':
+          case 'complete': {
+            const eventAnn = ann ?? api.getSelectedAnnotation?.();
+            applySelectionFromAnnotation(eventAnn);
+            const currentTool = activeToolRef.current;
+            const tool =
+              deriveToolFromAnnotation((eventAnn as any)?.object ?? eventAnn ?? api.getSelectedAnnotation?.()) ||
+              currentTool;
+            const stayOnPlacement =
+              shouldStayOnPlacementTool(eventAnn, tool) ||
+              (tool ? DRAWING_TOOL_IDS.includes(tool as any) : false);
+            if (activeToolRef.current !== 'select' && !stayOnPlacement) {
+              activeToolRef.current = 'select';
+              setActiveTool('select');
+              annotationApiRef.current?.activateAnnotationTool?.('select');
+            }
+            // Re-read selection after the viewer updates to ensure we have the full annotation object for the edit panel.
+            setTimeout(() => {
+              const selected = api.getSelectedAnnotation?.();
+              applySelectionFromAnnotation(selected ?? eventAnn ?? null);
+              const derivedAfter =
+                deriveToolFromAnnotation((selected as any)?.object ?? selected ?? eventAnn ?? null) || activeToolRef.current;
+              const stayOnPlacementAfter =
+                shouldStayOnPlacementTool(selected ?? eventAnn ?? null, derivedAfter) ||
+                (derivedAfter ? DRAWING_TOOL_IDS.includes(derivedAfter as any) : false);
+              if (activeToolRef.current !== 'select' && !stayOnPlacementAfter) {
+                activeToolRef.current = 'select';
+                setActiveTool('select');
+                annotationApiRef.current?.activateAnnotationTool?.('select');
+              }
+            }, 50);
+            break;
+          }
+          case 'select':
+          case 'selected':
+          case 'annotationSelected':
+          case 'annotationClicked':
+          case 'annotationTapped':
+            applySelectionFromAnnotation(ann ?? api.getSelectedAnnotation?.());
+            break;
+          case 'deselect':
+          case 'clearSelection':
+            applySelectionFromAnnotation(null);
+            break;
+          case 'delete':
+          case 'remove':
+            if (ann?.id && ann.id === selectedAnnIdRef.current) {
+              applySelectionFromAnnotation(null);
+            }
+            break;
+          case 'update':
+          case 'change':
+            if (selectedAnnIdRef.current) {
+              const current = api.getSelectedAnnotation?.();
+              if (current) {
+                applySelectionFromAnnotation(current);
+              }
+            }
+            break;
+          default:
+            break;
+        }
+      };
+
+      const unsubscribe = api.onAnnotationEvent(handler);
+      interval = setInterval(checkSelection, 450);
+      return () => {
+        if (typeof unsubscribe === 'function') {
+          unsubscribe();
+        }
+        if (interval) clearInterval(interval);
+      };
+    }
+
+    interval = setInterval(checkSelection, 350);
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [annotationApiRef, applySelectionFromAnnotation]);
+
+  return {
+    selectedAnn,
+    selectedAnnId,
+    selectedAnnIdRef,
+    setSelectedAnn,
+    setSelectedAnnId,
+    applySelectionFromAnnotation,
+  };
+}
@@ -0,0 +1,325 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { AnnotationToolId } from '@app/components/viewer/viewerTypes';
+
+type Size = { width: number; height: number };
+
+export type BuildToolOptionsExtras = {
+  includeMetadata?: boolean;
+  stampImageData?: string;
+  stampImageSize?: Size | null;
+};
+
+interface StyleState {
+  inkColor: string;
+  inkWidth: number;
+  highlightColor: string;
+  highlightOpacity: number;
+  freehandHighlighterWidth: number;
+  underlineColor: string;
+  underlineOpacity: number;
+  strikeoutColor: string;
+  strikeoutOpacity: number;
+  squigglyColor: string;
+  squigglyOpacity: number;
+  textColor: string;
+  textSize: number;
+  textAlignment: 'left' | 'center' | 'right';
+  textBackgroundColor: string;
+  noteBackgroundColor: string;
+  shapeStrokeColor: string;
+  shapeFillColor: string;
+  shapeOpacity: number;
+  shapeStrokeOpacity: number;
+  shapeFillOpacity: number;
+  shapeThickness: number;
+}
+
+interface StyleActions {
+  setInkColor: (value: string) => void;
+  setInkWidth: (value: number) => void;
+  setHighlightColor: (value: string) => void;
+  setHighlightOpacity: (value: number) => void;
+  setFreehandHighlighterWidth: (value: number) => void;
+  setUnderlineColor: (value: string) => void;
+  setUnderlineOpacity: (value: number) => void;
+  setStrikeoutColor: (value: string) => void;
+  setStrikeoutOpacity: (value: number) => void;
+  setSquigglyColor: (value: string) => void;
+  setSquigglyOpacity: (value: number) => void;
+  setTextColor: (value: string) => void;
+  setTextSize: (value: number) => void;
+  setTextAlignment: (value: 'left' | 'center' | 'right') => void;
+  setTextBackgroundColor: (value: string) => void;
+  setNoteBackgroundColor: (value: string) => void;
+  setShapeStrokeColor: (value: string) => void;
+  setShapeFillColor: (value: string) => void;
+  setShapeOpacity: (value: number) => void;
+  setShapeStrokeOpacity: (value: number) => void;
+  setShapeFillOpacity: (value: number) => void;
+  setShapeThickness: (value: number) => void;
+}
+
+export type BuildToolOptionsFn = (
+  toolId: AnnotationToolId,
+  extras?: BuildToolOptionsExtras
+) => Record<string, unknown>;
+
+export interface AnnotationStyleStateReturn {
+  styleState: StyleState;
+  styleActions: StyleActions;
+  buildToolOptions: BuildToolOptionsFn;
+  getActiveColor: (target: string | null) => string;
+}
+
+export const useAnnotationStyleState = (
+  cssToPdfSize?: (size: Size) => Size
+): AnnotationStyleStateReturn => {
+  const [inkColor, setInkColor] = useState('#1f2933');
+  const [inkWidth, setInkWidth] = useState(2);
+  const [highlightColor, setHighlightColor] = useState('#ffd54f');
+  const [highlightOpacity, setHighlightOpacity] = useState(60);
+  const [freehandHighlighterWidth, setFreehandHighlighterWidth] = useState(6);
+  const [underlineColor, setUnderlineColor] = useState('#ffb300');
+  const [underlineOpacity, setUnderlineOpacity] = useState(100);
+  const [strikeoutColor, setStrikeoutColor] = useState('#e53935');
+  const [strikeoutOpacity, setStrikeoutOpacity] = useState(100);
+  const [squigglyColor, setSquigglyColor] = useState('#00acc1');
+  const [squigglyOpacity, setSquigglyOpacity] = useState(100);
+  const [textColor, setTextColor] = useState('#111111');
+  const [textSize, setTextSize] = useState(14);
+  const [textAlignment, setTextAlignment] = useState<'left' | 'center' | 'right'>('left');
+  const [textBackgroundColor, setTextBackgroundColor] = useState<string>('');
+  const [noteBackgroundColor, setNoteBackgroundColor] = useState('#ffd54f');
+  const [shapeStrokeColor, setShapeStrokeColor] = useState('#cf5b5b');
+  const [shapeFillColor, setShapeFillColor] = useState('#0000ff');
+  const [shapeOpacity, setShapeOpacity] = useState(50);
+  const [shapeStrokeOpacity, setShapeStrokeOpacity] = useState(50);
+  const [shapeFillOpacity, setShapeFillOpacity] = useState(50);
+  const [shapeThickness, setShapeThickness] = useState(2);
+
+  const buildToolOptions = useCallback<BuildToolOptionsFn>(
+    (toolId, extras) => {
+      const includeMetadata = extras?.includeMetadata ?? true;
+      const metadata = includeMetadata
+        ? {
+            customData: {
+              toolId,
+              annotationToolId: toolId,
+              source: 'annotate',
+              author: 'User',
+              createdAt: new Date().toISOString(),
+              modifiedAt: new Date().toISOString(),
+            },
+          }
+        : {};
+
+      switch (toolId) {
+        case 'ink':
+          return { color: inkColor, thickness: inkWidth, ...metadata };
+        case 'inkHighlighter':
+          return {
+            color: highlightColor,
+            opacity: highlightOpacity / 100,
+            thickness: freehandHighlighterWidth,
+            ...metadata,
+          };
+        case 'highlight':
+          return { color: highlightColor, opacity: highlightOpacity / 100, ...metadata };
+        case 'underline':
+          return { color: underlineColor, opacity: underlineOpacity / 100, ...metadata };
+        case 'strikeout':
+          return { color: strikeoutColor, opacity: strikeoutOpacity / 100, ...metadata };
+        case 'squiggly':
+          return { color: squigglyColor, opacity: squigglyOpacity / 100, ...metadata };
+        case 'text': {
+          const textAlignNumber = textAlignment === 'left' ? 0 : textAlignment === 'center' ? 1 : 2;
+          return {
+            color: textColor,
+            textColor: textColor,
+            fontSize: textSize,
+            textAlign: textAlignNumber,
+            ...(textBackgroundColor ? { fillColor: textBackgroundColor } : {}),
+            ...metadata,
+          };
+        }
+        case 'note': {
+          const noteFillColor = noteBackgroundColor || 'transparent';
+          return {
+            color: textColor,
+            fillColor: noteFillColor,
+            opacity: 1,
+            ...metadata,
+          };
+        }
+        case 'square':
+        case 'circle':
+        case 'polygon':
+          return {
+            color: shapeFillColor,
+            strokeColor: shapeStrokeColor,
+            opacity: shapeOpacity / 100,
+            strokeOpacity: shapeStrokeOpacity / 100,
+            fillOpacity: shapeFillOpacity / 100,
+            borderWidth: shapeThickness,
+            ...metadata,
+          };
+        case 'line':
+        case 'polyline':
+        case 'lineArrow':
+          return {
+            color: shapeStrokeColor,
+            strokeColor: shapeStrokeColor,
+            opacity: shapeStrokeOpacity / 100,
+            borderWidth: shapeThickness,
+            ...metadata,
+          };
+        case 'stamp': {
+          const pdfSize =
+            extras?.stampImageSize && cssToPdfSize ? cssToPdfSize(extras.stampImageSize) : undefined;
+          return {
+            imageSrc: extras?.stampImageData,
+            ...(pdfSize ? { imageSize: pdfSize } : {}),
+            ...metadata,
+          };
+        }
+        default:
+          return { ...metadata };
+      }
+    },
+    [
+      cssToPdfSize,
+      freehandHighlighterWidth,
+      highlightColor,
+      highlightOpacity,
+      inkColor,
+      inkWidth,
+      noteBackgroundColor,
+      shapeFillColor,
+      shapeFillOpacity,
+      shapeOpacity,
+      shapeStrokeColor,
+      shapeStrokeOpacity,
+      shapeThickness,
+      squigglyColor,
+      squigglyOpacity,
+      strikeoutColor,
+      strikeoutOpacity,
+      textAlignment,
+      textBackgroundColor,
+      textColor,
+      textSize,
+      underlineColor,
+      underlineOpacity,
+    ]
+  );
+
+  const getActiveColor = useCallback(
+    (target: string | null) => {
+      if (target === 'ink') return inkColor;
+      if (target === 'highlight' || target === 'inkHighlighter') return highlightColor;
+      if (target === 'underline') return underlineColor;
+      if (target === 'strikeout') return strikeoutColor;
+      if (target === 'squiggly') return squigglyColor;
+      if (target === 'shapeStroke') return shapeStrokeColor;
+      if (target === 'shapeFill') return shapeFillColor;
+      if (target === 'textBackground') return textBackgroundColor || '#ffffff';
+      if (target === 'noteBackground') return noteBackgroundColor || '#ffffff';
+      return textColor;
+    },
+    [
+      highlightColor,
+      inkColor,
+      noteBackgroundColor,
+      shapeFillColor,
+      shapeStrokeColor,
+      squigglyColor,
+      strikeoutColor,
+      textBackgroundColor,
+      textColor,
+      underlineColor,
+    ]
+  );
+
+  const styleState: StyleState = useMemo(
+    () => ({
+      inkColor,
+      inkWidth,
+      highlightColor,
+      highlightOpacity,
+      freehandHighlighterWidth,
+      underlineColor,
+      underlineOpacity,
+      strikeoutColor,
+      strikeoutOpacity,
+      squigglyColor,
+      squigglyOpacity,
+      textColor,
+      textSize,
+      textAlignment,
+      textBackgroundColor,
+      noteBackgroundColor,
+      shapeStrokeColor,
+      shapeFillColor,
+      shapeOpacity,
+      shapeStrokeOpacity,
+      shapeFillOpacity,
+      shapeThickness,
+    }),
+    [
+      freehandHighlighterWidth,
+      highlightColor,
+      highlightOpacity,
+      inkColor,
+      inkWidth,
+      noteBackgroundColor,
+      shapeFillColor,
+      shapeFillOpacity,
+      shapeOpacity,
+      shapeStrokeColor,
+      shapeStrokeOpacity,
+      shapeThickness,
+      squigglyColor,
+      squigglyOpacity,
+      strikeoutColor,
+      strikeoutOpacity,
+      textAlignment,
+      textBackgroundColor,
+      textColor,
+      textSize,
+      underlineColor,
+      underlineOpacity,
+    ]
+  );
+
+  const styleActions: StyleActions = {
+    setInkColor,
+    setInkWidth,
+    setHighlightColor,
+    setHighlightOpacity,
+    setFreehandHighlighterWidth,
+    setUnderlineColor,
+    setUnderlineOpacity,
+    setStrikeoutColor,
+    setStrikeoutOpacity,
+    setSquigglyColor,
+    setSquigglyOpacity,
+    setTextColor,
+    setTextSize,
+    setTextAlignment,
+    setTextBackgroundColor,
+    setNoteBackgroundColor,
+    setShapeStrokeColor,
+    setShapeFillColor,
+    setShapeOpacity,
+    setShapeStrokeOpacity,
+    setShapeFillOpacity,
+    setShapeThickness,
+  };
+
+  return {
+    styleState,
+    styleActions,
+    buildToolOptions,
+    getActiveColor,
+  };
+};
@@ -25,6 +25,7 @@ export const CORE_REGULAR_TOOL_IDS = [
  'ocr',
  'addImage',
  'rotate',
+  'annotate',
  'scannerImageSplit',
  'editTableOfContents',
  'scannerEffect',
@@ -70,6 +70,8 @@ export const URL_TO_TOOL_MAP: Record<string, ToolId> = {
  '/scanner-image-split': 'scannerImageSplit',

  // Annotation and content removal
+  '/annotations': 'annotate',
+  '/annotate': 'annotate',
  '/remove-annotations': 'removeAnnotations',
  '/remove-image': 'removeImage',

@@ -1,5 +1,4 @@
 import { invoke, isTauri } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';

 export interface FileOpenService {
  getOpenedFiles(): Promise<string[]>;
@@ -61,6 +60,8 @@ class TauriFileOpenService implements FileOpenService {

        // Only import if in Tauri environment
        if (isTauri()) {
+          const { listen } = await import('@tauri-apps/api/event');
+
          // Check again after async import
          if (isCleanedUp) {
            return;
@@ -1,18 +1,14 @@
-import { Suspense, lazy } from "react";
+import { Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
 import { AppProviders } from "@app/components/AppProviders";
 import { AppLayout } from "@app/components/AppLayout";
 import { LoadingFallback } from "@app/components/shared/LoadingFallback";
-
-// Lazy-load auth routes - only loaded when user navigates to them
-const Landing = lazy(() => import("@app/routes/Landing"));
-const Login = lazy(() => import("@app/routes/Login"));
-const Signup = lazy(() => import("@app/routes/Signup"));
-const AuthCallback = lazy(() => import("@app/routes/AuthCallback"));
-const InviteAccept = lazy(() => import("@app/routes/InviteAccept"));
-
-// Lazy-load Onboarding - only shown once for first-time users
-const Onboarding = lazy(() => import("@app/components/onboarding/Onboarding"));
+import Landing from "@app/routes/Landing";
+import Login from "@app/routes/Login";
+import Signup from "@app/routes/Signup";
+import AuthCallback from "@app/routes/AuthCallback";
+import InviteAccept from "@app/routes/InviteAccept";
+import Onboarding from "@app/components/onboarding/Onboarding";

 // Import global styles
 import "@app/styles/tailwind.css";
@@ -38,9 +34,7 @@ export default function App() {
            {/* Main app routes - Landing handles auth logic */}
            <Route path="/*" element={<Landing />} />
          </Routes>
-          <Suspense fallback={null}>
-            <Onboarding />
-          </Suspense>
+          <Onboarding />
        </AppLayout>
      </AppProviders>
    </Suspense>
@@ -1,25 +1,23 @@
-import React, { lazy } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConfigNavSections as useCoreConfigNavSections, createConfigNavSections as createCoreConfigNavSections, ConfigNavSection } from '@core/components/shared/config/configNavSections';
-
-// Lazy load all config sections
-const PeopleSection = lazy(() => import('@app/components/shared/config/configSections/PeopleSection'));
-const TeamsSection = lazy(() => import('@app/components/shared/config/configSections/TeamsSection'));
-const AdminGeneralSection = lazy(() => import('@app/components/shared/config/configSections/AdminGeneralSection'));
-const AdminSecuritySection = lazy(() => import('@app/components/shared/config/configSections/AdminSecuritySection'));
-const AdminConnectionsSection = lazy(() => import('@app/components/shared/config/configSections/AdminConnectionsSection'));
-const AdminPrivacySection = lazy(() => import('@app/components/shared/config/configSections/AdminPrivacySection'));
-const AdminDatabaseSection = lazy(() => import('@app/components/shared/config/configSections/AdminDatabaseSection'));
-const AdminAdvancedSection = lazy(() => import('@app/components/shared/config/configSections/AdminAdvancedSection'));
-const AdminLegalSection = lazy(() => import('@app/components/shared/config/configSections/AdminLegalSection'));
-const AdminPlanSection = lazy(() => import('@app/components/shared/config/configSections/AdminPlanSection'));
-const AdminFeaturesSection = lazy(() => import('@app/components/shared/config/configSections/AdminFeaturesSection'));
-const AdminEndpointsSection = lazy(() => import('@app/components/shared/config/configSections/AdminEndpointsSection'));
-const AdminAuditSection = lazy(() => import('@app/components/shared/config/configSections/AdminAuditSection'));
-const AdminUsageSection = lazy(() => import('@app/components/shared/config/configSections/AdminUsageSection'));
-const ApiKeys = lazy(() => import('@app/components/shared/config/configSections/ApiKeys'));
-const AccountSection = lazy(() => import('@app/components/shared/config/configSections/AccountSection'));
-const GeneralSection = lazy(() => import('@app/components/shared/config/configSections/GeneralSection'));
+import PeopleSection from '@app/components/shared/config/configSections/PeopleSection';
+import TeamsSection from '@app/components/shared/config/configSections/TeamsSection';
+import AdminGeneralSection from '@app/components/shared/config/configSections/AdminGeneralSection';
+import AdminSecuritySection from '@app/components/shared/config/configSections/AdminSecuritySection';
+import AdminConnectionsSection from '@app/components/shared/config/configSections/AdminConnectionsSection';
+import AdminPrivacySection from '@app/components/shared/config/configSections/AdminPrivacySection';
+import AdminDatabaseSection from '@app/components/shared/config/configSections/AdminDatabaseSection';
+import AdminAdvancedSection from '@app/components/shared/config/configSections/AdminAdvancedSection';
+import AdminLegalSection from '@app/components/shared/config/configSections/AdminLegalSection';
+import AdminPlanSection from '@app/components/shared/config/configSections/AdminPlanSection';
+import AdminFeaturesSection from '@app/components/shared/config/configSections/AdminFeaturesSection';
+import AdminEndpointsSection from '@app/components/shared/config/configSections/AdminEndpointsSection';
+import AdminAuditSection from '@app/components/shared/config/configSections/AdminAuditSection';
+import AdminUsageSection from '@app/components/shared/config/configSections/AdminUsageSection';
+import ApiKeys from '@app/components/shared/config/configSections/ApiKeys';
+import AccountSection from '@app/components/shared/config/configSections/AccountSection';
+import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';

 /**
 * Hook version of proprietary config nav sections with proper i18n support
@@ -2,29 +2,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { visualizer } from "rollup-plugin-visualizer";
-import type { OutputBundle } from "rollup";
-
-const maxChunkSize = 500;
-
-function failOnLargeChunks(limitKb: number) {
-  return {
-    name: "fail-on-large-chunks",
-    generateBundle(_: unknown, bundle: OutputBundle) {
-      for (const [fileName, chunk] of Object.entries(bundle)) {
-        if (chunk.type === "chunk") {
-          const sizeKb = Buffer.byteLength(chunk.code) / 1024;
-
-          if (sizeKb > limitKb) {
-            throw new Error(
-              `❌ Chunk "${fileName}" is ${sizeKb.toFixed(1)} KB (limit: ${limitKb} KB)`
-            );
-          }
-        }
-      }
-    },
-  };
-}

 export default defineConfig(({ mode }) => {
  // When DISABLE_ADDITIONAL_FEATURES is false (or unset), enable proprietary features
@@ -40,10 +17,6 @@ export default defineConfig(({ mode }) => {

  return {
    plugins: [
-    visualizer({
-      open: true,
-      filename: "stats.html"
-    }),
      react(),
      tsconfigPaths({
        projects: [tsconfigProject],
@@ -56,25 +29,8 @@ export default defineConfig(({ mode }) => {
            dest: 'pdfium'
          }
        ]
-      }),
-      failOnLargeChunks(maxChunkSize),
+      })
    ],
-    build: {
-      chunkSizeWarningLimit: maxChunkSize,
-      rollupOptions: {
-        output: {
-          // Manual chunks for better code splitting
-          manualChunks: {
-            // Large UI libraries
-            'vendor-ui': ['@mantine/core', '@mantine/hooks', '@mantine/dates', '@mantine/dropzone'],
-            // React and related
-            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
-            // Other large dependencies
-            'vendor-utils': ['jszip'],
-          },
-        },
-      },
-    },
    server: {
      host: true,
      // make sure this port matches the devUrl port in tauri.conf.json file
Author	SHA1	Message	Date
Anthony Stirling	fc13a6ec66	ui	2025-12-22 00:50:27 +00:00
Dario Ghunney WareandGitHub	a1317f0e01	Bumping version (#5268 )	2025-12-18 20:43:10 +00:00
Reece BrowneandGitHub	3529849bca	Feature/annotations (#5260 )	2025-12-18 15:47:54 +00:00