@jjlmoya/utils-science 1.28.0 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.28.0",
+    "version": "1.30.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -11,10 +11,11 @@ import { stellarHabitabilityZone } from '../tool/stellar-habitability-zone/index
 import { radioactiveDecay } from '../tool/radioactive-decay/index';
 import { naturalSelectionDrift } from '../tool/natural-selection-drift/index';
 import { entropySecondLaw } from '../tool/entropy-second-law/index';
+import { phaseDiagramCriticalPoints } from '../tool/phase-diagram-critical-points/index';
 
 export const scienceCategory: ScienceCategoryEntry = {
   icon: 'mdi:flask',
-  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw],
+  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -11,6 +11,7 @@ export { stellarHabitabilityZone } from './tool/stellar-habitability-zone/entry'
 export { radioactiveDecay } from './tool/radioactive-decay/entry';
 export { naturalSelectionDrift } from './tool/natural-selection-drift/entry';
 export { entropySecondLaw } from './tool/entropy-second-law/entry';
+export { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points/entry';
 export { scienceCategory } from './category';
 import { asteroidImpact } from './tool/asteroid-impact/entry';
 import { cellularRenewal } from './tool/cellular-renewal/entry';
@@ -24,4 +25,5 @@ import { stellarHabitabilityZone } from './tool/stellar-habitability-zone/entry'
 import { radioactiveDecay } from './tool/radioactive-decay/entry';
 import { naturalSelectionDrift } from './tool/natural-selection-drift/entry';
 import { entropySecondLaw } from './tool/entropy-second-law/entry';
-export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw];
+import { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points/entry';
+export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints];

package/src/index.ts

@@ -12,6 +12,7 @@ export { STELLAR_HABITABILITY_ZONE_TOOL } from './tool/stellar-habitability-zone
 export { RADIOACTIVE_DECAY_TOOL } from './tool/radioactive-decay/index';
 export { NATURAL_SELECTION_DRIFT_TOOL } from './tool/natural-selection-drift/index';
 export { ENTROPY_SECOND_LAW_TOOL } from './tool/entropy-second-law/index';
+export { PHASE_DIAGRAM_CRITICAL_POINTS_TOOL } from './tool/phase-diagram-critical-points/index';
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

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

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 12 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(12);
+    it('should have 13 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(13);
     });
 
     it('scienceCategory should be defined', () => {

package/src/tool/phase-diagram-critical-points/bibliography.astro

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

package/src/tool/phase-diagram-critical-points/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'NIST Chemistry WebBook',
+    url: 'https://webbook.nist.gov/chemistry/',
+  },
+  {
+    name: 'OpenStax Chemistry 2e, Phase Diagrams',
+    url: 'https://openstax.org/books/chemistry-2e/pages/10-4-phase-diagrams',
+  },
+  {
+    name: 'IUPAC Gold Book, Critical Point',
+    url: 'https://goldbook.iupac.org/terms/view/C01396',
+  },
+];

package/src/tool/phase-diagram-critical-points/component.astro

@@ -0,0 +1,397 @@
+---
+import './phase-diagram-critical-points-visualizer.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="phase-lab" id="phase-lab">
+  <section class="phase-panel phase-controls" aria-label={ui.controls}>
+    <label class="phase-field" for="phase-substance">
+      <span>{ui.substance}</span>
+      <select id="phase-substance">
+        <option value="water">Water</option>
+        <option value="carbon-dioxide">Carbon dioxide</option>
+        <option value="nitrogen">Nitrogen</option>
+      </select>
+    </label>
+
+    <label class="phase-field" for="phase-units">
+      <span>{ui.units}</span>
+      <select id="phase-units">
+        <option value="scientific">{ui.scientificUnits}</option>
+        <option value="metric">{ui.metricUnits}</option>
+        <option value="imperial">{ui.imperialUnits}</option>
+      </select>
+    </label>
+
+    <label class="phase-field" for="phase-temperature">
+      <span>{ui.temperature}</span>
+      <output id="phase-temperature-output">373 K</output>
+      <input id="phase-temperature" type="range" min="40" max="720" step="1" value="373" />
+    </label>
+
+    <label class="phase-field" for="phase-pressure">
+      <span>{ui.pressure}</span>
+      <output id="phase-pressure-output">0.10 MPa</output>
+      <input id="phase-pressure" type="range" min="-3" max="1.45" step="0.01" value="-1" />
+    </label>
+
+    <button type="button" id="phase-reset">{ui.reset}</button>
+  </section>
+
+  <section class="phase-map-shell" aria-label={ui.diagram}>
+    <div class="phase-map-frame">
+      <span class="phase-axis-label phase-axis-label-y" aria-hidden="true">{ui.pressure}</span>
+      <svg class="phase-map" id="phase-map" viewBox="0 0 820 560" role="img" aria-label={ui.diagram}>
+      <defs>
+        <linearGradient id="phase-supercritical-glow" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#ffcf5a" stop-opacity="0.18"></stop>
+          <stop offset="100%" stop-color="#4fd6b5" stop-opacity="0.3"></stop>
+        </linearGradient>
+        <filter id="phase-soft-glow" x="-30%" y="-30%" width="160%" height="160%">
+          <feGaussianBlur stdDeviation="8" result="glow"></feGaussianBlur>
+          <feMerge>
+            <feMergeNode in="glow"></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+      </defs>
+      <rect class="phase-region phase-region-gas" x="46" y="72" width="730" height="410" rx="14"></rect>
+      <path class="phase-region phase-region-solid" id="phase-solid-region"></path>
+      <path class="phase-region phase-region-liquid" id="phase-liquid-region"></path>
+      <path class="phase-region phase-region-supercritical" id="phase-super-region"></path>
+      <path class="phase-grid" d="M46 482 H776 M46 379.5 H776 M46 277 H776 M46 174.5 H776 M46 72 H776 M46 72 V482 M228.5 72 V482 M411 72 V482 M593.5 72 V482 M776 72 V482"></path>
+      <path class="phase-boundary phase-vapor" id="phase-vapor-curve"></path>
+      <path class="phase-boundary phase-melt" id="phase-melt-line"></path>
+      <g class="phase-point phase-triple" id="phase-triple-point">
+        <circle r="7"></circle>
+        <text x="15" y="24">{ui.triplePoint}</text>
+      </g>
+      <g class="phase-point phase-critical" id="phase-critical-point">
+        <circle r="9"></circle>
+        <text x="-106" y="-24">{ui.criticalPoint}</text>
+      </g>
+      <g class="phase-sample-marker" id="phase-sample-marker">
+        <circle class="phase-sample-trail phase-sample-trail-outer" r="38"></circle>
+        <circle class="phase-sample-trail phase-sample-trail-inner" r="22"></circle>
+        <circle class="phase-sample-dot" r="7"></circle>
+      </g>
+      <text class="phase-region-label phase-label-solid" id="phase-label-solid">{ui.solid}</text>
+      <text class="phase-region-label phase-label-liquid" id="phase-label-liquid">{ui.liquid}</text>
+      <text class="phase-region-label phase-label-gas" id="phase-label-gas">{ui.gas}</text>
+      <text class="phase-region-label phase-label-super" id="phase-label-super">{ui.supercritical}</text>
+      </svg>
+      <span class="phase-axis-label phase-axis-label-x" aria-hidden="true">{ui.temperature}</span>
+    </div>
+  </section>
+
+  <section class="phase-panel phase-readout" aria-label={ui.sample}>
+    <span>{ui.phase}</span>
+    <strong id="phase-state">{ui.liquid}</strong>
+    <p id="phase-coordinates">{ui.coordinates}: 373 K / 0.10 MPa</p>
+
+    <div class="phase-meter">
+      <div>
+        <span>{ui.latentHeat}</span>
+        <output id="phase-latent-output">0.82</output>
+      </div>
+      <i id="phase-latent-bar"></i>
+    </div>
+
+    <div class="phase-meter">
+      <div>
+        <span>{ui.criticalProximity}</span>
+        <output id="phase-critical-output">0.18</output>
+      </div>
+      <i id="phase-critical-bar"></i>
+    </div>
+
+    <div class="phase-coexistence" aria-label={ui.interpretation}>
+      <div class="phase-coexistence-head">
+        <span>{ui.purePhase}</span>
+        <output id="phase-coexistence-output">12%</output>
+        <span>{ui.coexistence}</span>
+      </div>
+      <div class="phase-coexistence-axis">
+        <i id="phase-coexistence-marker"></i>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import {
+    buildPhaseCurve,
+    classifyPhase,
+    formatPressureForUnits,
+    formatTemperatureForUnits,
+    getSubstance,
+    meltingPressureAt,
+    vaporPressureAt,
+  } from './logic';
+
+  const substanceSelect = document.getElementById('phase-substance') as HTMLSelectElement | null;
+  const unitsSelect = document.getElementById('phase-units') as HTMLSelectElement | null;
+  const temperatureInput = document.getElementById('phase-temperature') as HTMLInputElement | null;
+  const pressureInput = document.getElementById('phase-pressure') as HTMLInputElement | null;
+  const temperatureOutput = document.getElementById('phase-temperature-output');
+  const pressureOutput = document.getElementById('phase-pressure-output');
+  const resetButton = document.getElementById('phase-reset');
+  const vaporCurve = document.getElementById('phase-vapor-curve');
+  const meltLine = document.getElementById('phase-melt-line');
+  const solidRegion = document.getElementById('phase-solid-region');
+  const liquidRegion = document.getElementById('phase-liquid-region');
+  const superRegion = document.getElementById('phase-super-region');
+  const triplePoint = document.getElementById('phase-triple-point');
+  const criticalPoint = document.getElementById('phase-critical-point');
+  const sampleMarker = document.getElementById('phase-sample-marker');
+  const stateOutput = document.getElementById('phase-state');
+  const coordinatesOutput = document.getElementById('phase-coordinates');
+  const latentOutput = document.getElementById('phase-latent-output');
+  const criticalOutput = document.getElementById('phase-critical-output');
+  const latentBar = document.getElementById('phase-latent-bar');
+  const criticalBar = document.getElementById('phase-critical-bar');
+  const coexistenceOutput = document.getElementById('phase-coexistence-output');
+  const coexistenceMarker = document.getElementById('phase-coexistence-marker');
+  const coexistenceAxis = document.querySelector('.phase-coexistence-axis') as HTMLElement | null;
+  const storageKey = 'phase-diagram-critical-points:last-state';
+
+  const plot = {
+    left: 46,
+    top: 72,
+    width: 730,
+    height: 410,
+  };
+  const phaseLabelNodes = {
+    solid: document.getElementById('phase-label-solid'),
+    liquid: document.getElementById('phase-label-liquid'),
+    gas: document.getElementById('phase-label-gas'),
+    supercritical: document.getElementById('phase-label-super'),
+  };
+
+  const labels = {
+    solid: document.getElementById('phase-label-solid')?.textContent ?? 'Solid',
+    liquid: document.getElementById('phase-label-liquid')?.textContent ?? 'Liquid',
+    gas: document.getElementById('phase-label-gas')?.textContent ?? 'Gas',
+    supercritical: document.getElementById('phase-label-super')?.textContent ?? 'Supercritical',
+  };
+
+  function pressureFromSlider() {
+    return 10 ** Number(pressureInput?.value ?? -1);
+  }
+
+  function currentSubstance() {
+    return getSubstance(substanceSelect?.value ?? 'water');
+  }
+
+  function currentUnits() {
+    return (unitsSelect?.value ?? 'scientific') as 'scientific' | 'metric' | 'imperial';
+  }
+
+  function xForTemperature(temperature: number, minTemperature: number, maxTemperature: number) {
+    return plot.left + ((temperature - minTemperature) / (maxTemperature - minTemperature)) * plot.width;
+  }
+
+  function yForPressure(pressure: number, minPressure: number, maxPressure: number) {
+    const logMin = Math.log10(minPressure);
+    const logMax = Math.log10(maxPressure);
+    const progress = (Math.log10(Math.max(minPressure, pressure)) - logMin) / (logMax - logMin);
+
+    return plot.top + plot.height - progress * plot.height;
+  }
+
+  function pathFromPoints(points: { x: number; y: number }[]) {
+    return points.map((point, index) => `${index === 0 ? 'M' : 'L'}${point.x.toFixed(1)} ${point.y.toFixed(1)}`).join(' ');
+  }
+
+  function setAttribute(node: Element | null, name: string, value: string) {
+    node?.setAttribute(name, value);
+  }
+
+  function setText(node: Element | null, value: string) {
+    if (node) node.textContent = value;
+  }
+
+  function setCssValue(node: HTMLElement | null, name: string, value: string) {
+    node?.style.setProperty(name, value);
+  }
+
+  function updateSliderFill(input: HTMLInputElement | null) {
+    if (!input) return;
+    const min = Number(input.min);
+    const max = Number(input.max);
+    const value = Number(input.value);
+    input.style.setProperty('--fill', `${((value - min) / (max - min)) * 100}%`);
+  }
+
+  function boundaryCoexistence(substance: ReturnType<typeof getSubstance>, temperature: number, pressure: number) {
+    const vaporPressure = vaporPressureAt(substance, temperature);
+    const vaporDistance = Math.abs(Math.log10(Math.max(0.001, pressure)) - Math.log10(Math.max(0.001, vaporPressure)));
+    const meltPressure = meltingPressureAt(substance, temperature);
+    const meltDistance = Math.abs(Math.log10(Math.max(0.001, pressure)) - Math.log10(Math.max(0.001, meltPressure)));
+    const temperatureWindow = Math.abs(temperature - substance.tripleTemperature) < substance.criticalTemperature * 0.5;
+    const nearestDistance = Math.min(vaporDistance, temperatureWindow ? meltDistance : 99);
+
+    return Math.max(0, Math.min(1, 1 - nearestDistance / 0.22));
+  }
+
+  function readSavedState() {
+    try {
+      const rawState = window.localStorage.getItem(storageKey);
+      return rawState ? JSON.parse(rawState) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  function saveState() {
+    try {
+      window.localStorage.setItem(storageKey, JSON.stringify({
+        substance: substanceSelect?.value,
+        units: unitsSelect?.value,
+        temperature: temperatureInput?.value,
+        pressure: pressureInput?.value,
+      }));
+    } catch {
+    }
+  }
+
+  function getPlotBounds(substance: ReturnType<typeof getSubstance>) {
+    return {
+      minTemperature: Math.max(35, substance.tripleTemperature * 0.55),
+      maxTemperature: substance.criticalTemperature * 1.18,
+      minPressure: Math.max(0.001, substance.triplePressure * 0.2),
+      maxPressure: substance.criticalPressure * 1.45,
+    };
+  }
+
+  function pointForValues(temperature: number, pressure: number, bounds: ReturnType<typeof getPlotBounds>) {
+    return {
+      x: xForTemperature(temperature, bounds.minTemperature, bounds.maxTemperature),
+      y: yForPressure(pressure, bounds.minPressure, bounds.maxPressure),
+    };
+  }
+
+  function buildGeometry(substance: ReturnType<typeof getSubstance>) {
+    const bounds = getPlotBounds(substance);
+    const minTemperature = Math.max(35, substance.tripleTemperature * 0.55);
+    const maxTemperature = substance.criticalTemperature * 1.18;
+    const curve = buildPhaseCurve(substance).map((point) => ({
+      x: xForTemperature(point.temperature, bounds.minTemperature, bounds.maxTemperature),
+      y: yForPressure(point.pressure, bounds.minPressure, bounds.maxPressure),
+    }));
+    const triple = pointForValues(substance.tripleTemperature, substance.triplePressure, bounds);
+    const critical = pointForValues(substance.criticalTemperature, substance.criticalPressure, bounds);
+    const meltTopTemperature = substance.tripleTemperature
+      + Math.sign(substance.fusionSlope) * (maxTemperature - minTemperature) * 0.24;
+    const meltTop = pointForValues(meltTopTemperature, bounds.maxPressure, bounds);
+    const meltLower = pointForValues(substance.tripleTemperature - 46, bounds.minPressure, bounds);
+
+    return { bounds, curve, triple, critical, meltTop, meltLower };
+  }
+
+  function drawPhaseGeometry(geometry: ReturnType<typeof buildGeometry>) {
+    const { curve, triple, critical, meltTop, meltLower } = geometry;
+    vaporCurve?.setAttribute('d', pathFromPoints(curve));
+    meltLine?.setAttribute('d', pathFromPoints([meltLower, triple, meltTop]));
+    solidRegion?.setAttribute('d', `M${plot.left} ${plot.top} H${meltTop.x.toFixed(1)} L${triple.x.toFixed(1)} ${triple.y.toFixed(1)} L${meltLower.x.toFixed(1)} ${plot.top + plot.height} H${plot.left} Z`);
+    liquidRegion?.setAttribute('d', `M${triple.x.toFixed(1)} ${triple.y.toFixed(1)} L${meltTop.x.toFixed(1)} ${plot.top} H${plot.left + plot.width} V${critical.y.toFixed(1)} L${critical.x.toFixed(1)} ${critical.y.toFixed(1)} ${pathFromPoints(curve.slice().reverse()).replace('M', 'L')} Z`);
+    superRegion?.setAttribute('d', `M${critical.x.toFixed(1)} ${plot.top} H${plot.left + plot.width} V${critical.y.toFixed(1)} H${critical.x.toFixed(1)} Z`);
+    triplePoint?.setAttribute('transform', `translate(${triple.x.toFixed(1)} ${triple.y.toFixed(1)})`);
+    criticalPoint?.setAttribute('transform', `translate(${critical.x.toFixed(1)} ${critical.y.toFixed(1)})`);
+  }
+
+  function positionRegionLabels(critical: { x: number; y: number }) {
+    setAttribute(phaseLabelNodes.solid, 'x', `${plot.left + 64}`);
+    setAttribute(phaseLabelNodes.solid, 'y', `${plot.top + 80}`);
+    setAttribute(phaseLabelNodes.liquid, 'x', `${Math.min(plot.left + plot.width - 162, critical.x - 118)}`);
+    setAttribute(phaseLabelNodes.liquid, 'y', `${plot.top + 126}`);
+    setAttribute(phaseLabelNodes.gas, 'x', `${plot.left + plot.width - 124}`);
+    setAttribute(phaseLabelNodes.gas, 'y', `${plot.top + plot.height - 54}`);
+    setAttribute(phaseLabelNodes.supercritical, 'x', `${Math.min(critical.x + 14, plot.left + plot.width - 168)}`);
+    setAttribute(phaseLabelNodes.supercritical, 'y', `${Math.max(plot.top + 42, critical.y + 38)}`);
+  }
+
+  function updateSampleReadout(substance: ReturnType<typeof getSubstance>, geometry: ReturnType<typeof buildGeometry>) {
+    const temperature = Number(temperatureInput?.value ?? substance.normalBoilingPoint);
+    const pressure = pressureFromSlider();
+    const sample = classifyPhase(substance, { temperature, pressure });
+    const samplePoint = pointForValues(temperature, pressure, geometry.bounds);
+    const meltPressure = meltingPressureAt(substance, temperature);
+    const coexistence = boundaryCoexistence(substance, temperature, pressure);
+
+    setAttribute(sampleMarker, 'transform', `translate(${samplePoint.x.toFixed(1)} ${samplePoint.y.toFixed(1)})`);
+    setAttribute(sampleMarker, 'data-phase', sample.phase);
+    setText(stateOutput, labels[sample.phase]);
+    setText(coordinatesOutput, `${formatTemperatureForUnits(temperature, currentUnits())} / ${formatPressureForUnits(pressure, currentUnits())}`);
+    setText(temperatureOutput, formatTemperatureForUnits(temperature, currentUnits()));
+    setText(pressureOutput, formatPressureForUnits(pressure, currentUnits()));
+    setText(latentOutput, sample.latentHeatIndex.toFixed(2));
+    setText(criticalOutput, sample.proximityToCritical.toFixed(2));
+    setText(coexistenceOutput, `${Math.round(coexistence * 100)}%`);
+    setCssValue(latentBar, '--value', `${sample.latentHeatIndex}`);
+    setCssValue(criticalBar, '--value', `${sample.proximityToCritical}`);
+    setCssValue(coexistenceMarker, '--value', `${coexistence}`);
+    setCssValue(coexistenceAxis, '--coexistence', `${coexistence}`);
+    document.getElementById('phase-lab')?.style.setProperty('--melt-pressure', `${meltPressure}`);
+    updateSliderFill(temperatureInput);
+    updateSliderFill(pressureInput);
+    saveState();
+  }
+
+  function drawDiagram() {
+    const substance = currentSubstance();
+    const geometry = buildGeometry(substance);
+
+    drawPhaseGeometry(geometry);
+    positionRegionLabels(geometry.critical);
+    updateSampleReadout(substance, geometry);
+  }
+
+  function resetForSubstance(savedState?: { temperature?: string; pressure?: string }) {
+    const substance = currentSubstance();
+    if (temperatureInput) {
+      temperatureInput.min = `${Math.max(40, Math.floor(substance.tripleTemperature * 0.55))}`;
+      temperatureInput.max = `${Math.ceil(substance.criticalTemperature * 1.18)}`;
+      temperatureInput.value = savedState?.temperature ?? `${Math.round(substance.normalBoilingPoint)}`;
+    }
+    if (pressureInput) {
+      pressureInput.min = `${Math.log10(Math.max(0.001, substance.triplePressure * 0.2)).toFixed(2)}`;
+      pressureInput.max = `${Math.log10(substance.criticalPressure * 1.45).toFixed(2)}`;
+      pressureInput.value = savedState?.pressure ?? `${Math.log10(Math.min(0.101, substance.criticalPressure * 0.72)).toFixed(2)}`;
+    }
+    drawDiagram();
+  }
+
+  function hydrateSavedState() {
+    const savedState = readSavedState();
+    if (!savedState) {
+      resetForSubstance();
+      return;
+    }
+
+    if (savedState.substance && substanceSelect) {
+      substanceSelect.value = savedState.substance;
+    }
+
+    if (savedState.units && unitsSelect) {
+      unitsSelect.value = savedState.units;
+    }
+
+    resetForSubstance({
+      temperature: savedState.temperature,
+      pressure: savedState.pressure,
+    });
+  }
+
+  substanceSelect?.addEventListener('change', () => resetForSubstance());
+  unitsSelect?.addEventListener('change', drawDiagram);
+  temperatureInput?.addEventListener('input', drawDiagram);
+  pressureInput?.addEventListener('input', drawDiagram);
+  resetButton?.addEventListener('click', () => resetForSubstance());
+  hydrateSavedState();
+</script>

package/src/tool/phase-diagram-critical-points/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const phaseDiagramCriticalPoints: ScienceToolEntry = {
+  id: 'phase-diagram-critical-points',
+  icons: {
+    bg: 'mdi:chart-bell-curve-cumulative',
+    fg: 'mdi:state-machine',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};