@jjlmoya/utils-forensic-science 1.1.0

package/src/tool/forensic-stature-estimator/logic.ts

@@ -0,0 +1,119 @@
+export interface StatureInput {
+  bone: 'femur' | 'tibia' | 'humerus' | 'fibula' | 'radius' | 'ulna';
+  length: number;
+  sex: 'male' | 'female';
+  ancestry: 'white' | 'black' | 'asian';
+  age: number;
+}
+
+export interface StatureResult {
+  stature: number;
+  see: number;
+  minStature: number;
+  maxStature: number;
+  formulaText: string;
+  coef: {
+    multiplier: number;
+    constant: number;
+    ageLoss: number;
+    see: number;
+  };
+  fallbackWarning: boolean;
+}
+
+interface RegressionCoef {
+  multiplier: number;
+  constant: number;
+  see: number;
+}
+
+const equations: Record<string, Record<string, RegressionCoef>> = {
+  male: {
+    white_femur: { multiplier: 2.32, constant: 65.53, see: 3.94 },
+    white_tibia: { multiplier: 2.42, constant: 81.93, see: 4.00 },
+    white_humerus: { multiplier: 2.89, constant: 78.10, see: 4.57 },
+    white_fibula: { multiplier: 2.60, constant: 75.50, see: 3.86 },
+    white_radius: { multiplier: 3.79, constant: 79.42, see: 4.66 },
+    white_ulna: { multiplier: 3.76, constant: 75.55, see: 4.72 },
+    black_femur: { multiplier: 2.10, constant: 72.22, see: 3.91 },
+    black_tibia: { multiplier: 2.19, constant: 85.36, see: 3.96 },
+    black_humerus: { multiplier: 2.88, constant: 75.48, see: 4.23 },
+    black_fibula: { multiplier: 2.34, constant: 80.07, see: 4.02 },
+    black_radius: { multiplier: 3.32, constant: 85.43, see: 4.57 },
+    black_ulna: { multiplier: 3.20, constant: 82.77, see: 4.74 },
+    asian_femur: { multiplier: 2.15, constant: 72.57, see: 3.80 },
+    asian_tibia: { multiplier: 2.39, constant: 81.45, see: 3.27 },
+    asian_humerus: { multiplier: 2.68, constant: 83.19, see: 4.25 },
+    asian_fibula: { multiplier: 2.40, constant: 80.56, see: 3.24 },
+    asian_radius: { multiplier: 3.54, constant: 82.00, see: 4.60 },
+    asian_ulna: { multiplier: 3.48, constant: 77.45, see: 4.66 }
+  },
+  female: {
+    white_femur: { multiplier: 2.47, constant: 54.10, see: 3.72 },
+    white_tibia: { multiplier: 2.90, constant: 61.53, see: 3.66 },
+    white_humerus: { multiplier: 3.36, constant: 57.97, see: 4.45 },
+    white_fibula: { multiplier: 2.93, constant: 59.61, see: 3.57 },
+    white_radius: { multiplier: 4.74, constant: 54.93, see: 4.45 },
+    white_ulna: { multiplier: 4.27, constant: 57.76, see: 4.30 },
+    black_femur: { multiplier: 2.28, constant: 59.76, see: 3.41 },
+    black_tibia: { multiplier: 2.45, constant: 72.65, see: 3.70 },
+    black_humerus: { multiplier: 3.08, constant: 64.67, see: 4.25 },
+    black_fibula: { multiplier: 2.49, constant: 70.90, see: 3.80 },
+    black_radius: { multiplier: 3.67, constant: 71.79, see: 4.59 },
+    black_ulna: { multiplier: 3.31, constant: 75.38, see: 4.83 }
+  }
+};
+
+function getCoef(sex: string, ancestry: string, bone: string) {
+  const key = `${ancestry}_${bone}`;
+  const coefMap = equations[sex];
+  return coefMap ? coefMap[key] : null;
+}
+
+function computeStature(multiplier: number, constant: number, length: number, age: number) {
+  const raw = multiplier * length + constant;
+  const ageLoss = age > 30 ? 0.06 * (age - 30) : 0;
+  return {
+    val: raw - ageLoss,
+    ageLoss
+  };
+}
+
+function defaultResult(): StatureResult {
+  return {
+    stature: 0,
+    see: 0,
+    minStature: 0,
+    maxStature: 0,
+    formulaText: '',
+    coef: { multiplier: 0, constant: 0, ageLoss: 0, see: 0 },
+    fallbackWarning: false
+  };
+}
+
+export function estimateStature(input: StatureInput): StatureResult {
+  const isFallback = input.sex === 'female' && input.ancestry === 'asian';
+  const ancestry = isFallback ? 'white' : input.ancestry;
+  const coef = getCoef(input.sex, ancestry, input.bone);
+
+  if (!coef) return defaultResult();
+
+  const { val, ageLoss } = computeStature(coef.multiplier, coef.constant, input.length, input.age);
+  const ageText = input.age > 30 ? ` - 0.06 * (${input.age} - 30)` : '';
+  const formulaText = `Stature = ${coef.multiplier} * ${input.length} + ${coef.constant}${ageText} ± ${coef.see}`;
+
+  return {
+    stature: Math.round(val * 100) / 100,
+    see: Math.round(coef.see * 100) / 100,
+    minStature: Math.round((val - coef.see) * 100) / 100,
+    maxStature: Math.round((val + coef.see) * 100) / 100,
+    formulaText,
+    coef: {
+      multiplier: coef.multiplier,
+      constant: coef.constant,
+      ageLoss: Math.round(ageLoss * 100) / 100,
+      see: coef.see
+    },
+    fallbackWarning: isFallback
+  };
+}

package/src/tool/forensic-stature-estimator/script.ts

@@ -0,0 +1,288 @@
+import { estimateStature } from './logic';
+import type { StatureInput, StatureResult } from './logic';
+import { cmToFtIn, convertValueForUnit, applyLengthLimits, getLimitsForUnit } from './helpers';
+import { setupCustomDropdown, closeAllDropdowns, restoreValue, restoreSelectable } from './dom-utils';
+
+const uiDataEl = document.getElementById('stature-ui-data');
+const ui = uiDataEl ? JSON.parse(uiDataEl.textContent || '{}') : {};
+
+const boneInput = document.getElementById('input-bone') as HTMLInputElement | null,
+  ancestryInput = document.getElementById('input-ancestry') as HTMLInputElement | null,
+  lengthInputVal = document.getElementById('input-length-val') as HTMLInputElement | null,
+  lengthInputSlider = document.getElementById('input-length') as HTMLInputElement | null,
+  ageInput = document.getElementById('input-age') as HTMLInputElement | null,
+  caliper = document.getElementById('caliper-slider'),
+  fallbackBox = document.getElementById('fallback-alert'),
+  lengthLabelText = document.getElementById('length-label-text'),
+  boardTitle = document.querySelector('.osteometric-board-title'),
+  rulerTicks = document.querySelector('.ruler-ticks');
+
+const partBone = document.getElementById('part-bone'),
+  partConst = document.getElementById('part-const'),
+  operatorAgeSign = document.getElementById('operator-age-sign'),
+  containerPartAge = document.getElementById('container-part-age'),
+  partAge = document.getElementById('part-age'),
+  partError = document.getElementById('part-error');
+
+const statureCmValue = document.getElementById('stature-cm-value'),
+  statureInchValue = document.getElementById('stature-inch-value'),
+  seeValue = document.getElementById('see-value'),
+  rangeValue = document.getElementById('range-value');
+
+const STORAGE_KEY = 'forensic-stature-estimator-input';
+let currentUnit: 'metric' | 'imperial' = 'metric';
+
+document.addEventListener('click', closeAllDropdowns);
+
+const getSex = () => (document.querySelector('input[name="sex"]:checked') as HTMLInputElement | null)?.value as 'male' | 'female' || 'male';
+const getSelectedUnit = () => (document.querySelector('input[name="system-unit"]:checked') as HTMLInputElement | null)?.value as 'metric' | 'imperial' || 'metric';
+
+function getBoneConfig(): { min: number; max: number; default: number } {
+  if (!boneInput) return { min: 20, max: 60, default: 40 };
+  const option = document.querySelector(`#dropdown-bone .custom-select-option[data-value="${boneInput.value}"]`);
+  if (!option) return { min: 20, max: 60, default: 40 };
+  return {
+    min: parseFloat(option.getAttribute('data-min') || '20'),
+    max: parseFloat(option.getAttribute('data-max') || '60'),
+    default: parseFloat(option.getAttribute('data-default') || '40')
+  };
+}
+
+function updateBoneVisuals(selectedBone: string, lengthCm: number) {
+  const shapes = document.querySelectorAll('.bone-shape');
+  shapes.forEach(shape => shape.classList.add('hidden'));
+
+  const activeShape = document.getElementById(`bone-shape-${selectedBone}`);
+  if (activeShape) activeShape.classList.remove('hidden');
+
+  const boneStage = document.querySelector('.bone-stage') as HTMLElement | null;
+  if (caliper && boneStage) {
+    const ratio = Math.max(0, Math.min(1, lengthCm / 60));
+    const positionPct = ratio * 80;
+    caliper.style.left = `calc(${10 + positionPct}%)`;
+    boneStage.style.width = `calc(${positionPct}% - 12px)`;
+  }
+}
+
+function updateRulerLabels(unit: 'metric' | 'imperial') {
+  if (lengthLabelText) {
+    lengthLabelText.textContent = `${ui.lengthLabel} (${unit === 'imperial' ? ui.unitsInches : ui.unitsCm})`;
+  }
+  if (boardTitle) {
+    boardTitle.textContent = unit === 'imperial' ? ui.rulerLabelImperial : ui.rulerLabelMetric;
+  }
+  if (rulerTicks) {
+    rulerTicks.classList.toggle('unit-imperial', unit === 'imperial');
+  }
+}
+
+function updateLengthMinMax(convertValue: boolean = false) {
+  if (!lengthInputVal || !lengthInputSlider) return;
+  const config = getBoneConfig();
+  const unit = getSelectedUnit();
+  const limits = getLimitsForUnit(unit, config);
+
+  lengthInputSlider.min = limits.formattedMin;
+  lengthInputSlider.max = limits.formattedMax;
+  lengthInputSlider.step = limits.step.toString();
+  lengthInputVal.step = limits.step.toString();
+
+  updateRulerLabels(unit);
+
+  let val = parseFloat(lengthInputVal.value);
+  if (convertValue) {
+    val = convertValueForUnit(val, unit);
+  }
+
+  val = applyLengthLimits(val, config, unit);
+  lengthInputVal.value = val.toFixed(unit === 'imperial' ? 2 : 1);
+  lengthInputSlider.value = val.toString();
+}
+
+function updateMetricResults(result: StatureResult) {
+  if (statureCmValue) {
+    statureCmValue.textContent = result.stature.toFixed(2);
+    const cmLabel = document.querySelector('.stature-unit');
+    if (cmLabel) cmLabel.textContent = ui.unitsCm;
+  }
+  if (statureInchValue) statureInchValue.textContent = cmToFtIn(result.stature);
+  if (seeValue) seeValue.textContent = `± ${result.see.toFixed(2)} ${ui.unitsCm}`;
+  if (rangeValue) {
+    rangeValue.textContent = `${result.minStature.toFixed(2)} - ${result.maxStature.toFixed(2)} ${ui.unitsCm}`;
+  }
+}
+
+function updateImperialResults(result: StatureResult) {
+  const seeInches = result.see / 2.54;
+  const minInches = result.minStature / 2.54;
+  const maxInches = result.maxStature / 2.54;
+
+  if (statureCmValue) {
+    statureCmValue.textContent = cmToFtIn(result.stature);
+    const cmLabel = document.querySelector('.stature-unit');
+    if (cmLabel) cmLabel.textContent = '';
+  }
+  if (statureInchValue) statureInchValue.textContent = `${result.stature.toFixed(2)} ${ui.unitsCm}`;
+  if (seeValue) seeValue.textContent = `± ${seeInches.toFixed(2)} ${ui.unitsInches}`;
+  if (rangeValue) {
+    rangeValue.textContent = `${minInches.toFixed(2)} - ${maxInches.toFixed(2)} ${ui.unitsInches}`;
+  }
+}
+
+function updateAgeVisuals(ageLoss: number, age: number) {
+  if (age > 30) {
+    if (operatorAgeSign) operatorAgeSign.style.display = 'inline-flex';
+    if (containerPartAge) containerPartAge.style.display = 'inline-flex';
+    if (partAge) {
+      if (getSelectedUnit() === 'imperial') {
+        partAge.textContent = `${ageLoss.toFixed(2)} ${ui.unitsCm} = ${(ageLoss / 2.54).toFixed(2)} ${ui.unitsInches}`;
+      } else {
+        partAge.textContent = `0.06 × (${age} - 30) = ${ageLoss.toFixed(2)} ${ui.unitsCm}`;
+      }
+    }
+  } else {
+    if (operatorAgeSign) operatorAgeSign.style.display = 'none';
+    if (containerPartAge) containerPartAge.style.display = 'none';
+  }
+}
+
+function updateFormulaMetric(result: StatureResult, lengthCm: number, age: number) {
+  if (partBone) partBone.textContent = `${result.coef.multiplier} × ${lengthCm.toFixed(1)} ${ui.unitsCm}`;
+  if (partConst) partConst.textContent = `${result.coef.constant} ${ui.unitsCm}`;
+  if (partError) partError.textContent = `${result.coef.see.toFixed(2)} ${ui.unitsCm}`;
+  updateAgeVisuals(result.coef.ageLoss, age);
+}
+
+function updateFormulaImperial(result: StatureResult, lengthCm: number, age: number) {
+  if (partBone) {
+    const valInches = (result.coef.multiplier * lengthCm) / 2.54;
+    partBone.textContent = `${result.coef.multiplier} × ${lengthCm.toFixed(1)} ${ui.unitsCm} = ${valInches.toFixed(2)} ${ui.unitsInches}`;
+  }
+  if (partConst) {
+    partConst.textContent = `${result.coef.constant} ${ui.unitsCm} = ${(result.coef.constant / 2.54).toFixed(2)} ${ui.unitsInches}`;
+  }
+  if (partError) {
+    partError.textContent = `${(result.coef.see / 2.54).toFixed(2)} ${ui.unitsInches}`;
+  }
+  updateAgeVisuals(result.coef.ageLoss, age);
+}
+
+function displayResults(result: StatureResult, lengthCm: number, age: number, unit: 'metric' | 'imperial') {
+  if (unit === 'metric') {
+    updateMetricResults(result);
+    updateFormulaMetric(result, lengthCm, age);
+  } else {
+    updateImperialResults(result);
+    updateFormulaImperial(result, lengthCm, age);
+  }
+  if (fallbackBox) fallbackBox.classList.toggle('hidden', !result.fallbackWarning);
+}
+
+function getInputs() {
+  if (!boneInput || !lengthInputVal || !ancestryInput || !ageInput) return null;
+  return {
+    bone: boneInput.value as StatureInput['bone'],
+    length: parseFloat(lengthInputVal.value) || 0,
+    sex: getSex(),
+    ancestry: ancestryInput.value as StatureInput['ancestry'],
+    age: parseInt(ageInput.value, 10) || 25,
+    unit: getSelectedUnit()
+  };
+}
+
+function update() {
+  const inputs = getInputs();
+  if (!inputs) return;
+
+  const lengthCm = inputs.unit === 'imperial' ? inputs.length * 2.54 : inputs.length;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(inputs));
+  } catch {}
+  updateBoneVisuals(inputs.bone, lengthCm);
+
+  const result = estimateStature({
+    bone: inputs.bone,
+    length: lengthCm,
+    sex: inputs.sex,
+    ancestry: inputs.ancestry,
+    age: inputs.age
+  });
+  displayResults(result, lengthCm, inputs.age, inputs.unit);
+}
+
+function handleBoneChange() {
+  updateLengthMinMax(false);
+  update();
+}
+
+function handleUnitChange() {
+  const prevUnit = currentUnit;
+  currentUnit = getSelectedUnit();
+  if (prevUnit !== currentUnit) {
+    updateLengthMinMax(true);
+    update();
+  }
+}
+
+function handleSliderInput() {
+  if (lengthInputVal && lengthInputSlider) {
+    lengthInputVal.value = lengthInputSlider.value;
+    update();
+  }
+}
+
+function handleNumberInput() {
+  if (lengthInputVal && lengthInputSlider) {
+    const val = parseFloat(lengthInputVal.value);
+    const config = getBoneConfig();
+    const unit = getSelectedUnit();
+    const min = unit === 'imperial' ? config.min / 2.54 : config.min;
+    const max = unit === 'imperial' ? config.max / 2.54 : config.max;
+    if (!isNaN(val) && val >= min && val <= max) {
+      lengthInputSlider.value = val.toString();
+      update();
+    }
+  }
+}
+
+setupCustomDropdown('dropdown-bone', handleBoneChange);
+setupCustomDropdown('dropdown-ancestry', update);
+
+if (lengthInputSlider) lengthInputSlider.addEventListener('input', handleSliderInput);
+if (lengthInputVal) lengthInputVal.addEventListener('change', handleNumberInput);
+if (ageInput) ageInput.addEventListener('input', update);
+
+document.querySelectorAll('input[name="sex"]').forEach(el => el.addEventListener('change', update));
+document.querySelectorAll('input[name="system-unit"]').forEach(el => el.addEventListener('change', handleUnitChange));
+
+function restoreSavedState() {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  if (!saved) {
+    updateLengthMinMax(false);
+    return;
+  }
+  const parsed = JSON.parse(saved);
+  if (parsed.unit) {
+    const el = document.querySelector(`input[name="system-unit"][value="${parsed.unit}"]`) as HTMLInputElement | null;
+    if (el) el.checked = true;
+    currentUnit = parsed.unit;
+  }
+  restoreSelectable(boneInput, parsed.bone, 'dropdown-bone');
+  updateLengthMinMax(false);
+  if (parsed.sex) {
+    const el = document.querySelector(`input[name="sex"][value="${parsed.sex}"]`) as HTMLInputElement | null;
+    if (el) el.checked = true;
+  }
+  restoreSelectable(ancestryInput, parsed.ancestry, 'dropdown-ancestry');
+  restoreValue(ageInput, parsed.age);
+  restoreValue(lengthInputVal, parsed.length);
+  restoreValue(lengthInputSlider, parsed.length);
+}
+
+try {
+  restoreSavedState();
+} catch {
+  updateLengthMinMax(false);
+}
+
+update();

package/src/tool/forensic-stature-estimator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { forensicStatureEstimator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await forensicStatureEstimator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/forensic-tlc-ink-simulator/bibliography.astro

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

package/src/tool/forensic-tlc-ink-simulator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'ASTM E1422 - Standard Guide for Test Methods for Forensic Writing Ink Comparison.',
+    url: 'https://store.astm.org/e1422-98.html',
+  },
+  {
+    name: 'Scientific Working Group for Forensic Document Examination. Standard for Test Methods for Forensic Writing Ink Comparison.',
+    url: 'https://www.swgdoc.org/documents/SWGDOC%20Standard%20for%20Test%20Methods%20for%20Forensic%20Writing%20Ink%20Comparison.pdf',
+  },
+  {
+    name: 'Chemical Erasure in Document Analysis',
+    url: 'https://www.scribd.com/document/939245308/CHAPTER-5-CHEMICAL-ASPECTS-OF-DOCUMENT-EXAMINATION-INK-NAD-PAINTS',
+  },
+];

package/src/tool/forensic-tlc-ink-simulator/component.astro

@@ -0,0 +1,245 @@
+---
+import './forensic-tlc-ink-simulator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+const rulerMarks = (ui.rulerMarks ?? '').split(',');
+---
+
+<section class="tlc-shell" data-tlc-simulator>
+  <div class="tlc-lab">
+    <div class="tlc-stage">
+      <div class="tlc-chamber" aria-label={ui.chamberAria}>
+        <div class="tlc-glass-shine"></div>
+        <div class="tlc-solvent" id="tlc-solvent"></div>
+        <div class="tlc-plate">
+          <div class="tlc-plate-clip"></div>
+          <div class="tlc-solvent-front" id="tlc-front"><span>{ui.solventFront}</span></div>
+          <div class="tlc-origin"><span>{ui.originLine}</span></div>
+          <div class="tlc-spot"></div>
+          <div class="tlc-lane" id="tlc-lane"></div>
+        </div>
+        <div class="tlc-ruler" aria-label={ui.rulerAria}>
+          {rulerMarks.map((mark) => <span>{mark}</span>)}
+        </div>
+      </div>
+
+      <div class="tlc-table-wrap">
+        <table class="tlc-table">
+          <thead>
+            <tr>
+              <th>{ui.pigment}</th>
+              <th>{ui.distance}</th>
+              <th>{ui.rfValue}</th>
+            </tr>
+          </thead>
+          <tbody id="tlc-table-body"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <aside class="tlc-panel">
+      <div class="tlc-unit-toggle" role="group" aria-label={ui.units}>
+        <button type="button" data-tlc-unit="metric" data-active="true">{ui.metric}</button>
+        <button type="button" data-tlc-unit="imperial" data-active="false">{ui.imperial}</button>
+      </div>
+
+      <label class="tlc-field">
+        <span>{ui.inkSample}</span>
+        <select id="tlc-ink">
+          <option value="ransomNote">{ui.ransomNote}</option>
+          <option value="bluePen">{ui.bluePen}</option>
+          <option value="blackPen">{ui.blackPen}</option>
+          <option value="gelPen">{ui.gelPen}</option>
+        </select>
+      </label>
+
+      <label class="tlc-field">
+        <span>{ui.solventSystem}</span>
+        <select id="tlc-solvent-select">
+          <option value="ethanolWater">{ui.ethanolWater}</option>
+          <option value="butanolAcetic">{ui.butanolAcetic}</option>
+          <option value="isopropanolAmmonia">{ui.isopropanolAmmonia}</option>
+        </select>
+      </label>
+
+      <label class="tlc-slider">
+        <span>{ui.developmentTime}</span>
+        <strong id="tlc-time-label">-</strong>
+        <input id="tlc-time" type="range" min="1" max="12" value="6" step="0.5" />
+      </label>
+
+      <div class="tlc-readout">
+        <div>
+          <span>{ui.frontDistance}</span>
+          <strong id="tlc-front-distance">-</strong>
+        </div>
+        <div>
+          <span>{ui.matchScore}</span>
+          <strong id="tlc-match">-</strong>
+        </div>
+      </div>
+
+      <div class="tlc-mini-map" aria-hidden="true">
+        <span></span><span></span><span></span><span></span>
+      </div>
+    </aside>
+
+    <p class="tlc-disclaimer">{ui.disclaimer}</p>
+  </div>
+</section>
+
+<script id="tlc-ui" type="application/json" set:html={JSON.stringify(ui)}></script>
+<script>
+  import { ChromatographyPhysics } from './logic';
+  import type { InkSample, SolventSystem, TlcBand } from './logic';
+
+  const ui = JSON.parse(document.getElementById('tlc-ui')?.textContent || '{}');
+  const model = new ChromatographyPhysics();
+  const STORAGE_KEY = 'forensic-tlc-ink-simulator-state';
+  const inkSelect = document.getElementById('tlc-ink') as HTMLSelectElement | null;
+  const solventSelect = document.getElementById('tlc-solvent-select') as HTMLSelectElement | null;
+  const timeInput = document.getElementById('tlc-time') as HTMLInputElement | null;
+  const lane = document.getElementById('tlc-lane');
+  const front = document.getElementById('tlc-front') as HTMLElement | null;
+  const solvent = document.getElementById('tlc-solvent') as HTMLElement | null;
+  const tableBody = document.getElementById('tlc-table-body');
+  let unitSystem: 'metric' | 'imperial' = 'metric';
+
+  function setText(id: string, value: string): void {
+    const element = document.getElementById(id);
+    if (element) element.textContent = value;
+  }
+
+  function formatDistance(mm: number): string {
+    if (unitSystem === 'metric') return `${mm.toFixed(1)} ${ui.unitMillimeter}`;
+    return `${(mm / 25.4).toFixed(2)} ${ui.unitInch}`;
+  }
+
+  function updateUnitButtons(): void {
+    document.querySelectorAll<HTMLButtonElement>('[data-tlc-unit]').forEach((button) => {
+      button.dataset.active = button.dataset.tlcUnit === unitSystem ? 'true' : 'false';
+    });
+  }
+
+  function renderBand(band: TlcBand, solventTravelMm: number): HTMLDivElement {
+    const mark = document.createElement('div');
+    const label = ui[band.labelKey] ?? band.id;
+    mark.className = 'tlc-band';
+    mark.style.setProperty('--band-color', band.color);
+    mark.style.setProperty('--band-bottom', `${10 + (band.distanceMm / solventTravelMm) * 78}%`);
+    mark.style.setProperty('--band-height', `${Math.max(5, band.widthMm * 1.8)}px`);
+    mark.title = `${label}: ${ui.rfValue} ${band.rf.toFixed(2)}`;
+    return mark;
+  }
+
+  function renderTable(bands: TlcBand[]): void {
+    if (!tableBody) return;
+    tableBody.innerHTML = '';
+    bands.forEach((band) => {
+      const row = document.createElement('tr');
+      const label = ui[band.labelKey] ?? band.id;
+      row.innerHTML = `<td><span class="tlc-chip" style="--chip:${band.color}"></span>${label}</td><td>${formatDistance(band.distanceMm)}</td><td>${band.rf.toFixed(2)}</td>`;
+      tableBody.append(row);
+    });
+  }
+
+  function saveState(): void {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      ink: inkSelect?.value ?? 'ransomNote',
+      solvent: solventSelect?.value ?? 'ethanolWater',
+      time: Number(timeInput?.value ?? 6),
+      unitSystem,
+    }));
+  }
+
+  function applySavedSelectValue(select: HTMLSelectElement | null, value: unknown): void {
+    if (typeof value === 'string' && select) {
+      select.value = value;
+    }
+  }
+
+  function applySavedTime(value: unknown): void {
+    if (typeof value === 'number' && timeInput) {
+      timeInput.value = String(value);
+    }
+  }
+
+  function applySavedUnitSystem(value: unknown): void {
+    if (value === 'imperial' || value === 'metric') {
+      unitSystem = value;
+    }
+  }
+
+  function parseSavedState(): Record<string, unknown> {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}') as Record<string, unknown>;
+  }
+
+  function restoreState(): void {
+    try {
+      const saved = parseSavedState();
+      applySavedSelectValue(inkSelect, saved.ink);
+      applySavedSelectValue(solventSelect, saved.solvent);
+      applySavedTime(saved.time);
+      applySavedUnitSystem(saved.unitSystem);
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+  }
+
+  function getSimulationInput(): { timeMinutes: number; ink: InkSample; solventSystem: SolventSystem } {
+    return {
+      timeMinutes: Number(timeInput?.value ?? 6),
+      ink: (inkSelect?.value ?? 'ransomNote') as InkSample,
+      solventSystem: (solventSelect?.value ?? 'ethanolWater') as SolventSystem,
+    };
+  }
+
+  function renderLane(bands: TlcBand[], solventTravelMm: number): void {
+    if (!lane) return;
+    lane.innerHTML = '';
+    bands.forEach((band) => lane.append(renderBand(band, solventTravelMm)));
+  }
+
+  function renderSolvent(frontPosition: number, timeMinutes: number): void {
+    if (front) front.style.bottom = `${frontPosition}%`;
+    if (solvent) solvent.style.height = `${Math.min(42, 10 + timeMinutes * 2.2)}%`;
+  }
+
+  function renderReadouts(timeMinutes: number, solventTravelMm: number, matchScore: number): void {
+    setText('tlc-time-label', `${timeMinutes.toFixed(1)} ${ui.unitMinute}`);
+    setText('tlc-front-distance', formatDistance(solventTravelMm));
+    setText('tlc-match', `${matchScore}%`);
+  }
+
+  function render(): void {
+    const { timeMinutes, ink, solventSystem } = getSimulationInput();
+    const result = model.simulate(timeMinutes, ink, solventSystem);
+    const solventTravelMm = result.solventFrontMm - result.originMm;
+    const frontPosition = 10 + (solventTravelMm / (result.plateHeightMm - result.originMm)) * 82;
+
+    renderLane(result.bands, solventTravelMm);
+    renderSolvent(frontPosition, timeMinutes);
+    renderReadouts(timeMinutes, solventTravelMm, result.matchScore);
+    renderTable(result.bands);
+    saveState();
+  }
+
+  inkSelect?.addEventListener('change', render);
+  solventSelect?.addEventListener('change', render);
+  timeInput?.addEventListener('input', render);
+  document.querySelectorAll<HTMLButtonElement>('[data-tlc-unit]').forEach((button) => {
+    button.addEventListener('click', () => {
+      unitSystem = button.dataset.tlcUnit === 'imperial' ? 'imperial' : 'metric';
+      updateUnitButtons();
+      render();
+    });
+  });
+
+  restoreState();
+  updateUnitButtons();
+  render();
+</script>