@jjlmoya/utils-health 1.35.0 → 1.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-health",
-    "version": "1.35.0",
+    "version": "1.36.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -31,10 +31,11 @@ import { targetHeightEstimator } from '../tool/targetHeightEstimator/entry';
 import { correctedReticulocyteIndex } from '../tool/correctedReticulocyteIndex/entry';
 import { estimatedBloodVolumeCalculator } from '../tool/estimatedBloodVolumeCalculator/entry';
 import { anionGapCalculator } from '../tool/anionGapCalculator/entry';
+import { creatinineClearanceCockcroftGault } from '../tool/creatinineClearanceCockcroftGault/entry';
 
 export const healthCategory: HealthCategoryEntry = {
   icon: 'mdi:heart-pulse',
-  tools: [bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, meanArterialPressureCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, estimatedBloodVolumeCalculator, anionGapCalculator, targetHeightEstimator, daltonismSimulator, tinnitusReliever, parametricNoiseSynthesizer, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
+  tools: [bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, meanArterialPressureCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, estimatedBloodVolumeCalculator, anionGapCalculator, creatinineClearanceCockcroftGault, targetHeightEstimator, daltonismSimulator, tinnitusReliever, parametricNoiseSynthesizer, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -27,6 +27,7 @@ export { targetHeightEstimator } from './tool/targetHeightEstimator/entry';
 export { correctedReticulocyteIndex } from './tool/correctedReticulocyteIndex/entry';
 export { estimatedBloodVolumeCalculator } from './tool/estimatedBloodVolumeCalculator/entry';
 export { anionGapCalculator } from './tool/anionGapCalculator/entry';
+export { creatinineClearanceCockcroftGault } from './tool/creatinineClearanceCockcroftGault/entry';
 export { pelliRobsonTest } from './tool/pelliRobsonTest/entry';
 export { peripheralVisionTrainer } from './tool/peripheralVisionTrainer/entry';
 export { readingDistanceCalculator } from './tool/readingDistanceCalculator/entry';
@@ -65,6 +66,7 @@ import { targetHeightEstimator } from './tool/targetHeightEstimator/entry';
 import { correctedReticulocyteIndex } from './tool/correctedReticulocyteIndex/entry';
 import { estimatedBloodVolumeCalculator } from './tool/estimatedBloodVolumeCalculator/entry';
 import { anionGapCalculator } from './tool/anionGapCalculator/entry';
+import { creatinineClearanceCockcroftGault } from './tool/creatinineClearanceCockcroftGault/entry';
 import { pelliRobsonTest } from './tool/pelliRobsonTest/entry';
 import { peripheralVisionTrainer } from './tool/peripheralVisionTrainer/entry';
 import { readingDistanceCalculator } from './tool/readingDistanceCalculator/entry';
@@ -73,4 +75,4 @@ import { tinnitusReliever } from './tool/tinnitusReliever/entry';
 import { parametricNoiseSynthesizer } from './tool/parametricNoiseSynthesizer/entry';
 import { ubeCalculator } from './tool/ubeCalculator/entry';
 import { waterPurifier } from './tool/waterPurifier/entry';
-export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, meanArterialPressureCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, estimatedBloodVolumeCalculator, anionGapCalculator, targetHeightEstimator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, parametricNoiseSynthesizer, ubeCalculator, waterPurifier];
+export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, meanArterialPressureCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, estimatedBloodVolumeCalculator, anionGapCalculator, creatinineClearanceCockcroftGault, targetHeightEstimator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, parametricNoiseSynthesizer, ubeCalculator, waterPurifier];

package/src/index.ts

@@ -35,6 +35,7 @@ export * from './tool/targetHeightEstimator';
 export * from './tool/correctedReticulocyteIndex';
 export * from './tool/estimatedBloodVolumeCalculator';
 export * from './tool/anionGapCalculator';
+export * from './tool/creatinineClearanceCockcroftGault';
 
 export { healthCategory } from './category';
 export const healthCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/tests/locale_completeness.test.ts

@@ -36,6 +36,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(37);
+    expect(ALL_TOOLS.length).toBe(38);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { healthCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 37 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(37);
+    it('should have 38 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(38);
     });
 
     it('healthCategory should be defined', () => {

package/src/tool/creatinineClearanceCockcroftGault/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { creatinineClearanceCockcroftGault } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await creatinineClearanceCockcroftGault.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/creatinineClearanceCockcroftGault/bibliography.ts

@@ -0,0 +1,28 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Cockcroft DW, Gault MH. Prediction of creatinine clearance from serum creatinine. Nephron. 1976.',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/1244564/',
+  },
+  {
+    name: 'Spinler SA, et al. Systematic evaluation of creatinine clearance in obese patients. Annals of Pharmacotherapy. 1998.',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/9659710/',
+  },
+  {
+    name: 'Devine BJ. Gentamicin therapy. Drug Intelligence and Clinical Pharmacy. 1974.',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/4840434/',
+  },
+  {
+    name: 'National Kidney Foundation: Estimated Glomerular Filtration Rate (eGFR)',
+    url: 'https://www.kidney.org/kidney-topics/estimated-glomerular-filtration-rate-egfr',
+  },
+  {
+    name: 'KDIGO 2024 Clinical Practice Guideline for the Evaluation and Management of Chronic Kidney Disease',
+    url: 'https://kdigo.org/guidelines/ckd-evaluation-and-management/',
+  },
+  {
+    name: 'Wikipedia: Cockcroft-Gault equation',
+    url: 'https://en.wikipedia.org/wiki/Creatinine_clearance#Cockcroft-Gault_formula',
+  },
+];

package/src/tool/creatinineClearanceCockcroftGault/client.ts

@@ -0,0 +1,149 @@
+type Sex = 'male' | 'female';
+type WeightMode = 'actual' | 'ideal' | 'adjusted';
+type UnitSystem = 'metric' | 'imperial';
+type CreatinineUnit = 'mg/dL' | 'umol/L';
+type Stage = 'normal' | 'mild' | 'moderate' | 'severe' | 'failure';
+type Store = Partial<Record<'sex' | 'weightMode' | 'unitSystem' | 'creatinineUnit' | 'age' | 'weight' | 'heightCm' | 'heightFt' | 'heightIn' | 'creatinine', string>>;
+interface Ctx {
+  root: Element; ui: Record<string, string>; sex: Sex; weightMode: WeightMode; unitSystem: UnitSystem; creatinineUnit: CreatinineUnit;
+  age: HTMLInputElement; ageRange: HTMLInputElement; weight: HTMLInputElement; weightRange: HTMLInputElement;
+  heightCm: HTMLInputElement; heightFt: HTMLInputElement; heightIn: HTMLInputElement; heightRange: HTMLInputElement;
+  weightUnitLabel: HTMLElement; heightUnitLabel: HTMLElement; heightPair: HTMLElement; creatinine: HTMLInputElement; creatinineRange: HTMLInputElement;
+}
+const key = 'health:creatinine-clearance-cockcroft-gault:v1';
+const round = (value: number) => Math.round(value * 10) / 10;
+const kgToLb = (value: number) => value * 2.2046226218;
+const lbToKg = (value: number) => value / 2.2046226218;
+const mgToUmol = (value: number) => value * 88.4;
+const umolToMg = (value: number) => value / 88.4;
+const num = (input: HTMLInputElement) => Math.max(0, parseFloat(input.value) || 0);
+function qs<T extends HTMLElement>(root: Element, selector: string): T {
+  const el = root.querySelector<T>(selector);
+  if (!el) throw new Error(`Missing ${selector}`);
+  return el;
+}
+function press(root: Element, selector: string, active: HTMLButtonElement, className: string) {
+  root.querySelectorAll<HTMLButtonElement>(selector).forEach((button) => button.classList.toggle(className, button === active));
+}
+const heightCm = (ctx: Ctx) => (ctx.unitSystem === 'imperial' ? (num(ctx.heightFt) * 12 + num(ctx.heightIn)) * 2.54 : num(ctx.heightCm));
+const actualKg = (ctx: Ctx) => (ctx.unitSystem === 'imperial' ? lbToKg(num(ctx.weight)) : num(ctx.weight));
+const creatinineMgDl = (ctx: Ctx) => (ctx.creatinineUnit === 'umol/L' ? umolToMg(num(ctx.creatinine)) : num(ctx.creatinine));
+const ibw = (sex: Sex, cm: number) => round((sex === 'male' ? 50 : 45.5) + 2.3 * Math.max(0, cm / 2.54 - 60));
+const clearance = (sex: Sex, age: number, weightKg: number, scr: number) => round((((140 - age) * weightKg) / (72 * Math.max(0.1, scr))) * (sex === 'female' ? 0.85 : 1));
+function stage(value: number): Stage {
+  if (value >= 90) return 'normal';
+  if (value >= 60) return 'mild';
+  if (value >= 30) return 'moderate';
+  if (value >= 15) return 'severe';
+  return 'failure';
+}
+function marker(value: number) {
+  if (value >= 90) return Math.min(97, 72 + ((Math.min(value, 180) - 90) / 90) * 25);
+  if (value < 15) return Math.max(2, (value / 15) * 12);
+  if (value < 30) return 12 + ((value - 15) / 15) * 12;
+  if (value < 60) return 24 + ((value - 30) / 30) * 24;
+  return 48 + ((value - 60) / 30) * 24;
+}
+function clearText(value: number) {
+  if (value >= 10000) return `${Math.round(value / 100) / 10}k`;
+  if (value >= 1000) return String(Math.round(value));
+  return String(value);
+}
+function sizeClass(text: string) {
+  if (text.length >= 5) return 'cgx__value-number--xs';
+  if (text.length >= 4) return 'cgx__value-number--sm';
+  return '';
+}
+function weightText(ctx: Ctx, kg: number) {
+  return ctx.unitSystem === 'imperial' ? `${round(kgToLb(kg))} ${ctx.ui.lbUnit} (${round(kg)} ${ctx.ui.kgUnit})` : `${round(kg)} ${ctx.ui.kgUnit}`;
+}
+function calcWeight(mode: WeightMode, actual: number, ideal: number, adjusted: number) {
+  if (mode === 'ideal') return ideal;
+  if (mode === 'adjusted') return adjusted;
+  return actual;
+}
+function syncRanges(ctx: Ctx) {
+  ctx.ageRange.value = String(Math.min(100, Math.max(18, num(ctx.age))));
+  ctx.weightRange.value = String(Math.min(180, Math.max(35, actualKg(ctx))));
+  ctx.heightRange.value = String(Math.min(215, Math.max(135, heightCm(ctx))));
+  ctx.creatinineRange.value = String(Math.min(6, Math.max(0.3, creatinineMgDl(ctx))));
+}
+function setUnitSystem(ctx: Ctx, next: UnitSystem) {
+  if (next === ctx.unitSystem) return;
+  const weightKg = actualKg(ctx), cm = heightCm(ctx), inches = cm / 2.54;
+  ctx.unitSystem = next; ctx.weight.value = String(round(next === 'imperial' ? kgToLb(weightKg) : weightKg));
+  ctx.heightCm.value = String(round(cm)); ctx.heightFt.value = String(Math.floor(inches / 12)); ctx.heightIn.value = String(round(inches % 12));
+  applyUnits(ctx);
+}
+function applyUnits(ctx: Ctx) {
+  ctx.heightCm.hidden = ctx.unitSystem === 'imperial'; ctx.heightPair.hidden = ctx.unitSystem !== 'imperial';
+  ctx.weightUnitLabel.textContent = ctx.unitSystem === 'imperial' ? ctx.ui.lbUnit : ctx.ui.kgUnit;
+  ctx.heightUnitLabel.textContent = ctx.unitSystem === 'imperial' ? ctx.ui.ftInUnit : ctx.ui.cmUnit;
+}
+function save(ctx: Ctx) {
+  try {
+    const state = { sex: ctx.sex, weightMode: ctx.weightMode, unitSystem: ctx.unitSystem, creatinineUnit: ctx.creatinineUnit, age: ctx.age.value, weight: ctx.weight.value, heightCm: ctx.heightCm.value, heightFt: ctx.heightFt.value, heightIn: ctx.heightIn.value, creatinine: ctx.creatinine.value };
+    window.localStorage.setItem(key, JSON.stringify(state));
+  } catch {}
+}
+function applyStore(ctx: Ctx, state: Store) {
+  if (['male', 'female'].includes(String(state.sex))) ctx.sex = state.sex as Sex;
+  if (['actual', 'ideal', 'adjusted'].includes(String(state.weightMode))) ctx.weightMode = state.weightMode as WeightMode;
+  if (['metric', 'imperial'].includes(String(state.unitSystem))) ctx.unitSystem = state.unitSystem as UnitSystem;
+  if (['mg/dL', 'umol/L'].includes(String(state.creatinineUnit))) ctx.creatinineUnit = state.creatinineUnit as CreatinineUnit;
+  (['age', 'weight', 'heightCm', 'heightFt', 'heightIn', 'creatinine'] as const).forEach((name) => { if (typeof state[name] === 'string') ctx[name].value = state[name]; });
+}
+function restore(ctx: Ctx) {
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return;
+    applyStore(ctx, JSON.parse(raw) as Store); applyUnits(ctx);
+    active(ctx, { selector: '[data-sex]', dataKey: 'sex', value: ctx.sex, className: 'is-on' }); active(ctx, { selector: '[data-weight-mode]', dataKey: 'weightMode', value: ctx.weightMode, className: 'is-picked' });
+    active(ctx, { selector: '[data-unit-system]', dataKey: 'unitSystem', value: ctx.unitSystem, className: 'is-on' }); active(ctx, { selector: '[data-creatinine-unit]', dataKey: 'creatinineUnit', value: ctx.creatinineUnit, className: 'is-on' });
+  } catch {}
+}
+function active(ctx: Ctx, config: { selector: string; dataKey: string; value: string; className: string }) {
+  ctx.root.querySelectorAll<HTMLButtonElement>(config.selector).forEach((button) => button.classList.toggle(config.className, button.dataset[config.dataKey] === config.value));
+}
+function renderGauge(ctx: Ctx, value: number, valueStage: Stage) {
+  const text = clearText(value), el = qs<HTMLElement>(ctx.root, '#cgx-clearance'), valueSize = sizeClass(text);
+  el.textContent = text; el.classList.remove('cgx__value-number--sm', 'cgx__value-number--xs'); if (valueSize) el.classList.add(valueSize);
+  qs<HTMLElement>(ctx.root, '#cgx-marker').style.left = `${marker(value)}%`; qs<HTMLElement>(ctx.root, '#cgx-stage-pill').textContent = ctx.ui[`${valueStage}Label`];
+  qs<HTMLElement>(ctx.root, '#cgx-stage-body').textContent = ctx.ui[`${valueStage}Body`]; qs<HTMLElement>(ctx.root, '.cgx__gauge').dataset.stage = valueStage;
+}
+function renderWeights(ctx: Ctx, values: { actual: number; ideal: number; adjusted: number; age: number; scr: number }) {
+  const { actual, ideal, adjusted, age, scr } = values;
+  qs<HTMLElement>(ctx.root, '#cgx-actual-weight').textContent = weightText(ctx, actual); qs<HTMLElement>(ctx.root, '#cgx-ibw').textContent = weightText(ctx, ideal); qs<HTMLElement>(ctx.root, '#cgx-abw').textContent = weightText(ctx, adjusted);
+  qs<HTMLElement>(ctx.root, '#cgx-actual-crcl').textContent = `${clearance(ctx.sex, age, actual, scr)} ${ctx.ui.clearanceUnit}`; qs<HTMLElement>(ctx.root, '#cgx-ideal-crcl').textContent = `${clearance(ctx.sex, age, ideal, scr)} ${ctx.ui.clearanceUnit}`;
+  qs<HTMLElement>(ctx.root, '#cgx-adjusted-crcl').textContent = `${clearance(ctx.sex, age, adjusted, scr)} ${ctx.ui.clearanceUnit}`;
+}
+function render(ctx: Ctx) {
+  const cm = heightCm(ctx), actual = actualKg(ctx), ideal = ibw(ctx.sex, cm), adjusted = round(ideal + 0.4 * (actual - ideal)), scr = Math.max(0.1, creatinineMgDl(ctx)), age = num(ctx.age);
+  const selectedWeight = calcWeight(ctx.weightMode, actual, ideal, adjusted), value = clearance(ctx.sex, age, selectedWeight, scr), bmi = round(actual / ((cm / 100) ** 2));
+  syncRanges(ctx); renderGauge(ctx, value, stage(value)); qs<HTMLElement>(ctx.root, '#cgx-bmi').textContent = String(bmi); qs<HTMLElement>(ctx.root, '#cgx-bmi-note').textContent = bmi > 30 ? ctx.ui.obesityNotice : ctx.ui.bmiNote;
+  renderWeights(ctx, { actual, ideal, adjusted, age, scr }); qs<HTMLElement>(ctx.root, '#cgx-calc-weight').textContent = weightText(ctx, selectedWeight); qs<HTMLElement>(ctx.root, '#cgx-selected-weight').textContent = ctx.ui[`${ctx.weightMode}WeightLabel`];
+  qs<HTMLElement>(ctx.root, '#cgx-formula-line').textContent = ctx.sex === 'female' ? ctx.ui.formulaFemale : ctx.ui.formulaMale; qs<HTMLElement>(ctx.root, '#cgx-creatinine-converted').textContent = ctx.creatinineUnit === 'mg/dL' ? `${round(mgToUmol(num(ctx.creatinine)))} ${ctx.ui.umolLUnit}` : `${round(scr)} ${ctx.ui.mgDlUnit}`;
+  qs<HTMLElement>(ctx.root, '#cgx-adjustment-note').textContent = bmi > 30 ? ctx.ui.obesityFlag : ctx.ui.noObesityFlag; save(ctx);
+}
+function createCtx(root: Element): Ctx {
+  return { root, ui: JSON.parse((root as HTMLElement).dataset.ui || '{}') as Record<string, string>, sex: 'male', weightMode: 'actual', unitSystem: 'metric', creatinineUnit: 'mg/dL', age: qs(root, '#cgx-age'), ageRange: qs(root, '#cgx-age-range'), weight: qs(root, '#cgx-weight'), weightRange: qs(root, '#cgx-weight-range'), heightCm: qs(root, '#cgx-height-cm'), heightFt: qs(root, '#cgx-height-ft'), heightIn: qs(root, '#cgx-height-in'), heightRange: qs(root, '#cgx-height-range'), weightUnitLabel: qs(root, '#cgx-weight-unit'), heightUnitLabel: qs(root, '#cgx-height-unit'), heightPair: qs(root, '#cgx-height-pair'), creatinine: qs(root, '#cgx-creatinine'), creatinineRange: qs(root, '#cgx-creatinine-range') };
+}
+function bindButtons(ctx: Ctx) {
+  ctx.root.querySelectorAll<HTMLButtonElement>('[data-sex]').forEach((button) => button.addEventListener('click', () => { ctx.sex = button.dataset.sex as Sex; press(ctx.root, '[data-sex]', button, 'is-on'); render(ctx); }));
+  ctx.root.querySelectorAll<HTMLButtonElement>('[data-weight-mode]').forEach((button) => button.addEventListener('click', () => { ctx.weightMode = button.dataset.weightMode as WeightMode; press(ctx.root, '[data-weight-mode]', button, 'is-picked'); render(ctx); }));
+  ctx.root.querySelectorAll<HTMLButtonElement>('[data-unit-system]').forEach((button) => button.addEventListener('click', () => { setUnitSystem(ctx, button.dataset.unitSystem as UnitSystem); press(ctx.root, '[data-unit-system]', button, 'is-on'); render(ctx); }));
+  ctx.root.querySelectorAll<HTMLButtonElement>('[data-creatinine-unit]').forEach((button) => button.addEventListener('click', () => { const next = button.dataset.creatinineUnit as CreatinineUnit; if (next !== ctx.creatinineUnit) ctx.creatinine.value = String(round(next === 'umol/L' ? mgToUmol(num(ctx.creatinine)) : umolToMg(num(ctx.creatinine)))); ctx.creatinineUnit = next; press(ctx.root, '[data-creatinine-unit]', button, 'is-on'); render(ctx); }));
+}
+function bindRanges(ctx: Ctx) {
+  ctx.ageRange.addEventListener('input', () => { ctx.age.value = ctx.ageRange.value; render(ctx); });
+  ctx.weightRange.addEventListener('input', () => { const kg = num(ctx.weightRange); ctx.weight.value = String(round(ctx.unitSystem === 'imperial' ? kgToLb(kg) : kg)); render(ctx); });
+  ctx.heightRange.addEventListener('input', () => { const cm = num(ctx.heightRange), inches = cm / 2.54; ctx.heightCm.value = String(round(cm)); ctx.heightFt.value = String(Math.floor(inches / 12)); ctx.heightIn.value = String(round(inches % 12)); render(ctx); });
+  ctx.creatinineRange.addEventListener('input', () => { const scr = num(ctx.creatinineRange); ctx.creatinine.value = String(round(ctx.creatinineUnit === 'umol/L' ? mgToUmol(scr) : scr)); render(ctx); });
+}
+function init(root: Element) {
+  const ctx = createCtx(root);
+  bindButtons(ctx); bindRanges(ctx);
+  [ctx.age, ctx.weight, ctx.heightCm, ctx.heightFt, ctx.heightIn, ctx.creatinine].forEach((input) => input.addEventListener('input', () => render(ctx)));
+  restore(ctx); render(ctx);
+}
+document.querySelectorAll('.cgx').forEach(init);

package/src/tool/creatinineClearanceCockcroftGault/component.astro

@@ -0,0 +1,147 @@
+---
+import './creatinine-clearance-cockcroft-gault.css';
+import type { CreatinineClearanceCockcroftGaultUI } from './ui';
+
+interface Props {
+  locale?: string;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui || {}) as CreatinineClearanceCockcroftGaultUI;
+---
+
+<div class="cgx" data-ui={JSON.stringify(t)}>
+  <section class="cgx__cockpit" aria-live="polite">
+    <div class="cgx__gauge" data-stage="mild" aria-label={t.clearanceLabel}>
+      <div class="cgx__halo">
+        <div class="cgx__value">
+          <span>{t.clearanceLabel}</span>
+          <strong id="cgx-clearance">78.2</strong>
+          <small>{t.clearanceUnit}</small>
+        </div>
+      </div>
+      <div class="cgx__stage-pill" id="cgx-stage-pill">{t.mildLabel}</div>
+    </div>
+
+    <div class="cgx__runway" aria-label={t.renalBarLabel}>
+      <div class="cgx__rail">
+        <span class="cgx__zone cgx__zone--failure">{t.failureLabel}<b>&lt;15</b></span>
+        <span class="cgx__zone cgx__zone--severe">{t.severeLabel}<b>15-29</b></span>
+        <span class="cgx__zone cgx__zone--moderate">{t.moderateLabel}<b>30-59</b></span>
+        <span class="cgx__zone cgx__zone--mild">{t.mildLabel}<b>60-89</b></span>
+        <span class="cgx__zone cgx__zone--normal">{t.normalLabel}<b>90-180+</b></span>
+        <i id="cgx-marker"></i>
+      </div>
+      <p id="cgx-stage-body">{t.mildBody}</p>
+    </div>
+  </section>
+
+  <section class="cgx__lab">
+    <div class="cgx__settings">
+      <div class="cgx__system" role="group" aria-label={t.unitSystemLabel}>
+        <button type="button" class="is-on" data-unit-system="metric">{t.metricLabel}</button>
+        <button type="button" data-unit-system="imperial">{t.imperialLabel}</button>
+      </div>
+      <div class="cgx__toggle" role="group" aria-label={t.sexLabel}>
+        <button type="button" class="is-on" data-sex="male">{t.maleLabel}</button>
+        <button type="button" data-sex="female">{t.femaleLabel}</button>
+      </div>
+    </div>
+
+    <div class="cgx__identity">
+      <div class="cgx__metric">
+        <span>{t.bmiLabel}</span>
+        <b id="cgx-bmi">26.8</b>
+        <small id="cgx-bmi-note">{t.bmiNote}</small>
+      </div>
+    </div>
+
+    <div class="cgx__inputs">
+      <label class="cgx__channel">
+        <span>{t.ageLabel}</span>
+        <input id="cgx-age-range" type="range" min="18" max="100" step="1" value="65" />
+        <div>
+          <input id="cgx-age" type="number" min="18" max="120" step="1" value="65" />
+          <small>{t.yearsUnit}</small>
+        </div>
+      </label>
+
+      <label class="cgx__channel">
+        <span>{t.weightLabel}</span>
+        <input id="cgx-weight-range" type="range" min="35" max="180" step="0.5" value="82" />
+        <div>
+          <input id="cgx-weight" type="number" min="1" step="0.1" value="82" />
+          <small id="cgx-weight-unit">{t.kgUnit}</small>
+        </div>
+      </label>
+
+      <label class="cgx__channel">
+        <span>{t.heightLabel}</span>
+        <input id="cgx-height-range" type="range" min="135" max="215" step="0.5" value="175" />
+        <div>
+          <input id="cgx-height-cm" type="number" min="80" step="0.1" value="175" />
+          <span class="cgx__height-pair" id="cgx-height-pair" hidden>
+            <input id="cgx-height-ft" type="number" min="2" step="1" value="5" aria-label={t.feetLabel} />
+            <input id="cgx-height-in" type="number" min="0" max="11.9" step="0.1" value="9" aria-label={t.inchesLabel} />
+          </span>
+          <small id="cgx-height-unit">{t.cmUnit}</small>
+        </div>
+      </label>
+
+      <label class="cgx__channel cgx__channel--creatinine">
+        <span>{t.creatinineLabel}</span>
+        <input id="cgx-creatinine-range" type="range" min="0.3" max="6" step="0.01" value="1.1" />
+        <div>
+          <input id="cgx-creatinine" type="number" min="0.1" step="0.01" value="1.1" />
+          <div class="cgx__mini-units" role="group" aria-label={t.creatinineLabel}>
+            <button type="button" class="is-on" data-creatinine-unit="mg/dL">{t.mgDlUnit}</button>
+            <button type="button" data-creatinine-unit="umol/L">{t.umolLUnit}</button>
+          </div>
+        </div>
+      </label>
+    </div>
+  </section>
+
+  <section class="cgx__weights" aria-label={t.weightModeLabel}>
+    <button type="button" class="cgx__weight-card is-picked" data-weight-mode="actual">
+      <span>{t.actualWeightLabel}</span>
+      <strong id="cgx-actual-weight">82.0 {t.kgUnit}</strong>
+      <em id="cgx-actual-crcl">78.2 {t.clearanceUnit}</em>
+      <small>{t.actualWeightHint}</small>
+    </button>
+    <button type="button" class="cgx__weight-card" data-weight-mode="ideal">
+      <span>{t.idealWeightLabel}</span>
+      <strong id="cgx-ibw">70.5 {t.kgUnit}</strong>
+      <em id="cgx-ideal-crcl">67.2 {t.clearanceUnit}</em>
+      <small>{t.idealWeightHint}</small>
+    </button>
+    <button type="button" class="cgx__weight-card" data-weight-mode="adjusted">
+      <span>{t.adjustedWeightLabel}</span>
+      <strong id="cgx-abw">75.1 {t.kgUnit}</strong>
+      <em id="cgx-adjusted-crcl">71.6 {t.clearanceUnit}</em>
+      <small>{t.adjustedWeightHint}</small>
+    </button>
+  </section>
+
+  <section class="cgx__readout">
+    <div class="cgx__formula">
+      <span>{t.formulaLabel}</span>
+      <code id="cgx-formula-line">{t.formulaMale}</code>
+    </div>
+    <div class="cgx__tiles">
+      <div><span>{t.calculationWeightLabel}</span><b id="cgx-calc-weight">82.0 {t.kgUnit}</b></div>
+      <div><span>{t.creatinineConvertedLabel}</span><b id="cgx-creatinine-converted">97.2 {t.umolLUnit}</b></div>
+      <div><span>{t.selectedWeightLabel}</span><b id="cgx-selected-weight">{t.actualWeightLabel}</b></div>
+      <div><span>{t.obesityCheckLabel}</span><b id="cgx-adjustment-note">{t.noObesityFlag}</b></div>
+    </div>
+  </section>
+
+  <section class="cgx__safety" role="alert">
+    <b>{t.warningTitle}</b>
+    <span>{t.warningBody}</span>
+  </section>
+</div>
+
+<script>
+  import './client';
+</script>