@jjlmoya/utils-science 1.33.0 → 1.34.0

package/package.json

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

package/src/category/index.ts

@@ -15,10 +15,11 @@ import { phaseDiagramCriticalPoints } from '../tool/phase-diagram-critical-point
 import { twinParadoxVisualizer } from '../tool/twin-paradox-visualizer/index';
 import { mandelbrotFractal } from '../tool/mandelbrot-fractal/index';
 import { planetAtmosphereSurvival } from '../tool/planet-atmosphere-survival/index';
+import { threeBodyProblem } from '../tool/three-body-problem/index';
 
 export const scienceCategory: ScienceCategoryEntry = {
   icon: 'mdi:flask',
-  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival],
+  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival, threeBodyProblem],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -15,6 +15,7 @@ export { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points
 export { twinParadoxVisualizer } from './tool/twin-paradox-visualizer/entry';
 export { mandelbrotFractal } from './tool/mandelbrot-fractal/entry';
 export { planetAtmosphereSurvival } from './tool/planet-atmosphere-survival/entry';
+export { threeBodyProblem } from './tool/three-body-problem/entry';
 export { scienceCategory } from './category';
 import { asteroidImpact } from './tool/asteroid-impact/entry';
 import { cellularRenewal } from './tool/cellular-renewal/entry';
@@ -32,4 +33,5 @@ import { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points
 import { twinParadoxVisualizer } from './tool/twin-paradox-visualizer/entry';
 import { mandelbrotFractal } from './tool/mandelbrot-fractal/entry';
 import { planetAtmosphereSurvival } from './tool/planet-atmosphere-survival/entry';
-export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival];
+import { threeBodyProblem } from './tool/three-body-problem/entry';
+export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival, threeBodyProblem];

package/src/index.ts

@@ -16,6 +16,7 @@ export { PHASE_DIAGRAM_CRITICAL_POINTS_TOOL } from './tool/phase-diagram-critica
 export { TWIN_PARADOX_VISUALIZER_TOOL } from './tool/twin-paradox-visualizer/index';
 export { MANDELBROT_FRACTAL_TOOL } from './tool/mandelbrot-fractal/index';
 export { PLANET_ATMOSPHERE_SURVIVAL_TOOL } from './tool/planet-atmosphere-survival/index';
+export { THREE_BODY_PROBLEM_TOOL } from './tool/three-body-problem/index';
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

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

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

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

@@ -8,7 +8,7 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="ns-app">
+<div class="ns-app" data-alive-label={ui.aliveLabel} data-allele-default={ui.alleleDefault}>
   <section class="ns-card">
     <canvas id="simulation-canvas" class="ns-canvas"></canvas>
     <div class="ns-canvas-badge" id="alive-badge">0 {ui.aliveLabel}</div>
@@ -25,9 +25,19 @@ const { ui } = Astro.props;
 
     <section class="ns-alleles" id="allele-ranking" aria-label={ui.alleleCountsLabel}></section>
 
-    <aside class="ns-console" aria-label="Simulation controls">
+    <button class="ns-console-trigger" id="ns-console-trigger" aria-label={ui.controls} aria-expanded="false">
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 4h12M2 8h8M2 12h10" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+      {ui.controls}
+    </button>
+
+    <aside class="ns-console" id="ns-console" aria-label="Simulation controls">
       <div class="ns-console-header">
-        <span class="ns-console-kicker">{ui.evolutionConsole}</span>
+        <div class="ns-console-header-row">
+          <span class="ns-console-kicker">{ui.evolutionConsole}</span>
+          <button class="ns-console-close" id="ns-console-close" aria-label="Close controls">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+          </button>
+        </div>
         <h3>{ui.title}</h3>
       </div>
 
@@ -74,9 +84,10 @@ const { ui } = Astro.props;
   </section>
 </div>
 
-<script type="module" define:vars={{ ui }}>
-  import { createNaturalSelectionRuntime } from '/src/tool/natural-selection-drift/runtime';
+<script>
+  import { createNaturalSelectionRuntime } from './runtime';
 
+  const root = document.querySelector('.ns-app');
   createNaturalSelectionRuntime({
     populationInput: document.getElementById('population'),
     generationsInput: document.getElementById('generations'),
@@ -99,6 +110,26 @@ const { ui } = Astro.props;
     diversityScore: document.getElementById('diversity-score'),
     populationScore: document.getElementById('population-score'),
     alleleRanking: document.getElementById('allele-ranking'),
-    ui: { ...ui },
+    ui: {
+      aliveLabel: root?.dataset.aliveLabel ?? '',
+      alleleDefault: root?.dataset.alleleDefault ?? '',
+    },
   });
+
+  const trigger = document.getElementById('ns-console-trigger');
+  const closeBtn = document.getElementById('ns-console-close');
+  const console = document.getElementById('ns-console');
+
+  function openConsole() {
+    console?.classList.add('is-open');
+    trigger?.setAttribute('aria-expanded', 'true');
+  }
+
+  function closeConsole() {
+    console?.classList.remove('is-open');
+    trigger?.setAttribute('aria-expanded', 'false');
+  }
+
+  trigger?.addEventListener('click', openConsole);
+  closeBtn?.addEventListener('click', closeConsole);
 </script>

package/src/tool/natural-selection-drift/natural-selection-drift.css

@@ -427,3 +427,137 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+.ns-console-trigger {
+  display: none;
+}
+
+.ns-console-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.ns-console-close {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 1px solid var(--ns-border);
+  background: var(--ns-panel);
+  color: var(--ns-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background 0.18s ease, color 0.18s ease;
+}
+
+.ns-console-close:hover {
+  background: rgba(239, 68, 68, 0.12);
+  color: #ef4444;
+}
+
+@media (max-width: 640px) {
+  .ns-console-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: absolute;
+    left: clamp(16px, 4vw, 24px);
+    bottom: clamp(16px, 4vw, 24px);
+    z-index: 3;
+    padding: 0.6rem 1rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    background: rgba(2, 6, 23, 0.72);
+    backdrop-filter: blur(18px);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  }
+
+  .theme-light .ns-console-trigger {
+    background: rgba(255, 255, 255, 0.88);
+    border-color: rgba(148, 163, 184, 0.22);
+    color: #0f172a;
+    box-shadow: 0 8px 24px rgba(148, 163, 184, 0.22);
+  }
+
+  .ns-console-trigger:hover {
+    transform: translateY(-1px);
+  }
+
+  .ns-console-trigger[aria-expanded="true"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .ns-console {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: 100%;
+    border-radius: 24px 24px 0 0;
+    border-bottom: none;
+    padding: 1.25rem clamp(16px, 4vw, 24px) calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-bottom, 0px));
+    transform: translateY(110%);
+    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+    background: rgba(7, 9, 13, 0.88);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(24px);
+    max-height: 80vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .theme-light .ns-console {
+    background: rgba(255, 255, 255, 0.96);
+    border-top-color: rgba(148, 163, 184, 0.2);
+  }
+
+  .ns-console.is-open {
+    transform: translateY(0);
+  }
+
+  .ns-console-close {
+    display: inline-flex;
+  }
+
+  .ns-console::before {
+    content: "";
+    display: block;
+    width: 40px;
+    height: 4px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.18);
+    margin: 0 auto 1rem;
+  }
+
+  .theme-light .ns-console::before {
+    background: rgba(15, 23, 42, 0.14);
+  }
+
+  .ns-alleles {
+    top: 72px;
+    right: clamp(12px, 3vw, 16px);
+    grid-template-columns: minmax(140px, 180px);
+  }
+
+  .ns-allele-chip {
+    padding: 0.28rem 0.4rem 0.28rem 0.6rem;
+    border-radius: 10px;
+  }
+
+  .ns-hud {
+    bottom: clamp(72px, 12vw, 96px);
+  }
+}
+

package/src/tool/three-body-problem/app.ts

@@ -0,0 +1,274 @@
+import { ThreeBodyEngine, THREE_BODY_PRESETS, type BodyState } from './logic/ThreeBodyEngine';
+
+export function initThreeBodyProblem() {
+  const root = document.getElementById('three-body-root');
+  if (root) {
+    const canvas = document.getElementById('three-body-canvas') as HTMLCanvasElement;
+    const controls = document.getElementById('three-body-controls');
+    const toggleButton = document.getElementById('three-body-toggle');
+    const resetButton = document.getElementById('three-body-reset');
+    const speedInput = document.getElementById('three-body-speed') as HTMLInputElement;
+    const trailInput = document.getElementById('three-body-trail') as HTMLInputElement;
+    const energyValue = document.getElementById('three-body-energy');
+    const separationValue = document.getElementById('three-body-separation');
+    const centerValue = document.getElementById('three-body-center');
+    const presetButtons = Array.from(document.querySelectorAll('.three-body-preset'));
+    const tabButtons = Array.from(document.querySelectorAll('.three-body-tab'));
+    const engine = new ThreeBodyEngine();
+    let activePreset = THREE_BODY_PRESETS[0];
+    let bodies = engine.cloneBodies(activePreset.bodies);
+    let trails = bodies.map(() => [] as Array<{ x: number; y: number }>);
+    let isRunning = true;
+    let animationFrame = 0;
+    let zoom = activePreset.zoom;
+    let activeBodyIndex = 0;
+    const labels = {
+      pause: root.dataset.pauseLabel ?? 'Pause',
+      play: root.dataset.playLabel ?? 'Play',
+    };
+
+    function setPreset(presetId: string) {
+      const selectedPreset = THREE_BODY_PRESETS.find((preset) => preset.id === presetId) ?? THREE_BODY_PRESETS[0];
+      activePreset = selectedPreset;
+      bodies = engine.cloneBodies(selectedPreset.bodies);
+      trails = bodies.map(() => []);
+      zoom = selectedPreset.zoom;
+      trailInput.value = selectedPreset.trailLength.toString();
+      renderControls();
+      updatePresetButtons(presetId);
+    }
+    function updatePresetButtons(presetId: string) {
+      presetButtons.forEach((button) => {
+        button.classList.toggle('is-active', button.getAttribute('data-preset') === presetId);
+      });
+    }
+    function renderControls() {
+      if (!controls) return;
+      controls.innerHTML = '';
+      bodies.forEach((body, index) => {
+        controls.appendChild(createBodyPanel(body, index));
+      });
+      bindBodyInputs(controls.querySelectorAll('input'));
+      bindScrubbableInputs(controls.querySelectorAll('.three-body-scrub-input'));
+    }
+    function createBodyPanel(body: BodyState, index: number) {
+      const panel = document.createElement('article');
+      panel.className = 'three-body-panel';
+      panel.classList.toggle('is-active', index === activeBodyIndex);
+      panel.style.setProperty('--body-color', body.color);
+      panel.dataset.bodyLabel = body.label;
+      panel.dataset.bodyIndex = index.toString();
+      panel.innerHTML = `
+        <div class="three-body-panel-title">
+          <strong style="color: ${body.color}">${body.label}</strong>
+        </div>
+        ${renderScrubInput({ index, field: 'mass', label: 'm', min: 0.2, max: 4, value: body.mass, step: 0.05, color: body.color })}
+        ${renderScrubInput({ index, field: 'vx', label: 'v_x', min: -1.6, max: 1.6, value: body.vx, step: 0.01, color: body.color })}
+        ${renderScrubInput({ index, field: 'vy', label: 'v_y', min: -1.6, max: 1.6, value: body.vy, step: 0.01, color: body.color })}
+      `;
+      return panel;
+    }
+    function bindBodyInputs(inputs: NodeListOf<Element>) {
+      inputs.forEach((input) => {
+        input.addEventListener('input', () => {
+          const slider = input as HTMLInputElement;
+          const bodyIndex = Number(slider.dataset.bodyIndex);
+          const field = slider.dataset.field as keyof BodyState;
+          const value = clampToInput(slider, Number(slider.value));
+          if (Number.isFinite(bodyIndex) && field) {
+            bodies[bodyIndex] = { ...bodies[bodyIndex], [field]: value };
+            trails[bodyIndex] = [];
+            slider.value = formatInputValue(value, slider);
+          }
+        });
+      });
+    }
+    function setActiveBody(index: number) {
+      activeBodyIndex = index;
+      tabButtons.forEach((button) => {
+        button.classList.toggle('is-active', Number((button as HTMLElement).dataset.bodyTab) === index);
+      });
+      controls?.querySelectorAll('.three-body-panel').forEach((panel) => {
+        panel.classList.toggle('is-active', Number((panel as HTMLElement).dataset.bodyIndex) === index);
+      });
+    }
+    interface ScrubInputConfig {
+      index: number;
+      field: string;
+      label: string;
+      min: number;
+      max: number;
+      value: number;
+      step: number;
+      color: string;
+    }
+    function renderScrubInput(config: ScrubInputConfig) {
+      const value = formatInputValue(config.value, { dataset: { step: config.step.toString() } } as HTMLInputElement);
+      return `
+        <label class="three-body-scrub-row">
+          <span>${config.label}</span>
+          <input class="three-body-scrub-input" style="color: ${config.color}" data-body-index="${config.index}" data-field="${config.field}" data-min="${config.min}" data-max="${config.max}" data-step="${config.step}" inputmode="decimal" value="${value}" />
+        </label>
+      `;
+    }
+    function formatInputValue(value: number, input: HTMLInputElement) {
+      const step = Number(input.dataset.step) || 0.01;
+      const decimals = step >= 1 ? 0 : Math.max(0, step.toString().split('.')[1]?.length ?? 2);
+      return value.toFixed(decimals);
+    }
+    function clampToInput(input: HTMLInputElement, value: number) {
+      const min = Number(input.dataset.min);
+      const max = Number(input.dataset.max);
+      if (!Number.isFinite(value)) return Number(input.value) || 0;
+      return Math.min(max, Math.max(min, value));
+    }
+    function bindScrubbableInputs(inputs: NodeListOf<Element>) {
+      inputs.forEach((inputElement) => {
+        const input = inputElement as HTMLInputElement;
+        let startX = 0;
+        let startValue = 0;
+        let dragged = false;
+
+        input.addEventListener('pointerdown', (event) => {
+          startX = event.clientX;
+          startValue = Number(input.value) || 0;
+          dragged = false;
+          input.setPointerCapture(event.pointerId);
+        });
+        input.addEventListener('pointermove', (event) => {
+          if (!input.hasPointerCapture(event.pointerId)) return;
+          const delta = event.clientX - startX;
+          if (Math.abs(delta) < 2) return;
+          dragged = true;
+          const step = Number(input.dataset.step) || 0.01;
+          const nextValue = clampToInput(input, startValue + delta * step);
+          input.value = formatInputValue(nextValue, input);
+          input.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+        input.addEventListener('pointerup', (event) => {
+          if (input.hasPointerCapture(event.pointerId)) input.releasePointerCapture(event.pointerId);
+          if (dragged) input.blur();
+        });
+      });
+    }
+    function draw() {
+      const context = canvas.getContext('2d');
+      if (!context) return;
+
+      const dpr = window.devicePixelRatio || 1;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      context.scale(dpr, dpr);
+      context.clearRect(0, 0, width, height);
+
+      const originX = width / 2;
+      const originY = height / 2;
+      const origin = { x: originX, y: originY };
+      drawGrid(context, width, height, origin);
+      bodies.forEach((body, index) => drawBody(context, body, trails[index], origin));
+    }
+    function drawBody(context: CanvasRenderingContext2D, body: BodyState, trail: Array<{ x: number; y: number }>, origin: { x: number; y: number }) {
+      drawTrail(context, body, trail, origin);
+      drawBodyGlow(context, body, origin);
+    }
+    function drawTrail(context: CanvasRenderingContext2D, body: BodyState, trail: Array<{ x: number; y: number }>, origin: { x: number; y: number }) {
+      context.beginPath();
+      trail.forEach((point, pointIndex) => {
+        const screenX = origin.x + point.x * zoom;
+        const screenY = origin.y + point.y * zoom;
+        if (pointIndex === 0) context.moveTo(screenX, screenY);
+        else context.lineTo(screenX, screenY);
+      });
+      context.strokeStyle = body.color;
+      context.globalAlpha = 0.82;
+      context.lineWidth = 1.85;
+      context.shadowColor = body.color;
+      context.shadowBlur = 2.5;
+      context.stroke();
+      context.shadowBlur = 0;
+      context.globalAlpha = 1;
+    }
+    function drawBodyGlow(context: CanvasRenderingContext2D, body: BodyState, origin: { x: number; y: number }) {
+      const x = origin.x + body.x * zoom;
+      const y = origin.y + body.y * zoom;
+      const radius = Math.max(4, Math.sqrt(body.mass) * 5);
+      const glow = context.createRadialGradient(x, y, 2, x, y, radius * 3);
+      glow.addColorStop(0, body.color);
+      glow.addColorStop(1, 'rgba(255,255,255,0)');
+      context.fillStyle = glow;
+      context.beginPath();
+      context.arc(x, y, radius * 3, 0, Math.PI * 2);
+      context.fill();
+      context.fillStyle = body.color;
+      context.beginPath();
+      context.arc(x, y, radius, 0, Math.PI * 2);
+      context.fill();
+    }
+    function drawGrid(context: CanvasRenderingContext2D, width: number, height: number, origin: { x: number; y: number }) {
+      const isDark = document.documentElement.classList.contains('theme-dark') || document.body.classList.contains('theme-dark');
+      context.strokeStyle = isDark ? 'rgba(255,255,255,0.09)' : 'rgba(67, 56, 43, 0.12)';
+      context.lineWidth = 1;
+      for (let x = origin.x % 48; x < width; x += 48) {
+        context.beginPath();
+        context.moveTo(x, 0);
+        context.lineTo(x, height);
+        context.stroke();
+      }
+      for (let y = origin.y % 48; y < height; y += 48) {
+        context.beginPath();
+        context.moveTo(0, y);
+        context.lineTo(width, y);
+        context.stroke();
+      }
+    }
+    function updateReadout() {
+      const metrics = engine.calculateMetrics(bodies);
+      if (energyValue) energyValue.textContent = metrics.totalEnergy.toFixed(3);
+      if (separationValue) separationValue.textContent = `${metrics.minSeparation.toFixed(2)} - ${metrics.maxSeparation.toFixed(2)}`;
+      if (centerValue) centerValue.textContent = `${metrics.centerOfMassX.toFixed(2)}, ${metrics.centerOfMassY.toFixed(2)}`;
+    }
+    function tick() {
+      if (isRunning) {
+        const speed = Number(speedInput.value) || 1;
+        for (let i = 0; i < 3; i += 1) {
+          const snapshot = engine.step(bodies, activePreset.timeStep * speed);
+          bodies = snapshot.bodies;
+        }
+        const trailLimit = Number(trailInput.value) || activePreset.trailLength;
+        trails.forEach((trail, index) => {
+          trail.push({ x: bodies[index].x, y: bodies[index].y });
+          if (trail.length > trailLimit) trail.shift();
+        });
+      }
+      updateReadout();
+      draw();
+      animationFrame = window.requestAnimationFrame(tick);
+    }
+    presetButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        setPreset(button.getAttribute('data-preset') ?? 'figureEight');
+      });
+    });
+    tabButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        setActiveBody(Number((button as HTMLElement).dataset.bodyTab) || 0);
+      });
+    });
+    toggleButton?.addEventListener('click', () => {
+      isRunning = !isRunning;
+      toggleButton.textContent = isRunning ? labels.pause : labels.play;
+    });
+
+    resetButton?.addEventListener('click', () => {
+      setPreset(activePreset.id);
+    });
+    bindScrubbableInputs(document.querySelectorAll('.three-body-global-controls .three-body-scrub-input'));
+    setPreset('figureEight');
+    tick();
+    document.addEventListener('astro:before-swap', () => {
+      window.cancelAnimationFrame(animationFrame);
+    }, { once: true });
+  }
+}

package/src/tool/three-body-problem/bibliography.astro

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

package/src/tool/three-body-problem/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'A remarkable periodic solution of the three-body problem in the case of equal masses',
+    url: 'https://arxiv.org/abs/math/0011268',
+  },
+  {
+    name: 'Three-body problem',
+    url: 'https://en.wikipedia.org/wiki/Three-body_problem',
+  },
+  {
+    name: 'Solar System Dynamics',
+    url: 'https://www.solarsystemdynamics.info/',
+  },
+];

package/src/tool/three-body-problem/component.astro

@@ -0,0 +1,70 @@
+---
+import './three-body-problem-simulator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div
+  class="three-body-root"
+  id="three-body-root"
+  data-pause-label={ui.pauseButton}
+  data-play-label={ui.playButton}
+><section class="three-body-stage" aria-label={ui.canvasLabel}>
+    <div class="three-body-sky">
+      <canvas id="three-body-canvas"></canvas>
+      <div class="three-body-reticle" aria-hidden="true"></div>
+    </div>
+    <div class="three-body-readout">
+      <div>
+        <span>E</span>
+        <strong id="three-body-energy">0.00</strong>
+      </div>
+      <div>
+        <span>R</span>
+        <strong id="three-body-separation">0.00</strong>
+      </div>
+      <div>
+        <span>COM</span>
+        <strong id="three-body-center">0.00, 0.00</strong>
+      </div>
+    </div></section>
+  <section class="three-body-console">
+    <div class="three-body-global-controls">
+      <label class="three-body-scrub-row">
+        <span>dt</span>
+        <input id="three-body-speed" class="three-body-scrub-input" inputmode="decimal" data-min="0.25" data-max="2.5" data-step="0.05" value="1.00" />
+      </label>
+      <label class="three-body-scrub-row">
+        <span>trail</span>
+        <input id="three-body-trail" class="three-body-scrub-input" inputmode="numeric" data-min="120" data-max="900" data-step="20" value="720" />
+      </label>
+    </div>
+    <div class="three-body-body-tabs" aria-label="Body selector">
+      <button class="three-body-tab is-active" type="button" data-body-tab="0">A</button>
+      <button class="three-body-tab" type="button" data-body-tab="1">B</button>
+      <button class="three-body-tab" type="button" data-body-tab="2">C</button>
+    </div>
+    <div class="three-body-body-controls" id="three-body-controls"></div>
+  </section>
+  <div class="three-body-instrument-bar">
+    <div class="three-body-presets" aria-label={ui.presetsLabel}>
+      <button class="three-body-preset is-active" type="button" data-preset="figureEight"><span class="full">{ui.figureEightPreset}</span><span class="short">Fig 8</span></button>
+      <button class="three-body-preset" type="button" data-preset="lagrange"><span class="full">{ui.lagrangePreset}</span><span class="short">Lagrange</span></button>
+      <button class="three-body-preset" type="button" data-preset="slingshot"><span class="full">{ui.slingshotPreset}</span><span class="short">Shot</span></button>
+    </div>
+    <div class="three-body-actions">
+      <button class="three-body-action" type="button" id="three-body-toggle">{ui.pauseButton}</button>
+      <button class="three-body-action" type="button" id="three-body-reset">{ui.resetButton}</button>
+    </div></div></div>
+
+<script>
+  import { initThreeBodyProblem } from './app';
+
+  initThreeBodyProblem();
+</script>
+
+