@jjlmoya/utils-forensic-science 1.8.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-forensic-science",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -28,7 +28,7 @@
         "check": "astro check",
         "type-check": "astro check",
         "test": "vitest run",
-        "preversion": "npm run lint && npm run test",
+        "preversion": "npm run lint && npm run test && npm run build",
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",

package/src/category/index.ts

@@ -14,6 +14,7 @@ import { bloodstainPatternOriginAnalyzer } from '../tool/bloodstain-pattern-orig
 import { forensicFingerprintMinutiaeIdentifier } from '../tool/forensic-fingerprint-minutiae-identifier/entry';
 import { firePatternOriginAnalyzer } from '../tool/fire-pattern-origin-analyzer/entry';
 import { forensicToolmarkStriationMatcher } from '../tool/forensic-toolmark-striation-matcher/entry';
+import { timeOfDeathAlgorMortisCalculator } from '../tool/time-of-death-algor-mortis-calculator/entry';
 
 export const forensicCategory: ScienceCategoryEntry = {
   icon: 'mdi:fingerprint',
@@ -32,8 +33,12 @@ export const forensicCategory: ScienceCategoryEntry = {
     bloodstainPatternOriginAnalyzer,
     forensicFingerprintMinutiaeIdentifier,
     firePatternOriginAnalyzer,
-    forensicToolmarkStriationMatcher
+    forensicToolmarkStriationMatcher,
+    timeOfDeathAlgorMortisCalculator
   ],
+
+
+
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -28,6 +28,8 @@ export { firePatternOriginAnalyzer } from './tool/fire-pattern-origin-analyzer/e
 export type { FirePatternOriginAnalyzerUI, FirePatternOriginAnalyzerLocaleContent } from './tool/fire-pattern-origin-analyzer/entry';
 export { forensicToolmarkStriationMatcher } from './tool/forensic-toolmark-striation-matcher/entry';
 export type { ToolmarkStriationMatcherUI, ToolmarkStriationMatcherLocaleContent } from './tool/forensic-toolmark-striation-matcher/entry';
+export { timeOfDeathAlgorMortisCalculator } from './tool/time-of-death-algor-mortis-calculator/entry';
+export type { TimeOfDeathAlgorMortisUI, TimeOfDeathAlgorMortisLocaleContent } from './tool/time-of-death-algor-mortis-calculator/entry';
 
 import { forensicAgeEstimator } from './tool/forensic-age-estimator/entry';
 import { widmarkAlcoholSimulator } from './tool/widmark-alcohol-simulator/entry';
@@ -44,6 +46,7 @@ import { bloodstainPatternOriginAnalyzer } from './tool/bloodstain-pattern-origi
 import { forensicFingerprintMinutiaeIdentifier } from './tool/forensic-fingerprint-minutiae-identifier/entry';
 import { firePatternOriginAnalyzer } from './tool/fire-pattern-origin-analyzer/entry';
 import { forensicToolmarkStriationMatcher } from './tool/forensic-toolmark-striation-matcher/entry';
+import { timeOfDeathAlgorMortisCalculator } from './tool/time-of-death-algor-mortis-calculator/entry';
 
 export const ALL_ENTRIES = [
   forensicAgeEstimator,
@@ -60,5 +63,9 @@ export const ALL_ENTRIES = [
   bloodstainPatternOriginAnalyzer,
   forensicFingerprintMinutiaeIdentifier,
   firePatternOriginAnalyzer,
-  forensicToolmarkStriationMatcher
+  forensicToolmarkStriationMatcher,
+  timeOfDeathAlgorMortisCalculator
 ];
+
+
+

package/src/tests/locale_completeness.test.ts

@@ -18,7 +18,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-    it('all 15 tools registered', () => {
-      expect(ALL_TOOLS.length).toBe(15);
+    it('all 16 tools registered', () => {
+      expect(ALL_TOOLS.length).toBe(16);
   });
 });

package/src/tests/tool_validation.test.ts

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

package/src/tool/time-of-death-algor-mortis-calculator/bibliography.astro

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

package/src/tool/time-of-death-algor-mortis-calculator/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Henssge, C. - Death time estimation in case work by the means of a nomogram', url: 'https://pubmed.ncbi.nlm.nih.gov/3192144/' },
+  { name: 'Henssge, C. & Madea, B. - Estimation of the time since death in the early post-mortem period', url: 'https://pubmed.ncbi.nlm.nih.gov/15364387/' },
+  { name: 'National Center for Biotechnology Information - Postmortem Interval and Algor Mortis Review', url: 'https://www.ncbi.nlm.nih.gov/books/NBK554464/' }
+];

package/src/tool/time-of-death-algor-mortis-calculator/component.astro

@@ -0,0 +1,133 @@
+---
+import type { KnownLocale } from '../../types';
+import type { TimeOfDeathAlgorMortisUI } from './ui';
+import { timeOfDeathAlgorMortisCalculator } from './entry';
+import './time-of-death-algor-mortis-calculator.css';
+
+interface Props {
+  ui?: TimeOfDeathAlgorMortisUI;
+  locale?: KnownLocale;
+}
+
+const { ui: propUi, locale = 'en' } = Astro.props;
+let ui = propUi;
+if (!ui) {
+  const content = await timeOfDeathAlgorMortisCalculator.i18n[locale]?.();
+  ui = content?.ui;
+}
+if (!ui) return null;
+---
+
+<div class="sc-algor-cockpit" id="algor-cockpit-root" data-i18n={JSON.stringify(ui)}>
+  <div class="sc-cockpit-sidebar">
+    <div>
+      <div class="sc-header-row">
+        <div class="sc-panel-title">{ui.presetsHeader}</div>
+        <div class="sc-unit-toggle">
+          <button type="button" class="sc-unit-btn active" data-unit="metric">{ui.unitMetricLabel || 'Metric'}</button>
+          <button type="button" class="sc-unit-btn" data-unit="imperial">{ui.unitImperialLabel || 'Imperial'}</button>
+        </div>
+      </div>
+      <div class="sc-presets-wrap">
+        <button type="button" class="sc-preset-chip active" data-preset="dressedIndoor">{ui.presetDressedIndoor}</button>
+        <button type="button" class="sc-preset-chip" data-preset="nakedCalm">{ui.presetNakedCalm}</button>
+        <button type="button" class="sc-preset-chip" data-preset="winterOutdoor">{ui.presetWinterOutdoor}</button>
+        <button type="button" class="sc-preset-chip" data-preset="submergedWater">{ui.presetSubmergedWater}</button>
+        <button type="button" class="sc-preset-chip" data-preset="heavyDuvet">{ui.presetHeavyDuvet}</button>
+      </div>
+    </div>
+
+    <div class="sc-input-group">
+      <div class="sc-input-label-row">
+        <label class="sc-label" for="slider-rectalTemp">{ui.rectalTempLabel}</label>
+        <span class="sc-label" id="label-unit-temp-1">{ui.celsiusUnit}</span>
+      </div>
+      <div class="sc-tactile-row">
+        <input type="range" id="slider-rectalTemp" class="sc-slider" data-key="rectalTemp" min="10" max="40" step="0.1" value="30.5" />
+        <input type="number" id="num-rectalTemp" class="sc-num-input" data-key="rectalTemp" aria-label={ui.rectalTempLabel} min="10" max="40" step="0.1" value="30.5" />
+      </div>
+    </div>
+
+    <div class="sc-input-group">
+      <div class="sc-input-label-row">
+        <label class="sc-label" for="slider-ambientTemp">{ui.ambientTempLabel}</label>
+        <span class="sc-label" id="label-unit-temp-2">{ui.celsiusUnit}</span>
+      </div>
+      <div class="sc-tactile-row">
+        <input type="range" id="slider-ambientTemp" class="sc-slider" data-key="ambientTemp" min="-10" max="38" step="0.1" value="19.5" />
+        <input type="number" id="num-ambientTemp" class="sc-num-input" data-key="ambientTemp" aria-label={ui.ambientTempLabel} min="-10" max="38" step="0.1" value="19.5" />
+      </div>
+    </div>
+
+    <div class="sc-input-group">
+      <div class="sc-input-label-row">
+        <label class="sc-label" for="slider-bodyWeight">{ui.bodyWeightLabel}</label>
+        <span class="sc-label" id="label-unit-weight">{ui.kgUnit}</span>
+      </div>
+      <div class="sc-tactile-row">
+        <input type="range" id="slider-bodyWeight" class="sc-slider" data-key="bodyWeight" min="20" max="180" step="0.5" value="75" />
+        <input type="number" id="num-bodyWeight" class="sc-num-input" data-key="bodyWeight" aria-label={ui.bodyWeightLabel} min="20" max="180" step="0.5" value="75" />
+      </div>
+    </div>
+
+    <div class="sc-input-group">
+      <label class="sc-label" for="factor-select-trigger">{ui.factorLabel}</label>
+      <div class="sc-custom-select" id="factor-custom-select">
+        <button type="button" class="sc-select-trigger" id="factor-select-trigger" aria-haspopup="listbox">
+          <span class="sc-select-val">{ui.factorLightClothes} (1.1)</span>
+          <svg class="sc-select-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </button>
+        <div class="sc-select-dropdown" id="factor-select-dropdown" role="listbox">
+          <div class="sc-select-option" data-factor-val="1.0">{ui.factorNaked} (1.0)</div>
+          <div class="sc-select-option" data-factor-val="1.1">{ui.factorLightClothes} (1.1)</div>
+          <div class="sc-select-option" data-factor-val="1.2">{ui.factorStandardClothes} (1.2)</div>
+          <div class="sc-select-option" data-factor-val="1.4">{ui.factorHeavyWinter} (1.4)</div>
+          <div class="sc-select-option" data-factor-val="1.3">{ui.factorLightBlanket} (1.3)</div>
+          <div class="sc-select-option" data-factor-val="1.8">{ui.factorHeavyDuvet} (1.8)</div>
+          <div class="sc-select-option" data-factor-val="0.5">{ui.factorStillWater} (0.5)</div>
+          <div class="sc-select-option" data-factor-val="0.35">{ui.factorFlowingWater} (0.35)</div>
+          <div class="sc-select-option" data-factor-val="0.7">{ui.factorWetClothing} (0.7)</div>
+          <div class="sc-select-option" data-factor-val="0.75">{ui.factorMovingAir} (0.75)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="sc-input-group">
+      <label class="sc-label" for="input-time">{ui.measurementTimeLabel}</label>
+      <div class="sc-actions-row">
+        <div class="sc-time-wrap">
+          <input type="time" id="input-time" class="sc-time-input" value="14:00" />
+          <svg class="sc-time-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
+        </div>
+        <button type="button" id="btn-now" class="sc-btn sc-btn-primary">{ui.nowBtn}</button>
+        <button type="button" id="btn-reset" class="sc-btn">{ui.resetBtn}</button>
+      </div>
+    </div>
+
+    <div class="sc-warning-card">
+      <div class="sc-warning-title">{ui.disclaimerTitle || ui.inputsHeader}</div>
+      <div class="sc-warning-text">{ui.disclaimer}</div>
+    </div>
+  </div>
+
+  <div class="sc-cockpit-stage">
+    <div id="telemetry-stage"></div>
+    <div class="sc-chart-stage">
+      <div class="sc-panel-title">{ui.chartHeader}</div>
+      <svg id="nomogram-svg" class="sc-nomogram-svg"></svg>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { AlgorMortisController } from './controller';
+  const root = document.getElementById('algor-cockpit-root');
+  if (root) {
+    new AlgorMortisController(root);
+  }
+</script>

package/src/tool/time-of-death-algor-mortis-calculator/controller.ts

@@ -0,0 +1,254 @@
+import type { TimeOfDeathAlgorMortisUI } from './ui';
+import { calculateAlgorMortis, celsiusToFahrenheit, fahrenheitToCelsius, kgToLb, lbToKg, type AlgorMortisInputs } from './logic';
+import { loadSavedState, saveState } from './storage';
+import { renderTelemetry, renderSvgNomogram } from './dom-views';
+
+interface SliderRange {
+  min: number;
+  max: number;
+  step: number;
+}
+
+interface PresetDef {
+  nameKey: string;
+  rectal: number;
+  ambient: number;
+  weight: number;
+  factor: number;
+}
+
+const PRESETS: Record<string, PresetDef> = {
+  dressedIndoor: { nameKey: 'presetDressedIndoor', rectal: 30.5, ambient: 19.5, weight: 75, factor: 1.1 },
+  nakedCalm: { nameKey: 'presetNakedCalm', rectal: 28.5, ambient: 20.0, weight: 70, factor: 1.0 },
+  winterOutdoor: { nameKey: 'presetWinterOutdoor', rectal: 22.0, ambient: 4.0, weight: 80, factor: 1.4 },
+  submergedWater: { nameKey: 'presetSubmergedWater', rectal: 24.0, ambient: 12.0, weight: 70, factor: 0.5 },
+  heavyDuvet: { nameKey: 'presetHeavyDuvet', rectal: 33.0, ambient: 18.0, weight: 85, factor: 1.8 }
+};
+
+export class AlgorMortisController {
+  private container: HTMLElement;
+  private ui: TimeOfDeathAlgorMortisUI;
+  private inputs: AlgorMortisInputs;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.ui = JSON.parse(container.dataset.i18n || '{}');
+    this.inputs = this.getInitialInputs();
+    this.updateUnitUI();
+    this.syncAllFormControls();
+    this.bindUnitToggle();
+    this.bindInputs();
+    this.bindPresets();
+    this.bindCustomSelect();
+    this.bindActionButtons();
+    this.update();
+  }
+
+  private getInitialInputs(): AlgorMortisInputs {
+    const now = new Date();
+    const hh = String(now.getHours()).padStart(2, '0');
+    const mm = String(now.getMinutes()).padStart(2, '0');
+    const defaults: AlgorMortisInputs = {
+      rectalTemp: 30.5,
+      ambientTemp: 19.5,
+      bodyWeight: 75,
+      correctionFactor: 1.1,
+      measurementTime: `${hh}:${mm}`,
+      unitSystem: 'metric'
+    };
+    return Object.assign(defaults, loadSavedState() || {});
+  }
+
+  private bindUnitToggle(): void {
+    this.container.querySelectorAll<HTMLButtonElement>('.sc-unit-btn').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const target = btn.dataset.unit as 'metric' | 'imperial';
+        if (target !== this.inputs.unitSystem) this.switchUnitSystem(target);
+      });
+    });
+  }
+
+  private switchUnitSystem(targetUnit: 'metric' | 'imperial'): void {
+    const isTargetImp = targetUnit === 'imperial';
+    this.inputs.rectalTemp = isTargetImp ? celsiusToFahrenheit(this.inputs.rectalTemp) : fahrenheitToCelsius(this.inputs.rectalTemp);
+    this.inputs.ambientTemp = isTargetImp ? celsiusToFahrenheit(this.inputs.ambientTemp) : fahrenheitToCelsius(this.inputs.ambientTemp);
+    this.inputs.bodyWeight = isTargetImp ? kgToLb(this.inputs.bodyWeight) : lbToKg(this.inputs.bodyWeight);
+    this.inputs.unitSystem = targetUnit;
+    this.updateUnitUI();
+    this.syncAllFormControls();
+    this.update();
+  }
+
+  private updateUnitUI(): void {
+    const isImp = this.inputs.unitSystem === 'imperial';
+    this.container.querySelectorAll<HTMLButtonElement>('.sc-unit-btn').forEach((b) => {
+      b.classList.toggle('active', b.dataset.unit === this.inputs.unitSystem);
+    });
+    this.setText('#label-unit-temp-1', isImp ? this.ui.fahrenheitUnit : this.ui.celsiusUnit);
+    this.setText('#label-unit-temp-2', isImp ? this.ui.fahrenheitUnit : this.ui.celsiusUnit);
+    this.setText('#label-unit-weight', isImp ? this.ui.lbUnit : this.ui.kgUnit);
+    this.setSliderBounds('#slider-rectalTemp', '#num-rectalTemp', isImp ? { min: 50, max: 104, step: 0.2 } : { min: 10, max: 40, step: 0.1 });
+    this.setSliderBounds('#slider-ambientTemp', '#num-ambientTemp', isImp ? { min: 14, max: 100, step: 0.2 } : { min: -10, max: 38, step: 0.1 });
+    this.setSliderBounds('#slider-bodyWeight', '#num-bodyWeight', isImp ? { min: 44, max: 400, step: 1 } : { min: 20, max: 180, step: 0.5 });
+    this.updatePresetLabels();
+  }
+
+  private updatePresetLabels(): void {
+    const isImp = this.inputs.unitSystem === 'imperial';
+    this.container.querySelectorAll<HTMLButtonElement>('.sc-preset-chip').forEach((chip) => {
+      const p = PRESETS[chip.dataset.preset || ''];
+      if (!p) return;
+      const rawText = this.ui[p.nameKey];
+      const baseName = rawText ? rawText.split('(')[0]?.trim() : p.nameKey;
+      const tempDisplay = isImp ? `${celsiusToFahrenheit(p.ambient)}°F` : `${p.ambient}°C`;
+      chip.textContent = `${baseName} (${tempDisplay})`;
+    });
+  }
+
+  private setSliderBounds(sId: string, nId: string, range: SliderRange): void {
+    const s = this.container.querySelector<HTMLInputElement>(sId);
+    const n = this.container.querySelector<HTMLInputElement>(nId);
+    [s, n].forEach((el) => {
+      if (el) {
+        el.min = String(range.min);
+        el.max = String(range.max);
+        el.step = String(range.step);
+      }
+    });
+  }
+
+  private setText(selector: string, val: string): void {
+    const el = this.container.querySelector<HTMLElement>(selector);
+    if (el) el.textContent = val;
+  }
+
+  private bindInputs(): void {
+    this.container.querySelectorAll<HTMLInputElement>('.sc-slider').forEach((slider) => {
+      slider.addEventListener('input', () => this.handleSliderSync(slider));
+    });
+    this.container.querySelectorAll<HTMLInputElement>('.sc-num-input').forEach((input) => {
+      input.addEventListener('input', () => this.handleNumSync(input));
+    });
+    const timeInput = this.container.querySelector<HTMLInputElement>('#input-time');
+    timeInput?.addEventListener('input', () => {
+      this.inputs.measurementTime = timeInput.value;
+      this.update();
+    });
+  }
+
+  private handleSliderSync(slider: HTMLInputElement): void {
+    const key = slider.dataset.key as keyof AlgorMortisInputs;
+    if (!key) return;
+    const val = parseFloat(slider.value) || 0;
+    (this.inputs[key] as number) = val;
+    const numInput = this.container.querySelector<HTMLInputElement>(`#num-${key}`);
+    if (numInput) numInput.value = String(val);
+    this.update();
+  }
+
+  private handleNumSync(input: HTMLInputElement): void {
+    const key = input.dataset.key as keyof AlgorMortisInputs;
+    if (!key) return;
+    const val = parseFloat(input.value) || 0;
+    (this.inputs[key] as number) = val;
+    const slider = this.container.querySelector<HTMLInputElement>(`#slider-${key}`);
+    if (slider) slider.value = String(val);
+    this.update();
+  }
+
+  private bindPresets(): void {
+    this.container.querySelectorAll<HTMLButtonElement>('.sc-preset-chip').forEach((chip) => {
+      chip.addEventListener('click', () => {
+        const presetKey = chip.dataset.preset;
+        if (!presetKey || !PRESETS[presetKey]) return;
+        const p = PRESETS[presetKey];
+        const isImp = this.inputs.unitSystem === 'imperial';
+        this.inputs.rectalTemp = isImp ? celsiusToFahrenheit(p.rectal) : p.rectal;
+        this.inputs.ambientTemp = isImp ? celsiusToFahrenheit(p.ambient) : p.ambient;
+        this.inputs.bodyWeight = isImp ? kgToLb(p.weight) : p.weight;
+        this.inputs.correctionFactor = p.factor;
+        this.syncAllFormControls();
+        this.updatePresetChips(presetKey);
+        this.update();
+      });
+    });
+  }
+
+  private updatePresetChips(activeKey?: string): void {
+    this.container.querySelectorAll<HTMLButtonElement>('.sc-preset-chip').forEach((chip) => {
+      chip.classList.toggle('active', chip.dataset.preset === activeKey);
+    });
+  }
+
+  private bindCustomSelect(): void {
+    const trigger = this.container.querySelector<HTMLButtonElement>('#factor-select-trigger');
+    const dropdown = this.container.querySelector<HTMLElement>('#factor-select-dropdown');
+    trigger?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      dropdown?.classList.toggle('open');
+    });
+    document.addEventListener('click', () => dropdown?.classList.remove('open'));
+    this.container.querySelectorAll<HTMLElement>(`[data-factor-val]`).forEach((opt) => {
+      opt.addEventListener('click', () => {
+        this.inputs.correctionFactor = parseFloat(opt.dataset.factorVal || '1.1');
+        const span = trigger?.querySelector<HTMLElement>('.sc-select-val');
+        if (span) span.textContent = opt.textContent || '';
+        dropdown?.classList.remove('open');
+        this.update();
+      });
+    });
+  }
+
+  private bindActionButtons(): void {
+    this.container.querySelector<HTMLButtonElement>('#btn-now')?.addEventListener('click', () => {
+      const now = new Date();
+      const hh = String(now.getHours()).padStart(2, '0');
+      const mm = String(now.getMinutes()).padStart(2, '0');
+      this.inputs.measurementTime = `${hh}:${mm}`;
+      const timeInput = this.container.querySelector<HTMLInputElement>('#input-time');
+      if (timeInput) timeInput.value = this.inputs.measurementTime;
+      this.update();
+    });
+    this.container.querySelector<HTMLButtonElement>('#btn-reset')?.addEventListener('click', () => {
+      const isImp = this.inputs.unitSystem === 'imperial';
+      this.inputs.rectalTemp = isImp ? 86.9 : 30.5;
+      this.inputs.ambientTemp = isImp ? 67.1 : 19.5;
+      this.inputs.bodyWeight = isImp ? 165 : 75;
+      this.inputs.correctionFactor = 1.1;
+      this.inputs.measurementTime = '14:00';
+      this.syncAllFormControls();
+      this.updatePresetChips();
+      this.update();
+    });
+  }
+
+  private syncAllFormControls(): void {
+    const syncPair = (key: string, val: number) => {
+      const slider = this.container.querySelector<HTMLInputElement>(`#slider-${key}`);
+      const num = this.container.querySelector<HTMLInputElement>(`#num-${key}`);
+      if (slider) slider.value = String(val);
+      if (num) num.value = String(val);
+    };
+    syncPair('rectalTemp', this.inputs.rectalTemp);
+    syncPair('ambientTemp', this.inputs.ambientTemp);
+    syncPair('bodyWeight', this.inputs.bodyWeight);
+    const timeInput = this.container.querySelector<HTMLInputElement>('#input-time');
+    if (timeInput) timeInput.value = this.inputs.measurementTime;
+    const trigger = this.container.querySelector<HTMLElement>('#factor-select-trigger .sc-select-val');
+    const matchingOpt = this.container.querySelector<HTMLElement>(`[data-factor-val="${this.inputs.correctionFactor}"]`);
+    if (trigger && matchingOpt) trigger.textContent = matchingOpt.textContent || '';
+  }
+
+  private update(): void {
+    saveState(this.inputs);
+    const result = calculateAlgorMortis(this.inputs);
+    const telemetryContainer = this.container.querySelector<HTMLElement>('#telemetry-stage');
+    if (telemetryContainer) {
+      renderTelemetry(telemetryContainer, result, this.inputs, this.ui);
+    }
+    const svgEl = this.container.querySelector<SVGSVGElement>('#nomogram-svg');
+    if (svgEl) {
+      renderSvgNomogram(svgEl, { result, inputs: this.inputs, ui: this.ui });
+    }
+  }
+}

package/src/tool/time-of-death-algor-mortis-calculator/dom-views.ts

@@ -0,0 +1,144 @@
+import type { TimeOfDeathAlgorMortisUI } from './ui';
+import type { AlgorMortisResult, AlgorMortisInputs, CurvePoint } from './logic';
+import { evaluateCoolingStatus } from './evaluator';
+
+export interface SvgRenderConfig {
+  result: AlgorMortisResult;
+  inputs: AlgorMortisInputs;
+  ui: TimeOfDeathAlgorMortisUI;
+}
+
+interface PlotBounds {
+  w: number;
+  h: number;
+  padLeft: number;
+  padBottom: number;
+  minTemp: number;
+  maxTemp: number;
+  maxTime: number;
+}
+
+export function formatDuration(decimalHours: number, ui: TimeOfDeathAlgorMortisUI): string {
+  const h = Math.floor(decimalHours);
+  const m = Math.round((decimalHours - h) * 60);
+  if (m === 60) return `${h + 1} ${ui.hoursUnit}`;
+  if (h === 0) return `${m} ${ui.minutesUnit}`;
+  return `${h} ${ui.hoursUnit} ${m} ${ui.minutesUnit}`;
+}
+
+export function renderTelemetry(container: HTMLElement, result: AlgorMortisResult, inputs: AlgorMortisInputs, ui: TimeOfDeathAlgorMortisUI): void {
+  const isImp = inputs.unitSystem === 'imperial';
+  const tempUnit = isImp ? ui.fahrenheitUnit : ui.celsiusUnit;
+  const rateUnit = isImp ? ui.fahrenheitPerHour : ui.celsiusPerHour;
+  const status = evaluateCoolingStatus({ result, ui, rectalTemp: result.rectalTempDisplay, ambientTemp: result.ambientTempDisplay, refTemp: result.refTempDisplay });
+
+  container.innerHTML = `
+    <div class="sc-hero-card">
+      <div class="sc-hero-header">
+        <span class="sc-hero-title">${ui.estimatedPmiLabel}</span>
+        <span class="sc-badge ${status.badgeClass}">${status.phaseLabel}</span>
+      </div>
+      <div class="sc-hero-val">${formatDuration(result.pmiHours, ui)}</div>
+      <div class="sc-hero-sub">${ui.deathWindowLabel}: <strong>${result.timeOfDeathMin} - ${result.timeOfDeathMax}</strong> (${result.timeOfDeathEstimated} est.)</div>
+      <div class="sc-gauge-wrap">
+        <div class="sc-gauge-track">
+          <div class="sc-gauge-bar ${status.badgeClass}" style="width: ${status.gaugePercent}%"></div>
+        </div>
+        <div class="sc-gauge-labels">
+          <span>${result.refTempDisplay}${tempUnit} ${ui.referenceBodyTempLabel || ''}</span>
+          <span>${result.ambientTempDisplay}${tempUnit} ${ui.baselineAmbientLabel || ''}</span>
+        </div>
+      </div>
+    </div>
+    <div class="sc-stats-grid">
+      <div class="sc-stat-card"><span class="sc-stat-label">${ui.confidenceMarginLabel}</span><span class="sc-stat-val">± ${formatDuration(result.confidenceMarginHours, ui)}</span><span class="sc-stat-sub">${ui.confidenceMarginSub || '95%'}</span></div>
+      <div class="sc-stat-card"><span class="sc-stat-label">${ui.coolingRateLabel}</span><span class="sc-stat-val">${result.coolingRateDisplay} ${rateUnit}</span><span class="sc-stat-sub">${ui.coolingRateSub || 'ΔT/h'}</span></div>
+      <div class="sc-stat-card"><span class="sc-stat-label">${ui.glaisterEstimateLabel}</span><span class="sc-stat-val">${formatDuration(result.glaisterPmiHours, ui)}</span><span class="sc-stat-sub">${ui.glaisterEstimateSub || 'Glaister'}</span></div>
+    </div>
+  `;
+}
+
+function buildPathString(points: CurvePoint[], b: PlotBounds): string {
+  const span = Math.max(1, b.maxTemp - b.minTemp);
+  const plotW = b.w - b.padLeft - 30;
+  const plotH = b.h - b.padBottom - 25;
+  return points.reduce((acc, pt, i) => {
+    const x = b.padLeft + (pt.time / b.maxTime) * plotW;
+    const y = 25 + plotH - ((pt.temp - b.minTemp) / span) * plotH;
+    return i === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : `${acc} L ${x.toFixed(1)} ${y.toFixed(1)}`;
+  }, '');
+}
+
+function buildBandPolygon(points: CurvePoint[], b: PlotBounds): string {
+  const span = Math.max(1, b.maxTemp - b.minTemp);
+  const plotW = b.w - b.padLeft - 30;
+  const plotH = b.h - b.padBottom - 25;
+  const upper = points.map((pt) => `${(b.padLeft + (pt.time / b.maxTime) * plotW).toFixed(1)},${(25 + plotH - ((pt.upperTemp - b.minTemp) / span) * plotH).toFixed(1)}`);
+  const lower = points.slice().reverse().map((pt) => `${(b.padLeft + (pt.time / b.maxTime) * plotW).toFixed(1)},${(25 + plotH - ((pt.lowerTemp - b.minTemp) / span) * plotH).toFixed(1)}`);
+  return `${upper.join(' ')} ${lower.join(' ')}`;
+}
+
+function renderAxesAndGrid(b: PlotBounds, tempUnit: string): string {
+  const plotW = b.w - b.padLeft - 30;
+  const plotH = b.h - b.padBottom - 25;
+  const span = Math.max(1, b.maxTemp - b.minTemp);
+
+  const yVals = [b.maxTemp, b.minTemp + span * 0.66, b.minTemp + span * 0.33, b.minTemp];
+  const yTicks = yVals.map((val) => {
+    const y = 25 + plotH - ((val - b.minTemp) / span) * plotH;
+    return `<line x1="${b.padLeft}" y1="${y}" x2="${b.w - 30}" y2="${y}" class="sc-chart-grid" /><text x="${b.padLeft - 10}" y="${y + 4}" text-anchor="end" class="sc-chart-axis-label">${Math.round(val)}${tempUnit}</text>`;
+  });
+
+  const xSteps = [0, b.maxTime * 0.25, b.maxTime * 0.5, b.maxTime * 0.75, b.maxTime].map((t) => {
+    const x = b.padLeft + (t / b.maxTime) * plotW;
+    return `<line x1="${x}" y1="25" x2="${x}" y2="${25 + plotH}" class="sc-chart-grid" /><text x="${x}" y="${b.h - 15}" text-anchor="middle" class="sc-chart-axis-label">${Math.round(t)}h</text>`;
+  });
+
+  return `${yTicks.join('')}${xSteps.join('')}<line x1="${b.padLeft}" y1="25" x2="${b.padLeft}" y2="${25 + plotH}" class="sc-chart-axis" /><line x1="${b.padLeft}" y1="${25 + plotH}" x2="${b.w - 30}" y2="${25 + plotH}" class="sc-chart-axis" />`;
+}
+
+function buildSvgContent(cfg: SvgRenderConfig, b: PlotBounds, tUnit: string): string {
+  const { result, ui } = cfg;
+  const plotW = b.w - b.padLeft - 30;
+  const plotH = b.h - b.padBottom - 25;
+  const span = Math.max(1, b.maxTemp - b.minTemp);
+  const pathD = buildPathString(result.curvePoints, b);
+  const bandPoly = buildBandPolygon(result.curvePoints, b);
+  const ptX = b.padLeft + (result.pmiHours / b.maxTime) * plotW;
+  const ptY = 25 + plotH - ((result.rectalTempDisplay - b.minTemp) / span) * plotH;
+  const ambY = 25 + plotH - ((result.ambientTempDisplay - b.minTemp) / span) * plotH;
+  const plateauW = (2.5 / boundsOrDefault(b.maxTime)) * plotW;
+
+  return `
+    <defs><linearGradient id="sc-curve-grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="var(--n-accent-cyan)" /><stop offset="100%" stop-color="var(--n-primary)" /></linearGradient></defs>
+    ${renderAxesAndGrid(b, tUnit)}
+    <rect x="${b.padLeft}" y="25" width="${plateauW}" height="${plotH}" class="sc-chart-plateau" />
+    <polygon points="${bandPoly}" class="sc-chart-band" />
+    <line x1="${b.padLeft}" y1="${ambY}" x2="${b.w - 30}" y2="${ambY}" class="sc-chart-amb" />
+    <path d="${pathD}" class="sc-chart-line" />
+    <circle cx="${ptX}" cy="${ptY}" r="9" class="sc-chart-pulse" />
+    <circle cx="${ptX}" cy="${ptY}" r="5" class="sc-chart-core" />
+    <text x="${b.padLeft + plateauW / 2}" y="45" text-anchor="middle" class="sc-chart-tag">${ui.chartPlateauMarker}</text>
+    <text x="${b.w - 35}" y="${ambY - 8}" text-anchor="end" class="sc-chart-tag">${result.ambientTempDisplay}${tUnit} ${ui.ambientTempLabel}</text>
+    <text x="${Math.min(b.w - 110, ptX + 14)}" y="${Math.max(45, ptY - 12)}" class="sc-chart-pt-label">${result.rectalTempDisplay}${tUnit} (${result.pmiHours.toFixed(1)}h)</text>
+  `;
+}
+
+function boundsOrDefault(maxTime: number): number {
+  return Math.max(1, maxTime);
+}
+
+export function renderSvgNomogram(svg: SVGSVGElement, cfg: SvgRenderConfig): void {
+  const isImp = cfg.inputs.unitSystem === 'imperial';
+  const bounds: PlotBounds = {
+    w: 700,
+    h: 340,
+    padLeft: 70,
+    padBottom: 45,
+    minTemp: Math.min(cfg.result.ambientTempDisplay, cfg.result.rectalTempDisplay) - (isImp ? 4 : 2),
+    maxTemp: cfg.result.refTempDisplay + (isImp ? 3 : 1.5),
+    maxTime: Math.max(24, Math.ceil(cfg.result.pmiHours + 6))
+  };
+  svg.setAttribute('viewBox', `0 0 ${bounds.w} ${bounds.h}`);
+  svg.innerHTML = buildSvgContent(cfg, bounds, isImp ? cfg.ui.fahrenheitUnit : cfg.ui.celsiusUnit);
+}