@jjlmoya/utils-babies 1.1.0

package/src/tool/baby-percentile-calculator/logic.ts

@@ -0,0 +1,85 @@
+import { boys, girls, interpolateLMS, type GenderData } from './lmsData';
+
+interface LMSData {
+  L: number;
+  M: number;
+  S: number;
+}
+
+function erf(x: number): number {
+  const a1 = 0.254829592;
+  const a2 = -0.284496736;
+  const a3 = 1.421413741;
+  const a4 = -1.453152027;
+  const a5 = 1.061405429;
+  const p = 0.3275911;
+  const sign = x < 0 ? -1 : 1;
+  const ax = Math.abs(x);
+  const t = 1 / (1 + p * ax);
+  const y = 1 - (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-ax * ax);
+  return sign * y;
+}
+
+export function zToPercentile(z: number): number {
+  return 0.5 * (1 + erf(z / Math.sqrt(2))) * 100;
+}
+
+export function calculatePercentile(val: number, lms: LMSData): number {
+  const { L, M, S } = lms;
+  if (L === 0) return zToPercentile(Math.log(val / M) / S);
+  const z = (Math.pow(val / M, L) - 1) / (L * S);
+  return zToPercentile(z);
+}
+
+export function getDescriptionKey(p: number): string {
+  if (p < 3) return 'labelLowRange';
+  if (p < 15) return 'labelLowNormal';
+  if (p < 85) return 'labelNormal';
+  if (p < 97) return 'labelHighNormal';
+  return 'labelHighRange';
+}
+
+export function getDataSet(sex: string): GenderData {
+  return sex === 'boy' ? boys : girls;
+}
+
+export function calcBMI(weight: number, height: number): number {
+  return weight / Math.pow(height / 100, 2);
+}
+
+interface CurvePoint {
+  x: number;
+  y: number;
+}
+
+function zForCurve(c: number): number {
+  if (c === 50) return 0;
+  if (c === 3) return -1.88;
+  if (c === 15) return -1.04;
+  if (c === 85) return 1.04;
+  return 1.88;
+}
+
+export function buildCurveData(dataSet: GenderData, z: number): CurvePoint[] {
+  return Array.from({ length: 61 }, (_, m) => {
+    const lms = interpolateLMS(m, dataSet.weight);
+    if (lms.L === 0) return { x: m, y: lms.M * Math.exp(lms.S * z) };
+    return { x: m, y: lms.M * Math.pow(1 + lms.L * lms.S * z, 1 / lms.L) };
+  });
+}
+
+export const CURVES = [3, 15, 50, 85, 97];
+
+export function buildChartDatasets(sex: string): object[] {
+  const dataSet = getDataSet(sex);
+  const mainColor = sex === 'boy' ? '#0ea5e9' : '#0d9488';
+  return CURVES.map(c => ({
+    label: `P${c}`,
+    data: buildCurveData(dataSet, zForCurve(c)),
+    borderColor: c === 50 ? mainColor : '#cbd5e1',
+    borderWidth: c === 50 ? 2 : 1,
+    fill: false,
+    tension: 0.1,
+    parsing: { xAxisKey: 'x', yAxisKey: 'y' }
+  }));
+}

package/src/tool/baby-percentile-calculator/seo.astro

@@ -0,0 +1,36 @@
+---
+import {
+  SEOTitle, SEOStats, SEOTip, SEOTable,
+  SEOList, SEOSummary, SEOComparative, SEOGlossary, SEOArticle,
+} from '@jjlmoya/utils-shared';
+import { babyPercentileCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props { locale?: KnownLocale; }
+const { locale = 'es' } = Astro.props;
+const content = await babyPercentileCalculator.i18n[locale]?.();
+if (!content) return null;
+const { seo } = content;
+---
+<SEOArticle>
+  {seo.map((section: any) => {
+    switch (section.type) {
+      case 'summary':    return <SEOSummary title={section.title} items={section.items} />;
+      case 'title':      return <SEOTitle title={section.text} level={section.level || 2} />;
+      case 'paragraph':  return <p set:html={section.html} />;
+      case 'stats':      return <SEOStats stats={section.items} columns={section.columns} />;
+      case 'tip':        return <SEOTip><Fragment set:html={section.html} /></SEOTip>;
+      case 'table':      return (
+        <SEOTable headers={section.headers}>
+          {section.rows.map((row: string[]) => (
+            <tr>{row.map((cell: string) => <td set:html={cell} />)}</tr>
+          ))}
+        </SEOTable>
+      );
+      case 'list':       return <SEOList items={section.items} />;
+      case 'comparative': return <SEOComparative items={section.items} columns={section.columns} />;
+      case 'glossary':   return <SEOGlossary items={section.items} />;
+      default:           return null;
+    }
+  })}
+</SEOArticle>

package/src/tool/baby-percentile-calculator/style.css

@@ -0,0 +1,393 @@
+.baby-percentile-calculator {
+  --bpc-bg: #fff;
+  --bpc-bg-muted: #f8fafc;
+  --bpc-bg-alt: #f1f5f9;
+  --bpc-text: #0f172a;
+  --bpc-text-muted: #1e293b;
+  --bpc-text-dim: #64748b;
+  --bpc-text-faint: #94a3b8;
+  --bpc-border: #e2e8f0;
+  --bpc-border-inner: #475569;
+  --bpc-shadow: rgba(0, 0, 0, 0.05);
+  --bpc-primary: #0d9488;
+  --bpc-primary-on: #fff;
+  --bpc-primary-glow: rgba(13, 148, 136, 0.4);
+  --bpc-accent-boy: #0ea5e9;
+  --bpc-accent-boy-glow: rgba(14, 165, 233, 0.4);
+  --bpc-success: #10b981;
+  --bpc-warning-bg: #fff7ed;
+  --bpc-warning-border: #fed7aa;
+  --bpc-warning-text: #9a3412;
+  --bpc-disclaimer-bg: #f1f5f9;
+
+  background-color: var(--bpc-bg);
+  color: var(--bpc-text);
+  border: 1px solid var(--bpc-border);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px var(--bpc-shadow);
+}
+
+.theme-dark .baby-percentile-calculator {
+  --bpc-bg: #0f172a;
+  --bpc-bg-muted: #1e293b;
+  --bpc-bg-alt: #334155;
+  --bpc-text: #f8fafc;
+  --bpc-text-muted: #f8fafc;
+  --bpc-text-dim: #94a3b8;
+  --bpc-text-faint: #64748b;
+  --bpc-border: #1e293b;
+  --bpc-border-inner: #475569;
+  --bpc-shadow: rgba(0, 0, 0, 0.4);
+  --bpc-primary: #2dd4bf;
+  --bpc-primary-on: #fff;
+  --bpc-primary-glow: rgba(45, 212, 191, 0.4);
+  --bpc-accent-boy: #38bdf8;
+  --bpc-accent-boy-glow: rgba(56, 189, 248, 0.4);
+  --bpc-success: #34d399;
+  --bpc-warning-bg: rgba(154, 52, 18, 0.1);
+  --bpc-warning-border: rgba(154, 52, 18, 0.2);
+  --bpc-warning-text: #fdba74;
+  --bpc-disclaimer-bg: #1e293b;
+}
+
+.baby-percentile-calculator-main {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.baby-percentile-calculator-left {
+  flex: 1 1 18rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.baby-percentile-calculator-right {
+  flex: 2 1 24rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.baby-percentile-calculator-section-marker {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bpc-text-dim);
+  border-bottom: 1px solid var(--bpc-border);
+  padding-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.baby-percentile-calculator-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.baby-percentile-calculator-input-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--bpc-text-dim);
+}
+
+.baby-percentile-calculator-sex-selector {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.baby-percentile-calculator-sex-btn {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--bpc-border);
+  border-radius: 0.5rem;
+  background-color: var(--bpc-bg-muted);
+  color: var(--bpc-text-muted);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.baby-percentile-calculator-sex-btn:hover {
+  border-color: var(--bpc-primary);
+  color: var(--bpc-primary);
+}
+
+.baby-percentile-calculator-sex-btn[data-active="true"] {
+  background-color: var(--bpc-primary);
+  border-color: var(--bpc-primary);
+  color: var(--bpc-primary-on);
+}
+
+.baby-percentile-calculator-boy .baby-percentile-calculator-sex-btn[data-active="true"] {
+  background-color: var(--bpc-accent-boy);
+  border-color: var(--bpc-accent-boy);
+  color: var(--bpc-primary-on);
+}
+
+.baby-percentile-calculator-unit-nav {
+  display: flex;
+  background-color: var(--bpc-bg-alt);
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  gap: 0.25rem;
+}
+
+.baby-percentile-calculator-unit-tab {
+  flex: 1;
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: var(--bpc-text-dim);
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: 500;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.baby-percentile-calculator-unit-tab:hover {
+  color: var(--bpc-text);
+}
+
+.baby-percentile-calculator-unit-tab[data-active="true"] {
+  background-color: var(--bpc-bg);
+  color: var(--bpc-text);
+  box-shadow: 0 1px 3px var(--bpc-shadow);
+}
+
+.baby-percentile-calculator-stepper-box {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background-color: var(--bpc-bg-muted);
+  border: 1px solid var(--bpc-border);
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.baby-percentile-calculator-btn-step {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--bpc-border);
+  border-radius: 0.375rem;
+  background-color: var(--bpc-bg);
+  color: var(--bpc-text);
+  cursor: pointer;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+.baby-percentile-calculator-btn-step:hover {
+  border-color: var(--bpc-primary);
+  color: var(--bpc-primary);
+}
+
+.baby-percentile-calculator-val-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.baby-percentile-calculator-val-big {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--bpc-text);
+  line-height: 1;
+}
+
+.baby-percentile-calculator-val-sub {
+  font-size: 0.75rem;
+  color: var(--bpc-text-dim);
+}
+
+.baby-percentile-calculator-slider-line {
+  width: 100%;
+  accent-color: var(--bpc-primary);
+  cursor: pointer;
+}
+
+.baby-percentile-calculator-boy .baby-percentile-calculator-slider-line {
+  accent-color: var(--bpc-accent-boy);
+}
+
+.baby-percentile-calculator-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.baby-percentile-calculator-num-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--bpc-border);
+  border-radius: 0.5rem;
+  background-color: var(--bpc-bg-muted);
+  color: var(--bpc-text);
+  font-size: 1rem;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+
+.baby-percentile-calculator-num-input:focus {
+  outline: none;
+  border-color: var(--bpc-primary);
+  box-shadow: 0 0 0 3px var(--bpc-primary-glow);
+}
+
+.baby-percentile-calculator-boy .baby-percentile-calculator-num-input:focus {
+  border-color: var(--bpc-accent-boy);
+  box-shadow: 0 0 0 3px var(--bpc-accent-boy-glow);
+}
+
+.baby-percentile-calculator-history-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.baby-percentile-calculator-btn-secondary {
+  flex: 1;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--bpc-primary);
+  border-radius: 0.5rem;
+  background-color: transparent;
+  color: var(--bpc-primary);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.baby-percentile-calculator-btn-secondary:hover {
+  background-color: var(--bpc-primary);
+  color: var(--bpc-primary-on);
+}
+
+.baby-percentile-calculator-boy .baby-percentile-calculator-btn-secondary {
+  border-color: var(--bpc-accent-boy);
+  color: var(--bpc-accent-boy);
+}
+
+.baby-percentile-calculator-boy .baby-percentile-calculator-btn-secondary:hover {
+  background-color: var(--bpc-accent-boy);
+  color: var(--bpc-primary-on);
+}
+
+.baby-percentile-calculator-btn-clear {
+  flex: 1;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--bpc-border);
+  border-radius: 0.5rem;
+  background-color: var(--bpc-bg-muted);
+  color: var(--bpc-text-dim);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.baby-percentile-calculator-btn-clear:hover {
+  border-color: var(--bpc-text-dim);
+  color: var(--bpc-text);
+}
+
+.baby-percentile-calculator-res-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.baby-percentile-calculator-res-item {
+  background-color: var(--bpc-bg-muted);
+  border: 1px solid var(--bpc-border);
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  text-align: center;
+}
+
+.baby-percentile-calculator-res-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--bpc-text-dim);
+}
+
+.baby-percentile-calculator-percent-val {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--bpc-primary);
+  line-height: 1;
+}
+
+.baby-percentile-calculator-boy .baby-percentile-calculator-percent-val {
+  color: var(--bpc-accent-boy);
+}
+
+.baby-percentile-calculator-res-desc {
+  font-size: 0.7rem;
+  color: var(--bpc-text-faint);
+}
+
+.baby-percentile-calculator-alert {
+  background-color: var(--bpc-warning-bg);
+  border: 1px solid var(--bpc-warning-border);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: var(--bpc-warning-text);
+  display: none;
+}
+
+.baby-percentile-calculator-alert[data-visible="true"] {
+  display: block;
+}
+
+.baby-percentile-calculator-chart-box {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  min-height: 200px;
+}
+
+.baby-percentile-calculator-chart-box canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.baby-percentile-calculator-disclaimer {
+  background-color: var(--bpc-disclaimer-bg);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.8rem;
+  color: var(--bpc-text-dim);
+  line-height: 1.5;
+}
+
+@media (max-width: 640px) {
+  .baby-percentile-calculator-main {
+    flex-direction: column;
+  }
+
+  .baby-percentile-calculator-res-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .baby-percentile-calculator-grid-2 {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/baby-size-converter/bibliography.astro

@@ -0,0 +1,7 @@
+---
+import { Bibliography as BibliographyUI } from '@jjlmoya/utils-shared';
+import type { BibliographyEntry } from '../../types';
+interface Props { links?: BibliographyEntry[]; title: string; }
+const { links = [], title } = Astro.props;
+---
+<BibliographyUI links={links} title={title} />