@jjlmoya/utils-science 1.19.0 → 1.21.0

package/src/tool/colony-counter/seo.astro

@@ -12,4 +12,4 @@ const content = await colonyCounter.i18n[locale]?.();
 if (!content) return null;
 ---
 
-<SEORenderer content={{ sections: content.seo, locale }} />
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/cosmic-inflation/bibliography.astro

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

package/src/tool/cosmic-inflation/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Inflationary universe: A possible solution to the horizon and flatness problems',
+    url: 'https://journals.aps.org/prd/abstract/10.1103/PhysRevD.23.347',
+  },
+  {
+    name: 'A new inflationary universe scenario: A possible solution of the horizon, flatness, homogeneity, isotropy and primordial monopole problems',
+    url: 'https://www.sciencedirect.com/science/article/pii/0370269382912199',
+  },
+];

package/src/tool/cosmic-inflation/component.astro

@@ -0,0 +1,270 @@
+---
+import './cosmic-inflation-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="cosmic-calculator-root" id="cosmic-inflation-root">
+  <div class="cosmic-presets">
+    <button class="cosmic-preset-btn active" data-efolds="60" data-energy="16">{ui.presetGuth}</button>
+    <button class="cosmic-preset-btn" data-efolds="70" data-energy="15">{ui.presetChaotic}</button>
+    <button class="cosmic-preset-btn" data-efolds="110" data-energy="18">{ui.presetExtreme}</button>
+  </div>
+
+  <div class="cosmic-controls-section">
+    <div class="cosmic-input-group">
+      <div class="cosmic-input-header">
+        <label for="cosmic-efolds">{ui.efoldsLabel}</label>
+        <span id="cosmic-efolds-val" class="cosmic-input-val">60</span>
+      </div>
+      <input type="range" id="cosmic-efolds" class="cosmic-slider" min="10" max="120" value="60" step="1" />
+      <span class="cosmic-tooltip">{ui.efoldsTooltip}</span>
+    </div>
+
+    <div class="cosmic-input-group">
+      <div class="cosmic-input-header">
+        <label for="cosmic-energy">{ui.energyLabel}</label>
+        <span id="cosmic-energy-val" class="cosmic-input-val">10^16</span>
+      </div>
+      <input type="range" id="cosmic-energy" class="cosmic-slider" min="10" max="19" value="16" step="1" />
+      <span class="cosmic-tooltip">{ui.energyTooltip}</span>
+    </div>
+  </div>
+
+  <div class="cosmic-chart-section">
+    <h3>{ui.chartTitle}</h3>
+    <div class="cosmic-canvas-container">
+      <canvas id="cosmic-chart-canvas"></canvas>
+    </div>
+  </div>
+
+  <div class="cosmic-results-section">
+    <div class="cosmic-result-block">
+      <span class="cosmic-result-label">{ui.scaleFactorResult}</span>
+      <span id="cosmic-scale-factor" class="cosmic-result-number">---</span>
+      <span class="cosmic-tooltip">{ui.scaleFactorTooltip}</span>
+      <span id="cosmic-analogy-text" class="cosmic-analogy"></span>
+    </div>
+
+    <div class="cosmic-divider-line"></div>
+
+    <div class="cosmic-result-block">
+      <span class="cosmic-result-label">{ui.reheatingTempResult}</span>
+      <span id="cosmic-reheating" class="cosmic-result-number">---</span>
+      <span class="cosmic-tooltip">{ui.reheatingTooltip}</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { CosmicInflationEngine } from './logic/CosmicInflationEngine';
+
+  const root = document.getElementById('cosmic-inflation-root');
+  if (root) {
+    const efoldsInput = document.getElementById('cosmic-efolds') as HTMLInputElement;
+    const energyInput = document.getElementById('cosmic-energy') as HTMLInputElement;
+    const efoldsVal = document.getElementById('cosmic-efolds-val');
+    const energyVal = document.getElementById('cosmic-energy-val');
+    const scaleFactorVal = document.getElementById('cosmic-scale-factor');
+    const reheatingVal = document.getElementById('cosmic-reheating');
+    const analogyText = document.getElementById('cosmic-analogy-text');
+    const canvas = document.getElementById('cosmic-chart-canvas') as HTMLCanvasElement;
+    const presetBtns = document.querySelectorAll('.cosmic-preset-btn');
+
+    const engine = new CosmicInflationEngine();
+
+    const analogyInsuff = 'Moderate inflation. This expansion is <span class="highlight">insufficient</span> to solve the horizon problem.';
+    const analogyProton = 'The universe expanded from the size of a <span class="highlight">proton</span> to the size of a <span class="highlight">galaxy</span> in a fraction of a second.';
+    const analogyObservable = 'The universe expanded from a <span class="highlight">subatomic scale</span> to larger than the <span class="highlight">observable universe</span> in 10^-32 seconds.';
+
+    function updateSliderFill(slider: HTMLInputElement) {
+      const min = parseFloat(slider.min) || 0;
+      const max = parseFloat(slider.max) || 100;
+      const val = parseFloat(slider.value) || 0;
+      const percentage = ((val - min) / (max - min)) * 100;
+      slider.style.background = `linear-gradient(to right, var(--cosmic-highlight) 0%, var(--cosmic-highlight) ${percentage}%, var(--cosmic-input-border) ${percentage}%, var(--cosmic-input-border) 100%)`;
+    }
+
+    function renderAnalogy(efolds: number) {
+      if (!analogyText) return;
+      if (efolds >= 60) {
+        analogyText.innerHTML = analogyObservable;
+      } else if (efolds >= 30) {
+        analogyText.innerHTML = analogyProton;
+      } else {
+        analogyText.innerHTML = analogyInsuff;
+      }
+    }
+
+    function update() {
+      const efolds = parseFloat(efoldsInput.value) || 60;
+      const energyPower = parseFloat(energyInput.value) || 16;
+      const energy = Math.pow(10, energyPower);
+
+      if (efoldsVal) efoldsVal.textContent = efolds.toString();
+      if (energyVal) energyVal.textContent = `10^${energyPower}`;
+
+      updateSliderFill(efoldsInput);
+      updateSliderFill(energyInput);
+
+      const result = engine.calculate(efolds, energy);
+
+      if (scaleFactorVal) {
+        scaleFactorVal.textContent = formatCosmicNumber(result.scaleFactorRatio);
+      }
+      if (reheatingVal) {
+        reheatingVal.textContent = formatCosmicNumber(result.reheatingTemperature);
+      }
+
+      renderAnalogy(efolds);
+      drawSpaceTime(efolds);
+    }
+
+    function formatCosmicNumber(val: number): string {
+      if (val >= 1e6 || val <= 1e-4) {
+        const str = val.toExponential(2);
+        return str.replace('e+', ' × 10^').replace('e-', ' × 10^-');
+      }
+      return val.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }    interface DrawingContext {
+      ctx: CanvasRenderingContext2D;
+      w: number;
+      h: number;
+      centerX: number;
+      centerY: number;
+      scale: number;
+      isExtreme: boolean;
+      efolds: number;
+      gridColor: string;
+    }
+
+    function drawVerticalGridLines(c: DrawingContext) {
+      const cols = 24;
+      for (let i = 0; i <= cols; i++) {
+        c.ctx.beginPath();
+        for (let j = 0; j <= c.h; j += 5) {
+          const rawX = (c.w / cols) * i;
+          const rawY = j;
+
+          const dx = rawX - c.centerX;
+          const dy = rawY - c.centerY;
+
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const factor = 1 + (dist / 100) * (c.scale * 0.05);
+
+          let x = c.centerX + dx * factor;
+          const y = c.centerY + dy * factor;
+
+          if (c.isExtreme) {
+            const perturbation = Math.sin(j * 0.05 + c.efolds) * (c.efolds - 80) * 0.3;
+            x += perturbation;
+          }
+
+          if (j === 0) c.ctx.moveTo(x, y);
+          else c.ctx.lineTo(x, y);
+        }
+        c.ctx.stroke();
+      }
+    }
+
+    function drawHorizontalGridLines(c: DrawingContext) {
+      const rows = 16;
+      for (let i = 0; i <= rows; i++) {
+        c.ctx.beginPath();
+        for (let j = 0; j <= c.w; j += 5) {
+          const rawX = j;
+          const rawY = (c.h / rows) * i;
+
+          const dx = rawX - c.centerX;
+          const dy = rawY - c.centerY;
+
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const factor = 1 + (dist / 100) * (c.scale * 0.05);
+
+          const x = c.centerX + dx * factor;
+          let y = c.centerY + dy * factor;
+
+          if (c.isExtreme) {
+            const perturbation = Math.cos(j * 0.05 + c.efolds) * (c.efolds - 80) * 0.3;
+            y += perturbation;
+          }
+
+          if (j === 0) c.ctx.moveTo(x, y);
+          else c.ctx.lineTo(x, y);
+        }
+        c.ctx.stroke();
+      }
+    }
+
+    function drawRadialPulses(c: DrawingContext) {
+      const pulseCount = 3;
+      for (let p = 1; p <= pulseCount; p++) {
+        const radius = ((p * 40 + (c.efolds * 2)) % 150) + 10;
+        c.ctx.beginPath();
+        c.ctx.strokeStyle = c.gridColor + (1 - radius / 160) * 0.3 + ')';
+        c.ctx.lineWidth = 1.5;
+        c.ctx.arc(c.centerX, c.centerY, radius, 0, Math.PI * 2);
+        c.ctx.stroke();
+      }
+    }
+
+    function drawSpaceTime(efolds: number) {
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = canvas.clientWidth * dpr;
+      canvas.height = canvas.clientHeight * dpr;
+      ctx.scale(dpr, dpr);
+      const w = canvas.width / dpr;
+      const h = canvas.height / dpr;
+      ctx.clearRect(0, 0, w, h);
+      const isDark = document.body.classList.contains('theme-dark') || document.documentElement.classList.contains('theme-dark');
+      ctx.strokeStyle = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)';
+      ctx.lineWidth = 0.5;
+      const drawingCtx: DrawingContext = {
+        ctx, w, h,
+        centerX: w / 2, centerY: h / 2,
+        scale: 1 + (efolds - 10) / 10,
+        isExtreme: efolds > 80,
+        efolds,
+        gridColor: isDark ? 'rgba(244, 114, 182, ' : 'rgba(236, 72, 153, '
+      };
+      drawVerticalGridLines(drawingCtx);
+      drawHorizontalGridLines(drawingCtx);
+      drawRadialPulses(drawingCtx);
+    }
+
+    efoldsInput.addEventListener('input', () => {
+      presetBtns.forEach(b => b.classList.remove('active'));
+      update();
+    });
+    energyInput.addEventListener('input', () => {
+      presetBtns.forEach(b => b.classList.remove('active'));
+      update();
+    });
+
+    presetBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        presetBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        const efolds = btn.getAttribute('data-efolds');
+        const energy = btn.getAttribute('data-energy');
+
+        if (efolds) efoldsInput.value = efolds;
+        if (energy) energyInput.value = energy;
+
+        update();
+      });
+    });
+
+    update();
+
+    window.addEventListener('resize', update);
+  }
+</script>

package/src/tool/cosmic-inflation/cosmic-inflation-calculator.css

@@ -0,0 +1,277 @@
+:root {
+  --cosmic-bg: #fff;
+  --cosmic-border: rgba(0, 0, 0, 0.06);
+  --cosmic-text: #0f172a;
+  --cosmic-text-muted: #4b5563;
+  --cosmic-input-border: rgba(0, 0, 0, 0.1);
+  --cosmic-divider: rgba(0, 0, 0, 0.08);
+  --cosmic-canvas-bg: #fdfdfd;
+  --cosmic-highlight: #ec4899;
+  --cosmic-number-color: #0f172a;
+}
+
+.theme-dark {
+  --cosmic-bg: #030712;
+  --cosmic-border: rgba(255, 255, 255, 0.05);
+  --cosmic-text: #f3f4f6;
+  --cosmic-text-muted: #d1d5db;
+  --cosmic-input-border: rgba(255, 255, 255, 0.15);
+  --cosmic-divider: rgba(255, 255, 255, 0.08);
+  --cosmic-canvas-bg: #090d16;
+  --cosmic-highlight: #f472b6;
+  --cosmic-number-color: #fff;
+}
+
+.cosmic-calculator-root {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  background: var(--cosmic-bg);
+  color: var(--cosmic-text);
+  border-radius: 2rem;
+  border: 1px solid var(--cosmic-border);
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+@media (min-width: 769px) {
+  .cosmic-calculator-root {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "presets presets"
+      "controls results"
+      "chart chart";
+    gap: 3rem;
+    padding: 2.5rem;
+  }
+}
+
+.cosmic-presets {
+  display: flex;
+  gap: 1rem;
+  border-bottom: 1px solid var(--cosmic-divider);
+  padding-bottom: 0.25rem;
+}
+
+@media (min-width: 769px) {
+  .cosmic-presets {
+    grid-area: presets;
+    gap: 2rem;
+  }
+}
+
+.cosmic-preset-btn {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: var(--cosmic-text);
+  font-size: 0.9rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: all 0.2s;
+  padding: 10px 16px;
+  opacity: 0.5;
+}
+
+.cosmic-preset-btn:hover {
+  opacity: 1;
+}
+
+.cosmic-preset-btn.active {
+  opacity: 1;
+  border-bottom-color: var(--cosmic-highlight);
+  color: var(--cosmic-text);
+}
+
+.cosmic-controls-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@media (min-width: 769px) {
+  .cosmic-controls-section {
+    grid-area: controls;
+  }
+}
+
+.cosmic-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cosmic-input-group label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--cosmic-text-muted);
+}
+
+.cosmic-input-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cosmic-input-val {
+  font-size: 1.25rem;
+  font-weight: 400;
+  color: var(--cosmic-highlight);
+}
+
+.cosmic-slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 4px;
+  background: var(--cosmic-input-border);
+  outline: none;
+  border-radius: 2px;
+  padding: 12px 0;
+  background-clip: content-box;
+  cursor: pointer;
+}
+
+.cosmic-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--cosmic-highlight);
+  cursor: pointer;
+  transition: transform 0.1s;
+  margin-top: -7px;
+}
+
+.cosmic-slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+}
+
+.cosmic-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.cosmic-tooltip {
+  font-size: 0.7rem;
+  color: var(--cosmic-text-muted);
+  line-height: 1.4;
+  margin-top: 0.25rem;
+  opacity: 0.9;
+}
+
+@media (max-width: 768px) {
+  .cosmic-tooltip {
+    display: none;
+  }
+}
+
+.cosmic-results-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (min-width: 769px) {
+  .cosmic-results-section {
+    grid-area: results;
+    gap: 2rem;
+  }
+}
+
+.cosmic-divider-line {
+  height: 1px;
+  background-color: var(--cosmic-divider);
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .cosmic-results-section .cosmic-divider-line {
+    display: none;
+  }
+}
+
+.cosmic-result-block {
+  display: flex;
+  flex-direction: column;
+}
+
+.cosmic-result-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--cosmic-text-muted);
+  margin-bottom: 0.25rem;
+}
+
+.cosmic-result-number {
+  font-size: clamp(2rem, 7vw, 3rem);
+  font-weight: 200;
+  line-height: 1.1;
+  color: var(--cosmic-number-color);
+  letter-spacing: -0.03em;
+}
+
+.cosmic-analogy {
+  font-size: 0.85rem;
+  color: var(--cosmic-text-muted);
+  margin-top: 0.75rem;
+  line-height: 1.5;
+  opacity: 0.95;
+}
+
+.cosmic-analogy .highlight {
+  color: var(--cosmic-highlight);
+  font-weight: 600;
+}
+
+.cosmic-chart-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+@media (min-width: 769px) {
+  .cosmic-chart-section {
+    grid-area: chart;
+  }
+}
+
+.cosmic-chart-section h3 {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--cosmic-text-muted);
+  margin: 0;
+}
+
+.cosmic-canvas-container {
+  position: relative;
+  width: 100%;
+  height: 240px;
+  background: var(--cosmic-canvas-bg);
+  border-radius: 1.5rem;
+  border: 1px solid var(--cosmic-border);
+  overflow: hidden;
+}
+
+@media (min-width: 769px) {
+  .cosmic-canvas-container {
+    height: 320px;
+  }
+}
+
+.cosmic-canvas-container canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}

package/src/tool/cosmic-inflation/entry.ts

@@ -0,0 +1,26 @@
+import type { ScienceToolEntry } from '../../types';
+
+export const cosmicInflation: ScienceToolEntry = {
+  id: 'cosmic-inflation-calculator',
+  icons: {
+    bg: 'mdi:rocket-launch-outline',
+    fg: 'mdi:chart-timeline-variant',
+  },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    id: () => import('./i18n/id').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),
+    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),
+  },
+};