@jjlmoya/utils-nautical 1.2.0

package/src/tool/speedConverter/i18n/fr.ts

@@ -0,0 +1,271 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { SpeedConverterUI, SpeedConverterLocaleContent } from '../index';
+
+const slug = 'convertisseur-vitesse-nautique';
+const title = 'Convertisseur de Vitesse Nautique et Echelle Beaufort';
+const description =
+  'Convertissez entre noeuds, km/h, m/s et mph instantanement. Inclut le tableau Beaufort complet avec description de l\'etat de la mer et effets du vent.';
+
+const beaufortData = [
+  { force: 0, name: 'Calme', sea: 'Mer comme un miroir', effect: 'La fumee monte verticalement', kn: '0' },
+  { force: 1, name: 'Tres legere brise', sea: 'Rides comme des ecailles de poisson', effect: 'La fumee indique la direction du vent', kn: '1-3' },
+  { force: 2, name: 'Legere brise', sea: 'Petites vaguelettes sans cretes', effect: 'Le vent est senti sur le visage', kn: '4-6' },
+  { force: 3, name: 'Petite brise', sea: 'Moutons epars', effect: 'Les feuilles et les petites branches bougent', kn: '7-10' },
+  { force: 4, name: 'Jolie brise', sea: 'Petites vagues, nombreux moutons', effect: 'La poussiere et les papiers s\'envolent', kn: '11-16' },
+  { force: 5, name: 'Brise fraiche', sea: 'Vagues moderees, beaucoup de moutons', effect: 'Difficulte a utiliser un parapluie', kn: '17-21' },
+  { force: 6, name: 'Vent frais', sea: 'Grandes vagues, ecume blanche', effect: 'Difficulte a marcher contre le vent', kn: '22-27' },
+  { force: 7, name: 'Grand frais', sea: 'Mer grosse, ecume en stries', effect: 'Difficulte a marcher', kn: '28-33' },
+  { force: 8, name: 'Coup de vent', sea: 'Tres hautes vagues, eclaboussures', effect: 'Grande difficulte a marcher', kn: '34-40' },
+  { force: 9, name: 'Fort coup de vent', sea: 'Tres hautes vagues, visibilite reduite', effect: 'Degats aux batiments', kn: '41-47' },
+  { force: 10, name: 'Tempete', sea: 'Vagues exceptionnellement hautes, mer blanche', effect: 'Arbres deracines', kn: '48-55' },
+  { force: 11, name: 'Violente tempete', sea: 'Enormes vagues, ecume couvre la mer', effect: 'Devastation generalisee', kn: '56-63' },
+  { force: 12, name: 'Ouragan', sea: 'Air plein d\'ecume et d\'embruns', effect: 'Catastrophe totale', kn: '64+' },
+];
+
+const ui: SpeedConverterUI = {
+  knLabel: 'Noeuds (kt)',
+  kmhLabel: 'Kilometres/heure',
+  msLabel: 'Metres/seconde',
+  mphLabel: 'Miles/heure',
+  beaufortTitle: 'Echelle Beaufort',
+  forceLabel: 'Force',
+  descriptionLabel: 'Description',
+  knotsLabel: 'Noeuds',
+  effectLabel: 'Effet Visuel',
+  seaStateLabel: 'Etat de la Mer',
+  windEffectLabel: 'Effet sur Terre',
+  faqTitle: 'Questions Frequentes',
+  bibliographyTitle: 'Bibliographie',
+  beaufortDataJson: JSON.stringify(beaufortData),
+};
+
+const faq: SpeedConverterLocaleContent['faq'] = [
+  {
+    question: 'Pourquoi la vitesse du bateau se mesure-t-elle en noeuds ?',
+    answer: "Le noeud est une unite de vitesse equivalant a un mille nautique par heure. Son origine est historique : les marins mesuraient la vitesse du navire en jetant a la mer un morceau de bois attache a une corde avec des noeuds equidistants, en comptant combien de noeuds passaient entre leurs doigts en un temps donne. Aujourd'hui, c'est toujours l'unite standard internationale en navigation maritime et aeronautique.",
+  },
+  {
+    question: "Qu'est-ce que l'echelle Beaufort et comment s'utilise-t-elle en navigation ?",
+    answer: "L'echelle Beaufort est une echelle empirique qui relie la vitesse du vent aux effets observes en mer et sur terre. Developpee par l'amiral britannique Francis Beaufort en 1805, elle va de 0 (calme absolu) a 12 (ouragan). Les navigateurs l'utilisent pour estimer l'intensite du vent sans instruments en observant l'etat de la mer.",
+  },
+  {
+    question: 'Quelle est la difference entre SOG et STW en navigation ?',
+    answer: "Le SOG (Speed Over Ground) est la vitesse reelle du bateau par rapport au fond marin, mesuree par GPS. Le STW (Speed Through Water) ou vitesse au loch est la vitesse du bateau par rapport a l'eau environnante. La difference entre les deux reflete l'effet des courants marins. Le SOG est utilise pour planifier les arrivees et calculer le carburant ; le STW est utilise pour calculer la derive.",
+  },
+  {
+    question: 'Combien de km/h vaut un noeud ?',
+    answer: "Un noeud equivaut exactement a 1,852 kilometres par heure, soit la longueur d'un mille nautique (defini comme une minute d'arc du meridien terrestre). Ainsi, 10 noeuds font 18,52 km/h, 20 noeuds font 37,04 km/h et 30 noeuds font 55,56 km/h.",
+  },
+];
+
+const howTo: SpeedConverterLocaleContent['howTo'] = [
+  {
+    name: 'Saisir la vitesse dans n\'importe quelle unite',
+    text: 'Tapez la valeur de vitesse dans le champ correspondant (noeuds, km/h, m/s ou mph) et tous les autres champs se mettront a jour automatiquement.',
+  },
+  {
+    name: 'Consulter la force Beaufort equivalente',
+    text: "La carte Beaufort affiche en temps reel la force du vent correspondant a la vitesse saisie, avec l'etat de la mer et les effets sur terre.",
+  },
+  {
+    name: 'Cliquer sur une ligne du tableau Beaufort',
+    text: 'Vous pouvez selectionner directement n\'importe quelle echelle Beaufort dans le tableau inferieur pour voir sa vitesse minimale dans tous les formats.',
+  },
+  {
+    name: 'Utiliser les resultats pour planifier votre navigation',
+    text: 'Combinez les informations de vitesse et de vent pour decider si les conditions sont appropriees pour votre type d\'embarcation et la traversee prevue.',
+  },
+];
+
+const bibliography: SpeedConverterLocaleContent['bibliography'] = [
+  {
+    name: 'Met Office - The Beaufort Scale',
+    url: 'https://www.metoffice.gov.uk/weather/guides/coast-and-sea/beaufort-scale',
+  },
+  {
+    name: 'OMI - Organisation Maritime Internationale',
+    url: 'https://www.imo.org/',
+  },
+];
+
+const seo: SpeedConverterLocaleContent['seo'] = [
+  {
+    type: 'title',
+    text: 'Guide du Convertisseur de Vitesse Nautique et Echelle Beaufort',
+    level: 2,
+  },
+  {
+    type: 'paragraph',
+    html: "La vitesse est une donnee fondamentale en navigation maritime. Savoir combien de noeuds fait votre bateau, comment cela se traduit en kilometres par heure pour planifier une traversee, ou quelle force Beaufort represente le vent que vous subissez, sont des calculs que tout navigateur doit maitriser.",
+  },
+  {
+    type: 'paragraph',
+    html: "Ce convertisseur de vitesse nautique vous permet de transformer instantanement entre noeuds, km/h, m/s et mph, tout en identifiant automatiquement la force Beaufort correspondante avec sa description de l'etat de la mer et les effets du vent observables.",
+  },
+  {
+    type: 'stats',
+    items: [
+      { label: 'Unite Standard', value: 'Noeuds (kt)', icon: 'mdi:speedometer' },
+      { label: 'Echelle de Vent', value: 'Beaufort (0-12)', icon: 'mdi:weather-windy' },
+      { label: 'Conversion Cle', value: '1 kt = 1,85 km/h', icon: 'mdi:swap-horizontal' },
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Pourquoi la vitesse se mesure-t-elle en Noeuds ?',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: "Le <strong>noeud (kt)</strong> est l'unite officielle de vitesse en navigation maritime et aerienne. Sa definition est precise : un noeud equivaut a un mille nautique par heure, ou le mille nautique (1852 m) est defini comme une minute d'arc du meridien terrestre. Cette relation directe avec la geometrie de la Terre est ce qui fait du noeud une unite particulierement pratique pour la navigation, permettant d'estimer les distances directement sur la carte nautique sans aucune conversion.",
+  },
+  {
+    type: 'paragraph',
+    html: "Historiquement, les marins mesuraient la vitesse du navire en utilisant le <em>loch a bateau</em> : un morceau de bois triangulaire jete a la mer attache a une corde avec des noeuds equidistants tous les 14,4 metres. En comptant les noeuds passant entre leurs doigts en 30 secondes, ils obtenaient la vitesse du navire, donnant naissance au terme que nous utilisons aujourd'hui.",
+  },
+  {
+    type: 'title',
+    text: "L'Echelle Beaufort : L'Oeil du Marin",
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: "L'<strong>echelle Beaufort</strong> a ete developpee en 1805 par l'amiral britannique Sir Francis Beaufort comme methode empirique pour classifier la force du vent a partir d'effets observables, sans instrumentation. Initialement concue pour estimer la quantite de voilure qu'un navire pouvait porter, elle est aujourd'hui une reference universelle en meteorologie maritime, adoptee par l'Organisation Meteorologique Mondiale (OMM).",
+  },
+  {
+    type: 'paragraph',
+    html: "L'echelle va de la <strong>Force 0</strong> (calme absolu, mer comme un miroir) a la <strong>Force 12</strong> (conditions d'ouragan avec des vagues de plus de 14 metres et l'air plein d'ecume). Pour le plaisancier, les limites critiques sont generalement la Force 6 (vent frais, 22-27 noeuds) pour les embarcations legeres et la Force 7-8 pour les voiliers oceaniques.",
+  },
+  {
+    type: 'table',
+    headers: ['Force Beaufort', 'Denomination', 'Etat de la Mer'],
+    rows: [
+      ['0', 'Calme', 'Mer comme un miroir'],
+      ['3', 'Petite brise', 'Moutons epars, cretes commencant a se briser'],
+      ['6', 'Vent frais', 'Grandes vagues, ecume blanche, embruns possibles'],
+      ['9', 'Fort coup de vent', 'Tres hautes vagues, visibilite reduite par ecume'],
+      ['12', 'Ouragan', 'Air completement plein d\'ecume, mer totalement blanche'],
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Glossaire Nautique de Vitesse',
+    level: 3,
+  },
+  {
+    type: 'glossary',
+    items: [
+      { term: 'Noeud (kt)', definition: "Unite de vitesse equivalant a un mille nautique par heure (1852 m/h). Standard international en navigation maritime et aerienne." },
+      { term: 'SOG (Speed Over Ground)', definition: "Vitesse reelle du navire sur le fond marin, mesuree par GPS. Reflete l'effet des courants marins sur la vitesse du bateau." },
+      { term: 'Vitesse au Loch (STW)', definition: "Vitesse du bateau par rapport a l'eau environnante, mesuree par le loch. N'inclut pas les effets des courants ; essentielle pour calculer la derive." },
+      { term: 'Vent Apparent', definition: "Vent ressenti par l'equipage a bord, resultant de la somme vectorielle du vent reel et du vent cree par l'avancement du bateau. Differe toujours du vent reel en magnitude et direction." },
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Formules de Conversion Rapides',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: "Pour convertir les vitesses manuellement sans acces a un convertisseur numerique, utilisez ces approximations rapides que tout navigateur devrait connaitre par coeur :",
+  },
+  {
+    type: 'list',
+    items: [
+      '<strong>Noeuds en km/h :</strong> Multipliez les noeuds par 1,852. Approximation rapide : noeuds x 2, moins 8 %. Par exemple, 10 kt ≈ 20 - 1,6 = 18,4 km/h.',
+      '<strong>Noeuds en mph :</strong> Multipliez les noeuds par 1,15. Approximation : noeuds + 15 %. Par exemple, 20 kt ≈ 23 mph.',
+      '<strong>Noeuds en m/s :</strong> Multipliez les noeuds par 0,514. Approximation rapide : divisez les noeuds par 2. Par exemple, 10 kt ≈ 5 m/s (exact : 5,14 m/s).',
+    ],
+  },
+  {
+    type: 'tip',
+    title: 'Securite et Climatologie',
+    html: "Avant d'appareiller, consultez toujours le bulletin meteorologique maritime. Un Beaufort 4-5 est genable pour la plupart des bateaux de plaisance ; a partir de la Force 6, envisagez serieusement de reporter le depart si vous manquez d'experience ou si votre bateau n'est pas prepare a ces conditions.",
+  },
+  {
+    type: 'title',
+    text: 'Comparatif des Equipements',
+    level: 3,
+  },
+  {
+    type: 'comparative',
+    items: [
+      {
+        title: 'Anemometre Numerique',
+        description: 'Instrument electronique pour la mesure precise de la vitesse du vent.',
+        icon: 'mdi:speedometer',
+        points: [
+          'Precision de ±2% dans des conditions normales',
+          'Necessite une alimentation electrique ou des piles',
+          'Peut tomber en panne dans des conditions extremes',
+          'Lecture instantanee et enregistrement des donnees',
+        ],
+      },
+      {
+        title: 'Observation Beaufort',
+        description: 'Estimation visuelle de la force du vent par les effets observables en mer et sur terre.',
+        icon: 'mdi:eye-outline',
+        highlight: true,
+        points: [
+          "Ne necessite aucun instrument",
+          'Disponible dans toutes les conditions',
+          'Precision suffisante pour les decisions de securite',
+          'Competence fondamentale du navigateur expert',
+        ],
+      },
+    ],
+  },
+  {
+    type: 'title',
+    text: 'Navigation et Planification de Route',
+    level: 3,
+  },
+  {
+    type: 'paragraph',
+    html: "Lors de la planification d'une route, la vitesse de votre embarcation determine les heures d'arrivee estimees (ETA) et la consommation de carburant pour les bateaux a moteur. Pour un voilier, la vitesse depend aussi de l'intensite et de la direction du vent : connaitre la force Beaufort prevue vous permet d'anticiper si vous pourrez naviguer a la voile ou si vous aurez besoin du moteur.",
+  },
+  {
+    type: 'paragraph',
+    html: "En regate, la conversion entre noeuds et metres par seconde est particulierement utile pour calculer le VMG (Velocity Made Good) et pour analyser les polaires de voile. Les meteorologues et les modeles numeriques de prevision donnent generalement le vent en m/s ou km/h, la conversion en noeuds est donc une etape habituelle dans la planification tactique.",
+  },
+];
+
+const schemas: SpeedConverterLocaleContent['schemas'] = [
+  {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilityApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  } as WithContext<SoftwareApplication>,
+  {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+      '@type': 'Question',
+      name: item.question,
+      acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+  } as WithContext<FAQPage>,
+  {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: `Comment utiliser : ${title}`,
+    step: howTo.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+  } as WithContext<HowTo>,
+];
+
+export const content: SpeedConverterLocaleContent = {
+  slug,
+  title,
+  description,
+  ui,
+  seo,
+  faq,
+  bibliography,
+  howTo,
+  schemas,
+};

package/src/tool/speedConverter/index.ts

@@ -0,0 +1,46 @@
+import type { NauticalToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import SpeedConverterComponent from './component.astro';
+import SpeedConverterSEO from './seo.astro';
+import SpeedConverterBibliography from './bibliography.astro';
+
+export interface SpeedConverterUI {
+  [key: string]: string;
+  knLabel: string;
+  kmhLabel: string;
+  msLabel: string;
+  mphLabel: string;
+  beaufortTitle: string;
+  forceLabel: string;
+  descriptionLabel: string;
+  knotsLabel: string;
+  effectLabel: string;
+  seaStateLabel: string;
+  windEffectLabel: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+  beaufortDataJson: string;
+}
+
+export type SpeedConverterLocaleContent = ToolLocaleContent<SpeedConverterUI>;
+
+export const speedConverter: NauticalToolEntry<SpeedConverterUI> = {
+  id: 'speed-converter',
+  icons: {
+    bg: 'mdi:speedometer',
+    fg: 'mdi:weather-windy',
+  },
+  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),
+  },
+};
+
+export { SpeedConverterComponent, SpeedConverterSEO, SpeedConverterBibliography };
+
+export const SPEED_CONVERTER_TOOL: ToolDefinition = {
+  entry: speedConverter,
+  Component: SpeedConverterComponent,
+  SEOComponent: SpeedConverterSEO,
+  BibliographyComponent: SpeedConverterBibliography,
+};

package/src/tool/speedConverter/logic.ts

@@ -0,0 +1,48 @@
+export interface SpeedResult {
+  kn: number;
+  kmh: number;
+  ms: number;
+  mph: number;
+}
+
+export interface BeaufortEntry {
+  force: number;
+  name: string;
+  sea: string;
+  effect: string;
+  knMin: number;
+  knMax: number;
+}
+
+export const BEAUFORT_SCALE: BeaufortEntry[] = [
+  { force: 0, name: 'Calm', sea: 'Sea like a mirror', effect: 'Smoke rises vertically', knMin: 0, knMax: 1 },
+  { force: 1, name: 'Light air', sea: 'Ripples with appearance of scales', effect: 'Direction shown by smoke drift', knMin: 1, knMax: 4 },
+  { force: 2, name: 'Light breeze', sea: 'Small wavelets, crests not breaking', effect: 'Wind felt on face', knMin: 4, knMax: 7 },
+  { force: 3, name: 'Gentle breeze', sea: 'Large wavelets, scattered whitecaps', effect: 'Leaves and twigs in motion', knMin: 7, knMax: 11 },
+  { force: 4, name: 'Moderate breeze', sea: 'Small waves, frequent whitecaps', effect: 'Dust and loose paper raised', knMin: 11, knMax: 17 },
+  { force: 5, name: 'Fresh breeze', sea: 'Moderate waves, many whitecaps', effect: 'Small trees begin to sway', knMin: 17, knMax: 22 },
+  { force: 6, name: 'Strong breeze', sea: 'Large waves, white foam crests', effect: 'Difficulty using umbrella', knMin: 22, knMax: 28 },
+  { force: 7, name: 'Near gale', sea: 'Sea heaps up, foam blown in streaks', effect: 'Difficult to walk', knMin: 28, knMax: 34 },
+  { force: 8, name: 'Gale', sea: 'High waves, spray reduces visibility', effect: 'Great difficulty walking', knMin: 34, knMax: 41 },
+  { force: 9, name: 'Strong gale', sea: 'Very high waves, sea rolls', effect: 'Structural damage occurs', knMin: 41, knMax: 48 },
+  { force: 10, name: 'Storm', sea: 'Exceptionally high waves, sea white', effect: 'Trees uprooted', knMin: 48, knMax: 56 },
+  { force: 11, name: 'Violent storm', sea: 'Huge waves, foam covers sea', effect: 'Widespread damage', knMin: 56, knMax: 64 },
+  { force: 12, name: 'Hurricane', sea: 'Air filled with foam and spray', effect: 'Total catastrophe', knMin: 64, knMax: Infinity },
+];
+
+export function convertFromKnots(kn: number): SpeedResult {
+  return {
+    kn,
+    kmh: kn * 1.852,
+    ms: kn * 0.514444,
+    mph: kn * 1.15078,
+  };
+}
+
+export function getBeaufortForce(kn: number): number {
+  const thresholds = [1, 4, 7, 11, 17, 22, 28, 34, 41, 48, 56, 64];
+  for (let i = 0; i < thresholds.length; i++) {
+    if (kn < (thresholds[i] ?? Infinity)) return i;
+  }
+  return 12;
+}

package/src/tool/speedConverter/seo.astro

@@ -0,0 +1,43 @@
+---
+import {
+  SEOTitle,
+  SEOTable,
+  SEOTip,
+  SEOGlossary,
+  SEOStats,
+  SEOComparative,
+  SEOList,
+  SEOArticle,
+} from '@jjlmoya/utils-shared';
+import { speedConverter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await speedConverter.i18n[locale]?.();
+if (!content) return null;
+const { seo } = content;
+---
+
+<SEOArticle>
+  {seo.map((section: any) => {
+    switch (section.type) {
+      case 'title': return <SEOTitle title={section.text} level={section.level || 2} />;
+      case 'paragraph': return <p set:html={section.html} />;
+      case 'tip': return <SEOTip title={section.title}><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 'glossary': return <SEOGlossary items={section.items} />;
+      case 'stats': return <SEOStats stats={section.items} columns={section.columns} />;
+      case 'comparative': return <SEOComparative items={section.items} columns={section.columns} />;
+      case 'list': return <SEOList items={section.items} icon={section.icon} />;
+      default: return null;
+    }
+  })}
+</SEOArticle>

package/src/tool/speedConverter/style.css

@@ -0,0 +1,239 @@
+.speed-converter {
+  --n-bg: #fff;
+  --n-bg-muted: #f1f5f9;
+  --n-text: #0f172a;
+  --n-text-muted: #475569;
+  --n-text-dim: #64748b;
+  --n-border: #e2e8f0;
+  --n-shadow: rgba(0, 0, 0, 0.05);
+  --n-primary: #3b82f6;
+  --n-primary-on: #fff;
+  --n-accent: #6366f1;
+  --n-cyan: #0891b2;
+  --n-success: #10b981;
+  --n-warning: #f59e0b;
+  --n-error: #f43f5e;
+
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.theme-dark .speed-converter {
+  --n-bg: #0f172a;
+  --n-bg-muted: #1e293b;
+  --n-text: #f8fafc;
+  --n-text-muted: #94a3b8;
+  --n-text-dim: #64748b;
+  --n-border: #334155;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+  --n-primary: #60a5fa;
+  --n-primary-on: #fff;
+  --n-accent: #818cf8;
+  --n-cyan: #22d3ee;
+  --n-success: #34d399;
+  --n-warning: #fbbf24;
+  --n-error: #fb7185;
+}
+
+.sc-input-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 1.5rem;
+  padding: 2rem;
+}
+
+.sc-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sc-input-group label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--n-text-muted);
+  text-transform: uppercase;
+}
+
+.sc-input-wrapper {
+  background: var(--n-bg-muted);
+  border: 2px solid var(--n-border);
+  border-radius: 0.8rem;
+  padding: 0.8rem 1rem;
+  transition: border-color 0.2s;
+}
+
+.sc-input-wrapper:focus-within {
+  border-color: var(--n-cyan);
+}
+
+.sc-input-wrapper input {
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--n-text);
+  font-size: 1.5rem;
+  font-weight: 800;
+  width: 100%;
+}
+
+.sc-input-wrapper input::-webkit-outer-spin-button,
+.sc-input-wrapper input::-webkit-inner-spin-button {
+  appearance: none;
+}
+
+.sc-beaufort-summary {
+  background: var(--n-primary);
+  color: var(--n-primary-on);
+  border-radius: 1.5rem;
+  padding: 2rem;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem 2rem;
+  align-items: center;
+}
+
+.sc-force-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--n-primary-on);
+  flex-shrink: 0;
+}
+
+.sc-force-text-box {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.sc-force-name {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: var(--n-primary-on);
+}
+
+.sc-force-detail {
+  margin: 0;
+  opacity: 0.8;
+  font-size: 0.9rem;
+  color: var(--n-primary-on);
+}
+
+.sc-sea-state-box {
+  grid-column: 1 / -1;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 1rem;
+  padding: 1rem 1.5rem;
+}
+
+.sc-sea-text .label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  opacity: 0.7;
+  color: var(--n-primary-on);
+  font-weight: 700;
+}
+
+.sc-sea-text p {
+  margin: 0.2rem 0 0;
+  font-weight: 600;
+  color: var(--n-primary-on);
+}
+
+.sc-table-container {
+  background: var(--n-bg);
+  border: 1px solid var(--n-border);
+  border-radius: 1.5rem;
+  overflow: hidden;
+}
+
+.sc-table-container h3 {
+  padding: 1.5rem;
+  margin: 0;
+  font-size: 1rem;
+  color: var(--n-text-muted);
+  border-bottom: 1px solid var(--n-border);
+  font-weight: 700;
+}
+
+.sc-scroll-area {
+  overflow-x: auto;
+}
+
+.sc-beaufort-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.sc-beaufort-table th {
+  text-align: left;
+  padding: 0.8rem 1rem;
+  font-size: 0.75rem;
+  color: var(--n-text-muted);
+  text-transform: uppercase;
+  border-bottom: 2px solid var(--n-border);
+}
+
+.sc-beaufort-table td {
+  padding: 0.8rem 1rem;
+  font-size: 0.9rem;
+  color: var(--n-text-muted);
+  border-bottom: 1px solid var(--n-border);
+}
+
+.sc-clickable-row {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.sc-clickable-row:hover {
+  background: var(--n-bg-muted);
+}
+
+.sc-clickable-row.active {
+  background: var(--n-primary);
+}
+
+.sc-clickable-row.active td {
+  color: var(--n-primary-on);
+}
+
+.sc-force-tag {
+  background: var(--n-bg-muted);
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.4rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  color: var(--n-text);
+}
+
+.sc-clickable-row.active .sc-force-tag {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--n-primary-on);
+}
+
+@media (max-width: 640px) {
+  .sc-beaufort-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .sc-force-circle {
+    width: 60px;
+    height: 60px;
+    font-size: 2rem;
+  }
+}

package/src/tool/tideCalculator/bibliography.astro

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