refactor(web): migrate browser code to TypeScript

18 files changed, 495 insertions, 221 deletions

diff --git a/.gitignore b/.gitignore
index 41a41c6..4454516 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ debug_department_*.csv
 france-latest.osm.pbf
 biking_home
 node_modules/
+web/static/*.js
diff --git a/.mise.toml b/.mise.toml
index 1f21ba9..5ff5424 100644
--- a/.mise.toml
+++ b/.mise.toml
@@ -1,6 +1,7 @@
 [tools]
 "github:boyter/dcd" = "1.1.0"
 go = "1.25.12"
+node = "26.6.0"
 watchexec = "latest"
 
 [tasks.generate]
@@ -11,15 +12,18 @@ run = "go tool templ generate"
 description = "Format Go sources"
 run = "go fmt ./..."
 
+[tasks.frontend-build]
+description = "Compile TypeScript browser assets"
+run = "npm run build"
+
 [tasks.check]
-description = "Run formatting, JavaScript and Go gate checks"
-depends = ["generate", "format"]
+description = "Run formatting, TypeScript and Go gate checks"
+depends = ["generate", "format", "frontend-build"]
 run = [
   "npm run format:check",
   "npm run lint",
   "npm run typecheck",
-  "for file in web/static/*.js; do node --check \"$file\"; done",
-  "node --test web/static_test/*.test.js",
+  "npm test",
   "go vet ./...",
   "go build ./...",
   "go test ./...",
@@ -27,6 +31,7 @@ run = [
 
 [tasks.build]
 description = "Build the application"
+depends = ["frontend-build"]
 run = "go build -o biking_home ."
 
 [tasks.code-analysis]
@@ -39,8 +44,9 @@ run = "DATABASE_URL=sqlite:biking_home.db go tool dbmate up"
 
 [tasks.dev]
 description = "Run the web server"
+depends = ["frontend-build"]
 run = "go run ."
 
 [tasks.dev-watch]
-description = "Regenerate templates and run the web server"
-run = ["mise run generate", "go run ."]
+description = "Regenerate templates, compile TypeScript, and run the web server"
+run = ["mise run generate", "mise run frontend-build", "go run ."]
diff --git a/package.json b/package.json
index 13f91b1..e63fa69 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,13 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "format": "biome format --write web/static/*.js web/static_test/*.js",
-    "format:check": "biome format web/static/*.js web/static_test/*.js",
-    "lint": "biome lint web/static/*.js web/static_test/*.js",
+    "format": "biome format --write web/frontend",
+    "format:check": "biome format web/frontend",
+    "lint": "biome lint web/frontend",
     "typecheck": "tsc --noEmit",
-    "test": "node --test web/static_test/*.test.js",
-    "check": "npm run format:check && npm run lint && npm run typecheck && npm test"
+    "build": "tsc -p tsconfig.build.json",
+    "test": "node --experimental-strip-types --test web/frontend/*.test.ts",
+    "check": "npm run format:check && npm run lint && npm run typecheck && npm run build && npm test"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.8",
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 0000000..e8fd8a4
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": false,
+    "noEmit": false,
+    "noEmitOnError": true,
+    "outDir": "web/static",
+    "rootDir": "web/frontend",
+    "sourceMap": false
+  },
+  "include": ["web/frontend/**/*.ts", "web/frontend/**/*.d.ts"],
+  "exclude": ["web/frontend/**/*.test.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
index 6ad150d..5944a6c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,15 +1,14 @@
 {
   "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
+    "allowImportingTsExtensions": true,
     "lib": ["DOM", "ES2022"],
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "noEmit": true,
-    "strict": false,
+    "strict": true,
     "skipLibCheck": true,
     "target": "ES2022",
     "types": ["leaflet", "node"]
   },
-  "include": ["web/static/**/*.js", "web/static_test/**/*.js", "web/types/**/*.d.ts"]
+  "include": ["web/frontend/**/*.ts", "web/frontend/**/*.d.ts", "web/types/**/*.d.ts"]
 }
diff --git a/web/frontend/dom.ts b/web/frontend/dom.ts
new file mode 100644
index 0000000..a3a1765
--- /dev/null
+++ b/web/frontend/dom.ts
@@ -0,0 +1,4 @@
+export const requireElement = <T extends Element>(element: T | null, description: string): T => {
+  if (!element) throw new Error(`Missing ${description} element`);
+  return element;
+};
diff --git a/web/static_test/official-climb-profile-logic.test.js b/web/frontend/official-climb-profile-logic.test.ts
index 9976c66..31391b2 100644
--- a/web/static_test/official-climb-profile-logic.test.js
+++ b/web/frontend/official-climb-profile-logic.test.ts
@@ -1,6 +1,6 @@
 import test from "node:test";
 import assert from "node:assert/strict";
-import { displayStepForLength, profileBandForSlope, officialProfileSections } from "../static/official-climb-profile-logic.js";
+import { displayStepForLength, profileBandForSlope, officialProfileSections } from "./official-climb-profile-logic.ts";
 
 test("selects a display step that keeps long profiles readable", () => {
   assert.equal(displayStepForLength(2_400), 100);
diff --git a/web/static/official-climb-profile-logic.js b/web/frontend/official-climb-profile-logic.ts
index 87dcef8..1b2bc83 100644
--- a/web/static/official-climb-profile-logic.js
+++ b/web/frontend/official-climb-profile-logic.ts
@@ -1,8 +1,19 @@
-const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-const profileStepSizesM = [100, 200, 500, 1000];
-const displayStepForLength = (lengthM) =>
+import type { ProfileBand, ProfilePoint } from "./types.js";
+
+export interface OfficialProfileSection {
+  startDistanceKm: number;
+  endDistanceKm: number;
+  startElevation: number;
+  endElevation: number;
+  slopePercent: number;
+  band: ProfileBand;
+}
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+const profileStepSizesM: number[] = [100, 200, 500, 1000];
+const displayStepForLength = (lengthM: number): number =>
   profileStepSizesM.find((stepM) => Math.ceil(lengthM / stepM) <= 30) || profileStepSizesM[profileStepSizesM.length - 1];
-const profileBandForSlope = (slopePercent) => {
+const profileBandForSlope = (slopePercent: number): ProfileBand => {
   if (slopePercent < 0) return "downhill";
   if (slopePercent < 3) return "0-3";
   if (slopePercent < 6) return "3-6";
@@ -10,12 +21,12 @@ const profileBandForSlope = (slopePercent) => {
   if (slopePercent < 12) return "9-12";
   return "12-plus";
 };
-const officialProfileSections = (points, startIndex, endIndex, stepM) => {
+const officialProfileSections = (points: ProfilePoint[], startIndex: number, endIndex: number, stepM: number): OfficialProfileSection[] => {
   const startDistanceM = points[startIndex].distanceKm * 1000;
   const endDistanceM = points[endIndex].distanceKm * 1000;
-  const sections = [];
+  const sections: OfficialProfileSection[] = [];
   let pointIndex = startIndex;
-  const elevationAtDistance = (distanceM) => {
+  const elevationAtDistance = (distanceM: number) => {
     while (pointIndex < endIndex - 1 && points[pointIndex + 1].distanceKm * 1000 < distanceM) pointIndex++;
     const nextIndex = Math.min(pointIndex + 1, endIndex);
     const first = points[pointIndex];
diff --git a/web/static/official-climb-profile.js b/web/frontend/official-climb-profile.ts
index 3f0a229..82ecc01 100644
--- a/web/static/official-climb-profile.js
+++ b/web/frontend/official-climb-profile.ts
@@ -1,28 +1,32 @@
 import { displayStepForLength, officialProfileSections } from "./official-climb-profile-logic.js";
+import type { OfficialProfileColors, RideProfilePoint } from "./types.js";
 
 export class OfficialClimbProfileController {
-  constructor(points) {
+  readonly points: RideProfilePoint[];
+  readonly colors: OfficialProfileColors;
+  readonly cards: HTMLDetailsElement[];
+
+  constructor(points: RideProfilePoint[]) {
     this.points = points;
     this.colors = this.resolveColors();
-    this.cards = [...document.querySelectorAll("[data-official-climb-card]")].map((card) => /** @type {HTMLDetailsElement} */ (card));
+    this.cards = [...document.querySelectorAll("[data-official-climb-card]")].map((card) => card as HTMLDetailsElement);
     for (const card of this.cards) {
       card.addEventListener("toggle", () => {
         if (!card.open) return;
         for (const other of this.cards) {
           if (other !== card) other.open = false;
         }
-        /** @type {HTMLCanvasElement | null} */
-        const profileCanvas = card.querySelector("[data-official-profile]");
+        const profileCanvas = card.querySelector<HTMLCanvasElement>("[data-official-profile]");
         if (profileCanvas) this.drawOfficialProfile(profileCanvas);
       });
     }
   }
 
-  resolveColors() {
+  resolveColors(): OfficialProfileColors {
     const colorProbe = document.createElement("span");
     colorProbe.hidden = true;
     document.body.append(colorProbe);
-    const resolveColor = (name) => {
+    const resolveColor = (name: string): string => {
       colorProbe.style.color = `var(${name})`;
       return getComputedStyle(colorProbe).color;
     };
@@ -42,10 +46,10 @@ export class OfficialClimbProfileController {
     return colors;
   }
 
-  drawOfficialProfile(profileCanvas) {
+  drawOfficialProfile(profileCanvas: HTMLCanvasElement): void {
     const { points, colors } = this;
-    const startIndex = Number.parseInt(profileCanvas.dataset.profileStart, 10);
-    const endIndex = Number.parseInt(profileCanvas.dataset.profileEnd, 10);
+    const startIndex = Number.parseInt(profileCanvas.dataset.profileStart ?? "", 10);
+    const endIndex = Number.parseInt(profileCanvas.dataset.profileEnd ?? "", 10);
     if (
       !Number.isInteger(startIndex) ||
       !Number.isInteger(endIndex) ||
@@ -79,8 +83,8 @@ export class OfficialClimbProfileController {
     const maxDistance = sections[sections.length - 1].endDistanceKm;
     const distanceSpan = Math.max(maxDistance - minDistance, 0.1);
     const elevationSpan = Math.max(maxElevation - minElevation, 1);
-    const xForDistance = (distanceKm) => plot.left + ((distanceKm - minDistance) / distanceSpan) * (plot.right - plot.left);
-    const yForElevation = (elevationM) => plot.bottom - ((elevationM - minElevation) / elevationSpan) * (plot.bottom - plot.top);
+    const xForDistance = (distanceKm: number) => plot.left + ((distanceKm - minDistance) / distanceSpan) * (plot.right - plot.left);
+    const yForElevation = (elevationM: number) => plot.bottom - ((elevationM - minElevation) / elevationSpan) * (plot.bottom - plot.top);
     context.clearRect(0, 0, rect.width, rect.height);
     context.fillStyle = colors.plotSurface;
     context.fillRect(0, 0, rect.width, rect.height);
@@ -151,15 +155,14 @@ export class OfficialClimbProfileController {
     context.fillText(this.formatDistance(maxDistance - minDistance), plot.right, rect.height - 16);
   }
 
-  formatDistance(distance) {
+  formatDistance(distance: number): string {
     return `${distance.toFixed(distance < 10 ? 1 : 0)} km`;
   }
 
   redrawOpen() {
-    /** @type {NodeListOf<HTMLCanvasElement>} */
-    const profileCanvases = document.querySelectorAll("[data-official-profile]");
+    const profileCanvases = document.querySelectorAll<HTMLCanvasElement>("[data-official-profile]");
     for (const profileCanvas of profileCanvases) {
-      const card = /** @type {HTMLDetailsElement | null} */ (profileCanvas.closest("[data-official-climb-card]"));
+      const card = profileCanvas.closest<HTMLDetailsElement>("[data-official-climb-card]");
       if (card?.open) this.drawOfficialProfile(profileCanvas);
     }
   }
diff --git a/web/frontend/ride-detail-boundaries.ts b/web/frontend/ride-detail-boundaries.ts
new file mode 100644
index 0000000..22a1255
--- /dev/null
+++ b/web/frontend/ride-detail-boundaries.ts
@@ -0,0 +1,123 @@
+import { climbMetrics, formatDistance, formatElevation } from "./ride-detail-logic.js";
+import { requireElement } from "./dom.js";
+import type { BoundarySource, BoundaryTarget, ClimbBounds, RideProfilePoint } from "./types.js";
+
+interface ActiveBoundary {
+  form: HTMLFormElement;
+  target: BoundaryTarget;
+  source: BoundarySource;
+}
+
+interface RideBoundaryControllerOptions {
+  forms: HTMLFormElement[];
+  points: RideProfilePoint[];
+  climbBounds: ClimbBounds[];
+  onBoundaryChanged: (index: number) => void;
+  onPointSelected: (index: number) => void;
+  setMessage: (message: string) => void;
+}
+
+export class RideBoundaryController {
+  private readonly forms: HTMLFormElement[];
+  private readonly points: RideProfilePoint[];
+  private readonly climbBounds: ClimbBounds[];
+  private readonly onBoundaryChanged: (index: number) => void;
+  private readonly onPointSelected: (index: number) => void;
+  private readonly setMessage: (message: string) => void;
+  private activeBoundary: ActiveBoundary | null;
+
+  constructor({ forms, points, climbBounds, onBoundaryChanged, onPointSelected, setMessage }: RideBoundaryControllerOptions) {
+    this.forms = forms;
+    this.points = points;
+    this.climbBounds = climbBounds;
+    this.onBoundaryChanged = onBoundaryChanged;
+    this.onPointSelected = onPointSelected;
+    this.setMessage = setMessage;
+    this.activeBoundary = null;
+    this.initialize();
+  }
+
+  initialize(): void {
+    for (const form of this.forms) {
+      const item = form.closest<HTMLElement>("[data-climb-item]");
+      if (!item) continue;
+      const climbIndex = Number.parseInt(item.dataset.climbIndex ?? "", 10);
+      this.climbBounds[climbIndex] = {
+        startIndex: Number.parseInt(
+          requireElement(form.querySelector<HTMLInputElement>('[data-boundary-input="start"]'), "start boundary input").value,
+          10,
+        ),
+        endIndex: Number.parseInt(
+          requireElement(form.querySelector<HTMLInputElement>('[data-boundary-input="end"]'), "end boundary input").value,
+          10,
+        ),
+      };
+      this.updatePreview(form);
+      const buttons = [...form.querySelectorAll<HTMLElement>("[data-boundary-button]")];
+      for (const button of buttons) {
+        button.addEventListener("click", () => {
+          this.clearSelection();
+          this.activeBoundary = {
+            form,
+            target: button.dataset.boundaryButton as BoundaryTarget,
+            source: button.dataset.boundarySource as BoundarySource,
+          };
+          button.classList.add("active");
+          const surface = this.activeBoundary.source === "map" ? "map" : "profile";
+          this.setMessage(`Click the ${surface} to select the ${this.activeBoundary.target} point.`);
+        });
+      }
+    }
+  }
+
+  isSelecting(source: BoundarySource): boolean {
+    return this.activeBoundary?.source === source;
+  }
+
+  clearSelection(): void {
+    this.activeBoundary = null;
+    for (const form of this.forms) {
+      for (const button of form.querySelectorAll("[data-boundary-button]")) button.classList.remove("active");
+    }
+  }
+
+  choosePoint(index: number): void {
+    if (!this.activeBoundary) return;
+    const { form, target } = this.activeBoundary;
+    const item = form.closest<HTMLElement>("[data-climb-item]");
+    if (!item) return;
+    const climbIndex = Number.parseInt(item.dataset.climbIndex ?? "", 10);
+    const input = requireElement(form.querySelector<HTMLInputElement>(`[data-boundary-input="${target}"]`), `${target} boundary input`);
+    const output = requireElement(form.querySelector<HTMLOutputElement>(`[data-boundary-output="${target}"]`), `${target} boundary output`);
+    input.value = String(index);
+    output.textContent = this.boundaryLabel(index);
+    if (target === "start") this.climbBounds[climbIndex].startIndex = index;
+    else this.climbBounds[climbIndex].endIndex = index;
+    this.updatePreview(form);
+    this.onBoundaryChanged(climbIndex);
+    this.clearSelection();
+    this.onPointSelected(index);
+  }
+
+  updatePreview(form: HTMLFormElement): void {
+    const preview = requireElement(form.querySelector<HTMLElement>("[data-boundary-preview]"), "boundary preview");
+    const item = form.closest<HTMLElement>("[data-climb-item]");
+    if (!item) return;
+    const climbIndex = Number.parseInt(item.dataset.climbIndex ?? "", 10);
+    const metrics = climbMetrics(this.points, this.climbBounds[climbIndex]);
+    if (!metrics) {
+      preview.textContent = "Choose an end point after the start point.";
+      return;
+    }
+    const summary = requireElement(item.querySelector<HTMLElement>("[data-climb-summary]"), "climb summary");
+    const metricsOutput = requireElement(item.querySelector<HTMLElement>("[data-climb-metrics]"), "climb metrics");
+    summary.textContent = `${formatDistance(metrics.start.distanceKm)}–${formatDistance(metrics.end.distanceKm)}`;
+    metricsOutput.textContent = `${metrics.category} · ${formatDistance(metrics.distanceKm)} at ${metrics.slope.toFixed(1)}% · Cotacol ${metrics.cotacol.toFixed(1)}`;
+    preview.textContent = `Preview: ${formatDistance(metrics.distanceKm)} · ${metrics.elevationGain >= 0 ? "+" : ""}${formatElevation(metrics.elevationGain)} · ${metrics.slope.toFixed(1)}% · Cotacol ${metrics.cotacol.toFixed(1)}`;
+  }
+
+  boundaryLabel(index: number): string {
+    const point = this.points[index];
+    return `${formatDistance(point.distanceKm)} · ${formatElevation(point.elevationM)}`;
+  }
+}
diff --git a/web/static/ride-detail-canvas.js b/web/frontend/ride-detail-canvas.ts
index 99b09c1..1453013 100644
--- a/web/static/ride-detail-canvas.js
+++ b/web/frontend/ride-detail-canvas.ts
@@ -1,7 +1,52 @@
 import { clamp, climbMetrics, formatDistance, formatElevation, nearestPointIndex } from "./ride-detail-logic.js";
+import type { BoundarySource, ClimbBounds, RideDetailColors, RideProfile, RideProfilePoint } from "./types.js";
+
+interface Plot {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+interface RideProfileCanvasOptions {
+  canvas: HTMLCanvasElement;
+  points: RideProfilePoint[];
+  profile: RideProfile;
+  colors: RideDetailColors;
+  getClimbBounds: () => ClimbBounds[];
+  canSelectPoint: (source: BoundarySource) => boolean;
+  onPointSelected: (index: number) => void;
+  onPointHover: (index: number) => void;
+}
 
 export class RideProfileCanvas {
-  constructor({ canvas, points, profile, colors, getClimbBounds, canSelectPoint, onPointSelected, onPointHover }) {
+  private readonly canvas: HTMLCanvasElement;
+  private readonly points: RideProfilePoint[];
+  private readonly profile: RideProfile;
+  private readonly colors: RideDetailColors;
+  private readonly getClimbBounds: () => ClimbBounds[];
+  private readonly canSelectPoint: (source: BoundarySource) => boolean;
+  private readonly onPointSelected: (index: number) => void;
+  private readonly onPointHover: (index: number) => void;
+  private readonly context: CanvasRenderingContext2D;
+  private hoveredIndex: number;
+  private focusedClimbIndex: number;
+  private plot: Plot | null;
+  private readonly minDistance: number;
+  private readonly maxDistance: number;
+  private readonly minElevation: number;
+  private readonly maxElevation: number;
+
+  constructor({
+    canvas,
+    points,
+    profile,
+    colors,
+    getClimbBounds,
+    canSelectPoint,
+    onPointSelected,
+    onPointHover,
+  }: RideProfileCanvasOptions) {
     this.canvas = canvas;
     this.points = points;
     this.profile = profile;
@@ -10,8 +55,9 @@ export class RideProfileCanvas {
     this.canSelectPoint = canSelectPoint;
     this.onPointSelected = onPointSelected;
     this.onPointHover = onPointHover;
-    this.context = canvas.getContext("2d");
-    if (!this.context) throw new Error("Ride profile canvas is unavailable");
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("Ride profile canvas is unavailable");
+    this.context = context;
     this.hoveredIndex = -1;
     this.focusedClimbIndex = 0;
     this.plot = null;
@@ -29,34 +75,38 @@ export class RideProfileCanvas {
     this.bindEvents();
   }
 
-  setFocusedClimbIndex(index) {
+  setFocusedClimbIndex(index: number): void {
     this.focusedClimbIndex = index;
     this.draw();
   }
 
-  redraw() {
+  redraw(): void {
     this.draw();
   }
 
-  xForDistance(distance) {
+  xForDistance(distance: number): number {
+    const plot = this.plot;
+    if (!plot) throw new Error("Ride profile canvas has not been drawn");
     const span = Math.max(this.maxDistance - this.minDistance, 1);
-    return this.plot.left + ((distance - this.minDistance) / span) * (this.plot.right - this.plot.left);
+    return plot.left + ((distance - this.minDistance) / span) * (plot.right - plot.left);
   }
 
-  yForElevation(elevation) {
+  yForElevation(elevation: number): number {
+    const plot = this.plot;
+    if (!plot) throw new Error("Ride profile canvas has not been drawn");
     const span = Math.max(this.maxElevation - this.minElevation, 1);
-    return this.plot.bottom - ((elevation - this.minElevation) / span) * (this.plot.bottom - this.plot.top);
+    return plot.bottom - ((elevation - this.minElevation) / span) * (plot.bottom - plot.top);
   }
 
-  draw() {
+  draw(): void {
     const rect = this.canvas.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) return;
     const ratio = window.devicePixelRatio || 1;
     this.canvas.width = Math.floor(rect.width * ratio);
     this.canvas.height = Math.floor(rect.height * ratio);
     this.context.setTransform(ratio, 0, 0, ratio, 0, 0);
-    this.plot = { left: 52, right: rect.width - 20, top: 24, bottom: rect.height - 34 };
-    const plot = this.plot;
+    const plot: Plot = { left: 52, right: rect.width - 20, top: 24, bottom: rect.height - 34 };
+    this.plot = plot;
     this.context.clearRect(0, 0, rect.width, rect.height);
     this.context.fillStyle = this.colors.plotSurface;
     this.context.fillRect(0, 0, rect.width, rect.height);
@@ -163,25 +213,27 @@ export class RideProfileCanvas {
     }
   }
 
-  clearHover() {
+  clearHover(): void {
     this.hoveredIndex = -1;
     this.onPointHover(-1);
     this.draw();
   }
 
-  showPoint(index) {
+  showPoint(index: number): void {
     this.hoveredIndex = clamp(index, 0, this.points.length - 1);
     this.onPointHover(this.hoveredIndex);
     this.draw();
   }
 
-  pointIndexAtX(x) {
-    const distance = this.minDistance + ((x - this.plot.left) / (this.plot.right - this.plot.left)) * (this.maxDistance - this.minDistance);
+  pointIndexAtX(x: number): number {
+    const plot = this.plot;
+    if (!plot) throw new Error("Ride profile canvas has not been drawn");
+    const distance = this.minDistance + ((x - plot.left) / (plot.right - plot.left)) * (this.maxDistance - this.minDistance);
     return nearestPointIndex(this.points, distance);
   }
 
-  bindEvents() {
-    this.canvas.addEventListener("pointermove", (event) => {
+  bindEvents(): void {
+    this.canvas.addEventListener("pointermove", (event: PointerEvent) => {
       if (!this.plot) return;
       const rect = this.canvas.getBoundingClientRect();
       const x = event.clientX - rect.left;
@@ -193,14 +245,14 @@ export class RideProfileCanvas {
     });
     this.canvas.addEventListener("pointerleave", () => this.clearHover());
     this.canvas.addEventListener("pointercancel", () => this.clearHover());
-    this.canvas.addEventListener("click", (event) => {
+    this.canvas.addEventListener("click", (event: MouseEvent) => {
       if (!this.canSelectPoint("profile") || !this.plot) return;
       const rect = this.canvas.getBoundingClientRect();
       const x = event.clientX - rect.left;
       if (x < this.plot.left || x > this.plot.right) return;
       this.onPointSelected(this.pointIndexAtX(x));
     });
-    this.canvas.addEventListener("keydown", (event) => {
+    this.canvas.addEventListener("keydown", (event: KeyboardEvent) => {
       if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
       event.preventDefault();
       const direction = event.key === "ArrowRight" ? 1 : -1;
diff --git a/web/static_test/ride-detail-logic.test.js b/web/frontend/ride-detail-logic.test.ts
index 2d9a695..024f018 100644
--- a/web/static_test/ride-detail-logic.test.js
+++ b/web/frontend/ride-detail-logic.test.ts
@@ -8,7 +8,7 @@ import {
   formatDistance,
   formatElevation,
   nearestPointIndex,
-} from "../static/ride-detail-logic.js";
+} from "./ride-detail-logic.ts";
 
 const points = [
   { distanceKm: 0, elevationM: 100 },
@@ -30,6 +30,7 @@ test("interpolates elevation between route points", () => {
 
 test("calculates climb metrics with the Cotacol score", () => {
   const metrics = climbMetrics(points, { startIndex: 0, endIndex: 3 });
+  assert.ok(metrics);
 
   assert.equal(metrics.distanceKm, 0.25);
   assert.equal(metrics.elevationGain, 20);
diff --git a/web/static/ride-detail-logic.js b/web/frontend/ride-detail-logic.ts
index 4ab408b..825bb2c 100644
--- a/web/static/ride-detail-logic.js
+++ b/web/frontend/ride-detail-logic.ts
@@ -1,10 +1,12 @@
-export const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+import type { ClimbBounds, ClimbMetrics, ProfilePoint } from "./types.js";
 
-export const formatDistance = (distance) => `${distance.toFixed(distance < 10 ? 1 : 0)} km`;
+export const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value));
 
-export const formatElevation = (elevation) => `${Math.round(elevation)} m`;
+export const formatDistance = (distance: number): string => `${distance.toFixed(distance < 10 ? 1 : 0)} km`;
 
-export const nearestPointIndex = (points, distance) => {
+export const formatElevation = (elevation: number): string => `${Math.round(elevation)} m`;
+
+export const nearestPointIndex = (points: ProfilePoint[], distance: number): number => {
   let low = 0;
   let high = points.length - 1;
   while (low < high) {
@@ -17,7 +19,7 @@ export const nearestPointIndex = (points, distance) => {
   return distance - previous.distanceKm < points[low].distanceKm - distance ? low - 1 : low;
 };
 
-export const categoryForScore = (score) => {
+export const categoryForScore = (score: number): string => {
   if (score < 35) return "NO";
   if (score < 80) return "Cat 4";
   if (score < 180) return "Cat 3";
@@ -26,7 +28,7 @@ export const categoryForScore = (score) => {
   return "HC";
 };
 
-export const elevationAtDistance = (points, index, distanceM) => {
+export const elevationAtDistance = (points: ProfilePoint[], index: number, distanceM: number): number => {
   if (index + 1 >= points.length) return points[index].elevationM;
   const startDistanceM = points[index].distanceKm * 1000;
   const endDistanceM = points[index + 1].distanceKm * 1000;
@@ -34,7 +36,7 @@ export const elevationAtDistance = (points, index, distanceM) => {
   return points[index].elevationM + fraction * (points[index + 1].elevationM - points[index].elevationM);
 };
 
-export const cotacolForClimb = (points, startIndex, endIndex) => {
+export const cotacolForClimb = (points: ProfilePoint[], startIndex: number, endIndex: number): number => {
   const startDistanceM = points[startIndex].distanceKm * 1000;
   const lastDistanceM = points[endIndex].distanceKm * 1000;
   if (lastDistanceM <= startDistanceM) return 0;
@@ -52,7 +54,7 @@ export const cotacolForClimb = (points, startIndex, endIndex) => {
   return score;
 };
 
-export const climbMetrics = (points, bounds) => {
+export const climbMetrics = (points: ProfilePoint[], bounds: ClimbBounds | undefined): ClimbMetrics | null => {
   if (
     !bounds ||
     !Number.isInteger(bounds.startIndex) ||
diff --git a/web/static/ride-detail-map.js b/web/frontend/ride-detail-map.ts
index e8e7240..bd19412 100644
--- a/web/static/ride-detail-map.js
+++ b/web/frontend/ride-detail-map.ts
@@ -1,7 +1,27 @@
 import { clamp } from "./ride-detail-logic.js";
+import type { ClimbBounds, RideDetailColors, RideProfilePoint, RideRoute } from "./types.js";
+import type { CircleMarker, LeafletMouseEvent, Map as LeafletMap, Polyline } from "leaflet";
+
+type LeafletApi = typeof import("leaflet");
+
+interface RideDetailMapOptions {
+  leaflet: LeafletApi;
+  element: HTMLElement;
+  route: RideRoute;
+  points: RideProfilePoint[];
+  climbs: ClimbBounds[];
+  colors: RideDetailColors;
+}
 
 export class RideDetailMap {
-  constructor({ leaflet, element, route, points, climbs, colors }) {
+  private readonly leaflet: LeafletApi;
+  private readonly points: RideProfilePoint[];
+  private readonly colors: RideDetailColors;
+  private readonly map: LeafletMap;
+  private readonly climbLayers: (Polyline | null)[];
+  private readonly routeCursor: CircleMarker;
+
+  constructor({ leaflet, element, route, points, climbs, colors }: RideDetailMapOptions) {
     this.leaflet = leaflet;
     this.points = points;
     this.colors = colors;
@@ -32,9 +52,11 @@ export class RideDetailMap {
       .addTo(this.map);
   }
 
-  createClimbLayer(climb) {
+  createClimbLayer(climb: ClimbBounds): Polyline | null {
     if (!this.isValidBounds(climb)) return null;
-    const coordinates = this.points.slice(climb.startIndex, climb.endIndex + 1).map((point) => [point.latitude, point.longitude]);
+    const coordinates: [number, number][] = this.points
+      .slice(climb.startIndex, climb.endIndex + 1)
+      .map((point) => [point.latitude, point.longitude]);
     return this.leaflet
       .polyline(coordinates, {
         color: this.colors.climbRoute,
@@ -47,29 +69,31 @@ export class RideDetailMap {
       .addTo(this.map);
   }
 
-  isValidBounds(bounds) {
-    return (
+  isValidBounds(bounds: ClimbBounds | undefined): boolean {
+    return Boolean(
       bounds &&
-      Number.isInteger(bounds.startIndex) &&
-      Number.isInteger(bounds.endIndex) &&
-      bounds.startIndex >= 0 &&
-      bounds.endIndex < this.points.length &&
-      bounds.startIndex < bounds.endIndex
+        Number.isInteger(bounds.startIndex) &&
+        Number.isInteger(bounds.endIndex) &&
+        bounds.startIndex >= 0 &&
+        bounds.endIndex < this.points.length &&
+        bounds.startIndex < bounds.endIndex,
     );
   }
 
-  updateClimbLayer(index, bounds, active) {
+  updateClimbLayer(index: number, bounds: ClimbBounds | undefined, active: boolean): void {
     const layer = this.climbLayers[index];
     if (!layer) return;
-    if (!this.isValidBounds(bounds)) {
+    if (!bounds || !this.isValidBounds(bounds)) {
       layer.setLatLngs([]);
       return;
     }
-    layer.setLatLngs(this.points.slice(bounds.startIndex, bounds.endIndex + 1).map((point) => [point.latitude, point.longitude]));
+    layer.setLatLngs(
+      this.points.slice(bounds.startIndex, bounds.endIndex + 1).map((point) => [point.latitude, point.longitude] as [number, number]),
+    );
     layer.setStyle({ weight: active ? 9 : 7, opacity: active ? 1 : 0.65 });
   }
 
-  nearestPointIndex(latitude, longitude) {
+  nearestPointIndex(latitude: number, longitude: number): number {
     let nearestIndex = 0;
     let nearestDistance = Infinity;
     for (let index = 0; index < this.points.length; index++) {
@@ -83,7 +107,7 @@ export class RideDetailMap {
     return nearestIndex;
   }
 
-  showPoint(index) {
+  showPoint(index: number): void {
     const point = this.points[clamp(index, 0, this.points.length - 1)];
     this.routeCursor.setLatLng([point.latitude, point.longitude]);
     this.routeCursor.setStyle({ opacity: 1, fillOpacity: 0.9 });
@@ -93,14 +117,14 @@ export class RideDetailMap {
     this.routeCursor.setStyle({ opacity: 0, fillOpacity: 0 });
   }
 
-  zoomToClimb(bounds) {
-    if (!this.isValidBounds(bounds)) return;
+  zoomToClimb(bounds: ClimbBounds | undefined): void {
+    if (!bounds || !this.isValidBounds(bounds)) return;
     const climbPoints = this.points.slice(bounds.startIndex, bounds.endIndex + 1);
-    const mapBounds = this.leaflet.latLngBounds(climbPoints.map((point) => [point.latitude, point.longitude]));
+    const mapBounds = this.leaflet.latLngBounds(climbPoints.map((point) => [point.latitude, point.longitude] as [number, number]));
     if (mapBounds.isValid()) this.map.fitBounds(mapBounds, { padding: [32, 32], maxZoom: 15 });
   }
 
-  onClick(listener) {
+  onClick(listener: (event: LeafletMouseEvent) => void): void {
     this.map.on("click", listener);
   }
 }
diff --git a/web/static/ride-detail.js b/web/frontend/ride-detail.ts
index 67c87ae..fb75c19 100644
--- a/web/static/ride-detail.js
+++ b/web/frontend/ride-detail.ts
@@ -3,26 +3,29 @@ import { RideBoundaryController } from "./ride-detail-boundaries.js";
 import { RideProfileCanvas } from "./ride-detail-canvas.js";
 import { RideDetailMap } from "./ride-detail-map.js";
 import { formatDistance, formatElevation } from "./ride-detail-logic.js";
+import type { ClimbBounds, RideDetailColors, RideProfile, RideProfilePoint, RideRoute } from "./types.js";
 
-export const mountRideDetail = () => {
+export const mountRideDetail = (): void => {
   const mapElement = document.getElementById("ride-map");
-  const routeElement = /** @type {HTMLScriptElement | null} */ (document.getElementById("ride-route"));
-  const profileElement = /** @type {HTMLScriptElement | null} */ (document.getElementById("ride-profile"));
-  const canvas = /** @type {HTMLCanvasElement | null} */ (document.getElementById("ride-profile-chart"));
-  /** @type {HTMLElement | null} */
+  const routeElement = document.getElementById("ride-route");
+  const profileElement = document.getElementById("ride-profile");
+  const canvas = document.getElementById("ride-profile-chart");
   const hoverOutput = document.getElementById("ride-profile-hover");
   if (!mapElement || !routeElement || !profileElement || !canvas || !hoverOutput) return;
+  const routeScript = routeElement as HTMLScriptElement;
+  const profileScript = profileElement as HTMLScriptElement;
+  const profileCanvasElement = canvas as HTMLCanvasElement;
   const leaflet = window.L;
   if (!leaflet) return;
 
   const colorProbe = document.createElement("span");
   colorProbe.hidden = true;
   document.body.append(colorProbe);
-  const resolveColor = (name) => {
+  const resolveColor = (name: string): string => {
     colorProbe.style.color = `var(${name})`;
     return getComputedStyle(colorProbe).color;
   };
-  const colors = {
+  const colors: RideDetailColors = {
     accent: resolveColor("--color-accent"),
     forest: resolveColor("--color-forest"),
     subtle: resolveColor("--color-subtle"),
@@ -39,20 +42,17 @@ export const mountRideDetail = () => {
   };
   colorProbe.remove();
 
-  const route = JSON.parse(routeElement.textContent);
-  const profile = JSON.parse(profileElement.textContent);
-  const points = profile.points || [];
+  const route = JSON.parse(routeScript.textContent ?? "") as RideRoute;
+  const profile = JSON.parse(profileScript.textContent ?? "") as RideProfile;
+  const points: RideProfilePoint[] = profile.points;
   if (points.length === 0) return;
 
-  const climbItems = [...document.querySelectorAll("[data-climb-item]")].map((item) => /** @type {HTMLElement} */ (item));
-  const climbItemIndices = climbItems.map((item) => Number.parseInt(item.dataset.climbIndex, 10));
-  /** @type {HTMLButtonElement | null} */
-  const previousClimbButton = document.querySelector("[data-climb-previous]");
-  /** @type {HTMLButtonElement | null} */
-  const nextClimbButton = document.querySelector("[data-climb-next]");
-  /** @type {HTMLElement | null} */
-  const climbPosition = document.querySelector("[data-climb-position]");
-  const climbBounds = (profile.climbs || []).map((climb) => ({ startIndex: climb.startIndex, endIndex: climb.endIndex }));
+  const climbItems = [...document.querySelectorAll<HTMLElement>("[data-climb-item]")];
+  const climbItemIndices = climbItems.map((item) => Number.parseInt(item.dataset.climbIndex ?? "", 10));
+  const previousClimbButton = document.querySelector<HTMLButtonElement>("[data-climb-previous]");
+  const nextClimbButton = document.querySelector<HTMLButtonElement>("[data-climb-next]");
+  const climbPosition = document.querySelector<HTMLElement>("[data-climb-position]");
+  const climbBounds: ClimbBounds[] = profile.climbs.map((climb) => ({ startIndex: climb.startIndex, endIndex: climb.endIndex }));
   const state = {
     focusedClimbItemIndex: 0,
     focusedClimbIndex: climbItemIndices[0] ?? 0,
@@ -67,9 +67,9 @@ export const mountRideDetail = () => {
     colors,
   });
   const officialProfileController = new OfficialClimbProfileController(points);
-  let boundaryController;
+  let boundaryController: RideBoundaryController | undefined;
   const profileCanvas = new RideProfileCanvas({
-    canvas,
+    canvas: profileCanvasElement,
     points,
     profile,
     colors,
@@ -88,11 +88,11 @@ export const mountRideDetail = () => {
     },
   });
 
-  const updateClimbLayer = (index) => {
+  const updateClimbLayer = (index: number): void => {
     mapController.updateClimbLayer(index, climbBounds[index], index === state.focusedClimbIndex);
   };
   boundaryController = new RideBoundaryController({
-    forms: [...document.querySelectorAll("[data-official-climb-form]")].map((form) => /** @type {HTMLFormElement} */ (form)),
+    forms: [...document.querySelectorAll<HTMLFormElement>("[data-official-climb-form]")],
     points,
     climbBounds,
     onBoundaryChanged: (index) => {
@@ -106,11 +106,11 @@ export const mountRideDetail = () => {
   });
 
   mapController.onClick((event) => {
-    if (!boundaryController.isSelecting("map")) return;
+    if (!boundaryController?.isSelecting("map")) return;
     boundaryController.choosePoint(mapController.nearestPointIndex(event.latlng.lat, event.latlng.lng));
   });
 
-  const updateClimbFocus = (index, zoom) => {
+  const updateClimbFocus = (index: number, zoom: boolean): void => {
     if (climbItems.length === 0) return;
     state.focusedClimbItemIndex = Math.max(0, Math.min(climbItems.length - 1, index));
     state.focusedClimbIndex = climbItemIndices[state.focusedClimbItemIndex];
@@ -124,7 +124,7 @@ export const mountRideDetail = () => {
     if (climbPosition) climbPosition.textContent = `Climb ${state.focusedClimbItemIndex + 1} of ${climbItems.length}`;
     if (previousClimbButton) previousClimbButton.disabled = state.focusedClimbItemIndex === 0;
     if (nextClimbButton) nextClimbButton.disabled = state.focusedClimbItemIndex === climbItems.length - 1;
-    boundaryController.clearSelection();
+    boundaryController?.clearSelection();
     profileCanvas.setFocusedClimbIndex(state.focusedClimbIndex);
     if (zoom) mapController.zoomToClimb(climbBounds[state.focusedClimbIndex]);
   };
diff --git a/web/static/sync.js b/web/frontend/sync.ts
index 3cf6cca..000dcfc 100644
--- a/web/static/sync.js
+++ b/web/frontend/sync.ts
@@ -1,67 +1,69 @@
-export const mountSync = () => {
-  const form = /** @type {HTMLFormElement | null} */ (document.getElementById("sync-form"));
+import type { SyncErrorEvent, SyncProgress } from "./types.js";
+import { requireElement } from "./dom.js";
+
+const isSyncProgress = (data: SyncProgress | SyncErrorEvent): data is SyncProgress => "total" in data;
+
+export const mountSync = (): void => {
+  const form = document.getElementById("sync-form") as HTMLFormElement | null;
   if (!form) return;
-  /** @type {HTMLButtonElement} */
-  const button = form.querySelector("button[type=submit]");
-  /** @type {HTMLElement} */
-  const progressPanel = document.getElementById("sync-progress");
-  const progressBar = /** @type {HTMLProgressElement} */ (document.getElementById("sync-progress-bar"));
-  /** @type {HTMLElement} */
-  const progressCount = document.getElementById("sync-progress-count");
-  /** @type {HTMLElement} */
-  const progressDetails = document.getElementById("sync-progress-details");
-  /** @type {HTMLElement} */
-  const notice = document.getElementById("sync-notice");
-  /** @type {HTMLElement} */
-  const error = document.getElementById("sync-error");
+  const button = requireElement(form.querySelector<HTMLButtonElement>("button[type=submit]"), "sync submit button");
+  const progressPanel = requireElement(document.getElementById("sync-progress"), "sync progress");
+  const progressBar = requireElement(document.getElementById("sync-progress-bar") as HTMLProgressElement | null, "sync progress bar");
+  const progressCount = requireElement(document.getElementById("sync-progress-count"), "sync progress count");
+  const progressDetails = requireElement(document.getElementById("sync-progress-details"), "sync progress details");
+  const notice = requireElement(document.getElementById("sync-notice"), "sync notice");
+  const error = requireElement(document.getElementById("sync-error"), "sync error");
 
-  const showError = (message) => {
+  const showError = (message: string): void => {
     error.textContent = message;
     error.hidden = false;
   };
-  const updateProgress = (progress) => {
+  const updateProgress = (progress: SyncProgress): void => {
     progressPanel.hidden = false;
     progressBar.max = Math.max(progress.total, 1);
     progressBar.value = progress.completed;
     progressCount.textContent = `${progress.completed} / ${progress.total}`;
     progressDetails.textContent = `${progress.imported} imported · ${progress.skipped} skipped`;
   };
-  const handleEvent = (eventName, data) => {
+  const handleEvent = (eventName: string, data: SyncProgress | SyncErrorEvent): boolean => {
     if (eventName === "progress") {
+      if (!isSyncProgress(data)) throw new Error("Invalid Strava sync progress event");
       updateProgress(data);
       return false;
     }
     if (eventName === "complete") {
+      if (!isSyncProgress(data)) throw new Error("Invalid Strava sync completion event");
       updateProgress(data);
       notice.textContent = `Sync complete: ${data.imported} imported, ${data.skipped} skipped.`;
       notice.hidden = false;
       return true;
     }
     if (eventName === "error") {
-      if (data.progress) updateProgress(data.progress);
-      throw new Error(data.message || "Strava sync failed");
+      if ("progress" in data && data.progress) updateProgress(data.progress);
+      throw new Error("message" in data ? data.message || "Strava sync failed" : "Strava sync failed");
     }
     return false;
   };
-  const consumeEvents = async (response) => {
+  const consumeEvents = async (response: Response): Promise<void> => {
+    if (!response.body) throw new Error("The browser does not support streaming responses");
     const reader = response.body.getReader();
     const decoder = new TextDecoder();
     let buffer = "";
     let completed = false;
-    const consumeBlock = (block) => {
+    const consumeBlock = (block: string): void => {
       let eventName = "message";
       let data = "";
       for (const line of block.split(/\r?\n/)) {
         if (line.startsWith("event: ")) eventName = line.slice(7);
         if (line.startsWith("data: ")) data += line.slice(6);
       }
-      if (data) completed = handleEvent(eventName, JSON.parse(data)) || completed;
+      if (data) completed = handleEvent(eventName, JSON.parse(data) as SyncProgress | SyncErrorEvent) || completed;
     };
     while (true) {
       const { value, done } = await reader.read();
       buffer += decoder.decode(value || new Uint8Array(), { stream: !done });
       const blocks = buffer.split(/\r?\n\r?\n/);
-      buffer = blocks.pop();
+      buffer = blocks.pop() ?? "";
       for (const block of blocks) consumeBlock(block);
       if (done) break;
     }
@@ -69,7 +71,7 @@ export const mountSync = () => {
     if (!completed) throw new Error("Strava sync ended before completion");
   };
 
-  form.addEventListener("submit", async (event) => {
+  form.addEventListener("submit", async (event: SubmitEvent) => {
     event.preventDefault();
     button.disabled = true;
     button.textContent = "Syncing...";
diff --git a/web/frontend/types.d.ts b/web/frontend/types.d.ts
new file mode 100644
index 0000000..66f1ad2
--- /dev/null
+++ b/web/frontend/types.d.ts
@@ -0,0 +1,116 @@
+export type ProfileBand = "downhill" | "0-3" | "3-6" | "6-9" | "9-12" | "12-plus";
+export type BoundaryTarget = "start" | "end";
+export type BoundarySource = "profile" | "map";
+
+export interface ProfilePoint {
+  distanceKm: number;
+  elevationM: number;
+}
+
+export interface RideProfilePoint extends ProfilePoint {
+  latitude: number;
+  longitude: number;
+}
+
+export interface RideProfileClimb {
+  startKm: number;
+  endKm: number;
+  topKm: number;
+  topElevationM: number;
+  name: string;
+  score: number;
+  category: string;
+  distanceKm: number;
+  slopePercent: number;
+  cotacol: number;
+  officialClimbId?: number;
+  officialName?: string;
+  startIndex: number;
+  endIndex: number;
+}
+
+export interface RideProfileCrossing {
+  distanceKm: number;
+  passElevationM: number;
+  rideElevationM: number;
+  distanceToM: number;
+  elevationDiffM: number;
+  name: string;
+}
+
+export interface RideProfile {
+  points: RideProfilePoint[];
+  climbs: RideProfileClimb[];
+  crossings: RideProfileCrossing[];
+}
+
+export interface RideRoute {
+  type: "FeatureCollection";
+  features: RideRouteFeature[];
+}
+
+export interface RideRouteFeature {
+  type: "Feature";
+  geometry: {
+    type: "LineString";
+    coordinates: [number, number][];
+  };
+  properties?: Record<string, unknown>;
+}
+
+export interface ClimbBounds {
+  startIndex: number;
+  endIndex: number;
+}
+
+export interface ClimbMetrics {
+  start: ProfilePoint;
+  end: ProfilePoint;
+  distanceKm: number;
+  elevationGain: number;
+  slope: number;
+  score: number;
+  cotacol: number;
+  category: string;
+}
+
+export interface OfficialProfileColors {
+  downhill: string;
+  "0-3": string;
+  "3-6": string;
+  "6-9": string;
+  "9-12": string;
+  "12-plus": string;
+  plotSurface: string;
+  grid: string;
+  subtle: string;
+  accent: string;
+}
+
+export interface RideDetailColors {
+  accent: string;
+  subtle: string;
+  plotSurface: string;
+  grid: string;
+  forest: string;
+  plotSurfaceOverlay: string;
+  accentFill: string;
+  climbLabel: string;
+  crossing: string;
+  crossingLabel: string;
+  hoverLine: string;
+  climbRoute: string;
+  climbFocusFill: string;
+}
+
+export interface SyncProgress {
+  total: number;
+  completed: number;
+  imported: number;
+  skipped: number;
+}
+
+export interface SyncErrorEvent {
+  message: string;
+  progress?: SyncProgress;
+}
diff --git a/web/static/ride-detail-boundaries.js b/web/static/ride-detail-boundaries.js
deleted file mode 100644
index 98e0990..0000000
--- a/web/static/ride-detail-boundaries.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { climbMetrics, formatDistance, formatElevation } from "./ride-detail-logic.js";
-
-export class RideBoundaryController {
-  constructor({ forms, points, climbBounds, onBoundaryChanged, onPointSelected, setMessage }) {
-    this.forms = forms;
-    this.points = points;
-    this.climbBounds = climbBounds;
-    this.onBoundaryChanged = onBoundaryChanged;
-    this.onPointSelected = onPointSelected;
-    this.setMessage = setMessage;
-    this.activeBoundary = null;
-    this.initialize();
-  }
-
-  initialize() {
-    for (const form of this.forms) {
-      const item = /** @type {HTMLElement} */ (form.closest("[data-climb-item]"));
-      const climbIndex = Number.parseInt(item.dataset.climbIndex, 10);
-      this.climbBounds[climbIndex] = {
-        startIndex: Number.parseInt(/** @type {HTMLInputElement} */ (form.querySelector('[data-boundary-input="start"]')).value, 10),
-        endIndex: Number.parseInt(/** @type {HTMLInputElement} */ (form.querySelector('[data-boundary-input="end"]')).value, 10),
-      };
-      this.updatePreview(form);
-      const buttons = [...form.querySelectorAll("[data-boundary-button]")].map((button) => /** @type {HTMLElement} */ (button));
-      for (const button of buttons) {
-        button.addEventListener("click", () => {
-          this.clearSelection();
-          this.activeBoundary = { form, target: button.dataset.boundaryButton, source: button.dataset.boundarySource };
-          button.classList.add("active");
-          const surface = this.activeBoundary.source === "map" ? "map" : "profile";
-          this.setMessage(`Click the ${surface} to select the ${this.activeBoundary.target} point.`);
-        });
-      }
-    }
-  }
-
-  isSelecting(source) {
-    return this.activeBoundary?.source === source;
-  }
-
-  clearSelection() {
-    this.activeBoundary = null;
-    for (const form of this.forms) {
-      for (const button of form.querySelectorAll("[data-boundary-button]")) button.classList.remove("active");
-    }
-  }
-
-  choosePoint(index) {
-    if (!this.activeBoundary) return;
-    const { form, target } = this.activeBoundary;
-    const item = /** @type {HTMLElement} */ (form.closest("[data-climb-item]"));
-    const climbIndex = Number.parseInt(item.dataset.climbIndex, 10);
-    const input = /** @type {HTMLInputElement} */ (form.querySelector(`[data-boundary-input="${target}"]`));
-    const output = /** @type {HTMLOutputElement} */ (form.querySelector(`[data-boundary-output="${target}"]`));
-    input.value = index;
-    output.textContent = this.boundaryLabel(index);
-    this.climbBounds[climbIndex][`${target}Index`] = index;
-    this.updatePreview(form);
-    this.onBoundaryChanged(climbIndex);
-    this.clearSelection();
-    this.onPointSelected(index);
-  }
-
-  updatePreview(form) {
-    const preview = /** @type {HTMLElement} */ (form.querySelector("[data-boundary-preview]"));
-    const item = /** @type {HTMLElement} */ (form.closest("[data-climb-item]"));
-    const climbIndex = Number.parseInt(item.dataset.climbIndex, 10);
-    const metrics = climbMetrics(this.points, this.climbBounds[climbIndex]);
-    if (!metrics) {
-      preview.textContent = "Choose an end point after the start point.";
-      return;
-    }
-    const summary = /** @type {HTMLElement} */ (item.querySelector("[data-climb-summary]"));
-    const metricsOutput = /** @type {HTMLElement} */ (item.querySelector("[data-climb-metrics]"));
-    summary.textContent = `${formatDistance(metrics.start.distanceKm)}–${formatDistance(metrics.end.distanceKm)}`;
-    metricsOutput.textContent = `${metrics.category} · ${formatDistance(metrics.distanceKm)} at ${metrics.slope.toFixed(1)}% · Cotacol ${metrics.cotacol.toFixed(1)}`;
-    preview.textContent = `Preview: ${formatDistance(metrics.distanceKm)} · ${metrics.elevationGain >= 0 ? "+" : ""}${formatElevation(metrics.elevationGain)} · ${metrics.slope.toFixed(1)}% · Cotacol ${metrics.cotacol.toFixed(1)}`;
-  }
-
-  boundaryLabel(index) {
-    const point = this.points[index];
-    return `${formatDistance(point.distanceKm)} · ${formatElevation(point.elevationM)}`;
-  }
-}