Fix migration

Merge branch 'dev' into feature/ocr-templates
sonar
2026-11-14 10:02:45 +00:00 · 2026-11-13 09:20:47 -08:00 · 2026-11-13 09:09:39 -08:00 · 2026-11-09 09:32:40 -08:00 · 2026-11-09 09:21:47 -08:00 · 2026-11-09 09:19:30 -08:00
174 changed files with 46663 additions and 47472 deletions
@@ -288,12 +288,6 @@ The API supports various bulk-editing operations which are executed asynchronous
 For bulk operations on documents, use the endpoint `/api/documents/bulk_edit/` which accepts
 a json payload of the format:

-Document bulk operations, including the dedicated document action endpoints, return
-`{"result":"OK","task_id":"…"}` when queued. Use `/api/tasks/?task_id={uuid}`
-to check the task outcome. Actions that create or reprocess files may start further
-consumption or reprocessing tasks and completion of the bulk task means those tasks
-were scheduled, not that their file processing has finished.
-
 ```json
 {
  "documents": [LIST_OF_DOCUMENT_IDS],
@@ -109,7 +109,7 @@ Think of versions as **file history** for a document.
 Paperless-ngx includes management lists for tags, correspondents, document types
 and more. These areas allow you to view, add, edit, delete and manage permissions
 for these objects. You can also manage saved views, mail accounts, mail rules,
-workflows and more from the management sections.
+workflows, [OCR templates](#ocr-templates) and more from the management sections.

 ### Nested Tags

@@ -587,10 +587,9 @@ documents from the web UI:
 - From the document list, select one or more documents and choose **Run workflow** from the "Actions" menu.
 - From an individual document, choose **Run workflow** from the "Actions" menu.

-You will be asked which workflow to run. From the document list, the workflow's trigger filters apply by default, so
-documents that do not match are skipped. You can choose to **run on all selected documents** to ignore the filters.
-From an individual document, the option to ignore trigger filters is selected by default. Clear it to run the workflow
-only if the document matches its trigger filters.
+You will be asked which workflow to run. By default the workflow's trigger filters still apply, so documents that do
+not match are skipped. You can instead choose to **run on all selected documents**, which ignores the trigger filters
+and runs the workflow's actions on every selected document.

 Manual runs happen in the background. As with scheduled workflows, the document list is not refreshed automatically when
 they finish, so you may need to reload the list to see the results.
@@ -821,6 +820,87 @@ The following custom field types are supported:
 - `Document Link`: reference(s) to other document(s) displayed as links, automatically creates a symmetrical link in reverse
 - `Select`: a pre-defined list of strings from which the user can choose

+## OCR Templates {#ocr-templates}
+
+OCR templates read text from fixed areas ("zones") of a document and write it to a
+[custom field](#custom-fields), or to the document's title, archive serial number or created date. They are
+useful for documents that always share the same layout, such as bills from a particular utility. They allow you
+to draw a zone around the account number once, and every new bill gets its account number filled in.
+
+Like tags or document types, each template has a [matching algorithm](advanced_usage.md#matching) that
+decides which documents it automatically applies to (or not), based on their content.
+
+### Creating a template
+
+1. Open **OCR Templates** under "Manage" and choose **Add Template**.
+2. Give the template a name and set up its matching, for example **Any word** with the utility's name. Choose
+   **None** for a template that should only ever be run manually.
+3. Search for a sample document with the layout the template is for. Its pages are shown next to the template
+   settings.
+4. Draw zones on the document. Click a zone to select and edit it.
+5. Choose the field each zone fills.
+6. Use **Test** to run OCR on the selected zone of the sample document and see the text it finds and the value
+   that would be written.
+
+Zones are positioned relative to the sample document's page, so templates work best when the documents they
+match have an identical layout. Keep the matching specific enough that it only catches documents with that
+layout.
+
+### Zone settings
+
+- **Page**: the page the zone is on. Turn on **Last page** for zones that are always on the final page,
+  regardless of how many pages a document has.
+- **OCR language**: the Tesseract languages used to read the zone. Languages other than the defaults must be
+  installed, see [`PAPERLESS_OCR_LANGUAGES`](configuration.md#PAPERLESS_OCR_LANGUAGES).
+- **Transform**: post-processing applied to the text, such as stripping whitespace, keeping only numbers,
+  parsing a date or reading a QR code or barcode instead of text.
+- **Date format**: for the "Parse date" transform, the format of the date using
+  [Python date codes](https://docs.python.org/3/library/datetime.html#format-codes), e.g. `%d.%m.%Y`.
+  Leave it empty to detect the format automatically.
+- **Validation regex**: a regular expression the whole value must match. Values that do not match are not
+  written.
+
+Zones can fill custom fields of type text, long text, URL, date, integer, number, monetary or boolean.
+Document link and select fields are not supported.
+
+### Combining zones
+
+When several zones fill the same field, a **Combined value** setting appears for that field. Use it to arrange
+the zones' values with `{Zone name}` tokens and any text in between, for example `{Start} - {End}`. If it
+is left empty, the values are joined with spaces in zone order.
+
+### When templates run
+
+When a document is added, every enabled template that matches its content runs automatically. A template is
+only used for a document if the document's owner can view the template, so users' templates apply to their own
+documents, and unowned templates apply to everyone's. Templates run in name order, so if two templates fill the
+same field, the later one wins.
+
+Turn off **Enabled** to pause a template without deleting it. Disabled templates never run automatically, but
+can still be run manually.
+
+### Running templates manually
+
+To run templates on documents that are already in Paperless-ngx, open the **Actions** menu on the document
+details page:
+
+- **Run Zone OCR** runs every enabled template that matches the document.
+- The button next to it opens a dialog where you can choose one template to run
+  instead. A template you choose runs even if it does not match the document or is disabled.
+
+Both actions use the file version selected in document details. The latest version is selected by default.
+Extracted values update the document's metadata, which is shared across its versions.
+
+The bulk editor's **Run Zone OCR** action opens the same dialog for the selected documents. Bulk runs use
+the latest version of each document and are processed in the background.
+
+!!! warning
+
+    Zone OCR overwrites the fields it fills. A zone that finds no value leaves its field unchanged.
+
+Managing OCR templates requires the OCR template permissions. Running zone OCR on documents requires
+permission to change them, and choosing a template requires permission to view it.
+
 ## PDF Actions

 Paperless-ngx supports basic editing operations for PDFs (these operations currently cannot be performed on non-PDF files). When viewing an individual document you can
@@ -1366,7 +1366,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1973</context>
+          <context context-type="linenumber">1971</context>
        </context-group>
      </trans-unit>
      <trans-unit id="1577733187050997705" datatype="html">
@@ -3282,10 +3282,6 @@
          <context context-type="sourcefile">src/app/components/common/input/permissions/permissions-form/permissions-form.component.html</context>
          <context context-type="linenumber">55,56</context>
        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">25,26</context>
-        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html</context>
          <context context-type="linenumber">31,32</context>
@@ -3420,7 +3416,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1974</context>
+          <context context-type="linenumber">1972</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -4339,7 +4335,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2027</context>
+          <context context-type="linenumber">2025</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6661109599266152398" datatype="html">
@@ -4350,7 +4346,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2028</context>
+          <context context-type="linenumber">2026</context>
        </context-group>
      </trans-unit>
      <trans-unit id="5162686434580248853" datatype="html">
@@ -4361,7 +4357,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2029</context>
+          <context context-type="linenumber">2027</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6665634854532231106" datatype="html">
@@ -4413,32 +4409,18 @@
          <context context-type="linenumber">13,14</context>
        </context-group>
      </trans-unit>
-      <trans-unit id="261810320774538615" datatype="html">
-        <source>Run on this document regardless of trigger filters</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/common/confirm-dialog/run-workflow-confirm-dialog/run-workflow-confirm-dialog.component.html</context>
-          <context context-type="linenumber">22,23</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="2322522720854680528" datatype="html">
-        <source>Ignore the workflow&apos;s trigger filters for this document.</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/common/confirm-dialog/run-workflow-confirm-dialog/run-workflow-confirm-dialog.component.html</context>
-          <context context-type="linenumber">23,24</context>
-        </context-group>
-      </trans-unit>
      <trans-unit id="4512110365422311821" datatype="html">
        <source>Run on all selected documents</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/common/confirm-dialog/run-workflow-confirm-dialog/run-workflow-confirm-dialog.component.html</context>
-          <context context-type="linenumber">25,26</context>
+          <context context-type="linenumber">21,22</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6575910678008555513" datatype="html">
        <source>Ignore the workflow&apos;s trigger filters and run on every selected document.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/common/confirm-dialog/run-workflow-confirm-dialog/run-workflow-confirm-dialog.component.html</context>
-          <context context-type="linenumber">26,27</context>
+          <context context-type="linenumber">22,23</context>
        </context-group>
      </trans-unit>
      <trans-unit id="2509141182388535183" datatype="html">
@@ -5781,10 +5763,6 @@
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
          <context context-type="linenumber">358,359</context>
        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">27,28</context>
-        </context-group>
      </trans-unit>
      <trans-unit id="8057014866157903311" datatype="html">
        <source>Path test failed</source>
@@ -9318,7 +9296,7 @@
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1609</context>
+          <context context-type="linenumber">1607</context>
        </context-group>
      </trans-unit>
      <trans-unit id="838042392151392247" datatype="html">
@@ -9343,81 +9321,81 @@
        <source>Workflow will run on &quot;<x id="PH" equiv-text="this.document().title"/>&quot; in the background.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1602</context>
+          <context context-type="linenumber">1600</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6030453331794586802" datatype="html">
        <source>Error downloading document</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1673</context>
+          <context context-type="linenumber">1671</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4458954481601077369" datatype="html">
        <source>Page Fit</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1751</context>
+          <context context-type="linenumber">1749</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4663705961777238777" datatype="html">
        <source>PDF edit operation for &quot;<x id="PH" equiv-text="this.document().title"/>&quot; will begin in the background.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1994</context>
+          <context context-type="linenumber">1992</context>
        </context-group>
      </trans-unit>
      <trans-unit id="9043972994040261999" datatype="html">
        <source>Error executing PDF edit operation</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2006</context>
+          <context context-type="linenumber">2004</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6172690334763056188" datatype="html">
        <source>Please enter the current password before attempting to remove it.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2017</context>
+          <context context-type="linenumber">2015</context>
        </context-group>
      </trans-unit>
      <trans-unit id="968660764814228922" datatype="html">
        <source>Password removal operation for &quot;<x id="PH" equiv-text="this.document().title"/>&quot; will begin in the background.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2051</context>
+          <context context-type="linenumber">2049</context>
        </context-group>
      </trans-unit>
      <trans-unit id="2282118435712883014" datatype="html">
        <source>Error executing password removal operation</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2065</context>
+          <context context-type="linenumber">2063</context>
        </context-group>
      </trans-unit>
      <trans-unit id="3740891324955700797" datatype="html">
        <source>Print failed.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2115</context>
+          <context context-type="linenumber">2113</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6457245677384603573" datatype="html">
        <source>Error loading document for printing.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2124</context>
+          <context context-type="linenumber">2122</context>
        </context-group>
      </trans-unit>
      <trans-unit id="6085793215710522488" datatype="html">
        <source>An error occurred loading tiff: <x id="PH" equiv-text="err.toString()"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2207</context>
+          <context context-type="linenumber">2205</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">2213</context>
+          <context context-type="linenumber">2211</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4958946940233632319" datatype="html">
@@ -10852,78 +10830,50 @@
          <context context-type="linenumber">23</context>
        </context-group>
      </trans-unit>
-      <trans-unit id="4388879716045736175" datatype="html">
-        <source>Note</source>
+      <trans-unit id="1044349881182559852" datatype="html">
+        <source>Enter note</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
          <context context-type="linenumber">5</context>
        </context-group>
      </trans-unit>
-      <trans-unit id="8039873301454218547" datatype="html">
-        <source>Enter note (Markdown is supported)</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">5</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="2713764221056344068" datatype="html">
-        <source>Note preview</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">7</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="7604794618690171820" datatype="html">
-        <source>Nothing to preview</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">11,12</context>
-        </context-group>
-      </trans-unit>
      <trans-unit id="7770536883443596194" datatype="html">
        <source> Please enter a note. </source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">16,17</context>
-        </context-group>
-      </trans-unit>
-      <trans-unit id="3124852678467222928" datatype="html">
-        <source>Note input mode</source>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">23</context>
+          <context context-type="linenumber">7</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8433732438274024544" datatype="html">
        <source>Add note</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">29,30</context>
+          <context context-type="linenumber">14,15</context>
        </context-group>
      </trans-unit>
      <trans-unit id="8428006099054244235" datatype="html">
        <source>Delete note</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">46</context>
+          <context context-type="linenumber">25</context>
        </context-group>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.html</context>
-          <context context-type="linenumber">48,49</context>
+          <context context-type="linenumber">27,28</context>
        </context-group>
      </trans-unit>
      <trans-unit id="2054854290951060833" datatype="html">
        <source>Error saving note</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.ts</context>
-          <context context-type="linenumber">94</context>
+          <context context-type="linenumber">83</context>
        </context-group>
      </trans-unit>
      <trans-unit id="4144411010137688084" datatype="html">
        <source>Error deleting note</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/components/document-notes/document-notes.component.ts</context>
-          <context context-type="linenumber">108</context>
+          <context context-type="linenumber">97</context>
        </context-group>
      </trans-unit>
      <trans-unit id="7103632680753685326" datatype="html">
@@ -13,6 +13,7 @@ import { DocumentDetailComponent } from './components/document-detail/document-d
 import { DocumentListComponent } from './components/document-list/document-list.component'
 import { DocumentAttributesComponent } from './components/manage/document-attributes/document-attributes.component'
 import { MailComponent } from './components/manage/mail/mail.component'
+import { OcrTemplatesComponent } from './components/manage/ocr-templates/ocr-templates.component'
 import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
 import { ShareLinksComponent } from './components/manage/share-links/share-links.component'
 import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
@@ -275,6 +276,18 @@ export const routes: Routes = [
          componentName: 'WorkflowsComponent',
        },
      },
+      {
+        path: 'ocr-templates',
+        component: OcrTemplatesComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.OcrTemplate,
+          },
+          componentName: 'OcrTemplatesComponent',
+        },
+      },
      {
        path: 'mail',
        component: MailComponent,
@@ -113,6 +113,7 @@ const sidebarItemLabels: Record<HideableSidebarItemID, string> = {
  [HideableSidebarItemID.SavedViews]: $localize`Saved Views`,
  [HideableSidebarItemID.ShareLinks]: $localize`Share Links`,
  [HideableSidebarItemID.Workflows]: $localize`Workflows`,
+  [HideableSidebarItemID.OcrTemplates]: $localize`OCR Templates`,
  [HideableSidebarItemID.Mail]: $localize`Mail`,
  [HideableSidebarItemID.Documentation]: $localize`Documentation`,
 }
@@ -289,6 +289,17 @@
                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="Workflows" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.Workflows)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.Workflows, $event)"></pngx-input-switch>
              }
            </li>
+            <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.OcrTemplates) && !settingsService.organizingSidebarItems()"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }">
+              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.OcrTemplates)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="ocr-templates" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="OCR Templates" i18n-ngbPopover [disablePopover]="!slimSidebarPopoversEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <pngx-bs-icon class="me-2" name="bounding-box-circles"></pngx-bs-icon><span class="nav-link-label"><ng-container i18n>OCR Templates</ng-container></span>
+              </a>
+              @if (settingsService.organizingSidebarItems()) {
+                <pngx-input-switch class="position-absolute top-50 end-0 translate-middle-y me-1" [class.d-none]="slimSidebarEnabled || slimSidebarAnimating()" [compact]="true" title="OCR Templates" i18n-title [ngModel]="!settingsService.sidebarItemIsHidden(HideableSidebarItemID.OcrTemplates)" (ngModelChange)="toggleSidebarItem(HideableSidebarItemID.OcrTemplates, $event)"></pngx-input-switch>
+              }
+            </li>
            <li class="nav-item app-link position-relative" [class.d-none]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail) && !settingsService.organizingSidebarItems()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
              tourAnchor="tour.mail">
              <a class="nav-link" [class.opacity-50]="settingsService.sidebarItemIsHidden(HideableSidebarItemID.Mail)" [class.pe-5]="settingsService.organizingSidebarItems() && !slimSidebarEnabled && !slimSidebarAnimating()" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
@@ -33,7 +33,6 @@ import { RemoteVersionService } from 'src/app/services/rest/remote-version.servi
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { TaskNotificationService } from 'src/app/services/task-notification.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
@@ -199,14 +198,14 @@ describe('AppFrameComponent', () => {
    fixture.detectChanges()
  })

-  it('refreshes and updates the task notification on completion', () => {
+  it('refreshes and notifies on completion without client-side task tracking', () => {
    const list = TestBed.inject(DocumentListViewService)
    const reload = jest.spyOn(list, 'reload').mockImplementation(() => {})
    jest.spyOn(list, 'reduceSelectionToFilter').mockImplementation(() => {})
    const tasksReload = jest
      .spyOn(tasksService, 'reload')
      .mockImplementation(() => {})
-    const success = jest.spyOn(toastService, 'show')
+    const success = jest.spyOn(toastService, 'showSuccess')
    const refresh = jest
      .spyOn(openDocumentsService, 'refreshDocument')
      .mockImplementation(() => {})
@@ -231,12 +230,7 @@ describe('AppFrameComponent', () => {
    expect(refresh).toHaveBeenCalledWith(document.id)
    expect(maybeRefreshSpy).toHaveBeenCalledTimes(1)
    expect(tasksReload).toHaveBeenCalledTimes(1)
-    expect(success).toHaveBeenCalledWith(
-      expect.objectContaining({
-        id: 'task-bulk-task',
-        content: 'Operation completed.',
-      })
-    )
+    expect(success).toHaveBeenCalledWith('Bulk operation completed.')
    fixture.destroy()
    bulkEvents.next({
      task_id: 'bulk-task',
@@ -251,14 +245,14 @@ describe('AppFrameComponent', () => {
    const reload = jest.spyOn(list, 'reload').mockImplementation(() => {})
    jest.spyOn(list, 'reduceSelectionToFilter').mockImplementation(() => {})
    jest.spyOn(tasksService, 'reload').mockImplementation(() => {})
-    const error = jest.spyOn(toastService, 'show')
+    const error = jest.spyOn(toastService, 'showError')
    const success = jest.spyOn(toastService, 'showSuccess')
    for (const status of [
      PaperlessTaskStatus.Failure,
      PaperlessTaskStatus.Revoked,
    ]) {
      bulkEvents.next({
-        task_id: `${status}-task`,
+        task_id: 'bulk-task',
        operation: 'set_permissions',
        status,
        error:
@@ -268,36 +262,11 @@ describe('AppFrameComponent', () => {
      })
    }
    expect(reload).toHaveBeenCalledTimes(2)
+    expect(error).toHaveBeenCalledWith(expect.any(String), 'Could not update')
    expect(error).toHaveBeenCalledWith(
-      expect.objectContaining({
-        content:
-          'Operation failed. Some changes may already have been applied.',
-        error: 'Could not update',
-      })
+      'Bulk operation revoked.',
+      'Task expired before execution.'
    )
-    expect(error).toHaveBeenCalledWith(
-      expect.objectContaining({
-        content: 'Operation revoked.',
-        error: 'Task expired before execution.',
-      })
-    )
-    expect(success).not.toHaveBeenCalled()
-  })
-
-  it('passes delete completion to the shared task notification handler', () => {
-    const success = jest.spyOn(toastService, 'showSuccess')
-    const notifications = TestBed.inject(TaskNotificationService)
-    const handleStatus = jest.spyOn(notifications, 'complete')
-    bulkEvents.next({
-      task_id: 'delete-1',
-      operation: 'delete',
-      status: PaperlessTaskStatus.Success,
-    })
-    expect(handleStatus).toHaveBeenCalledWith({
-      task_id: 'delete-1',
-      operation: 'delete',
-      status: PaperlessTaskStatus.Success,
-    })
    expect(success).not.toHaveBeenCalled()
  })

@@ -404,6 +373,7 @@ describe('AppFrameComponent', () => {
      HideableSidebarItemID.Dashboard,
      HideableSidebarItemID.Workflows,
      HideableSidebarItemID.ShareLinks,
+      HideableSidebarItemID.OcrTemplates,
    ])
    fixture.detectChanges()

@@ -419,6 +389,10 @@ describe('AppFrameComponent', () => {
      fixture.nativeElement.querySelector('[routerLink="share-links"]')
        .parentElement.classList
    ).toContain('d-none')
+    expect(
+      fixture.nativeElement.querySelector('[routerLink="ocr-templates"]')
+        .parentElement.classList
+    ).toContain('d-none')
    expect(
      fixture.nativeElement.querySelector('[routerLink="mail"]').parentElement
        .classList
@@ -431,12 +405,21 @@ describe('AppFrameComponent', () => {
    ])
    settingsService.sidebarHiddenItemsEditing.set([
      HideableSidebarItemID.Dashboard,
+      HideableSidebarItemID.OcrTemplates,
    ])
    fixture.detectChanges()

    expect(
      fixture.nativeElement.querySelectorAll('pngx-input-switch').length
-    ).toBe(6)
+    ).toBe(7)
+    const ocrTemplatesLink = fixture.nativeElement.querySelector(
+      '[routerLink="ocr-templates"]'
+    )
+    expect(ocrTemplatesLink.parentElement.classList).not.toContain('d-none')
+    expect(ocrTemplatesLink.classList).toContain('opacity-50')
+    expect(
+      ocrTemplatesLink.parentElement.querySelector('pngx-input-switch')
+    ).not.toBeNull()
    expect(
      fixture.nativeElement.querySelector('[routerLink="dashboard"]')
        .parentElement.classList
@@ -57,7 +57,6 @@ import {
 } from 'src/app/services/rest/remote-version.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { TaskNotificationService } from 'src/app/services/task-notification.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { UploadDocumentsService } from 'src/app/services/upload-documents.service'
@@ -116,7 +115,6 @@ export class AppFrameComponent
  settingsService = inject(SettingsService)
  tasksService = inject(TasksService)
  private readonly toastService = inject(ToastService)
-  private readonly taskNotifications = inject(TaskNotificationService)
  private modalService = inject(NgbModal)
  permissionsService = inject(PermissionsService)
  private djangoMessagesService = inject(DjangoMessagesService)
@@ -184,7 +182,7 @@ export class AppFrameComponent
        ),
        takeUntilDestroyed(this.destroyRef)
      )
-      .subscribe((result) => {
+      .subscribe(({ status, error }) => {
        this.documentList.reload(null, false)
        this.documentList.reduceSelectionToFilter()
        // maybe someday we can optimize to only refresh affected documents
@@ -200,7 +198,16 @@ export class AppFrameComponent
        ) {
          this.tasksService.reload()
        }
-        this.taskNotifications.complete(result)
+        if (status === PaperlessTaskStatus.Success) {
+          this.toastService.showSuccess($localize`Bulk operation completed.`)
+        } else if (status === PaperlessTaskStatus.Revoked) {
+          this.toastService.showError($localize`Bulk operation revoked.`, error)
+        } else {
+          this.toastService.showError(
+            $localize`Bulk operation failed. Some changes may already have been applied.`,
+            error
+          )
+        }
      })

    this.lastScrollY = window.scrollY
@@ -16,6 +16,7 @@ import basket from 'bootstrap-icons/icons/basket.svg'
 import bell from 'bootstrap-icons/icons/bell.svg'
 import bodyText from 'bootstrap-icons/icons/body-text.svg'
 import bookmark from 'bootstrap-icons/icons/bookmark.svg'
+import boundingBoxCircles from 'bootstrap-icons/icons/bounding-box-circles.svg'
 import boxArrowInRight from 'bootstrap-icons/icons/box-arrow-in-right.svg'
 import boxArrowUpRight from 'bootstrap-icons/icons/box-arrow-up-right.svg'
 import boxArrowUp from 'bootstrap-icons/icons/box-arrow-up.svg'
@@ -77,6 +78,7 @@ import fileEarmarkMinus from 'bootstrap-icons/icons/file-earmark-minus.svg'
 import fileEarmarkPerson from 'bootstrap-icons/icons/file-earmark-person.svg'
 import fileEarmarkPlus from 'bootstrap-icons/icons/file-earmark-plus.svg'
 import fileEarmarkRichtext from 'bootstrap-icons/icons/file-earmark-richtext.svg'
+import fileEarmarkRuled from 'bootstrap-icons/icons/file-earmark-ruled.svg'
 import fileEarmarkSpreadsheet from 'bootstrap-icons/icons/file-earmark-spreadsheet.svg'
 import fileEarmark from 'bootstrap-icons/icons/file-earmark.svg'
 import fileText from 'bootstrap-icons/icons/file-text.svg'
@@ -131,6 +133,7 @@ import search from 'bootstrap-icons/icons/search.svg'
 import send from 'bootstrap-icons/icons/send.svg'
 import shop from 'bootstrap-icons/icons/shop.svg'
 import slashCircle from 'bootstrap-icons/icons/slash-circle.svg'
+import sliders2 from 'bootstrap-icons/icons/sliders2.svg'
 import sliders2Vertical from 'bootstrap-icons/icons/sliders2-vertical.svg'
 import sortAlphaDown from 'bootstrap-icons/icons/sort-alpha-down.svg'
 import sortAlphaUpAlt from 'bootstrap-icons/icons/sort-alpha-up-alt.svg'
@@ -179,6 +182,7 @@ export const icons: Record<string, string> = {
  braces,
  bodyText,
  bookmark,
+  boundingBoxCircles,
  boxArrowInRight,
  boxArrowUp,
  boxArrowUpRight,
@@ -240,6 +244,7 @@ export const icons: Record<string, string> = {
  fileEarmarkPerson,
  fileEarmarkPlus,
  fileEarmarkRichtext,
+  fileEarmarkRuled,
  fileEarmarkSpreadsheet,
  files,
  fileText,
@@ -292,6 +297,7 @@ export const icons: Record<string, string> = {
  search,
  send,
  slashCircle,
+  sliders2,
  shop,
  sliders2Vertical,
  sortAlphaDown,
@@ -18,13 +18,8 @@
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="runWorkflowForce" [(ngModel)]="force" />
-    @if (singleDocument) {
-      <label class="form-check-label" for="runWorkflowForce" i18n>Run on this document regardless of trigger filters</label>
-      <div class="form-text" i18n>Ignore the workflow's trigger filters for this document.</div>
-    } @else {
-      <label class="form-check-label" for="runWorkflowForce" i18n>Run on all selected documents</label>
-      <div class="form-text" i18n>Ignore the workflow's trigger filters and run on every selected document.</div>
-    }
+    <label class="form-check-label" for="runWorkflowForce" i18n>Run on all selected documents</label>
+    <div class="form-text" i18n>Ignore the workflow's trigger filters and run on every selected document.</div>
  </div>
 </div>
 <div class="modal-footer">
@@ -39,25 +39,4 @@ describe('RunWorkflowConfirmDialogComponent', () => {
    expect(options).toHaveLength(2)
    expect(options[1].textContent).toContain('Manual workflow')
  })
-
-  it('should describe the checkbox for a selection or a single document', async () => {
-    const checkbox = fixture.nativeElement.querySelector('#runWorkflowForce')
-    expect(checkbox.checked).toBe(false)
-    expect(fixture.nativeElement.textContent).toContain(
-      'Run on all selected documents'
-    )
-
-    component.singleDocument = true
-    component.force = true
-    fixture.detectChanges()
-    await fixture.whenStable()
-    fixture.detectChanges()
-    expect(checkbox.checked).toBe(true)
-    expect(fixture.nativeElement.textContent).toContain(
-      'Run on this document regardless of trigger filters'
-    )
-    expect(fixture.nativeElement.textContent).not.toContain(
-      'Run on all selected documents'
-    )
-  })
 })
@@ -13,8 +13,6 @@ export class RunWorkflowConfirmDialogComponent extends ConfirmDialogComponent {

  public workflowId: number = null

-  public singleDocument: boolean = false
-
  // i.e. ignore the workflow's trigger filters
  public force: boolean = false

@@ -0,0 +1,30 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+  </button>
+</div>
+<div class="modal-body">
+  @if (messageBold) {
+    <p class="text-break"><b>{{messageBold}}</b></p>
+  }
+  @if (message) {
+    <p class="text-break" [innerHTML]="message"></p>
+  }
+  <pngx-input-select
+    [items]="templates()"
+    [(ngModel)]="template"
+    [allowNull]="true"
+    title="OCR template"
+    i18n-title
+    placeholder="All matching templates"
+    i18n-placeholder
+  ></pngx-input-select>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled()">
+    <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+  </button>
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled()">
+    {{btnCaption}}
+  </button>
+</div>
@@ -0,0 +1,52 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { of } from 'rxjs'
+import { MATCH_NONE } from 'src/app/data/matching-model'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { ZoneOcrConfirmDialogComponent } from './zone-ocr-confirm-dialog.component'
+
+const templates: OcrTemplate[] = [
+  {
+    id: 1,
+    name: 'Invoices',
+    match: '',
+    matching_algorithm: MATCH_NONE,
+    sample_document: null,
+    source_width: 0,
+    source_height: 0,
+    enabled: true,
+    zones: [],
+  },
+]
+
+describe('ZoneOcrConfirmDialogComponent', () => {
+  let component: ZoneOcrConfirmDialogComponent
+  let fixture: ComponentFixture<ZoneOcrConfirmDialogComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+      imports: [ZoneOcrConfirmDialogComponent],
+    })
+    jest
+      .spyOn(TestBed.inject(OcrTemplateService), 'listAll')
+      .mockReturnValue(of({ count: 1, all: [1], results: templates }))
+
+    fixture = TestBed.createComponent(ZoneOcrConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should offer templates and default to all matching templates', () => {
+    expect(component.templates()).toEqual(templates)
+    expect(component.template).toBeNull()
+    expect(fixture.nativeElement.textContent).toContain('OCR template')
+  })
+})
@@ -0,0 +1,31 @@
+import { Component, OnInit, inject, signal } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { takeUntil } from 'rxjs'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { SelectComponent } from '../../input/select/select.component'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-zone-ocr-confirm-dialog',
+  templateUrl: './zone-ocr-confirm-dialog.component.html',
+  imports: [FormsModule, SelectComponent],
+})
+export class ZoneOcrConfirmDialogComponent
+  extends ConfirmDialogComponent
+  implements OnInit
+{
+  private readonly ocrTemplateService = inject(OcrTemplateService)
+
+  public readonly templates = signal<OcrTemplate[]>([])
+
+  /** The template to run, or null for every template that matches. */
+  template: number | null = null
+
+  ngOnInit() {
+    this.ocrTemplateService
+      .listAll()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((r) => this.templates.set(r.results))
+  }
+}
@@ -40,7 +40,7 @@
    (change)="onChange(selectedDocumentIDs)">
    <ng-template ng-label-tmp let-document="item">
      <div class="d-flex align-items-center">
-        @if (!disabled) {
+        @if (!disabled && multiple) {
          <button class="btn p-0 lh-1" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title><pngx-bs-icon name="x"></pngx-bs-icon></button>
        }
        @if (document.title) {
@@ -81,6 +81,9 @@ export class DocumentLinkComponent
  @Input()
  placeholder: string = $localize`Search for documents`

+  @Input()
+  multiple: boolean = true
+
  /**
   * Parent for ng-select dropdown, needed to prevent close on click.
   */
@@ -7,7 +7,6 @@
    background-color: var(--pngx-toast-bg);
    color: var(--bs-body-color);
    overflow: hidden;
-    transition: background-color .18s ease, border-color .18s ease;

    &.toast-success {
        --pngx-toast-accent: var(--pngx-toast-success);
@@ -24,13 +23,6 @@

 .toast-icon {
    color: var(--pngx-toast-accent);
-    transition: color .18s ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .toast, .toast-icon {
-        transition: none;
-    }
 }

 .toast-content {
@@ -65,36 +65,6 @@ describe('ToastComponent', () => {
    expect(component.delayRemaining()).toEqual(3000)
  })

-  it('updates its color and icon in place and restarts the countdown', () => {
-    jest.useFakeTimers()
-    fixture.componentRef.setInput('toast', {
-      id: 'task-1',
-      content: 'Queued',
-      delay: 5000,
-    })
-    fixture.detectChanges()
-    component.onShown(component.toast)
-    jest.advanceTimersByTime(4500)
-    const element = fixture.nativeElement.querySelector('ngb-toast')
-    fixture.componentRef.setInput('toast', {
-      id: 'task-1',
-      content: 'Completed',
-      delay: 5000,
-      level: ToastLevel.Success,
-    })
-    fixture.detectChanges()
-    expect(fixture.nativeElement.querySelector('ngb-toast')).toBe(element)
-    expect(element.classList).toContain('toast-success')
-    expect(element.querySelector('[name="check-circle"]')).not.toBeNull()
-    expect(component.delayRemaining()).toBe(5000)
-    const hide = jest.spyOn(component.ngbToast, 'hide')
-    jest.advanceTimersByTime(1000)
-    expect(hide).not.toHaveBeenCalled()
-    jest.advanceTimersByTime(4200)
-    expect(hide).toHaveBeenCalled()
-    jest.useRealTimers()
-  })
-
  it('should hide the toast when the countdown ends', () => {
    jest.useFakeTimers()
    const toast = { content: 'Info', delay: 3000 }
@@ -5,10 +5,8 @@ import {
  DestroyRef,
  EventEmitter,
  Input,
-  OnChanges,
  OnInit,
  Output,
-  SimpleChanges,
  ViewChild,
  inject,
  signal,
@@ -36,7 +34,7 @@ import { Toast, ToastLevel } from 'src/app/services/toast.service'
  styleUrl: './toast.component.scss',
  providers: [DatePipe, CustomDatePipe],
 })
-export class ToastComponent implements OnInit, OnChanges {
+export class ToastComponent implements OnInit {
  private clipboard = inject(Clipboard)
  private customDatePipe = inject(CustomDatePipe)
  private destroyRef = inject(DestroyRef)
@@ -71,12 +69,6 @@ export class ToastComponent implements OnInit, OnChanges {
    if (this.autohide) this.delayRemaining.set(this.toast.delay)
  }

-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.toast && !changes.toast.firstChange && this.autohide) {
-      this.onShown(this.toast)
-    }
-  }
-
  get relativeTimestamp(): string {
    return this.customDatePipe.transform(this.toast.timestamp, 'relative')
  }
@@ -68,9 +68,9 @@ describe('ToastsComponent', () => {
    toasts.forEach((t) => toastSubject.next(t))
    expect(component.toasts().map((t) => t.id)).toEqual(['3', '2', '1'])

-    // Updating a visible toast preserves its position without duplicating it.
+    // showing a visible toast again moves it to the top without duplicating
    toastSubject.next(toasts[1])
-    expect(component.toasts().map((t) => t.id)).toEqual(['3', '2', '1'])
+    expect(component.toasts().map((t) => t.id)).toEqual(['1', '3', '2'])
  })

  it('should remove a popup when it hides without closing it', () => {
@@ -32,11 +32,10 @@ export class ToastsComponent {
          return
        }
        this.toasts.update((toasts) =>
-          toasts.some((existing) => existing.id === toast.id)
-            ? toasts.map((existing) =>
-                existing.id === toast.id ? toast : existing
-              )
-            : [toast, ...toasts].slice(0, MAX_VISIBLE_TOASTS)
+          [toast, ...toasts.filter((t) => t.id !== toast.id)].slice(
+            0,
+            MAX_VISIBLE_TOASTS
+          )
        )
      })
  }
@@ -67,6 +67,22 @@
        <pngx-bs-icon name="pencil" class="me-2"></pngx-bs-icon><ng-container i18n>PDF Editor</ng-container>
      </button>

+      <div class="d-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }">
+        <button ngbDropdownItem (click)="runZoneOcr()" [disabled]="!userCanEdit || networkActive()">
+          <pngx-bs-icon width="1em" height="1em" name="bounding-box-circles" class="me-2"></pngx-bs-icon><span i18n>Run Zone OCR</span>
+        </button>
+        <button
+          ngbDropdownItem
+          class="w-auto flex-shrink-0 px-2"
+          (click)="runZoneOcrWithOptions()"
+          [disabled]="!userCanEdit || networkActive()"
+          title="Choose OCR template"
+          i18n-title
+        >
+          <pngx-bs-icon width="1em" height="1em" name="sliders2"></pngx-bs-icon>
+        </button>
+      </div>
+
      @if (userIsOwner && (requiresPassword || password)) {
        <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
          <pngx-bs-icon name="unlock" class="me-2"></pngx-bs-icon><ng-container i18n>Remove Password</ng-container>
@@ -96,7 +112,7 @@
 <div class="row">
  <div class="col-md-6 col-xl-5 mb-4">

-    <form [formGroup]='documentForm' (ngSubmit)="save()">
+    <form [formGroup]='documentForm' (ngSubmit)="save()" [attr.inert]="zoneOcrRunning() ? '' : null" [attr.aria-busy]="zoneOcrRunning()">

      <div class="btn-toolbar mb-1 pb-3 gap-2 row-gap-2 border-bottom">
        <div class="btn-group">
@@ -1013,85 +1013,48 @@ describe('DocumentDetailComponent', () => {
    ])
  })

-  it('should queue reprocess, show the task link and close the modal', () => {
-    jest.useFakeTimers()
+  it('should support reprocess, confirm and close modal after started', () => {
    initNormally()
    const reprocessSpy = jest.spyOn(documentService, 'reprocessDocuments')
-    reprocessSpy.mockReturnValue(of({ result: 'OK', task_id: 'reprocess-1' }))
+    reprocessSpy.mockReturnValue(of(true))
    let openModal: NgbModalRef
    modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
    const modalSpy = jest.spyOn(modalService, 'open')
-    const toastSpy = jest.spyOn(toastService, 'show')
+    const toastSpy = jest.spyOn(toastService, 'showInfo')
    component.reprocess()
    const modalCloseSpy = jest.spyOn(openModal, 'close')
    openModal.componentInstance.confirmClicked.next()
    expect(reprocessSpy).toHaveBeenCalledWith({ documents: [doc.id] }, false)
    expect(modalSpy).toHaveBeenCalled()
-    expect(toastSpy).not.toHaveBeenCalled()
+    expect(toastSpy).toHaveBeenCalled()
    expect(modalCloseSpy).toHaveBeenCalled()
-    jest.advanceTimersByTime(400)
-    expect(toastSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        content: 'Document reprocessing queued.',
-        actionName: 'View task',
-      })
-    )
-    toastSpy.mock.calls.at(-1)[0].action()
-    expect(router.navigate).toHaveBeenCalledWith(['/tasks'], {
-      queryParams: { task_id: 'reprocess-1' },
-    })
-    expect(modalCloseSpy).toHaveBeenCalled()
-    jest.useRealTimers()
  })

  it('should run a workflow on the document, confirm and close modal', () => {
-    jest.useFakeTimers()
    initNormally()
    const bulkEditSpy = jest.spyOn(documentService, 'bulkEdit')
-    bulkEditSpy.mockReturnValue(of({ result: 'OK', task_id: 'workflow-1' }))
+    bulkEditSpy.mockReturnValue(of(true))
    let openModal: NgbModalRef
    modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
-    const toastSpy = jest.spyOn(toastService, 'show')
+    const toastSpy = jest.spyOn(toastService, 'showInfo')
    component.runWorkflow()
-    expect(openModal.componentInstance.singleDocument).toBe(true)
-    expect(openModal.componentInstance.force).toBe(true)
    const modalCloseSpy = jest.spyOn(openModal, 'close')
    openModal.componentInstance.workflowId = 5
+    openModal.componentInstance.force = true
    openModal.componentInstance.confirmClicked.next()
    expect(bulkEditSpy).toHaveBeenCalledWith(
      { documents: [doc.id] },
      'run_workflow',
      { workflow: 5, filter_documents: false }
    )
-    jest.advanceTimersByTime(400)
-    expect(toastSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ content: 'Workflow queued.' })
-    )
+    expect(toastSpy).toHaveBeenCalled()
    expect(modalCloseSpy).toHaveBeenCalled()
-    jest.useRealTimers()
-  })
-
-  it('should apply workflow filters when the single-document checkbox is cleared', () => {
-    initNormally()
-    const bulkEditSpy = jest.spyOn(documentService, 'bulkEdit')
-    bulkEditSpy.mockReturnValue(of({ result: 'OK', task_id: 'workflow-2' }))
-    let openModal: NgbModalRef
-    modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
-    component.runWorkflow()
-    openModal.componentInstance.workflowId = 5
-    openModal.componentInstance.force = false
-    openModal.componentInstance.confirmClicked.next()
-    expect(bulkEditSpy).toHaveBeenCalledWith(
-      { documents: [doc.id] },
-      'run_workflow',
-      { workflow: 5, filter_documents: true }
-    )
  })

  it('should pass remote OCR choice when reprocessing', () => {
    initNormally()
    const reprocessSpy = jest.spyOn(documentService, 'reprocessDocuments')
-    reprocessSpy.mockReturnValue(of({ result: 'OK', task_id: 'reprocess-2' }))
+    reprocessSpy.mockReturnValue(of(true))
    let openModal: NgbModalRef
    modalService.activeInstances.subscribe((modal) => (openModal = modal[0]))
    component.reprocess()
@@ -1967,6 +1930,203 @@ describe('DocumentDetailComponent', () => {
    expect(toastSpy).toHaveBeenCalledWith('Document reloaded.')
  })

+  it('should run a chosen zone OCR template on the selected version and reload', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, versions: docVersions })
+    component.selectedVersionId.set(10)
+    jest.spyOn(documentService, 'runZoneOcr').mockReturnValue(
+      of({
+        results: [
+          { zone: 'Total', value: '102.10' },
+          { zone: 'Due', value: '' },
+        ],
+      } as any)
+    )
+    const loadSpy = jest
+      .spyOn(component as any, 'loadDocument')
+      .mockImplementation(() => {})
+    const notifySpy = jest.spyOn(component.docChangeNotifier, 'next')
+    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    component.runZoneOcrWithOptions()
+    const dialog = modalSpy.mock.results[0].value.componentInstance
+    expect(dialog.message).toBe(
+      'Fields filled by the template will be overwritten.'
+    )
+    dialog.template = 3
+    dialog.confirmClicked.emit()
+
+    expect(documentService.runZoneOcr).toHaveBeenCalledWith(doc.id, 3, 10)
+    expect(toastSpy).toHaveBeenCalledWith(
+      'Filled 1 of 2 fields. No value found for: Due'
+    )
+    expect(notifySpy).toHaveBeenCalledWith(doc.id)
+    expect(loadSpy).toHaveBeenCalledWith(doc.id, true, expect.any(Function))
+    expect(component.zoneOcrRunning()).toBe(true)
+    loadSpy.mock.calls[0][2]()
+    expect(component.zoneOcrRunning()).toBe(false)
+    expect(component.networkActive()).toBe(false)
+  })
+
+  it('should summarize zone OCR results', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, versions: docVersions })
+    component.selectedVersionId.set(12)
+    jest.spyOn(component as any, 'loadDocument').mockImplementation(() => {})
+    const runSpy = jest.spyOn(documentService, 'runZoneOcr')
+    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    runSpy.mockReturnValueOnce(of({ status: 'completed', results: [] }))
+    component.runZoneOcr()
+    expect(modalSpy).not.toHaveBeenCalled()
+    expect(runSpy).toHaveBeenCalledWith(doc.id, null, null)
+    expect(toastSpy).toHaveBeenLastCalledWith(
+      'Zone OCR found no fields to fill.'
+    )
+
+    component.networkActive.set(false)
+    runSpy.mockReturnValueOnce(
+      of({
+        status: 'completed',
+        results: [
+          { template: 'T', zone: 'Total', custom_field: 'Amount', value: 0 },
+        ],
+      })
+    )
+    component.runZoneOcr()
+    expect(toastSpy).toHaveBeenLastCalledWith('Filled 1 of 1 fields.')
+  })
+
+  it('should confirm before running zone OCR over unsaved changes', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, __changedFields: ['title'] })
+    component.documentForm.patchValue({ title: 'Unsaved title' })
+    const runSpy = jest.spyOn(documentService, 'runZoneOcr')
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    component.runZoneOcr()
+
+    const modal = modalSpy.mock.results[0].value
+    expect(modal.componentInstance.message).toBe(
+      'Running Zone OCR will discard them.'
+    )
+    expect(runSpy).not.toHaveBeenCalled()
+    modal.componentInstance.cancel()
+    expect(runSpy).not.toHaveBeenCalled()
+    expect(component.documentForm.get('title').value).toBe('Unsaved title')
+    expect(component.zoneOcrRunning()).toBe(false)
+  })
+
+  it('should warn about unsaved changes in the zone OCR options dialog', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, __changedFields: ['title'] })
+    const runSpy = jest.spyOn(documentService, 'runZoneOcr')
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    component.runZoneOcrWithOptions()
+
+    const dialog = modalSpy.mock.results[0].value.componentInstance
+    expect(dialog.message).toBe('Running Zone OCR will discard them.')
+    expect(dialog.btnClass).toBe('btn-warning')
+    dialog.cancel()
+    expect(runSpy).not.toHaveBeenCalled()
+    component.networkActive.set(true)
+    component.runZoneOcrWithOptions()
+    expect(modalSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not allow saving or a second zone OCR run while one is running', () => {
+    component.documentId.set(doc.id)
+    component.document.set({
+      ...doc,
+      versions: docVersions,
+      __changedFields: ['title'],
+    })
+    component.selectedVersionId.set(doc.id)
+    const pending = new Subject<any>()
+    const runSpy = jest
+      .spyOn(documentService, 'runZoneOcr')
+      .mockReturnValue(pending)
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    component.runZoneOcr()
+    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
+
+    expect(runSpy).toHaveBeenCalledWith(doc.id, null, doc.id)
+    expect(component.zoneOcrRunning()).toBe(true)
+    expect(component.networkActive()).toBe(true)
+    const saveSpy = jest.spyOn(documentService, 'patch')
+    component.save()
+    expect(saveSpy).not.toHaveBeenCalled()
+    component.runZoneOcr()
+    expect(modalSpy).toHaveBeenCalledTimes(1)
+    expect(runSpy).toHaveBeenCalledTimes(1)
+    pending.error(new Error('failed'))
+    expect(component.zoneOcrRunning()).toBe(false)
+    expect(component.networkActive()).toBe(false)
+    expect(component.document().__changedFields).toEqual(['title'])
+  })
+
+  it('should not reload after zone OCR if another document is open', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, __changedFields: [] })
+    const pending = new Subject<any>()
+    jest.spyOn(documentService, 'runZoneOcr').mockReturnValue(pending)
+    const loadSpy = jest.spyOn(component as any, 'loadDocument')
+
+    component.runZoneOcr()
+    component.documentId.set(99)
+    pending.next({ results: [] })
+
+    expect(loadSpy).not.toHaveBeenCalled()
+    expect(component.zoneOcrRunning()).toBe(false)
+    pending.complete()
+  })
+
+  it('should keep unsaved changes when zone OCR is skipped', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, __changedFields: ['title'] })
+    component.documentForm.patchValue({ title: 'Unsaved title' })
+    const modalSpy = jest.spyOn(modalService, 'open')
+    jest
+      .spyOn(documentService, 'runZoneOcr')
+      .mockReturnValue(of({ status: 'skipped', results: [] }))
+    const loadSpy = jest.spyOn(component as any, 'loadDocument')
+    const infoSpy = jest.spyOn(toastService, 'showInfo')
+
+    component.runZoneOcr()
+    modalSpy.mock.results[0].value.componentInstance.confirm()
+
+    expect(loadSpy).not.toHaveBeenCalled()
+    expect(component.documentForm.get('title').value).toBe('Unsaved title')
+    expect(component.zoneOcrRunning()).toBe(false)
+    expect(component.networkActive()).toBe(false)
+    expect(infoSpy).toHaveBeenCalledWith(
+      'No OCR template applies to this document.'
+    )
+  })
+
+  it('should show an error when zone OCR fails', () => {
+    component.document.set(doc)
+    jest
+      .spyOn(documentService, 'runZoneOcr')
+      .mockReturnValue(throwError(() => new Error('nope')))
+    const loadSpy = jest.spyOn(component as any, 'loadDocument')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+
+    component.runZoneOcr()
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Error running zone OCR.',
+      expect.any(Error)
+    )
+    expect(loadSpy).not.toHaveBeenCalled()
+    expect(component.zoneOcrRunning()).toBe(false)
+    expect(component.networkActive()).toBe(false)
+  })
+
  it('should change preview element by render type', () => {
    initNormally()
    component.document.update((document) => ({
@@ -2020,12 +2180,10 @@ describe('DocumentDetailComponent', () => {
  })

  it('should support pdf editor, handle error', () => {
-    jest.useFakeTimers()
    let modal: NgbModalRef
    modalService.activeInstances.subscribe((m) => (modal = m[0]))
    const closeSpy = jest.spyOn(openDocumentsService, 'closeDocument')
    const errorSpy = jest.spyOn(toastService, 'showError')
-    const queuedToastSpy = jest.spyOn(toastService, 'show')
    initNormally()
    component.selectedVersionId.set(10)
    component.editPdf()
@@ -2044,7 +2202,6 @@ describe('DocumentDetailComponent', () => {
      update_document: false,
      include_metadata: true,
      source_mode: 'explicit_selection',
-      from_webui: true,
    })
    req.error(new ErrorEvent('failed'))
    expect(errorSpy).toHaveBeenCalled()
@@ -2057,21 +2214,13 @@ describe('DocumentDetailComponent', () => {
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/edit_pdf/`
    )
-    req.flush({ result: 'OK', task_id: 'edit-pdf-1' })
-    jest.advanceTimersByTime(400)
-    expect(closeSpy).not.toHaveBeenCalled()
-    expect(queuedToastSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ content: 'PDF edit queued.' })
-    )
-    jest.useRealTimers()
+    req.flush(true)
+    expect(closeSpy).toHaveBeenCalled()
  })

  it('should support removing password protection from pdfs', () => {
-    jest.useFakeTimers()
    let modal: NgbModalRef
    modalService.activeInstances.subscribe((m) => (modal = m[0]))
-    const closeSpy = jest.spyOn(openDocumentsService, 'closeDocument')
-    const queuedToastSpy = jest.spyOn(toastService, 'show')
    initNormally()
    component.selectedVersionId.set(10)
    component.password = 'secret'
@@ -2092,15 +2241,8 @@ describe('DocumentDetailComponent', () => {
      include_metadata: false,
      delete_original: true,
      source_mode: 'explicit_selection',
-      from_webui: true,
    })
-    req.flush({ result: 'OK', task_id: 'remove-password-1' })
-    jest.advanceTimersByTime(400)
-    expect(closeSpy).not.toHaveBeenCalled()
-    expect(queuedToastSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ content: 'Password removal queued.' })
-    )
-    jest.useRealTimers()
+    req.flush(true)
  })

  it('should require the current password before removing it', () => {
@@ -2152,9 +2294,9 @@ describe('DocumentDetailComponent', () => {
    const req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/remove_password/`
    )
-    req.flush({ result: 'OK', task_id: 'remove-password-2' })
+    req.flush(true)

-    expect(refreshSpy).not.toHaveBeenCalled()
+    expect(refreshSpy).toHaveBeenCalledWith(doc.id)
  })

  it('should support keyboard shortcuts', () => {
@@ -64,6 +64,7 @@ import {
  FILTER_STORAGE_PATH,
 } from 'src/app/data/filter-rule-type'
 import { ObjectWithId } from 'src/app/data/object-with-id'
+import { OcrZoneRunResult } from 'src/app/data/ocr-template'
 import { StoragePath } from 'src/app/data/storage-path'
 import { Tag } from 'src/app/data/tag'
 import { SETTINGS_KEYS, SuggestionSource } from 'src/app/data/ui-settings'
@@ -97,7 +98,6 @@ import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { WorkflowService } from 'src/app/services/rest/workflow.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { TaskNotificationService } from 'src/app/services/task-notification.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
@@ -109,6 +109,7 @@ import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.
 import { PasswordRemovalConfirmDialogComponent } from '../common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component'
 import { ReprocessConfirmDialogComponent } from '../common/confirm-dialog/reprocess-confirm-dialog/reprocess-confirm-dialog.component'
 import { RunWorkflowConfirmDialogComponent } from '../common/confirm-dialog/run-workflow-confirm-dialog/run-workflow-confirm-dialog.component'
+import { ZoneOcrConfirmDialogComponent } from '../common/confirm-dialog/zone-ocr-confirm-dialog/zone-ocr-confirm-dialog.component'
 import { CustomFieldsDropdownComponent } from '../common/custom-fields-dropdown/custom-fields-dropdown.component'
 import { CorrespondentEditDialogComponent } from '../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -227,7 +228,6 @@ export class DocumentDetailComponent
  private documentListViewService = inject(DocumentListViewService)
  private documentTitlePipe = inject(DocumentTitlePipe)
  private toastService = inject(ToastService)
-  private taskNotifications = inject(TaskNotificationService)
  private trashService = inject(TrashService)
  private settings = inject(SettingsService)
  private storagePathService = inject(StoragePathService)
@@ -273,6 +273,7 @@ export class DocumentDetailComponent
  readonly error = signal<any>(undefined)

  readonly networkActive = signal(false)
+  readonly zoneOcrRunning = signal(false)

  readonly documentId = signal<number>(undefined)
  readonly document = signal<Document>(undefined)
@@ -551,7 +552,11 @@ export class DocumentDetailComponent
      )
  }

-  private loadDocument(documentId: number, forceRemote: boolean = false): void {
+  private loadDocument(
+    documentId: number,
+    forceRemote: boolean = false,
+    onComplete?: () => void
+  ): void {
    let redirectedToRoot = false
    this.closeIncomingUpdateModal()
    this.pendingIncomingUpdate = null
@@ -608,7 +613,8 @@ export class DocumentDetailComponent
        }),
        first(),
        takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
+        takeUntil(this.docChangeNotifier),
+        finalize(() => onComplete?.())
      )
      .subscribe({
        next: (doc) => {
@@ -1356,6 +1362,7 @@ export class DocumentDetailComponent
  }

  save(close: boolean = false, savedCallback: () => void = null) {
+    if (this.zoneOcrRunning()) return
    this.networkActive.set(true)
    ;(document.activeElement as HTMLElement)?.dispatchEvent(new Event('change'))
    this.documentsService
@@ -1560,11 +1567,9 @@ export class DocumentDetailComponent
          modal.componentInstance.remoteOcr
        )
        .subscribe({
-          next: ({ task_id }) => {
-            this.taskNotifications.showQueued(
-              task_id,
-              $localize`Document reprocessing queued.`,
-              { content: $localize`Document reprocessing completed.` }
+          next: () => {
+            this.toastService.showInfo(
+              $localize`Reprocess operation for "${this.document().title}" will begin in the background.`
            )
            if (modal) {
              modal.close()
@@ -1591,8 +1596,6 @@ export class DocumentDetailComponent
    modal.componentInstance.message = $localize`Run a workflow on "${this.document().title}".`
    modal.componentInstance.btnCaption = $localize`Run`
    modal.componentInstance.workflows = this.manualWorkflows()
-    modal.componentInstance.singleDocument = true
-    modal.componentInstance.force = true
    modal.componentInstance.confirmClicked.subscribe(() => {
      modal.componentInstance.buttonsEnabled.set(false)
      this.documentsService
@@ -1601,13 +1604,9 @@ export class DocumentDetailComponent
          filter_documents: !modal.componentInstance.force,
        })
        .subscribe({
-          next: ({ task_id }) => {
-            this.taskNotifications.showQueued(
-              task_id,
-              $localize`Workflow queued.`,
-              {
-                content: $localize`Workflow completed.`,
-              }
+          next: () => {
+            this.toastService.showInfo(
+              $localize`Workflow will run on "${this.document().title}" in the background.`
            )
            modal.close()
          },
@@ -1622,6 +1621,113 @@ export class DocumentDetailComponent
    })
  }

+  /** Runs every template that matches, confirming only over unsaved changes. */
+  runZoneOcr() {
+    if (this.networkActive()) return
+    const documentId = this.documentId()
+    const versionId = this.getSelectedNonLatestVersionId()
+    if (!this.hasLocalEdits(this.document())) {
+      this.executeZoneOcr(documentId, null, versionId)
+      return
+    }
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Run Zone OCR`
+    modal.componentInstance.messageBold = $localize`You have unsaved changes.`
+    modal.componentInstance.message = $localize`Running Zone OCR will discard them.`
+    modal.componentInstance.btnClass = 'btn-warning'
+    modal.componentInstance.btnCaption = $localize`Run Zone OCR`
+    modal.componentInstance.confirmClicked
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.close()
+        if (this.documentId() === documentId && !this.networkActive()) {
+          this.executeZoneOcr(documentId, null, versionId)
+        }
+      })
+  }
+
+  /** Opens the dialog to pick which template to run. */
+  runZoneOcrWithOptions() {
+    if (this.networkActive()) return
+    const documentId = this.documentId()
+    const versionId = this.getSelectedNonLatestVersionId()
+    const modal = this.modalService.open(ZoneOcrConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    const dialog = modal.componentInstance as ZoneOcrConfirmDialogComponent
+    dialog.title = $localize`Run Zone OCR`
+    dialog.btnCaption = $localize`Run Zone OCR`
+    if (this.hasLocalEdits(this.document())) {
+      dialog.messageBold = $localize`You have unsaved changes.`
+      dialog.message = $localize`Running Zone OCR will discard them.`
+      dialog.btnClass = 'btn-warning'
+    } else {
+      dialog.message = $localize`Fields filled by the template will be overwritten.`
+    }
+    dialog.confirmClicked
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.close()
+        if (this.documentId() === documentId && !this.networkActive()) {
+          this.executeZoneOcr(documentId, dialog.template, versionId)
+        }
+      })
+  }
+
+  private executeZoneOcr(
+    documentId: number,
+    templateId: number | null,
+    versionId: number | null
+  ) {
+    this.zoneOcrRunning.set(true)
+    this.networkActive.set(true)
+    this.documentsService
+      .runZoneOcr(documentId, templateId, versionId)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (response) => {
+          if (
+            this.documentId() !== documentId ||
+            response.status === 'skipped'
+          ) {
+            this.finishZoneOcr()
+            if (response.status === 'skipped') {
+              this.toastService.showInfo(
+                $localize`No OCR template applies to this document.`
+              )
+            }
+            return
+          }
+          this.toastService.showInfo(this.zoneOcrSummary(response.results))
+          this.docChangeNotifier.next(documentId)
+          this.loadDocument(documentId, true, () => this.finishZoneOcr())
+        },
+        error: (error) => {
+          this.finishZoneOcr()
+          this.toastService.showError($localize`Error running zone OCR.`, error)
+        },
+      })
+  }
+
+  private zoneOcrSummary(results: OcrZoneRunResult[]): string {
+    if (!results.length) return $localize`Zone OCR found no fields to fill.`
+    const missed = results
+      .filter((result) => !`${result.value ?? ''}`.trim())
+      .map((result) => result.zone)
+    const filled = results.length - missed.length
+    return missed.length
+      ? $localize`Filled ${filled} of ${results.length} fields. No value found for: ${missed.join(', ')}`
+      : $localize`Filled ${filled} of ${results.length} fields.`
+  }
+
+  private finishZoneOcr() {
+    this.zoneOcrRunning.set(false)
+    this.networkActive.set(false)
+    this.flushPendingIncomingUpdate()
+  }
+
  private getSelectedNonLatestVersionId(): number | null {
    const versions = this.document()?.versions ?? []
    if (!versions.length || !this.selectedVersionId()) {
@@ -1997,15 +2103,14 @@ export class DocumentDetailComponent
          })
          .pipe(first(), takeUntil(this.unsubscribeNotifier))
          .subscribe({
-            next: ({ task_id }) => {
-              this.taskNotifications.showQueued(
-                task_id,
-                $localize`PDF edit queued.`,
-                {
-                  content: $localize`PDF edit completed.`,
-                }
+            next: () => {
+              this.toastService.showInfo(
+                $localize`PDF edit operation for "${this.document().title}" will begin in the background.`
              )
              modal.close()
+              if (modal.componentInstance.deleteOriginal) {
+                this.openDocumentService.closeDocument(this.document())
+              }
            },
            error: (error) => {
              if (modal) {
@@ -2055,14 +2160,17 @@ export class DocumentDetailComponent
          })
          .pipe(first(), takeUntil(this.unsubscribeNotifier))
          .subscribe({
-            next: ({ task_id }) => {
-              this.taskNotifications.showQueued(
-                task_id,
-                $localize`Password removal queued.`,
-                { content: $localize`Password removal completed.` }
+            next: () => {
+              this.toastService.showInfo(
+                $localize`Password removal operation for "${this.document().title}" will begin in the background.`
              )
              this.networkActive.set(false)
              modal.close()
+              if (!dialog.updateDocument && dialog.deleteOriginal) {
+                this.openDocumentService.closeDocument(this.document())
+              } else if (dialog.updateDocument) {
+                this.openDocumentService.refreshDocument(this.documentId())
+              }
            },
            error: (error) => {
              dialog.buttonsEnabled.set(true)
@@ -2,7 +2,6 @@ import { DatePipe } from '@angular/common'
 import { SimpleChange, signal } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
-import { Router } from '@angular/router'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, of, throwError } from 'rxjs'
 import { DocumentVersionInfo } from 'src/app/data/document'
@@ -34,7 +33,7 @@ describe('DocumentVersionDropdownComponent', () => {
    >
  >
  let toastService: jest.Mocked<
-    Pick<ToastService, 'show' | 'showError' | 'showInfo' | 'showSuccess'>
+    Pick<ToastService, 'showError' | 'showInfo' | 'showSuccess'>
  >
  let finished$: Subject<{ taskId: string }>
  let failed$: Subject<{ taskId: string; message?: string }>
@@ -55,7 +54,6 @@ describe('DocumentVersionDropdownComponent', () => {
    }
    modalService = { open: jest.fn() }
    toastService = {
-      show: jest.fn(),
      showError: jest.fn(),
      showInfo: jest.fn(),
      showSuccess: jest.fn(),
@@ -90,10 +88,6 @@ describe('DocumentVersionDropdownComponent', () => {
          provide: PermissionsService,
          useValue: permissionsService,
        },
-        {
-          provide: Router,
-          useValue: { navigate: jest.fn() },
-        },
        {
          provide: WebsocketStatusService,
          useValue: {
@@ -383,8 +377,7 @@ describe('DocumentVersionDropdownComponent', () => {
    expect(component.versionLabelDraft).toEqual('')
  })

-  it('addExistingDocumentAsVersion should queue with a label and wait to refresh versions', () => {
-    jest.useFakeTimers()
+  it('addExistingDocumentAsVersion should merge with a label and refresh versions', () => {
    const confirmClicked = new Subject<number>()
    const modal = {
      componentInstance: {
@@ -395,9 +388,14 @@ describe('DocumentVersionDropdownComponent', () => {
      close: jest.fn(),
    }
    modalService.open.mockReturnValue(modal as any)
-    documentService.mergeDocumentsAsVersions.mockReturnValue(
-      of({ result: 'OK', task_id: 'versions-1' })
-    )
+    documentService.mergeDocumentsAsVersions.mockReturnValue(of({} as any))
+    // Newest first, as the API returns them. The merged document has a lower id
+    // than the root, which is the whole point of merging an existing document.
+    const versions: DocumentVersionInfo[] = [
+      { id: 2, is_root: false, checksum: 'cccc' },
+      { id: 3, is_root: true, checksum: 'aaaa' },
+    ]
+    documentService.getVersions.mockReturnValue(of({ id: 3, versions } as any))
    component.newVersionLabel = '  Imported  '
    const versionsEmitSpy = jest.spyOn(component.versionsUpdated, 'emit')
    const selectedEmitSpy = jest.spyOn(component.versionSelected, 'emit')
@@ -412,18 +410,11 @@ describe('DocumentVersionDropdownComponent', () => {
      'Imported'
    )
    expect(documentService.updateVersionLabel).not.toHaveBeenCalled()
-    expect(documentService.getVersions).not.toHaveBeenCalled()
-    expect(versionsEmitSpy).not.toHaveBeenCalled()
-    expect(selectedEmitSpy).not.toHaveBeenCalled()
+    expect(documentService.getVersions).toHaveBeenCalledWith(3)
+    expect(versionsEmitSpy).toHaveBeenCalledWith(versions)
+    expect(selectedEmitSpy).toHaveBeenCalledWith(2)
    expect(component.newVersionLabel).toEqual('')
    expect(modal.close).toHaveBeenCalled()
-    jest.advanceTimersByTime(400)
-    expect(toastService.show).toHaveBeenCalledWith(
-      expect.objectContaining({
-        content: 'Existing document queued to be added as a version.',
-        actionName: 'View task',
-      })
-    )
-    jest.useRealTimers()
+    expect(toastService.showSuccess).toHaveBeenCalled()
  })
 })
@@ -28,7 +28,6 @@ import { DocumentVersionInfo } from 'src/app/data/document'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { TaskNotificationService } from 'src/app/services/task-notification.service'
 import { ToastService } from 'src/app/services/toast.service'
 import {
  UploadState,
@@ -78,7 +77,6 @@ export class DocumentVersionDropdownComponent
  private readonly toastService = inject(ToastService)
  private readonly websocketStatusService = inject(WebsocketStatusService)
  private readonly modalService = inject(NgbModal)
-  private readonly taskNotifications = inject(TaskNotificationService)
  private readonly destroy$ = new Subject<void>()
  private readonly documentChange$ = new Subject<void>()

@@ -307,19 +305,23 @@ export class DocumentVersionDropdownComponent
            versionLabel
          )
          .pipe(
+            switchMap(() => this.documentsService.getVersions(this.documentId)),
            first(),
            finalize(() => dialog.buttonsEnabled.set(true)),
            takeUntil(this.destroy$),
            takeUntil(this.documentChange$)
          )
          .subscribe({
-            next: ({ task_id }) => {
+            next: (document) => {
+              if (document?.versions?.length) {
+                this.versionsUpdated.emit(document.versions)
+                // The API returns versions newest first
+                this.versionSelected.emit(document.versions[0].id)
+              }
              this.newVersionLabel = ''
              modal.close()
-              this.taskNotifications.showQueued(
-                task_id,
-                $localize`Existing document queued to be added as a version.`,
-                { content: $localize`Existing document added as a version.` }
+              this.toastService.showSuccess(
+                $localize`Existing document added as a version.`
              )
            },
            error: (error) => {
@@ -103,6 +103,11 @@
              <pngx-bs-icon name="play-circle" class="me-2"></pngx-bs-icon><ng-container i18n>Run workflow</ng-container>
            </button>
          }
+          @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.OcrTemplate)) {
+            <button ngbDropdownItem (click)="runZoneOcrSelected()" [disabled]="!userCanEditAll">
+              <pngx-bs-icon name="bounding-box-circles" class="me-2"></pngx-bs-icon><ng-container i18n>Run Zone OCR</ng-container>
+            </button>
+          }
        </div>
      </div>
    </div>
@@ -699,8 +699,6 @@ describe('BulkEditorComponent', () => {
    component.runWorkflowSelected()
    expect(modal).not.toBeUndefined()
    expect(modal.componentInstance.workflows).toEqual(component.manualWorkflows)
-    expect(modal.componentInstance.singleDocument).toBe(false)
-    expect(modal.componentInstance.force).toBe(false)
    modal.componentInstance.workflowId = 5
    modal.componentInstance.force = true
    modal.componentInstance.confirm()
@@ -1239,15 +1237,14 @@ describe('BulkEditorComponent', () => {
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/delete/`
    )
-    const trackSpy = jest
-      .spyOn(trashService, 'trackMovedToTrash')
+    const notifySpy = jest
+      .spyOn(trashService, 'notifyMovedToTrash')
      .mockImplementation(() => {})
-    req.flush({ result: 'OK', task_id: 'delete-1' })
+    req.flush(true)
    expect(req.request.body).toEqual({
      documents: [3, 4],
-      from_webui: true,
    })
-    expect(trackSpy).toHaveBeenCalledWith('delete-1', 2, [3, 4])
+    expect(notifySpy).toHaveBeenCalledWith(expect.any(String), [3, 4])
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
    ) // list reload
@@ -1264,9 +1261,9 @@ describe('BulkEditorComponent', () => {
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/delete/`
    )
-    req.flush({ result: 'OK', task_id: 'delete-2' })
+    req.flush(true)
    // ids aren't known when all matching documents are selected, so no undo
-    expect(trackSpy).toHaveBeenLastCalledWith('delete-2', 0, null)
+    expect(notifySpy).toHaveBeenLastCalledWith(expect.any(String), null)
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
    ) // list reload
@@ -1346,11 +1343,10 @@ describe('BulkEditorComponent', () => {
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/reprocess/`
    )
-    req.flush({ result: 'OK', task_id: 'reprocess-1' })
+    req.flush(true)
    expect(req.request.body).toEqual({
      documents: [3, 4],
      remote_ocr: false,
-      from_webui: true,
    })
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
@@ -1360,6 +1356,53 @@ describe('BulkEditorComponent', () => {
    ) // listAllFilteredIds
  })

+  it('should support run zone ocr', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'documents', 'get')
+      .mockReturnValue([{ id: 3 }, { id: 4 }])
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 4]))
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    fixture.detectChanges()
+    component.runZoneOcrSelected()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.confirm()
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/run_zone_ocr/`
+    )
+    req.flush(true)
+    expect(req.request.body).toEqual({
+      documents: [3, 4],
+    })
+
+    component.runZoneOcrSelected()
+    modal.componentInstance.template = 3
+    modal.componentInstance.confirm()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/run_zone_ocr/`
+    )
+    req.flush(true)
+    expect(req.request.body).toEqual({
+      documents: [3, 4],
+      template: 3,
+    })
+    httpTestingController.match(
+      `${environment.apiBaseUrl}ocr_templates/?page=1&page_size=100000`
+    ) // template list
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
+    ) // list reload
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
+    ) // listAllFilteredIds
+  })
+
  it('should support rotate', () => {
    let modal: NgbModalRef
    modalService.activeInstances.subscribe((m) => (modal = m[0]))
@@ -1381,12 +1424,11 @@ describe('BulkEditorComponent', () => {
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/rotate/`
    )
-    req.flush({ result: 'OK', task_id: 'rotate-1' })
+    req.flush(true)
    expect(req.request.body).toEqual({
      documents: [3, 4],
      degrees: 90,
      source_mode: 'latest_version',
-      from_webui: true,
    })
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
@@ -1424,11 +1466,10 @@ describe('BulkEditorComponent', () => {
    let req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/merge/`
    )
-    req.flush({ result: 'OK', task_id: 'merge-1' })
+    req.flush(true)
    expect(req.request.body).toEqual({
      documents: [3, 4],
      metadata_document_id: 3,
-      from_webui: true,
    })
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
@@ -1443,12 +1484,11 @@ describe('BulkEditorComponent', () => {
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/merge/`
    )
-    req.flush({ result: 'OK', task_id: 'merge-2' })
+    req.flush(true)
    expect(req.request.body).toEqual({
      documents: [3, 4],
      metadata_document_id: 3,
      delete_originals: true,
-      from_webui: true,
    })
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
@@ -1465,12 +1505,11 @@ describe('BulkEditorComponent', () => {
    req = httpTestingController.expectOne(
      `${environment.apiBaseUrl}documents/merge/`
    )
-    req.flush({ result: 'OK', task_id: 'merge-3' })
+    req.flush(true)
    expect(req.request.body).toEqual({
      documents: [3, 4],
      metadata_document_id: 3,
      archive_fallback: true,
-      from_webui: true,
    })
    httpTestingController.match(
      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
@@ -1482,7 +1521,6 @@ describe('BulkEditorComponent', () => {
  })

  it('should support merging documents as versions', () => {
-    jest.useFakeTimers()
    let modal: NgbModalRef
    modalService.activeInstances.subscribe((m) => (modal = m[0]))
    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
@@ -1510,8 +1548,8 @@ describe('BulkEditorComponent', () => {
      .mockReturnValue(true)
    const mergeAsVersionsSpy = jest
      .spyOn(documentService, 'mergeDocumentsAsVersions')
-      .mockReturnValue(of({ result: 'OK', task_id: 'versions-1' }))
-    const toastSpy = jest.spyOn(toastService, 'show')
+      .mockReturnValue(of(true))
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
    fixture.detectChanges()

    component.mergeSelectedAsVersions()
@@ -1527,11 +1565,9 @@ describe('BulkEditorComponent', () => {
      `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
    )
    expect(documentListViewService.selected.size).toEqual(0)
-    jest.advanceTimersByTime(400)
-    expect(toastSpy).toHaveBeenCalledWith(
-      expect.objectContaining({ content: 'Bulk operation queued.' })
+    expect(toastSuccessSpy).toHaveBeenCalledWith(
+      'Documents merged as versions.'
    )
-    jest.useRealTimers()
  })

  it('should not report success when merging documents as versions fails', () => {
@@ -1625,7 +1661,6 @@ describe('BulkEditorComponent', () => {
  it.each([true, false])(
    'shows queued feedback and gates the task link on permission (%s)',
    (canViewTasks) => {
-      jest.useFakeTimers()
      jest
        .spyOn(permissionsService, 'currentUserCan')
        .mockReturnValue(canViewTasks)
@@ -1646,8 +1681,6 @@ describe('BulkEditorComponent', () => {
      )
      req.flush({ result: 'OK', task_id: 'queued-operation' })
      expect(close).toHaveBeenCalledTimes(1)
-      expect(queued).not.toHaveBeenCalled()
-      jest.advanceTimersByTime(400)
      const notification = queued.mock.calls.at(-1)[0]
      expect(notification.content).toBe('Bulk operation queued.')
      if (canViewTasks) {
@@ -1663,7 +1696,6 @@ describe('BulkEditorComponent', () => {
      expect(reload).not.toHaveBeenCalled()
      expect(documentListViewService.selected.size).toBe(0)
      expect(documentListViewService.allSelected).toBe(false)
-      jest.useRealTimers()
    }
  )

@@ -19,18 +19,25 @@ import {
  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
 import { saveAs } from 'file-saver'
-import { first, map, Observable, Subject, switchMap, takeUntil } from 'rxjs'
+import {
+  first,
+  map,
+  Observable,
+  Subject,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs'
 import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
-import { BulkOperationResponse } from 'src/app/data/bulk-operation'
 import { CustomField } from 'src/app/data/custom-field'
 import { MatchingModel } from 'src/app/data/matching-model'
 import { SelectionDataItem } from 'src/app/data/results'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { Workflow } from 'src/app/data/workflow'
-import { WorkflowTriggerType } from 'src/app/data/workflow-trigger'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import {
  PermissionAction,
  PermissionsService,
@@ -45,12 +52,12 @@ import {
  DocumentService,
  MergeDocumentsRequest,
 } from 'src/app/services/rest/document.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
+import { WorkflowService } from 'src/app/services/rest/workflow.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { WorkflowService } from 'src/app/services/rest/workflow.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { TaskNotificationService } from 'src/app/services/task-notification.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { flattenTags } from 'src/app/utils/flatten-tags'
@@ -60,6 +67,7 @@ import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-c
 import { ReprocessConfirmDialogComponent } from '../../common/confirm-dialog/reprocess-confirm-dialog/reprocess-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { RunWorkflowConfirmDialogComponent } from '../../common/confirm-dialog/run-workflow-confirm-dialog/run-workflow-confirm-dialog.component'
+import { ZoneOcrConfirmDialogComponent } from '../../common/confirm-dialog/zone-ocr-confirm-dialog/zone-ocr-confirm-dialog.component'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -77,6 +85,7 @@ import { PermissionsDialogComponent } from '../../common/permissions-dialog/perm
 import { ShareLinkBundleDialogComponent } from '../../common/share-link-bundle-dialog/share-link-bundle-dialog.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 import { CustomFieldsBulkEditDialogComponent } from './custom-fields-bulk-edit-dialog/custom-fields-bulk-edit-dialog.component'
+import { WorkflowTriggerType } from 'src/app/data/workflow-trigger'

@Component({
  selector: 'pngx-bulk-editor',
@@ -102,12 +111,13 @@ export class BulkEditorComponent
  private documentService = inject(DocumentService)
  private trashService = inject(TrashService)
  private modalService = inject(NgbModal)
+  private openDocumentService = inject(OpenDocumentsService)
  private settings = inject(SettingsService)
  private toastService = inject(ToastService)
-  private taskNotifications = inject(TaskNotificationService)
  private storagePathService = inject(StoragePathService)
  private customFieldService = inject(CustomFieldsService)
  public readonly permissionService = inject(PermissionsService)
+  private savedViewService = inject(SavedViewService)
  private readonly shareLinkBundleService = inject(ShareLinkBundleService)
  private readonly workflowService = inject(WorkflowService)
  private readonly router = inject(Router)
@@ -338,39 +348,65 @@ export class BulkEditorComponent
      })
  }

-  private handleOperationQueued(
-    modal: NgbModalRef,
-    taskId: string,
-    onQueued?: (taskId: string) => void
-  ) {
+  private handleOperationQueued(modal: NgbModalRef, taskId: string) {
    modal?.close()
    this.list.selectNone()
-    if (onQueued) {
-      onQueued(taskId)
-    } else {
-      this.taskNotifications.showQueued(
-        taskId,
-        $localize`Bulk operation queued.`
-      )
-    }
+    const canViewTasks = this.permissionService.currentUserCan(
+      PermissionAction.View,
+      PermissionType.PaperlessTask
+    )
+    this.toastService.show({
+      content: $localize`Bulk operation queued.`,
+      delay: 5000,
+      ...(canViewTasks
+        ? {
+            actionName: $localize`View task`,
+            action: () =>
+              this.router.navigate(['/tasks'], {
+                queryParams: { task_id: taskId },
+              }),
+          }
+        : {}),
+    })
  }

  private executeDocumentAction(
    modal: NgbModalRef,
-    request: Observable<BulkOperationResponse>,
-    onQueued?: (taskId: string) => void
+    request: Observable<any>,
+    options: { clearSelection?: boolean; successMessage?: string } = {}
  ) {
    if (modal) {
      modal.componentInstance.buttonsEnabled.set(false)
    }
    request.pipe(first()).subscribe({
-      next: ({ task_id }) => {
-        this.handleOperationQueued(modal, task_id, onQueued)
+      next: () => {
+        this.handleOperationSuccess(modal, options.clearSelection ?? false)
+        if (options.successMessage) {
+          this.toastService.showSuccess(options.successMessage)
+        }
      },
      error: (error) => this.handleOperationError(modal, error),
    })
  }

+  private handleOperationSuccess(
+    modal: NgbModalRef,
+    clearSelection: boolean = false
+  ) {
+    if (clearSelection) {
+      this.list.selected.clear()
+    }
+    this.list.reload()
+    this.list.reduceSelectionToFilter()
+    this.list.selected.forEach((id) => {
+      this.openDocumentService.refreshDocument(id)
+    })
+    this.savedViewService.maybeRefreshDocumentCounts()
+    if (modal) {
+      modal.close()
+    }
+  }
+
  private handleOperationError(modal: NgbModalRef, error: any) {
    if (modal) {
      modal.componentInstance.buttonsEnabled.set(true)
@@ -938,8 +974,16 @@ export class BulkEditorComponent
    const count = this.getSelectionSize()
    this.executeDocumentAction(
      modal,
-      this.documentService.deleteDocuments(this.getSelectionQuery()),
-      (taskId) => this.trashService.trackMovedToTrash(taskId, count, documents)
+      this.documentService
+        .deleteDocuments(this.getSelectionQuery())
+        .pipe(
+          tap(() =>
+            this.trashService.notifyMovedToTrash(
+              $localize`Moved ${count} document(s) to the trash`,
+              documents
+            )
+          )
+        )
    )
  }

@@ -988,6 +1032,30 @@ export class BulkEditorComponent
      })
  }

+  runZoneOcrSelected() {
+    const modal = this.modalService.open(ZoneOcrConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    const dialog = modal.componentInstance as ZoneOcrConfirmDialogComponent
+    dialog.title = $localize`Run zone OCR confirm`
+    dialog.messageBold = $localize`This operation will run zone OCR on ${this.getSelectionSize()} selected document(s).`
+    dialog.message = $localize`Fields filled by the template will be overwritten.`
+    dialog.btnClass = 'btn-warning'
+    dialog.btnCaption = $localize`Proceed`
+    dialog.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        dialog.buttonsEnabled.set(false)
+        this.executeDocumentAction(
+          modal,
+          this.documentService.runZoneOcrDocuments(
+            this.getSelectionQuery(),
+            dialog.template
+          )
+        )
+      })
+  }
+
  setPermissions() {
    let modal = this.modalService.open(PermissionsDialogComponent, {
      backdrop: 'static',
@@ -1053,7 +1121,11 @@ export class BulkEditorComponent
        mergeDialog.buttonsEnabled.set(false)
        this.executeDocumentAction(
          modal,
-          this.documentService.mergeDocuments(mergeDialog.documentIDs(), args)
+          this.documentService.mergeDocuments(mergeDialog.documentIDs(), args),
+          { clearSelection: !!args.delete_originals }
+        )
+        this.toastService.showInfo(
+          $localize`Merged document will be queued for consumption.`
        )
      })
  }
@@ -1078,7 +1150,11 @@ export class BulkEditorComponent
          this.documentService.mergeDocumentsAsVersions(
            mergeDialog.documentIDs(),
            mergeDialog.rootDocumentID()
-          )
+          ),
+          {
+            clearSelection: true,
+            successMessage: $localize`Documents merged as versions.`,
+          }
        )
      })
  }
@@ -16,14 +16,11 @@
    font-weight: bold;
  }

-  h1 { font-size: 1.25em; }
-  h2 { font-size: 1.15em; }
-  h3 { font-size: 1.05em; }
-
  table {
    margin-bottom: 1rem;
    display: block;
    overflow-x: auto;
+    white-space: nowrap;
  }

  th, td {
@@ -0,0 +1,36 @@
+@if (zones.length === 0) {
+  <p class="text-muted" i18n>No zones yet. Drag anywhere on the sample document to create one.</p>
+} @else {
+  <div class="list-group">
+    @for (zone of zones; track $index; let i = $index) {
+      <div class="list-group-item list-group-item-action d-flex align-items-center gap-3 position-relative">
+        <span class="p-2 rounded flex-shrink-0" [style.background-color]="zoneColor(i)" aria-hidden="true"></span>
+        <div class="flex-grow-1 text-truncate">
+          <button type="button" class="btn btn-link p-0 fw-semibold text-reset text-decoration-none text-truncate mw-100 stretched-link" (click)="zoneSelected.emit(i)">{{ zone.name }}</button>
+          @if (!hasField(zone)) {
+            <div class="small text-warning text-truncate">
+              <pngx-bs-icon name="exclamation-triangle" class="me-1" aria-hidden="true"></pngx-bs-icon><span i18n>No field selected</span>
+            </div>
+          } @else {
+            <div class="small text-muted text-truncate">
+              {{ getZoneTargetName(zone) }}
+              @if (isCombined(zone)) {
+                <pngx-bs-icon name="braces" class="ms-1" title="Combined with other zones" i18n-title></pngx-bs-icon>
+              }
+            </div>
+          }
+        </div>
+        <small class="text-muted text-nowrap">
+          @if (zone.page === -1) {
+            <ng-container i18n>Last page</ng-container>
+          } @else {
+            <ng-container i18n>Page {{ zone.page ?? 1 }}</ng-container>
+          }
+        </small>
+        <button type="button" class="btn btn-sm btn-link text-danger position-relative z-2" (click)="zoneRemoved.emit(i)" title="Delete zone" i18n-title aria-label="Delete zone" i18n-aria-label>
+          <pngx-bs-icon name="trash"></pngx-bs-icon>
+        </button>
+      </div>
+    }
+  </div>
+}
@@ -0,0 +1,115 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { CustomField } from 'src/app/data/custom-field'
+import {
+  OcrTemplateZone,
+  OcrZoneTarget,
+  OcrZoneTransform,
+} from 'src/app/data/ocr-template'
+import { OcrTemplateEditorZoneListComponent } from './ocr-template-editor-zone-list.component'
+
+function zone(overrides: Partial<OcrTemplateZone> = {}): OcrTemplateZone {
+  return {
+    name: 'Zone 1',
+    target: OcrZoneTarget.CustomField,
+    custom_field: 7,
+    x: 10,
+    y: 20,
+    width: 30,
+    height: 40,
+    page: 1,
+    ocr_language: 'eng',
+    transform: OcrZoneTransform.Strip,
+    validation_regex: '',
+    order: 0,
+    ...overrides,
+  }
+}
+
+describe('OcrTemplateEditorZoneListComponent', () => {
+  let fixture: ComponentFixture<OcrTemplateEditorZoneListComponent>
+  let component: OcrTemplateEditorZoneListComponent
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OcrTemplateEditorZoneListComponent, BootstrapIconComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(OcrTemplateEditorZoneListComponent)
+    component = fixture.componentInstance
+  })
+
+  it('shows empty state when no zones are defined', () => {
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.textContent).toContain('No zones yet')
+  })
+
+  it('renders zone name, target, and page', () => {
+    component.zones = [zone(), zone({ name: 'Zone 2', page: -1 })]
+    component.customFields = [{ id: 7, name: 'Invoice Number' } as CustomField]
+    fixture.detectChanges()
+
+    const text = fixture.nativeElement.textContent
+    expect(text).toContain('Zone 1')
+    expect(text).toContain('Invoice Number')
+    expect(text).toContain('Page 1')
+    expect(text).toContain('Last page')
+  })
+
+  it('marks zones that share a field', () => {
+    component.zones = [
+      zone(),
+      zone({ name: 'Zone 2' }),
+      zone({ name: 'Zone 3', custom_field: 8 }),
+    ]
+    fixture.detectChanges()
+
+    expect(component.isCombined(component.zones[0])).toBe(true)
+    expect(component.isCombined(component.zones[2])).toBe(false)
+    expect(
+      fixture.nativeElement.querySelectorAll(
+        '[title="Combined with other zones"]'
+      )
+    ).toHaveLength(2)
+  })
+
+  it('warns only for zones without a field and clears the warning when assigned', () => {
+    component.zones = [
+      zone({ custom_field: null }),
+      zone({ target: OcrZoneTarget.Title, custom_field: null }),
+      zone(),
+    ]
+    fixture.detectChanges()
+
+    const warnings = () =>
+      fixture.nativeElement.querySelectorAll('.text-warning')
+    expect(warnings()).toHaveLength(1)
+    expect(warnings()[0].textContent).toContain('No field selected')
+
+    component.zones[0].custom_field = 7
+    fixture.componentRef.setInput('zones', [...component.zones])
+    fixture.detectChanges()
+    expect(warnings()).toHaveLength(0)
+  })
+
+  it('emits select and remove events', () => {
+    component.zones = [zone()]
+    const selectSpy = jest.spyOn(component.zoneSelected, 'emit')
+    const removeSpy = jest.spyOn(component.zoneRemoved, 'emit')
+    fixture.detectChanges()
+
+    const buttons = fixture.nativeElement.querySelectorAll('button')
+    buttons[0].click()
+    buttons[1].click()
+
+    expect(selectSpy).toHaveBeenCalledWith(0)
+    expect(removeSpy).toHaveBeenCalledWith(0)
+  })
+
+  it('does not label an unknown built-in target', () => {
+    expect(
+      component.getZoneTargetName(zone({ target: 'unknown' as OcrZoneTarget }))
+    ).toBe('')
+  })
+})
@@ -0,0 +1,50 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { CustomField } from 'src/app/data/custom-field'
+import {
+  getZoneFieldKey,
+  OCR_BUILTIN_TARGETS,
+  OcrTemplateZone,
+  OcrZoneTarget,
+} from 'src/app/data/ocr-template'
+import { getZoneColor } from '../zone-geometry'
+
+@Component({
+  selector: 'pngx-ocr-template-zone-list',
+  imports: [BootstrapIconComponent],
+  templateUrl: './ocr-template-editor-zone-list.component.html',
+})
+export class OcrTemplateEditorZoneListComponent {
+  @Input() zones: OcrTemplateZone[] = []
+  @Input() customFields: CustomField[] = []
+
+  @Output() public readonly zoneSelected = new EventEmitter<number>()
+  @Output() public readonly zoneRemoved = new EventEmitter<number>()
+
+  public readonly zoneColor = getZoneColor
+
+  hasField(zone: OcrTemplateZone): boolean {
+    return getZoneFieldKey(zone) !== null
+  }
+
+  isCombined(zone: OcrTemplateZone): boolean {
+    const key = getZoneFieldKey(zone)
+    return (
+      key !== null &&
+      this.zones.filter((z) => getZoneFieldKey(z) === key).length > 1
+    )
+  }
+
+  getZoneTargetName(zone: OcrTemplateZone): string {
+    if (zone.target === OcrZoneTarget.CustomField) {
+      return (
+        this.customFields.find((field) => field.id === zone.custom_field)
+          ?.name ?? ''
+      )
+    }
+    return (
+      OCR_BUILTIN_TARGETS.find((target) => target.id === zone.target)?.name ??
+      ''
+    )
+  }
+}
@@ -0,0 +1,313 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="ocr-template-editor-title">{{ dialogTitle }}</h4>
+  @if (template.id) {
+    <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{ template.id }}</span>
+  }
+  <button type="button" class="btn-close" (click)="activeModal.dismiss()" [disabled]="saving()" aria-label="Close" i18n-aria-label></button>
+</div>
+
+<div class="modal-body d-flex flex-column">
+  <div class="row gx-3 editor-layout flex-grow-1 flex-lg-nowrap" [attr.inert]="saving() ? '' : null" [attr.aria-busy]="saving()">
+    <div class="col-lg-4 mb-3 mb-lg-0 overflow-auto">
+      <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-underline flex-nowrap flex-md-wrap overflow-auto">
+        <li ngbNavItem="template">
+          <a ngbNavLink i18n>Template</a>
+          <ng-template ngbNavContent>
+            <div class="row mb-3">
+              <div class="col-9">
+                <pngx-input-text [(ngModel)]="template.name" title="Template name" i18n-title></pngx-input-text>
+              </div>
+              <div class="col-3">
+                <pngx-input-switch [(ngModel)]="template.enabled" title="Enabled" i18n-title></pngx-input-switch>
+              </div>
+            </div>
+
+            <pngx-input-select [(ngModel)]="template.matching_algorithm" [items]="matchingAlgorithms" title="Matching algorithm" i18n-title></pngx-input-select>
+            @if (patternRequired) {
+              <pngx-input-text [(ngModel)]="template.match" title="Matching pattern" i18n-title></pngx-input-text>
+              <pngx-input-check [(ngModel)]="template.is_insensitive" title="Case insensitive" i18n-title></pngx-input-check>
+            }
+
+            <div *pngxIfOwner="object">
+              <hr />
+              <pngx-permissions-form [users]="users()" [accordion]="true" [(ngModel)]="permissionsForm"></pngx-permissions-form>
+            </div>
+
+          </ng-template>
+        </li>
+
+        <li ngbNavItem="zones">
+          <a ngbNavLink><ng-container i18n>Zones</ng-container> <span class="badge bg-primary ms-2">{{ template.zones.length }}</span></a>
+          <ng-template ngbNavContent>
+            @if (selectedZone; as zone) {
+              <div class="d-flex align-items-center gap-2 mb-3">
+                <button type="button" class="btn btn-sm btn-link px-0 me-auto" (click)="deselectZone()">
+                  <pngx-bs-icon name="arrow-left" class="me-1"></pngx-bs-icon><ng-container i18n>All zones</ng-container>
+                </button>
+                <button type="button" class="btn btn-sm btn-outline-primary" (click)="testZone()" [disabled]="!previewDocId || zoneTesting">
+                  @if (zoneTesting) {
+                    <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
+                  } @else {
+                    <pngx-bs-icon name="play-fill" class="me-1"></pngx-bs-icon>
+                  }
+                  <ng-container i18n>Test</ng-container>
+                </button>
+                <button type="button" class="btn btn-sm btn-outline-danger" (click)="removeZone(selectedZoneIndex)" title="Delete zone" i18n-title aria-label="Delete zone" i18n-aria-label>
+                  <pngx-bs-icon name="trash"></pngx-bs-icon>
+                </button>
+              </div>
+
+              @if (zoneTestResult; as result) {
+                @if (result.error) {
+                  <div class="alert alert-warning py-2 mb-3 small" role="alert">{{ result.error }}</div>
+                } @else {
+                  <dl class="row small border rounded mx-0 py-2 mb-3">
+                    <dt class="col-4" i18n>OCR text</dt>
+                    <dd class="col-8">
+                      @if (result.raw_text) {
+                        <code>{{ result.raw_text }}</code>
+                      } @else {
+                        <span class="text-muted" i18n>Nothing detected</span>
+                      }
+                    </dd>
+                    <dt class="col-4" i18n>Value</dt>
+                    <dd class="col-8" [class.mb-0]="!result.regex">
+                      @if (result.value) {
+                        <code>{{ result.value }}</code>
+                      } @else {
+                        <span class="text-muted" i18n>Empty</span>
+                      }
+                    </dd>
+                    @if (result.regex) {
+                      <dt class="col-4" i18n>Validation</dt>
+                      <dd class="col-8 mb-0">
+                        @if (result.regex_match) {
+                          <span class="badge bg-success" i18n>Regex matches</span>
+                        } @else {
+                          <span class="badge bg-danger" i18n>Regex does not match</span>
+                        }
+                      </dd>
+                    }
+                  </dl>
+                }
+              }
+
+              <pngx-input-text [ngModel]="zone.name" (ngModelChange)="renameZone(zone, $event)" title="Name" i18n-title></pngx-input-text>
+
+              <pngx-input-select
+                [items]="fieldItems()"
+                [ngModel]="zoneFieldValue(zone)"
+                (ngModelChange)="setZoneField(zone, $event)"
+                (createNew)="createField($event)"
+                title="Field"
+                i18n-title
+                placeholder="Choose a field"
+                i18n-placeholder
+                hint="Where the extracted value is written."
+                i18n-hint
+              ></pngx-input-select>
+
+              @if (isFieldShared(zone)) {
+                <pngx-input-text
+                  [ngModel]="getCombineFormat(zone)"
+                  (ngModelChange)="setCombineFormat(zone, $event)"
+                  [placeholder]="defaultCombineFormat(zone)"
+                  title="Combined value"
+                  i18n-title
+                  hint="Several zones write to this field. Set the format or leave empty to join them with spaces."
+                  i18n-hint
+                ></pngx-input-text>
+                <div class="d-flex flex-wrap gap-1 mt-n2 mb-3">
+                  @for (z of zonesForField(zone); track z) {
+                    <button type="button" class="btn btn-sm btn-outline-secondary font-monospace" (click)="insertCombineToken(zone, z)">{{ '{' + z.name + '}' }}</button>
+                  }
+                </div>
+              }
+
+              <div class="row align-items-end">
+                <div class="col">
+                  @if (!isLastPageZone(zone)) {
+                    <pngx-input-number [(ngModel)]="zone.page" [showAdd]="false" title="Page" i18n-title></pngx-input-number>
+                  }
+                </div>
+                <div class="col-auto">
+                  <pngx-input-switch [ngModel]="isLastPageZone(zone)" (ngModelChange)="setLastPageZone(zone, $event)" [horizontal]="true" title="Last page" i18n-title></pngx-input-switch>
+                </div>
+              </div>
+
+              <h6 class="border-top pt-3 mt-1 mb-3" i18n>Processing</h6>
+
+              <pngx-input-select
+                [items]="languageOptions"
+                [multiple]="true"
+                [ngModel]="ocrLanguageArray(zone)"
+                (ngModelChange)="setOcrLanguages(zone, $event)"
+                title="OCR language"
+                i18n-title
+                placeholder="Select languages"
+                i18n-placeholder
+              ></pngx-input-select>
+
+              <pngx-input-select [items]="transformOptions" [(ngModel)]="zone.transform" title="Transform" i18n-title></pngx-input-select>
+
+              @if (zone.transform === OcrZoneTransform.Date) {
+                <pngx-input-text
+                  [(ngModel)]="zone.date_format"
+                  title="Date format"
+                  i18n-title
+                  placeholder="Auto-detect"
+                  i18n-placeholder
+                  hint="Python date codes, e.g. %d.%m.%Y. Leave empty to detect the format automatically."
+                  i18n-hint
+                ></pngx-input-text>
+              }
+
+              <pngx-input-text [(ngModel)]="zone.validation_regex" title="Validation regex" i18n-title placeholder="\d{2}\.\d{2}\.\d{4}" hint="The value must match this pattern to be applied." i18n-hint></pngx-input-text>
+            } @else {
+              <pngx-ocr-template-zone-list
+                [zones]="template.zones"
+                [customFields]="customFields()"
+                (zoneSelected)="selectZone($event)"
+                (zoneRemoved)="removeZone($event)"
+              ></pngx-ocr-template-zone-list>
+            }
+          </ng-template>
+        </li>
+      </ul>
+
+      <div [ngbNavOutlet]="nav" class="mt-3"></div>
+    </div>
+
+    <div class="col-lg-8 d-flex flex-column">
+      <div class="d-flex flex-wrap gap-2 mb-2 flex-shrink-0">
+        <pngx-input-document-link
+          class="flex-grow-1"
+          [ngModel]="sampleDocumentIds"
+          (ngModelChange)="setSampleDocument($event)"
+          [minimal]="true"
+          [multiple]="false"
+          placeholder="Search for a sample document"
+          i18n-placeholder
+        ></pngx-input-document-link>
+        @if (previewDocId) {
+          <div class="input-group w-auto flex-nowrap">
+            <input class="form-control flex-grow-0 preview-page-input" type="number" min="1" [max]="previewPageCount()" [(ngModel)]="previewPageDisplay" [disabled]="!pageLoaded()" aria-label="Page" i18n-aria-label />
+            <span class="input-group-text" i18n>of {{ previewPageCount() ?? '?' }}</span>
+          </div>
+          <fieldset class="input-group w-auto flex-nowrap" aria-label="Zoom" i18n-aria-label>
+            <button type="button" class="btn btn-outline-secondary" aria-label="Zoom out" i18n-aria-label [disabled]="!pageLoaded() || zoom <= 0.5" (click)="zoomOut()"><pngx-bs-icon name="dash"></pngx-bs-icon></button>
+            <button type="button" class="btn btn-outline-secondary preview-zoom" title="Reset zoom" i18n-title [disabled]="!pageLoaded()" (click)="resetZoom()">{{ zoom | percent: '1.0-0' }}</button>
+            <button type="button" class="btn btn-outline-secondary" aria-label="Zoom in" i18n-aria-label [disabled]="!pageLoaded() || zoom >= 4" (click)="zoomIn()"><pngx-bs-icon name="plus"></pngx-bs-icon></button>
+          </fieldset>
+        }
+      </div>
+      <div class="flex-grow-1 overflow-hidden">
+        <div class="h-100 overflow-auto border" [attr.aria-busy]="previewDocId && !pageLoaded()">
+          @if (pageFailed()) {
+            <div class="py-5 px-3 text-center" role="alert">
+              <pngx-bs-icon name="exclamation-triangle" width="32" height="32" class="text-warning"></pngx-bs-icon>
+              <p class="my-3" i18n>Could not load this page.</p>
+              <button type="button" class="btn btn-sm btn-outline-secondary" (click)="setSampleDocument(sampleDocumentIds)"><pngx-bs-icon name="arrow-clockwise" class="me-1"></pngx-bs-icon><span i18n>Retry</span></button>
+            </div>
+          } @else if (previewDocId) {
+            <div class="position-relative" [class.d-none]="!pageLoaded()" [style.width.%]="zoom * 100">
+              <img
+                #pageImage
+                [src]="pageImageUrl"
+                (load)="onImageLoad()"
+                (error)="onImageError()"
+                alt="Sample document page"
+                i18n-alt
+                class="d-block w-100"
+                crossorigin="use-credentials"
+              />
+              @if (pageLoaded()) {
+                <svg
+                  #zoneOverlay
+                  class="zone-overlay position-absolute top-0 start-0 w-100 h-100"
+                  [attr.viewBox]="overlayViewBox()"
+                  preserveAspectRatio="none"
+                  [style.cursor]="overlayCursor"
+                  (pointerdown)="onOverlayPointerDown($event)"
+                  (pointermove)="onOverlayPointerMove($event)"
+                  (pointerup)="onOverlayPointerUp($event)"
+                  (pointercancel)="onOverlayPointerCancel($event)"
+                  (lostpointercapture)="onOverlayPointerCancel($event)"
+                  aria-label="Zone overlay" i18n-aria-label
+                >
+                  @for (zone of template.zones; track $index; let i = $index) {
+                    @if (zoneDisplayRect(i); as rect) {
+                      <g>
+                        <rect
+                          class="zone-rect"
+                          [class.zone-rect-selected]="selectedZoneIndex === i"
+                          [attr.x]="rect.x"
+                          [attr.y]="rect.y"
+                          [attr.width]="rect.w"
+                          [attr.height]="rect.h"
+                          [attr.stroke]="zoneColor(i)"
+                          [attr.fill]="zoneColor(i)"
+                        ></rect>
+                        <text
+                          class="zone-label fw-semibold pe-none"
+                          [attr.x]="rect.x + overlayUnitSize(6)"
+                          [attr.y]="zoneLabelY(rect)"
+                          [attr.font-size]="overlayFontSize()"
+                          [attr.fill]="zoneColor(i)"
+                        >{{ zoneLabel(zone, i) }}</text>
+
+                        @if (selectedZoneIndex === i) {
+                          @for (handle of resizeHandles(rect); track handle.handle) {
+                            <rect
+                              class="zone-resize-handle"
+                              [attr.x]="handle.x - overlayHandleSize() / 2"
+                              [attr.y]="handle.y - overlayHandleSize() / 2"
+                              [attr.width]="overlayHandleSize()"
+                              [attr.height]="overlayHandleSize()"
+                              [attr.fill]="zoneColor(i)"
+                            ></rect>
+                          }
+                        }
+                      </g>
+                    }
+                  }
+
+                  @if (drawingRect(); as rect) {
+                    <rect
+                      class="zone-drawing-rect"
+                      [attr.x]="rect.x"
+                      [attr.y]="rect.y"
+                      [attr.width]="rect.w"
+                      [attr.height]="rect.h"
+                    ></rect>
+                  }
+                </svg>
+              }
+            </div>
+            @if (!pageLoaded()) {
+              <div class="p-5 d-flex justify-content-center align-items-center">
+                <output class="spinner-border">
+                  <span class="visually-hidden" i18n>Loading page...</span>
+                </output>
+              </div>
+            }
+          } @else {
+            <div class="py-5 px-3 text-center text-muted">
+              <pngx-bs-icon name="file-text" width="32" height="32"></pngx-bs-icon>
+              <p class="mt-3 mb-0" i18n>No sample document selected.</p>
+            </div>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-secondary" (click)="activeModal.dismiss()" [disabled]="saving()" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="save()" [disabled]="saving() || !isDirty">
+    @if (saving()) {
+      <span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>
+    }
+    <span i18n>Save</span>
+  </button>
+</div>
@@ -0,0 +1,64 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+@media (min-width: 992px) {
+  .modal-body {
+    overflow: hidden;
+  }
+
+  .editor-layout {
+    min-height: 0;
+  }
+}
+
+.preview-page-input {
+  width: 3.5rem;
+}
+
+.preview-zoom {
+  min-width: 4rem;
+}
+
+.zone-overlay {
+  touch-action: none;
+}
+
+.zone-rect,
+.zone-drawing-rect {
+  vector-effect: non-scaling-stroke;
+}
+
+.zone-rect {
+  fill-opacity: 0.2;
+  stroke-width: 2;
+}
+
+.zone-rect-selected {
+  stroke-width: 3;
+}
+
+.zone-label {
+  font-family: var(--bs-font-sans-serif);
+  paint-order: stroke;
+  stroke: #fff;
+  stroke-linejoin: round;
+  stroke-width: 4px;
+  vector-effect: non-scaling-stroke;
+}
+
+.zone-resize-handle {
+  stroke: #fff;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.zone-drawing-rect {
+  fill: var(--bs-primary);
+  fill-opacity: 0.2;
+  stroke: var(--bs-primary);
+  stroke-dasharray: 5 5;
+  stroke-width: 2;
+}
@@ -0,0 +1,875 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { of, Subject, throwError } from 'rxjs'
+import { PermissionsFormComponent } from 'src/app/components/common/input/permissions/permissions-form/permissions-form.component'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { Document } from 'src/app/data/document'
+import {
+  MATCH_ANY,
+  MATCH_AUTO,
+  MATCH_LITERAL,
+  MATCH_NONE,
+} from 'src/app/data/matching-model'
+import {
+  OcrTemplate,
+  OcrTemplateZone,
+  OcrZoneTarget,
+  OcrZoneTestResult,
+  OcrZoneTransform,
+} from 'src/app/data/ocr-template'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { User } from 'src/app/data/user'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { OcrTemplateEditorComponent } from './ocr-template-editor.component'
+
+const customFields: CustomField[] = [
+  { id: 1, name: 'Invoice number', data_type: CustomFieldDataType.String },
+  { id: 2, name: 'Status', data_type: CustomFieldDataType.Select },
+]
+
+function zone(overrides: Partial<OcrTemplateZone> = {}): OcrTemplateZone {
+  return {
+    name: 'Invoice number',
+    target: OcrZoneTarget.CustomField,
+    custom_field: 1,
+    x: 100,
+    y: 100,
+    width: 200,
+    height: 100,
+    page: 1,
+    ocr_language: 'eng',
+    transform: OcrZoneTransform.Strip,
+    validation_regex: '',
+    order: 0,
+    ...overrides,
+  }
+}
+
+function pointer(x: number, y: number, pointerId = 1): PointerEvent {
+  return Object.assign(
+    new MouseEvent('pointermove', { clientX: x, clientY: y, button: 0 }),
+    { pointerId }
+  ) as PointerEvent
+}
+
+describe('OcrTemplateEditorComponent', () => {
+  let component: OcrTemplateEditorComponent
+  let fixture: ComponentFixture<OcrTemplateEditorComponent>
+  let documentService: DocumentService
+  let templateService: OcrTemplateService
+  let modalService: NgbModal
+  const activeModal = { close: jest.fn(), dismiss: jest.fn() }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BootstrapIconComponent, OcrTemplateEditorComponent],
+      providers: [
+        { provide: NgbActiveModal, useValue: activeModal },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    })
+    jest
+      .spyOn(TestBed.inject(CustomFieldsService), 'listAll')
+      .mockReturnValue(of({ count: 2, all: [1, 2], results: customFields }))
+    jest
+      .spyOn(TestBed.inject(UserService), 'listAll')
+      .mockReturnValue(of({ count: 0, all: [], results: [] }))
+    TestBed.inject(PermissionsService).initialize([], { id: 1 } as User)
+    documentService = TestBed.inject(DocumentService)
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(of({ id: 5, page_count: 3 }))
+    templateService = TestBed.inject(OcrTemplateService)
+    modalService = TestBed.inject(NgbModal)
+    activeModal.close.mockReset()
+    fixture = TestBed.createComponent(OcrTemplateEditorComponent)
+    component = fixture.componentInstance
+  })
+
+  function prepareOverlay() {
+    const image = document.createElement('img')
+    Object.defineProperties(image, {
+      naturalWidth: { value: 1000 },
+      naturalHeight: { value: 1000 },
+      clientWidth: { value: 1000 },
+    })
+    const overlay = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg'
+    )
+    Object.assign(overlay, {
+      getScreenCTM: () => ({ inverse: () => ({}) }),
+      createSVGPoint: () => ({
+        x: 0,
+        y: 0,
+        matrixTransform() {
+          return { x: this.x, y: this.y }
+        },
+      }),
+      setPointerCapture: jest.fn(),
+      hasPointerCapture: () => true,
+      releasePointerCapture: jest.fn(),
+    })
+    component.imageRef = new ElementRef(image)
+    component.overlayRef = new ElementRef(overlay)
+    component.pageLoaded.set(true)
+  }
+
+  function fieldDialog() {
+    const dialog = {
+      dialogMode: { set: jest.fn() },
+      object: null,
+      succeeded: new Subject<CustomField>(),
+      failed: new Subject(),
+    }
+    jest
+      .spyOn(modalService, 'open')
+      .mockReturnValue({ componentInstance: dialog } as any)
+    return dialog
+  }
+
+  it('updates screen-sized overlay units when the preview image resizes', () => {
+    let resize: ResizeObserverCallback
+    const observer = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }
+    const resizeObserver = jest
+      .spyOn(globalThis, 'ResizeObserver')
+      .mockImplementation((callback) => {
+        resize = callback
+        return observer
+      })
+    const image = document.createElement('img')
+    const ref = new ElementRef(image)
+    component.pageImage = ref
+    expect(observer.observe).toHaveBeenCalledWith(image)
+    resize([], observer)
+    expect(component.overlayUnitSize(8)).toBe(8)
+
+    Object.defineProperties(image, {
+      naturalWidth: { value: 1000 },
+      clientWidth: { value: 500 },
+    })
+    resize([], observer)
+    expect(component.overlayUnitSize(8)).toBe(16)
+    expect(component.overlayFontSize()).toBe(24)
+
+    component.pageImage = undefined
+    expect(observer.disconnect).toHaveBeenCalledTimes(1)
+    fixture.destroy()
+    expect(observer.disconnect).toHaveBeenCalledTimes(2)
+    resizeObserver.mockRestore()
+  })
+
+  it('renders loaded image dimensions, zone labels, and selection handles', () => {
+    component.object = {
+      ...component.template,
+      id: 3,
+      sample_document: 5,
+      zones: [zone()],
+    }
+    component.selectedZoneIndex = 0
+    fixture.detectChanges()
+    const image = fixture.nativeElement.querySelector('img')
+    Object.defineProperties(image, {
+      naturalWidth: { value: 1000 },
+      naturalHeight: { value: 1500 },
+    })
+    image.dispatchEvent(new Event('load'))
+    fixture.detectChanges()
+
+    expect(component.template).toMatchObject({
+      source_width: 1000,
+      source_height: 1500,
+    })
+    expect(
+      fixture.nativeElement
+        .querySelector('.zone-overlay')
+        .getAttribute('viewBox')
+    ).toBe('0 0 1000 1500')
+    expect(
+      fixture.nativeElement.querySelector('.zone-label').textContent
+    ).toContain('Invoice number')
+    expect(
+      fixture.nativeElement.querySelectorAll('.zone-resize-handle')
+    ).toHaveLength(8)
+    expect(component.zoneLabel(zone({ name: '' }), 2)).toBe('Zone 3')
+    expect(component.zoneLabelY({ x: 0, y: 0, w: 100, h: 100 })).toBe(14)
+  })
+
+  it('offers the supported language and transform choices', () => {
+    expect(component.languageOptions.map((option) => option.id)).toContain(
+      'eng'
+    )
+    expect(component.transformOptions.map((option) => option.id)).toEqual(
+      Object.values(OcrZoneTransform)
+    )
+  })
+
+  it('clamps page navigation and supports one-based page input', () => {
+    component.setSampleDocument([5])
+    component.previewPageDisplay = 2
+    expect(component.previewPage).toBe(1)
+    expect(component.previewPageDisplay).toBe(2)
+    expect(component.pageImageUrl).toContain('/5/1/')
+    component.pageLoaded.set(true)
+    component.goToPage(1)
+    expect(component.pageLoaded()).toBe(true)
+    component.goToPage(Infinity)
+    component.goToPage(NaN)
+    expect(component.previewPage).toBe(1)
+    component.goToPage(99)
+    expect(component.previewPage).toBe(2)
+    expect(component.pageLoaded()).toBe(false)
+    component.goToPage(-5)
+    expect(component.previewPage).toBe(0)
+    component.previewPageCount.set(null)
+    component.goToPage(4.7)
+    expect(component.previewPage).toBe(4)
+  })
+
+  it('limits zoom and resets it to the original size', () => {
+    for (let i = 0; i < 20; i++) component.zoomIn()
+    expect(component.zoom).toBe(4)
+    for (let i = 0; i < 20; i++) component.zoomOut()
+    expect(component.zoom).toBe(0.5)
+    component.resetZoom()
+    expect(component.zoom).toBe(1)
+  })
+
+  it('moves last-page zones to the last page and can pin them to a page', () => {
+    component.setSampleDocument([5])
+    const selected = zone()
+    component.template.zones = [selected]
+    expect(component.isLastPageZone(selected)).toBe(false)
+    component.setLastPageZone(selected, true)
+    expect(selected.page).toBe(-1)
+    expect(component.isLastPageZone(selected)).toBe(true)
+    component.selectZone(0)
+    expect(component.previewPage).toBe(2)
+    component.setLastPageZone(selected, false)
+    expect(selected.page).toBe(3)
+  })
+
+  it('ignores page-count errors from a previous sample document', () => {
+    const pending = new Subject<Document>()
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(pending)
+      .mockReturnValueOnce(of({ id: 6 }))
+    component.setSampleDocument([5])
+    component.setSampleDocument([6])
+    pending.error(new Error('Old document failed'))
+    expect(component.pageFailed()).toBe(false)
+    expect(component.previewPageCount()).toBeNull()
+  })
+
+  it('ignores non-primary, unloaded, and saving pointer gestures', () => {
+    prepareOverlay()
+    component.onOverlayPointerDown(
+      new MouseEvent('pointerdown', { button: 2 }) as PointerEvent
+    )
+    expect(component.drawingRect()).toBeNull()
+    component.pageLoaded.set(false)
+    component.onOverlayPointerDown(pointer(100, 100))
+    expect(component.drawingRect()).toBeNull()
+    component.pageLoaded.set(true)
+    component.saving.set(true)
+    component.onOverlayPointerDown(pointer(100, 100))
+    expect(component.drawingRect()).toBeNull()
+  })
+
+  it('ignores pointer events when the SVG coordinate transform is unavailable', () => {
+    component.onOverlayPointerDown(pointer(100, 100))
+    expect(component.drawingRect()).toBeNull()
+    prepareOverlay()
+    jest
+      .spyOn(component.overlayRef.nativeElement, 'getScreenCTM')
+      .mockReturnValue(null)
+    component.onOverlayPointerDown(pointer(100, 100))
+    component.onOverlayPointerMove(pointer(200, 200))
+    expect(component.drawingRect()).toBeNull()
+  })
+
+  it('updates a drawing only for its captured pointer', () => {
+    prepareOverlay()
+    component.onOverlayPointerDown(pointer(100, 100))
+    component.onOverlayPointerDown(pointer(500, 500, 2))
+    component.onOverlayPointerMove(pointer(900, 900, 2))
+    expect(component.drawingRect()).toEqual({ x: 100, y: 100, w: 0, h: 0 })
+    component.onOverlayPointerMove(pointer(250, 200))
+    expect(component.drawingRect()).toEqual({ x: 100, y: 100, w: 150, h: 100 })
+    component.onOverlayPointerUp(pointer(250, 200))
+    expect(component.template.zones[0]).toMatchObject({
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 100,
+    })
+  })
+
+  it('resizes a selected zone using its corner handle', () => {
+    prepareOverlay()
+    const selected = zone()
+    component.template.zones = [selected]
+    component.selectZone(0)
+    component.onOverlayPointerDown(pointer(100, 100))
+    component.onOverlayPointerMove(pointer(50, 75))
+    component.onOverlayPointerUp(pointer(60, 80))
+    expect(selected).toMatchObject({ x: 60, y: 80, width: 240, height: 120 })
+    expect(component.template.zones).toHaveLength(1)
+  })
+
+  it('shows the appropriate cursor over handles, zones, and empty space', () => {
+    prepareOverlay()
+    component.template.zones = [zone()]
+    component.onOverlayPointerMove(pointer(150, 150))
+    expect(component.overlayCursor).toBe('move')
+    component.selectZone(0)
+    component.onOverlayPointerMove(pointer(100, 100))
+    expect(component.overlayCursor).toBe('nw-resize')
+    component.onOverlayPointerMove(pointer(500, 500))
+    expect(component.overlayCursor).toBe('crosshair')
+    component.template.zones[0].page = 2
+    component.onOverlayPointerMove(pointer(100, 100))
+    expect(component.zoneDisplayRect(0)).toBeNull()
+    expect(component.overlayCursor).toBe('crosshair')
+  })
+
+  it('cancels only the captured pointer and tolerates an already-lost capture', () => {
+    prepareOverlay()
+    component.onOverlayPointerCancel(pointer(100, 100))
+    component.onOverlayPointerDown(pointer(100, 100))
+    component.onOverlayPointerCancel(pointer(150, 150, 2))
+    expect(component.drawingRect()).not.toBeNull()
+    jest
+      .spyOn(component.overlayRef.nativeElement, 'hasPointerCapture')
+      .mockReturnValue(false)
+    component.onOverlayPointerCancel(pointer(150, 150))
+    expect(component.drawingRect()).toBeNull()
+    expect(
+      component.overlayRef.nativeElement.releasePointerCapture
+    ).not.toHaveBeenCalled()
+    expect(component.template.zones).toEqual([])
+  })
+
+  it('preserves the selected zone when an earlier or later zone is removed', () => {
+    component.template.zones = [zone(), zone(), zone(), zone()]
+    component.selectZone(1)
+    const selected = component.selectedZone
+    component.removeZone(3)
+    expect(component.selectedZone).toBe(selected)
+    component.removeZone(0)
+    expect(component.selectedZoneIndex).toBe(0)
+    expect(component.selectedZone).toBe(selected)
+    component.selectZone(99)
+    expect(component.selectedZone).toBeNull()
+  })
+
+  it('does not test zones without a selection or a sample document', () => {
+    const test = jest.spyOn(templateService, 'testZone')
+    component.testZone()
+    component.template.zones = [zone()]
+    component.selectZone(0)
+    component.testZone()
+    expect(test).not.toHaveBeenCalled()
+  })
+
+  it.each([
+    {
+      response: { error: { error: 'OCR unavailable' } },
+      message: 'OCR unavailable',
+    },
+    { response: new Error('Network failure'), message: 'Test failed' },
+  ])('shows zone-test errors: $message', ({ response, message }) => {
+    component.template.zones = [zone({ page: undefined })]
+    component.selectZone(0)
+    component.setSampleDocument([5])
+    jest
+      .spyOn(templateService, 'testZone')
+      .mockReturnValue(throwError(() => response))
+    component.testZone()
+    expect(component.zoneTestResult).toEqual({ error: message })
+    expect(component.zoneTesting).toBe(false)
+    expect(templateService.testZone).toHaveBeenCalledWith(
+      5,
+      expect.objectContaining({ page: 1 })
+    )
+  })
+
+  it('switches between built-in targets, custom fields, and an unassigned field', () => {
+    const selected = zone()
+    expect(component.zoneFieldValue(selected)).toBe(1)
+    component.setZoneField(selected, OcrZoneTarget.Title)
+    expect(component.zoneFieldValue(selected)).toBe(OcrZoneTarget.Title)
+    expect(selected.custom_field).toBeNull()
+    component.setZoneField(selected, 7)
+    expect(selected).toMatchObject({
+      target: OcrZoneTarget.CustomField,
+      custom_field: 7,
+    })
+    component.setZoneField(selected, null)
+    expect(component.zoneFieldValue(selected)).toBeNull()
+    expect(component.zonesForField(selected)).toEqual([])
+    component.setCombineFormat(selected, 'Ignored')
+    expect(component.template.combine_formats).toEqual({})
+  })
+
+  it('creates combine formats when absent and leaves implicit formats alone on rename', () => {
+    const selected = zone({ target: OcrZoneTarget.Title, custom_field: null })
+    component.template.combine_formats = undefined
+    component.renameZone(selected, 'Renamed')
+    expect(selected.name).toBe('Renamed')
+    expect(component.getCombineFormat(selected)).toBe('')
+    component.setCombineFormat(selected, '{Renamed} ')
+    component.insertCombineToken(selected, selected)
+    expect(component.template.combine_formats).toEqual({
+      title: '{Renamed} {Renamed}',
+    })
+  })
+
+  it('saves templates without combine formats', () => {
+    component.template.combine_formats = undefined
+    fixture.detectChanges()
+    expect(component.isDirty).toBe(false)
+    jest
+      .spyOn(templateService, 'create')
+      .mockReturnValue(of(component.template))
+    component.save()
+    expect(component.template.combine_formats).toBeUndefined()
+  })
+
+  it('does not assign unsupported custom field types and surfaces creation failures', () => {
+    component.template.zones = [zone({ custom_field: null })]
+    component.selectZone(0)
+    const dialog = fieldDialog()
+    const error = jest.spyOn(TestBed.inject(ToastService), 'showError')
+    component.createField('Status')
+    expect(dialog.object).toEqual({ name: 'Status' })
+    dialog.succeeded.next(customFields[1])
+    expect(component.selectedZone.custom_field).toBeNull()
+    const failure = new Error('Could not save')
+    dialog.failed.next(failure)
+    expect(error).toHaveBeenCalledWith('Error saving field.', failure)
+  })
+
+  it('refreshes field choices when a field is created without a selected zone', () => {
+    const dialog = fieldDialog()
+    component.createField('Total')
+    dialog.succeeded.next(customFields[0])
+    expect(component.customFields()).toEqual(customFields)
+    expect(component.selectedZone).toBeNull()
+  })
+
+  it('should edit a copy of the template and load its sample document', () => {
+    const original: OcrTemplate = {
+      ...component.template,
+      id: 3,
+      name: 'Invoices',
+      match: 'Northwind',
+      matching_algorithm: MATCH_LITERAL,
+      sample_document: 5,
+      zones: [zone()],
+      combine_formats: { '1': '{Invoice number}' },
+    }
+    component.object = original
+    fixture.detectChanges()
+
+    expect(component.dialogTitle).toEqual('Edit OCR Template')
+    expect(component.previewDocId).toEqual(5)
+    expect(component.previewPageCount()).toEqual(3)
+    expect(component.pageImageUrl).toContain('document-page-image/5/0/')
+    expect(component.template.match).toEqual('Northwind')
+    expect(component.isDirty).toBeFalsy()
+
+    component.template.zones[0].x = 500
+    component.template.combine_formats['1'] = 'Edited'
+    expect(original.zones[0].x).toEqual(100)
+    expect(original.combine_formats['1']).toEqual('{Invoice number}')
+  })
+
+  it('should offer every matching algorithm except automatic', () => {
+    expect(component.matchingAlgorithms.map((a) => a.id)).not.toContain(
+      MATCH_AUTO
+    )
+    expect(component.template.matching_algorithm).toEqual(MATCH_ANY)
+    expect(component.patternRequired).toBeTruthy()
+
+    component.template.matching_algorithm = MATCH_NONE
+    expect(component.patternRequired).toBeFalsy()
+  })
+
+  it('should initialize new template permissions from saved defaults', () => {
+    const defaults = {
+      [SETTINGS_KEYS.DEFAULT_PERMS_OWNER]: 1,
+      [SETTINGS_KEYS.DEFAULT_PERMS_VIEW_USERS]: [2],
+      [SETTINGS_KEYS.DEFAULT_PERMS_VIEW_GROUPS]: [3],
+      [SETTINGS_KEYS.DEFAULT_PERMS_EDIT_USERS]: [],
+      [SETTINGS_KEYS.DEFAULT_PERMS_EDIT_GROUPS]: [4],
+    }
+    jest
+      .spyOn(TestBed.inject(SettingsService), 'get')
+      .mockImplementation((key) => defaults[key])
+    fixture.detectChanges()
+    expect(component.permissionsForm).toEqual({
+      owner: 1,
+      set_permissions: {
+        view: { users: [2], groups: [3] },
+        change: { users: [], groups: [4] },
+      },
+    })
+    expect(
+      fixture.debugElement.query(By.directive(PermissionsFormComponent))
+    ).toBeTruthy()
+    expect(component.isDirty).toBe(false)
+    const create = jest
+      .spyOn(templateService, 'create')
+      .mockReturnValue(of({ ...component.template, id: 3 }))
+    component.save()
+    expect(create).toHaveBeenCalledWith(
+      expect.objectContaining(component.permissionsForm)
+    )
+  })
+
+  it('should copy existing permissions and track changes without mutating the list item', () => {
+    component.object = {
+      ...component.template,
+      id: 3,
+      owner: 1,
+      permissions: {
+        view: { users: [2], groups: [] },
+        change: { users: [], groups: [3] },
+      },
+    }
+    fixture.detectChanges()
+    expect(component.permissionsForm.owner).toBe(1)
+    expect(component.isDirty).toBe(false)
+    component.permissionsForm.set_permissions.view.users.push(4)
+    expect(component.isDirty).toBe(true)
+    expect(component.object.permissions.view.users).toEqual([2])
+    const update = jest
+      .spyOn(templateService, 'update')
+      .mockReturnValue(of(component.template))
+    component.save()
+    expect(update).toHaveBeenCalledWith(
+      expect.objectContaining({
+        owner: 1,
+        set_permissions: {
+          view: { users: [2, 4], groups: [] },
+          change: { users: [], groups: [3] },
+        },
+      })
+    )
+  })
+
+  it('should hide sharing controls and omit permission changes for a shared editor', () => {
+    component.object = {
+      ...component.template,
+      id: 3,
+      owner: 2,
+      user_can_change: true,
+    }
+    fixture.detectChanges()
+    expect(
+      fixture.debugElement.query(By.directive(PermissionsFormComponent))
+    ).toBeNull()
+    component.permissionsForm = {
+      owner: 1,
+      set_permissions: { view: { users: [1] } },
+    }
+    const update = jest
+      .spyOn(templateService, 'update')
+      .mockReturnValue(of(component.template))
+    component.save()
+    expect(update.mock.calls[0][0].owner).toBe(2)
+    expect(update.mock.calls[0][0]).not.toHaveProperty('set_permissions')
+  })
+
+  it('should keep only the last picked sample document', () => {
+    component.setSampleDocument([5, 6])
+    expect(component.sampleDocumentIds).toEqual([6])
+
+    component.setSampleDocument([])
+    expect(component.previewDocId).toBeNull()
+    expect(component.pageImageUrl).toBeNull()
+  })
+
+  it('should ignore a stale sample document response', () => {
+    const pending = new Subject<Document>()
+    jest.spyOn(documentService, 'get').mockReturnValueOnce(pending)
+    component.setSampleDocument([5])
+    component.setSampleDocument([6])
+    pending.next({ id: 5, page_count: 99 })
+
+    expect(component.previewPageCount()).toEqual(3)
+  })
+
+  it('should show a failed page and retry it', () => {
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(throwError(() => new Error('offline')))
+    component.setSampleDocument([5])
+    expect(component.pageFailed()).toBeTruthy()
+
+    component.setSampleDocument(component.sampleDocumentIds)
+    expect(component.pageFailed()).toBeFalsy()
+
+    component.onImageError()
+    expect(component.pageFailed()).toBeTruthy()
+  })
+
+  it('should support create and update', () => {
+    const createSpy = jest
+      .spyOn(templateService, 'create')
+      .mockReturnValue(of({ ...component.template, id: 3 }))
+    const updateSpy = jest
+      .spyOn(templateService, 'update')
+      .mockReturnValue(of(component.template))
+    const succeededSpy = jest.spyOn(component.succeeded, 'emit')
+
+    component.save()
+    expect(createSpy).toHaveBeenCalled()
+    expect(succeededSpy).toHaveBeenCalledWith({ ...component.template, id: 3 })
+    expect(activeModal.close).toHaveBeenCalled()
+
+    component.saving.set(false)
+    component.template.id = 3
+    component.save()
+    expect(updateSpy).toHaveBeenCalledWith(component.template)
+  })
+
+  it('should emit failed and allow editing again after a failed save', () => {
+    prepareOverlay()
+    component.template.zones = [zone()]
+    const pending = new Subject<OcrTemplate>()
+    jest.spyOn(templateService, 'create').mockReturnValue(pending)
+    const failedSpy = jest.spyOn(component.failed, 'emit')
+    component.onOverlayPointerDown(pointer(150, 150))
+
+    component.save()
+    component.save()
+    expect(templateService.create).toHaveBeenCalledTimes(1)
+    component.onOverlayPointerMove(pointer(250, 250))
+    component.onOverlayPointerUp(pointer(250, 250))
+    expect(component.template.zones[0].x).toEqual(100)
+
+    pending.error(new Error('Save failed'))
+    expect(failedSpy).toHaveBeenCalled()
+    expect(component.saving()).toBeFalsy()
+    component.onOverlayPointerDown(pointer(150, 150))
+    component.onOverlayPointerUp(pointer(250, 250))
+    expect(component.template.zones[0].x).toEqual(200)
+  })
+
+  it('should track unsaved changes', () => {
+    fixture.detectChanges()
+    expect(component.isDirty).toBeFalsy()
+
+    component.template.combine_formats = { '1': '' }
+    expect(component.isDirty).toBeFalsy()
+
+    component.template.name = 'Invoices'
+    expect(component.isDirty).toBeTruthy()
+    component.template.name = ''
+    expect(component.isDirty).toBeFalsy()
+
+    component.setSampleDocument([5])
+    expect(component.isDirty).toBeTruthy()
+  })
+
+  it('should draw a zone with no field in empty space', () => {
+    prepareOverlay()
+    component.onOverlayPointerDown(pointer(100, 100))
+    component.onOverlayPointerUp(pointer(1200, 250))
+
+    expect(component.template.zones[0]).toMatchObject({
+      x: 100,
+      y: 100,
+      width: 900,
+      height: 150,
+      custom_field: null,
+    })
+    expect(component.selectedZoneIndex).toEqual(0)
+  })
+
+  it('should clear the selection on a click in empty space', () => {
+    prepareOverlay()
+    component.template.zones = [zone()]
+    component.selectZone(0)
+    component.onOverlayPointerDown(pointer(600, 600))
+    component.onOverlayPointerUp(pointer(602, 601))
+
+    expect(component.template.zones).toHaveLength(1)
+    expect(component.selectedZoneIndex).toBeNull()
+  })
+
+  it('should move a zone when dragging on it', () => {
+    prepareOverlay()
+    component.template.zones = [zone()]
+    component.onOverlayPointerDown(pointer(150, 150))
+    component.onOverlayPointerUp(pointer(250, 200))
+
+    expect(component.template.zones).toHaveLength(1)
+    expect(component.template.zones[0]).toMatchObject({ x: 200, y: 150 })
+  })
+
+  it('should cancel a drawing on escape and ignore other pointers', () => {
+    prepareOverlay()
+    component.onOverlayPointerDown(pointer(100, 100))
+    component.onOverlayPointerUp(pointer(300, 200, 2))
+    expect(component.drawingRect()).not.toBeNull()
+
+    component.cancelDrawing()
+    component.onOverlayPointerUp(pointer(300, 200))
+    expect(component.template.zones).toEqual([])
+  })
+
+  it('should open a zone in the zones tab and go back to the list', () => {
+    component.template.zones = [zone(), zone()]
+    component.selectZone(1)
+    expect(component.activeTab).toEqual('zones')
+    expect(component.selectedZone).toBe(component.template.zones[1])
+
+    component.deselectZone()
+    expect(component.selectedZone).toBeNull()
+
+    component.selectZone(0)
+    component.removeZone(0)
+    expect(component.template.zones).toHaveLength(1)
+    expect(component.selectedZone).toBeNull()
+  })
+
+  it('should only offer custom fields OCR can write to', () => {
+    fixture.detectChanges()
+    expect(component.fieldItems().map((item) => item.id)).toEqual([
+      OcrZoneTarget.Title,
+      OcrZoneTarget.Asn,
+      OcrZoneTarget.Created,
+      1,
+    ])
+  })
+
+  it('should create a custom field and assign it to the zone', () => {
+    const succeeded = new Subject<CustomField>()
+    const dialog = {
+      dialogMode: { set: jest.fn() },
+      object: null,
+      succeeded,
+      failed: new Subject(),
+    }
+    jest
+      .spyOn(modalService, 'open')
+      .mockReturnValue({ componentInstance: dialog } as any)
+    component.template.zones = [zone({ custom_field: null })]
+    component.selectZone(0)
+
+    component.createField()
+    expect(dialog.object).toEqual({ name: 'Invoice number' })
+    succeeded.next(customFields[0])
+
+    expect(component.template.zones[0].custom_field).toEqual(1)
+  })
+
+  it('should build and prune combine formats', () => {
+    const first = zone({ name: 'First' })
+    const second = zone({ name: 'Second' })
+    const other = zone({ name: 'Other', custom_field: 2 })
+    component.template.zones = [first, second, other]
+    component.template.combine_formats = { '2': '{Other}' }
+
+    expect(component.isFieldShared(first)).toBeTruthy()
+    expect(component.isFieldShared(other)).toBeFalsy()
+    expect(component.defaultCombineFormat(first)).toEqual('{First} {Second}')
+
+    component.insertCombineToken(first, second)
+    component.insertCombineToken(first, first)
+    expect(component.getCombineFormat(second)).toEqual('{Second} {First}')
+
+    jest.spyOn(templateService, 'create').mockReturnValue(of(null))
+    component.save()
+    expect(component.template.combine_formats).toEqual({
+      '1': '{Second} {First}',
+    })
+  })
+
+  it('should update exact tokens when a zone is renamed', () => {
+    const first = zone({ name: 'First [value]' })
+    component.template.zones = [first, zone({ name: 'Second' })]
+    component.template.combine_formats = {
+      '1': 'First [value]: {First [value]} / { First [value] } / {Second} / {First [value] extra}',
+      '2': '{First [value]}',
+    }
+
+    component.renameZone(first, '')
+    component.renameZone(first, 'Invoice number')
+
+    expect(first.name).toEqual('Invoice number')
+    expect(component.template.combine_formats).toEqual({
+      '1': 'First [value]: {Invoice number} / {Invoice number} / {Second} / {First [value] extra}',
+      '2': '{First [value]}',
+    })
+  })
+
+  it('should keep the language array stable until the value changes', () => {
+    const selected = zone({ ocr_language: 'deu+eng' })
+    const languages = component.ocrLanguageArray(selected)
+    expect(languages).toEqual(['deu', 'eng'])
+    expect(component.ocrLanguageArray(selected)).toBe(languages)
+
+    component.setOcrLanguages(selected, ['fra'])
+    expect(selected.ocr_language).toEqual('fra')
+    expect(component.ocrLanguageArray(selected)).toEqual(['fra'])
+
+    component.setOcrLanguages(selected, null)
+    expect(component.ocrLanguageArray(selected)).toEqual([])
+  })
+
+  it('should hide a test result once the zone changes', () => {
+    const selected = zone()
+    component.template.zones = [selected]
+    component.selectZone(0)
+    component.setSampleDocument([5])
+    jest
+      .spyOn(templateService, 'testZone')
+      .mockReturnValue(of({ value: '123' }))
+
+    component.testZone()
+    expect(component.zoneTestResult.value).toEqual('123')
+
+    selected.transform = OcrZoneTransform.Numeric
+    expect(component.zoneTestResult).toBeNull()
+  })
+
+  it('should drop a pending test when the zone or sample document changes', () => {
+    const pending = new Subject<OcrZoneTestResult>()
+    component.template.zones = [zone(), zone()]
+    component.selectZone(0)
+    component.setSampleDocument([5])
+    jest.spyOn(templateService, 'testZone').mockReturnValue(pending)
+
+    component.testZone()
+    expect(component.zoneTesting).toBeTruthy()
+    component.selectZone(1)
+    pending.next({ value: 'Old zone' })
+    expect(component.zoneTestResult).toBeNull()
+
+    component.testZone()
+    component.setSampleDocument([])
+    pending.next({ value: 'Old document' })
+    expect(component.zoneTestResult).toBeNull()
+  })
+})
@@ -0,0 +1,963 @@
+import { CommonModule } from '@angular/common'
+import {
+  Component,
+  computed,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  signal,
+  ViewChild,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import {
+  NgbActiveModal,
+  NgbModal,
+  NgbNavModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { Subject, takeUntil } from 'rxjs'
+import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { DocumentLinkComponent } from 'src/app/components/common/input/document-link/document-link.component'
+import { CheckComponent } from 'src/app/components/common/input/check/check.component'
+import { NumberComponent } from 'src/app/components/common/input/number/number.component'
+import {
+  PermissionsFormComponent,
+  PermissionsFormObject,
+} from 'src/app/components/common/input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from 'src/app/components/common/input/select/select.component'
+import { SwitchComponent } from 'src/app/components/common/input/switch/switch.component'
+import { TextComponent } from 'src/app/components/common/input/text/text.component'
+import { CustomField } from 'src/app/data/custom-field'
+import {
+  MATCH_ANY,
+  MATCH_AUTO,
+  MATCH_NONE,
+  MATCHING_ALGORITHMS,
+} from 'src/app/data/matching-model'
+import {
+  DEFAULT_OCR_ZONE_LANGUAGE,
+  getZoneFieldKey,
+  OCR_BUILTIN_TARGETS,
+  OCR_SUPPORTED_FIELD_TYPES,
+  OcrTemplate,
+  OcrTemplateZone,
+  OcrZoneTarget,
+  OcrZoneTestResult,
+  OcrZoneTransform,
+  ZoneTestRequest,
+} from 'src/app/data/ocr-template'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { User } from 'src/app/data/user'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { OcrTemplateEditorZoneListComponent } from './ocr-template-editor-zone-list/ocr-template-editor-zone-list.component'
+import {
+  DisplayRect,
+  DrawingRect,
+  findHandleAt,
+  findZoneAt,
+  getResizeHandles,
+  getZoneColor,
+  getZoneDisplayRect,
+  getZonePage,
+  HANDLE_SIZE,
+  isZoneOnPage,
+  MIN_ZONE_SIZE,
+  MoveStart,
+  moveZone,
+  Point,
+  ResizeHandle,
+  resizeZone,
+} from './zone-geometry'
+
+type ActiveTab = 'template' | 'zones'
+type ZoneFieldSelection = OcrZoneTarget | number | null
+type OverlayInteraction =
+  | { kind: 'idle' }
+  | { kind: 'drawing'; pointerId: number; rect: DrawingRect }
+  | { kind: 'moving'; pointerId: number; zoneIndex: number; start: MoveStart }
+  | {
+      kind: 'resizing'
+      pointerId: number
+      zoneIndex: number
+      handle: ResizeHandle
+    }
+interface ZoneTest {
+  zone: OcrTemplateZone
+  /** The sample document and zone settings the result was produced from. */
+  key: string
+  result: OcrZoneTestResult | null
+}
+
+export const ZONE_TRANSFORM_OPTIONS = [
+  { id: OcrZoneTransform.None, name: $localize`None` },
+  { id: OcrZoneTransform.Strip, name: $localize`Strip whitespace` },
+  { id: OcrZoneTransform.Uppercase, name: $localize`Uppercase` },
+  { id: OcrZoneTransform.Lowercase, name: $localize`Lowercase` },
+  { id: OcrZoneTransform.Numeric, name: $localize`Numeric only` },
+  {
+    id: OcrZoneTransform.StripPunctuation,
+    name: $localize`Remove leading/trailing punctuation`,
+  },
+  { id: OcrZoneTransform.Date, name: $localize`Parse date` },
+  { id: OcrZoneTransform.QrCode, name: $localize`Read QR/barcode` },
+]
+
+export const ZONE_LANGUAGE_OPTIONS = [
+  { id: 'eng', name: $localize`English` },
+  { id: 'deu', name: $localize`German` },
+  { id: 'fra', name: $localize`French` },
+  { id: 'ita', name: $localize`Italian` },
+  { id: 'spa', name: $localize`Spanish` },
+  { id: 'por', name: $localize`Portuguese` },
+  { id: 'nld', name: $localize`Dutch` },
+]
+
+const TEMPLATE_MATCHING_ALGORITHMS = MATCHING_ALGORITHMS.filter(
+  (algorithm) => algorithm.id !== MATCH_AUTO
+)
+
+const NO_OVERLAY_INTERACTION: OverlayInteraction = { kind: 'idle' }
+const RESIZE_CURSOR: Record<ResizeHandle, string> = {
+  nw: 'nw-resize',
+  ne: 'ne-resize',
+  sw: 'sw-resize',
+  se: 'se-resize',
+  n: 'n-resize',
+  s: 's-resize',
+  w: 'w-resize',
+  e: 'e-resize',
+}
+
+@Component({
+  selector: 'pngx-ocr-template-editor',
+  imports: [
+    DocumentLinkComponent,
+    NumberComponent,
+    TextComponent,
+    CheckComponent,
+    SelectComponent,
+    SwitchComponent,
+    CommonModule,
+    FormsModule,
+    NgbNavModule,
+    BootstrapIconComponent,
+    OcrTemplateEditorZoneListComponent,
+    PermissionsFormComponent,
+    IfOwnerDirective,
+  ],
+  templateUrl: './ocr-template-editor.component.html',
+  styleUrls: ['./ocr-template-editor.component.scss'],
+})
+export class OcrTemplateEditorComponent implements OnInit, OnDestroy {
+  public readonly activeModal = inject(NgbActiveModal)
+  private readonly templateService = inject(OcrTemplateService)
+  private readonly customFieldsService = inject(CustomFieldsService)
+  private readonly documentService = inject(DocumentService)
+  private readonly toastService = inject(ToastService)
+  private readonly modalService = inject(NgbModal)
+  private readonly userService = inject(UserService)
+  private readonly settingsService = inject(SettingsService)
+  private readonly permissionsService = inject(PermissionsService)
+  private readonly destroy$ = new Subject<void>()
+  private readonly cancelZoneTest$ = new Subject<void>()
+
+  @Input() object: OcrTemplate
+  @Output() public readonly succeeded = new EventEmitter<OcrTemplate>()
+  @Output() public readonly failed = new EventEmitter()
+
+  @ViewChild('zoneOverlay') overlayRef: ElementRef<SVGSVGElement>
+  imageRef: ElementRef<HTMLImageElement>
+  private previewResizeObserver: ResizeObserver | null = null
+  private readonly overlayScale = signal(1)
+
+  @ViewChild('pageImage')
+  set pageImage(ref: ElementRef<HTMLImageElement> | undefined) {
+    this.previewResizeObserver?.disconnect()
+    this.imageRef = ref
+    if (!ref) return
+    this.previewResizeObserver = new ResizeObserver(() => {
+      const image = ref.nativeElement
+      if (image.naturalWidth && image.clientWidth) {
+        this.overlayScale.set(image.naturalWidth / image.clientWidth)
+      }
+    })
+    this.previewResizeObserver.observe(ref.nativeElement)
+  }
+
+  template: OcrTemplate = {
+    id: null,
+    name: '',
+    match: '',
+    matching_algorithm: MATCH_ANY,
+    is_insensitive: true,
+    sample_document: null,
+    source_width: 0,
+    source_height: 0,
+    enabled: true,
+    combine_formats: {},
+    zones: [],
+  }
+
+  public readonly customFields = signal<CustomField[]>([])
+  public readonly fieldItems = computed<
+    { id: ZoneFieldSelection; name: string }[]
+  >(() => [
+    ...OCR_BUILTIN_TARGETS,
+    ...this.customFields()
+      .filter((field) => OCR_SUPPORTED_FIELD_TYPES.includes(field.data_type))
+      .map((field) => ({ id: field.id, name: field.name })),
+  ])
+  public readonly users = signal<User[]>([])
+  permissionsForm: PermissionsFormObject = {}
+  public readonly OcrZoneTransform = OcrZoneTransform
+  public readonly saving = signal(false)
+
+  /** Bound to the document picker, which works with id arrays. */
+  sampleDocumentIds: number[] = []
+  previewPage = 0
+  public readonly previewPageCount = signal<number | null>(null)
+  public readonly pageLoaded = signal(false)
+  public readonly pageFailed = signal(false)
+  zoom = 1
+
+  get previewDocId(): number | null {
+    return this.sampleDocumentIds[0] ?? null
+  }
+
+  get pageImageUrl(): string | null {
+    return this.previewDocId
+      ? this.templateService.getPageImageUrl(
+          this.previewDocId,
+          this.previewPage
+        )
+      : null
+  }
+
+  get transformOptions() {
+    return ZONE_TRANSFORM_OPTIONS
+  }
+
+  get languageOptions() {
+    return ZONE_LANGUAGE_OPTIONS
+  }
+
+  get matchingAlgorithms() {
+    return TEMPLATE_MATCHING_ALGORITHMS
+  }
+
+  get patternRequired(): boolean {
+    return (
+      this.template.matching_algorithm !== MATCH_AUTO &&
+      this.template.matching_algorithm !== MATCH_NONE
+    )
+  }
+
+  public get previewPageDisplay(): number {
+    return this.previewPage + 1
+  }
+
+  public set previewPageDisplay(value: number) {
+    this.goToPage(value - 1)
+  }
+
+  activeTab: ActiveTab = 'template'
+
+  selectedZoneIndex: number | null = null
+  private overlayInteraction: OverlayInteraction = NO_OVERLAY_INTERACTION
+  overlayCursor = 'crosshair'
+
+  private readonly zoneTest = signal<ZoneTest | null>(null)
+
+  get zoneTestResult(): OcrZoneTestResult | null {
+    return this.isCurrentZoneTest() ? this.zoneTest().result : null
+  }
+
+  get zoneTesting(): boolean {
+    return this.isCurrentZoneTest() && this.zoneTest().result === null
+  }
+
+  get selectedZone(): OcrTemplateZone | null {
+    return this.selectedZoneIndex !== null
+      ? (this.template.zones[this.selectedZoneIndex] ?? null)
+      : null
+  }
+
+  private initialState = ''
+
+  get isDirty(): boolean {
+    return this.editorState() !== this.initialState
+  }
+
+  private editorState(): string {
+    const formats = Object.entries(this.template.combine_formats ?? {}).filter(
+      ([, format]) => format
+    )
+    return JSON.stringify({
+      ...this.template,
+      combine_formats: Object.fromEntries(formats),
+      sample_document: this.previewDocId ?? null,
+      permissions_form: this.permissionsForm,
+    })
+  }
+
+  get dialogTitle(): string {
+    return this.template.id
+      ? $localize`Edit OCR Template`
+      : $localize`New OCR Template`
+  }
+
+  ngOnInit() {
+    this.userService
+      .listAll()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((r) => this.users.set(r.results))
+    this.customFieldsService
+      .listAll()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((r) => {
+        this.customFields.set(r.results)
+      })
+
+    if (this.object) {
+      this.template = {
+        ...this.object,
+        zones: this.object.zones.map((zone) => ({ ...zone })),
+        combine_formats: { ...this.object.combine_formats },
+      }
+      if (this.template.sample_document) {
+        this.setSampleDocument([this.template.sample_document])
+      }
+    }
+    const permissions = this.object?.permissions
+    this.permissionsForm = this.object
+      ? {
+          owner: this.object.owner,
+          set_permissions: {
+            view: {
+              users: [...(permissions?.view.users ?? [])],
+              groups: [...(permissions?.view.groups ?? [])],
+            },
+            change: {
+              users: [...(permissions?.change.users ?? [])],
+              groups: [...(permissions?.change.groups ?? [])],
+            },
+          },
+        }
+      : {
+          owner: this.settingsService.get(SETTINGS_KEYS.DEFAULT_PERMS_OWNER),
+          set_permissions: {
+            view: {
+              users: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_VIEW_USERS
+              ),
+              groups: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_VIEW_GROUPS
+              ),
+            },
+            change: {
+              users: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_EDIT_USERS
+              ),
+              groups: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_EDIT_GROUPS
+              ),
+            },
+          },
+        }
+    this.initialState = this.editorState()
+  }
+
+  setSampleDocument(ids: number[]) {
+    const id = ids.at(-1)
+    this.sampleDocumentIds = id ? [id] : []
+    this.previewPage = 0
+    this.previewPageCount.set(null)
+    this.resetPage()
+    if (!id) return
+    this.documentService
+      .get(id)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (doc) => {
+          if (this.previewDocId !== id) return
+          this.previewPageCount.set(doc.page_count ?? null)
+        },
+        error: () => {
+          if (this.previewDocId === id) this.pageFailed.set(true)
+        },
+      })
+  }
+
+  private resetPage() {
+    this.stopOverlayInteraction()
+    this.clearZoneTest()
+    this.pageLoaded.set(false)
+    this.pageFailed.set(false)
+  }
+
+  goToPage(page: number) {
+    if (!Number.isFinite(page)) return
+    const pageCount = this.previewPageCount()
+    const max = pageCount ? pageCount - 1 : page
+    const clamped = Math.max(0, Math.min(Math.trunc(page), max))
+    if (clamped === this.previewPage) return
+    this.previewPage = clamped
+    this.resetPage()
+  }
+
+  zoomIn() {
+    this.zoom = Math.min(4, Math.round((this.zoom + 0.25) * 100) / 100)
+  }
+
+  zoomOut() {
+    this.zoom = Math.max(0.5, Math.round((this.zoom - 0.25) * 100) / 100)
+  }
+
+  resetZoom() {
+    this.zoom = 1
+  }
+
+  zonePage(zone: OcrTemplateZone): number {
+    return getZonePage(zone, this.previewPage, this.previewPageCount())
+  }
+
+  isLastPageZone(zone: OcrTemplateZone): boolean {
+    return zone.page === -1
+  }
+
+  setLastPageZone(zone: OcrTemplateZone, lastPage: boolean) {
+    zone.page = lastPage ? -1 : this.previewPage + 1
+  }
+
+  private isOnCurrentPage(zone: OcrTemplateZone): boolean {
+    return isZoneOnPage(zone, this.previewPage, this.previewPageCount())
+  }
+
+  onImageLoad() {
+    this.pageLoaded.set(true)
+    const img = this.imageRef.nativeElement
+    this.template.source_width = img.naturalWidth
+    this.template.source_height = img.naturalHeight
+  }
+
+  onImageError() {
+    this.stopOverlayInteraction()
+    this.pageFailed.set(true)
+  }
+
+  @HostListener('document:keydown.escape')
+  cancelDrawing() {
+    this.stopOverlayInteraction()
+  }
+
+  onOverlayPointerDown(event: PointerEvent) {
+    if (this.saving()) return
+    if (event.button !== 0 || this.overlayInteraction.kind !== 'idle') return
+    const point = this.svgPointFromEvent(event)
+    if (!this.pageLoaded() || !point) return
+    event.preventDefault()
+
+    if (this.selectedZoneIndex !== null) {
+      const handle = this.handleAt(point, this.selectedZoneIndex)
+      if (handle) {
+        this.overlayInteraction = {
+          kind: 'resizing',
+          pointerId: event.pointerId,
+          zoneIndex: this.selectedZoneIndex,
+          handle,
+        }
+        this.overlayRef.nativeElement.setPointerCapture(event.pointerId)
+        return
+      }
+    }
+
+    const clickedIdx = this.zoneIndexAt(point)
+    if (clickedIdx !== null) {
+      this.selectZone(clickedIdx)
+      const zone = this.template.zones[clickedIdx]
+      this.overlayInteraction = {
+        kind: 'moving',
+        pointerId: event.pointerId,
+        zoneIndex: clickedIdx,
+        start: {
+          mouseX: point.x,
+          mouseY: point.y,
+          zoneX: zone.x,
+          zoneY: zone.y,
+        },
+      }
+      this.overlayRef.nativeElement.setPointerCapture(event.pointerId)
+      return
+    }
+
+    // Empty space: start drawing a new zone. A click without a drag just clears
+    // the selection (see onOverlayPointerUp).
+    this.clearZoneTest()
+    this.selectedZoneIndex = null
+    this.overlayInteraction = {
+      kind: 'drawing',
+      pointerId: event.pointerId,
+      rect: {
+        startX: point.x,
+        startY: point.y,
+        endX: point.x,
+        endY: point.y,
+      },
+    }
+    this.overlayRef.nativeElement.setPointerCapture(event.pointerId)
+  }
+
+  onOverlayPointerMove(event: PointerEvent) {
+    if (
+      this.overlayInteraction.kind !== 'idle' &&
+      this.overlayInteraction.pointerId !== event.pointerId
+    )
+      return
+    const point = this.svgPointFromEvent(event)
+    if (!point) return
+
+    if (this.overlayInteraction.kind === 'resizing') {
+      resizeZone(
+        this.template.zones[this.overlayInteraction.zoneIndex],
+        this.overlayInteraction.handle,
+        point,
+        this.imageNaturalSize()
+      )
+      return
+    }
+
+    if (this.overlayInteraction.kind === 'moving') {
+      moveZone(
+        this.template.zones[this.overlayInteraction.zoneIndex],
+        point,
+        this.overlayInteraction.start,
+        this.imageNaturalSize()
+      )
+      return
+    }
+
+    if (this.overlayInteraction.kind === 'drawing') {
+      this.overlayInteraction.rect.endX = point.x
+      this.overlayInteraction.rect.endY = point.y
+      return
+    }
+
+    this.updateOverlayCursor(point)
+  }
+
+  private updateOverlayCursor(point: Point) {
+    if (this.selectedZoneIndex !== null) {
+      const handle = this.handleAt(point, this.selectedZoneIndex)
+      if (handle) {
+        this.overlayCursor = RESIZE_CURSOR[handle]
+        return
+      }
+    }
+    this.overlayCursor = this.zoneIndexAt(point) !== null ? 'move' : 'crosshair'
+  }
+
+  onOverlayPointerUp(event: PointerEvent) {
+    if (this.overlayInteraction.kind === 'idle') return
+    if (this.overlayInteraction.pointerId !== event.pointerId) return
+    this.onOverlayPointerMove(event)
+    const interaction = this.overlayInteraction
+    this.stopOverlayInteraction()
+    if (interaction.kind !== 'drawing') return
+
+    const rect = this.sourceRectFromDrawing(interaction.rect)
+
+    // Ignore tiny accidental clicks.
+    if (rect.w < MIN_ZONE_SIZE || rect.h < MIN_ZONE_SIZE) {
+      return
+    }
+
+    this.template.zones.push(this.createZoneFromRect(rect))
+    this.selectZone(this.template.zones.length - 1)
+  }
+
+  private createZoneFromRect(rect: DisplayRect): OcrTemplateZone {
+    const imageSize = this.imageNaturalSize()
+    return {
+      name: `Zone ${this.template.zones.length + 1}`,
+      target: OcrZoneTarget.CustomField,
+      custom_field: null,
+      x: rect.x,
+      y: rect.y,
+      width: rect.w,
+      height: rect.h,
+      page: this.previewPageDisplay,
+      ocr_language: DEFAULT_OCR_ZONE_LANGUAGE,
+      transform: OcrZoneTransform.Strip,
+      date_format: '',
+      validation_regex: '',
+      order: this.template.zones.length,
+      zone_source_width: imageSize.width,
+      zone_source_height: imageSize.height,
+    }
+  }
+
+  onOverlayPointerCancel(event: PointerEvent) {
+    if (this.overlayInteraction.kind === 'idle') return
+    if (this.overlayInteraction.pointerId !== event.pointerId) return
+    this.stopOverlayInteraction()
+  }
+
+  private stopOverlayInteraction() {
+    const interaction = this.overlayInteraction
+    this.overlayInteraction = NO_OVERLAY_INTERACTION
+    this.overlayCursor = 'crosshair'
+    const overlay = this.overlayRef?.nativeElement
+    if (
+      interaction.kind !== 'idle' &&
+      overlay?.hasPointerCapture(interaction.pointerId)
+    ) {
+      overlay.releasePointerCapture(interaction.pointerId)
+    }
+  }
+
+  drawingRect(): DisplayRect | null {
+    return this.overlayInteraction.kind === 'drawing'
+      ? this.displayRectFromDrawing(this.overlayInteraction.rect)
+      : null
+  }
+
+  /** The zone's rectangle on the overlay, or null if it's on another page. */
+  zoneDisplayRect(zoneIndex: number): DisplayRect | null {
+    const zone = this.template.zones[zoneIndex]
+    if (!this.isOnCurrentPage(zone)) return null
+    return getZoneDisplayRect(zone, this.imageNaturalSize())
+  }
+
+  private handleAt(point: Point, zoneIndex: number): ResizeHandle | null {
+    const rect = this.zoneDisplayRect(zoneIndex)
+    return rect ? findHandleAt(point, rect, this.overlayHandleSize()) : null
+  }
+
+  private zoneIndexAt(point: Point): number | null {
+    return findZoneAt(
+      point,
+      this.template.zones,
+      this.previewPage,
+      this.previewPageCount(),
+      this.imageNaturalSize()
+    )
+  }
+
+  overlayViewBox(): string {
+    const imageSize = this.imageNaturalSize()
+    return `0 0 ${imageSize.width} ${imageSize.height}`
+  }
+
+  public readonly zoneColor = getZoneColor
+
+  zoneLabel(zone: OcrTemplateZone, index: number): string {
+    return zone.name || `Zone ${index + 1}`
+  }
+
+  zoneLabelY(rect: DisplayRect): number {
+    return Math.max(this.overlayUnitSize(14), rect.y - this.overlayUnitSize(4))
+  }
+
+  public readonly resizeHandles = getResizeHandles
+
+  overlayHandleSize(): number {
+    return this.overlayUnitSize(HANDLE_SIZE)
+  }
+
+  overlayFontSize(): number {
+    return this.overlayUnitSize(12)
+  }
+
+  overlayUnitSize(screenPixels: number): number {
+    return screenPixels * this.overlayScale()
+  }
+
+  private svgPointFromEvent(event: MouseEvent): Point | null {
+    const svg = this.overlayRef?.nativeElement
+    const matrix = svg?.getScreenCTM()
+    if (!svg || !matrix) return null
+
+    const point = svg.createSVGPoint()
+    point.x = event.clientX
+    point.y = event.clientY
+
+    const svgPoint = point.matrixTransform(matrix.inverse())
+    const size = this.imageNaturalSize()
+    return {
+      x: Math.max(0, Math.min(svgPoint.x, size.width)),
+      y: Math.max(0, Math.min(svgPoint.y, size.height)),
+    }
+  }
+
+  private displayRectFromDrawing(rect: DrawingRect): DisplayRect {
+    return {
+      x: Math.min(rect.startX, rect.endX),
+      y: Math.min(rect.startY, rect.endY),
+      w: Math.abs(rect.endX - rect.startX),
+      h: Math.abs(rect.endY - rect.startY),
+    }
+  }
+
+  private sourceRectFromDrawing(rect: DrawingRect): DisplayRect {
+    const displayRect = this.displayRectFromDrawing(rect)
+    return {
+      x: Math.round(displayRect.x),
+      y: Math.round(displayRect.y),
+      w: Math.round(displayRect.w),
+      h: Math.round(displayRect.h),
+    }
+  }
+
+  private imageNaturalSize() {
+    const img = this.imageRef.nativeElement
+    return { width: img.naturalWidth, height: img.naturalHeight }
+  }
+
+  removeZone(index: number) {
+    this.stopOverlayInteraction()
+    this.clearZoneTest()
+    this.template.zones.splice(index, 1)
+    if (this.selectedZoneIndex === index) {
+      this.selectedZoneIndex = null
+    } else if (this.selectedZoneIndex > index) {
+      this.selectedZoneIndex--
+    }
+  }
+
+  selectZone(index: number) {
+    this.selectedZoneIndex = index
+    this.activeTab = 'zones'
+    this.clearZoneTest()
+    const zone = this.template.zones[index]
+    if (zone) {
+      this.goToPage(this.zonePage(zone) - 1)
+    }
+  }
+
+  deselectZone() {
+    this.selectedZoneIndex = null
+    this.clearZoneTest()
+  }
+
+  testZone() {
+    const zone = this.selectedZone
+    if (!zone || !this.previewDocId) return
+    this.clearZoneTest()
+    const test: ZoneTest = { zone, key: this.zoneTestKey(zone), result: null }
+    this.zoneTest.set(test)
+    this.templateService
+      .testZone(this.previewDocId, this.zoneTestRequest(zone))
+      .pipe(takeUntil(this.destroy$), takeUntil(this.cancelZoneTest$))
+      .subscribe({
+        next: (res) => this.zoneTest.set({ ...test, result: res }),
+        error: (err) =>
+          this.zoneTest.set({
+            ...test,
+            result: { error: err.error?.error || $localize`Test failed` },
+          }),
+      })
+  }
+
+  private clearZoneTest() {
+    this.cancelZoneTest$.next()
+    this.zoneTest.set(null)
+  }
+
+  /** A result is stale once its zone, settings or sample document change. */
+  private isCurrentZoneTest(): boolean {
+    const test = this.zoneTest()
+    return (
+      test?.zone === this.selectedZone &&
+      test.key === this.zoneTestKey(test.zone)
+    )
+  }
+
+  private zoneTestKey(zone: OcrTemplateZone): string {
+    return JSON.stringify([this.previewDocId, this.zoneTestRequest(zone)])
+  }
+
+  private zoneTestRequest(zone: OcrTemplateZone): ZoneTestRequest {
+    return {
+      name: zone.name,
+      x: zone.x,
+      y: zone.y,
+      width: zone.width,
+      height: zone.height,
+      page: zone.page ?? 1,
+      ocr_language: zone.ocr_language,
+      transform: zone.transform,
+      date_format: zone.date_format,
+      validation_regex: zone.validation_regex,
+      zone_source_width: zone.zone_source_width,
+      zone_source_height: zone.zone_source_height,
+    }
+  }
+
+  save() {
+    if (this.saving()) return
+    this.stopOverlayInteraction()
+    this.saving.set(true)
+    this.pruneCombineFormats()
+    this.template.sample_document = this.previewDocId
+    const payload = this.permissionsService.currentUserOwnsObject(this.object)
+      ? { ...this.template, ...this.permissionsForm }
+      : this.template
+    const obs = this.template.id
+      ? this.templateService.update(payload)
+      : this.templateService.create(payload)
+
+    obs.pipe(takeUntil(this.destroy$)).subscribe({
+      next: (saved) => {
+        this.activeModal.close()
+        this.succeeded.emit(saved)
+      },
+      error: (e) => {
+        this.saving.set(false)
+        this.failed.emit(e)
+      },
+    })
+  }
+
+  // ng-select needs a stable array between change detection runs, so the
+  // split language list is cached per zone until ocr_language changes.
+  private readonly ocrLanguageCache = new WeakMap<
+    OcrTemplateZone,
+    { language: string; languages: string[] }
+  >()
+
+  ocrLanguageArray(zone: OcrTemplateZone): string[] {
+    const language = zone.ocr_language || ''
+    const cached = this.ocrLanguageCache.get(zone)
+    if (cached?.language === language) return cached.languages
+    const languages = language.split('+').filter(Boolean)
+    this.ocrLanguageCache.set(zone, { language, languages })
+    return languages
+  }
+
+  setOcrLanguages(zone: OcrTemplateZone, langs: string[]) {
+    zone.ocr_language = (langs ?? []).join('+')
+  }
+
+  /** The field select's value: a built-in target, or a custom field id. */
+  zoneFieldValue(zone: OcrTemplateZone): ZoneFieldSelection {
+    return zone.target === OcrZoneTarget.CustomField
+      ? zone.custom_field
+      : zone.target
+  }
+
+  setZoneField(zone: OcrTemplateZone, value: ZoneFieldSelection) {
+    if (typeof value === 'string') {
+      zone.target = value
+      zone.custom_field = null
+    } else {
+      zone.target = OcrZoneTarget.CustomField
+      zone.custom_field = value
+    }
+  }
+
+  zonesForField(zone: OcrTemplateZone): OcrTemplateZone[] {
+    const key = getZoneFieldKey(zone)
+    if (!key) return []
+    return this.template.zones.filter((z) => getZoneFieldKey(z) === key)
+  }
+
+  isFieldShared(zone: OcrTemplateZone): boolean {
+    return this.zonesForField(zone).length > 1
+  }
+
+  renameZone(zone: OcrTemplateZone, name: string) {
+    const oldName = zone.name.trim()
+    const format = this.getCombineFormat(zone)
+    if (format) {
+      this.setCombineFormat(
+        zone,
+        format.replace(/\{([^{}]*)\}/g, (token, tokenName: string) =>
+          tokenName.trim() === oldName ? `{${name}}` : token
+        )
+      )
+    }
+    zone.name = name
+  }
+
+  getCombineFormat(zone: OcrTemplateZone): string {
+    return this.template.combine_formats?.[getZoneFieldKey(zone)] ?? ''
+  }
+
+  setCombineFormat(zone: OcrTemplateZone, value: string) {
+    const key = getZoneFieldKey(zone)
+    if (!key) return
+    this.template.combine_formats ??= {}
+    this.template.combine_formats[key] = value
+  }
+
+  defaultCombineFormat(zone: OcrTemplateZone): string {
+    return this.zonesForField(zone)
+      .map((z) => `{${z.name}}`)
+      .join(' ')
+  }
+
+  insertCombineToken(zone: OcrTemplateZone, tokenZone: OcrTemplateZone) {
+    const current = this.getCombineFormat(zone)
+    const sep = current && !current.endsWith(' ') ? ' ' : ''
+    this.setCombineFormat(zone, `${current}${sep}{${tokenZone.name}}`)
+  }
+
+  /** Drop formats that are empty or whose field no longer has several zones. */
+  private pruneCombineFormats() {
+    const formats = this.template.combine_formats
+    if (!formats) return
+    const keys = this.template.zones.map(getZoneFieldKey)
+    for (const [key, format] of Object.entries(formats)) {
+      if (!format || keys.filter((k) => k === key).length < 2) {
+        delete formats[key]
+      }
+    }
+  }
+
+  createField(name?: string) {
+    const zone = this.selectedZone
+    const modal = this.modalService.open(CustomFieldEditDialogComponent)
+    modal.componentInstance.dialogMode.set(EditDialogMode.CREATE)
+    modal.componentInstance.object = { name: name || zone?.name }
+    modal.componentInstance.succeeded
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((field: CustomField) => {
+        this.toastService.showSuccess($localize`Saved field "${field.name}".`)
+        this.customFieldsService.clearCache()
+        this.customFieldsService
+          .listAll()
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((r) => {
+            if (zone && OCR_SUPPORTED_FIELD_TYPES.includes(field.data_type)) {
+              this.setZoneField(zone, field.id)
+            }
+            this.customFields.set(r.results)
+          })
+      })
+    modal.componentInstance.failed
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((e) => {
+        this.toastService.showError($localize`Error saving field.`, e)
+      })
+  }
+
+  ngOnDestroy() {
+    this.previewResizeObserver?.disconnect()
+    this.cancelZoneTest$.complete()
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+}
@@ -0,0 +1,197 @@
+import {
+  OcrTemplateZone,
+  OcrZoneTarget,
+  OcrZoneTransform,
+} from 'src/app/data/ocr-template'
+import {
+  findHandleAt,
+  findZoneAt,
+  getResizeHandles,
+  getZoneDisplayRect,
+  getZonePage,
+  isZoneOnPage,
+  moveZone,
+  resizeZone,
+} from './zone-geometry'
+
+function zone(overrides: Partial<OcrTemplateZone> = {}): OcrTemplateZone {
+  return {
+    name: 'Zone',
+    target: OcrZoneTarget.CustomField,
+    custom_field: 1,
+    x: 100,
+    y: 200,
+    width: 300,
+    height: 400,
+    page: 1,
+    ocr_language: 'eng',
+    transform: OcrZoneTransform.Strip,
+    validation_regex: '',
+    order: 0,
+    ...overrides,
+  }
+}
+
+describe('OCR template editor geometry', () => {
+  it('normalizes zone pages', () => {
+    expect(getZonePage(zone({ page: 2 }), 0, 5)).toBe(2)
+    expect(getZonePage(zone({ page: -1 }), 0, 5)).toBe(5)
+    expect(getZonePage(zone({ page: -1 }), 2, null)).toBe(3)
+    expect(getZonePage(zone({ page: 0 }), 0, 5)).toBe(1)
+    expect(getZonePage(zone({ page: undefined }), 0, 5)).toBe(1)
+  })
+
+  it('checks whether a zone is on the current preview page', () => {
+    expect(isZoneOnPage(zone({ page: 2 }), 1, 5)).toBe(true)
+    expect(isZoneOnPage(zone({ page: 2 }), 0, 5)).toBe(false)
+    expect(isZoneOnPage(zone({ page: -1 }), 4, 5)).toBe(true)
+  })
+
+  it('uses natural image coordinates when source dimensions are unset', () => {
+    expect(
+      getZoneDisplayRect(zone({ x: 100, y: 200, width: 300, height: 400 }), {
+        width: 1000,
+        height: 2000,
+      })
+    ).toEqual({ x: 100, y: 200, w: 300, h: 400 })
+  })
+
+  it('uses per-zone source dimensions when present', () => {
+    expect(
+      getZoneDisplayRect(
+        zone({
+          x: 100,
+          y: 100,
+          width: 100,
+          height: 100,
+          zone_source_width: 1000,
+          zone_source_height: 1000,
+        }),
+        { width: 500, height: 750 }
+      )
+    ).toEqual({ x: 50, y: 75, w: 50, h: 75 })
+  })
+
+  it('finds zones from topmost to bottommost on the current page', () => {
+    const zones = [
+      zone({ name: 'first', x: 0, y: 0, width: 100, height: 100, page: 1 }),
+      zone({ name: 'second', x: 0, y: 0, width: 50, height: 50, page: 1 }),
+      zone({ name: 'third', x: 0, y: 0, width: 50, height: 50, page: 2 }),
+    ]
+
+    expect(
+      findZoneAt({ x: 25, y: 25 }, zones, 0, 2, { width: 100, height: 100 })
+    ).toBe(1)
+  })
+
+  it('finds resize handles around a display rect', () => {
+    const rect = { x: 10, y: 20, w: 100, h: 200 }
+
+    expect(findHandleAt({ x: 10, y: 20 }, rect)).toBe('nw')
+    expect(findHandleAt({ x: 110, y: 220 }, rect)).toBe('se')
+    expect(findHandleAt({ x: 60, y: 20 }, rect)).toBe('n')
+    expect(findHandleAt({ x: 90, y: 160 }, rect)).toBeNull()
+    expect(findHandleAt({ x: 19, y: 20 }, rect, 8)).toBeNull()
+    expect(findHandleAt({ x: 19, y: 20 }, rect, 10)).toBe('nw')
+  })
+
+  it('returns no zone when the point is outside every rectangle', () => {
+    expect(
+      findZoneAt({ x: 900, y: 900 }, [zone()], 0, 1, {
+        width: 1000,
+        height: 1000,
+      })
+    ).toBeNull()
+  })
+
+  it('resizes north-west edges while keeping the opposite corner fixed', () => {
+    const z = zone({ x: 100, y: 200, width: 300, height: 400 })
+    resizeZone(z, 'nw', { x: 50, y: 100 }, { width: 1000, height: 1000 })
+    expect(z).toMatchObject({ x: 50, y: 100, width: 350, height: 500 })
+    resizeZone(z, 'nw', { x: 900, y: 900 }, { width: 1000, height: 1000 })
+    expect(z).toMatchObject({ x: 390, y: 590, width: 10, height: 10 })
+  })
+
+  it('clamps resized north-west edges to the source image bounds', () => {
+    const z = zone({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      zone_source_width: 200,
+      zone_source_height: 300,
+    })
+    resizeZone(z, 'nw', { x: -50, y: -50 }, { width: 400, height: 600 })
+    expect(z).toMatchObject({ x: 0, y: 0, width: 150, height: 150 })
+  })
+
+  it('uses the rendered handle positions for hit testing', () => {
+    const rect = { x: 10, y: 20, w: 100, h: 200 }
+    const handles = getResizeHandles(rect)
+
+    expect(handles).toEqual([
+      { handle: 'nw', x: 10, y: 20 },
+      { handle: 'n', x: 60, y: 20 },
+      { handle: 'ne', x: 110, y: 20 },
+      { handle: 'w', x: 10, y: 120 },
+      { handle: 'e', x: 110, y: 120 },
+      { handle: 'sw', x: 10, y: 220 },
+      { handle: 's', x: 60, y: 220 },
+      { handle: 'se', x: 110, y: 220 },
+    ])
+    for (const marker of handles) {
+      expect(findHandleAt(marker, rect)).toBe(marker.handle)
+    }
+  })
+
+  it('moves zones without leaving source image bounds', () => {
+    const z = zone({ x: 50, y: 50, width: 100, height: 100 })
+
+    moveZone(
+      z,
+      { x: 500, y: 500 },
+      { mouseX: 50, mouseY: 50, zoneX: 50, zoneY: 50 },
+      { width: 500, height: 500 }
+    )
+
+    expect(z.x).toBe(400)
+    expect(z.y).toBe(400)
+  })
+
+  it('resizes zones without leaving source image bounds', () => {
+    const z = zone({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      zone_source_width: 200,
+      zone_source_height: 200,
+    })
+
+    resizeZone(z, 'se', { x: 500, y: 500 }, { width: 500, height: 500 })
+
+    expect(z.width).toBe(150)
+    expect(z.height).toBe(150)
+  })
+
+  it('moves zones in their original source coordinates on a different-size preview', () => {
+    const z = zone({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      zone_source_width: 1000,
+      zone_source_height: 2000,
+    })
+
+    moveZone(
+      z,
+      { x: 75, y: 75 },
+      { mouseX: 25, mouseY: 25, zoneX: 50, zoneY: 50 },
+      { width: 500, height: 500 }
+    )
+
+    expect(z.x).toBe(150)
+    expect(z.y).toBe(250)
+  })
+})
@@ -0,0 +1,204 @@
+import { OcrTemplateZone } from 'src/app/data/ocr-template'
+
+export interface DrawingRect {
+  startX: number
+  startY: number
+  endX: number
+  endY: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+}
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface DisplayRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface MoveStart {
+  mouseX: number
+  mouseY: number
+  zoneX: number
+  zoneY: number
+}
+
+export type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw'
+
+export interface ResizeHandleMarker extends Point {
+  handle: ResizeHandle
+}
+
+export const HANDLE_SIZE = 8
+export const MIN_ZONE_SIZE = 10
+
+const ZONE_COLORS = [
+  '#4f8ff7',
+  '#ff6b6b',
+  '#51cf66',
+  '#ffd43b',
+  '#cc5de8',
+  '#ff922b',
+  '#20c997',
+  '#e599f7',
+]
+
+/** Outline color for a zone, shared by the preview overlay and the zone list. */
+export function getZoneColor(index: number): string {
+  return ZONE_COLORS[index % ZONE_COLORS.length]
+}
+
+export function getZonePage(
+  zone: OcrTemplateZone,
+  previewPage: number,
+  previewPageCount: number | null
+): number {
+  const page = zone.page ?? 1
+  if (page === -1) return previewPageCount ?? previewPage + 1
+  return Math.max(page, 1)
+}
+
+export function isZoneOnPage(
+  zone: OcrTemplateZone,
+  previewPage: number,
+  previewPageCount: number | null
+): boolean {
+  return getZonePage(zone, previewPage, previewPageCount) === previewPage + 1
+}
+
+function getZoneSourceSize(
+  zone: OcrTemplateZone,
+  imageSize: Dimensions
+): Dimensions {
+  return {
+    width: zone.zone_source_width || imageSize.width,
+    height: zone.zone_source_height || imageSize.height,
+  }
+}
+
+export function getZoneDisplayRect(
+  zone: OcrTemplateZone,
+  imageSize: Dimensions
+): DisplayRect {
+  const sourceSize = getZoneSourceSize(zone, imageSize)
+  // The SVG viewBox uses the preview image's natural dimensions.
+  const scaleX = imageSize.width / sourceSize.width
+  const scaleY = imageSize.height / sourceSize.height
+
+  return {
+    x: zone.x * scaleX,
+    y: zone.y * scaleY,
+    w: zone.width * scaleX,
+    h: zone.height * scaleY,
+  }
+}
+
+export function getResizeHandles(rect: DisplayRect): ResizeHandleMarker[] {
+  return [
+    { handle: 'nw', x: rect.x, y: rect.y },
+    { handle: 'n', x: rect.x + rect.w / 2, y: rect.y },
+    { handle: 'ne', x: rect.x + rect.w, y: rect.y },
+    { handle: 'w', x: rect.x, y: rect.y + rect.h / 2 },
+    { handle: 'e', x: rect.x + rect.w, y: rect.y + rect.h / 2 },
+    { handle: 'sw', x: rect.x, y: rect.y + rect.h },
+    { handle: 's', x: rect.x + rect.w / 2, y: rect.y + rect.h },
+    { handle: 'se', x: rect.x + rect.w, y: rect.y + rect.h },
+  ]
+}
+
+export function findHandleAt(
+  point: Point,
+  rect: DisplayRect,
+  handleSize = HANDLE_SIZE
+): ResizeHandle | null {
+  return (
+    getResizeHandles(rect).find(
+      ({ x, y }) =>
+        Math.abs(point.x - x) <= handleSize &&
+        Math.abs(point.y - y) <= handleSize
+    )?.handle ?? null
+  )
+}
+
+export function findZoneAt(
+  point: Point,
+  zones: OcrTemplateZone[],
+  previewPage: number,
+  previewPageCount: number | null,
+  imageSize: Dimensions
+): number | null {
+  for (let i = zones.length - 1; i >= 0; i--) {
+    const zone = zones[i]
+    if (!isZoneOnPage(zone, previewPage, previewPageCount)) continue
+    const rect = getZoneDisplayRect(zone, imageSize)
+
+    if (
+      point.x >= rect.x &&
+      point.x <= rect.x + rect.w &&
+      point.y >= rect.y &&
+      point.y <= rect.y + rect.h
+    ) {
+      return i
+    }
+  }
+
+  return null
+}
+
+export function moveZone(
+  zone: OcrTemplateZone,
+  point: Point,
+  moveStart: MoveStart,
+  imageSize: Dimensions
+) {
+  const sourceSize = getZoneSourceSize(zone, imageSize)
+  const scaleX = sourceSize.width / imageSize.width
+  const scaleY = sourceSize.height / imageSize.height
+  const dx = Math.round((point.x - moveStart.mouseX) * scaleX)
+  const dy = Math.round((point.y - moveStart.mouseY) * scaleY)
+
+  zone.x = clamp(moveStart.zoneX + dx, 0, sourceSize.width - zone.width)
+  zone.y = clamp(moveStart.zoneY + dy, 0, sourceSize.height - zone.height)
+}
+
+export function resizeZone(
+  zone: OcrTemplateZone,
+  handle: ResizeHandle,
+  point: Point,
+  imageSize: Dimensions
+) {
+  const sourceSize = getZoneSourceSize(zone, imageSize)
+  const scaleX = sourceSize.width / imageSize.width
+  const scaleY = sourceSize.height / imageSize.height
+  const imageX = clamp(Math.round(point.x * scaleX), 0, sourceSize.width)
+  const imageY = clamp(Math.round(point.y * scaleY), 0, sourceSize.height)
+
+  if (handle.includes('w')) {
+    const right = Math.min(zone.x + zone.width, sourceSize.width)
+    zone.x = clamp(imageX, 0, right - MIN_ZONE_SIZE)
+    zone.width = right - zone.x
+  }
+  if (handle.includes('e')) {
+    zone.width = Math.max(MIN_ZONE_SIZE, imageX - zone.x)
+  }
+  if (handle.includes('n')) {
+    const bottom = Math.min(zone.y + zone.height, sourceSize.height)
+    zone.y = clamp(imageY, 0, bottom - MIN_ZONE_SIZE)
+    zone.height = bottom - zone.y
+  }
+  if (handle.includes('s')) {
+    zone.height = Math.max(MIN_ZONE_SIZE, imageY - zone.y)
+  }
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(value, max))
+}
@@ -0,0 +1,75 @@
+<pngx-page-header
+  title="OCR Templates"
+  i18n-title
+  info="Define extraction zones on document types to automatically populate custom fields via OCR."
+  i18n-info
+  >
+  <button type="button" class="btn btn-sm btn-outline-primary" (click)="editTemplate()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.OcrTemplate }">
+    <pngx-bs-icon name="plus-circle" class="me-1"></pngx-bs-icon><ng-container i18n>Add Template</ng-container>
+  </button>
+</pngx-page-header>
+
+<ul class="list-group">
+
+  <li class="list-group-item">
+    <div class="row">
+      <div class="col" i18n>Name</div>
+      <div class="col d-none d-sm-flex" i18n>Matching</div>
+      <div class="col d-none d-sm-flex" i18n>Zones</div>
+      <div class="col" i18n>Status</div>
+      <div class="col" i18n>Actions</div>
+    </div>
+  </li>
+
+  @if (loading() && templates().length === 0) {
+    <li class="list-group-item">
+      <output class="spinner-border spinner-border-sm me-2"></output>
+      <ng-container i18n>Loading...</ng-container>
+    </li>
+  }
+
+  @for (template of templates(); track template.id) {
+    <li class="list-group-item">
+      <div class="row fade" [class.show]="show()">
+        <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editTemplate(template)" [disabled]="!userCanEdit(template)">{{template.name}}</button></div>
+        <div class="col d-flex align-items-center d-none d-sm-flex">{{getMatching(template)}}</div>
+        <div class="col d-flex align-items-center d-none d-sm-flex"><code>{{template.zones.length}}</code></div>
+        <div class="col d-flex align-items-center">
+          <div class="form-check form-switch mb-0">
+            <input type="checkbox" class="form-check-input cursor-pointer" [id]="template.id+'_enable'" [(ngModel)]="template.enabled" (change)="toggleTemplateEnabled(template)" [disabled]="!userCanEdit(template)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }">
+            <label class="form-check-label cursor-pointer" [for]="template.id+'_enable'">
+              <code> @if(template.enabled) { <ng-container i18n>Enabled</ng-container> } @else { <span i18n class="text-muted">Disabled</span> }</code>
+            </label>
+          </div>
+        </div>
+        <div class="col">
+
+          <div class="btn-group d-block d-sm-none">
+            <div ngbDropdown container="body" class="d-inline-block">
+              <button type="button" class="btn btn-link" id="actionsMenuMobile{{template.id}}" (click)="$event.stopPropagation()" ngbDropdownToggle>
+                <pngx-bs-icon name="three-dots-vertical"></pngx-bs-icon>
+              </button>
+              <div ngbDropdownMenu aria-labelledby="actionsMenuMobile{{template.id}}">
+                <button (click)="editTemplate(template)" [disabled]="!userCanEdit(template)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }" ngbDropdownItem i18n>Edit</button>
+                <button (click)="deleteTemplate(template)" [disabled]="!permissionsService.currentUserOwnsObject(template)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.OcrTemplate }" ngbDropdownItem i18n>Delete</button>
+              </div>
+            </div>
+          </div>
+          <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
+            <div class="btn-group">
+              <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.OcrTemplate }" [disabled]="!userCanEdit(template)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editTemplate(template)">
+                <pngx-bs-icon width="1em" height="1em" name="pencil" class="me-1"></pngx-bs-icon><ng-container i18n>Edit</ng-container>
+              </button>
+              <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.OcrTemplate }" [disabled]="!permissionsService.currentUserOwnsObject(template)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteTemplate(template)">
+                <pngx-bs-icon width="1em" height="1em" name="trash" class="me-1"></pngx-bs-icon><ng-container i18n>Delete</ng-container>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  }
+  @if (!loading() && templates().length === 0) {
+    <li class="list-group-item" [class.show]="show()" i18n>No OCR templates defined.</li>
+  }
+</ul>
@@ -0,0 +1,300 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { of, throwError } from 'rxjs'
+import { MATCH_LITERAL, MATCH_NONE } from 'src/app/data/matching-model'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { User } from 'src/app/data/user'
+import { DirtyFormGuard } from 'src/app/guards/dirty-form.guard'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { OcrTemplateEditorComponent } from './ocr-template-editor/ocr-template-editor.component'
+import { OcrTemplatesComponent } from './ocr-templates.component'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+
+const templates: OcrTemplate[] = [
+  {
+    id: 1,
+    name: 'Invoices',
+    match: 'Northwind',
+    matching_algorithm: MATCH_LITERAL,
+    sample_document: null,
+    source_width: 0,
+    source_height: 0,
+    enabled: true,
+    zones: [],
+  },
+]
+
+describe('OcrTemplatesComponent', () => {
+  let component: OcrTemplatesComponent
+  let fixture: ComponentFixture<OcrTemplatesComponent>
+  let ocrTemplateService: OcrTemplateService
+  let modalService: NgbModal
+  let toastService: ToastService
+  let modal: NgbModalRef
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [OcrTemplatesComponent, BootstrapIconComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    })
+
+    TestBed.inject(PermissionsService).initialize(
+      [
+        'view_ocrtemplate',
+        'add_ocrtemplate',
+        'change_ocrtemplate',
+        'delete_ocrtemplate',
+      ],
+      { id: 1, groups: [], is_superuser: false } as User
+    )
+    jest
+      .spyOn(TestBed.inject(UserService), 'listAll')
+      .mockReturnValue(of({ count: 0, all: [], results: [] }))
+
+    ocrTemplateService = TestBed.inject(OcrTemplateService)
+    jest
+      .spyOn(ocrTemplateService, 'listAll')
+      .mockReturnValue(of({ count: 1, all: [1], results: templates }))
+    modalService = TestBed.inject(NgbModal)
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    toastService = TestBed.inject(ToastService)
+    fixture = TestBed.createComponent(OcrTemplatesComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  afterEach(() => modalService.dismissAll())
+
+  it('should show templates with their matching', () => {
+    const text = fixture.nativeElement.textContent
+    expect(text).toContain('Invoices')
+    expect(text).toContain('Exact match: Northwind')
+
+    expect(
+      component.getMatching({ ...templates[0], matching_algorithm: MATCH_NONE })
+    ).toEqual('None')
+    expect(component.getMatching({ ...templates[0], match: '' })).toEqual('-')
+  })
+
+  it.each([
+    {
+      name: 'owned',
+      owner: 1,
+      user_can_change: true,
+      editable: true,
+      deletable: true,
+    },
+    {
+      name: 'unowned',
+      owner: null,
+      user_can_change: true,
+      editable: true,
+      deletable: true,
+    },
+    {
+      name: 'view-only shared',
+      owner: 2,
+      user_can_change: false,
+      editable: false,
+      deletable: false,
+    },
+    {
+      name: 'editable shared',
+      owner: 2,
+      user_can_change: true,
+      editable: true,
+      deletable: false,
+    },
+  ])(
+    'should respect permissions for $name templates',
+    async ({ owner, user_can_change, editable, deletable }) => {
+      const template = { ...templates[0], owner, user_can_change }
+      component.templates.set([template])
+      fixture.detectChanges()
+      await fixture.whenStable()
+
+      expect(fixture.nativeElement.querySelector('.text-start').disabled).toBe(
+        !editable
+      )
+      expect(
+        fixture.nativeElement.querySelector('.form-switch input').disabled
+      ).toBe(!editable)
+      const buttons = Array.from<HTMLButtonElement>(
+        fixture.nativeElement.querySelectorAll('button')
+      )
+      for (const button of buttons.filter(
+        (button) => button.textContent.trim() === 'Edit'
+      )) {
+        expect(button.disabled).toBe(!editable)
+      }
+      for (const button of buttons.filter(
+        (button) => button.textContent.trim() === 'Delete'
+      )) {
+        expect(button.disabled).toBe(!deletable)
+      }
+    }
+  )
+
+  it('should allow a superuser to manage another users template', () => {
+    TestBed.inject(PermissionsService).initialize([], {
+      id: 1,
+      is_superuser: true,
+    } as User)
+    component.templates.set([
+      { ...templates[0], owner: 2, user_can_change: false },
+    ])
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('.text-start').disabled).toBe(
+      false
+    )
+    expect(
+      fixture.nativeElement.querySelector('.btn-outline-danger').disabled
+    ).toBe(false)
+  })
+
+  it('should not open mutation dialogs or patch a view-only template', () => {
+    const template = { ...templates[0], owner: 2, user_can_change: false }
+    const open = jest.spyOn(modalService, 'open')
+    const patch = jest.spyOn(ocrTemplateService, 'patch')
+    component.editTemplate(template)
+    component.toggleTemplateEnabled(template)
+    component.deleteTemplate(template)
+    expect(open).not.toHaveBeenCalled()
+    expect(patch).not.toHaveBeenCalled()
+  })
+
+  it('should require global edit permission even for an owned template', () => {
+    TestBed.inject(PermissionsService).initialize(['view_ocrtemplate'], {
+      id: 1,
+    } as User)
+    fixture.destroy()
+    fixture = TestBed.createComponent(OcrTemplatesComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('.text-start').disabled).toBe(
+      true
+    )
+    expect(fixture.nativeElement.querySelector('.form-switch input')).toBeNull()
+  })
+
+  it('should support create, show notification on error / success', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
+    const reloadSpy = jest.spyOn(component, 'reload')
+
+    fixture.debugElement
+      .queryAll(By.css('pngx-page-header button'))
+      .find((button) => button.nativeElement.textContent.includes('Add'))
+      .triggerEventHandler('click')
+
+    const editor = modal.componentInstance as OcrTemplateEditorComponent
+    expect(editor).toBeInstanceOf(OcrTemplateEditorComponent)
+    expect(editor.object).toBeUndefined()
+
+    editor.failed.emit({ error: 'error creating template' })
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    editor.succeeded.emit(templates[0])
+    expect(toastSuccessSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should pass the template to the editor', () => {
+    component.editTemplate(templates[0])
+    expect(modal.componentInstance.object).toBe(templates[0])
+  })
+
+  it('should confirm closing the editor with unsaved changes', async () => {
+    const confirmSpy = jest
+      .spyOn(TestBed.inject(DirtyFormGuard), 'confirmChanges')
+      .mockReturnValue(of(false))
+    component.editTemplate()
+    const editor = modal.componentInstance as OcrTemplateEditorComponent
+    editor.ngOnInit()
+
+    modal.dismiss()
+    await fixture.whenStable()
+    expect(confirmSpy).not.toHaveBeenCalled()
+
+    component.editTemplate()
+    const dirtyEditor = modal.componentInstance as OcrTemplateEditorComponent
+    dirtyEditor.ngOnInit()
+    dirtyEditor.template.name = 'Changed'
+    modal.dismiss()
+    await fixture.whenStable()
+    expect(confirmSpy).toHaveBeenCalled()
+    expect(modalService.hasOpenModals()).toBe(true)
+
+    dirtyEditor.saving.set(true)
+    confirmSpy.mockClear()
+    modal.dismiss()
+    await fixture.whenStable()
+    expect(confirmSpy).not.toHaveBeenCalled()
+    expect(modalService.hasOpenModals()).toBe(true)
+  })
+
+  it('should only send the enabled flag when toggling', () => {
+    const patchSpy = jest
+      .spyOn(ocrTemplateService, 'patch')
+      .mockReturnValueOnce(throwError(() => new Error('error toggling')))
+      .mockReturnValueOnce(of(templates[0]))
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
+    const reloadSpy = jest.spyOn(component, 'reload')
+
+    const toggle = fixture.debugElement.query(By.css('.form-switch input'))
+    toggle.nativeElement.click()
+    expect(patchSpy).toHaveBeenCalledWith({ id: 1, enabled: false })
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalledTimes(1)
+
+    component.toggleTemplateEnabled(templates[0])
+    expect(toastSuccessSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should support delete, show notification on error / success', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showSuccess')
+    const deleteSpy = jest.spyOn(ocrTemplateService, 'delete')
+    const reloadSpy = jest.spyOn(component, 'reload')
+
+    component.deleteTemplate(templates[0])
+    const dialog = modal.componentInstance as ConfirmDialogComponent
+
+    deleteSpy.mockReturnValueOnce(throwError(() => new Error('error deleting')))
+    dialog.confirmClicked.emit()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(dialog.buttonsEnabled()).toBe(true)
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    deleteSpy.mockReturnValueOnce(of(true))
+    dialog.confirmClicked.emit()
+    expect(toastSuccessSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it.each([true, false])(
+    'reports the enabled state %s after the update succeeds',
+    (enabled) => {
+      const template = { ...templates[0], enabled }
+      jest.spyOn(ocrTemplateService, 'patch').mockReturnValue(of(template))
+      const toast = jest.spyOn(toastService, 'showSuccess')
+      component.toggleTemplateEnabled(template)
+      expect(toast).toHaveBeenCalledWith(
+        `${enabled ? 'Enabled' : 'Disabled'} OCR template "${template.name}"`
+      )
+    }
+  )
+})
@@ -0,0 +1,185 @@
+import { Component, OnInit, inject, signal } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
+import { firstValueFrom, takeUntil, tap } from 'rxjs'
+import { MATCH_NONE, MATCHING_ALGORITHMS } from 'src/app/data/matching-model'
+import { OcrTemplate } from 'src/app/data/ocr-template'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { DirtyFormGuard } from 'src/app/guards/dirty-form.guard'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
+import { OcrTemplateService } from 'src/app/services/rest/ocr-template.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { OcrTemplateEditorComponent } from './ocr-template-editor/ocr-template-editor.component'
+
+@Component({
+  selector: 'pngx-ocr-templates',
+  templateUrl: './ocr-templates.component.html',
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    FormsModule,
+    NgbDropdownModule,
+    BootstrapIconComponent,
+  ],
+})
+export class OcrTemplatesComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit
+{
+  private readonly ocrTemplateService = inject(OcrTemplateService)
+  public readonly permissionsService = inject(PermissionsService)
+  private readonly modalService = inject(NgbModal)
+  private readonly dirtyFormGuard = inject(DirtyFormGuard)
+  private readonly toastService = inject(ToastService)
+
+  public readonly templates = signal<OcrTemplate[]>([])
+
+  ngOnInit() {
+    this.reload()
+  }
+
+  reload() {
+    this.loading.set(true)
+    this.ocrTemplateService
+      .listAll()
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        tap((r) => this.templates.set(r.results))
+      )
+      .subscribe(() => {
+        this.show.set(true)
+        this.loading.set(false)
+      })
+  }
+
+  getMatching(template: OcrTemplate): string {
+    if (template.matching_algorithm === MATCH_NONE) {
+      return $localize`None`
+    }
+    if (!template.match) {
+      return '-'
+    }
+    const algorithm = MATCHING_ALGORITHMS.find(
+      (a) => a.id === template.matching_algorithm
+    )
+    return `${algorithm?.shortName}: ${template.match}`
+  }
+
+  editTemplate(template?: OcrTemplate) {
+    if (template && !this.userCanEdit(template)) return
+    const modal = this.modalService.open(OcrTemplateEditorComponent, {
+      backdrop: 'static',
+      keyboard: false,
+      size: 'xxl',
+      fullscreen: 'lg',
+      scrollable: true,
+      ariaLabelledBy: 'ocr-template-editor-title',
+      beforeDismiss: () => {
+        const editor: OcrTemplateEditorComponent = modal.componentInstance
+        if (editor.saving()) return false
+        if (!editor.isDirty) return true
+        return firstValueFrom(
+          this.dirtyFormGuard.confirmChanges(undefined, $localize`Close`)
+        )
+      },
+    })
+    modal.componentInstance.object = template
+    modal.componentInstance.succeeded
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((saved: OcrTemplate) => {
+        this.toastService.showSuccess(
+          $localize`Saved OCR template "${saved.name}".`
+        )
+        this.ocrTemplateService.clearCache()
+        this.reload()
+      })
+    modal.componentInstance.failed
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((e) => {
+        this.toastService.showError($localize`Error saving OCR template.`, e)
+      })
+  }
+
+  toggleTemplateEnabled(template: OcrTemplate) {
+    if (!this.userCanEdit(template)) return
+    this.ocrTemplateService
+      .patch({ id: template.id, enabled: template.enabled } as OcrTemplate)
+      .subscribe({
+        next: () => {
+          this.toastService.showSuccess(
+            template.enabled
+              ? $localize`Enabled OCR template "${template.name}"`
+              : $localize`Disabled OCR template "${template.name}"`
+          )
+          this.reload()
+        },
+        error: (e) => {
+          this.toastService.showError(
+            $localize`Error toggling OCR template "${template.name}".`,
+            e
+          )
+          this.reload()
+        },
+      })
+  }
+
+  deleteTemplate(template: OcrTemplate) {
+    if (
+      !this.permissionsService.currentUserCan(
+        PermissionAction.Delete,
+        PermissionType.OcrTemplate
+      ) ||
+      !this.permissionsService.currentUserOwnsObject(template)
+    )
+      return
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete OCR template`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this OCR template.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled.set(false)
+      this.ocrTemplateService.delete(template).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showSuccess(
+            $localize`Deleted OCR template "${template.name}".`
+          )
+          this.ocrTemplateService.clearCache()
+          this.reload()
+        },
+        error: (e) => {
+          modal.componentInstance.buttonsEnabled.set(true)
+          this.toastService.showError(
+            $localize`Error deleting OCR template "${template.name}".`,
+            e
+          )
+        },
+      })
+    })
+  }
+
+  userCanEdit(template: OcrTemplate): boolean {
+    return (
+      this.permissionsService.currentUserCan(
+        PermissionAction.Change,
+        PermissionType.OcrTemplate
+      ) &&
+      this.permissionsService.currentUserHasObjectPermissions(
+        PermissionAction.Change,
+        template
+      )
+    )
+  }
+}
@@ -0,0 +1,115 @@
+import { CustomFieldDataType } from './custom-field'
+import { MatchingModel } from './matching-model'
+import { ObjectWithPermissions } from './object-with-permissions'
+
+export enum OcrZoneTarget {
+  CustomField = 'custom_field',
+  Title = 'title',
+  Asn = 'asn',
+  Created = 'created',
+}
+
+export enum OcrZoneTransform {
+  None = 'none',
+  Strip = 'strip',
+  Uppercase = 'uppercase',
+  Lowercase = 'lowercase',
+  Numeric = 'numeric',
+  StripPunctuation = 'strip_punctuation',
+  Date = 'date',
+  QrCode = 'qr_code',
+}
+
+export const DEFAULT_OCR_ZONE_LANGUAGE = 'eng'
+
+/** The field a zone writes to, keyed by OcrTemplate.combine_formats. */
+export function getZoneFieldKey(zone: OcrTemplateZone): string | null {
+  if (zone.target !== OcrZoneTarget.CustomField) return zone.target
+  return zone.custom_field === null ? null : String(zone.custom_field)
+}
+
+/** Custom field types zone OCR can write to. See models.py OCR_SUPPORTED_FIELD_TYPES. */
+export const OCR_SUPPORTED_FIELD_TYPES: CustomFieldDataType[] = [
+  CustomFieldDataType.String,
+  CustomFieldDataType.Url,
+  CustomFieldDataType.Date,
+  CustomFieldDataType.Integer,
+  CustomFieldDataType.Float,
+  CustomFieldDataType.Monetary,
+  CustomFieldDataType.LongText,
+  CustomFieldDataType.Boolean,
+]
+
+export const OCR_BUILTIN_TARGETS = [
+  { id: OcrZoneTarget.Title, name: $localize`Title` },
+  { id: OcrZoneTarget.Asn, name: $localize`Archive serial number` },
+  { id: OcrZoneTarget.Created, name: $localize`Date created` },
+]
+
+export interface OcrTemplateZone {
+  id?: number
+  name: string
+  target: OcrZoneTarget
+  custom_field: number | null
+  page?: number
+  x: number
+  y: number
+  width: number
+  height: number
+  ocr_language: string
+  transform: OcrZoneTransform
+  date_format?: string
+  validation_regex: string
+  order: number
+  zone_source_width?: number
+  zone_source_height?: number
+}
+
+export interface OcrTemplate extends MatchingModel, ObjectWithPermissions {
+  name: string
+  sample_document: number | null
+  source_width: number
+  source_height: number
+  enabled: boolean
+  combine_formats?: Record<string, string>
+  created?: string
+  updated?: string
+  zones: OcrTemplateZone[]
+}
+
+export interface ZoneTestRequest {
+  name: string
+  x: number
+  y: number
+  width: number
+  height: number
+  page: number
+  ocr_language: string
+  transform: OcrZoneTransform
+  date_format?: string
+  validation_regex: string
+  zone_source_width?: number
+  zone_source_height?: number
+}
+
+export interface OcrZoneTestResult {
+  raw_text?: string | null
+  value?: string | null
+  regex?: string
+  regex_match?: boolean | null
+  error?: string
+}
+
+export interface OcrZoneRunResult {
+  template: string
+  zone: string
+  custom_field: string
+  value: string | number | boolean | null
+  reason?: string | null
+}
+
+export interface OcrZoneRunResponse {
+  status: 'completed' | 'skipped'
+  reason?: 'no_template'
+  results: OcrZoneRunResult[]
+}
@@ -35,6 +35,7 @@ export enum HideableSidebarItemID {
  SavedViews = 'saved_views',
  ShareLinks = 'share_links',
  Workflows = 'workflows',
+  OcrTemplates = 'ocr_templates',
  Mail = 'mail',
  Documentation = 'documentation',
 }
@@ -3,12 +3,16 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyCheckGuard } from '@ngneat/dirty-check-forms'
 import { Observable, Subject } from 'rxjs'
 import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
+import { ActivatedRouteSnapshot } from '@angular/router'

@Injectable({ providedIn: 'root' })
 export class DirtyFormGuard extends DirtyCheckGuard {
  private modalService = inject(NgbModal)

-  confirmChanges(): Observable<boolean> {
+  confirmChanges(
+    _currentRoute?: ActivatedRouteSnapshot,
+    leaveLabel: string = $localize`Leave page`
+  ): Observable<boolean> {
    let modal = this.modalService.open(ConfirmDialogComponent, {
      backdrop: 'static',
    })
@@ -16,7 +20,7 @@ export class DirtyFormGuard extends DirtyCheckGuard {
    modal.componentInstance.messageBold = $localize`You have unsaved changes.`
    modal.componentInstance.message = $localize`Are you sure you want to leave?`
    modal.componentInstance.btnClass = 'btn-warning'
-    modal.componentInstance.btnCaption = $localize`Leave page`
+    modal.componentInstance.btnCaption = leaveLabel
    modal.componentInstance.confirmClicked.subscribe(() => {
      modal.componentInstance.buttonsEnabled.set(false)
      modal.close()
@@ -283,6 +283,10 @@ describe('PermissionsService', () => {
        'view_workflow',
        'change_workflow',
        'delete_workflow',
+        'add_ocrtemplate',
+        'view_ocrtemplate',
+        'change_ocrtemplate',
+        'delete_ocrtemplate',
        'add_customfield',
        'view_customfield',
        'change_customfield',
@@ -29,6 +29,7 @@ export enum PermissionType {
  ShareLinkBundle = '%s_sharelinkbundle',
  CustomField = '%s_customfield',
  Workflow = '%s_workflow',
+  OcrTemplate = '%s_ocrtemplate',
  ProcessedMail = '%s_processedmail',
  GlobalStatistics = '%s_global_statistics',
  SystemMonitoring = '%s_system_monitoring',
@@ -290,7 +290,6 @@ describe(`DocumentService`, () => {
    expect(req.request.method).toEqual('POST')
    expect(req.request.body).toEqual({
      documents: ids,
-      from_webui: true,
    })
  })

@@ -304,7 +303,6 @@ describe(`DocumentService`, () => {
    expect(req.request.body).toEqual({
      documents: ids,
      remote_ocr: false,
-      from_webui: true,
    })
  })

@@ -319,7 +317,6 @@ describe(`DocumentService`, () => {
    expect(req.request.body).toEqual({
      documents: ids,
      remote_ocr: true,
-      from_webui: true,
    })
  })

@@ -334,7 +331,6 @@ describe(`DocumentService`, () => {
      documents: ids,
      degrees: 90,
      source_mode: 'latest_version',
-      from_webui: true,
    })
  })

@@ -350,7 +346,6 @@ describe(`DocumentService`, () => {
      documents: ids,
      metadata_document_id: 1,
      delete_originals: true,
-      from_webui: true,
    })
  })

@@ -364,7 +359,6 @@ describe(`DocumentService`, () => {
    expect(req.request.body).toEqual({
      documents: ids,
      root_document_id: 2,
-      from_webui: true,
    })
  })

@@ -380,7 +374,6 @@ describe(`DocumentService`, () => {
      documents: ids,
      root_document_id: 2,
      version_label: 'Imported',
-      from_webui: true,
    })
  })

@@ -395,7 +388,6 @@ describe(`DocumentService`, () => {
    expect(req.request.body).toEqual({
      documents: ids,
      operations: [{ page: 1, rotate: 90, doc: 0 }],
-      from_webui: true,
    })
  })

@@ -411,7 +403,6 @@ describe(`DocumentService`, () => {
      documents: ids,
      password: 'secret',
      update_document: true,
-      from_webui: true,
    })
  })

@@ -574,6 +565,20 @@ describe(`DocumentService`, () => {

    req.flush('task-id')
  })
+
+  it('should call appropriate api endpoint for running zone OCR', () => {
+    const url = `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/run-zone-ocr/`
+    subscription = service.runZoneOcr(documents[0].id).subscribe()
+    let req = httpTestingController.expectOne(url)
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({})
+    req.flush({ status: 'completed', results: [] })
+
+    subscription = service.runZoneOcr(documents[0].id, 3, 10).subscribe()
+    req = httpTestingController.expectOne(`${url}?version=10`)
+    expect(req.request.body).toEqual({ template: 3 })
+    req.flush({ status: 'completed', results: [] })
+  })
 })

 it('should construct sort fields respecting permissions', () => {
@@ -12,6 +12,7 @@ import {
 import { DocumentMetadata } from 'src/app/data/document-metadata'
 import { DocumentSuggestions } from 'src/app/data/document-suggestions'
 import { FilterRule } from 'src/app/data/filter-rule'
+import { OcrZoneRunResponse } from 'src/app/data/ocr-template'
 import { Results, SelectionData } from 'src/app/data/results'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { BulkOperationResponse } from '../../data/bulk-operation'
@@ -351,23 +352,40 @@ export class DocumentService extends AbstractPaperlessService<Document> {
  }

  deleteDocuments(selection: DocumentSelectionQuery) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'delete'),
-      { ...selection, from_webui: true }
-    )
+    return this.http.post(this.getResourceUrl(null, 'delete'), {
+      ...selection,
+    })
  }

  reprocessDocuments(
    selection: DocumentSelectionQuery,
    remoteOcr: boolean = false
  ) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'reprocess'),
-      {
-        ...selection,
-        remote_ocr: remoteOcr,
-        from_webui: true,
-      }
+    return this.http.post(this.getResourceUrl(null, 'reprocess'), {
+      ...selection,
+      remote_ocr: remoteOcr,
+    })
+  }
+
+  runZoneOcrDocuments(
+    selection: DocumentSelectionQuery,
+    templateId: number | null = null
+  ) {
+    return this.http.post(this.getResourceUrl(null, 'run_zone_ocr'), {
+      ...selection,
+      ...(templateId ? { template: templateId } : {}),
+    })
+  }
+
+  runZoneOcr(
+    id: number,
+    templateId: number | null = null,
+    versionId: number | null = null
+  ): Observable<OcrZoneRunResponse> {
+    return this.http.post<OcrZoneRunResponse>(
+      this.getResourceUrl(id, 'run-zone-ocr'),
+      templateId ? { template: templateId } : {},
+      { params: versionId ? { version: versionId.toString() } : {} }
    )
  }

@@ -376,26 +394,18 @@ export class DocumentService extends AbstractPaperlessService<Document> {
    degrees: number,
    sourceMode: BulkEditSourceMode = BulkEditSourceMode.LATEST_VERSION
  ) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'rotate'),
-      {
-        ...selection,
-        degrees,
-        source_mode: sourceMode,
-        from_webui: true,
-      }
-    )
+    return this.http.post(this.getResourceUrl(null, 'rotate'), {
+      ...selection,
+      degrees,
+      source_mode: sourceMode,
+    })
  }

  mergeDocuments(ids: number[], request: MergeDocumentsRequest = {}) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'merge'),
-      {
-        documents: ids,
-        ...request,
-        from_webui: true,
-      }
-    )
+    return this.http.post(this.getResourceUrl(null, 'merge'), {
+      documents: ids,
+      ...request,
+    })
  }

  mergeDocumentsAsVersions(
@@ -403,40 +413,28 @@ export class DocumentService extends AbstractPaperlessService<Document> {
    rootDocumentId: number,
    versionLabel?: string
  ) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'merge_as_versions'),
-      {
-        documents: ids,
-        root_document_id: rootDocumentId,
-        ...(versionLabel ? { version_label: versionLabel } : {}),
-        from_webui: true,
-      }
-    )
+    return this.http.post(this.getResourceUrl(null, 'merge_as_versions'), {
+      documents: ids,
+      root_document_id: rootDocumentId,
+      ...(versionLabel ? { version_label: versionLabel } : {}),
+    })
  }

  editPdfDocuments(ids: number[], request: EditPdfDocumentsRequest) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'edit_pdf'),
-      {
-        documents: ids,
-        ...request,
-        from_webui: true,
-      }
-    )
+    return this.http.post(this.getResourceUrl(null, 'edit_pdf'), {
+      documents: ids,
+      ...request,
+    })
  }

  removePasswordDocuments(
    ids: number[],
    request: RemovePasswordDocumentsRequest
  ) {
-    return this.http.post<BulkOperationResponse>(
-      this.getResourceUrl(null, 'remove_password'),
-      {
-        documents: ids,
-        ...request,
-        from_webui: true,
-      }
-    )
+    return this.http.post(this.getResourceUrl(null, 'remove_password'), {
+      documents: ids,
+      ...request,
+    })
  }

  getSelectionData(
@@ -0,0 +1,78 @@
+import { provideHttpClient } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import { TestBed } from '@angular/core/testing'
+import { OcrZoneTransform, ZoneTestRequest } from 'src/app/data/ocr-template'
+import { environment } from 'src/environments/environment'
+import { OcrTemplateService } from './ocr-template.service'
+
+describe('OcrTemplateService', () => {
+  let service: OcrTemplateService
+  let http: HttpTestingController
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    })
+    service = TestBed.inject(OcrTemplateService)
+    http = TestBed.inject(HttpTestingController)
+  })
+
+  afterEach(() => http.verify())
+
+  it('builds page image URLs with zero-based page numbers', () => {
+    expect(service.getPageImageUrl(12, 0)).toBe(
+      `${environment.apiBaseUrl}ocr_templates/document-page-image/12/0/`
+    )
+    expect(service.getPageImageUrl(12, 2)).toBe(
+      `${environment.apiBaseUrl}ocr_templates/document-page-image/12/2/`
+    )
+  })
+
+  it('posts a zone test and returns the extraction result', () => {
+    const zone: ZoneTestRequest = {
+      name: 'Total',
+      x: 10,
+      y: 20,
+      width: 100,
+      height: 50,
+      page: -1,
+      ocr_language: 'eng',
+      transform: OcrZoneTransform.Numeric,
+      validation_regex: '\\d+',
+      zone_source_width: 1000,
+      zone_source_height: 1500,
+    }
+    const result = {
+      raw_text: 'Total: 123',
+      value: '123',
+      regex: '\\d+',
+      regex_match: true,
+    }
+    const next = jest.fn()
+    service.testZone(12, zone).subscribe(next)
+    const request = http.expectOne(
+      `${environment.apiBaseUrl}ocr_templates/test-zone/`
+    )
+    expect(request.request.method).toBe('POST')
+    expect(request.request.body).toEqual({ document: 12, zone })
+    request.flush(result)
+    expect(next).toHaveBeenCalledWith(result)
+  })
+
+  it('passes zone-test failures to the caller', () => {
+    const error = jest.fn()
+    service.testZone(12, {} as ZoneTestRequest).subscribe({ error })
+    http
+      .expectOne(`${environment.apiBaseUrl}ocr_templates/test-zone/`)
+      .flush(
+        { error: 'Invalid zone' },
+        { status: 400, statusText: 'Bad Request' }
+      )
+    expect(error).toHaveBeenCalledWith(
+      expect.objectContaining({ status: 400, error: { error: 'Invalid zone' } })
+    )
+  })
+})
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import {
+  OcrTemplate,
+  OcrZoneTestResult,
+  ZoneTestRequest,
+} from '../../data/ocr-template'
+import { AbstractPaperlessService } from './abstract-paperless-service'
+
+@Injectable({ providedIn: 'root' })
+export class OcrTemplateService extends AbstractPaperlessService<OcrTemplate> {
+  constructor() {
+    super()
+    this.resourceName = 'ocr_templates'
+  }
+
+  getPageImageUrl(docId: number, page: number): string {
+    return `${this.baseUrl}${this.resourceName}/document-page-image/${docId}/${page}/`
+  }
+
+  testZone(
+    docId: number,
+    zone: ZoneTestRequest
+  ): Observable<OcrZoneTestResult> {
+    return this.http.post<OcrZoneTestResult>(
+      `${this.baseUrl}${this.resourceName}/test-zone/`,
+      { document: docId, zone }
+    )
+  }
+}
@@ -1,145 +0,0 @@
-import { TestBed } from '@angular/core/testing'
-import { Router } from '@angular/router'
-import { BulkOperationStatus } from '../data/bulk-operation'
-import { PaperlessTaskStatus } from '../data/paperless-task'
-import { PermissionsService } from './permissions.service'
-import { TaskNotificationService } from './task-notification.service'
-import { Toast, ToastLevel, ToastService } from './toast.service'
-
-describe('TaskNotificationService', () => {
-  let service: TaskNotificationService
-  let toastService: ToastService
-  let popups: Toast[]
-  let notifications: Toast[]
-  const navigate = jest.fn()
-  const currentUserCan = jest.fn()
-  const result = (
-    status = PaperlessTaskStatus.Success
-  ): BulkOperationStatus => ({
-    task_id: 'task-1',
-    operation: 'run_workflow',
-    status,
-  })
-
-  beforeEach(() => {
-    jest.useFakeTimers()
-    currentUserCan.mockReturnValue(true)
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: Router, useValue: { navigate } },
-        { provide: PermissionsService, useValue: { currentUserCan } },
-      ],
-    })
-    service = TestBed.inject(TaskNotificationService)
-    toastService = TestBed.inject(ToastService)
-    popups = []
-    notifications = []
-    toastService.showToast.subscribe((toast) => popups.push(toast))
-    toastService
-      .getToasts()
-      .subscribe((toasts) => (notifications = [...toasts]))
-  })
-
-  afterEach(() => {
-    jest.clearAllTimers()
-    jest.useRealTimers()
-  })
-
-  it('replaces a queued notification with its result, retaining the task link', () => {
-    service.showQueued('task-1', 'Workflow queued.', {
-      content: 'Workflow completed.',
-    })
-    jest.advanceTimersByTime(399)
-    expect(popups).toHaveLength(0)
-    jest.advanceTimersByTime(1)
-    expect(popups[0].content).toBe('Workflow queued.')
-    service.complete(result())
-    expect(notifications).toHaveLength(1)
-    expect(popups[1]).toEqual(
-      expect.objectContaining({
-        id: popups[0].id,
-        content: 'Workflow completed.',
-        level: ToastLevel.Success,
-        actionName: 'View task',
-      })
-    )
-    popups[1].action()
-    expect(navigate).toHaveBeenCalledWith(['/tasks'], {
-      queryParams: { task_id: 'task-1' },
-    })
-  })
-
-  it('shows only the result when a task completes during the grace period', () => {
-    service.showQueued('task-1', 'Queued')
-    jest.advanceTimersByTime(100)
-    service.complete(result())
-    jest.advanceTimersByTime(1000)
-    expect(popups.map((toast) => toast.content)).toEqual([
-      'Operation completed.',
-    ])
-  })
-
-  it('does not show a stale queued state when completion beats the HTTP response', () => {
-    service.complete(result())
-    service.showQueued('task-1', 'Workflow queued.', {
-      content: 'Workflow completed.',
-    })
-    jest.advanceTimersByTime(1000)
-    expect(popups.every((toast) => toast.level === ToastLevel.Success)).toBe(
-      true
-    )
-    expect(notifications).toHaveLength(1)
-    expect(notifications[0].content).toBe('Workflow completed.')
-  })
-
-  it.each([PaperlessTaskStatus.Failure, PaperlessTaskStatus.Revoked])(
-    'replaces the queued state with an error for %s',
-    (status) => {
-      service.showQueued('task-1', 'Queued', {
-        content: 'Success',
-        actionName: 'Undo',
-      })
-      jest.advanceTimersByTime(400)
-      service.complete({ ...result(status), error: 'Task failed' })
-      expect(notifications).toHaveLength(1)
-      expect(notifications[0]).toEqual(
-        expect.objectContaining({
-          level: ToastLevel.Error,
-          error: 'Task failed',
-          actionName: 'View task',
-        })
-      )
-    }
-  )
-
-  it('ignores nonterminal and duplicate outcomes', () => {
-    service.showQueued('task-1', 'Queued')
-    service.complete(result(PaperlessTaskStatus.Started))
-    expect(popups).toHaveLength(0)
-    service.complete(result())
-    service.complete(result())
-    expect(popups).toHaveLength(1)
-  })
-
-  it('keeps concurrent task notifications separate', () => {
-    service.showQueued('task-1', 'First queued')
-    service.showQueued('task-2', 'Second queued')
-    jest.advanceTimersByTime(400)
-    service.complete(result())
-    expect(notifications).toHaveLength(2)
-    expect(notifications.map((toast) => toast.content)).toEqual([
-      'Second queued',
-      'Operation completed.',
-    ])
-  })
-
-  it('omits task links without task viewing permission', () => {
-    currentUserCan.mockReturnValue(false)
-    service.showQueued('task-1', 'Queued')
-    jest.advanceTimersByTime(400)
-    service.complete(result())
-    expect(popups.every((toast) => !toast.action && !toast.actionName)).toBe(
-      true
-    )
-  })
-})
@@ -1,110 +0,0 @@
-import { inject, Injectable, OnDestroy } from '@angular/core'
-import { Router } from '@angular/router'
-import { BulkOperationStatus } from '../data/bulk-operation'
-import { PaperlessTaskStatus } from '../data/paperless-task'
-import {
-  PermissionAction,
-  PermissionsService,
-  PermissionType,
-} from './permissions.service'
-import { Toast, ToastLevel, ToastService } from './toast.service'
-
-interface PendingNotification {
-  success: Partial<Toast>
-  timer: ReturnType<typeof setTimeout>
-}
-
-@Injectable({ providedIn: 'root' })
-export class TaskNotificationService implements OnDestroy {
-  private toastService = inject(ToastService)
-  private router = inject(Router)
-  private permissionsService = inject(PermissionsService)
-  private pending = new Map<string, PendingNotification>()
-  private completed = new Map<string, BulkOperationStatus>()
-
-  ngOnDestroy() {
-    this.pending.forEach(({ timer }) => clearTimeout(timer))
-  }
-
-  showQueued(taskId: string, content: string, success: Partial<Toast> = {}) {
-    const completed = this.completed.get(taskId)
-    if (completed) {
-      this.showResult(completed, success)
-      return
-    }
-    if (this.pending.has(taskId)) return
-    this.pending.set(taskId, {
-      success,
-      // short delay in case the task finishes super fast
-      timer: setTimeout(() => this.show(taskId, { content, delay: 5000 }), 400),
-    })
-  }
-
-  complete(result: BulkOperationStatus) {
-    if (
-      ![
-        PaperlessTaskStatus.Success,
-        PaperlessTaskStatus.Failure,
-        PaperlessTaskStatus.Revoked,
-      ].includes(result.status) ||
-      this.completed.has(result.task_id)
-    )
-      return
-
-    this.completed.set(result.task_id, result)
-    // Retain recent outcomes in case task finishes quickly
-    if (this.completed.size > 100) {
-      this.completed.delete(this.completed.keys().next().value)
-    }
-    const pending = this.pending.get(result.task_id)
-    if (pending) {
-      clearTimeout(pending.timer)
-      this.pending.delete(result.task_id)
-    }
-    // Trash needs the caller's document IDs to offer Undo on success.
-    if (
-      pending ||
-      result.operation !== 'delete' ||
-      result.status !== PaperlessTaskStatus.Success
-    ) {
-      this.showResult(result, pending?.success)
-    }
-  }
-
-  private showResult(
-    result: BulkOperationStatus,
-    success: Partial<Toast> = {}
-  ) {
-    const succeeded = result.status === PaperlessTaskStatus.Success
-    this.show(result.task_id, {
-      content: succeeded
-        ? $localize`Operation completed.`
-        : result.status === PaperlessTaskStatus.Revoked
-          ? $localize`Operation revoked.`
-          : $localize`Operation failed. Some changes may already have been applied.`,
-      delay: succeeded ? 5000 : 10000,
-      level: succeeded ? ToastLevel.Success : ToastLevel.Error,
-      ...(succeeded ? success : { error: result.error }),
-    })
-  }
-
-  private show(taskId: string, toast: Toast) {
-    const canViewTasks = this.permissionsService.currentUserCan(
-      PermissionAction.View,
-      PermissionType.PaperlessTask
-    )
-    this.toastService.show({
-      id: `task-${taskId}`,
-      ...(canViewTasks
-        ? {
-            actionName: $localize`View task`,
-            action: () =>
-              this.router.navigate(['/tasks'], {
-                queryParams: { task_id: taskId },
-              }),
-          }
-        : {}),
-      ...toast,
-    })
-  }
-}
@@ -38,29 +38,6 @@ describe('ToastService', () => {
    })
  })

-  it('updates a notification by ID without duplicating or moving it', () => {
-    let notifications: Toast[] = []
-    toastService
-      .getToasts()
-      .subscribe((toasts) => (notifications = [...toasts]))
-    toastService.show({ id: 'task-1', content: 'Queued', delay: 5000 })
-    toastService.show({
-      id: 'other',
-      content: 'Another notification',
-      delay: 5000,
-    })
-    toastService.show({
-      id: 'task-1',
-      content: 'Completed',
-      delay: 5000,
-      level: ToastLevel.Success,
-    })
-    expect(notifications.map((toast) => toast.content)).toEqual([
-      'Another notification',
-      'Completed',
-    ])
-  })
-
  it('parses error string to object on show', () => {
    const toast = {
      title: 'Title',
@@ -75,14 +75,7 @@ export class ToastService {
    if (persistent) {
      // the dropdown is open, so it's seen as it arrives
      toast.read = !!this._suppressPopupToasts
-      const index = this.toasts.findIndex(
-        (existing) => existing.id === toast.id
-      )
-      if (index === -1) {
-        this.toasts.unshift(toast)
-      } else {
-        this.toasts[index] = toast
-      }
+      this.toasts.unshift(toast)
      this.toastsSubject.next(this.toasts)
    }
    // Popups are suppressed while the dropdown is open
@@ -5,10 +5,8 @@ import {
  HttpTestingController,
 } from '@angular/common/http/testing'
 import { environment } from 'src/environments/environment'
-import { PaperlessTaskStatus } from '../data/paperless-task'
 import { DocumentListViewService } from './document-list-view.service'
-import { TaskNotificationService } from './task-notification.service'
-import { Toast, ToastLevel, ToastService } from './toast.service'
+import { Toast, ToastService } from './toast.service'
 import { TrashService } from './trash.service'

 describe('TrashService', () => {
@@ -107,52 +105,4 @@ describe('TrashService', () => {
    expect(toast.content).toEqual('Moved 500 document(s) to the trash')
    expect(toast.action).toBeUndefined()
  })
-
-  it('offers Undo only after the matching delete task succeeds', () => {
-    let toasts: Toast[] = []
-    toastService.getToasts().subscribe((t) => (toasts = [...t]))
-    service.trackMovedToTrash('delete-1', 2, [1, 2])
-    expect(toasts).toHaveLength(0)
-    const notifications = TestBed.inject(TaskNotificationService)
-    notifications.complete({
-      task_id: 'other-delete',
-      operation: 'delete',
-      status: PaperlessTaskStatus.Success,
-    })
-    expect(toasts).toHaveLength(0)
-    notifications.complete({
-      task_id: 'delete-1',
-      operation: 'delete',
-      status: PaperlessTaskStatus.Success,
-    })
-    expect(toasts).toHaveLength(1)
-    expect(toasts[0].actionName).toBe('Undo')
-    toasts[0].action()
-    const req = httpTestingController.expectOne(
-      `${environment.apiBaseUrl}trash/`
-    )
-    expect(req.request.body).toEqual({ action: 'restore', documents: [1, 2] })
-  })
-
-  it('handles completion before the queue response and does not offer Undo on failure', () => {
-    let toasts: Toast[] = []
-    toastService.getToasts().subscribe((t) => (toasts = [...t]))
-    const notifications = TestBed.inject(TaskNotificationService)
-    notifications.complete({
-      task_id: 'delete-1',
-      operation: 'delete',
-      status: PaperlessTaskStatus.Success,
-    })
-    service.trackMovedToTrash('delete-1', 1, [1])
-    expect(toasts[0].actionName).toBe('Undo')
-    service.trackMovedToTrash('delete-2', 1, [2])
-    notifications.complete({
-      task_id: 'delete-2',
-      operation: 'delete',
-      status: PaperlessTaskStatus.Failure,
-    })
-    expect(toasts).toHaveLength(2)
-    expect(toasts[0].level).toBe(ToastLevel.Error)
-    expect(toasts[0].actionName).not.toBe('Undo')
-  })
 })
@@ -5,8 +5,7 @@ import { environment } from 'src/environments/environment'
 import { Document } from '../data/document'
 import { Results } from '../data/results'
 import { DocumentListViewService } from './document-list-view.service'
-import { TaskNotificationService } from './task-notification.service'
-import { Toast, ToastLevel, ToastService } from './toast.service'
+import { ToastLevel, ToastService } from './toast.service'

@Injectable({
  providedIn: 'root',
@@ -15,22 +14,6 @@ export class TrashService {
  private http = inject(HttpClient)
  private toastService = inject(ToastService)
  private documentListViewService = inject(DocumentListViewService)
-  private taskNotifications = inject(TaskNotificationService)
-
-  public trackMovedToTrash(
-    taskId: string,
-    count: number,
-    documents?: number[]
-  ) {
-    this.taskNotifications.showQueued(
-      taskId,
-      $localize`Bulk operation queued.`,
-      this.movedToTrashToast(
-        $localize`Moved ${count} document(s) to the trash`,
-        documents
-      )
-    )
-  }

  public getTrash(page: number = 1): Observable<Results<Document>> {
    const httpParams = new HttpParams().set('page', page.toString())
@@ -60,22 +43,14 @@ export class TrashService {
   * Shows a toast with an Undo action when possible
   */
  public notifyMovedToTrash(content: string, documents?: number[]) {
-    this.toastService.show(this.movedToTrashToast(content, documents))
-  }
-
-  private movedToTrashToast(content: string, documents?: number[]): Toast {
    const canUndo = documents?.length > 0
-    return {
+    this.toastService.show({
      content,
      delay: 10000,
      level: ToastLevel.Success,
-      ...(canUndo
-        ? {
-            actionName: $localize`Undo`,
-            action: () => this.undoMoveToTrash(documents),
-          }
-        : {}),
-    }
+      actionName: canUndo ? $localize`Undo` : undefined,
+      action: canUndo ? () => this.undoMoveToTrash(documents) : undefined,
+    })
  }

  private undoMoveToTrash(documents: number[]) {
Author	SHA1	Message	Date
shamoon	30e95a6d28	Fix migration	2026-11-13 09:20:47 -08:00
shamoon	8c50a5ee7b	Merge branch 'dev' into feature/ocr-templates	2026-11-13 09:09:39 -08:00
shamoon	886761a53b	sonar	2026-11-09 09:32:40 -08:00
shamoon	198b165f26	Dont confuse image archive pdf with actual image	2026-11-09 09:21:47 -08:00
shamoon	e63f27a712	Crap missed versioning stuff, default to latest but allow specific	2026-11-09 09:19:30 -08:00
shamoon	3ce5f8bc69	Ensure reindex happens after extraction on manual runs	2026-11-09 09:01:20 -08:00
shamoon	58cdd4f19a	fix migration	2026-11-09 08:44:09 -08:00
shamoon	5c8c0db08f	preview should also require global view doc	2026-11-09 08:43:34 -08:00
shamoon	5c28d8282d	Merge branch 'dev' into feature/ocr-templates	2026-11-09 08:40:39 -08:00
shamoon	aede2e6a5a	Merge branch 'dev' into feature/ocr-templates	2026-11-06 08:46:46 -08:00
shamoon	fa792d33c2	Fix icon imports	2026-11-06 08:46:42 -08:00
shamoon	ade5901a4d	Update for new icons	2026-11-02 21:46:45 -08:00
shamoon	2b620a2823	Merge branch 'dev' into feature/ocr-templates	2026-11-02 21:44:11 -08:00
shamoon	45b8977623	Merge branch 'dev' into feature/ocr-templates	2026-10-29 15:46:31 -07:00
shamoon	800748d5ab	Merge branch 'dev' into feature/ocr-templates	2026-10-25 10:29:32 -07:00
shamoon	182b0b4712	Merge branch 'dev' into feature/ocr-templates	2026-10-22 15:39:03 -07:00
shamoon	c718636f79	Update usage.md	2026-10-20 17:07:09 -07:00
shamoonandOpenAI Codex	54f7f43f35	Reuse OCR page renders and simplify value conversion Co-authored-by: OpenAI Codex <codex@openai.com>	2026-10-20 17:07:00 -07:00
shamoonandOpenAI Codex	94da3d4c57	Report actual OCR extraction outcomes instead of existing field values Co-authored-by: OpenAI Codex <codex@openai.com>	2026-10-20 17:02:23 -07:00
shamoonandOpenAI Codex	453e89d6dd	Prepare and atomically apply OCR template field updates Co-authored-by: OpenAI Codex <codex@openai.com>	2026-10-20 17:00:03 -07:00
shamoonandOpenAI Codex	6562415894	Unify OCR zone extraction for preview and saved templates Co-authored-by: OpenAI Codex <codex@openai.com>	2026-10-20 16:58:10 -07:00
shamoon	257c33453d	Update test_api_ocr_templates.py	2026-10-20 16:49:39 -07:00
shamoon	87913411ef	Update serialisers.py	2026-10-20 16:49:35 -07:00
shamoon	cec393dcae	Update views.py	2026-10-20 16:49:32 -07:00
shamoon	f5526d5700	Improve backend tests	2026-10-20 16:47:48 -07:00
shamoon	2534d3c16b	Absurd comments	2026-10-20 16:46:21 -07:00
shamoon	95c8bf2058	Cleanup the serializers and views	2026-10-20 16:45:04 -07:00
shamoon	930d23956b	Up frontend coverage	2026-10-20 16:34:22 -07:00
shamoon	d2e6834602	Make sort order stable	2026-10-20 16:28:31 -07:00
shamoon	a7bf04ddee	Update spacing	2026-10-20 16:17:56 -07:00
shamoon	8ab2bf63aa	Merge branch 'dev' into feature/ocr-templates	2026-10-20 16:16:31 -07:00
shamoon	c63a7e25e7	Update docs	2026-10-20 15:37:08 -07:00
shamoon	9171a1aa6a	Changeup the icon	2026-10-20 15:33:01 -07:00
shamoon	55c5d9121f	Yes, cute little split button that opens the dialog	2026-10-20 15:31:48 -07:00
shamoon	e4efb62667	And bulk edit	2026-10-20 14:02:04 -07:00
shamoon	f0597a7c54	doc detail use it this way	2026-10-20 14:00:25 -07:00
shamoon	bbdc016a32	Backend for manual tempalte choice	2026-10-20 13:51:54 -07:00
shamoon	eae392469f	Update the frontend for the matching stuff	2026-10-20 13:41:55 -07:00
shamoon	bedefd85f2	Remove the handlers, make the matching work	2026-10-20 13:39:09 -07:00
shamoon	bd73fe1e80	Update the serializer	2026-10-20 13:31:08 -07:00
shamoon	8b77a924dc	Make it a matchingmodel	2026-10-20 13:29:42 -07:00
shamoon	1bdeb7ebcd	Mas sonar	2026-10-20 13:15:17 -07:00
shamoon	fa3acfe13f	Sure sonar	2026-10-20 13:12:26 -07:00
shamoon	2bc22b14bd	Make perms accordion	2026-10-20 13:03:04 -07:00
shamoon	dbce8c1409	User perms on frontend	2026-10-20 11:25:48 -07:00
shamoon	e976b2ec7a	Tests	2026-10-20 11:23:44 -07:00
shamoon	05da0ba5a3	Apply only visible templates	2026-10-20 11:15:31 -07:00
shamoon	4ff2cb9c72	Make them owned, duh Update 0028_ocrtemplate_ocrtemplatezone.py	2026-10-20 11:15:30 -07:00
shamoon	77a7fb40ec	safe regex	2026-10-20 11:05:49 -07:00
shamoon	8100a8e1eb	Lol and run zone ocr	2026-10-20 11:04:17 -07:00
shamoon	1e334903f3	And test zone	2026-10-20 11:01:11 -07:00
shamoon	a958d89bf4	Add perms to document_page_image	2026-10-20 10:58:54 -07:00
shamoon	8b3295fce0	Docs	2026-10-20 10:42:16 -07:00
shamoon	9783c4995f	Fix the tests for now	2026-10-20 10:42:12 -07:00
shamoon	e89495dc02	Frontend use the bulk edit	2026-10-20 10:32:48 -07:00
shamoon	8bb2f88015	Backend work for proper bulk zone ocr	2026-10-20 10:20:28 -07:00
shamoon	7d9b8c770d	Cleanup doc detail run zone ocr	2026-10-20 10:16:58 -07:00
shamoon	3296fd7cb5	Formatting, remove hard-coded alpha stuff	2026-10-20 10:14:03 -07:00
shamoon	bff41907c2	Move back controls, drop (lol) dnd	2026-10-20 10:08:43 -07:00
shamoon	592f882394	Get rid of the x for the picker	2026-10-20 10:06:40 -07:00
shamoon	29ea9cec66	Gosh so much cleanup	2026-10-20 10:03:55 -07:00
shamoon	123df2e826	Pngx conventions	2026-10-20 09:50:29 -07:00
shamoon	639827ec65	Lol, no not deu+eng default	2026-10-20 09:45:30 -07:00
shamoon	b3106e408c	Lots of enum cleanup	2026-10-20 09:44:37 -07:00
shamoon	ea31b6a043	Make it close not leave page	2026-10-20 09:38:29 -07:00
shamoon	0572b54579	Proper zoneless stuff	2026-10-20 09:35:39 -07:00
shamoon	2afec3e0b7	Lots of dead code	2026-10-20 09:31:59 -07:00
shamoon	57019bccbe	Cleanup save now that we're modal	2026-10-20 09:30:12 -07:00
shamoon	26b3964a20	Cleanup the geometry stuff	2026-10-20 09:26:42 -07:00
shamoon	a2eeadca7f	Fix the delete handler	2026-10-20 09:24:26 -07:00
shamoon	ba5474ba81	Lol, just one icon	2026-10-20 09:20:06 -07:00
shamoon	e3592804bd	Embiggen	2026-10-20 09:18:36 -07:00
shamoon	2d54927be8	Fuck it, make it a modal like literally everything else, drop the routes	2026-10-20 09:14:52 -07:00
shamoon	1d2832ac30	Update ocr-template-editor.component.ts	2026-10-20 09:05:24 -07:00
shamoon	3321ba46d6	Automatically update the combine string when changing zone name	2026-10-20 09:00:17 -07:00
shamoon	bf316cba8a	Dont fail if one bulk fails, collect results separately	2026-10-20 08:57:24 -07:00
shamoon	36c31b3a73	Also prevent editing template while saving	2026-10-20 08:47:26 -07:00
shamoon	d10d303980	Warn about losing changes, disable while zone ocr running	2026-10-20 08:36:22 -07:00
shamoon	a51e6a71f4	Fix reload after running zone ocr	2026-10-20 08:20:44 -07:00
shamoon	ebd8dba3bb	Fix the no zones note	2026-10-20 08:20:25 -07:00
shamoon	3ed9586347	Remove the create link from doc details	2026-10-20 08:11:40 -07:00
shamoon	7055f7a745	Fix perms test	2026-10-20 08:07:46 -07:00
shamoon	8f7500ba64	Fix the signal thing	2026-10-20 08:03:33 -07:00
shamoon	816774815c	Add a little warning for empty zones	2026-10-20 07:39:47 -07:00
shamoon	c5e6748771	Use braces icon instead	2026-10-20 07:18:01 -07:00
shamoon	9b42170554	Make the floating controls movable	2026-10-20 07:15:18 -07:00
shamoon	d2ed0c55a4	dirtycheck	2026-10-19 23:12:09 -07:00
shamoon	4d31063082	Default to empty field	2026-10-19 23:07:12 -07:00
shamoon	a4fb9bf2b0	Drop the silly mode toggle	2026-10-19 23:04:35 -07:00
shamoon	e028257da5	Cleanup the zone combine stuff	2026-10-19 22:55:23 -07:00
shamoon	68eb4fe96d	Make the zone list more useful, show colors	2026-10-19 22:43:12 -07:00
shamoon	d2d434535b	Remove the slop quick create CF stuff	2026-10-19 22:36:17 -07:00
shamoon	1d75c0c99b	Use pngx inputs, move test button, generally make less terrible	2026-10-19 22:31:33 -07:00
shamoon	1de1261728	Ok thats a better start, two tabs	2026-10-19 22:23:50 -07:00
shamoon	f5f33e0744	make the ui usable	2026-10-19 22:06:11 -07:00
shamoon	c9d62afa50	Make it hideable too	2026-10-19 21:43:10 -07:00
shamoon	b5a9353780	Move migration	2026-10-19 21:39:26 -07:00
shamoon	cf6d16edcd	Merge branch 'dev' into feature/ocr-templates	2026-10-19 21:37:23 -07:00
shamoon	551445773a	Use SVG, get rid of all the manual redraw stuff	2026-09-09 12:43:11 -07:00
shamoon	c54cb4a84b	Use a real canvas interaction model [skip ci]	2026-09-09 12:43:11 -07:00
shamoon	af61044b63	Fix some permissions stuff, show error on toggle	2026-09-09 12:43:11 -07:00
shamoon	1ef5a6d3cf	Get rid of absurd alert	2026-09-09 12:43:11 -07:00
shamoon	4da311f91f	Proper data types [skip ci]	2026-09-09 12:43:10 -07:00
shamoon	cbb84649c7	Pull out the zone list into a sub-component	2026-09-09 12:43:10 -07:00
shamoon	8da734a495	Extract the geometry stuff a bit	2026-09-09 12:43:10 -07:00
shamoon	351671011d	Remove afterviewinit, fix page change, custom date format per zone	2026-09-09 12:43:09 -07:00
Christoph Schlaepfer dependabot[bot]stumpylog GitHub Actions shamoon	15c95c251d	Feature: OCR Templates (#13043 ) [skip ci] Signed-off-by: dependabot[bot] <support@github.com> Co-Authored-By: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-Authored-By: stumpylog <797416+stumpylog@users.noreply.github.com> Co-Authored-By: GitHub Actions <41898282+github-actions[bot]@users.noreply.github.com> Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>	2026-09-09 12:43:09 -07:00