Add browser-only line detection components, TPEN 3 annotation interface, and Netlify PR previews

[Copilot]

Implements the foundation of this repo as a multi-component line detection library with a TPEN 3 interface for recording detected lines as annotations — all running entirely in the browser, no backend required.

Components (components/line-detection/)

detection.js — Three exported async detection strategies, all operating on the Canvas 2D API:

• detectLines() — horizontal projection profile
• detectLinesWithBusyness() — block-level horizontal colour-change analysis
• detectHandwritingLines() — combined: morphological region isolation → busyness per region, with fallback to full-image busyness

All return Array<{x, y, width, height}> in image-pixel coordinates.

index.js — <handwriting-line-detector> Custom Element:

<script type="module" src="components/line-detection/index.js"></script>
<handwriting-line-detector src="https://example.org/iiif/image/full/full/0/default.jpg">
</handwriting-line-detector>

detector.addEventListener('lines-detected', e => console.log(e.detail.lines))

Key departure from TPEN-interfaces PR #493: removes the localhost:3009 CORS proxy (backend dependency) — images are loaded with crossOrigin="anonymous", which works against IIIF-compliant servers. Uses DOM construction (not innerHTML) for user-controlled content.

TPEN 3 Interface (interfaces/line-detection/)

Standalone page wired to TPEN 3 services. Usage:

/interfaces/line-detection/index.html?projectID=<id>&pageID=<id>

Flow:

1. Reads JWT from localStorage (same mechanism as TPEN-interfaces); redirects to TPEN 3 login if missing/expired
2. Fetches AnnotationPage from TPEN services API; resolves the canvas and image URL
3. Runs <handwriting-line-detector> on the image
4. On save, writes detected lines as W3C Web Annotations (motivation: "transcribing", FragmentSelector in canvas-coordinate space) via PUT /project/:id/page/:id

Coordinates are scaled from image-pixel space to canvas space before saving, consistent with TPEN 3 conventions.

Netlify PR Previews

• .github/workflows/netlify-preview.yml — triggers on every PR targeting main, deploys the static site to Netlify, and posts a preview URL comment on the PR (mirrors the TPEN-interfaces pattern). Requires NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID repository secrets.
• netlify.toml — configures Netlify to serve the repo root directly with no build step (pure static HTML/JS site).
• index.html — root landing page for the Netlify preview listing available components and interfaces, with a quick-start code snippet for the <handwriting-line-detector> element.

Original prompt

Create this based on the pr CenterForDigitalHumanities/TPEN-interfaces#493 and intend that this repo will have ultimately several components as possible detection components and include a subdirectory that will be an appropriate TPEN interface, enabling a component to record annotations on an image to the TPEN 3 application. All work should be done in the browser, without a backend.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[cubap]

@copilot add a netlify deployment on PRs so we can see what the changes are

[Copilot]

@copilot add a netlify deployment on PRs so we can see what the changes are

Done in commit 9a40f27. Added:

• .github/workflows/netlify-preview.yml — triggers on every PR targeting main, deploys the static site to Netlify, and posts a preview URL comment on the PR (same pattern as TPEN-interfaces).
• netlify.toml — tells Netlify to serve the repo root directly (no build step needed since this is pure HTML/JS).
• index.html — root landing page so the Netlify preview has a useful entry point that links to the components and the line-detection interface.

Two repository secrets need to be configured for the workflow to succeed: NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID.