@dile/scanner 0.0.0-stage → 0.0.2

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2026 EscuelaIT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,42 @@
-# Temporary Holding Version
+# @dile/scanner
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Web Component to scan documents in the browser: edge detection, perspective correction and multipage PDF or JPEG output, powered by [scanic](https://www.npmjs.com/package/scanic) and [jsPDF](https://www.npmjs.com/package/jspdf).
+
+Everything runs on the client: no backend needed. The component does not upload anything; it dispatches an event with the resulting files.
+
+```html
+<dile-scanner multipage max-bytes="5242880"></dile-scanner>
+```
+
+```javascript
+import '@dile/scanner/scanner.js';
+
+const scanner = document.querySelector('dile-scanner');
+scanner.addEventListener('dile-document-scanned', (e) => upload(e.detail.file));
+scanner.open();
+```
+
+## Docs and demos
+
+Read the docs and find demos on the [dile-components site](https://dile-components.com/components/dile-scanner/)
+
+## ML detector files
+
+The ML detector is optional and off by default. Without `ml-detector` your users download nothing of it. With `ml-detector` the component uses scanic's neural detector, and the browser downloads its files (3.5 MB, about 2.2 MB with gzip) the first time a photo is processed.
+
+By default the files come from jsDelivr. The package installs the matching `scanic-ml` version (3.5 MB in `node_modules`, only disk space in your project), so you can serve your own copy with the included Vite plugin:
+
+```javascript
+// vite.config.js
+import { scannerMlAssets } from '@dile/scanner/vite-plugin.js';
+
+export default { plugins: [scannerMlAssets()] };
+```
+
+```html
+<dile-scanner ml-detector ml-assets-url="/dile-scanner-ml/"></dile-scanner>
+```
+
+## Maintenance note
+
+`scanic` is pinned to an exact version because `src/corner-editor-styles.js` copies the styles of its corner editor (scanic injects them into `document.head`, which does not reach the shadow root). When updating scanic, review that copy against `node_modules/scanic/dist/scanic.js` (search `.scanic-corner-editor`) and update `scanic-ml` (also pinned) to the version that scanic expects (see the jsDelivr URL in `node_modules/scanic/dist/scanic-mlDetector.js`).

package/index.js

@@ -0,0 +1,2 @@
+export { DileScanner } from './src/DileScanner.js';
+export { DEFAULT_LABELS } from './src/default-labels.js';

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "@dile/scanner",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.2",
+  "description": "Web Component to scan documents in the browser: edge detection, perspective correction and multipage PDF or JPEG output, powered by scanic and jsPDF",
+  "keywords": [
+    "scanner",
+    "document scanner",
+    "pdf",
+    "perspective correction",
+    "Lit",
+    "Web Component"
+  ],
+  "type": "module",
+  "author": "midesweb <miguel@desarrolloweb.com>",
+  "homepage": "https://dile-components.com/",
+  "license": "MIT",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Polydile/dile-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/Polydile/dile-components/issues"
+  },
+  "dependencies": {
+    "@dile/iconlib": "^2.0.1",
+    "@dile/ui": "^3.16.2",
+    "jspdf": "^4.2.1",
+    "lit": "^2.7.0 || ^3.0.0",
+    "scanic": "1.7.1",
+    "scanic-ml": "0.2.0"
+  },
+  "gitHead": "c863a2ebefe61959c1a939ff3ebf46a663e33bb7"
+}

package/scanner-ml.spec.js

@@ -0,0 +1,78 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './scanner.js';
+import {
+  hardDocumentCanvas,
+  canvasToFile,
+  documentFile,
+  openScanner,
+  selectFiles,
+  acceptAdjust,
+  waitForPages,
+  save,
+  imageSize,
+} from './test/scanner-test-helpers.js';
+
+// The ML detector files are served by the scannerMlAssets() Vite plugin
+// (vite-plugin.js), registered in vitest.config.js. This file runs in its own
+// page, so the resource timing entries only contain what these tests load.
+const ML_ASSETS_URL = '/dile-scanner-ml/';
+const ML_RESOURCE = /scanic-mlDetector|scanic-ort|ort-wasm-simd-threaded|doccornernet_lean/;
+
+const mlResources = () =>
+  performance
+    .getEntriesByType('resource')
+    .map((entry) => entry.name)
+    .filter((name) => ML_RESOURCE.test(name));
+
+async function scanPageSize(attrs, file) {
+  const el = await openScanner(attrs);
+  selectFiles(el, [file]);
+  await acceptAdjust(el);
+  await waitForPages(el, 1);
+  const detail = await save(el);
+  return imageSize(detail.pages[0]);
+}
+
+describe('dile-scanner ML detector', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  // Must run first: once loaded, the ML files stay in the resource entries.
+  it('does not load any ML file without ml-detector', async () => {
+    await scanPageSize('', await documentFile());
+
+    expect(mlResources()).toEqual([]);
+  });
+
+  it('loads the ML files only when the first photo is processed', async () => {
+    const el = await openScanner(`ml-detector ml-assets-url="${ML_ASSETS_URL}"`);
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    expect(mlResources()).toEqual([]);
+
+    selectFiles(el, [await documentFile()]);
+    await acceptAdjust(el);
+    await waitForPages(el, 1);
+    const assets = mlResources().filter((name) => !name.includes('/node_modules/'));
+
+    expect(assets.map((name) => new URL(name).pathname)).toEqual(
+      expect.arrayContaining([
+        `${ML_ASSETS_URL}doccornernet_lean.ort`,
+        `${ML_ASSETS_URL}ort-wasm-simd-threaded.mjs`,
+        `${ML_ASSETS_URL}ort-wasm-simd-threaded.wasm`,
+      ]),
+    );
+    expect(assets.some((name) => name.includes('jsdelivr'))).toBe(false);
+  }, 30000);
+
+  it('finds the document where the classical detector picks a line of text', async () => {
+    const file = await canvasToFile(hardDocumentCanvas());
+    const classical = await scanPageSize('', file);
+    const ml = await scanPageSize(`ml-detector ml-assets-url="${ML_ASSETS_URL}"`, file);
+
+    expect(classical.height).toBeLessThan(100);
+    expect(ml.width).toBeGreaterThan(750);
+    expect(ml.height).toBeGreaterThan(600);
+  }, 30000);
+});

package/scanner.js

@@ -0,0 +1,5 @@
+import { DileScanner } from "./src/DileScanner.js";
+
+if (!customElements.get("dile-scanner")) {
+  customElements.define("dile-scanner", DileScanner);
+}

package/scanner.spec.js

@@ -0,0 +1,436 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './scanner.js';
+import {
+  documentCanvas,
+  canvasToFile,
+  documentFile,
+  waitFor,
+  nextEvent,
+  imageSize,
+  renderScanner,
+  openScanner,
+  query,
+  queryAll,
+  button,
+  pageButtons,
+  pages,
+  errorMessage,
+  selectFiles,
+  waitForIdle,
+  waitForEditor,
+  waitForPages,
+  acceptAdjust,
+  scanFiles,
+  save,
+} from './test/scanner-test-helpers.js';
+
+describe('dile-scanner', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    vi.restoreAllMocks();
+  });
+
+  it('starts on the capture step when opened', async () => {
+    const el = await openScanner();
+
+    expect(query(el, 'dile-modal').opened).toBe(true);
+    expect(query(el, 'h2').textContent).toBe('Scan document');
+    expect(button(el, 'image').textContent.trim()).toBe('Choose image');
+    expect(button(el, 'camera')).toBeNull();
+    expect(query(el, '#galleryinput').multiple).toBe(false);
+  });
+
+  it('detects the document and returns a PDF with one page', async () => {
+    const el = await openScanner('filename="invoice"');
+    selectFiles(el, [await documentFile()]);
+    await waitForEditor(el);
+
+    expect(query(el, '.step:not([hidden]) .message').textContent.trim()).toBe(
+      'Drag the corners to the edges of the document.',
+    );
+
+    await acceptAdjust(el);
+    await waitForPages(el, 1);
+    const detail = await save(el);
+
+    expect(detail.file.name).toBe('invoice.pdf');
+    expect(detail.file.type).toBe('application/pdf');
+    expect(detail.pages).toHaveLength(1);
+    expect(detail.pages[0].name).toBe('invoice.jpg');
+    expect(detail.files).toBeUndefined();
+    expect(query(el, 'dile-modal').opened).toBe(false);
+  });
+
+  it('names the result with the prefix and the date when there is no filename', async () => {
+    const el = await openScanner();
+    await scanFiles(el, [await documentFile()]);
+    const detail = await save(el);
+
+    expect(detail.file.name).toMatch(/^scan-\d{4}-\d{2}-\d{2}-\d{4}\.pdf$/);
+  });
+
+  it('adjusts several images one after another and joins them in one PDF', async () => {
+    const el = await openScanner('multipage');
+    expect(query(el, '#galleryinput').multiple).toBe(true);
+
+    const files = await Promise.all([documentFile(), documentFile(), documentFile()]);
+    selectFiles(el, files);
+    for (let i = 0; i < files.length; i++) {
+      await waitForEditor(el);
+      expect(query(el, '.step:not([hidden]) .message').textContent.trim()).toBe(
+        'Drag the corners to the edges of the document.',
+      );
+      button(el, 'check').click();
+      await waitForIdle(el);
+    }
+    await waitForPages(el, 3);
+    expect(queryAll(el, '.page-number').map((item) => item.textContent.trim())).toEqual([
+      'Page 1',
+      'Page 2',
+      'Page 3',
+    ]);
+
+    const detail = await save(el);
+    const pdf = await detail.file.text();
+
+    expect(pdf.match(/\/Type\s*\/Page(?!s)/g)).toHaveLength(3);
+    expect(pdf.match(/\/DCTDecode/g)).toHaveLength(3);
+    expect(detail.pages.map((page) => page.name)).toEqual([
+      expect.stringMatching(/-1\.jpg$/),
+      expect.stringMatching(/-2\.jpg$/),
+      expect.stringMatching(/-3\.jpg$/),
+    ]);
+  });
+
+  it('returns one JPEG per page with output="images"', async () => {
+    const el = await openScanner('multipage output="images" filename="receipt"');
+    await scanFiles(el, [await documentFile(), await documentFile()]);
+    const detail = await save(el);
+
+    expect(detail.file).toBeUndefined();
+    expect(detail.files.map((file) => file.name)).toEqual(['receipt-1.jpg', 'receipt-2.jpg']);
+    expect(detail.files.every((file) => file.type === 'image/jpeg')).toBe(true);
+    expect(detail.pages).toEqual(detail.files);
+  });
+
+  it('returns an array of images even with a single page', async () => {
+    const el = await openScanner('output="images"');
+    await scanFiles(el, [await documentFile()]);
+    const detail = await save(el);
+
+    expect(detail.files).toHaveLength(1);
+  });
+
+  it('replaces the page with a new image when it is not multipage', async () => {
+    const el = await openScanner();
+    selectFiles(el, [await documentFile()]);
+    await waitForEditor(el);
+    button(el, 'maximize').click();
+    await waitForPages(el, 1);
+
+    expect(button(el, 'image').textContent.trim()).toBe('Choose another image');
+    expect(pageButtons(el, 'trash-2')).toHaveLength(0);
+
+    selectFiles(el, [await canvasToFile(documentCanvas({ width: 800, height: 1000 }))]);
+    await waitForEditor(el);
+    button(el, 'maximize').click();
+    await waitForPages(el, 1);
+    const detail = await save(el);
+
+    expect(detail.pages).toHaveLength(1);
+    expect(await imageSize(detail.pages[0])).toEqual({ width: 800, height: 1000 });
+  });
+
+  it('uses the full image when asked, limited by max-side', async () => {
+    const el = await openScanner('max-side="1000"');
+    selectFiles(el, [await documentFile({ width: 1200, height: 900 })]);
+    await waitForEditor(el);
+    button(el, 'maximize').click();
+    await waitForPages(el, 1);
+    const detail = await save(el);
+
+    expect(await imageSize(detail.pages[0])).toEqual({ width: 1000, height: 750 });
+  });
+
+  it('applies the EXIF orientation of the photo', async () => {
+    const el = await openScanner();
+    const landscape = await documentFile({ width: 1200, height: 900 });
+    selectFiles(el, [await withExifOrientation(landscape, 6)]);
+    await waitForEditor(el);
+    button(el, 'maximize').click();
+    await waitForPages(el, 1);
+    const detail = await save(el);
+
+    expect(await imageSize(detail.pages[0])).toEqual({ width: 900, height: 1200 });
+  });
+
+  it('rotates and reorders pages', async () => {
+    const el = await openScanner('multipage');
+    selectFiles(el, [
+      await documentFile({ width: 1200, height: 900 }),
+      await canvasToFile(documentCanvas({ width: 600, height: 1000 })),
+    ]);
+    for (let i = 0; i < 2; i++) {
+      await waitForEditor(el);
+      button(el, 'maximize').click();
+      await waitForIdle(el);
+    }
+    await waitForPages(el, 2);
+
+    // First page: no "move before". Last page: no "move after".
+    expect(pageButtons(el, 'chevron-left').map((item) => item.disabled)).toEqual([true, false]);
+    expect(pageButtons(el, 'chevron-right').map((item) => item.disabled)).toEqual([false, true]);
+
+    pageButtons(el, 'rotate-cw')[0].click();
+    await waitForIdle(el);
+    pageButtons(el, 'chevron-left')[1].click();
+    await el.updateComplete;
+
+    const detail = await save(el);
+    expect(await imageSize(detail.pages[0])).toEqual({ width: 600, height: 1000 });
+    expect(await imageSize(detail.pages[1])).toEqual({ width: 900, height: 1200 });
+  });
+
+  it('goes back to the capture step when the last page is removed', async () => {
+    const el = await openScanner('multipage');
+    await scanFiles(el, [await documentFile(), await documentFile()]);
+
+    pageButtons(el, 'trash-2')[0].click();
+    await el.updateComplete;
+    expect(pages(el)).toHaveLength(1);
+
+    pageButtons(el, 'trash-2')[0].click();
+    await el.updateComplete;
+    expect(pages(el)).toHaveLength(0);
+    expect(button(el, 'image').textContent.trim()).toBe('Choose image');
+  });
+
+  it('keeps the page when its re-adjustment is cancelled', async () => {
+    const el = await openScanner('multipage');
+    await scanFiles(el, [await documentFile(), await documentFile()]);
+
+    pageButtons(el, 'crop')[1].click();
+    await waitForEditor(el);
+    button(el, 'x').click();
+    await waitForPages(el, 2);
+
+    expect(query(el, '#editor')).toBeNull();
+  });
+
+  it('replaces the page with the re-adjusted one', async () => {
+    const el = await openScanner();
+    selectFiles(el, [await documentFile({ width: 1200, height: 900 })]);
+    await acceptAdjust(el);
+    await waitForPages(el, 1);
+
+    pageButtons(el, 'crop')[0].click();
+    await waitForEditor(el);
+    button(el, 'maximize').click();
+    await waitForPages(el, 1);
+    const detail = await save(el);
+
+    expect(await imageSize(detail.pages[0])).toEqual({ width: 1200, height: 900 });
+  });
+
+  it('warns when the edges of the document are not detected', async () => {
+    const el = await openScanner();
+    const blank = document.createElement('canvas');
+    blank.width = 800;
+    blank.height = 600;
+    const context = blank.getContext('2d');
+    context.fillStyle = '#888';
+    context.fillRect(0, 0, blank.width, blank.height);
+    selectFiles(el, [await canvasToFile(blank)]);
+    await waitForEditor(el);
+
+    expect(query(el, '.step:not([hidden]) .message').textContent.trim()).toBe(
+      'The edges of the document were not detected. Drag the corners to the edges of the document.',
+    );
+  });
+
+  it('shows an error and stays on the capture step with an unreadable file', async () => {
+    const el = await openScanner();
+    selectFiles(el, [new File(['not an image'], 'broken.jpg', { type: 'image/jpeg' })]);
+    await waitFor(() => errorMessage(el));
+
+    expect(errorMessage(el)).toBe(
+      'The image could not be read. Try with another image (JPG, PNG or WebP).',
+    );
+    expect(button(el, 'image').textContent.trim()).toBe('Choose image');
+    expect(query(el, '#editor')).toBeNull();
+  });
+
+  it('disables adding pages and refuses to save when max-bytes is reached', async () => {
+    const el = await openScanner('multipage max-bytes="1000"');
+    const scanned = vi.fn();
+    el.addEventListener('dile-document-scanned', scanned);
+    await scanFiles(el, [await documentFile()]);
+
+    expect(query(el, '.size').textContent.replace(/\s+/g, ' ').trim()).toMatch(/^\d+ KB of 1 KB$/);
+    expect(button(el, 'image').disabled).toBe(true);
+    expect(query(el, '.step:not([hidden]) p.message').textContent.trim()).toBe(
+      'The document has reached the maximum size. Remove a page to add another one.',
+    );
+
+    button(el, 'check').click();
+    await waitFor(() => errorMessage(el));
+
+    expect(errorMessage(el)).toBe(
+      'The document exceeds the maximum size even with reduced quality. Remove some pages.',
+    );
+    expect(scanned).not.toHaveBeenCalled();
+    expect(query(el, 'dile-modal').opened).toBe(true);
+  });
+
+  it('compresses the pages more to fit a max-bytes a bit lower than the document', async () => {
+    const file = await documentFile();
+    const reference = await openScanner();
+    await scanFiles(reference, [file]);
+    const fullSize = (await save(reference)).file.size;
+
+    const maxBytes = Math.floor(fullSize * 0.9);
+    const el = await openScanner(`max-bytes="${maxBytes}"`);
+    await scanFiles(el, [file]);
+    const detail = await save(el);
+
+    expect(detail.file.size).toBeLessThanOrEqual(maxBytes);
+  });
+
+  it('dispatches the cancel event when closed without saving', async () => {
+    const el = await openScanner();
+    const cancelled = vi.fn();
+    const modalClosed = vi.fn();
+    el.addEventListener('dile-document-scan-cancelled', cancelled);
+    document.addEventListener('dile-modal-closed', modalClosed);
+
+    button(el, 'x').click();
+    document.removeEventListener('dile-modal-closed', modalClosed);
+
+    expect(cancelled).toHaveBeenCalledTimes(1);
+    expect(modalClosed).not.toHaveBeenCalled();
+    expect(query(el, 'dile-modal').opened).toBe(false);
+  });
+
+  it('dispatches the cancel event when closed with the Esc key', async () => {
+    const el = await openScanner();
+    const cancelled = vi.fn();
+    el.addEventListener('dile-document-scan-cancelled', cancelled);
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(cancelled).toHaveBeenCalledTimes(1);
+    expect(query(el, 'dile-modal').opened).toBe(false);
+  });
+
+  it('does not dispatch the cancel event after saving', async () => {
+    const el = await openScanner();
+    const cancelled = vi.fn();
+    el.addEventListener('dile-document-scan-cancelled', cancelled);
+    await scanFiles(el, [await documentFile()]);
+    await save(el);
+
+    expect(cancelled).not.toHaveBeenCalled();
+  });
+
+  it('discards the work in progress when closed while processing', async () => {
+    const el = await openScanner();
+    const cancelled = vi.fn();
+    const scanned = vi.fn();
+    el.addEventListener('dile-document-scan-cancelled', cancelled);
+    el.addEventListener('dile-document-scanned', scanned);
+
+    selectFiles(el, [await documentFile()]);
+    await el.updateComplete;
+    expect(query(el, '.busy')).toBeTruthy();
+    el.close();
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    expect(cancelled).toHaveBeenCalledTimes(1);
+    expect(scanned).not.toHaveBeenCalled();
+    expect(query(el, '.scanic-handle')).toBeNull();
+    expect(query(el, '.busy')).toBeNull();
+    expect(button(el, 'image').textContent.trim()).toBe('Choose image');
+  });
+
+  it('starts with an empty document when opened again', async () => {
+    const el = await openScanner();
+    await scanFiles(el, [await documentFile()]);
+    el.close();
+    el.open();
+    await el.updateComplete;
+
+    expect(pages(el)).toHaveLength(0);
+    expect(button(el, 'image').textContent.trim()).toBe('Choose image');
+  });
+
+  it('merges the labels with the default ones, also in the corner handles', async () => {
+    const el = await renderScanner();
+    el.labels = { title: 'Escanear documento', topLeftCorner: 'Esquina superior izquierda' };
+    el.open();
+    await el.updateComplete;
+
+    expect(query(el, 'h2').textContent).toBe('Escanear documento');
+    expect(button(el, 'image').textContent.trim()).toBe('Choose image');
+
+    selectFiles(el, [await documentFile()]);
+    await waitForEditor(el);
+    const handleLabels = queryAll(el, '.scanic-handle').map((handle) => handle.getAttribute('aria-label'));
+
+    expect(handleLabels).toContain('Esquina superior izquierda');
+    expect(handleLabels).toContain('Bottom-right corner');
+  });
+
+  it('offers to take a photo on touch devices', async () => {
+    const realMatchMedia = window.matchMedia.bind(window);
+    vi.spyOn(window, 'matchMedia').mockImplementation((mediaQuery) =>
+      mediaQuery === '(pointer: coarse)' ? { matches: true } : realMatchMedia(mediaQuery),
+    );
+    const el = await openScanner();
+    const camera = query(el, '#camerainput');
+    const openCamera = vi.spyOn(camera, 'click').mockImplementation(() => {});
+
+    expect(button(el, 'camera').textContent.trim()).toBe('Take photo');
+    expect(camera.getAttribute('capture')).toBe('environment');
+
+    button(el, 'camera').click();
+    expect(openCamera).toHaveBeenCalled();
+
+    selectFiles(el, [await documentFile()], 'camerainput');
+    await acceptAdjust(el);
+    await waitForPages(el, 1);
+    expect(button(el, 'camera').textContent.trim()).toBe('Repeat photo');
+  });
+
+  it('falls back to the classical detector when the ML assets cannot be loaded', async () => {
+    const fetchSpy = vi.spyOn(window, 'fetch');
+    const el = await openScanner('ml-detector ml-assets-url="http://127.0.0.1:9/missing/"');
+    selectFiles(el, [await documentFile()]);
+    await waitForEditor(el);
+
+    expect(fetchSpy).toHaveBeenCalledWith(
+      expect.stringContaining('http://127.0.0.1:9/missing/'),
+      expect.anything(),
+    );
+
+    expect(errorMessage(el)).toBeUndefined();
+    expect(query(el, '.step:not([hidden]) .message').textContent.trim()).toBe(
+      'Drag the corners to the edges of the document.',
+    );
+  }, 30000);
+});
+
+// Inserts an EXIF APP1 segment with the given orientation after the JPEG SOI.
+async function withExifOrientation(file, orientation) {
+  const jpeg = new Uint8Array(await file.arrayBuffer());
+  const tiff = [
+    0x49, 0x49, 0x2a, 0x00, 0x08, 0x00, 0x00, 0x00, // little endian, IFD at 8
+    0x01, 0x00, // one entry
+    0x12, 0x01, 0x03, 0x00, 0x01, 0x00, 0x00, 0x00, orientation, 0x00, 0x00, 0x00, // Orientation
+    0x00, 0x00, 0x00, 0x00, // no next IFD
+  ];
+  const payload = [0x45, 0x78, 0x69, 0x66, 0x00, 0x00, ...tiff]; // "Exif\0\0"
+  const length = payload.length + 2;
+  const app1 = [0xff, 0xe1, length >> 8, length & 0xff, ...payload];
+  const bytes = new Uint8Array([...jpeg.slice(0, 2), ...app1, ...jpeg.slice(2)]);
+  return new File([bytes], file.name, { type: 'image/jpeg' });
+}