@jjlmoya/utils-science 1.24.0 → 1.25.0

package/src/tool/stellar-habitability-zone/logic/StellarHabitabilityEngine.ts

@@ -0,0 +1,158 @@
+export interface StellarPreset {
+  type: string;
+  name: string;
+  temperature: number;
+  luminosity: number;
+  mass: number;
+  radius: number;
+  color: string;
+}
+
+export interface HabitabilityLimits {
+  recentVenus: number;
+  runawayGreenhouse: number;
+  maximumGreenhouse: number;
+  earlyMars: number;
+}
+
+export interface SimulationResult {
+  hzLimits: HabitabilityLimits;
+  equilibriumTemperature: number;
+  surfaceTemperature: number;
+  orbitalPeriod: number;
+  orbitalVelocity: number;
+  stellarFlux: number;
+  status: 'too-hot' | 'habitable' | 'too-cold';
+}
+
+export const STELLAR_PRESETS: StellarPreset[] = [
+  {
+    type: 'O',
+    name: 'O-Type (Blue Hypergiant)',
+    temperature: 40000,
+    luminosity: 100000,
+    mass: 50,
+    radius: 15,
+    color: '#00bfff',
+  },
+  {
+    type: 'B',
+    name: 'B-Type (Blue Giant)',
+    temperature: 20000,
+    luminosity: 1000,
+    mass: 8,
+    radius: 4,
+    color: '#87cefa',
+  },
+  {
+    type: 'A',
+    name: 'A-Type (Sirius-like)',
+    temperature: 8500,
+    luminosity: 20,
+    mass: 2.1,
+    radius: 1.7,
+    color: '#e0ffff',
+  },
+  {
+    type: 'F',
+    name: 'F-Type (Procyon-like)',
+    temperature: 6500,
+    luminosity: 2.5,
+    mass: 1.4,
+    radius: 1.3,
+    color: '#f0fff0',
+  },
+  {
+    type: 'G',
+    name: 'G-Type (Sun-like)',
+    temperature: 5778,
+    luminosity: 1.0,
+    mass: 1.0,
+    radius: 1.0,
+    color: '#ffff00',
+  },
+  {
+    type: 'K',
+    name: 'K-Type (Orange Dwarf)',
+    temperature: 4500,
+    luminosity: 0.15,
+    mass: 0.7,
+    radius: 0.7,
+    color: '#ffa500',
+  },
+  {
+    type: 'M',
+    name: 'M-Type (Red Dwarf)',
+    temperature: 3200,
+    luminosity: 0.01,
+    mass: 0.2,
+    radius: 0.2,
+    color: '#ff4500',
+  },
+];
+
+export interface SeffParams {
+  tEff: number;
+  seffSun: number;
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+}
+
+export interface SimulateParams {
+  luminosity: number;
+  temperature: number;
+  mass: number;
+  distanceAu: number;
+  albedo: number;
+  greenhouseDeltaK: number;
+}
+
+export class StellarHabitabilityEngine {
+  private calculateSeff(params: SeffParams): number {
+    const tClamp = Math.max(2600, Math.min(7200, params.tEff));
+    const tStar = tClamp - 5780;
+    return params.seffSun + params.a * tStar + params.b * Math.pow(tStar, 2) + params.c * Math.pow(tStar, 3) + params.d * Math.pow(tStar, 4);
+  }
+
+  public calculateLimits(luminosity: number, temperature: number): HabitabilityLimits {
+    const rvSeff = this.calculateSeff({ tEff: temperature, seffSun: 1.776, a: 2.136e-4, b: 2.533e-8, c: -1.332e-11, d: -3.097e-15 });
+    const rgSeff = this.calculateSeff({ tEff: temperature, seffSun: 1.107, a: 1.332e-4, b: 1.587e-8, c: -8.308e-12, d: -1.931e-16 });
+    const mgSeff = this.calculateSeff({ tEff: temperature, seffSun: 0.356, a: 6.171e-5, b: 7.389e-9, c: -3.865e-12, d: -9.000e-17 });
+    const emSeff = this.calculateSeff({ tEff: temperature, seffSun: 0.320, a: 5.547e-5, b: 6.641e-9, c: -3.474e-12, d: -8.087e-17 });
+
+    return {
+      recentVenus: Math.sqrt(luminosity / rvSeff),
+      runawayGreenhouse: Math.sqrt(luminosity / rgSeff),
+      maximumGreenhouse: Math.sqrt(luminosity / mgSeff),
+      earlyMars: Math.sqrt(luminosity / emSeff),
+    };
+  }
+
+  public simulate(params: SimulateParams): SimulationResult {
+    const hzLimits = this.calculateLimits(params.luminosity, params.temperature);
+    const stellarFlux = params.luminosity / Math.pow(params.distanceAu, 2);
+    const equilibriumTemperature = 278.5 * Math.pow(stellarFlux * (1.0 - params.albedo), 0.25);
+    const surfaceTemperature = equilibriumTemperature + params.greenhouseDeltaK;
+    const orbitalPeriod = Math.sqrt(Math.pow(params.distanceAu, 3) / params.mass) * 365.255;
+    const orbitalVelocity = 29.78 / Math.sqrt(params.distanceAu);
+
+    let status: 'too-hot' | 'habitable' | 'too-cold' = 'habitable';
+    if (params.distanceAu < hzLimits.runawayGreenhouse) {
+      status = 'too-hot';
+    } else if (params.distanceAu > hzLimits.maximumGreenhouse) {
+      status = 'too-cold';
+    }
+
+    return {
+      hzLimits,
+      equilibriumTemperature,
+      surfaceTemperature,
+      orbitalPeriod,
+      orbitalVelocity,
+      stellarFlux,
+      status,
+    };
+  }
+}

package/src/tool/stellar-habitability-zone/renderer.ts

@@ -0,0 +1,241 @@
+export interface RenderState {
+  cx: number;
+  cy: number;
+  runawayGreenhousePx: number;
+  maximumGreenhousePx: number;
+  planetDistPx: number;
+  isTooHot: boolean;
+  isTooCold: boolean;
+  curMass: number;
+  curLuminosity: number;
+  curTemp: number;
+  curDistanceAu: number;
+}
+
+interface BackgroundStar {
+  x: number;
+  y: number;
+  size: number;
+  speed: number;
+  offset: number;
+  baseOpacity: number;
+}
+
+interface CosmicDust {
+  distanceFactor: number;
+  angle: number;
+  speed: number;
+  size: number;
+  opacity: number;
+}
+
+export class StellarHabitabilityRenderer {
+  private canvas: HTMLCanvasElement;
+  private canvasContainer: HTMLElement;
+  private ctx: CanvasRenderingContext2D;
+  private bgStars: BackgroundStar[];
+  private dustParticles: CosmicDust[];
+  private orbitAngle = 0;
+
+  constructor(canvas: HTMLCanvasElement, canvasContainer: HTMLElement) {
+    this.canvas = canvas;
+    this.canvasContainer = canvasContainer;
+    this.ctx = canvas.getContext('2d')!;
+
+    this.bgStars = Array.from({ length: 45 }, () => ({
+      x: Math.random(),
+      y: Math.random(),
+      size: 0.6 + Math.random() * 0.9,
+      speed: 0.001 + Math.random() * 0.003,
+      offset: Math.random() * Math.PI * 2,
+      baseOpacity: 0.2 + Math.random() * 0.5,
+    }));
+
+    this.dustParticles = Array.from({ length: 60 }, () => ({
+      distanceFactor: 0.15 + Math.random() * 2.0,
+      angle: Math.random() * Math.PI * 2,
+      speed: 0.005 + Math.random() * 0.015,
+      size: 0.4 + Math.random() * 0.8,
+      opacity: 0.15 + Math.random() * 0.45,
+    }));
+  }
+
+  public getContext(): CanvasRenderingContext2D {
+    return this.ctx;
+  }
+
+  public resize(): { w: number; h: number } {
+    const dpr = window.devicePixelRatio || 1;
+    const container = this.canvas.parentElement as HTMLElement;
+    this.canvas.width = container.clientWidth * dpr;
+    this.canvas.height = container.clientHeight * dpr;
+    this.ctx.scale(dpr, dpr);
+    return {
+      w: container.clientWidth,
+      h: container.clientHeight,
+    };
+  }
+
+  public draw(state: RenderState, w: number, h: number) {
+    this.ctx.clearRect(0, 0, w, h);
+    this.drawBackground(w, h);
+    this.drawStars(w, h);
+    this.drawNebulae(w, h);
+    this.drawHabitableZone(state);
+    this.drawDust(state);
+    this.drawOrbitLine(state);
+    this.drawStar(state);
+    this.drawPlanet(state);
+  }
+
+  private drawBackground(w: number, h: number) {
+    this.ctx.fillStyle = '#050507';
+    this.ctx.fillRect(0, 0, w, h);
+  }
+
+  private drawStars(w: number, h: number) {
+    this.ctx.fillStyle = '#ffffff';
+    this.bgStars.forEach(s => {
+      const sx = s.x * w;
+      const sy = s.y * h;
+      const alpha = s.baseOpacity + Math.sin(Date.now() * s.speed + s.offset) * 0.25;
+      this.ctx.globalAlpha = Math.max(0.1, Math.min(1.0, alpha));
+      this.ctx.beginPath();
+      this.ctx.arc(sx, sy, s.size, 0, Math.PI * 2);
+      this.ctx.fill();
+    });
+    this.ctx.globalAlpha = 1.0;
+  }
+
+  private drawNebulae(w: number, h: number) {
+    const nebula1 = this.ctx.createRadialGradient(w * 0.25, h * 0.3, 0, w * 0.25, h * 0.3, 160);
+    nebula1.addColorStop(0, 'rgba(139, 92, 246, 0.04)');
+    nebula1.addColorStop(0.5, 'rgba(139, 92, 246, 0.01)');
+    nebula1.addColorStop(1, 'rgba(139, 92, 246, 0)');
+    this.ctx.fillStyle = nebula1;
+    this.ctx.beginPath();
+    this.ctx.arc(w * 0.25, h * 0.3, 160, 0, Math.PI * 2);
+    this.ctx.fill();
+
+    const nebula2 = this.ctx.createRadialGradient(w * 0.7, h * 0.65, 0, w * 0.7, h * 0.65, 200);
+    nebula2.addColorStop(0, 'rgba(14, 165, 233, 0.03)');
+    nebula2.addColorStop(0.5, 'rgba(14, 165, 233, 0.01)');
+    nebula2.addColorStop(1, 'rgba(14, 165, 233, 0)');
+    this.ctx.fillStyle = nebula2;
+    this.ctx.beginPath();
+    this.ctx.arc(w * 0.7, h * 0.65, 200, 0, Math.PI * 2);
+    this.ctx.fill();
+  }
+
+  private drawHabitableZone(state: RenderState) {
+    const fluctuation = Math.sin(Date.now() * 0.002) * 0.03;
+    const runawayFluct = state.runawayGreenhousePx * (1 + fluctuation);
+    const maxFluct = state.maximumGreenhousePx * (1 + fluctuation);
+
+    const grad = this.ctx.createRadialGradient(state.cx, state.cy, runawayFluct, state.cx, state.cy, maxFluct);
+    grad.addColorStop(0, 'rgba(16, 185, 129, 0.0)');
+    grad.addColorStop(0.2, 'rgba(16, 185, 129, 0.12)');
+    grad.addColorStop(0.5, 'rgba(16, 185, 129, 0.18)');
+    grad.addColorStop(0.8, 'rgba(16, 185, 129, 0.12)');
+    grad.addColorStop(1, 'rgba(16, 185, 129, 0.0)');
+
+    this.ctx.fillStyle = grad;
+    this.ctx.beginPath();
+    this.ctx.arc(state.cx, state.cy, maxFluct * 1.1, 0, Math.PI * 2);
+    this.ctx.fill();
+  }
+
+  private drawDust(state: RenderState) {
+    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
+    const dustSpeedFactor = 0.5 / (Math.sqrt(state.curMass) || 1);
+    this.dustParticles.forEach(p => {
+      p.angle += p.speed * dustSpeedFactor;
+      const pxFactor = p.distanceFactor * (state.runawayGreenhousePx + state.maximumGreenhousePx) * 0.5;
+      const dx = state.cx + Math.cos(p.angle) * pxFactor;
+      const dy = state.cy + Math.sin(p.angle) * pxFactor;
+      this.ctx.globalAlpha = p.opacity * Math.min(1.0, state.curLuminosity);
+      this.ctx.beginPath();
+      this.ctx.arc(dx, dy, p.size, 0, Math.PI * 2);
+      this.ctx.fill();
+    });
+    this.ctx.globalAlpha = 1.0;
+  }
+
+  private drawOrbitLine(state: RenderState) {
+    this.ctx.lineWidth = 1.0;
+    if (state.isTooHot) {
+      const warningFlash = Math.floor(Date.now() / 250) % 2 === 0;
+      this.ctx.strokeStyle = warningFlash ? 'rgba(239, 68, 68, 0.8)' : 'rgba(239, 68, 68, 0.25)';
+      this.ctx.setLineDash([2, 2]);
+    } else if (state.isTooCold) {
+      this.ctx.strokeStyle = 'rgba(59, 130, 246, 0.45)';
+      this.ctx.setLineDash([1, 4]);
+    } else {
+      this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
+      this.ctx.setLineDash([]);
+    }
+
+    this.ctx.beginPath();
+    this.ctx.arc(state.cx, state.cy, state.planetDistPx, 0, Math.PI * 2);
+    this.ctx.stroke();
+    this.ctx.setLineDash([]);
+  }
+
+  private getStellarColor(temp: number): string {
+    if (temp >= 30000) return '#00bfff';
+    if (temp >= 10000) return '#87cefa';
+    if (temp >= 7500) return '#e0ffff';
+    if (temp >= 6000) return '#fffacd';
+    if (temp >= 5200) return '#ffff00';
+    if (temp >= 3700) return '#ffa500';
+    return '#ff4500';
+  }
+
+  private drawStar(state: RenderState) {
+    const starColor = this.getStellarColor(state.curTemp);
+    const baseRadius = Math.max(4, Math.min(24, 10 * Math.pow(state.curTemp / 5778, 0.5)));
+    const pulseSpeed = 0.003 * state.curTemp;
+    const pulseAmp = 0.06 * Math.min(2.5, Math.max(0.1, state.curLuminosity));
+    const pulse = 1 + Math.sin(Date.now() * pulseSpeed) * pulseAmp;
+    const starRadius = baseRadius * pulse;
+
+    this.ctx.save();
+    const starGrad = this.ctx.createRadialGradient(state.cx, state.cy, 0, state.cx, state.cy, starRadius * 2.5);
+    starGrad.addColorStop(0, starColor);
+    starGrad.addColorStop(0.3, starColor);
+    starGrad.addColorStop(1, 'rgba(255, 255, 255, 0)');
+    this.ctx.fillStyle = starGrad;
+    this.ctx.beginPath();
+    this.ctx.arc(state.cx, state.cy, starRadius * 2.5, 0, Math.PI * 2);
+    this.ctx.fill();
+    this.ctx.restore();
+  }
+
+  private drawPlanet(state: RenderState) {
+    const period = Math.sqrt(Math.pow(state.curDistanceAu, 3) / state.curMass) * 365.255;
+    const speedFactor = 0.5;
+    this.orbitAngle += (360 / (period || 1)) * speedFactor * (Math.PI / 180);
+
+    const px = state.cx + Math.cos(this.orbitAngle) * state.planetDistPx;
+    const py = state.cy + Math.sin(this.orbitAngle) * state.planetDistPx;
+
+    this.ctx.save();
+    if (state.isTooHot) {
+      this.ctx.fillStyle = '#ef4444';
+    } else if (state.isTooCold) {
+      this.ctx.fillStyle = '#93c5fd';
+      this.ctx.shadowBlur = 12;
+      this.ctx.shadowColor = '#3b82f6';
+    } else {
+      this.ctx.fillStyle = '#10b981';
+    }
+
+    this.ctx.strokeStyle = '#ffffff';
+    this.ctx.lineWidth = 1.5;
+    this.ctx.beginPath();
+    this.ctx.arc(px, py, 4, 0, Math.PI * 2);
+    this.ctx.fill();
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+}

package/src/tool/stellar-habitability-zone/script.ts

@@ -0,0 +1,273 @@
+import { StellarHabitabilityEngine, STELLAR_PRESETS } from './logic/StellarHabitabilityEngine';
+import { StellarHabitabilityRenderer } from './renderer';
+import type { RenderState } from './renderer';
+import { updateValTexts, updateResults, updateSliderFill } from './dom-updater';
+import { setupCanvasInteraction } from './interaction';
+
+const STORAGE_KEY = 'stellar-habitability-zone:config';
+const KEYS = ['temp', 'lum', 'mass', 'rad', 'dist', 'albedo', 'green'];
+
+function parseVal(val: string, fallback: number): number {
+  const parsed = parseFloat(val);
+  return isNaN(parsed) ? fallback : parsed;
+}
+
+export function initStellarSimulator() {
+  new StellarSimulator();
+}
+
+class StellarSimulator {
+  private curDistanceAu = 1.0; private curRunawayLimit = 0.95; private curMaxLimit = 1.67;
+  private curTemp = 5778; private curLuminosity = 1.0; private curMass = 1.0;
+  private prevStatus = 'habitable'; private isImperial = false;
+
+  private tempInput!: HTMLInputElement; private lumInput!: HTMLInputElement; private massInput!: HTMLInputElement;
+  private radInput!: HTMLInputElement; private distInput!: HTMLInputElement; private albedoInput!: HTMLInputElement;
+  private greenInput!: HTMLInputElement;
+
+  private tempVal!: HTMLElement | null; private lumVal!: HTMLElement | null; private massVal!: HTMLElement | null;
+  private radVal!: HTMLElement | null; private distVal!: HTMLElement | null; private albedoVal!: HTMLElement | null;
+  private greenVal!: HTMLElement | null;
+
+  private eqTempResult!: HTMLElement | null; private surfTempResult!: HTMLElement | null; private fluxResult!: HTMLElement | null;
+  private periodResult!: HTMLElement | null; private velocityResult!: HTMLElement | null; private innerResult!: HTMLElement | null;
+  private outerResult!: HTMLElement | null;
+
+  private statusBox!: HTMLElement | null; private statusTitle!: HTMLElement | null; private unitToggleBtn!: HTMLElement | null;
+
+  private canvas!: HTMLCanvasElement;
+  private canvasContainer!: HTMLElement;
+  private presetBtns!: NodeListOf<Element>;
+
+  private engine!: StellarHabitabilityEngine;
+  private renderer!: StellarHabitabilityRenderer;
+
+  constructor() {
+    const root = document.getElementById('hz-simulator-root');
+    if (!root) return;
+
+    this.getElements();
+    this.engine = new StellarHabitabilityEngine();
+    this.renderer = new StellarHabitabilityRenderer(this.canvas, this.canvasContainer);
+
+    this.bindEvents();
+    this.loadFromStorage();
+    this.update();
+    this.animate();
+  }
+
+  private getElements() {
+    const getEl = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
+    this.tempInput = getEl<HTMLInputElement>('hz-temperature');
+    this.lumInput = getEl<HTMLInputElement>('hz-luminosity');
+    this.massInput = getEl<HTMLInputElement>('hz-mass');
+    this.radInput = getEl<HTMLInputElement>('hz-radius');
+    this.distInput = getEl<HTMLInputElement>('hz-distance');
+    this.albedoInput = getEl<HTMLInputElement>('hz-albedo');
+    this.greenInput = getEl<HTMLInputElement>('hz-greenhouse');
+
+    this.tempVal = getEl('hz-temperature-val');
+    this.lumVal = getEl('hz-luminosity-val');
+    this.massVal = getEl('hz-mass-val');
+    this.radVal = getEl('hz-radius-val');
+    this.distVal = getEl('hz-distance-val');
+    this.albedoVal = getEl('hz-albedo-val');
+    this.greenVal = getEl('hz-greenhouse-val');
+
+    this.eqTempResult = getEl('hz-eq-temp');
+    this.surfTempResult = getEl('hz-surf-temp');
+    this.fluxResult = getEl('hz-stellar-flux');
+    this.periodResult = getEl('hz-orbit-period');
+    this.velocityResult = getEl('hz-orbit-velocity');
+    this.innerResult = getEl('hz-inner-limit');
+    this.outerResult = getEl('hz-outer-limit');
+
+    this.statusBox = getEl('hz-status-box');
+    this.statusTitle = getEl('hz-status-title');
+    this.unitToggleBtn = getEl('hz-unit-toggle');
+
+    this.canvas = getEl<HTMLCanvasElement>('hz-orbit-canvas');
+    this.canvasContainer = getEl('hz-canvas-placeholder');
+    this.presetBtns = document.querySelectorAll('.hz-preset-btn:not(#hz-unit-toggle)');
+  }
+
+  private bindEvents() {
+    setupCanvasInteraction({
+      canvasContainer: this.canvasContainer,
+      distInput: this.distInput,
+      presetBtns: this.presetBtns,
+      getCurDistanceAu: () => this.curDistanceAu,
+      getCurMaxLimit: () => this.curMaxLimit,
+      getCurRunawayLimit: () => this.curRunawayLimit,
+      onUpdate: () => this.update()
+    });
+
+    [this.tempInput, this.lumInput, this.massInput, this.radInput, this.distInput].forEach(inp => {
+      inp.addEventListener('input', () => {
+        this.presetBtns.forEach(b => b.classList.remove('active'));
+        this.update();
+      });
+    });
+
+    [this.albedoInput, this.greenInput].forEach(inp => inp.addEventListener('input', () => this.update()));
+    this.presetBtns.forEach(btn => btn.addEventListener('click', () => this.applyPreset(btn)));
+
+    if (this.unitToggleBtn) {
+      this.unitToggleBtn.addEventListener('click', () => {
+        this.isImperial = !this.isImperial;
+        this.update();
+      });
+    }
+  }
+
+  private applyPreset(btn: Element) {
+    this.presetBtns.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    const type = btn.getAttribute('data-type');
+    const preset = STELLAR_PRESETS.find(p => p.type === type);
+    if (preset) {
+      this.tempInput.value = preset.temperature.toString();
+      this.lumInput.value = Math.log10(preset.luminosity).toString();
+      this.massInput.value = preset.mass.toString();
+      this.radInput.value = preset.radius.toString();
+
+      const hzLimits = this.engine.calculateLimits(preset.luminosity, preset.temperature);
+      this.distInput.value = Math.log10((hzLimits.runawayGreenhouse + hzLimits.maximumGreenhouse) / 2).toString();
+      this.update();
+    }
+  }
+
+  private getSelectedPresetType(): string | null {
+    const activeBtn = document.querySelector('.hz-preset-btn.active:not(#hz-unit-toggle)');
+    return activeBtn ? activeBtn.getAttribute('data-type') : null;
+  }
+
+  private saveToStorage() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        temp: this.tempInput.value, lum: this.lumInput.value, mass: this.massInput.value, rad: this.radInput.value,
+        dist: this.distInput.value, albedo: this.albedoInput.value, green: this.greenInput.value,
+        preset: this.getSelectedPresetType(), imperial: this.isImperial,
+      }));
+    } catch {}
+  }
+
+  private loadFromStorage() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) return;
+      const config = JSON.parse(stored);
+      const inputs: Record<string, HTMLInputElement> = {
+        temp: this.tempInput, lum: this.lumInput, mass: this.massInput, rad: this.radInput,
+        dist: this.distInput, albedo: this.albedoInput, green: this.greenInput
+      };
+      KEYS.forEach(key => {
+        const input = inputs[key];
+        if (input && config[key] !== undefined) input.value = config[key];
+      });
+      if (config.imperial !== undefined) this.isImperial = config.imperial;
+      this.presetBtns.forEach(b => {
+        const isPresetMatch = b.getAttribute('data-type') === config.preset;
+        b.classList.toggle('active', isPresetMatch);
+      });
+    } catch {}
+  }
+
+  private update() {
+    const temp = parseVal(this.tempInput.value, 5778);
+    const luminosity = Math.pow(10, parseVal(this.lumInput.value, 0));
+    const mass = parseVal(this.massInput.value, 1.0);
+    const radius = parseVal(this.radInput.value, 1.0);
+    const distanceAu = Math.pow(10, parseVal(this.distInput.value, 0));
+    const albedo = parseVal(this.albedoInput.value, 0.3);
+    const greenhouse = parseVal(this.greenInput.value, 33);
+
+    if (this.unitToggleBtn) {
+      this.unitToggleBtn.textContent = this.isImperial ? 'Units: Imperial' : 'Units: Scientific';
+    }
+
+    updateValTexts({
+      temp, luminosity, mass, radius, distanceAu, albedo, greenhouse, isImperial: this.isImperial,
+      tempVal: this.tempVal, lumVal: this.lumVal, massVal: this.massVal, radVal: this.radVal, distVal: this.distVal, albedoVal: this.albedoVal, greenVal: this.greenVal
+    });
+    [this.tempInput, this.lumInput, this.massInput, this.radInput, this.distInput, this.albedoInput, this.greenInput].forEach(updateSliderFill);
+
+    const result = this.engine.simulate({
+      luminosity, temperature: temp, mass, distanceAu, albedo, greenhouseDeltaK: greenhouse,
+    });
+
+    updateResults({
+      result, isImperial: this.isImperial, eqTempResult: this.eqTempResult, surfTempResult: this.surfTempResult,
+      fluxResult: this.fluxResult, periodResult: this.periodResult, velocityResult: this.velocityResult, innerResult: this.innerResult, outerResult: this.outerResult
+    });
+
+    this.checkStatusFlash(result.status);
+    this.updateStatusDisplay(result.status);
+    this.saveToStorage();
+  }
+
+  private checkStatusFlash(status: string) {
+    if (status !== this.prevStatus) {
+      if (this.eqTempResult && this.surfTempResult) {
+        this.eqTempResult.classList.remove('flash-cold', 'flash-hot');
+        this.surfTempResult.classList.remove('flash-cold', 'flash-hot');
+        void this.eqTempResult.offsetWidth;
+        void this.surfTempResult.offsetWidth;
+        const flashClass = status === 'too-cold' ? 'flash-cold' : 'flash-hot';
+        if (status !== 'habitable') {
+          this.eqTempResult.classList.add(flashClass);
+          this.surfTempResult.classList.add(flashClass);
+        }
+      }
+      this.prevStatus = status;
+    }
+  }
+
+  private updateStatusDisplay(status: string) {
+    if (this.statusBox && this.statusTitle) {
+      this.statusBox.className = `hz-status-box ${status}`;
+      let text = 'HABITABLE (Liquid water possible)';
+      if (status === 'too-hot') {
+        text = 'TOO HOT (Water vaporizes)';
+      } else if (status === 'too-cold') {
+        text = 'TOO COLD (Water freezes)';
+      }
+      this.statusTitle.textContent = text;
+    }
+  }
+
+  private animate() {
+    const targetDist = Math.pow(10, parseVal(this.distInput.value, 0));
+    const targetTemp = parseVal(this.tempInput.value, 5778);
+    const targetLuminosity = Math.pow(10, parseVal(this.lumInput.value, 0));
+    const targetMass = parseVal(this.massInput.value, 1.0);
+    const hzLimits = this.engine.calculateLimits(targetLuminosity, targetTemp);
+
+    this.curDistanceAu += (targetDist - this.curDistanceAu) * 0.12;
+    this.curRunawayLimit += (hzLimits.runawayGreenhouse - this.curRunawayLimit) * 0.12;
+    this.curMaxLimit += (hzLimits.maximumGreenhouse - this.curMaxLimit) * 0.12;
+    this.curTemp += (targetTemp - this.curTemp) * 0.12;
+    this.curLuminosity += (targetLuminosity - this.curLuminosity) * 0.12;
+    this.curMass += (targetMass - this.curMass) * 0.12;
+
+    const size = this.renderer.resize();
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const containerRect = this.canvasContainer.getBoundingClientRect();
+    const cx = (containerRect.left - canvasRect.left) + containerRect.width / 2;
+    const cy = (containerRect.top - canvasRect.top) + containerRect.height / 2;
+    const maxDist = Math.max(this.curDistanceAu * 1.3, this.curMaxLimit * 1.25);
+    const scale = (Math.min(containerRect.width, containerRect.height) * 0.4) / maxDist;
+
+    this.renderer.draw({
+      cx, cy,
+      runawayGreenhousePx: this.curRunawayLimit * scale,
+      maximumGreenhousePx: this.curMaxLimit * scale,
+      planetDistPx: this.curDistanceAu * scale,
+      isTooHot: this.curDistanceAu < this.curRunawayLimit,
+      isTooCold: this.curDistanceAu > this.curMaxLimit,
+      curMass: this.curMass, curLuminosity: this.curLuminosity, curTemp: this.curTemp, curDistanceAu: this.curDistanceAu,
+    }, size.w, size.h);
+    requestAnimationFrame(() => this.animate());
+  }
+}
+export { type RenderState };

package/src/tool/stellar-habitability-zone/seo.astro

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