@jjlmoya/utils-sports 1.47.0 → 1.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-sports",
-    "version": "1.47.0",
+    "version": "1.49.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -11,6 +11,7 @@ import { rugbyScoreKeeper } from '../tool/rugbyScoreKeeper/entry';
 import { baseballScoreKeeper } from '../tool/baseballScoreKeeper/entry';
 import { penaltyShootout } from '../tool/penaltyShootout/entry';
 import { swimCssCalculator } from '../tool/swimCssCalculator/entry';
+import { vo2MaxCalculator } from '../tool/vo2MaxCalculator/entry';
 
 export const sportsCategory: SportsCategoryEntry = {
   icon: 'mdi:soccer',
@@ -27,6 +28,7 @@ export const sportsCategory: SportsCategoryEntry = {
     baseballScoreKeeper,
     penaltyShootout,
     swimCssCalculator,
+    vo2MaxCalculator,
   ] as unknown as SportsToolEntry<Record<string, string>>[],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -38,6 +38,8 @@ export { swimCssCalculator } from './tool/swimCssCalculator/entry';
 export type { SwimCssCalculatorLocaleContent } from './tool/swimCssCalculator/entry';
 export { volleyballScoreKeeper } from './tool/volleyballScoreKeeper/entry';
 export type { VolleyballScoreKeeperLocaleContent } from './tool/volleyballScoreKeeper/entry';
+export { vo2MaxCalculator } from './tool/vo2MaxCalculator/entry';
+export type { Vo2MaxCalculatorLocaleContent } from './tool/vo2MaxCalculator/entry';
 
 export { sportsCategory } from './category';
 
@@ -61,6 +63,7 @@ import { penaltyShootout } from './tool/penaltyShootout/entry';
 import { runningPacePredictor } from './tool/runningPacePredictor/entry';
 import { swimCssCalculator } from './tool/swimCssCalculator/entry';
 import { volleyballScoreKeeper } from './tool/volleyballScoreKeeper/entry';
+import { vo2MaxCalculator } from './tool/vo2MaxCalculator/entry';
 
 export const ALL_ENTRIES = [
   basketScoreKeeper,
@@ -83,4 +86,5 @@ export const ALL_ENTRIES = [
   runningPacePredictor,
   swimCssCalculator,
   volleyballScoreKeeper,
+  vo2MaxCalculator,
 ];

package/src/tests/spanish_leakage.test.ts

@@ -28,6 +28,8 @@ const TRANSLATABLE_KEYS = [
   'schemas',
 ] as const;
 
+const COPY_THRESHOLD = 0.9;
+
 const SPANISH_MARKERS = [
   ['sangre', /\bsangre\b/gi],
   ['molino', /\bmolino\b/gi],
@@ -65,12 +67,16 @@ function normalize(value: string): string {
 }
 
 function isTechnicalInvariant(text: string): boolean {
+  const ledUnitMatches = text.match(/\b\d+(?:-\d+)?\s*(?:w|lm)\b/g) ?? [];
   return [
     'data:image/svg+xml;base64',
     'background-image: url',
     '.layout-playground {',
     'const samplerate =',
-  ].some((pattern) => text.includes(pattern)) || (text.includes('presets') && text.includes('hz'));
+  ].some((pattern) => text.includes(pattern)) ||
+    (text.includes('presets') && text.includes('hz')) ||
+    (text.includes('t_rectal') && text.includes('exp(-k * t)')) ||
+    (text.includes('led') && ledUnitMatches.length >= 3);
 }
 
 function collectString(value: string, output: string[]): void {
@@ -111,10 +117,26 @@ function findSpanishMarkers(text: string[]): string[] {
   );
 }
 
+function similarity(left: string, right: string): number {
+  const leftTokens = left.split(/\s+/);
+  const rightCounts = new Map<string, number>();
+  right.split(/\s+/).forEach((token) => rightCounts.set(token, (rightCounts.get(token) ?? 0) + 1));
+  const matches = leftTokens.reduce((total, token) => {
+    const count = rightCounts.get(token) ?? 0;
+    if (count > 0) rightCounts.set(token, count - 1);
+    return total + (count > 0 ? 1 : 0);
+  }, 0);
+  return (2 * matches) / (leftTokens.length + right.split(/\s+/).length);
+}
+
 function findCopiedFragments(spanish: string[], translated: string[]): string[] {
-  const corpus = translated.join(' ');
   return spanish
-    .filter((fragment) => fragment.length >= 80 && corpus.includes(fragment))
+    .filter((fragment) => fragment.length >= 80)
+    .filter((fragment) => translated.some((candidate) =>
+      candidate.length >= 80 &&
+      Math.min(fragment.length, candidate.length) / Math.max(fragment.length, candidate.length) >= COPY_THRESHOLD &&
+      similarity(fragment, candidate) >= COPY_THRESHOLD,
+    ))
     .sort((a, b) => b.length - a.length)
     .slice(0, 3);
 }

package/src/tool/vo2MaxCalculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliographyEntries } from './bibliography';
+---
+
+<SharedBibliography links={bibliographyEntries} />

package/src/tool/vo2MaxCalculator/bibliography.ts

@@ -0,0 +1,18 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'Field-based fitness tests in adults: validity and limitations',
+    url: 'https://pmc.ncbi.nlm.nih.gov/articles/PMC8397016/',
+  },
+  {
+    name: 'Kline et al.: Rockport one-mile walk equation',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/3600239/',
+  },
+  {
+    name: 'Kaminsky et al.: FRIEND age and sex reference standards',
+    url: 'https://pmc.ncbi.nlm.nih.gov/articles/PMC4919021/',
+  },
+];
+
+export const bibliography = bibliographyEntries;

package/src/tool/vo2MaxCalculator/component.astro

@@ -0,0 +1,175 @@
+---
+import type { Vo2MaxCalculatorUI } from './ui';
+import './vo2-max-calculator.css';
+
+interface Props {
+  ui: Vo2MaxCalculatorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div
+  class="vo2-tool"
+  id="vo2-app"
+  data-note-cooper12={ui.methodNoteCooper12}
+  data-note-cooper15={ui.methodNoteCooper15}
+  data-note-rockport={ui.methodNoteRockport}
+  data-note-shuttle20={ui.methodNoteShuttle}
+  data-band-below10={ui.bandBelow10}
+  data-band-10to25={ui.band10to25}
+  data-band-25to50={ui.band25to50}
+  data-band-50to75={ui.band50to75}
+  data-band-75to90={ui.band75to90}
+  data-band-above90={ui.bandAbove90}
+  data-invalid-notice={ui.invalidNotice}
+>
+  <form class="vo2-card vo2-form" id="vo2-form" novalidate>
+    <section class="vo2-result-card" id="vo2-result-card" aria-live="polite">
+      <div class="vo2-result-copy">
+        <p class="vo2-kicker">{ui.resultTitle}</p>
+        <div class="vo2-number-row">
+          <strong id="vo2-value">--</strong>
+          <span>{ui.estimateUnit}</span>
+        </div>
+        <p class="vo2-method-note" id="vo2-method-note">{ui.methodNoteCooper12}</p>
+        <p class="vo2-percentile" id="vo2-percentile">{ui.referenceDescription}</p>
+      </div>
+      <div class="vo2-constellation" aria-hidden="true">
+        <span class="vo2-orbit vo2-orbit-one"></span>
+        <span class="vo2-orbit vo2-orbit-two"></span>
+        <span class="vo2-orbit vo2-orbit-three"></span>
+        <span class="vo2-star vo2-star-one"></span>
+        <span class="vo2-star vo2-star-two"></span>
+        <span class="vo2-star vo2-star-three"></span>
+        <span class="vo2-star vo2-star-four"></span>
+        <span class="vo2-core"></span>
+      </div>
+    </section>
+
+    <fieldset class="vo2-method-panel" aria-label={ui.methodLabel}>
+      <div class="vo2-method-grid">
+        <button type="button" class="vo2-choice is-active" data-method-option="cooper12">{ui.methodCooper12}</button>
+        <button type="button" class="vo2-choice" data-method-option="cooper15">{ui.methodCooper15}</button>
+        <button type="button" class="vo2-choice" data-method-option="rockport">{ui.methodRockport}</button>
+        <button type="button" class="vo2-choice" data-method-option="shuttle20">{ui.methodShuttle}</button>
+      </div>
+    </fieldset>
+
+    <div class="vo2-input-layout">
+      <fieldset class="vo2-test-panel" aria-label={ui.performanceLegend}>
+        <div class="vo2-field" id="vo2-distance-field">
+          <div class="vo2-field-header">
+            <label for="vo2-performance">{ui.distanceLabel}</label>
+            <div class="vo2-unit-switch" data-unit-switch>
+              <button type="button" class="vo2-unit is-active" data-unit="metric">{ui.metricUnit}</button>
+              <button type="button" class="vo2-unit" data-unit="imperial">{ui.imperialUnit}</button>
+            </div>
+          </div>
+          <div class="vo2-input-with-unit">
+            <input id="vo2-performance" type="number" min="1" step="1" value="2400" inputmode="decimal" />
+            <span class="vo2-unit-label" data-distance-unit>m</span>
+          </div>
+          <small>{ui.distanceHint}</small>
+        </div>
+
+        <div class="vo2-field" id="vo2-time-field" hidden>
+          <label>{ui.timeLabel}</label>
+          <div class="vo2-time-grid">
+            <input id="vo2-minutes" type="number" min="0" max="180" value="12" inputmode="numeric" aria-label={ui.minutesLabel} />
+            <span>:</span>
+            <input id="vo2-seconds" type="number" min="0" max="59" value="0" inputmode="numeric" aria-label={ui.secondsLabel} />
+          </div>
+          <small>{ui.minutesLabel} and {ui.secondsLabel}</small>
+        </div>
+
+        <div class="vo2-field" id="vo2-stage-field" hidden>
+          <label for="vo2-stage">{ui.stageLabel}</label>
+          <input id="vo2-stage" type="number" min="1" max="21" step="1" value="8" inputmode="numeric" />
+          <small>{ui.stageHint}</small>
+        </div>
+
+        <div class="vo2-field" id="vo2-weight-field" hidden>
+          <div class="vo2-field-header">
+            <label for="vo2-weight">{ui.weightLabel}</label>
+            <div class="vo2-unit-switch" data-unit-switch>
+              <button type="button" class="vo2-unit is-active" data-unit="metric">{ui.metricUnit}</button>
+              <button type="button" class="vo2-unit" data-unit="imperial">{ui.imperialUnit}</button>
+            </div>
+          </div>
+          <div class="vo2-input-with-unit">
+            <input id="vo2-weight" type="number" min="20" max="400" step="0.1" value="75" inputmode="decimal" />
+            <span class="vo2-unit-label" data-weight-unit>kg</span>
+          </div>
+        </div>
+
+        <div class="vo2-field" id="vo2-heart-rate-field" hidden>
+          <label for="vo2-heart-rate">{ui.heartRateLabel}</label>
+          <div class="vo2-input-with-unit">
+            <input id="vo2-heart-rate" type="number" min="50" max="230" step="1" value="150" inputmode="numeric" />
+            <span class="vo2-unit-label">bpm</span>
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset class="vo2-context-panel" aria-label={ui.referenceTitle}>
+        <div class="vo2-field">
+          <label for="vo2-age">{ui.ageLabel}</label>
+          <input id="vo2-age" type="number" min="20" max="79" step="1" value="35" inputmode="numeric" />
+        </div>
+        <div class="vo2-field">
+          <span class="vo2-label">{ui.sexLabel}</span>
+          <div class="vo2-sex-grid">
+            <button type="button" class="vo2-choice is-active" data-sex="male">{ui.maleLabel}</button>
+            <button type="button" class="vo2-choice" data-sex="female">{ui.femaleLabel}</button>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+
+    <div class="vo2-reference-panel" id="vo2-reference-chart" role="img" aria-label={ui.referenceDescription}>
+      <div class="vo2-reference-scale">
+        <span class="vo2-reference-line"></span>
+        <span class="vo2-reference-marker"></span>
+        <div class="vo2-reference-segments">
+          <span data-reference-band="below10">{ui.bandBelow10}</span>
+          <span data-reference-band="10to25">{ui.band10to25}</span>
+          <span data-reference-band="25to50">{ui.band25to50}</span>
+          <span data-reference-band="50to75">{ui.band50to75}</span>
+          <span data-reference-band="75to90">{ui.band75to90}</span>
+          <span data-reference-band="above90">{ui.bandAbove90}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="vo2-actions">
+      <button type="button" class="vo2-secondary" id="vo2-reset">{ui.resetButton}</button>
+    </div>
+    <p class="vo2-safety">{ui.safetyNotice}</p>
+  </form>
+</div>
+
+<script>
+  import { initVo2Calculator } from './controller';
+
+  const root = document.getElementById('vo2-app');
+  if (root) {
+    initVo2Calculator({
+      methodNote: {
+        cooper12: root.dataset.noteCooper12 ?? '',
+        cooper15: root.dataset.noteCooper15 ?? '',
+        rockport: root.dataset.noteRockport ?? '',
+        shuttle20: root.dataset.noteShuttle20 ?? '',
+      },
+      bandLabels: {
+        below10: root.dataset.bandBelow10 ?? '',
+        '10to25': root.dataset.band10to25 ?? '',
+        '25to50': root.dataset.band25to50 ?? '',
+        '50to75': root.dataset.band50to75 ?? '',
+        '75to90': root.dataset.band75to90 ?? '',
+        above90: root.dataset.bandAbove90 ?? '',
+      },
+      invalidNotice: root.dataset.invalidNotice ?? '',
+    });
+  }
+</script>

package/src/tool/vo2MaxCalculator/content-factory.ts

@@ -0,0 +1,105 @@
+import type { SEOSection } from '@jjlmoya/utils-shared';
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { ToolLocaleContent } from '../../types';
+import { bibliographyEntries } from './bibliography';
+import type { Vo2MaxCalculatorUI } from './ui';
+
+interface SeoCopy {
+  introTitle: string;
+  introParagraph: string;
+  summaryTitle: string;
+  summaryItems: string[];
+  stats: { value: string; label: string }[];
+  protocolTitle: string;
+  comparative: { title: string; description: string }[];
+  rockportTitle: string;
+  diagnosticTitle: string;
+  diagnosticHtml: string;
+  ageTitle: string;
+  tableHeaders: string[];
+  tableRows: string[][];
+  shuttleTitle: string;
+  shuttleParagraph: string;
+  listItems: string[];
+  tipTitle: string;
+  tipHtml: string;
+}
+
+export interface Vo2LocaleCopy {
+  locale: string;
+  slug: string;
+  title: string;
+  description: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  diagnosticBadge: string;
+  ui: Vo2MaxCalculatorUI;
+  faq: { question: string; answer: string }[];
+  howTo: { name: string; text: string }[];
+  seo: SeoCopy;
+}
+
+function createSeo(copy: SeoCopy, diagnosticBadge: string): SEOSection[] {
+  return [
+    { type: 'title', text: copy.introTitle, level: 2 },
+    { type: 'paragraph', html: copy.introParagraph },
+    { type: 'summary', title: copy.summaryTitle, items: copy.summaryItems },
+    { type: 'stats', items: copy.stats },
+    { type: 'title', text: copy.protocolTitle, level: 2 },
+    { type: 'comparative', columns: 2, items: copy.comparative },
+    { type: 'title', text: copy.rockportTitle, level: 2 },
+    { type: 'diagnostic', variant: 'info', title: copy.diagnosticTitle, badge: diagnosticBadge, html: copy.diagnosticHtml },
+    { type: 'title', text: copy.ageTitle, level: 2 },
+    { type: 'table', headers: copy.tableHeaders, rows: copy.tableRows },
+    { type: 'title', text: copy.shuttleTitle, level: 2 },
+    { type: 'paragraph', html: copy.shuttleParagraph },
+    { type: 'list', items: copy.listItems },
+    { type: 'tip', title: copy.tipTitle, html: copy.tipHtml },
+  ];
+}
+
+function createSchemas(copy: Vo2LocaleCopy): WithContext<FAQPage | HowTo | SoftwareApplication>[] {
+  const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: copy.faq.map((item) => ({
+      '@type': 'Question',
+      name: item.question,
+      acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+  };
+  const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: copy.title,
+    description: copy.description,
+    step: copy.howTo.map((step, index) => ({ '@type': 'HowToStep', position: index + 1, name: step.name, text: step.text })),
+  };
+  const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: copy.title,
+    description: copy.description,
+    applicationCategory: 'SportsApplication',
+    operatingSystem: 'All',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+    inLanguage: copy.locale,
+  };
+  return [appSchema, faqSchema, howToSchema];
+}
+
+export function createVo2Content(copy: Vo2LocaleCopy): ToolLocaleContent<Vo2MaxCalculatorUI> {
+  return {
+    slug: copy.slug,
+    title: copy.title,
+    description: copy.description,
+    faqTitle: copy.faqTitle,
+    faq: copy.faq,
+    howTo: copy.howTo,
+    schemas: createSchemas(copy),
+    bibliographyTitle: copy.bibliographyTitle,
+    bibliography: bibliographyEntries,
+    seo: createSeo(copy.seo, copy.diagnosticBadge),
+    ui: copy.ui,
+  };
+}

package/src/tool/vo2MaxCalculator/controller.ts

@@ -0,0 +1,159 @@
+import { calculateVo2Max, defaultVo2Input, type Sex, type UnitSystem, type Vo2Input, type Vo2Method } from './logic';
+import { renderVo2Result, setMethodFields } from './dom-views';
+import { loadVo2State, saveVo2State } from './storage';
+
+interface ControllerLabels {
+  methodNote: Record<Vo2Method, string>;
+  bandLabels: Record<string, string>;
+  invalidNotice: string;
+}
+
+function numberValue(id: string): number {
+  const element = document.getElementById(id) as HTMLInputElement | null;
+  return Number(element?.value ?? 0);
+}
+
+function selectedSex(): Sex {
+  return document.querySelector<HTMLButtonElement>('[data-sex].is-active')?.dataset.sex === 'female' ? 'female' : 'male';
+}
+
+function selectedUnit(): UnitSystem {
+  return document.querySelector<HTMLButtonElement>('[data-unit].is-active')?.dataset.unit === 'imperial' ? 'imperial' : 'metric';
+}
+
+function readInput(): Vo2Input {
+  const method = (document.querySelector<HTMLButtonElement>('[data-method-option].is-active')?.dataset.methodOption ?? 'cooper12') as Vo2Method;
+  const performanceId = method === 'shuttle20' ? 'vo2-stage' : 'vo2-performance';
+  return {
+    method,
+    unit: selectedUnit(),
+    performance: numberValue(performanceId),
+    minutes: numberValue('vo2-minutes'),
+    seconds: numberValue('vo2-seconds'),
+    age: numberValue('vo2-age'),
+    sex: selectedSex(),
+    weight: numberValue('vo2-weight'),
+    heartRate: numberValue('vo2-heart-rate'),
+  };
+}
+
+function applyNumericValues(input: Vo2Input): void {
+  const values: Record<string, number> = {
+    'vo2-performance': input.performance,
+    'vo2-stage': input.performance,
+    'vo2-minutes': input.minutes,
+    'vo2-seconds': input.seconds,
+    'vo2-age': input.age,
+    'vo2-weight': input.weight,
+    'vo2-heart-rate': input.heartRate,
+  };
+  Object.entries(values).forEach(([id, value]) => {
+    const element = document.getElementById(id) as HTMLInputElement | null;
+    if (element) element.value = String(value);
+  });
+}
+
+function applyChoiceValues(input: Vo2Input): void {
+  document.querySelectorAll<HTMLButtonElement>('[data-method-option]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.methodOption === input.method);
+  });
+  document.querySelectorAll<HTMLButtonElement>('[data-sex]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.sex === input.sex);
+  });
+  document.querySelectorAll<HTMLButtonElement>('[data-unit]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.unit === input.unit);
+  });
+  setMethodFields(input.method);
+  document.querySelectorAll<HTMLElement>('[data-distance-unit]').forEach((element) => {
+    element.textContent = input.unit === 'metric' ? 'm' : 'mi';
+  });
+  document.querySelectorAll<HTMLElement>('[data-weight-unit]').forEach((element) => {
+    element.textContent = input.unit === 'metric' ? 'kg' : 'lb';
+  });
+}
+
+function applyInput(input: Vo2Input): void {
+  applyNumericValues(input);
+  applyChoiceValues(input);
+}
+
+function normalizeMethodValue(method: Vo2Method): void {
+  if (method !== 'shuttle20') return;
+  const stage = document.getElementById('vo2-stage') as HTMLInputElement | null;
+  if (stage && (Number(stage.value) < 1 || Number(stage.value) > 21)) stage.value = '8';
+}
+
+function refresh(labels: ControllerLabels): void {
+  const method = (document.querySelector<HTMLButtonElement>('[data-method-option].is-active')?.dataset.methodOption ?? 'cooper12') as Vo2Method;
+  normalizeMethodValue(method);
+  const input = readInput();
+  setMethodFields(input.method);
+  const result = calculateVo2Max(input);
+  saveVo2State(input);
+  renderVo2Result(input, result, labels);
+}
+
+function bindChoice(selector: string, onChange: () => void): void {
+  document.querySelectorAll<HTMLButtonElement>(selector).forEach((button) => {
+    button.addEventListener('click', () => {
+      document.querySelectorAll<HTMLButtonElement>(selector).forEach((item) => item.classList.remove('is-active'));
+      button.classList.add('is-active');
+      onChange();
+    });
+  });
+}
+
+function convertField(id: string, factor: number): void {
+  const element = document.getElementById(id) as HTMLInputElement | null;
+  if (element) element.value = String(Number(element.value) * factor);
+}
+
+function convertUnitFields(method: Vo2Method, next: UnitSystem): void {
+  if (method === 'cooper12') convertField('vo2-performance', next === 'metric' ? 1609.344 : 1 / 1609.344);
+  if (method === 'rockport') convertField('vo2-weight', next === 'metric' ? 1 / 2.2046226218 : 2.2046226218);
+}
+
+function handleUnitChoice(button: HTMLButtonElement, onChange: () => void): void {
+  const previous = selectedUnit();
+  const next = button.dataset.unit === 'imperial' ? 'imperial' : 'metric';
+  const method = (document.querySelector<HTMLButtonElement>('[data-method-option].is-active')?.dataset.methodOption ?? 'cooper12') as Vo2Method;
+  if (previous === next) return;
+  document.querySelectorAll<HTMLButtonElement>('[data-unit]').forEach((item) => item.classList.remove('is-active'));
+  button.classList.add('is-active');
+  convertUnitFields(method, next);
+  onChange();
+}
+
+function bindUnitChoice(onChange: () => void): void {
+  document.querySelectorAll<HTMLButtonElement>('[data-unit]').forEach((button) => {
+    button.addEventListener('click', () => handleUnitChoice(button, onChange));
+  });
+}
+
+function bindInputs(onChange: () => void): void {
+  document.querySelectorAll<HTMLInputElement>('#vo2-form input').forEach((input) => input.addEventListener('input', onChange));
+}
+
+function init(labels: ControllerLabels): void {
+  const saved = loadVo2State();
+  applyInput(saved);
+  const update = () => refresh(labels);
+  bindChoice('[data-method-option]', update);
+  bindChoice('[data-sex]', update);
+  bindUnitChoice(update);
+  bindInputs(update);
+  document.getElementById('vo2-reset')?.addEventListener('click', () => {
+    const initial = defaultVo2Input();
+    applyInput(initial);
+    refresh(labels);
+  });
+  refresh(labels);
+}
+
+export function initVo2Calculator(labels: ControllerLabels): void {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => init(labels), { once: true });
+    return;
+  }
+  init(labels);
+}

package/src/tool/vo2MaxCalculator/dom-views.ts

@@ -0,0 +1,80 @@
+import { evaluateVo2Result } from './evaluator';
+import type { Vo2Input, Vo2Result, Vo2Method } from './logic';
+
+interface DomLabels {
+  methodNote: Record<Vo2Method, string>;
+  bandLabels: Record<string, string>;
+  invalidNotice: string;
+}
+
+function setText(id: string, value: string): void {
+  const element = document.getElementById(id);
+  if (element) element.textContent = value;
+}
+
+function setVisible(id: string, visible: boolean): void {
+  const element = document.getElementById(id);
+  if (element) element.hidden = !visible;
+}
+
+function updateMethodFields(method: Vo2Method): void {
+  setVisible('vo2-distance-field', method === 'cooper12');
+  setVisible('vo2-time-field', method === 'cooper15' || method === 'rockport');
+  setVisible('vo2-stage-field', method === 'shuttle20');
+  setVisible('vo2-weight-field', method === 'rockport');
+  setVisible('vo2-heart-rate-field', method === 'rockport');
+  document.querySelectorAll<HTMLElement>('[data-method-option]').forEach((button) => {
+    button.classList.toggle('is-active', button.dataset.methodOption === method);
+  });
+}
+
+function motionDuration(position: number): string {
+  if (position >= 75) return '0.85s';
+  if (position <= 25) return '2.2s';
+  return '1.45s';
+}
+
+function renderReferenceChart(result: Vo2Result, labels: DomLabels): void {
+  const chart = document.getElementById('vo2-reference-chart');
+  if (!chart) return;
+  chart.style.setProperty('--vo2-position', `${result.position}%`);
+  chart.style.setProperty('--vo2-motion-duration', motionDuration(result.position));
+  chart.dataset.band = result.referenceBand.id;
+  chart.classList.remove('is-empty');
+  chart.classList.remove('is-updating');
+  requestAnimationFrame(() => chart.classList.add('is-updating'));
+  document.querySelectorAll<HTMLElement>('[data-reference-band]').forEach((segment) => {
+    const active = segment.dataset.referenceBand === result.referenceBand.id;
+    segment.classList.toggle('is-active', active);
+    const key = segment.dataset.referenceBand ?? '';
+    segment.textContent = labels.bandLabels[key] ?? '';
+  });
+  setText('vo2-percentile', labels.bandLabels[result.referenceBand.label] ?? '');
+}
+
+function renderEmpty(labels: DomLabels): void {
+  setText('vo2-value', '--');
+  setText('vo2-percentile', labels.invalidNotice);
+  const chart = document.getElementById('vo2-reference-chart');
+  chart?.classList.remove('is-updating');
+  chart?.classList.add('is-empty');
+  document.querySelectorAll<HTMLElement>('[data-reference-band]').forEach((segment) => segment.classList.remove('is-active'));
+}
+
+export function renderVo2Result(input: Vo2Input, result: Vo2Result | null, labels: DomLabels): void {
+  const evaluation = evaluateVo2Result(input, result);
+  const resultCard = document.getElementById('vo2-result-card');
+  resultCard?.classList.toggle('is-caution', evaluation.tone === 'caution');
+  resultCard?.classList.toggle('is-strong', evaluation.tone === 'strong');
+  if (!result) {
+    renderEmpty(labels);
+    return;
+  }
+  setText('vo2-value', result.estimate.toFixed(1));
+  setText('vo2-method-note', labels.methodNote[evaluation.methodNote]);
+  renderReferenceChart(result, labels);
+}
+
+export function setMethodFields(method: Vo2Method): void {
+  updateMethodFields(method);
+}