@jjlmoya/utils-science 1.28.0 → 1.30.0

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

@@ -0,0 +1,179 @@
+export interface SubstanceProfile {
+  id: string;
+  name: string;
+  tripleTemperature: number;
+  triplePressure: number;
+  criticalTemperature: number;
+  criticalPressure: number;
+  normalBoilingPoint: number;
+  fusionSlope: number;
+}
+
+export interface PhasePoint {
+  temperature: number;
+  pressure: number;
+}
+
+export interface PhaseSample extends PhasePoint {
+  phase: 'solid' | 'liquid' | 'gas' | 'supercritical';
+  proximityToCritical: number;
+  latentHeatIndex: number;
+}
+
+export const SUBSTANCES: SubstanceProfile[] = [
+  {
+    id: 'water',
+    name: 'Water',
+    tripleTemperature: 273.16,
+    triplePressure: 0.006,
+    criticalTemperature: 647.1,
+    criticalPressure: 22.06,
+    normalBoilingPoint: 373.15,
+    fusionSlope: -0.075,
+  },
+  {
+    id: 'carbon-dioxide',
+    name: 'Carbon dioxide',
+    tripleTemperature: 216.58,
+    triplePressure: 0.518,
+    criticalTemperature: 304.13,
+    criticalPressure: 7.38,
+    normalBoilingPoint: 194.67,
+    fusionSlope: 0.18,
+  },
+  {
+    id: 'nitrogen',
+    name: 'Nitrogen',
+    tripleTemperature: 63.15,
+    triplePressure: 0.0125,
+    criticalTemperature: 126.2,
+    criticalPressure: 3.4,
+    normalBoilingPoint: 77.36,
+    fusionSlope: 0.09,
+  },
+];
+
+export function getSubstance(id: string): SubstanceProfile {
+  return SUBSTANCES.find((substance) => substance.id === id) ?? SUBSTANCES[0];
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function vaporPressureAt(substance: SubstanceProfile, temperature: number): number {
+  const span = substance.criticalTemperature - substance.tripleTemperature;
+  const progress = clamp((temperature - substance.tripleTemperature) / span, 0, 1);
+  const curved = Math.pow(progress, 1.52);
+  const logTriple = Math.log10(substance.triplePressure);
+  const logCritical = Math.log10(substance.criticalPressure);
+
+  return 10 ** (logTriple + (logCritical - logTriple) * curved);
+}
+
+export function meltingPressureAt(substance: SubstanceProfile, temperature: number): number {
+  const delta = temperature - substance.tripleTemperature;
+  const pressure = substance.triplePressure + delta * substance.fusionSlope;
+
+  return clamp(pressure, 0.001, substance.criticalPressure * 1.4);
+}
+
+function metricsForPhase(substance: SubstanceProfile, point: PhasePoint) {
+  const criticalDistance = Math.hypot(
+    (point.temperature - substance.criticalTemperature) / substance.criticalTemperature,
+    (point.pressure - substance.criticalPressure) / substance.criticalPressure,
+  );
+  const proximityToCritical = clamp(1 - criticalDistance * 3.2, 0, 1);
+
+  return {
+    proximityToCritical,
+    latentHeatIndex: clamp(1 - proximityToCritical, 0, 1),
+  };
+}
+
+function lowTemperaturePhase(substance: SubstanceProfile, point: PhasePoint): PhaseSample['phase'] {
+  const sublimationPressure = vaporPressureAt(substance, substance.tripleTemperature)
+    * Math.exp((point.temperature - substance.tripleTemperature) / Math.max(18, substance.tripleTemperature * 0.18));
+
+  return point.pressure >= sublimationPressure ? 'solid' : 'gas';
+}
+
+function isSolidAboveMeltingLine(substance: SubstanceProfile, point: PhasePoint): boolean {
+  return substance.fusionSlope > 0
+    && point.pressure > meltingPressureAt(substance, point.temperature)
+    && point.temperature < substance.criticalTemperature * 0.92;
+}
+
+function determinePhase(substance: SubstanceProfile, point: PhasePoint): PhaseSample['phase'] {
+  if (point.temperature >= substance.criticalTemperature && point.pressure >= substance.criticalPressure) {
+    return 'supercritical';
+  }
+
+  if (point.temperature < substance.tripleTemperature) {
+    return lowTemperaturePhase(substance, point);
+  }
+
+  if (isSolidAboveMeltingLine(substance, point)) {
+    return 'solid';
+  }
+
+  const vaporPressure = vaporPressureAt(substance, point.temperature);
+  return point.pressure >= vaporPressure ? 'liquid' : 'gas';
+}
+
+export function classifyPhase(substance: SubstanceProfile, point: PhasePoint): PhaseSample {
+  const { proximityToCritical, latentHeatIndex } = metricsForPhase(substance, point);
+  const phase = determinePhase(substance, point);
+
+  return { ...point, phase, proximityToCritical, latentHeatIndex };
+}
+
+export function buildPhaseCurve(substance: SubstanceProfile, steps = 72): PhasePoint[] {
+  return Array.from({ length: steps }, (_, index) => {
+    const progress = index / (steps - 1);
+    const temperature = substance.tripleTemperature
+      + (substance.criticalTemperature - substance.tripleTemperature) * progress;
+
+    return {
+      temperature,
+      pressure: vaporPressureAt(substance, temperature),
+    };
+  });
+}
+
+export function formatTemperature(value: number): string {
+  return `${Math.round(value)} K`;
+}
+
+export function formatPressure(value: number): string {
+  if (value < 0.1) return `${value.toFixed(3)} MPa`;
+  if (value < 10) return `${value.toFixed(2)} MPa`;
+  return `${value.toFixed(1)} MPa`;
+}
+
+export type UnitSystem = 'scientific' | 'metric' | 'imperial';
+
+export function formatTemperatureForUnits(valueKelvin: number, unitSystem: UnitSystem): string {
+  if (unitSystem === 'metric') {
+    return `${Math.round(valueKelvin - 273.15)} C`;
+  }
+
+  if (unitSystem === 'imperial') {
+    return `${Math.round((valueKelvin - 273.15) * (9 / 5) + 32)} F`;
+  }
+
+  return formatTemperature(valueKelvin);
+}
+
+export function formatPressureForUnits(valueMpa: number, unitSystem: UnitSystem): string {
+  if (unitSystem === 'metric') {
+    const kpa = valueMpa * 1000;
+    return kpa >= 1000 ? `${(kpa / 1000).toFixed(2)} MPa` : `${kpa.toFixed(1)} kPa`;
+  }
+
+  if (unitSystem === 'imperial') {
+    return `${(valueMpa * 145.038).toFixed(1)} psi`;
+  }
+
+  return formatPressure(valueMpa);
+}

package/src/tool/phase-diagram-critical-points/phase-diagram-critical-points-visualizer.css

@@ -0,0 +1,557 @@
+.phase-lab {
+  --phase-ink: #182028;
+  --phase-muted: rgba(24, 32, 40, 0.62);
+  --phase-panel: rgba(255, 255, 255, 0.72);
+  --phase-line: rgba(24, 32, 40, 0.12);
+  --phase-hairline: rgba(24, 32, 40, 0.09);
+  --phase-label: #5f6b70;
+  --phase-track: rgba(24, 32, 40, 0.25);
+  --phase-solid: #8ea3b0;
+  --phase-liquid: #2e8bc0;
+  --phase-gas: #e3b341;
+  --phase-super: #36b18f;
+  --phase-critical: #e65355;
+
+  display: grid;
+  gap: 1rem;
+  width: min(100%, 1180px);
+  padding: clamp(1rem, 3vw, 1.7rem);
+  color: var(--phase-ink);
+  background:
+    linear-gradient(135deg, rgba(227, 179, 65, 0.18), transparent 32%),
+    linear-gradient(225deg, rgba(54, 177, 143, 0.18), transparent 34%),
+    #eef3f1;
+  border: 1px solid rgba(24, 32, 40, 0.08);
+  border-radius: 8px;
+  box-shadow: 0 28px 70px rgba(32, 58, 64, 0.16);
+}
+
+.theme-dark .phase-lab {
+  --phase-ink: #f7fbf7;
+  --phase-muted: rgba(247, 251, 247, 0.66);
+  --phase-panel: rgba(8, 16, 20, 0.74);
+  --phase-line: rgba(247, 251, 247, 0.13);
+  --phase-hairline: rgba(247, 251, 247, 0.11);
+  --phase-label: rgba(247, 251, 247, 0.58);
+  --phase-track: rgba(247, 251, 247, 0.24);
+
+  background:
+    linear-gradient(135deg, rgba(227, 179, 65, 0.18), transparent 32%),
+    linear-gradient(225deg, rgba(54, 177, 143, 0.22), transparent 34%),
+    #081014;
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
+}
+
+.phase-panel,
+.phase-map-shell {
+  min-width: 0;
+}
+
+.phase-panel {
+  display: grid;
+  gap: 1.15rem;
+  align-content: start;
+  padding: 0.25rem 0.1rem;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.phase-field {
+  display: grid;
+  gap: 0.62rem;
+  padding-bottom: 1.05rem;
+  border-bottom: 1px solid var(--phase-hairline);
+}
+
+.phase-field span,
+.phase-readout > span,
+.phase-meter span,
+.phase-coexistence-head span {
+  color: var(--phase-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.phase-field output,
+.phase-readout strong {
+  font-weight: 760;
+  line-height: 0.92;
+}
+
+.phase-field output {
+  font-size: clamp(1.65rem, 7vw, 3rem);
+}
+
+.phase-field select {
+  width: 100%;
+  min-height: 42px;
+  padding: 0 2.2rem 0 0.45rem;
+  color: var(--phase-ink);
+  appearance: none;
+  background:
+    linear-gradient(45deg, transparent 50%, currentcolor 50%) right 0.92rem center / 6px 6px no-repeat,
+    linear-gradient(135deg, currentcolor 50%, transparent 50%) right 0.58rem center / 6px 6px no-repeat;
+  border: 0;
+  border-bottom: 1px solid var(--phase-line);
+  border-radius: 0;
+  font-weight: 700;
+}
+
+.theme-dark .phase-field select {
+  color: var(--phase-ink);
+  background:
+    linear-gradient(45deg, transparent 50%, currentcolor 50%) right 0.92rem center / 6px 6px no-repeat,
+    linear-gradient(135deg, currentcolor 50%, transparent 50%) right 0.58rem center / 6px 6px no-repeat,
+    #081014;
+}
+
+.phase-field select option {
+  color: #182028;
+  background: #eef3f1;
+}
+
+.theme-dark .phase-field select option {
+  color: #f7fbf7;
+  background: #081014;
+}
+
+.phase-field input[type='range'] {
+  --fill: 50%;
+
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+}
+
+.phase-field input[type='range']::-webkit-slider-runnable-track {
+  height: 2px;
+  border-radius: 0;
+  background:
+    linear-gradient(90deg, var(--phase-ink) 0, var(--phase-ink) var(--fill), var(--phase-track) var(--fill), var(--phase-track) 100%);
+}
+
+.phase-field input[type='range']::-webkit-slider-thumb {
+  width: 13px;
+  height: 13px;
+  margin-top: -5.5px;
+  border: 2px solid var(--phase-ink);
+  border-radius: 50%;
+  appearance: none;
+  background: var(--phase-panel);
+  box-shadow: none;
+  cursor: grab;
+}
+
+.phase-field input[type='range']::-moz-range-track {
+  height: 2px;
+  border-radius: 0;
+  background: var(--phase-track);
+}
+
+.phase-field input[type='range']::-moz-range-progress {
+  height: 2px;
+  border-radius: 0;
+  background: var(--phase-ink);
+}
+
+.phase-field input[type='range']::-moz-range-thumb {
+  width: 13px;
+  height: 13px;
+  border: 2px solid var(--phase-ink);
+  border-radius: 50%;
+  background: var(--phase-panel);
+  box-shadow: none;
+  cursor: grab;
+}
+
+#phase-reset {
+  justify-self: start;
+  min-height: 32px;
+  padding: 0;
+  color: var(--phase-muted);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  opacity: 0.62;
+  transition: opacity 160ms ease;
+}
+
+#phase-reset:hover {
+  opacity: 1;
+}
+
+.theme-dark #phase-reset {
+  color: var(--phase-muted);
+  background: transparent;
+}
+
+.phase-map-shell {
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.phase-map-frame {
+  position: relative;
+  padding: 0 0 1.05rem 1.1rem;
+}
+
+.theme-dark .phase-map-shell {
+  background: transparent;
+}
+
+.phase-map {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: clamp(390px, 52vw, 560px);
+}
+
+.phase-axis-label {
+  position: absolute;
+  color: var(--phase-muted);
+  font-size: 0.58rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  opacity: 0.58;
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+.phase-axis-label-y {
+  top: 50%;
+  left: 0;
+  transform: translate(-48%, -50%) rotate(-90deg);
+  transform-origin: center;
+}
+
+.phase-axis-label-x {
+  bottom: 0;
+  left: calc(1.1rem + 50%);
+  transform: translateX(-50%);
+}
+
+.phase-region {
+  stroke: none;
+}
+
+.phase-region-gas {
+  fill: rgba(227, 179, 65, 0.06);
+}
+
+.phase-region-solid {
+  fill: rgba(142, 163, 176, 0.08);
+}
+
+.phase-region-liquid {
+  fill: rgba(46, 139, 192, 0.07);
+}
+
+.phase-region-supercritical {
+  fill: rgba(54, 177, 143, 0.07);
+}
+
+.phase-grid {
+  fill: none;
+  stroke: var(--phase-hairline);
+  stroke-width: 1;
+}
+
+.phase-boundary {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.phase-vapor {
+  stroke: var(--phase-critical);
+  stroke-width: 1.5;
+}
+
+.phase-melt {
+  stroke: var(--phase-ink);
+  stroke-width: 1.5;
+  stroke-dasharray: 8 10;
+  opacity: 0.62;
+}
+
+.phase-point circle {
+  fill: var(--phase-ink);
+  stroke: #fff;
+  stroke-width: 2;
+}
+
+.phase-critical circle {
+  fill: var(--phase-critical);
+}
+
+.phase-point text,
+.phase-region-label {
+  fill: var(--phase-ink);
+  font-weight: 800;
+}
+
+.phase-point text {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  opacity: 0.5;
+  paint-order: stroke;
+  stroke: #eef3f1;
+  stroke-width: 4px;
+  stroke-linejoin: round;
+  text-transform: uppercase;
+}
+
+.theme-dark .phase-point text {
+  stroke: #081014;
+}
+
+.phase-region-label {
+  fill: var(--phase-label);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  opacity: 0.5;
+  paint-order: stroke;
+  stroke: rgba(238, 243, 241, 0.7);
+  stroke-width: 4px;
+  stroke-linejoin: round;
+  text-transform: uppercase;
+}
+
+.theme-dark .phase-region-label {
+  stroke: rgba(8, 16, 20, 0.74);
+}
+
+.phase-sample-marker {
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.phase-sample-trail {
+  fill: none;
+  stroke: var(--phase-critical);
+  transform-origin: center;
+}
+
+.phase-sample-trail-outer {
+  stroke-width: 1;
+  opacity: 0.26;
+  animation: phase-pulse 1800ms ease-in-out infinite;
+}
+
+.phase-sample-trail-inner {
+  stroke-width: 4;
+  stroke-dasharray: 7 10;
+  opacity: 0.36;
+  animation: phase-spin 5200ms linear infinite;
+}
+
+.phase-sample-dot {
+  fill: var(--phase-critical);
+  stroke: #fff;
+  stroke-width: 3;
+}
+
+.phase-sample-marker[data-phase='solid'] .phase-sample-dot {
+  fill: var(--phase-solid);
+}
+
+.phase-sample-marker[data-phase='liquid'] .phase-sample-dot {
+  fill: var(--phase-liquid);
+}
+
+.phase-sample-marker[data-phase='gas'] .phase-sample-dot {
+  fill: var(--phase-gas);
+}
+
+.phase-sample-marker[data-phase='supercritical'] .phase-sample-dot {
+  fill: var(--phase-super);
+}
+
+.phase-readout {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  align-content: start;
+  padding-top: 1rem;
+  border-top: 1px solid var(--phase-hairline);
+}
+
+.phase-readout strong {
+  display: block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  font-size: clamp(2.2rem, 7vw, 4.2rem);
+}
+
+.phase-readout p {
+  margin: 0;
+  color: var(--phase-muted);
+  line-height: 1.55;
+}
+
+.phase-meter {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--phase-hairline);
+}
+
+.phase-meter div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.phase-meter output {
+  font-weight: 800;
+}
+
+.phase-meter i {
+  --value: 0;
+
+  display: block;
+  height: 4px;
+  overflow: hidden;
+  background: rgba(24, 32, 40, 0.12);
+  border-radius: 0;
+}
+
+.phase-meter i::before {
+  display: block;
+  width: calc(var(--value) * 100%);
+  height: 100%;
+  background: linear-gradient(90deg, var(--phase-gas), var(--phase-critical), var(--phase-super));
+  content: "";
+}
+
+.phase-coexistence {
+  display: grid;
+  gap: 0.65rem;
+  min-width: 0;
+  overflow: hidden;
+  padding-top: 0.8rem;
+  border-top: 1px solid var(--phase-hairline);
+}
+
+.phase-coexistence-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 0.65rem;
+  align-items: center;
+}
+
+.phase-coexistence-head span,
+.phase-coexistence-head output {
+  color: var(--phase-muted);
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  min-width: 0;
+  text-transform: uppercase;
+}
+
+.phase-coexistence-head span:last-child {
+  text-align: right;
+}
+
+.phase-coexistence-head output {
+  color: var(--phase-ink);
+}
+
+.phase-coexistence-axis {
+  position: relative;
+  width: 100%;
+  height: 24px;
+}
+
+.phase-coexistence-axis::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--phase-track);
+  content: "";
+}
+
+.phase-coexistence-axis::after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: calc(var(--coexistence, 0) * 100%);
+  height: 1px;
+  background: var(--phase-critical);
+  box-shadow: 0 0 14px rgba(230, 83, 85, 0.26);
+  content: "";
+}
+
+.phase-coexistence-axis i {
+  --value: 0;
+
+  position: absolute;
+  top: 50%;
+  left: calc(var(--value) * 100%);
+  width: 9px;
+  height: 9px;
+  background: var(--phase-critical);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: left 260ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes phase-pulse {
+  0%,
+  100% {
+    opacity: 0.16;
+    transform: scale(0.9);
+  }
+
+  50% {
+    opacity: 0.34;
+    transform: scale(1.12);
+  }
+}
+
+@keyframes phase-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (min-width: 900px) {
+  .phase-lab {
+    grid-template-columns: minmax(190px, 0.44fr) minmax(0, 1.9fr) minmax(230px, 0.54fr);
+    align-items: stretch;
+  }
+
+  .phase-controls {
+    padding-right: clamp(0rem, 2vw, 1rem);
+    border-right: 1px solid var(--phase-hairline);
+  }
+
+  .phase-readout {
+    padding-top: 0.25rem;
+    padding-left: clamp(0rem, 2vw, 1rem);
+    border-top: 0;
+    border-left: 1px solid var(--phase-hairline);
+  }
+
+  .phase-readout strong {
+    font-size: clamp(2.25rem, 4.1vw, 3.35rem);
+  }
+}