@jjlmoya/utils-science 1.25.0 → 1.27.0

package/src/tool/natural-selection-drift/runtime.ts

@@ -0,0 +1,89 @@
+import { runSelectionDrift, summarizeOutcome } from './logic';
+import { drawBackground, drawParticles, evolveParticles } from './render';
+import {
+  readConfig,
+  seedParticles,
+  showActiveValue,
+  updateMetrics,
+  updateSliderValues,
+  type RuntimeElements,
+} from './simulation';
+
+function bindSliders(elements: RuntimeElements, runSimulation: () => void) {
+  const sliders = [
+    [elements.populationInput, elements.populationValue],
+    [elements.generationsInput, elements.generationsValue],
+    [elements.mutationInput, elements.mutationValue],
+    [elements.pressureInput, elements.pressureValue],
+    [elements.driftInput, elements.driftValue],
+    [elements.allelesInput, elements.allelesValue],
+    [elements.innovationInput, elements.innovationValue],
+  ] as const;
+
+  sliders.forEach(([input, valueNode]) => {
+    if (!input || !valueNode) return;
+    input.addEventListener('pointerdown', () => showActiveValue(input, valueNode));
+    input.addEventListener('input', () => {
+      updateSliderValues(elements);
+      runSimulation();
+    });
+  });
+}
+
+function startLoop(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  elements: RuntimeElements,
+  state: { particles: never[]; outcome: { diversity: number } | null; runSeed: number }
+) {
+  let frameCount = 0;
+  const frame = () => {
+    frameCount += 1;
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    const config = readConfig(elements, state.runSeed);
+    drawBackground(ctx, rect, config.selectionPressure);
+    if (state.outcome) state.particles = evolveParticles(state.particles, config, state.outcome) as never[];
+    drawParticles(ctx, rect, state.particles, { pressure: config.selectionPressure, drift: config.driftIntensity });
+    if (frameCount % 6 === 0) updateMetrics(elements, state.particles);
+    requestAnimationFrame(frame);
+  };
+
+  requestAnimationFrame(frame);
+  return frame;
+}
+
+export function createNaturalSelectionRuntime(elements: RuntimeElements) {
+  const canvas = elements.canvas;
+  const ctx = canvas?.getContext('2d');
+  if (!canvas || !ctx) return () => {};
+
+  let runSeed = 0;
+  let particles = [];
+  let outcome = null;
+  const state = { particles, outcome, runSeed };
+
+  const runSimulation = () => {
+    runSeed += 1;
+    updateSliderValues(elements);
+    const config = readConfig(elements, runSeed);
+    const points = runSelectionDrift(config);
+    outcome = summarizeOutcome(points);
+    particles = seedParticles(config, outcome);
+    state.particles = particles;
+    state.outcome = outcome;
+    state.runSeed = runSeed;
+    updateMetrics(elements, particles);
+  };
+  bindSliders(elements, runSimulation);
+
+  window.addEventListener('resize', runSimulation);
+  runSimulation();
+  startLoop(canvas, ctx, elements, state);
+
+  return () => window.removeEventListener('resize', runSimulation);
+}

package/src/tool/natural-selection-drift/seo.astro

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

package/src/tool/natural-selection-drift/simulation.ts

@@ -0,0 +1,161 @@
+import type { summarizeOutcome } from './logic';
+
+export type RuntimeElements = {
+  populationInput: HTMLInputElement | null;
+  generationsInput: HTMLInputElement | null;
+  mutationInput: HTMLInputElement | null;
+  pressureInput: HTMLInputElement | null;
+  driftInput: HTMLInputElement | null;
+  allelesInput: HTMLInputElement | null;
+  innovationInput: HTMLInputElement | null;
+  populationValue: HTMLElement | null;
+  generationsValue: HTMLElement | null;
+  mutationValue: HTMLElement | null;
+  pressureValue: HTMLElement | null;
+  driftValue: HTMLElement | null;
+  allelesValue: HTMLElement | null;
+  innovationValue: HTMLElement | null;
+  aliveBadge: HTMLElement | null;
+  dominantTrait: HTMLElement | null;
+  fitnessScore: HTMLElement | null;
+  diversityScore: HTMLElement | null;
+  populationScore: HTMLElement | null;
+  alleleRanking: HTMLElement | null;
+  ui: {
+    aliveLabel: string;
+    alleleDefault: string;
+  };
+};
+
+export type Particle = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  size: number;
+  allele: number;
+  alive: boolean;
+  hue: number;
+  energy: number;
+  bias: number;
+  age: number;
+};
+
+type Outcome = ReturnType<typeof summarizeOutcome>;
+type SimConfig = ReturnType<typeof readConfig>;
+
+const hues = [160, 208, 284, 28, 338, 118, 246, 52];
+const palette = ['allele-1', 'allele-2', 'allele-3', 'allele-4', 'allele-5', 'allele-6', 'allele-7', 'allele-8'];
+
+const readValue = (input: HTMLInputElement | null, fallback: number) => Number(input?.value || fallback);
+const setText = (node: HTMLElement | null, value: string) => {
+  if (node) node.textContent = value;
+};
+
+export function readConfig(elements: RuntimeElements, runSeed: number) {
+  return {
+    population: readValue(elements.populationInput, 120),
+    generations: readValue(elements.generationsInput, 60),
+    mutationRate: readValue(elements.mutationInput, 12) / 100,
+    selectionPressure: readValue(elements.pressureInput, 55) / 100,
+    driftIntensity: readValue(elements.driftInput, 28) / 100,
+    alleleCount: readValue(elements.allelesInput, 3),
+    innovationRate: readValue(elements.innovationInput, 2) / 100,
+    seed: runSeed,
+    habitat: 'forest' as const,
+    trait: 'camouflage' as const,
+  };
+}
+
+export function updateSliderValues(elements: RuntimeElements) {
+  setText(elements.populationValue, String(readValue(elements.populationInput, 120)));
+  setText(elements.generationsValue, String(readValue(elements.generationsInput, 60)));
+  setText(elements.mutationValue, `${readValue(elements.mutationInput, 12)}%`);
+  setText(elements.pressureValue, `${readValue(elements.pressureInput, 55)}%`);
+  setText(elements.driftValue, `${readValue(elements.driftInput, 28)}%`);
+  setText(elements.allelesValue, String(readValue(elements.allelesInput, 3)));
+  setText(elements.innovationValue, `${readValue(elements.innovationInput, 2)}%`);
+}
+
+export function showActiveValue(input: HTMLInputElement | null, valueNode: HTMLElement | null) {
+  if (!input || !valueNode) return;
+  valueNode.classList.add('is-visible');
+  const update = () => {
+    const range = Number(input.max) - Number(input.min);
+    const value = Number(input.value) - Number(input.min);
+    valueNode.style.left = `${range > 0 ? (value / range) * 100 : 0}%`;
+  };
+  update();
+  input.addEventListener('input', update, { once: true });
+  input.addEventListener('pointerup', () => valueNode.classList.remove('is-visible'), { once: true });
+  input.addEventListener('blur', () => valueNode.classList.remove('is-visible'), { once: true });
+}
+
+export function seedParticles(config: SimConfig, result: Outcome) {
+  const total = Math.max(48, Math.min(180, Math.round(config.population / 3)));
+  const dominantBias = result.dominant === 'alleleA' ? 0.56 : 0.38;
+  const alleleCount = Math.max(2, Number(config.alleleCount || 3));
+  return Array.from({ length: total }, (_, index) => {
+    const allele = index % alleleCount;
+    const angle = Math.random() * Math.PI * 2;
+    const radius = 0.08 + Math.random() * 0.48;
+    return {
+      x: 0.5 + Math.cos(angle) * radius,
+      y: 0.5 + Math.sin(angle) * radius,
+      vx: (Math.random() - 0.5) * 0.003,
+      vy: (Math.random() - 0.5) * 0.003,
+      size: 1.8 + Math.random() * 3.2,
+      allele,
+      alive: true,
+      hue: hues[allele % hues.length],
+      energy: 0.45 + Math.random() * 0.55,
+      bias: dominantBias,
+      age: Math.random() * 20,
+    } satisfies Particle;
+  });
+}
+
+export function buildCountMap(particles: Particle[]) {
+  const counts = new Map<number, number>();
+  particles.forEach((p) => {
+    if (!p.alive) return;
+    counts.set(p.allele, (counts.get(p.allele) || 0) + 1);
+  });
+  return counts;
+}
+
+export function updateRanking(elements: RuntimeElements, particles: Particle[]) {
+  const counts = buildCountMap(particles);
+  const ranking = Array.from(counts.entries())
+    .map(([allele, count]) => ({ allele, count }))
+    .sort((a, b) => b.count - a.count);
+  setText(elements.dominantTrait, ranking.length > 0 ? `Allele ${ranking[0].allele + 1}` : elements.ui.alleleDefault);
+  const maxCount = Math.max(1, ...ranking.map((item) => item.count));
+  if (elements.alleleRanking) {
+    elements.alleleRanking.innerHTML = ranking
+      .map((item, index) => {
+        const fill = Math.max(0.1, item.count / maxCount);
+        const colorIndex = item.allele % palette.length;
+        return `<div class="ns-allele-chip ${palette[colorIndex]} is-updated" style="--rank-scale:${fill}" data-allele="${item.allele}">
+          <span>#${index + 1} Allele ${item.allele + 1}</span>
+          <strong>${item.count}</strong>
+          <div class="ns-allele-bar"><i></i></div>
+        </div>`;
+      })
+      .join('');
+  }
+}
+
+export function updateMetrics(elements: RuntimeElements, particles: Particle[]) {
+  const aliveCount = particles.filter((p) => p.alive).length;
+  setText(elements.aliveBadge, `${aliveCount} ${elements.ui.aliveLabel}`);
+  setText(elements.populationScore, String(aliveCount));
+  const liveRatio = particles.length ? Math.round((aliveCount / particles.length) * 100) : 0;
+  setText(elements.fitnessScore, `${liveRatio}%`);
+  const counts = buildCountMap(particles);
+  const values = Array.from(counts.values());
+  const total = values.reduce((sum, value) => sum + value, 0);
+  const spread = total > 0 && values.length > 0 ? 1 - Math.max(...values) / total : 0;
+  setText(elements.diversityScore, `${Math.max(0, Math.round(spread * 100))}%`);
+  updateRanking(elements, particles);
+}

package/src/tool/radioactive-decay/bibliography.astro

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

package/src/tool/radioactive-decay/bibliography.ts

@@ -0,0 +1,17 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Lawrence Berkeley National Laboratory, The ABCs of Nuclear Science: Radioactive Decay',
+    url: 'https://www2.lbl.gov/abc/wallchart/chapters/03/4.html',
+  },
+  {
+    name: 'NIST, Radionuclide Half-Life Measurements',
+    url: 'https://www.nist.gov/pml/radionuclide-half-life-measurements',
+  },
+  {
+    name: 'International Atomic Energy Agency, Radioisotopes in Medicine',
+    url: 'https://www.iaea.org/topics/nuclear-science/isotopes/radioisotopes',
+  },
+];
+

package/src/tool/radioactive-decay/component.astro

@@ -0,0 +1,346 @@
+---
+import './radioactive-decay-half-life-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="decay-lab" id="decay-lab">
+  <section class="decay-stage" aria-label={ui.atomField}>
+    <div class="decay-stage-header">
+      <div>
+        <p class="decay-kicker">{ui.expectedCurve}</p>
+        <h2>{ui.atomField}</h2>
+      </div>
+      <button class="decay-seed-button" id="decay-seed-button" type="button">{ui.resetSeed}</button>
+    </div>
+    <svg class="decay-curve" viewBox="0 0 640 150" aria-hidden="true">
+      <path class="decay-curve-ghost" id="decay-curve-ghost" d="M18 26 C 155 32, 236 78, 326 104 S 520 129, 622 137"></path>
+      <path class="decay-curve-line" id="decay-curve-line" d="M18 26 C 155 32, 236 78, 326 104 S 520 129, 622 137"></path>
+      <circle class="decay-curve-marker" id="decay-curve-marker" cx="169" cy="61" r="8"></circle>
+    </svg>
+    <svg class="decay-field-art" id="decay-field-art" viewBox="0 0 640 360" role="img" aria-label={ui.atomField}></svg>
+    <div class="decay-legend">
+      <span><i class="decay-dot decay-dot-live"></i>{ui.liveAtoms}</span>
+      <span><i class="decay-dot decay-dot-spent"></i>{ui.decayedAtoms}</span>
+    </div>
+  </section>
+
+  <section class="decay-console" aria-label="Radioactive decay controls">
+    <div class="decay-select-block">
+      <label class="decay-field decay-field--select" for="decay-isotope">
+        <span>{ui.isotope}</span>
+        <span class="decay-select-shell">
+          <select id="decay-isotope"></select>
+        </span>
+      </label>
+
+      <div class="decay-use" id="decay-use"></div>
+    </div>
+
+    <label class="decay-field" for="decay-atoms">
+      <span>{ui.sampleAtoms}</span>
+      <output id="decay-atoms-output">160</output>
+      <input id="decay-atoms" type="range" min="40" max="400" step="20" value="160" />
+    </label>
+
+    <label class="decay-field" for="decay-time">
+      <span>{ui.elapsedTime}</span>
+      <output id="decay-time-output">0</output>
+      <input id="decay-time" type="range" min="0" max="4" step="0.01" value="1" />
+    </label>
+
+    <div class="decay-jumps" aria-label="Half-life shortcuts">
+      <button type="button" data-half-lives="1">{ui.oneHalfLife}</button>
+      <button type="button" data-half-lives="2">{ui.twoHalfLives}</button>
+      <button type="button" data-half-lives="4">{ui.fourHalfLives}</button>
+    </div>
+
+    <div class="decay-results">
+      <div class="decay-metric">
+        <span>{ui.halfLife}</span>
+        <strong id="decay-half-life">-</strong>
+      </div>
+      <div class="decay-metric">
+        <span>{ui.remaining}</span>
+        <strong id="decay-remaining">-</strong>
+      </div>
+      <div class="decay-metric">
+        <span>{ui.decayed}</span>
+        <strong id="decay-decayed">-</strong>
+      </div>
+      <div class="decay-metric">
+        <span>{ui.activity}</span>
+        <strong id="decay-activity">-</strong>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { ISOTOPE_PRESETS, simulateDecay } from './logic';
+  import type { IsotopePreset } from './logic';
+
+  const root = document.getElementById('decay-lab');
+  const isotopeSelect = document.getElementById('decay-isotope') as HTMLSelectElement | null;
+  const useText = document.getElementById('decay-use');
+  const atomsInput = document.getElementById('decay-atoms') as HTMLInputElement | null;
+  const atomsOutput = document.getElementById('decay-atoms-output');
+  const timeInput = document.getElementById('decay-time') as HTMLInputElement | null;
+  const timeOutput = document.getElementById('decay-time-output');
+  const atomField = document.getElementById('decay-field-art');
+  const halfLifeText = document.getElementById('decay-half-life');
+  const remainingText = document.getElementById('decay-remaining');
+  const decayedText = document.getElementById('decay-decayed');
+  const activityText = document.getElementById('decay-activity');
+  const marker = document.getElementById('decay-curve-marker') as SVGCircleElement | null;
+  const curveLine = document.getElementById('decay-curve-line') as SVGPathElement | null;
+  const curveGhost = document.getElementById('decay-curve-ghost') as SVGPathElement | null;
+  const seedButton = document.getElementById('decay-seed-button');
+
+  let seed = 1487;
+  let currentDecayed = new Set<number>();
+  const atomNodes = new Map<number, SVGCircleElement>();
+  const atomBase = new Map<number, ReturnType<typeof atomPosition>>();
+  const decayTimers = new Map<number, number>();
+  const svgNamespace = 'http://www.w3.org/2000/svg';
+  const curveState = {
+    progress: 0.25,
+    remainingFraction: 0.5,
+    targetProgress: 0.25,
+    targetRemainingFraction: 0.5,
+    frame: 0,
+  };
+
+  function getPreset(): IsotopePreset {
+    return ISOTOPE_PRESETS.find((preset) => preset.id === isotopeSelect?.value) ?? ISOTOPE_PRESETS[0];
+  }
+
+  function formatNumber(value: number): string {
+    if (Math.abs(value) >= 1_000_000) {
+      return new Intl.NumberFormat('en', {
+        notation: 'compact',
+        maximumFractionDigits: 2,
+      }).format(value);
+    }
+
+    return new Intl.NumberFormat('en', { maximumFractionDigits: 2 }).format(value);
+  }
+
+  function atomPosition(atomId: number) {
+    const columnCount = 20;
+    const row = Math.floor(atomId / columnCount);
+    const column = atomId % columnCount;
+    const jitterX = Math.sin((atomId + seed) * 12.9898) * 7;
+    const jitterY = Math.cos((atomId + seed) * 78.233) * 7;
+
+    return {
+      x: 30 + column * 30.6 + jitterX,
+      y: 30 + row * 25.5 + jitterY,
+      radius: 4.8 + Math.abs(Math.sin(atomId * 1.7)) * 3.2,
+    };
+  }
+
+  function setAtomBase(circle: SVGCircleElement, atomId: number) {
+    const position = atomPosition(atomId);
+    atomBase.set(atomId, position);
+    circle.setAttribute('cx', position.x.toFixed(2));
+    circle.setAttribute('cy', position.y.toFixed(2));
+    circle.setAttribute('r', position.radius.toFixed(2));
+  }
+
+  function createAtom(atomId: number) {
+    const circle = document.createElementNS(svgNamespace, 'circle');
+    circle.classList.add('decay-atom');
+    circle.style.setProperty('--delay', `${atomId % 37}ms`);
+    setAtomBase(circle, atomId);
+    atomField?.append(circle);
+    atomNodes.set(atomId, circle);
+
+    return circle;
+  }
+
+  function setAtomLive(circle: SVGCircleElement, atomId: number) {
+    const timer = decayTimers.get(atomId);
+    if (timer) {
+      window.clearTimeout(timer);
+      decayTimers.delete(atomId);
+    }
+
+    circle.classList.remove('decay-atom-decaying', 'decay-atom-spent');
+  }
+
+  function setAtomDecayed(circle: SVGCircleElement, atomId: number, justDecayed: boolean) {
+    if (!justDecayed) {
+      circle.classList.add('decay-atom-spent');
+      circle.classList.remove('decay-atom-decaying');
+      return;
+    }
+
+    circle.classList.remove('decay-atom-spent');
+    circle.classList.add('decay-atom-decaying');
+
+    const existingTimer = decayTimers.get(atomId);
+    if (existingTimer) window.clearTimeout(existingTimer);
+
+    const timer = window.setTimeout(() => {
+      if (!currentDecayed.has(atomId)) return;
+      circle.classList.remove('decay-atom-decaying');
+      circle.classList.add('decay-atom-spent');
+      decayTimers.delete(atomId);
+    }, 600);
+    decayTimers.set(atomId, timer);
+  }
+
+  function renderAtoms(result: ReturnType<typeof simulateDecay>) {
+    if (!atomField) return;
+
+    const nextDecayed = new Set(result.atoms.filter((atom) => atom.decayed).map((atom) => atom.id));
+    const liveIds = new Set(result.atoms.map((atom) => atom.id));
+
+    atomNodes.forEach((circle, atomId) => {
+      if (liveIds.has(atomId)) return;
+      circle.remove();
+      atomNodes.delete(atomId);
+      atomBase.delete(atomId);
+      currentDecayed.delete(atomId);
+    });
+
+    result.atoms.forEach((atom) => {
+      const circle = atomNodes.get(atom.id) ?? createAtom(atom.id);
+      if (!atomBase.has(atom.id)) setAtomBase(circle, atom.id);
+
+      if (atom.decayed) {
+        setAtomDecayed(circle, atom.id, !currentDecayed.has(atom.id));
+      } else {
+        setAtomLive(circle, atom.id);
+      }
+    });
+
+    currentDecayed = nextDecayed;
+  }
+
+  function curvePath(remainingFraction: number): string {
+    const lift = remainingFraction * 18;
+    const sag = (1 - remainingFraction) * 16;
+
+    return `M18 ${26 + sag} C 154 ${30 + lift}, 238 ${77 - lift}, 326 ${104 - lift * 0.35} S 520 ${128 + sag * 0.22}, 622 ${137 - lift * 0.12}`;
+  }
+
+  function drawCurve(progress: number, remainingFraction: number) {
+    if (!curveLine || !marker) return;
+
+    const path = curvePath(remainingFraction);
+    curveLine.setAttribute('d', path);
+    curveGhost?.setAttribute('d', path);
+
+    const totalLength = curveLine.getTotalLength();
+    const point = curveLine.getPointAtLength(totalLength * progress);
+
+    curveLine.style.strokeDasharray = `${totalLength}`;
+    curveLine.style.strokeDashoffset = `${totalLength * (1 - progress)}`;
+    marker.setAttribute('cx', point.x.toFixed(2));
+    marker.setAttribute('cy', point.y.toFixed(2));
+    marker.style.opacity = `${Math.max(0.42, remainingFraction)}`;
+  }
+
+  function animateCurve() {
+    const deltaProgress = curveState.targetProgress - curveState.progress;
+    const deltaRemaining = curveState.targetRemainingFraction - curveState.remainingFraction;
+    curveState.progress += deltaProgress * 0.18;
+    curveState.remainingFraction += deltaRemaining * 0.18;
+    drawCurve(curveState.progress, curveState.remainingFraction);
+
+    if (Math.abs(deltaProgress) > 0.001 || Math.abs(deltaRemaining) > 0.001) {
+      curveState.frame = window.requestAnimationFrame(animateCurve);
+      return;
+    }
+
+    curveState.progress = curveState.targetProgress;
+    curveState.remainingFraction = curveState.targetRemainingFraction;
+    drawCurve(curveState.progress, curveState.remainingFraction);
+    curveState.frame = 0;
+  }
+
+  function updateCurve(halfLifeCount: number, remainingFraction: number) {
+    curveState.targetProgress = Math.min(1, halfLifeCount / 4);
+    curveState.targetRemainingFraction = remainingFraction;
+
+    if (!curveState.frame) {
+      curveState.frame = window.requestAnimationFrame(animateCurve);
+    }
+  }
+
+  function floatAtoms(time: number) {
+    atomNodes.forEach((circle, atomId) => {
+      if (circle.classList.contains('decay-atom-spent')) return;
+
+      const base = atomBase.get(atomId);
+      if (!base) return;
+
+      const driftX = Math.sin(time * 0.0012 + atomId * 1.91) * 1.5;
+      const driftY = Math.cos(time * 0.0015 + atomId * 2.37) * 1.25;
+      circle.setAttribute('cx', (base.x + driftX).toFixed(2));
+      circle.setAttribute('cy', (base.y + driftY).toFixed(2));
+    });
+
+    window.requestAnimationFrame(floatAtoms);
+  }
+
+  function update() {
+    if (!root || !isotopeSelect || !atomsInput || !timeInput) return;
+
+    const preset = getPreset();
+    const halfLifeCount = Number(timeInput.value);
+    const elapsedTime = halfLifeCount * preset.halfLife;
+    const result = simulateDecay({
+      initialAtoms: Number(atomsInput.value),
+      halfLife: preset.halfLife,
+      elapsedTime,
+      seed,
+    });
+
+    atomsOutput!.textContent = atomsInput.value;
+    timeOutput!.textContent = `${formatNumber(elapsedTime)} ${preset.unit}`;
+    useText!.textContent = preset.useCase;
+    halfLifeText!.textContent = `${formatNumber(preset.halfLife)} ${preset.unit}`;
+    remainingText!.textContent = `${result.remainingAtoms} (${(result.remainingFraction * 100).toFixed(1)}%)`;
+    decayedText!.textContent = `${result.decayedAtoms} (${(result.decayedFraction * 100).toFixed(1)}%)`;
+    activityText!.textContent = `${(result.activityFraction * 100).toFixed(1)}%`;
+
+    updateCurve(halfLifeCount, result.remainingFraction);
+    renderAtoms(result);
+  }
+
+  ISOTOPE_PRESETS.forEach((preset) => {
+    const option = document.createElement('option');
+    option.value = preset.id;
+    option.textContent = preset.name;
+    isotopeSelect?.append(option);
+  });
+
+  isotopeSelect?.addEventListener('change', update);
+  atomsInput?.addEventListener('input', update);
+  timeInput?.addEventListener('input', update);
+  seedButton?.addEventListener('click', () => {
+    seed += 9973;
+    atomNodes.forEach((circle, atomId) => {
+      setAtomBase(circle, atomId);
+    });
+    update();
+  });
+
+  document.querySelectorAll<HTMLButtonElement>('[data-half-lives]').forEach((button) => {
+    button.addEventListener('click', () => {
+      if (!timeInput) return;
+      timeInput.value = button.dataset.halfLives ?? '1';
+      update();
+    });
+  });
+
+  update();
+  window.requestAnimationFrame(floatAtoms);
+</script>

package/src/tool/radioactive-decay/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const radioactiveDecay: ScienceToolEntry = {
+  id: 'radioactive-decay',
+  icons: {
+    bg: 'mdi:radioactive-circle-outline',
+    fg: 'mdi:chart-bell-curve-cumulative',
+  },
+  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),
+  },
+};