# wimp - Verification

The app was verified end to end in a real headless Chromium driven by Playwright,
in addition to type checking and production builds. This matters because the
critical paths (OffscreenCanvas transform, wasm-vips init, jSquash WASM encoders,
Web Worker messaging, cross-origin isolation) only truly exercise at runtime.

## Static checks

- npx tsc -> 0 errors (strict, single config).
- npm run build -> succeeds; worker chunk and all codec .wasm assets emit;
  wasm-vips bundles (vips.wasm ~5.9 MB, lazy-loaded).
- React Compiler -> confirmed active: the production bundle contains
  useMemoCache and \_\_COMPILER_RUNTIME.
- Tailwind v4 -> custom @theme utilities (bg-surface, text-muted,
  bg-checker, ring-accent-strong, opacity variants) all
  present in the built CSS.

## Runtime matrix (headless Chromium via Playwright)

Source for these runs: a generated 2000x1500 RGB PNG (a gradient with a grid).
Served with npm run preview (COOP/COEP headers on). crossOriginIsolated was true.
No console errors and no page errors in any run.

| Scenario                         | Output format | Dimensions | Engine      | Encoder |
| -------------------------------- | ------------- | ---------- | ----------- | ------- |
| OG image template                | JPEG          | 1200x630   | vips        | jsquash |
| Avatar template                  | WebP          | 512x512    | vips        | jsquash |
| Favicon template                 | PNG           | 256x256    | vips        | jsquash |
| Favicon, format switched to AVIF | AVIF          | 256x256    | vips        | jsquash |
| Original (no downscale)          | JPEG          | 2000x1500  | canvas      | jsquash |
| Keyboard rotate ']' + flip 'h'   | JPEG          | 1500x1125  | canvas      | jsquash |
| YouTube thumb template           | JPEG          | 1280x720   | canvas/vips | jsquash |

Format was confirmed by magic bytes; JPEG dimensions parsed from the SOF marker.
The result-card text reported the same dimensions plus the engine and encoder.

Notes:

- vips engages on meaningful downscales (output smaller than the crop) and when
  cross-origin isolation is available; the "canvas" rows confirm the fallback
  path is healthy too.
- Exact target dimensions for fixed-output templates prove the transform and
  output sizing are correct.

## Layout (responsive)

- Desktop 1366px: both side trays inline (left x=0, right flush to the right
  edge), the mobile pill hidden.
- Mobile 390px: trays sit off-canvas at rest (left right-edge at x<=0, right at
  x>=viewport width); tapping Edit slides the tools drawer to x=0; tapping
  Export slides the export drawer in; export works from inside the drawer.

## Framing guide

- US passport template: one head ellipse rendered, bounded inside the crop area
  (593x593 in the test viewport), plus an eye line.
- Other templates (e.g. OG): no guide rendered.

A screenshot was captured during these runs showing the full UI with the guide.

## Reproducing locally

Prerequisites: a Chromium that Playwright can launch.

```
npm run build
npm run preview        # serves dist/ on http://localhost:4173 with COOP/COEP
```

Then a Playwright script can:

1. goto the preview URL and assert self.crossOriginIsolated is true.
2. setInputFiles on input[type=file] with an image to load it.
3. Open the template picker (button aria-label "Choose template") and click a
   template by name; or set the format via the Segmented control (role=tab).
4. Wait until the "Export & download" button is enabled, click it, and capture
   the download event. Inspect magic bytes and dimensions.
5. Read the result card (the <p> containing the word "engine") for the reported
   format, encoder, and engine.

Environment note: in the build environment used here, no browser was on PATH;
Playwright was pointed at an existing binary with launch({ executablePath: ... }).
A committed E2E suite is listed as deferred work because the browser path is
environment-specific (see docs/deferred/enhancements.md).

## Known gaps in verification

- Visual quality of the vips vs canvas resample was not pixel-compared; both
  paths produce correct dimensions and valid files.
- Clipboard Copy and AVIF behavior vary by browser; see
  docs/deferred/known-limitations.md.
- Tested in Chromium only. Safari-specific canvas filter behavior is documented
  as a known limitation rather than tested.