Change the web application¶
The browser shell lives in web/; the reusable Mirador editor integration
lives in mirador-scribe/. Keep application API calls in the typed Connect
clients under web/src/api, page orchestration in web/src/pages, and shared
state/formatting helpers in web/src/lib. Do not duplicate backend business
operations or canonical IIIF mutations in the shell.
The existing Tailwind 4 PostCSS plugin handles vendor prefixing; no separate Autoprefixer pass is needed.
The frontend routes both /iiif/ image requests and /presentation/ requests
to the configured Triplet origin. Image requests preserve the encoded source
identifier and reader credentials so Triplet can fetch authorized uploads from
the API. Public Presentation requests strip browser credentials.
Opening an existing item loads its saved annotations without replaying a
completed transcription job. Completed line animations apply only to a job
explicitly linked by jobId or observed pending/running in this editor session.
New completion events also refresh the page; reconciling a historical
completion never starts an animation.
Install exactly the reviewed lockfiles and run each package independently:
npm --prefix web ci
npm --prefix web test
npm --prefix web run build
npm --prefix mirador-scribe ci
npm --prefix mirador-scribe test
npm --prefix mirador-scribe run build
Use generated protobuf/Connect types rather than handwritten request or
response interfaces. When an RPC changes, run make generate and review both
the generated TypeScript and OpenAPI output. Keep workspace headers inside the
shared transport, preserve AbortSignal cancellation for replaceable reads,
and fence async responses before updating current-page state.
For UI behavior, add the smallest Vitest interaction test that proves the
rendered control and outgoing typed request. Use make test-browser whenever a
change touches Mirador focus, keyboard routing, OpenSeadragon geometry,
background rebase, or save/revision-conflict behavior. Finish with
make test-frontend; it runs both package suites, type checks, package-consumer
checks, and production bundle builds in the pinned Node container.