@jjlmoya/utils-science 1.33.0 → 1.35.0

package/src/tool/roche-limit-satellite-disruption/script.ts

@@ -0,0 +1,274 @@
+import { PRIMARY_BODIES, SATELLITE_BODIES, calculateRocheLimit } from './logic';
+import type { PrimaryId, RocheResult, SatelliteId } from './logic';
+import { animateParticles, resizeParticleCanvas } from './particle-system';
+import type { VisualState } from './particle-system';
+import { clearState, restoreState, saveState } from './storage';
+import { planetPalettes, satelliteStyles } from './visual-data';
+
+const root = document.getElementById('roche-console') as HTMLElement;
+const ui = JSON.parse(root.dataset.ui ?? '{}');
+const $ = <T extends HTMLElement | SVGElement>(id: string) => document.getElementById(id) as T;
+const refs = {
+  primaryName: $('roche-primary-name'),
+  primaryDensity: $('roche-primary-density'),
+  satelliteName: $('roche-satellite-name'),
+  satelliteDensity: $('roche-satellite-density'),
+  primaryPicker: $('roche-primary-picker'),
+  satellitePicker: $('roche-satellite-picker'),
+  primaryTrigger: $('roche-primary-trigger'),
+  satelliteTrigger: $('roche-satellite-trigger'),
+  primaryMenu: $('roche-primary-menu'),
+  satelliteMenu: $('roche-satellite-menu'),
+  distanceInput: $('roche-distance') as HTMLInputElement,
+  distanceOutput: $('roche-distance-output'),
+  verdict: $('roche-verdict'),
+  particleCanvas: $('roche-particle-canvas') as HTMLCanvasElement,
+  moon: $('roche-moon') as unknown as SVGGElement,
+  moonBody: $('roche-moon-body') as unknown as SVGEllipseElement,
+  moonScar: $('roche-moon-scar') as unknown as SVGPathElement,
+  planet: $('roche-planet') as unknown as SVGCircleElement,
+  planetStops: [$('roche-planet-stop-a'), $('roche-planet-stop-b'), $('roche-planet-stop-c')] as SVGElement[],
+  orbit: $('roche-orbit') as unknown as SVGCircleElement,
+  boundary: $('roche-boundary') as unknown as SVGCircleElement,
+  fragments: $('roche-fragments') as unknown as SVGGElement,
+  activeLimit: $('roche-active-limit'),
+  safetyRatio: $('roche-safety-ratio'),
+  period: $('roche-period'),
+  ringProgress: $('roche-ring-progress'),
+  fluidLimit: $('roche-fluid-limit'),
+  rigidLimit: $('roche-rigid-limit'),
+  fluidBar: $('roche-fluid-bar'),
+  rigidBar: $('roche-rigid-bar'),
+  density: $('roche-density'),
+  cohesion: $('roche-cohesion'),
+  radius: $('roche-radius'),
+  mapLabel: $('roche-map-label') as unknown as SVGTextElement,
+  closePass: $('roche-close-pass'),
+  reset: $('roche-reset'),
+};
+
+let selectedPrimary: PrimaryId = 'saturn';
+let selectedSatellite: SatelliteId = 'icy-moon';
+let latestMoon = { x: 0, y: 0, orbitRadius: 160, progress: 0 };
+let latestResult = calculateRocheLimit({ primaryId: selectedPrimary, satelliteId: selectedSatellite, orbitDistanceKm: 140000 });
+let orbitPhase = -35;
+let visualState: VisualState = 'orbiting';
+const verdictLabels: Record<RocheResult['verdict'], string> = {
+  stable: ui.stable,
+  grazing: ui.grazing,
+  fragmenting: ui.fragmenting,
+  ring: ui.ring,
+};
+
+function formatKm(value: number): string {
+  return `${Math.round(value).toLocaleString('en')} ${ui.km}`;
+}
+
+function formatValueUnit(value: string, unit: string): string {
+  return `<span>${value}</span><small>${unit}</small>`;
+}
+
+function setDistanceRange(): void {
+  const primary = PRIMARY_BODIES.find((item) => item.id === selectedPrimary) ?? PRIMARY_BODIES[0];
+  refs.distanceInput.min = `${Math.round(primary.radiusKm * 1.08)}`;
+  refs.distanceInput.max = `${Math.round(primary.radiusKm * 6.2)}`;
+  const value = Number(refs.distanceInput.value);
+  if (value < Number(refs.distanceInput.min) || value > Number(refs.distanceInput.max)) refs.distanceInput.value = `${Math.round(primary.radiusKm * 3.8)}`;
+}
+
+function updateBodyVisuals(): void {
+  const palette = planetPalettes[selectedPrimary];
+  const satelliteStyle = satelliteStyles[selectedSatellite];
+  refs.planetStops.forEach((stop, index) => stop.setAttribute('stop-color', palette.stops[index] ?? palette.stops[0]));
+  refs.moonBody.style.fill = satelliteStyle.fill;
+  refs.moonBody.style.stroke = satelliteStyle.stroke;
+  refs.moonScar.style.stroke = satelliteStyle.scar;
+  root.style.setProperty('--planet-line-rgb', palette.line);
+}
+
+function visualStateFor(result: RocheResult, stretch: number): VisualState {
+  if (result.ringProgress >= 0.6) return 'ringFormed';
+  if (result.ringProgress > 0.18) return 'disrupting';
+  if (stretch > 0.2) return 'deforming';
+  return 'orbiting';
+}
+
+function drawFragments(progress: number, orbitRadius: number): void {
+  refs.fragments.textContent = '';
+  for (let index = 0; index < 18 + Math.round(progress * 54); index += 1) {
+    const angle = index * 137.5 + progress * 80;
+    const lane = (index % 7) - 3;
+    const point = fragmentPoint(angle, orbitRadius, lane, progress);
+    const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    dot.setAttribute('cx', `${point.x.toFixed(2)}`);
+    dot.setAttribute('cy', `${point.y.toFixed(2)}`);
+    dot.setAttribute('r', `${(1.6 + (index % 4) * 0.7 + progress * 2.4).toFixed(2)}`);
+    dot.classList.add('roche-fragment');
+    dot.style.setProperty('--delay', `${index * -80}ms`);
+    refs.fragments.append(dot);
+  }
+}
+
+function fragmentPoint(angle: number, orbitRadius: number, lane: number, progress: number): { x: number; y: number } {
+  const radians = angle * Math.PI / 180;
+  const spread = progress * (18 + Math.abs(lane) * 6);
+  return {
+    x: 280 + Math.cos(radians) * (orbitRadius + lane * spread),
+    y: 280 + Math.sin(radians) * (orbitRadius * 0.31 + lane * spread * 0.22),
+  };
+}
+
+function updateMoon(result: RocheResult, orbitRadius: number, stretch: number): void {
+  const radians = orbitPhase * Math.PI / 180;
+  const moonX = 280 + Math.cos(radians) * orbitRadius;
+  const moonY = 280 + Math.sin(radians) * orbitRadius * 0.35;
+  const moonRx = 22 + stretch * 19;
+  const moonRy = 22 - stretch * 8;
+  const scale = visualState === 'ringFormed' ? 0.01 : satelliteStyles[selectedSatellite].size * Math.max(0.42, 1 - result.ringProgress * 0.65);
+  refs.moon.setAttribute('transform', `translate(${moonX.toFixed(2)} ${moonY.toFixed(2)}) rotate(${(orbitPhase + stretch * 3).toFixed(2)}) scale(${scale.toFixed(2)})`);
+  refs.moonBody.setAttribute('rx', `${moonRx.toFixed(2)}`);
+  refs.moonBody.setAttribute('ry', `${moonRy.toFixed(2)}`);
+  refs.moonScar.setAttribute('d', `M ${(-moonRx * 0.42).toFixed(1)} ${(-moonRy * 0.62).toFixed(1)} C ${(moonRx * 0.2).toFixed(1)} ${(-moonRy * 0.28).toFixed(1)} ${(moonRx * 0.42).toFixed(1)} ${(moonRy * 0.18).toFixed(1)} ${(moonRx * 0.18).toFixed(1)} ${(moonRy * 0.78).toFixed(1)}`);
+  setMoonDepth(radians, result.ringProgress);
+  latestMoon = { x: moonX, y: moonY, orbitRadius, progress: result.ringProgress };
+}
+
+function setMoonDepth(radians: number, ringProgress: number): void {
+  const rearOrbit = Math.sin(radians) < 0;
+  if (rearOrbit) refs.planet.parentNode?.insertBefore(refs.moon, refs.planet);
+  if (!rearOrbit) refs.mapLabel.parentNode?.insertBefore(refs.moon, refs.mapLabel);
+  refs.moon.classList.toggle('is-rear', rearOrbit);
+  refs.moon.style.opacity = visualState === 'ringFormed' ? '0' : `${Math.max(rearOrbit ? 0.1 : 0.18, (rearOrbit ? 0.38 : 1) - ringProgress * 0.82)}`;
+}
+
+function updateReadouts(result: RocheResult): void {
+  refs.distanceOutput.textContent = formatKm(Number(refs.distanceInput.value));
+  refs.verdict.textContent = verdictLabels[result.verdict];
+  refs.activeLimit.innerHTML = formatValueUnit(Math.round(result.selectedLimitKm).toLocaleString('en'), ui.km);
+  refs.safetyRatio.innerHTML = formatValueUnit(result.safetyRatio.toFixed(2), 'x');
+  refs.period.innerHTML = formatValueUnit(result.orbitalPeriodHours.toFixed(1), ui.hours);
+  refs.ringProgress.innerHTML = formatValueUnit(`${Math.round(result.ringProgress * 100)}`, '%');
+  refs.fluidLimit.textContent = formatKm(result.fluidLimitKm);
+  refs.rigidLimit.textContent = formatKm(result.rigidLimitKm);
+  refs.density.textContent = `${ui.density}: ${result.satellite.densityGcm3} g/cm3`;
+  refs.cohesion.textContent = `${ui.cohesion}: ${result.satellite.cohesion}`;
+  refs.radius.textContent = `${ui.planetRadius}: ${formatKm(result.primary.radiusKm)}`;
+}
+
+function update(persist = true): void {
+  setDistanceRange();
+  const result = calculateRocheLimit({ primaryId: selectedPrimary, satelliteId: selectedSatellite, orbitDistanceKm: Number(refs.distanceInput.value) });
+  const orbitRadius = Math.max(104, Math.min(238, Number(refs.distanceInput.value) * (205 / Number(refs.distanceInput.max))));
+  const stretch = Math.min(1, Math.max(0, (1.14 - result.safetyRatio) / 0.42));
+  visualState = visualStateFor(result, stretch);
+  latestResult = result;
+  root.dataset.verdict = result.verdict;
+  refs.orbit.setAttribute('r', `${orbitRadius.toFixed(1)}`);
+  refs.boundary.setAttribute('r', `${Math.max(96, Math.min(236, result.selectedLimitKm * (205 / Number(refs.distanceInput.max)))).toFixed(1)}`);
+  refs.fluidBar.style.width = `${Math.max(8, result.fluidLimitKm / Math.max(result.fluidLimitKm, result.rigidLimitKm) * 100)}%`;
+  refs.rigidBar.style.width = `${Math.max(8, result.rigidLimitKm / Math.max(result.fluidLimitKm, result.rigidLimitKm) * 100)}%`;
+  refs.mapLabel.textContent = result.ringProgress > 0.35 ? ui.debrisTrack : ui.moonTrack;
+  root.style.setProperty('--ring-opacity', `${0.12 + result.ringProgress * 0.78}`);
+  root.style.setProperty('--stress', `${Math.min(1, result.tidalStressIndex / 1.4)}`);
+  updateBodyVisuals();
+  updateMoon(result, orbitRadius, stretch);
+  updateReadouts(result);
+  drawFragments(result.ringProgress, orbitRadius);
+  if (persist) saveState(selectedPrimary, selectedSatellite, Number(refs.distanceInput.value));
+}
+
+function syncPickers(): void {
+  const primary = PRIMARY_BODIES.find((body) => body.id === selectedPrimary) ?? PRIMARY_BODIES[0];
+  const satellite = SATELLITE_BODIES.find((body) => body.id === selectedSatellite) ?? SATELLITE_BODIES[0];
+  refs.primaryName.textContent = primary.name;
+  refs.primaryDensity.textContent = `${primary.densityGcm3} g/cm3`;
+  refs.satelliteName.textContent = satellite.name;
+  refs.satelliteDensity.textContent = `${satellite.densityGcm3} g/cm3`;
+  refs.primaryMenu.querySelectorAll<HTMLButtonElement>('button').forEach((button) => button.classList.toggle('is-selected', button.dataset.value === selectedPrimary));
+  refs.satelliteMenu.querySelectorAll<HTMLButtonElement>('button').forEach((button) => button.classList.toggle('is-selected', button.dataset.value === selectedSatellite));
+}
+
+function setPickerOpen(picker: HTMLElement, trigger: HTMLElement, open: boolean): void {
+  picker.classList.toggle('is-open', open);
+  trigger.setAttribute('aria-expanded', `${open}`);
+}
+
+function closePickers(): void {
+  setPickerOpen(refs.primaryPicker, refs.primaryTrigger, false);
+  setPickerOpen(refs.satellitePicker, refs.satelliteTrigger, false);
+}
+
+function fillMenus(): void {
+  PRIMARY_BODIES.forEach((body) => appendOption({ menu: refs.primaryMenu, value: body.id, name: body.name, meta: `${body.densityGcm3} g/cm3`, select: () => {
+    selectedPrimary = body.id;
+  } }));
+  SATELLITE_BODIES.forEach((body) => appendOption({ menu: refs.satelliteMenu, value: body.id, name: body.name, meta: `${body.densityGcm3} g/cm3`, select: () => {
+    selectedSatellite = body.id;
+  } }));
+}
+
+function appendOption(option: { menu: HTMLElement; value: string; name: string; meta: string; select: () => void }): void {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.dataset.value = option.value;
+  button.innerHTML = `<strong>${option.name}</strong><small>${option.meta}</small>`;
+  button.addEventListener('click', () => {
+    option.select();
+    closePickers();
+    syncPickers();
+    update();
+  });
+  option.menu.append(button);
+}
+
+function bindEvents(): void {
+  refs.distanceInput.addEventListener('input', () => update());
+  window.addEventListener('resize', () => resizeParticleCanvas(refs.particleCanvas));
+  refs.primaryTrigger.addEventListener('click', () => togglePicker(refs.primaryPicker, refs.primaryTrigger));
+  refs.satelliteTrigger.addEventListener('click', () => togglePicker(refs.satellitePicker, refs.satelliteTrigger));
+  document.addEventListener('click', (event) => {
+    if (!root.contains(event.target as Node)) closePickers();
+  });
+  refs.closePass.addEventListener('click', closePass);
+  refs.reset.addEventListener('click', reset);
+}
+
+function togglePicker(picker: HTMLElement, trigger: HTMLElement): void {
+  const willOpen = !picker.classList.contains('is-open');
+  closePickers();
+  setPickerOpen(picker, trigger, willOpen);
+}
+
+function closePass(): void {
+  refs.distanceInput.value = `${Math.round(latestResult.selectedLimitKm * 0.86)}`;
+  update();
+}
+
+function reset(): void {
+  selectedPrimary = 'saturn';
+  selectedSatellite = 'icy-moon';
+  refs.distanceInput.value = '140000';
+  clearState();
+  syncPickers();
+  update();
+}
+
+function animateOrbit(): void {
+  const speed = visualState === 'ringFormed' ? 0 : 0.14 + Math.min(0.34, Math.pow(Math.max(0.2, 1 / latestResult.safetyRatio), 1.5) * 0.08);
+  orbitPhase = (orbitPhase + speed) % 360;
+  update(false);
+  window.requestAnimationFrame(animateOrbit);
+}
+
+fillMenus(); refs.distanceInput.value = '140000';
+const restoredState = restoreState();
+if (restoredState.primaryId) selectedPrimary = restoredState.primaryId;
+if (restoredState.satelliteId) selectedSatellite = restoredState.satelliteId;
+if (restoredState.orbitDistanceKm) refs.distanceInput.value = `${restoredState.orbitDistanceKm}`;
+setDistanceRange();
+bindEvents();
+syncPickers();
+resizeParticleCanvas(refs.particleCanvas);
+update();
+window.requestAnimationFrame(() => animateParticles(refs.particleCanvas, () => ({ moon: latestMoon, visualState })));
+window.requestAnimationFrame(animateOrbit);

package/src/tool/roche-limit-satellite-disruption/seo.astro

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

package/src/tool/roche-limit-satellite-disruption/storage.ts

@@ -0,0 +1,28 @@
+import { PRIMARY_BODIES, SATELLITE_BODIES } from './logic';
+import type { PrimaryId, SatelliteId } from './logic';
+
+const storageKey = 'roche-limit-satellite-disruption-state';
+
+export function saveState(primaryId: PrimaryId, satelliteId: SatelliteId, orbitDistanceKm: number): void {
+  window.localStorage.setItem(storageKey, JSON.stringify({ primaryId, satelliteId, orbitDistanceKm }));
+}
+
+export function clearState(): void {
+  window.localStorage.removeItem(storageKey);
+}
+
+export function restoreState(): { primaryId?: PrimaryId; satelliteId?: SatelliteId; orbitDistanceKm?: number } {
+  const rawState = window.localStorage.getItem(storageKey);
+  if (!rawState) return {};
+  try {
+    const state = JSON.parse(rawState);
+    return {
+      primaryId: PRIMARY_BODIES.some((body) => body.id === state.primaryId) ? state.primaryId : undefined,
+      satelliteId: SATELLITE_BODIES.some((body) => body.id === state.satelliteId) ? state.satelliteId : undefined,
+      orbitDistanceKm: Number.isFinite(state.orbitDistanceKm) ? state.orbitDistanceKm : undefined,
+    };
+  } catch {
+    clearState();
+    return {};
+  }
+}

package/src/tool/roche-limit-satellite-disruption/visual-data.ts

@@ -0,0 +1,16 @@
+import type { PrimaryId, SatelliteId } from './logic';
+
+export const planetPalettes: Record<PrimaryId, { stops: [string, string, string]; line: string }> = {
+  earth: { stops: ['#e6fbff', '#3c91b8', '#233a74'], line: '60 145 184' },
+  mars: { stops: ['#ffe0ba', '#c9653f', '#4a2621'], line: '201 101 63' },
+  jupiter: { stops: ['#fff4d6', '#d29b62', '#6d5148'], line: '210 155 98' },
+  saturn: { stops: ['#f7efe2', '#d19a66', '#63425f'], line: '209 154 102' },
+  neptune: { stops: ['#d8f4ff', '#4f8fcf', '#16295f'], line: '79 143 207' },
+};
+
+export const satelliteStyles: Record<SatelliteId, { fill: string; stroke: string; scar: string; size: number }> = {
+  'icy-moon': { fill: '#dbefff', stroke: '#7aa9c7', scar: '#9ec9df', size: 0.92 },
+  'rocky-moon': { fill: '#c9beb2', stroke: '#75695f', scar: '#93867a', size: 1.08 },
+  'rubble-pile': { fill: '#b9aa95', stroke: '#6f6253', scar: '#8e806e', size: 0.62 },
+  'iron-core': { fill: '#b9bec8', stroke: '#656d7a', scar: '#818a98', size: 0.98 },
+};

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/',
+  },
+];