diff --git a/.eslintrc.js b/.eslintrc.js
index db56d42..47fa709 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,11 +11,23 @@ module.exports = {
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser',
-    requireConfigFile: false,
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2021,
+    sourceType: 'module',
   },
+  parser: 'vue-eslint-parser',
+  overrides: [
+    {
+      files: ['tests/**/*.ts'],
+      env: {
+        'vitest/globals': true,
+      },
+      plugins: ['vitest'],
+    },
+  ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
diff --git a/.github/workflows/node.yml b/.github/workflows/node.yml
index a83e4e3..bf4f3bd 100644
--- a/.github/workflows/node.yml
+++ b/.github/workflows/node.yml
@@ -52,7 +52,7 @@ jobs:
         run: npm run lint
 
       - name: Build library
-        run: npm run build:lib
+        run: npm run build
 
       - name: Check build changes
         run: |
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index e4a293a..0a2a906 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -47,7 +47,7 @@ jobs:
           CYPRESS_INSTALL_BINARY: 0
         run: |
           npm i
-          npm run build:lib
+          npm run build
 
       - name: Publish to npm
         run: npm publish --provenance --access public
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 5c014b2..bc697bc 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -1,7 +1,7 @@
 # SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 # SPDX-License-Identifier: AGPL-3.0-or-later
 
-name: Deploy A DEMO
+name: Deploy Demo
 
 on:
   workflow_dispatch:
@@ -16,17 +16,28 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Set up Node.js
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@8205673bab74a63eb9b8093402fd9e0e018663a1 # v2.2
+        id: versions
+        with:
+          fallbackNode: '^20'
+          fallbackNpm: '^10'
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
         uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g 'npm@${{ steps.versions.outputs.npmVersion }}'
 
       - name: Install & Build
         run: |
           npm i
-          npm install -g cross-env
-          cross-env PUBLIC_PATH=/pdf-elements/ npm run build
+          npm run build:demo
 
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4
         with:
             branch: gh-pages
-            folder: dist
+            folder: dist-demo
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
new file mode 100644
index 0000000..a572b9f
--- /dev/null
+++ b/.github/workflows/tests.yml
@@ -0,0 +1,52 @@
+# SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+name: Tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+concurrency:
+  group: tests-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    name: NPM test
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Read package.json node and npm engines version
+        uses: skjnldsv/read-package-engines-version-actions@8205673bab74a63eb9b8093402fd9e0e018663a1 # v2.2
+        id: versions
+        with:
+          fallbackNode: '^20'
+          fallbackNpm: '^10'
+
+      - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.versions.outputs.nodeVersion }}
+
+      - name: Set up npm ${{ steps.versions.outputs.npmVersion }}
+        run: npm i -g 'npm@${{ steps.versions.outputs.npmVersion }}'
+
+      - name: Install dependencies
+        env:
+          CYPRESS_INSTALL_BINARY: 0
+          PUPPETEER_SKIP_DOWNLOAD: true
+        run: npm i
+
+      - name: Test
+        run: npm run test
diff --git a/.npmignore b/.npmignore
index 438781d..534324e 100644
--- a/.npmignore
+++ b/.npmignore
@@ -4,12 +4,16 @@
 # Source files
 src/
 examples/
+tests/
 
 # Config files
 .babelrc
 .eslintrc.js
-vue.config.js
+env.d.ts
 postcss.config.js
+tsconfig.json
+vite.config.ts
+vitest.config.ts
 REUSE.toml
 LICENSES/
 CONTRIBUTING.md
diff --git a/README.md b/README.md
index 58d8d76..b0e442c 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
 # PDF Elements
 
-A Vue 2 component for rendering PDFs with draggable and resizable element overlays.
+A Vue 3 component for rendering PDFs with draggable and resizable element overlays.
 
 **[Demo](https://libresign.github.io/pdf-elements/)** · [Examples](examples/)
 
+## Development
+
+- `npm run dev` - Run the demo with Vite
+- `npm run build` - Build the library (ESM + types)
+- `npm run build:demo` - Build the demo to `dist-demo`
+
 ## API
 
 ### Props
@@ -28,6 +34,23 @@ A Vue 2 component for rendering PDFs with draggable and resizable element overla
 | `ignoreClickOutsideSelectors` | Array | `[]` | CSS selectors that keep the selection active when clicking outside the element |
 | `pageCountFormat` | String | `'{currentPage} of {totalPages}'` | Format string for page counter |
 | `autoFitZoom` | Boolean | `false` | Automatically adjust zoom to fit viewport on window resize |
+| `pdfjsOptions` | Object | `{}` | Options passed to PDF.js `getDocument` (advanced) |
+
+### PDF.js options
+
+`pdfjsOptions` is forwarded to PDF.js `getDocument(...)` and can be used to tune performance.
+
+Example:
+
+```ts
+<PDFElements
+	:pdfjs-options="{
+		disableFontFace: true,
+		disableRange: true,
+		disableStream: true,
+	}"
+/>
+```
 
 ### Events
 
diff --git a/REUSE.toml b/REUSE.toml
index a6d2e50..90cb2c5 100644
--- a/REUSE.toml
+++ b/REUSE.toml
@@ -12,11 +12,15 @@ default-copyright = "2025 LibreCode coop and contributors"
 path = [
     ".babelrc",
     ".eslintrc.js",
+    "env.d.ts",
     "package.json",
     "package-lock.json",
     "postcss.config.js",
-    "vue.config.js",
+    "tsconfig.json",
+    "vite.config.ts",
+    "vitest.config.ts",
     "examples/**",
+    "tests/**",
     "dist/**",
 ]
 precedence = "aggregate"
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 0000000..2c3ed98
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+  export default component
+}
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..9faac68
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,94 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+const js = require('@eslint/js')
+const globals = require('globals')
+const vue = require('eslint-plugin-vue')
+const tsPlugin = require('@typescript-eslint/eslint-plugin')
+const tsParser = require('@typescript-eslint/parser')
+const vueParser = require('vue-eslint-parser')
+const vitest = require('eslint-plugin-vitest')
+
+const vitestGlobals = {
+  afterAll: 'readonly',
+  afterEach: 'readonly',
+  beforeAll: 'readonly',
+  beforeEach: 'readonly',
+  describe: 'readonly',
+  expect: 'readonly',
+  it: 'readonly',
+  test: 'readonly',
+  vi: 'readonly',
+}
+
+module.exports = [
+  {
+    ignores: ['dist/**', 'dist-demo/**', 'node_modules/**', '.eslintrc.js'],
+  },
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,vue}'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tsParser,
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+      },
+    },
+    plugins: {
+      vue,
+      '@typescript-eslint': tsPlugin,
+    },
+    rules: {
+      ...vue.configs['flat/essential'].rules,
+      ...tsPlugin.configs.recommended.rules,
+      'no-undef': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    },
+  },
+  {
+    files: ['eslint.config.js', '**/*.config.js', '**/*.config.cjs', 'postcss.config.js'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.es2021,
+      },
+      sourceType: 'script',
+    },
+    rules: {
+      'no-undef': 'off',
+    },
+  },
+  {
+    files: ['vite.config.ts', 'vitest.config.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.es2021,
+      },
+    },
+  },
+  {
+    files: ['tests/**/*.ts'],
+    plugins: {
+      vitest,
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...vitestGlobals,
+      },
+    },
+    rules: {
+      ...(vitest.configs?.recommended?.rules || {}),
+    },
+  },
+]
diff --git a/examples/basic/App.vue b/examples/basic/App.vue
index 6ed1217..15df9bc 100644
--- a/examples/basic/App.vue
+++ b/examples/basic/App.vue
@@ -56,8 +56,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
-import Vue from 'vue'
+<script lang="ts">
+import { defineComponent } from 'vue'
 import PDFElements from '../../src'
 import AppToolbar from './components/AppToolbar.vue'
 import DocumentsList from './components/DocumentsList.vue'
@@ -65,7 +65,7 @@ import SignatureBox from './components/SignatureBox.vue'
 import DeleteButton from './components/DeleteButton.vue'
 import ElementsViewer from './components/ElementsViewer.vue'
 
-export default {
+export default defineComponent({
   name: 'App',
   components: {
     PDFElements,
@@ -110,15 +110,18 @@ export default {
     },
 
     onFilesChange(event) {
-      const files = Array.from(event.target.files || [])
+      const input = event?.target as HTMLInputElement | null
+      const files = Array.from(input?.files || [])
       if (files.length === 0) return
 
       this.loading = true
       this.pdfReady = false
       this.initFiles = [...this.initFiles, ...files]
-      this.fileNames = [...this.fileNames, ...files.map(f => f.name)]
+      this.fileNames = [...this.fileNames, ...files.map((file: File) => file.name)]
       this.forceRenderDocuments()
-      event.target.value = ''
+      if (input) {
+        input.value = ''
+      }
     },
 
     removeDocument(index) {
@@ -192,9 +195,7 @@ export default {
       this.showElementsViewer = true
     },
   },
-}
-
-Vue.config.productionTip = false
+})
 </script>
 
 <style scoped>
diff --git a/examples/basic/README.md b/examples/basic/README.md
index 0e7f9c8..86797e3 100644
--- a/examples/basic/README.md
+++ b/examples/basic/README.md
@@ -1,29 +1,29 @@
 # Basic Example - @libresign/pdf-elements
 
-Basic integration example of the `PDFElements` component with dragging, resizing, and positioning elements in PDFs.
+This example shows how to integrate `PDFElements` with custom slots and basic actions.
 
 ## Structure
 
 ```
 examples/basic/
-├── App.vue                    # Main component: PDFElements integration
+├── App.vue
 ├── components/
-│   ├── AppToolbar.vue        # Toolbar component
-│   ├── DocumentsList.vue     # List of loaded documents
-│   ├── SignatureBox.vue      # Custom visual element
-│   └── DeleteButton.vue      # Delete button
+│   ├── AppToolbar.vue
+│   ├── DocumentsList.vue
+│   ├── SignatureBox.vue
+│   └── DeleteButton.vue
 └── README.md
 ```
 
-## How to Use PDFElements
+## Quick start
 
-### 1. Import the component
+Import the component:
 
 ```vue
 import PDFElements from '@libresign/pdf-elements'
 ```
 
-### 2. Basic template
+Basic template:
 
 ```vue
 <PDFElements
@@ -33,8 +33,8 @@ import PDFElements from '@libresign/pdf-elements'
   :initial-scale="1.1"
   @pdf-elements:end-init="onReady"
 >
-  <template #custom="{ object, isSelected }">
-    <!-- Your component here -->
+  <template #custom="{ object }">
+    <SignatureBox :object="object" />
   </template>
 
   <template #actions="{ onDelete }">
@@ -43,22 +43,18 @@ import PDFElements from '@libresign/pdf-elements'
 </PDFElements>
 ```
 
-### 3. Main props
-
-- **`init-files`**: Array of PDF URLs or File objects
-- **`init-file-names`**: Array with document names
-- **`initial-scale`**: Initial rendering scale (default: 1)
-
-### 4. Events
+## Props and event
 
-- **`pdf-elements:end-init`**: Triggered when PDFs finish loading
+- `init-files`: PDF URLs or files.
+- `init-file-names`: names shown in the footer.
+- `initial-scale`: initial zoom.
+- `pdf-elements:end-init`: emitted when the PDF finishes loading.
 
-### 5. Ref methods
+## Methods via `ref`
 
-```javascript
+```js
 const pdf = this.$refs.pdf
 
-// Iniciar modo de adicionar elemento (com preview que segue o mouse)
 pdf.startAddingElement({
   width: 160,
   height: 48,
@@ -66,113 +62,21 @@ pdf.startAddingElement({
   icon: 'signature',
 })
 
-// Obter todos os objetos do documento
 const objects = pdf.getAllObjects()
 ```
 
-### 6. Slots
+## Slots
+
+For specific types, use `element-{type}`. Example for signature:
 
-#### Type-specific slots (recommended for multiple element types)
 ```vue
-<!-- Slot for signature elements -->
 <template #element-signature="{ object }">
   <SignatureBox :object="object" />
 </template>
-
-<!-- Slot for text elements -->
-<template #element-text="{ object }">
-  <TextBox :object="object" />
-</template>
-
-<!-- Slot for date elements -->
-<template #element-date="{ object }">
-  <DateBox :object="object" />
-</template>
-```
-
-When an object has `type: 'signature'`, PDFElements looks for `#element-signature`. If not found, uses the `#custom` fallback.
-
-#### `#custom` - Generic rendering (fallback)
-Used when:
-- The object doesn't have a `type` property
-- No specific slot exists for the type
-
-Receives:
-- `object`: Element data (x, y, width, height, type, custom props)
-- `isSelected`: Boolean indicating if selected
-
-#### `#actions` - Action toolbar
-Receives:
-- `object`: Element data
-- `onDelete`: Function to delete the element
-
-### Multiple types example
-
-```vue
-<PDFElements ref="pdf" :init-files="files">
-  <!-- Signature elements -->
-  <template #element-signature="{ object }">
-    <div class="signature-box">
-      <SignIcon />
-      {{ object.label }}
-    </div>
-  </template>
-
-  <!-- Text input elements -->
-  <template #element-text="{ object }">
-    <div class="text-box">
-      <input :value="object.value" />
-    </div>
-  </template>
-
-  <!-- Date picker elements -->
-  <template #element-date="{ object }">
-    <div class="date-box">
-      <CalendarIcon />
-      {{ object.date || 'Select date' }}
-    </div>
-  </template>
-
-  <!-- Checkbox elements -->
-  <template #element-checkbox="{ object }">
-    <div class="checkbox-box">
-      <input type="checkbox" :checked="object.checked" />
-    </div>
-  </template>
-
-  <!-- Fallback for unknown types -->
-  <template #custom="{ object }">
-    <div class="generic-box">
-      {{ object.type || 'Element' }}
-    </div>
-  </template>
-
-  <!-- Common actions for all types -->
-  <template #actions="{ onDelete }">
-    <button @click="onDelete">Delete</button>
-  </template>
-</PDFElements>
 ```
 
-**Performance**: Slots dinâmicos são eficientes - Vue compila apenas os slots usados. Muito melhor que condicionais enormes.
-
-## Funcionalidades Implementadas
-
-✅ **Carregar múltiplos PDFs** (URL ou arquivo local)
-✅ **Adicionar elementos com preview** (clique no botão → move o mouse → clique para posicionar)
-✅ **Arrastar elementos** dentro da mesma página ou entre páginas diferentes
-✅ **Redimensionar elementos** (4 cantos, mantém aspect-ratio)
-✅ **Validação de bounds** (elementos não podem sair das páginas)
-✅ **Elementos responsivos** (texto ajusta tamanho conforme dimensões)
-✅ **Toolbar flutuante** com ações (aparece ao selecionar elemento)
-✅ **Rolagem durante drag** (atualiza posições automaticamente)
-
-## Componentes Auxiliares
+If there is no specific slot, `#custom` is used as a fallback.
 
-Os componentes em `components/` são **apenas para o exemplo**. Você pode:
-- Usar seus próprios componentes
-- Estilizar da forma que preferir
-- Adicionar mais ações no toolbar
-- Customizar totalmente o visual dos elementos
+## Notes
 
-O importante é entender como usar o `PDFElements` no `App.vue`.
+Components under `components/` are just for the example and can be replaced freely.
diff --git a/examples/basic/components/AppToolbar.vue b/examples/basic/components/AppToolbar.vue
index bbc2c27..80e0e3e 100644
--- a/examples/basic/components/AppToolbar.vue
+++ b/examples/basic/components/AppToolbar.vue
@@ -31,8 +31,10 @@
   </header>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'AppToolbar',
   props: {
     loading: {
@@ -48,7 +50,7 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/examples/basic/components/DeleteButton.vue b/examples/basic/components/DeleteButton.vue
index 23d9f0d..2130e9e 100644
--- a/examples/basic/components/DeleteButton.vue
+++ b/examples/basic/components/DeleteButton.vue
@@ -6,10 +6,12 @@
   </button>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DeleteButton',
-}
+})
 </script>
 
 <style scoped>
diff --git a/examples/basic/components/DocumentsList.vue b/examples/basic/components/DocumentsList.vue
index f741794..32112f8 100644
--- a/examples/basic/components/DocumentsList.vue
+++ b/examples/basic/components/DocumentsList.vue
@@ -10,8 +10,10 @@
   </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'DocumentsList',
   props: {
     documents: {
@@ -19,7 +21,7 @@ export default {
       default: () => [],
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/examples/basic/components/ElementsViewer.vue b/examples/basic/components/ElementsViewer.vue
index 09c8d01..0b1115f 100644
--- a/examples/basic/components/ElementsViewer.vue
+++ b/examples/basic/components/ElementsViewer.vue
@@ -51,8 +51,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'ElementsViewer',
   props: {
     isOpen: {
@@ -100,7 +102,7 @@ export default {
       this.$emit('close')
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/examples/basic/components/SignatureBox.vue b/examples/basic/components/SignatureBox.vue
index 7373839..9347fee 100644
--- a/examples/basic/components/SignatureBox.vue
+++ b/examples/basic/components/SignatureBox.vue
@@ -14,8 +14,10 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'SignatureBox',
   props: {
     object: {
@@ -27,7 +29,7 @@ export default {
       default: '14px',
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/examples/index.html b/examples/index.html
index 9fa456b..9742b2d 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -13,5 +13,6 @@
   <body>
     <noscript>This demo requires JavaScript.</noscript>
     <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
   </body>
 </html>
diff --git a/examples/main.js b/examples/main.ts
similarity index 57%
rename from examples/main.js
rename to examples/main.ts
index 575a2b8..499385c 100644
--- a/examples/main.js
+++ b/examples/main.ts
@@ -1,11 +1,7 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './basic/App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')
diff --git a/package.json b/package.json
index d8a5a9a..bb56cf6 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,18 @@
 {
   "name": "@libresign/pdf-elements",
-  "description": "PDF viewer with draggable and resizable element overlays for Vue 2",
-  "version": "0.4.0",
+  "description": "PDF viewer with draggable and resizable element overlays for Vue 3",
+  "version": "1.0.0",
   "author": "LibreCode <contact@librecode.coop>",
   "private": false,
-  "main": "dist/pdf-elements.umd.js",
-  "module": "dist/pdf-elements.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/LibreSign/pdf-elements"
@@ -21,40 +28,58 @@
     "draggable",
     "resizable",
     "libresign",
-    "vue2"
+    "vue3"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build:lib": "vue-cli-service build --target lib --name pdf-elements src/index.js",
-    "lint": "vue-cli-service lint --no-fix",
-    "lint:fix": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "build:report": "vite build --mode report",
+    "build:demo": "vite build --mode demo",
+    "preview:demo": "vite preview --outDir dist-demo",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .vue,.ts,.js --max-warnings=0",
+    "lint:fix": "eslint . --ext .vue,.ts,.js --fix"
   },
   "dependencies": {
-    "pdfjs-dist": "^5.4.530",
-    "vue": "^2.7.16"
+    "pdfjs-dist": "^5.4.624",
+    "vue": "^3.5.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.6",
-    "@babel/eslint-parser": "^7.28.6",
-    "@babel/plugin-transform-private-methods": "^7.28.6",
     "@nextcloud/browserslist-config": "^3.1.2",
-    "@vue/cli-plugin-babel": "^5.0.9",
-    "@vue/cli-plugin-eslint": "^5.0.9",
-    "@vue/cli-service": "^5.0.9",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.24.0",
+    "@eslint/js": "^9.39.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "eslint": "^9.0.0",
+    "eslint-plugin-vue": "^10.8.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "globals": "^15.9.0",
+    "happy-dom": "^20.7.0",
     "postcss": "^8.5.6",
-    "vue-template-compiler": "^2.7.16"
+    "rollup-plugin-visualizer": "^7.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
+    "@vue/test-utils": "^2.4.6",
+    "vue-eslint-parser": "^10.4.0",
+    "vue-tsc": "^3.2.4"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
   ],
+  "overrides": {
+    "eslint-plugin-vitest": {
+      "@typescript-eslint/utils": "^8.56.0"
+    }
+  },
   "files": [
     "dist",
     "src",
     "COPYING",
     "README.md"
   ],
+  "sideEffects": false,
   "license": "AGPL-3.0-or-later"
 }
diff --git a/src/components/DraggableElement.vue b/src/components/DraggableElement.vue
index 9fb646e..4e9188d 100644
--- a/src/components/DraggableElement.vue
+++ b/src/components/DraggableElement.vue
@@ -54,12 +54,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, type PropType, type CSSProperties } from 'vue'
+import type { PDFElementObject } from '../types'
+
+export default defineComponent({
   name: 'DraggableElement',
   props: {
     object: {
-      type: Object,
+      type: Object as PropType<PDFElementObject>,
       required: true,
     },
     pagesScale: {
@@ -75,27 +78,27 @@ export default {
       required: true,
     },
     onUpdate: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDelete: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDuplicate: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDragStart: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDragMove: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     onDragEnd: {
-      type: Function,
+      type: Function as PropType<(...args: any[]) => void>,
       default: () => {},
     },
     isBeingDraggedGlobally: {
@@ -103,7 +106,7 @@ export default {
       default: false,
     },
     draggingClientPos: {
-      type: Object,
+      type: Object as PropType<{ x: number; y: number }>,
       default: () => ({ x: 0, y: 0 }),
     },
     currentDocIndex: {
@@ -135,7 +138,7 @@ export default {
       default: false,
     },
     ignoreClickOutsideSelectors: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
   },
@@ -188,7 +191,7 @@ export default {
         width: `${currentWidth * scale}px`,
         height: `${currentHeight * scale}px`,
         pointerEvents: this.readOnly ? 'none' : 'auto',
-      }
+      } as CSSProperties
     },
     toolbarStyle() {
       const scale = this.pagesScale || 1
@@ -209,7 +212,7 @@ export default {
         left: `${(x + width / 2) * scale}px`,
         top: `${top * scale}px`,
         transform: 'translateX(-50%)',
-      }
+      } as CSSProperties
     },
     dragElementStyle() {
       if (!this.isBeingDraggedGlobally || !this.draggingClientPos) {
@@ -218,7 +221,7 @@ export default {
       return {
         opacity: 0,
         pointerEvents: 'none',
-      }
+      } as CSSProperties
     },
   },
   mounted() {
@@ -476,7 +479,7 @@ export default {
       this.currentPageRect = null
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/PDFElements.vue b/src/components/PDFElements.vue
index 99d3f28..4035d66 100644
--- a/src/components/PDFElements.vue
+++ b/src/components/PDFElements.vue
@@ -139,18 +139,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type PropType, markRaw } from 'vue'
 import PDFPage from './PDFPage.vue'
 import DraggableElement from './DraggableElement.vue'
-import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader.js'
-import { clampPosition, getVisibleArea } from '../utils/geometry.js'
-import { getViewportWindow, isPageInViewport } from '../utils/pageBounds.js'
-import { applyScaleToDocs } from '../utils/zoom.js'
-import { objectIdExistsInDoc, findObjectPageIndex, updateObjectInDoc, removeObjectFromDoc } from '../utils/objectStore.js'
-import { getCachedMeasurement } from '../utils/measurements.js'
-
-export default {
+import { readAsPDF, readAsArrayBuffer } from '../utils/asyncReader'
+import { clampPosition, getVisibleArea } from '../utils/geometry'
+import { getViewportWindow, isPageInViewport } from '../utils/pageBounds'
+import { applyScaleToDocs } from '../utils/zoom'
+import { objectIdExistsInDoc, findObjectPageIndex, updateObjectInDoc, removeObjectFromDoc } from '../utils/objectStore'
+import { getCachedMeasurement } from '../utils/measurements'
+import type { PDFDocumentEntry, PDFElementObject } from '../types'
+
+export default defineComponent({
   name: 'PDFElements',
+  emits: ['pdf-elements:end-init', 'pdf-elements:delete-object', 'pdf-elements:object-click'],
   components: {
     PDFPage,
     DraggableElement,
@@ -165,11 +168,13 @@ export default {
       default: '100%',
     },
     initFiles: {
-      type: Array,
+      type: Array as PropType<
+        (string | Blob | ArrayBuffer | ArrayBufferView | Record<string, unknown>)[]
+      >,
       default: () => [],
     },
     initFileNames: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     initialScale: {
@@ -201,7 +206,7 @@ export default {
       default: false,
     },
     ignoreClickOutsideSelectors: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => [],
     },
     pageCountFormat: {
@@ -212,32 +217,36 @@ export default {
       type: Boolean,
       default: false,
     },
+    pdfjsOptions: {
+      type: Object as PropType<Record<string, unknown>>,
+      default: () => ({}),
+    },
   },
   data() {
     return {
       scale: this.initialScale,
-      pdfDocuments: [],
+      pdfDocuments: [] as PDFDocumentEntry[],
       selectedDocIndex: -1,
       selectedPageIndex: -1,
       isAddingMode: false,
-      previewElement: null,
+      previewElement: null as PDFElementObject | null,
       previewPosition: { x: 0, y: 0 },
       previewScale: { x: 1, y: 1 },
       previewPageDocIndex: -1,
       previewPageIndex: -1,
       previewVisible: false,
       hoverRafId: 0,
-      pendingHoverClientPos: null,
-      lastHoverRect: null,
+      pendingHoverClientPos: null as { x: number; y: number } | null,
+      lastHoverRect: null as DOMRect | null,
       addingListenersAttached: false,
       dragRafId: 0,
-      pendingDragClientPos: null,
+      pendingDragClientPos: null as { x: number; y: number } | null,
       pageBoundsVersion: 0,
       lastScrollTop: 0,
       lastClientWidth: 0,
       nextObjectCounter: 0,
       isDraggingElement: false,
-      draggingObject: null,
+      draggingObject: null as PDFElementObject | null,
       draggingDocIndex: -1,
       draggingPageIndex: -1,
       draggingClientPosition: { x: 0, y: 0 },
@@ -246,22 +255,20 @@ export default {
       draggingElementShift: { x: 0, y: 0 },
       lastMouseClientPos: { x: 0, y: 0 },
       viewportRafId: 0,
-      objectIndexCache: {},
-      zoomRafId: null,
-      wheelZoomRafId: null,
-      boundHandleWheel: null,
+      objectIndexCache: markRaw({}) as Record<string, number>,
+      zoomRafId: null as number | null,
+      wheelZoomRafId: null as number | null,
+      boundHandleWheel: null as ((event: WheelEvent) => void) | null,
       visualScale: this.initialScale,
       autoFitApplied: false,
       lastContainerWidth: 0,
+      _pagesBoundingRects: markRaw({}) as Record<string, { docIndex: number; pageIndex: number; rect: DOMRect }>,
+      _pagesBoundingRectsList: markRaw([]) as { docIndex: number; pageIndex: number; rect: DOMRect }[],
+      _pageMeasurementCache: markRaw({}) as Record<string, { width: number; height: number }>,
+      _lastPageBoundsScrollTop: 0,
+      _lastPageBoundsClientHeight: 0,
     }
   },
-  created() {
-      this._pagesBoundingRects = {}
-      this._pagesBoundingRectsList = []
-      this._pageMeasurementCache = {}
-      this._lastPageBoundsScrollTop = 0
-      this._lastPageBoundsClientHeight = 0
-  },
   mounted() {
     this.boundHandleWheel = this.handleWheel.bind(this)
     this.init()
@@ -301,7 +308,7 @@ export default {
   methods: {
     async init() {
       if (!this.initFiles || this.initFiles.length === 0) return
-      const docs = []
+      const docs: PDFDocumentEntry[] = []
       this.autoFitApplied = false
 
       for (let i = 0; i < this.initFiles.length; i++) {
@@ -311,9 +318,9 @@ export default {
         let pdfDoc
         if (file instanceof Blob) {
           const buffer = await readAsArrayBuffer(file)
-          pdfDoc = await readAsPDF({ data: buffer })
+          pdfDoc = await readAsPDF({ data: buffer }, this.pdfjsOptions)
         } else {
-          pdfDoc = await readAsPDF(file)
+          pdfDoc = await readAsPDF(file, this.pdfjsOptions)
         }
 
         const pages = []
@@ -329,12 +336,14 @@ export default {
           pages.push(pagePromise)
         }
 
+        const rawPages = markRaw(pages)
+
         docs.push({
           name,
           file,
-          pdfDoc,
+          pdfDoc: markRaw(pdfDoc),
           numPages: pdfDoc.numPages,
-          pages,
+          pages: rawPages,
           pageWidths,
           pagesScale: Array(pdfDoc.numPages).fill(this.scale),
           allObjects: Array(pdfDoc.numPages).fill(0).map(() => []),
@@ -342,7 +351,7 @@ export default {
       }
 
       this.pdfDocuments = docs
-      this._pageMeasurementCache = {}
+      this._pageMeasurementCache = markRaw({})
       if (docs.length) {
         this.selectedDocIndex = 0
         this.selectedPageIndex = 0
@@ -394,7 +403,12 @@ export default {
     updateDraggingPosition(clientX, clientY) {
       if (!this.isDraggingElement) return
 
-      this.pendingDragClientPos = { x: clientX, y: clientY }
+      if (this.pendingDragClientPos) {
+        this.pendingDragClientPos.x = clientX
+        this.pendingDragClientPos.y = clientY
+      } else {
+        this.pendingDragClientPos = { x: clientX, y: clientY }
+      }
       if (this.dragRafId) return
       this.dragRafId = window.requestAnimationFrame(() => {
         this.dragRafId = 0
@@ -453,6 +467,7 @@ export default {
 
     cachePageBounds() {
       const nextRects = {}
+      const nextList = []
       const container = this.$el
       const scrollTop = container?.scrollTop || 0
       const viewHeight = container?.clientHeight || 0
@@ -477,22 +492,24 @@ export default {
             }
           }
           const rect = canvas.getBoundingClientRect()
-          nextRects[`${docIdx}-${pageIdx}`] = {
+          const entry = {
             docIndex: docIdx,
             pageIndex: pageIdx,
             rect,
           }
+          nextRects[`${docIdx}-${pageIdx}`] = entry
+          nextList.push(entry)
         }
       }
-      this._pagesBoundingRects = nextRects
-      this._pagesBoundingRectsList = Object.values(nextRects)
+      this._pagesBoundingRects = markRaw(nextRects)
+      this._pagesBoundingRectsList = markRaw(nextList)
       this.pageBoundsVersion++
     },
     cachePageBoundsForPage(docIndex, pageIndex) {
       const canvas = this.getPageCanvasElement(docIndex, pageIndex)
       if (!canvas) return
       const rect = canvas.getBoundingClientRect()
-      this._pagesBoundingRects = {
+      const nextRects = {
         ...this._pagesBoundingRects,
         [`${docIndex}-${pageIndex}`]: {
           docIndex,
@@ -500,7 +517,8 @@ export default {
           rect,
         },
       }
-      this._pagesBoundingRectsList = Object.values(this._pagesBoundingRects)
+      this._pagesBoundingRects = markRaw(nextRects)
+      this._pagesBoundingRectsList = markRaw(Object.values(nextRects))
       this.pageBoundsVersion++
     },
     getPageBoundsMap() {
@@ -526,7 +544,7 @@ export default {
     },
 
     getDisplayedPageScale(docIndex, pageIndex) {
-      this.pageBoundsVersion
+      void this.pageBoundsVersion
       const doc = this.pdfDocuments[docIndex]
       if (!doc) return 1
       const baseWidth = doc.pageWidths?.[pageIndex] || 0
@@ -589,7 +607,12 @@ export default {
       if (!this.isAddingMode || !this.previewElement) return
       const { x, y } = this.getPointerPosition(event)
       if (x === undefined || y === undefined) return
-      this.pendingHoverClientPos = { x, y }
+      if (this.pendingHoverClientPos) {
+        this.pendingHoverClientPos.x = x
+        this.pendingHoverClientPos.y = y
+      } else {
+        this.pendingHoverClientPos = { x, y }
+      }
       if (this.hoverRafId) return
       this.hoverRafId = window.requestAnimationFrame(() => {
         this.hoverRafId = 0
@@ -609,11 +632,11 @@ export default {
             rect: this.lastHoverRect,
           }
         } else {
-          const rects = this.getPageBoundsList().length
+          const rectEntries = this.getPageBoundsList().length
             ? this.getPageBoundsList()
             : Object.values(this.getPageBoundsMap())
-          for (let i = 0; i < rects.length; i++) {
-            const entry = rects[i]
+          for (let i = 0; i < rectEntries.length; i++) {
+            const entry = rectEntries[i]
             const rect = entry.rect
             if (cursorX >= rect.left && cursorX <= rect.right &&
                 cursorY >= rect.top && cursorY <= rect.bottom) {
@@ -673,6 +696,7 @@ export default {
 
       const doc = this.pdfDocuments?.[docIndex]
       const pageObjects = doc?.allObjects?.[pageIndex] || []
+      if (pageObjects.length === 0) return
       let hitObject = null
 
       for (let i = pageObjects.length - 1; i >= 0; i--) {
@@ -727,7 +751,7 @@ export default {
 
       applyScaleToDocs(this.pdfDocuments, this.scale)
 
-      this._pageMeasurementCache = {}
+      this._pageMeasurementCache = markRaw({})
       this.cachePageBounds()
     },
 
@@ -794,7 +818,7 @@ export default {
       if (!this.addingListenersAttached) return
       this.addingListenersAttached = false
       document.removeEventListener('mousemove', this.handleMouseMove)
-      document.removeEventListener('touchmove', this.handleMouseMove, { passive: true })
+      document.removeEventListener('touchmove', this.handleMouseMove)
       document.removeEventListener('mouseup', this.finishAdding)
       document.removeEventListener('touchend', this.finishAdding)
       document.removeEventListener('keydown', this.handleKeyDown)
@@ -813,8 +837,9 @@ export default {
         objectToAdd = { ...objectToAdd, id: this.generateObjectId() }
       }
 
-      const pageWidth = this.getPageWidth(docIndex, pageIndex)
-      const pageHeight = this.getPageHeight(docIndex, pageIndex)
+      const measurement = this.getCachedMeasurement(docIndex, pageIndex, pageRef)
+      const pageWidth = measurement.width
+      const pageHeight = measurement.height
 
       if (objectToAdd.x < 0 || objectToAdd.y < 0 ||
           objectToAdd.x + objectToAdd.width > pageWidth ||
@@ -862,11 +887,11 @@ export default {
             pageNumber: pageIndex + 1,
             scale: pagesScale,
             normalizedCoordinates: {
-              llx: parseInt(object.x, 10),
-              lly: parseInt(normalizedCanvasHeight - object.y, 10),
-              ury: parseInt(normalizedCanvasHeight - object.y - object.height, 10),
-              width: parseInt(object.width, 10),
-              height: parseInt(object.height, 10),
+              llx: Math.round(object.x),
+              lly: Math.round(normalizedCanvasHeight - object.y),
+              ury: Math.round(normalizedCanvasHeight - object.y - object.height),
+              width: Math.round(object.width),
+              height: Math.round(object.height),
             },
           })
         })
@@ -1074,9 +1099,11 @@ export default {
       if (!targetObject) return currentPageIndex
 
       let targetPageIndex = currentPageIndex
+      const pageBoundsList = this.getPageBoundsList()
       const pageBoundsMap = this.getPageBoundsMap()
-      for (const key in pageBoundsMap) {
-        const { docIndex: rectDocIndex, pageIndex, rect } = pageBoundsMap[key]
+      const boundsEntries = pageBoundsList.length ? pageBoundsList : Object.values(pageBoundsMap)
+      for (let i = 0; i < boundsEntries.length; i++) {
+        const { docIndex: rectDocIndex, pageIndex, rect } = boundsEntries[i]
         if (rectDocIndex === docIndex &&
             mouseX >= rect.left && mouseX <= rect.right &&
             mouseY >= rect.top && mouseY <= rect.bottom) {
@@ -1186,7 +1213,7 @@ export default {
           this.scheduleAutoFitZoom()
           return
         }
-        const canvases = this.$el?.querySelectorAll('canvas')
+        const canvases = this.$el?.querySelectorAll('canvas') as NodeListOf<HTMLCanvasElement> | undefined
         if (!canvases?.length) return
         maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
           canvas.width / (this.scale || 1),
@@ -1199,12 +1226,12 @@ export default {
         this.scale = optimalScale
         this.visualScale = optimalScale
         applyScaleToDocs(this.pdfDocuments, this.scale)
-        this._pageMeasurementCache = {}
+        this._pageMeasurementCache = markRaw({})
         this.cachePageBounds()
       }
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/components/PDFPage.vue b/src/components/PDFPage.vue
index 41b7269..c2640b8 100644
--- a/src/components/PDFPage.vue
+++ b/src/components/PDFPage.vue
@@ -7,12 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <canvas ref="canvas" />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+export default defineComponent({
   name: 'PDFPage',
+  emits: ['onMeasure'],
   props: {
     page: {
-      type: Promise,
+      type: Object as PropType<Promise<unknown>>,
       required: true,
     },
     scale: {
@@ -25,7 +28,7 @@ export default {
       dynamicScale: this.scale,
       isRendering: false,
       pendingRender: false,
-      renderTask: null,
+      renderTask: null as { cancel: () => void; promise: Promise<void> } | null,
     }
   },
   watch: {
@@ -41,7 +44,7 @@ export default {
     if (this.renderTask) {
       try {
         this.renderTask.cancel()
-      } catch (e) {
+      } catch {
         // Ignore render cancellation errors.
       }
       this.renderTask = null
@@ -73,12 +76,13 @@ export default {
         if (this.renderTask) {
           try {
             this.renderTask.cancel()
-          } catch (e) {
+          } catch {
             // Ignore render cancellation errors.
           }
           this.renderTask = null
         }
         const context = canvas.getContext('2d')
+        if (!context) return
         const viewport = _page.getViewport({
           scale: this.dynamicScale,
         })
@@ -100,7 +104,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style scoped>
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 3988f7a..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-import PDFElements from './components/PDFElements.vue'
-export { setWorkerPath } from './utils/asyncReader.js'
-
-PDFElements.install = function(Vue) {
-  if (PDFElements.install.installed) return
-  Vue.component(PDFElements.name, PDFElements)
-}
-
-if (typeof window !== 'undefined' && window.Vue) {
-  PDFElements.install(window.Vue)
-}
-
-export default PDFElements
-export { PDFElements }
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..01a22ba
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { App } from 'vue'
+import PDFElements from './components/PDFElements.vue'
+
+export { setWorkerPath } from './utils/asyncReader'
+export type { PDFDocumentEntry, PDFElementObject, PDFElementsPublicApi } from './types'
+
+const install = (app: App) => {
+  const name = PDFElements.name || 'PDFElements'
+  app.component(name, PDFElements)
+}
+
+;(PDFElements as { install?: (app: App) => void }).install = install
+
+export default PDFElements
+export { PDFElements }
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..42befe1
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,35 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export interface PDFElementObject {
+  id?: string
+  x: number
+  y: number
+  width: number
+  height: number
+  type?: string
+  label?: string
+  icon?: string
+  resizable?: boolean
+  [key: string]: unknown
+}
+
+export interface PDFDocumentEntry {
+  name: string
+  file: unknown
+  pdfDoc: unknown
+  numPages: number
+  pages: Promise<unknown>[]
+  pageWidths: number[]
+  pagesScale: number[]
+  allObjects: PDFElementObject[][]
+}
+
+export interface PDFElementsPublicApi {
+  startAddingElement: (templateObject: PDFElementObject) => void
+  addObjectToPage: (object: PDFElementObject, pageIndex?: number, docIndex?: number) => boolean
+  getAllObjects: (docIndex?: number) => PDFElementObject[]
+  updateObject: (docIndex: number, objectId: string, payload: Partial<PDFElementObject>) => void
+  deleteObject: (docIndex: number, objectId: string) => void
+  duplicateObject: (docIndex: number, objectId: string) => void
+}
diff --git a/src/utils/asyncReader.js b/src/utils/asyncReader.js
deleted file mode 100644
index 81b81a7..0000000
--- a/src/utils/asyncReader.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-import { getDocument, GlobalWorkerOptions, PDFWorker } from 'pdfjs-dist'
-import pdfWorkerCode from 'pdfjs-dist/build/pdf.worker.min.mjs'
-
-GlobalWorkerOptions.workerSrc = pdfWorkerCode
-
-let sharedWorker = null
-
-function getSharedWorker() {
-  if (!sharedWorker) {
-    sharedWorker = new PDFWorker({ name: 'libresign-pdf-worker' })
-  }
-  return sharedWorker
-}
-
-export function setWorkerPath(path) {
-  GlobalWorkerOptions.workerSrc = path
-}
-
-export function readAsArrayBuffer(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result)
-    reader.onerror = reject
-    reader.readAsArrayBuffer(file)
-  })
-}
-
-export function readAsPDF(file) {
-  const worker = getSharedWorker()
-  const isArrayBuffer = file instanceof ArrayBuffer
-  const isView = ArrayBuffer.isView(file)
-  const isBlob = typeof Blob !== 'undefined' && file instanceof Blob
-
-  if (file && typeof file === 'object' && !isArrayBuffer && !isView && !isBlob) {
-    return getDocument({ ...file, worker }).promise
-  }
-  if (typeof file === 'string') {
-    return getDocument({ url: file, worker }).promise
-  }
-  return getDocument({ data: file, worker }).promise
-}
diff --git a/src/utils/asyncReader.ts b/src/utils/asyncReader.ts
new file mode 100644
index 0000000..7da94db
--- /dev/null
+++ b/src/utils/asyncReader.ts
@@ -0,0 +1,103 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { PDFDocumentProxy, PDFWorker } from 'pdfjs-dist'
+
+let sharedWorker: PDFWorker | null = null
+let pdfjsPromise: Promise<typeof import('pdfjs-dist')> | null = null
+let workerUrlPromise: Promise<string> | null = null
+let workerSrcOverride: string | null = null
+
+function loadPdfjs() {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import('pdfjs-dist')
+  }
+  return pdfjsPromise
+}
+
+function loadWorkerUrl() {
+  if (!workerUrlPromise) {
+    workerUrlPromise = import('pdfjs-dist/build/pdf.worker.min.mjs?url').then(
+      (mod) => mod.default as string
+    )
+  }
+  return workerUrlPromise
+}
+
+async function ensureWorkerSrc(pdfjs: typeof import('pdfjs-dist')) {
+  if (workerSrcOverride) {
+    pdfjs.GlobalWorkerOptions.workerSrc = workerSrcOverride
+    return
+  }
+  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+    pdfjs.GlobalWorkerOptions.workerSrc = await loadWorkerUrl()
+  }
+}
+
+async function getSharedWorker(pdfjs: typeof import('pdfjs-dist')): Promise<PDFWorker> {
+  if (!sharedWorker) {
+    await ensureWorkerSrc(pdfjs)
+    sharedWorker = new pdfjs.PDFWorker({}) as PDFWorker
+  }
+  return sharedWorker
+}
+
+export function setWorkerPath(path: string) {
+  workerSrcOverride = path
+  if (pdfjsPromise) {
+    pdfjsPromise.then((pdfjs) => {
+      pdfjs.GlobalWorkerOptions.workerSrc = path
+    })
+  }
+}
+
+export function readAsArrayBuffer(file: Blob): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as ArrayBuffer)
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+type PdfInput =
+  | string
+  | ArrayBuffer
+  | ArrayBufferView
+  | Blob
+  | {
+      url?: string
+      data?: ArrayBuffer | Uint8Array
+      [key: string]: unknown
+    }
+
+export async function readAsPDF(
+  file: PdfInput,
+  options: Record<string, unknown> = {}
+): Promise<PDFDocumentProxy> {
+  const pdfjs = await loadPdfjs()
+  const worker = await getSharedWorker(pdfjs)
+  const isArrayBuffer = file instanceof ArrayBuffer
+  const isView = ArrayBuffer.isView(file)
+  const isBlob = typeof Blob !== 'undefined' && file instanceof Blob
+
+  if (file && typeof file === 'object' && !isArrayBuffer && !isView && !isBlob) {
+    return pdfjs.getDocument({ ...(file as Record<string, unknown>), ...options, worker }).promise
+  }
+  if (typeof file === 'string') {
+    return pdfjs.getDocument({ url: file, ...options, worker }).promise
+  }
+  if (isBlob) {
+    const data = await readAsArrayBuffer(file as Blob)
+    return pdfjs.getDocument({ data, ...options, worker }).promise
+  }
+  const data = isArrayBuffer
+    ? (file as ArrayBuffer)
+    : new Uint8Array(
+        (file as ArrayBufferView).buffer,
+        (file as ArrayBufferView).byteOffset,
+        (file as ArrayBufferView).byteLength
+      )
+
+  return pdfjs.getDocument({ data, ...options, worker }).promise
+}
diff --git a/src/utils/geometry.js b/src/utils/geometry.ts
similarity index 67%
rename from src/utils/geometry.js
rename to src/utils/geometry.ts
index 7e71d86..eb3343e 100644
--- a/src/utils/geometry.js
+++ b/src/utils/geometry.ts
@@ -1,14 +1,28 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function clampPosition(x, y, width, height, pageWidth, pageHeight) {
+export function clampPosition(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageWidth: number,
+  pageHeight: number
+) {
   return {
     x: Math.max(0, Math.min(x, pageWidth - width)),
     y: Math.max(0, Math.min(y, pageHeight - height)),
   }
 }
 
-export function getVisibleArea(newX, newY, objWidth, objHeight, pageWidth, pageHeight) {
+export function getVisibleArea(
+  newX: number,
+  newY: number,
+  objWidth: number,
+  objHeight: number,
+  pageWidth: number,
+  pageHeight: number
+) {
   const visibleLeft = Math.max(0, newX)
   const visibleTop = Math.max(0, newY)
   const visibleRight = Math.min(pageWidth, newX + objWidth)
diff --git a/src/utils/measurements.js b/src/utils/measurements.ts
similarity index 50%
rename from src/utils/measurements.js
rename to src/utils/measurements.ts
index 4657045..f0e5e48 100644
--- a/src/utils/measurements.js
+++ b/src/utils/measurements.ts
@@ -1,7 +1,26 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function getCachedMeasurement(cache, cacheKey, pageRef, pagesScale) {
+export interface CanvasMeasurement {
+  canvasWidth: number
+  canvasHeight: number
+}
+
+export interface PageMeasurement {
+  width: number
+  height: number
+}
+
+export interface PageMeasurementProvider {
+  getCanvasMeasurement: () => CanvasMeasurement
+}
+
+export function getCachedMeasurement(
+  cache: Record<string, PageMeasurement>,
+  cacheKey: string,
+  pageRef: PageMeasurementProvider,
+  pagesScale: number
+) {
   const cached = cache[cacheKey]
   if (cached) {
     return cached
diff --git a/src/utils/objectStore.js b/src/utils/objectStore.ts
similarity index 65%
rename from src/utils/objectStore.js
rename to src/utils/objectStore.ts
index 7e03da8..d0aba82 100644
--- a/src/utils/objectStore.js
+++ b/src/utils/objectStore.ts
@@ -1,12 +1,14 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function objectIdExistsInDoc(doc, objectId) {
+import type { PDFDocumentEntry, PDFElementObject } from '../types'
+
+export function objectIdExistsInDoc(doc: PDFDocumentEntry | undefined, objectId: string) {
   if (!doc || !objectId) return false
   return doc.allObjects.some((objects) => objects.some((obj) => obj.id === objectId))
 }
 
-export function findObjectPageIndex(doc, objectId) {
+export function findObjectPageIndex(doc: PDFDocumentEntry | undefined, objectId: string) {
   if (!doc || !objectId) return undefined
   for (let pageIndex = 0; pageIndex < doc.allObjects.length; pageIndex++) {
     if (doc.allObjects[pageIndex].some((obj) => obj.id === objectId)) {
@@ -16,7 +18,12 @@ export function findObjectPageIndex(doc, objectId) {
   return undefined
 }
 
-export function updateObjectInDoc(doc, pageIndex, objectId, payload) {
+export function updateObjectInDoc(
+  doc: PDFDocumentEntry | undefined,
+  pageIndex: number,
+  objectId: string,
+  payload: Partial<PDFElementObject>
+) {
   const objects = doc?.allObjects?.[pageIndex]
   if (!objects) return false
   const objectIndex = objects.findIndex((obj) => obj.id === objectId)
@@ -25,7 +32,11 @@ export function updateObjectInDoc(doc, pageIndex, objectId, payload) {
   return true
 }
 
-export function removeObjectFromDoc(doc, pageIndex, objectId) {
+export function removeObjectFromDoc(
+  doc: PDFDocumentEntry | undefined,
+  pageIndex: number,
+  objectId: string
+) {
   const objects = doc?.allObjects?.[pageIndex]
   if (!objects) return false
   const objectIndex = objects.findIndex((obj) => obj.id === objectId)
diff --git a/src/utils/pageBounds.js b/src/utils/pageBounds.ts
similarity index 59%
rename from src/utils/pageBounds.js
rename to src/utils/pageBounds.ts
index eec203c..e6ffc1c 100644
--- a/src/utils/pageBounds.js
+++ b/src/utils/pageBounds.ts
@@ -1,13 +1,13 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function getViewportWindow(scrollTop, viewHeight, margin = 300) {
+export function getViewportWindow(scrollTop: number, viewHeight: number, margin = 300) {
   return {
     minY: Math.max(0, scrollTop - margin),
     maxY: scrollTop + viewHeight + margin,
   }
 }
 
-export function isPageInViewport(offsetTop, offsetHeight, minY, maxY) {
+export function isPageInViewport(offsetTop: number, offsetHeight: number, minY: number, maxY: number) {
   return !(offsetTop + offsetHeight < minY || offsetTop > maxY)
 }
diff --git a/src/utils/zoom.js b/src/utils/zoom.ts
similarity index 60%
rename from src/utils/zoom.js
rename to src/utils/zoom.ts
index f856fb8..0e1a848 100644
--- a/src/utils/zoom.js
+++ b/src/utils/zoom.ts
@@ -1,7 +1,9 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function applyScaleToDocs(docs, scale) {
+import type { PDFDocumentEntry } from '../types'
+
+export function applyScaleToDocs(docs: PDFDocumentEntry[], scale: number) {
   docs.forEach((doc) => {
     doc.pagesScale = doc.pagesScale.map(() => scale)
   })
diff --git a/tests/components/DraggableElement.spec.ts b/tests/components/DraggableElement.spec.ts
new file mode 100644
index 0000000..69e7285
--- /dev/null
+++ b/tests/components/DraggableElement.spec.ts
@@ -0,0 +1,359 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DraggableElement from '../../src/components/DraggableElement.vue'
+
+const baseObject = { id: 'a', x: 10, y: 10, width: 20, height: 20 }
+
+const mountElement = (props = {}) => {
+  return mount(DraggableElement, {
+    props: {
+      object: baseObject,
+      pageWidth: 100,
+      pageHeight: 100,
+      ...props,
+    },
+  })
+}
+
+describe('DraggableElement business rules', () => {
+  it('does not select when readOnly', async () => {
+    const wrapper = mountElement({ readOnly: true })
+    await wrapper.find('.draggable-element').trigger('mousedown', {
+      clientX: 5,
+      clientY: 5,
+    })
+    expect(wrapper.vm.isSelected).toBe(false)
+  })
+
+  it('selects element and notifies drag start', async () => {
+    const onDragStart = vi.fn()
+    const wrapper = mountElement({ onDragStart })
+    const element = wrapper.find('.draggable-element').element as HTMLElement
+    element.getBoundingClientRect = () => ({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: 20,
+      bottom: 20,
+      width: 20,
+      height: 20,
+      toJSON: () => ({}),
+    })
+
+    await wrapper.find('.draggable-element').trigger('mousedown', {
+      clientX: 12,
+      clientY: 14,
+    })
+
+    expect(wrapper.vm.isSelected).toBe(true)
+    expect(onDragStart).toHaveBeenCalled()
+    const args = onDragStart.mock.calls[0]
+    expect(args[0]).toBe(12)
+    expect(args[1]).toBe(14)
+    expect(args[2]).toEqual({ x: 12, y: 14 })
+    expect(args[3]).toEqual({ x: 0, y: 0 })
+  })
+
+  it('ignores click on action toolbar', () => {
+    const wrapper = mountElement()
+    const toolbar = document.createElement('div')
+    toolbar.className = 'actions-toolbar'
+
+    wrapper.vm.handleElementClick({
+      preventDefault: () => {},
+      target: toolbar,
+    })
+
+    expect(wrapper.vm.isSelected).toBe(false)
+  })
+
+  it('clamps drag updates within page bounds', () => {
+    const onUpdate = vi.fn()
+    const wrapper = mountElement({
+      object: { id: 'a', x: 70, y: 70, width: 40, height: 40 },
+      onUpdate,
+    })
+
+    wrapper.vm.mode = 'drag'
+    wrapper.vm.offsetX = 20
+    wrapper.vm.offsetY = 10
+
+    wrapper.vm.stopInteraction()
+
+    expect(onUpdate).toHaveBeenCalledWith({ x: 60, y: 60 })
+  })
+
+  it('emits global drag update on stop when dragging globally', () => {
+    const onUpdate = vi.fn()
+    const wrapper = mountElement({ onUpdate, isBeingDraggedGlobally: true })
+
+    wrapper.vm.mode = 'drag'
+    wrapper.vm.offsetX = 5
+    wrapper.vm.offsetY = 5
+    wrapper.vm.lastMouseX = 120
+    wrapper.vm.lastMouseY = 140
+
+    wrapper.vm.stopInteraction()
+
+    expect(onUpdate).toHaveBeenCalledWith({
+      _globalDrag: true,
+      _mouseX: 120,
+      _mouseY: 140,
+    })
+  })
+
+  it('calls onDragMove while dragging', () => {
+    const onDragMove = vi.fn()
+    const wrapper = mountElement({ onDragMove })
+    wrapper.vm.mode = 'drag'
+    wrapper.vm.startX = 0
+    wrapper.vm.startY = 0
+
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0)
+      return 1
+    })
+
+    wrapper.vm.handleMove({
+      type: 'mousemove',
+      clientX: 10,
+      clientY: 20,
+      preventDefault: () => {},
+    })
+
+    expect(onDragMove).toHaveBeenCalledWith(10, 20)
+
+    rafSpy.mockRestore()
+  })
+
+  it('applies resize updates', () => {
+    const onUpdate = vi.fn()
+    const wrapper = mountElement({ onUpdate })
+
+    wrapper.vm.mode = 'resize'
+    wrapper.vm.resizeOffsetX = -10
+    wrapper.vm.resizeOffsetY = -10
+    wrapper.vm.resizeOffsetW = 5
+    wrapper.vm.resizeOffsetH = 5
+
+    wrapper.vm.stopInteraction()
+
+    expect(onUpdate).toHaveBeenCalledWith({ x: 0, y: 0, width: 25, height: 25 })
+  })
+
+  it('does not emit update when idle', () => {
+    const onUpdate = vi.fn()
+    const wrapper = mountElement({ onUpdate })
+
+    wrapper.vm.mode = 'idle'
+    wrapper.vm.stopInteraction()
+
+    expect(onUpdate).not.toHaveBeenCalled()
+  })
+
+  it('resets offsets after interaction', () => {
+    const wrapper = mountElement()
+    wrapper.vm.mode = 'drag'
+    wrapper.vm.offsetX = 5
+    wrapper.vm.offsetY = 6
+
+    wrapper.vm.stopInteraction()
+
+    expect(wrapper.vm.mode).toBe('idle')
+    expect(wrapper.vm.offsetX).toBe(0)
+    expect(wrapper.vm.offsetY).toBe(0)
+  })
+
+  it('always calls onDragEnd when stopping interaction', () => {
+    const onDragEnd = vi.fn()
+    const wrapper = mountElement({ onDragEnd })
+    wrapper.vm.mode = 'drag'
+    wrapper.vm.offsetX = 1
+    wrapper.vm.offsetY = 2
+
+    wrapper.vm.stopInteraction()
+
+    expect(onDragEnd).toHaveBeenCalled()
+  })
+
+  it('deselects on outside click unless ignored', () => {
+    const wrapper = mountElement()
+    wrapper.vm.isSelected = true
+
+    const outside = document.createElement('div')
+    document.body.appendChild(outside)
+    wrapper.vm.handleClickOutside({ target: outside })
+
+    expect(wrapper.vm.isSelected).toBe(false)
+
+    const wrapperIgnored = mountElement({ ignoreClickOutsideSelectors: ['.keep-selected'] })
+    wrapperIgnored.vm.isSelected = true
+    const keep = document.createElement('div')
+    keep.className = 'keep-selected'
+    document.body.appendChild(keep)
+
+    wrapperIgnored.vm.handleClickOutside({ target: keep })
+    expect(wrapperIgnored.vm.isSelected).toBe(true)
+
+    keep.remove()
+    outside.remove()
+  })
+
+  it('keeps selection on ignored selector via DOM event', async () => {
+    const wrapper = mountElement({ ignoreClickOutsideSelectors: ['.keep'] })
+    wrapper.vm.isSelected = true
+
+    const keep = document.createElement('div')
+    keep.className = 'keep'
+    document.body.appendChild(keep)
+
+    keep.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isSelected).toBe(true)
+
+    keep.remove()
+  })
+
+  it('keeps resize above minimum size', () => {
+    const wrapper = mountElement({
+      object: { id: 'a', x: 0, y: 0, width: 30, height: 30 },
+      pagesScale: 1,
+    })
+
+    wrapper.vm.mode = 'resize'
+    wrapper.vm.direction = 'top-left'
+    wrapper.vm.startX = 100
+    wrapper.vm.startY = 100
+    wrapper.vm.startLeft = 0
+    wrapper.vm.startTop = 0
+    wrapper.vm.startWidth = 30
+    wrapper.vm.startHeight = 30
+    wrapper.vm.aspectRatio = 1
+
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0)
+      return 1
+    })
+
+    wrapper.vm.handleMove({
+      type: 'mousemove',
+      clientX: 200,
+      clientY: 200,
+      preventDefault: () => {},
+    })
+
+    expect(wrapper.vm.resizeOffsetW).toBeGreaterThanOrEqual(-14)
+    expect(wrapper.vm.resizeOffsetH).toBeGreaterThanOrEqual(-14)
+
+    rafSpy.mockRestore()
+  })
+
+  it('clamps resize within page bounds', () => {
+    const wrapper = mountElement({
+      object: { id: 'a', x: 60, y: 60, width: 30, height: 30 },
+      pagesScale: 1,
+      pageWidth: 100,
+      pageHeight: 100,
+    })
+
+    wrapper.vm.mode = 'resize'
+    wrapper.vm.direction = 'bottom-right'
+    wrapper.vm.startX = 0
+    wrapper.vm.startY = 0
+    wrapper.vm.startLeft = 60
+    wrapper.vm.startTop = 60
+    wrapper.vm.startWidth = 30
+    wrapper.vm.startHeight = 30
+    wrapper.vm.aspectRatio = 1
+
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0)
+      return 1
+    })
+
+    wrapper.vm.handleMove({
+      type: 'mousemove',
+      clientX: 200,
+      clientY: 200,
+      preventDefault: () => {},
+    })
+
+    const newWidth = wrapper.vm.object.width + wrapper.vm.resizeOffsetW
+    const newHeight = wrapper.vm.object.height + wrapper.vm.resizeOffsetH
+
+    expect(newWidth).toBeLessThanOrEqual(40)
+    expect(newHeight).toBeLessThanOrEqual(40)
+
+    rafSpy.mockRestore()
+  })
+
+  it('scales drag delta using pagesScale', () => {
+    const wrapper = mountElement({ pagesScale: 2 })
+    wrapper.vm.mode = 'drag'
+    wrapper.vm.startX = 0
+    wrapper.vm.startY = 0
+
+    const rafSpy = vi.spyOn(globalThis, 'requestAnimationFrame').mockImplementation((cb) => {
+      cb(0)
+      return 1
+    })
+
+    wrapper.vm.handleMove({
+      type: 'mousemove',
+      clientX: 20,
+      clientY: 10,
+      preventDefault: () => {},
+    })
+
+    expect(wrapper.vm.offsetX).toBe(10)
+    expect(wrapper.vm.offsetY).toBe(5)
+
+    rafSpy.mockRestore()
+  })
+
+  it('computes drag offsets using page rect with scaling', async () => {
+    const onDragStart = vi.fn()
+    const wrapper = mountElement({ pagesScale: 2, onDragStart })
+
+    const element = wrapper.find('.draggable-element').element as HTMLElement
+    element.getBoundingClientRect = () => ({
+      x: 20,
+      y: 40,
+      left: 20,
+      top: 40,
+      right: 40,
+      bottom: 60,
+      width: 20,
+      height: 20,
+      toJSON: () => ({}),
+    })
+
+    const wrapperEl = wrapper.find('.draggable-wrapper').element as HTMLElement
+    wrapperEl.closest = () => ({
+      querySelector: () => ({
+        getBoundingClientRect: () => ({ left: 0, top: 0, right: 200, bottom: 200 }),
+      }),
+    }) as any
+
+    await wrapper.find('.draggable-element').trigger('mousedown', {
+      clientX: 30,
+      clientY: 50,
+    })
+
+    expect(onDragStart).toHaveBeenCalled()
+    expect(wrapper.vm.pointerOffsetDoc).toEqual({ x: 10, y: 10 })
+  })
+
+  it('hides toolbar while dragged globally', async () => {
+    const wrapper = mountElement({ isBeingDraggedGlobally: true })
+    wrapper.vm.isSelected = true
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.actions-toolbar').exists()).toBe(false)
+  })
+})
diff --git a/tests/components/PDFElements.spec.ts b/tests/components/PDFElements.spec.ts
new file mode 100644
index 0000000..452b147
--- /dev/null
+++ b/tests/components/PDFElements.spec.ts
@@ -0,0 +1,603 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect, vi } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import PDFElements from '../../src/components/PDFElements.vue'
+
+const makeDoc = () => ({
+  name: 'doc',
+  file: null,
+  pdfDoc: null,
+  numPages: 2,
+  pages: [Promise.resolve(), Promise.resolve()],
+  pageWidths: [100, 200],
+  pagesScale: [1, 1],
+  allObjects: [[], []],
+})
+
+const makeWrapper = () => {
+  const wrapper = shallowMount(PDFElements, {
+    props: {
+      initFiles: [],
+    },
+    global: {
+      stubs: {
+        PDFPage: true,
+        DraggableElement: true,
+      },
+    },
+  })
+
+  const ctx = wrapper.vm as any
+
+  ctx.getPageComponent = vi.fn(() => ({
+    getCanvasMeasurement: () => ({ canvasWidth: 100, canvasHeight: 100 }),
+  }))
+
+  ctx.getPageCanvasElement = vi.fn(() => ({
+    width: 100,
+    height: 100,
+    getBoundingClientRect: () => ({
+      width: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      top: 0,
+      bottom: 100,
+    }),
+  }))
+
+  return { wrapper, ctx }
+}
+
+describe('PDFElements business rules', () => {
+  it('adds object to page with generated id', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    ctx.pdfDocuments = [doc]
+    ctx.selectedDocIndex = 0
+    ctx.selectedPageIndex = 0
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation((docIndex, pageIndex) => {
+      const width = pageIndex === 0 ? 100 : 200
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: width, canvasHeight: 100 }),
+      }
+    })
+
+    const added = ctx.addObjectToPage({
+      x: 10,
+      y: 10,
+      width: 30,
+      height: 40,
+    })
+
+    expect(added).toBe(true)
+    expect(doc.allObjects[0].length).toBe(1)
+    expect(doc.allObjects[0][0].id).toMatch(/^obj-/)
+    expect(ctx.objectIndexCache[`0-${doc.allObjects[0][0].id}`]).toBe(0)
+  })
+
+  it('keeps provided id when unique', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    ctx.pdfDocuments = [doc]
+    ctx.selectedDocIndex = 0
+    ctx.selectedPageIndex = 0
+
+    const added = ctx.addObjectToPage({
+      id: 'custom-id',
+      x: 10,
+      y: 10,
+      width: 30,
+      height: 40,
+    })
+
+    expect(added).toBe(true)
+    expect(doc.allObjects[0][0].id).toBe('custom-id')
+  })
+
+  it('generates a new id when id already exists', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'dup', x: 0, y: 0, width: 10, height: 10 })
+    ctx.pdfDocuments = [doc]
+    ctx.selectedDocIndex = 0
+    ctx.selectedPageIndex = 0
+
+    const added = ctx.addObjectToPage({
+      id: 'dup',
+      x: 10,
+      y: 10,
+      width: 30,
+      height: 40,
+    })
+
+    expect(added).toBe(true)
+    expect(doc.allObjects[0][1].id).not.toBe('dup')
+  })
+
+  it('rejects object outside page bounds', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    ctx.pdfDocuments = [doc]
+    ctx.selectedDocIndex = 0
+    ctx.selectedPageIndex = 0
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation(() => {
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: 100, canvasHeight: 100 }),
+      }
+    })
+
+    const added = ctx.addObjectToPage({
+      x: 90,
+      y: 10,
+      width: 20,
+      height: 20,
+    })
+
+    expect(added).toBe(false)
+    expect(doc.allObjects[0].length).toBe(0)
+  })
+
+  it('moves object to page with max visible area', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 40, height: 40 })
+    ctx.pdfDocuments = [doc]
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation((docIndex, pageIndex) => {
+      const width = pageIndex === 0 ? 100 : 200
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: width, canvasHeight: 100 }),
+      }
+    })
+
+    ctx.updateObject(0, 'a', { x: 150, y: 10 })
+
+    expect(doc.allObjects[0].length).toBe(0)
+    expect(doc.allObjects[1].length).toBe(1)
+    expect(doc.allObjects[1][0].id).toBe('a')
+  })
+
+  it('duplicates object without signer elementId', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({
+      id: 'a',
+      x: 10,
+      y: 10,
+      width: 40,
+      height: 40,
+      signer: {
+        element: {
+          elementId: 'keep-out',
+          name: 'sig',
+        },
+      },
+    })
+    ctx.pdfDocuments = [doc]
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation(() => {
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: 100, canvasHeight: 100 }),
+      }
+    })
+
+    ctx.duplicateObject(0, 'a')
+
+    expect(doc.allObjects[0].length).toBe(2)
+    const duplicated = doc.allObjects[0][1]
+    expect(duplicated.id).not.toBe('a')
+    expect(duplicated.signer.element.elementId).toBeUndefined()
+  })
+
+  it('emits delete-object with doc and page info', () => {
+    const { wrapper, ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[1].push({ id: 'b', x: 10, y: 10, width: 20, height: 20 })
+    ctx.pdfDocuments = [doc]
+
+    ctx.deleteObject(0, 'b')
+
+    const emitted = wrapper.emitted()['pdf-elements:delete-object']
+    expect(emitted?.length).toBe(1)
+    expect(emitted?.[0][0]).toEqual({
+      object: { id: 'b', x: 10, y: 10, width: 20, height: 20 },
+      docIndex: 0,
+      pageIndex: 1,
+    })
+    expect(ctx.objectIndexCache['0-b']).toBeUndefined()
+  })
+
+  it('returns normalized coordinates for all objects', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 20, width: 30, height: 40 })
+    ctx.pdfDocuments = [doc]
+    ctx.selectedDocIndex = 0
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation(() => {
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: 100, canvasHeight: 100 }),
+      }
+    })
+
+    const all = ctx.getAllObjects()
+    expect(all.length).toBe(1)
+    expect(all[0].normalizedCoordinates).toEqual({
+      llx: 10,
+      lly: 80,
+      ury: 40,
+      width: 30,
+      height: 40,
+    })
+  })
+
+  it('moves object to hovered page during drag stop', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 40, height: 40 })
+    ctx.pdfDocuments = [doc]
+    ctx.draggingInitialMouseOffset = { x: 0, y: 0 }
+    ctx.draggingElementShift = { x: 0, y: 0 }
+
+    ctx._pagesBoundingRects = {
+      '0-0': {
+        docIndex: 0,
+        pageIndex: 0,
+        rect: { left: 0, right: 100, top: 0, bottom: 100 },
+      },
+      '0-1': {
+        docIndex: 0,
+        pageIndex: 1,
+        rect: { left: 120, right: 320, top: 0, bottom: 100 },
+      },
+    }
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation((docIndex, pageIndex) => {
+      const width = pageIndex === 0 ? 100 : 200
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: width, canvasHeight: 100 }),
+      }
+    })
+    vi.spyOn(ctx, 'getDisplayedPageScale').mockReturnValue(1)
+
+    const targetPage = ctx.checkAndMoveObjectPage(0, 'a', 140, 20)
+
+    expect(targetPage).toBe(1)
+    expect(doc.allObjects[0].length).toBe(0)
+    expect(doc.allObjects[1].length).toBe(1)
+  })
+
+  it('emits object-click only when hit within bounds', async () => {
+    const { wrapper, ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 20, height: 20 })
+    ctx.pdfDocuments = [doc]
+    await wrapper.setProps({ emitObjectClick: true })
+
+    vi.spyOn(ctx, 'getPageRect').mockReturnValue({
+      left: 0,
+      top: 0,
+      right: 100,
+      bottom: 100,
+      width: 100,
+      height: 100,
+    })
+    vi.spyOn(ctx, 'getDisplayedPageScale').mockReturnValue(1)
+
+    ctx.handleOverlayClick(0, 0, { clientX: 15, clientY: 15 })
+    expect(wrapper.emitted()['pdf-elements:object-click']?.length).toBe(1)
+
+    ctx.handleOverlayClick(0, 0, { clientX: 90, clientY: 90 })
+    expect(wrapper.emitted()['pdf-elements:object-click']?.length).toBe(1)
+  })
+
+  it('finishes adding only when preview is visible and within bounds', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    ctx.pdfDocuments = [doc]
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation(() => {
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: 100, canvasHeight: 100 }),
+      }
+    })
+
+    ctx.isAddingMode = true
+    ctx.previewVisible = true
+    ctx.previewElement = { width: 20, height: 20 }
+    ctx.previewPageDocIndex = 0
+    ctx.previewPageIndex = 0
+    ctx.previewPosition = { x: 10, y: 10 }
+
+    ctx.finishAdding()
+    expect(doc.allObjects[0].length).toBe(1)
+
+    ctx.isAddingMode = true
+    ctx.previewVisible = true
+    ctx.previewElement = { width: 20, height: 20 }
+    ctx.previewPosition = { x: 90, y: 90 }
+
+    ctx.finishAdding()
+    expect(doc.allObjects[0].length).toBe(1)
+  })
+
+  it('cancels adding resets preview state', () => {
+    const { ctx } = makeWrapper()
+    ctx.isAddingMode = true
+    ctx.previewElement = { width: 10, height: 10 }
+    ctx.previewVisible = true
+
+    ctx.cancelAdding()
+
+    expect(ctx.isAddingMode).toBe(false)
+    expect(ctx.previewElement).toBeNull()
+    expect(ctx.previewVisible).toBe(false)
+  })
+
+  it('cancels adding on escape key', () => {
+    const { ctx } = makeWrapper()
+    ctx.isAddingMode = true
+    ctx.previewElement = { width: 10, height: 10 }
+    ctx.previewVisible = true
+
+    ctx.handleKeyDown({ key: 'Escape' })
+
+    expect(ctx.isAddingMode).toBe(false)
+  })
+
+  it('starts adding element and prepares preview state', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    ctx.pdfDocuments = [doc]
+
+    const attachSpy = vi.spyOn(ctx, 'attachAddingListeners')
+
+    ctx.startAddingElement({ width: 10, height: 10 })
+
+    expect(attachSpy).toHaveBeenCalled()
+    expect(ctx.isAddingMode).toBe(true)
+    expect(ctx.previewElement).toEqual({ width: 10, height: 10 })
+    expect(ctx.previewPageDocIndex).toBe(0)
+    expect(ctx.previewPageIndex).toBe(0)
+  })
+
+  it('does not update object when out of bounds on same page', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 30, height: 30 })
+    ctx.pdfDocuments = [doc]
+
+    vi.spyOn(ctx, 'getPageComponent').mockImplementation(() => {
+      return {
+        getCanvasMeasurement: () => ({ canvasWidth: 100, canvasHeight: 100 }),
+      }
+    })
+
+    ctx.updateObject(0, 'a', { x: -5, y: -5 })
+
+    expect(doc.allObjects[0][0].x).toBe(10)
+    expect(doc.allObjects[0][0].y).toBe(10)
+  })
+
+  it('updates object within bounds on same page', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 20, height: 20 })
+    ctx.pdfDocuments = [doc]
+
+    ctx.updateObject(0, 'a', { x: 30, y: 40 })
+
+    expect(doc.allObjects[0][0].x).toBe(30)
+    expect(doc.allObjects[0][0].y).toBe(40)
+  })
+
+  it('updates object position during global drag', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 0, y: 0, width: 20, height: 20 })
+    ctx.pdfDocuments = [doc]
+    ctx.draggingElementShift = { x: 0, y: 0 }
+    ctx.draggingInitialMouseOffset = { x: 0, y: 0 }
+
+    vi.spyOn(ctx, 'getPageRect').mockReturnValue({
+      left: 0,
+      top: 0,
+      right: 100,
+      bottom: 100,
+      width: 100,
+      height: 100,
+    })
+    vi.spyOn(ctx, 'getDisplayedPageScale').mockReturnValue(1)
+
+    ctx.updateObject(0, 'a', {
+      _globalDrag: true,
+      _mouseX: 30,
+      _mouseY: 40,
+    })
+
+    expect(doc.allObjects[0][0].x).toBe(30)
+    expect(doc.allObjects[0][0].y).toBe(40)
+  })
+
+  it('keeps object on same page when dragged within page bounds', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 20, height: 20 })
+    ctx.pdfDocuments = [doc]
+    ctx.draggingInitialMouseOffset = { x: 0, y: 0 }
+    ctx.draggingElementShift = { x: 0, y: 0 }
+
+    ctx._pagesBoundingRects = {
+      '0-0': {
+        docIndex: 0,
+        pageIndex: 0,
+        rect: { left: 0, right: 100, top: 0, bottom: 100 },
+      },
+    }
+
+    vi.spyOn(ctx, 'getDisplayedPageScale').mockReturnValue(1)
+
+    const targetPage = ctx.checkAndMoveObjectPage(0, 'a', 30, 30)
+
+    expect(targetPage).toBe(0)
+    expect(doc.allObjects[0][0].x).toBe(30)
+    expect(doc.allObjects[0][0].y).toBe(30)
+  })
+
+  it('clamps moved object when changing pages', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.allObjects[0].push({ id: 'a', x: 10, y: 10, width: 50, height: 50 })
+    ctx.pdfDocuments = [doc]
+    ctx.draggingInitialMouseOffset = { x: 0, y: 0 }
+    ctx.draggingElementShift = { x: 0, y: 0 }
+
+    ctx._pagesBoundingRects = {
+      '0-1': {
+        docIndex: 0,
+        pageIndex: 1,
+        rect: { left: 0, right: 80, top: 0, bottom: 80 },
+      },
+    }
+
+    vi.spyOn(ctx, 'getDisplayedPageScale').mockReturnValue(1)
+
+    const targetPage = ctx.checkAndMoveObjectPage(0, 'a', 70, 70)
+
+    expect(targetPage).toBe(1)
+    expect(doc.allObjects[1][0].x).toBe(50)
+    expect(doc.allObjects[1][0].y).toBe(50)
+  })
+
+  it('formats page numbers using format string', async () => {
+    const { wrapper, ctx } = makeWrapper()
+    await wrapper.setProps({ pageCountFormat: 'Page {currentPage} / {totalPages}' })
+
+    const label = ctx.formatPageNumber(2, 5)
+
+    expect(label).toBe('Page 2 / 5')
+  })
+
+  it('calculates optimal scale based on container width', () => {
+    const { wrapper, ctx } = makeWrapper()
+    Object.defineProperty(wrapper.element, 'clientWidth', {
+      value: 500,
+      configurable: true,
+    })
+
+    const scale = ctx.calculateOptimalScale(400)
+
+    expect(scale).toBeCloseTo((500 - 40) / 400)
+  })
+
+  it('adjusts zoom to fit and updates scales', async () => {
+    const { wrapper, ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.pageWidths = [100, 200]
+    ctx.pdfDocuments = [doc]
+    await wrapper.setProps({ autoFitZoom: true })
+    ctx.scale = 1
+    ctx.visualScale = 1
+
+    Object.defineProperty(wrapper.element, 'clientWidth', {
+      value: 500,
+      configurable: true,
+    })
+
+    ctx.adjustZoomToFit()
+
+    expect(ctx.autoFitApplied).toBe(true)
+    expect(ctx.scale).toBe(2)
+    expect(ctx.visualScale).toBe(2)
+    expect(ctx.pdfDocuments[0].pagesScale).toEqual([2, 2])
+  })
+
+  it('commits zoom and applies scale to documents', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    ctx.pdfDocuments = [doc]
+    ctx.visualScale = 1.6
+
+    ctx.commitZoom()
+
+    expect(ctx.scale).toBe(1.6)
+    expect(ctx.pdfDocuments[0].pagesScale).toEqual([1.6, 1.6])
+  })
+
+  it('does not schedule auto-fit twice', () => {
+    const { ctx } = makeWrapper()
+    ctx.autoFitApplied = false
+    ctx.zoomRafId = 123
+
+    ctx.scheduleAutoFitZoom()
+
+    expect(ctx.zoomRafId).toBe(123)
+  })
+
+  it('schedules auto-fit when page widths are missing', async () => {
+    const { wrapper, ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.pageWidths = [0, 0]
+    ctx.pdfDocuments = [doc]
+    await wrapper.setProps({ autoFitZoom: true })
+
+    Object.defineProperty(wrapper.element, 'clientWidth', {
+      value: 440,
+      configurable: true,
+    })
+
+    const scheduleSpy = vi.spyOn(ctx, 'scheduleAutoFitZoom')
+
+    ctx.adjustZoomToFit()
+
+    expect(scheduleSpy).toHaveBeenCalled()
+    expect(ctx.autoFitApplied).toBe(false)
+  })
+
+  it('uses displayed scale based on visual scale factor', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.pageWidths = [100, 100]
+    doc.pagesScale = [1, 1]
+    ctx.pdfDocuments = [doc]
+    ctx.scale = 1
+    ctx.visualScale = 1.5
+
+    ctx.getPageCanvasElement = vi.fn(() => ({
+      width: 0,
+      height: 0,
+      getBoundingClientRect: () => ({
+        width: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+      }),
+    }))
+
+    const scale = ctx.getDisplayedPageScale(0, 0)
+
+    expect(scale).toBe(1.5)
+  })
+
+  it('prefers per-page scale when no rect width is available', () => {
+    const { ctx } = makeWrapper()
+    const doc = makeDoc()
+    doc.pagesScale = [1.2, 1.4]
+    ctx.pdfDocuments = [doc]
+    ctx.scale = 1
+    ctx.visualScale = 1
+
+    ctx.getPageCanvasElement = vi.fn(() => null)
+
+    const scale = ctx.getDisplayedPageScale(0, 1)
+
+    expect(scale).toBe(1.4)
+  })
+})
diff --git a/tests/components/PDFPage.spec.ts b/tests/components/PDFPage.spec.ts
new file mode 100644
index 0000000..2e1fab8
--- /dev/null
+++ b/tests/components/PDFPage.spec.ts
@@ -0,0 +1,137 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import PDFPage from '../../src/components/PDFPage.vue'
+
+const makePage = () => {
+  return {
+    getViewport: ({ scale }: { scale: number }) => ({
+      width: 100 * scale,
+      height: 200 * scale,
+    }),
+    render: vi.fn(() => ({
+      promise: Promise.resolve(),
+      cancel: vi.fn(),
+    })),
+  }
+}
+
+describe('PDFPage business rules', () => {
+  it('renders canvas and emits measurement', async () => {
+    ;(HTMLCanvasElement.prototype as any).getContext = vi.fn(() => ({}))
+    const page = makePage()
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(page),
+        scale: 2,
+      },
+    })
+
+    await flushPromises()
+
+    const canvas = wrapper.find('canvas').element as HTMLCanvasElement
+    expect(canvas.width).toBe(200)
+    expect(canvas.height).toBe(400)
+    expect(wrapper.emitted('onMeasure')?.[0][0]).toEqual({ scale: 2 })
+  })
+
+  it('reports current canvas measurement', async () => {
+    ;(HTMLCanvasElement.prototype as any).getContext = vi.fn(() => ({}))
+    const page = makePage()
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(page),
+        scale: 1,
+      },
+    })
+
+    await flushPromises()
+
+    const measurement = wrapper.vm.getCanvasMeasurement()
+    expect(measurement).toEqual({ canvasWidth: 100, canvasHeight: 200 })
+  })
+
+  it('re-renders when scale changes', async () => {
+    ;(HTMLCanvasElement.prototype as any).getContext = vi.fn(() => ({}))
+    const page = makePage()
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(page),
+        scale: 1,
+      },
+    })
+
+    const renderSpy = vi.spyOn(wrapper.vm, 'render')
+    renderSpy.mockClear()
+
+    await wrapper.setProps({ scale: 1.5 })
+
+    expect(renderSpy).toHaveBeenCalled()
+  })
+
+  it('sets pending render when already rendering', async () => {
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(makePage()),
+      },
+    })
+
+    wrapper.vm.isRendering = true
+    await wrapper.vm.render()
+
+    expect(wrapper.vm.pendingRender).toBe(true)
+  })
+
+  it('executes a follow-up render when pending', async () => {
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(makePage()),
+      },
+    })
+
+    wrapper.vm.isRendering = true
+    wrapper.vm.pendingRender = true
+
+    const renderSpy = vi.spyOn(wrapper.vm, 'render')
+    renderSpy.mockClear()
+
+    wrapper.vm.isRendering = false
+    wrapper.vm.pendingRender = true
+    await wrapper.vm.render()
+
+    expect(renderSpy).toHaveBeenCalled()
+  })
+
+  it('cancels previous render task before starting a new one', async () => {
+    ;(HTMLCanvasElement.prototype as any).getContext = vi.fn(() => ({}))
+    const page = makePage()
+    const cancel = vi.fn()
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(page),
+      },
+    })
+
+    wrapper.vm.renderTask = { cancel }
+
+    await wrapper.vm.render()
+
+    expect(cancel).toHaveBeenCalled()
+  })
+
+  it('cancels pending render task on unmount', () => {
+    const wrapper = mount(PDFPage, {
+      props: {
+        page: Promise.resolve(makePage()),
+      },
+    })
+
+    const cancel = vi.fn()
+    wrapper.vm.renderTask = { cancel }
+    wrapper.unmount()
+
+    expect(cancel).toHaveBeenCalled()
+  })
+})
diff --git a/tests/utils/geometry.spec.ts b/tests/utils/geometry.spec.ts
new file mode 100644
index 0000000..cbbe6e6
--- /dev/null
+++ b/tests/utils/geometry.spec.ts
@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect } from 'vitest'
+import { clampPosition, getVisibleArea } from '../../src/utils/geometry'
+
+describe('geometry', () => {
+  it('clamps position within bounds', () => {
+    const result = clampPosition(-10, 200, 50, 60, 300, 180)
+    expect(result).toEqual({ x: 0, y: 120 })
+  })
+
+  it('calculates visible area for overlapping rectangle', () => {
+    const area = getVisibleArea(-10, -10, 40, 50, 100, 100)
+    expect(area).toBe(30 * 40)
+  })
+
+  it('returns zero when fully outside', () => {
+    const area = getVisibleArea(120, 120, 30, 30, 100, 100)
+    expect(area).toBe(0)
+  })
+})
diff --git a/tests/utils/measurements.spec.ts b/tests/utils/measurements.spec.ts
new file mode 100644
index 0000000..c3208ad
--- /dev/null
+++ b/tests/utils/measurements.spec.ts
@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect } from 'vitest'
+import { getCachedMeasurement } from '../../src/utils/measurements'
+
+describe('measurements', () => {
+  it('caches and normalizes canvas measurements', () => {
+    const cache: Record<string, { width: number; height: number }> = {}
+    const pageRef = {
+      getCanvasMeasurement: () => ({
+        canvasWidth: 200,
+        canvasHeight: 300,
+      }),
+    }
+
+    const result = getCachedMeasurement(cache, 'page-1', pageRef, 2)
+    expect(result).toEqual({ width: 100, height: 150 })
+    expect(cache['page-1']).toEqual({ width: 100, height: 150 })
+  })
+
+  it('returns cached value on subsequent calls', () => {
+    const cache: Record<string, { width: number; height: number }> = {
+      cached: { width: 50, height: 60 },
+    }
+    const pageRef = {
+      getCanvasMeasurement: () => ({
+        canvasWidth: 200,
+        canvasHeight: 300,
+      }),
+    }
+
+    const result = getCachedMeasurement(cache, 'cached', pageRef, 2)
+    expect(result).toEqual({ width: 50, height: 60 })
+  })
+})
diff --git a/tests/utils/objectStore.spec.ts b/tests/utils/objectStore.spec.ts
new file mode 100644
index 0000000..40ee195
--- /dev/null
+++ b/tests/utils/objectStore.spec.ts
@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect } from 'vitest'
+import {
+  objectIdExistsInDoc,
+  findObjectPageIndex,
+  updateObjectInDoc,
+  removeObjectFromDoc,
+} from '../../src/utils/objectStore'
+
+const makeDoc = () => ({
+  name: 'doc',
+  file: null,
+  pdfDoc: null,
+  numPages: 2,
+  pages: [Promise.resolve(), Promise.resolve()],
+  pageWidths: [100, 100],
+  pagesScale: [1, 1],
+  allObjects: [
+    [{ id: 'a', x: 0, y: 0, width: 10, height: 10 }],
+    [{ id: 'b', x: 5, y: 5, width: 20, height: 20 }],
+  ],
+})
+
+describe('objectStore', () => {
+  it('checks if object id exists', () => {
+    const doc = makeDoc()
+    expect(objectIdExistsInDoc(doc, 'a')).toBe(true)
+    expect(objectIdExistsInDoc(doc, 'missing')).toBe(false)
+  })
+
+  it('finds object page index', () => {
+    const doc = makeDoc()
+    expect(findObjectPageIndex(doc, 'b')).toBe(1)
+    expect(findObjectPageIndex(doc, 'missing')).toBeUndefined()
+  })
+
+  it('updates object in doc', () => {
+    const doc = makeDoc()
+    const updated = updateObjectInDoc(doc, 0, 'a', { x: 12 })
+    expect(updated).toBe(true)
+    expect(doc.allObjects[0][0].x).toBe(12)
+  })
+
+  it('removes object from doc', () => {
+    const doc = makeDoc()
+    const removed = removeObjectFromDoc(doc, 1, 'b')
+    expect(removed).toBe(true)
+    expect(doc.allObjects[1].length).toBe(0)
+  })
+})
diff --git a/tests/utils/pageBounds.spec.ts b/tests/utils/pageBounds.spec.ts
new file mode 100644
index 0000000..6f94a62
--- /dev/null
+++ b/tests/utils/pageBounds.spec.ts
@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect } from 'vitest'
+import { getViewportWindow, isPageInViewport } from '../../src/utils/pageBounds'
+
+describe('pageBounds', () => {
+  it('computes viewport window with margin', () => {
+    const { minY, maxY } = getViewportWindow(200, 300, 50)
+    expect(minY).toBe(150)
+    expect(maxY).toBe(550)
+  })
+
+  it('checks if page is in viewport', () => {
+    expect(isPageInViewport(100, 200, 0, 250)).toBe(true)
+    expect(isPageInViewport(400, 50, 0, 300)).toBe(false)
+  })
+})
diff --git a/tests/utils/zoom.spec.ts b/tests/utils/zoom.spec.ts
new file mode 100644
index 0000000..1fa2f04
--- /dev/null
+++ b/tests/utils/zoom.spec.ts
@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { describe, it, expect } from 'vitest'
+import { applyScaleToDocs } from '../../src/utils/zoom'
+
+const makeDoc = () => ({
+  name: 'doc',
+  file: null,
+  pdfDoc: null,
+  numPages: 2,
+  pages: [Promise.resolve(), Promise.resolve()],
+  pageWidths: [100, 100],
+  pagesScale: [1, 2],
+  allObjects: [[], []],
+})
+
+describe('zoom', () => {
+  it('applies scale to all document pages', () => {
+    const docs = [makeDoc(), makeDoc()]
+    applyScaleToDocs(docs, 1.5)
+    expect(docs[0].pagesScale).toEqual([1.5, 1.5])
+    expect(docs[1].pagesScale).toEqual([1.5, 1.5])
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..7f3dc82
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "preserve",
+    "strict": false,
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "types": ["vite/client", "vitest/globals"]
+  },
+  "include": ["env.d.ts", "src", "examples", "tests"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..81dfc3d
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,65 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig(async ({ command, mode }) => {
+  const isDemo = command === 'serve' || mode === 'demo'
+  const plugins = [vue()]
+
+  if (!isDemo) {
+    plugins.push(
+      dts({
+        entryRoot: 'src',
+        outDir: 'dist',
+        insertTypesEntry: true,
+        include: ['src'],
+        exclude: ['examples', 'tests'],
+      })
+    )
+  }
+
+  if (mode === 'report') {
+    const { visualizer } = await import('rollup-plugin-visualizer')
+    plugins.push(
+      visualizer({
+        filename: 'dist/bundle-report.html',
+        gzipSize: true,
+        brotliSize: true,
+        open: false,
+      })
+    )
+  }
+
+  return {
+    root: isDemo ? 'examples' : undefined,
+    server: {
+      host: '0.0.0.0',
+    },
+    plugins,
+    build: isDemo
+      ? {
+          outDir: path.resolve(__dirname, 'dist-demo'),
+          emptyOutDir: true,
+        }
+      : {
+          lib: {
+            entry: path.resolve(__dirname, 'src/index.ts'),
+            name: 'PDFElements',
+            formats: ['es'],
+            fileName: 'index',
+          },
+          rollupOptions: {
+            external: ['vue'],
+            output: {
+              globals: {
+                vue: 'Vue',
+              },
+            },
+          },
+        },
+  }
+})
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..e361d00
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: 'happy-dom',
+    include: ['tests/**/*.spec.ts'],
+  },
+})
diff --git a/vue.config.js b/vue.config.js
deleted file mode 100644
index 528658b..0000000
--- a/vue.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-module.exports = {
-  publicPath: process.env.PUBLIC_PATH || '/',
-  pages: {
-    index: {
-      entry: 'examples/main.js',
-      template: 'examples/index.html',
-      filename: 'index.html',
-    },
-  },
-  configureWebpack: {
-    output: {
-      libraryExport: 'default',
-    },
-    module: {
-      rules: [
-        {
-          test: /pdf\.worker(\.min)?\.mjs$/,
-          type: 'asset/resource',
-          generator: {
-            filename: '[name][ext]',
-          },
-        },
-      ],
-    },
-  },
-}