@jjlmoya/utils-sports 1.1.0

package/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "@jjlmoya/utils-sports",
+    "version": "1.1.0",
+    "type": "module",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "exports": {
+        ".": "./src/index.ts",
+        "./data": "./src/data.ts"
+    },
+    "files": [
+        "src"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro",
+        "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",
+        "check": "astro check",
+        "type-check": "astro check",
+        "test": "vitest run",
+        "preversion": "npm run lint && npm run test",
+        "postversion": "git push && git push --tags",
+        "patch": "npm version patch",
+        "minor": "npm version minor",
+        "major": "npm version major"
+    },
+    "lint-staged": {
+        "*.{ts,tsx,astro}": [
+            "eslint --fix"
+        ]
+    },
+    "dependencies": {
+        "@iconify-json/mdi": "^1.2.3",
+        "@jjlmoya/utils-shared": "1.2.0",
+        "astro": "^6.1.2",
+        "astro-icon": "^1.1.0",
+        "lz-string": "^1.5.0"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.8",
+        "@types/lz-string": "^1.3.34",
+        "eslint": "^9.39.4",
+        "eslint-plugin-astro": "^1.6.0",
+        "eslint-plugin-no-comments": "^1.1.10",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.4.0",
+        "postcss-html": "^1.8.1",
+        "schema-dts": "^1.1.2",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-declaration-strict-value": "^1.11.1",
+        "typescript": "^5.4.0",
+        "typescript-eslint": "^8.58.0",
+        "vitest": "^4.1.2"
+    }
+}

package/src/category/i18n/en.ts

@@ -0,0 +1,108 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'sports',
+  title: 'Sports & Performance Tools and Calculators',
+  description:
+    'Optimize your training with free online tools. Giant scoreboards, tournament organizers, reflex tests and gym progress tracking.',
+  seo: [
+    {
+      type: 'title',
+      text: 'Sports Performance Science: Data to Win',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'High-performance sports, whether amateur or professional, is no longer just about intuition. In today\'s era, <strong>biometrics and data analysis</strong> define who crosses the finish line first or who lifts the most weight. In this section, we offer <strong>free online tools</strong> designed to digitize your performance and manage competition logistics with technical precision.',
+    },
+    {
+      type: 'paragraph',
+      html: 'From measuring neuromuscular reaction speed to managing tournament elimination brackets, our calculators apply algorithmic and statistical logic so you can focus on what matters most: pushing your limits.',
+    },
+    {
+      type: 'title',
+      text: 'Competitive Logistics: Scoreboards and Organizers',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Organizing a competition, whether a local padel tournament or an eSports event, requires a clear structure. Our <strong>tournament organizer</strong> automates the creation of matchup brackets, eliminating manual errors and ensuring fair management of eliminations.',
+    },
+    {
+      type: 'paragraph',
+      html: 'For match day, the <strong>giant sports scoreboard</strong> turns any screen into a professional control center, letting players and spectators follow the padel, ping-pong or any set-based sport score with total visibility.',
+    },
+    {
+      type: 'title',
+      text: 'Strength Training: Progression-Based Tracking',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'At the gym, what isn\'t measured doesn\'t improve. The <strong>training tracker</strong> lets you log your workloads and visualize real progress graphs. Understanding the supercompensation curve and accumulated training volume is vital to avoid stagnation and optimize strength and muscle gains.',
+    },
+    {
+      type: 'title',
+      text: 'Neurology & Reflexes: Reaction Speed',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Physical speed has limits, but <strong>reaction speed</strong> can be trained. Our reflex test measures neuromuscular response time in milliseconds, letting you compare your performance against professional athlete ranges. It\'s an essential tool for combat sports, racket sports, and competitive gaming.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Progress Analysis:</strong> Visualize your historical evolution in key exercises through dynamic performance graphs.',
+        '<strong>Automated Management:</strong> Create complex tournament structures in seconds without administrative hassle.',
+        '<strong>Cognitive Training:</strong> Improve visual processing and motor response speed with precision tests.',
+        '<strong>Real-Time Control:</strong> Stay focused on the game with high-visibility digital scoreboards.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Peak Performance Tip',
+      html: '<p><strong>Applied Physiology:</strong> Make sure to run the reflex test before and after your training session to assess central nervous system fatigue. A 10% drop from your usual speed is a key indicator to reduce training volume.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Training Physiology: Heart Rate Zones',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Your heart is the most precise indicator of effort. Maximum heart rate (MHR) varies by age, genetics, and cardiovascular capacity. Calculating it correctly allows training in specific zones: aerobic zone (60-70% MHR) for base endurance, anaerobic zone (80-90% MHR) for explosiveness, VO2 max zone (95-100%) for cardiorespiratory capacity.',
+    },
+    {
+      type: 'paragraph',
+      html: 'A common mistake is training too hard too often. Most training should occur in the aerobic zone (low intensity, long duration) building a solid base. Only 1-2 weekly sessions in high-intensity zones are optimal to avoid overtraining. Our tools let you calculate your zones based on age and fitness level, ensuring every session has a defined physiological purpose.',
+    },
+    {
+      type: 'title',
+      text: 'Periodization: Planning Macrocycles and Mesocycles',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Unstructured training produces unstructured results. Periodization (long-term planning) divides your year into phases: preparation, competition, and recovery. Each phase has goals: the preparation phase maximizes raw strength; the competitive phase converts that strength into power and speed; the recovery phase allows hormonal adaptations and tissue repair.',
+    },
+    {
+      type: 'title',
+      text: 'The Future of Connected Sport in 2026',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The 2026 trend is <strong>Velocity-Based Training (VBT)</strong>. Wearable devices and tracking apps are democratizing access to analytics that were once exclusive to elite sports. These tools put you at the cutting edge, allowing you to train smarter, not necessarily harder.',
+    },
+    {
+      type: 'grid',
+      columns: [
+        { type: 'card', title: 'Reflexes', html: '<p>Millisecond precision</p>' },
+        { type: 'card', title: 'Progress', html: '<p>Historical visualization</p>' },
+        { type: 'card', title: 'Competition', html: '<p>Structured management</p>' },
+        { type: 'card', title: 'Precision', html: '<p>Absolute data</p>' },
+      ],
+    },
+  ],
+};

package/src/category/i18n/es.ts

@@ -0,0 +1,108 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'deporte',
+  title: 'Herramientas y Calculadoras Deportivas y de Rendimiento',
+  description:
+    'Optimiza tu entrenamiento con herramientas gratuitas online. Marcadores gigantes, organizadores de torneos, test de reflejos y seguimiento de progreso en el gimnasio.',
+  seo: [
+    {
+      type: 'title',
+      text: 'Ciencia del Rendimiento Deportivo: Datos para Ganar',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El deporte de alto rendimiento, ya sea amateur o profesional, ha dejado de ser una cuestión de simple intuición. En la era actual, la <strong>biometría y el análisis de datos</strong> definen quién cruza la meta primero o quién levanta más peso. En esta sección, ofrecemos <strong>herramientas gratuitas online</strong> diseñadas para digitalizar tu rendimiento y gestionar la logística de tus competiciones con precisión técnica.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Desde la medición de la velocidad de reacción neuromuscular hasta la gestión de cuadros de eliminatorias para torneos, nuestras calculadoras aplican lógica algorítmica y estadística para que te centres en lo más importante: superar tus límites.',
+    },
+    {
+      type: 'title',
+      text: 'Logística Competitiva: Marcadores y Organizadores',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Organizar una competición, ya sea un torneo de pádel local o un evento de eSports, requiere una estructura clara. Nuestro <strong>organizador de torneos</strong> automatiza la creación de cuadros de enfrentamientos, eliminando errores manuales y garantizando una gestión justa de las eliminatorias.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Para el día del partido, el <strong>marcador deportivo gigante</strong> transforma cualquier pantalla en un centro de control profesional, permitiendo que jugadores y público sigan el marcador de pádel, ping-pong o cualquier deporte de set con visibilidad total.',
+    },
+    {
+      type: 'title',
+      text: 'Entrenamiento de Fuerza: Seguimiento Basado en Progresión',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En el gimnasio, lo que no se mide no mejora. El <strong>seguimiento de entrenamiento</strong> permite registrar tus cargas de trabajo y visualizar gráficas de progreso real. Entender la curva de supercompensación y el volumen de entrenamiento acumulado es vital para evitar el estancamiento y optimizar las ganancias de fuerza y masa muscular.',
+    },
+    {
+      type: 'title',
+      text: 'Neuroclínica y Reflejos: Velocidad de Reacción',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La velocidad física es limitada, pero la <strong>velocidad de reacción</strong> se puede entrenar. Nuestro test de reflejos mide el tiempo de respuesta neuromuscular en milisegundos, permitiéndote comparar tu rendimiento con rangos de atletas profesionales. Es una herramienta esencial para deportes de combate, deportes de raqueta y gaming competitivo.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Análisis de Progreso:</strong> Visualiza tu evolución histórica en ejercicios clave mediante gráficas de rendimiento dinámicas.',
+        '<strong>Gestión Automatizada:</strong> Crea estructuras de torneos complejas en segundos sin complicaciones administrativas.',
+        '<strong>Entrenamiento Cognitivo:</strong> Mejora el procesamiento visual y la velocidad de respuesta motora con tests de precisión.',
+        '<strong>Control en Tiempo Real:</strong> Mantén el foco en el juego con marcadores digitales de alta visibilidad.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Tip de Rendimiento Máximo',
+      html: '<p><strong>Fisiología Aplicada:</strong> Asegúrate de realizar el test de reflejos antes y después de tu sesión de entrenamiento para evaluar la fatiga de tu sistema nervioso central. Un descenso del 10% en tu velocidad habitual es un indicador clave para reducir el volumen de trabajo.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Fisiología del Entrenamiento: Zonas de Frecuencia Cardíaca',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tu corazón es el indicador más preciso del esfuerzo. La máxima frecuencia cardíaca (MFC) varía según edad, genética y capacidad cardiovascular. Calcularla correctamente permite entrenar en zonas específicas: zona aeróbica (60-70% MFC) para resistencia base, zona anaeróbica (80-90% MFC) para explosividad, zona VO2 máximo (95-100%) para capacidad cardiorespiratoria.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Un error común es entrenar demasiado duro demasiado frecuente. La mayoría del entrenamiento debe ocurrir en zona aeróbica (baja intensidad, larga duración) construyendo una base sólida. Solo 1-2 sesiones semanales en zonas de alta intensidad son óptimas para evitar sobreentreno. Nuestras herramientas te permiten calcular tus zonas según tu edad y condición física, asegurando que cada sesión tiene un propósito fisiológico definido.',
+    },
+    {
+      type: 'title',
+      text: 'Periodización: Planificación de Macrociclos y Mesociclos',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El entrenamiento desestructurado produce resultados desestructurados. La periodización (planificación a largo plazo) divide tu año en fases: preparación, competencia y recuperación. Cada fase tiene objetivos: la fase de preparación maximiza fuerza bruta; la fase competitiva convierte esa fuerza en potencia y velocidad; la fase de recuperación permite adaptaciones hormonales y reparación tisular.',
+    },
+    {
+      type: 'title',
+      text: 'El futuro del deporte conectado 2026',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La tendencia de 2026 es el <strong>Entrenamiento Basado en Datos (VBT)</strong>. Los dispositivos vestibles y las aplicaciones de seguimiento están democratizando el acceso a la analítica que antes era exclusiva del deporte de élite. Estas herramientas te sitúan en la vanguardia, permitiéndote entrenar de forma más inteligente, no necesariamente más dura.',
+    },
+    {
+      type: 'grid',
+      columns: [
+        { type: 'card', title: 'Reflejos', html: '<p>Milisegundos de precisión</p>' },
+        { type: 'card', title: 'Progreso', html: '<p>Visualización histórica</p>' },
+        { type: 'card', title: 'Competencia', html: '<p>Gestión estructurada</p>' },
+        { type: 'card', title: 'Precisión', html: '<p>Datos absolutos</p>' },
+      ],
+    },
+  ],
+};

package/src/category/i18n/fr.ts

@@ -0,0 +1,95 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'sport',
+  title: 'Outils et Calculateurs Sportifs et de Performance',
+  description:
+    'Optimisez votre entraînement avec des outils gratuits en ligne. Tableaux de score géants, organisateurs de tournois, tests de réflexes et suivi de progression en salle.',
+  seo: [
+    {
+      type: 'title',
+      text: 'Science de la Performance Sportive : Les Données pour Gagner',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Le sport de haute performance, amateur ou professionnel, ne repose plus sur la simple intuition. À l\'ère actuelle, la <strong>biométrie et l\'analyse de données</strong> définissent qui franchit la ligne d\'arrivée en premier ou qui soulève le plus. Dans cette section, nous proposons des <strong>outils gratuits en ligne</strong> conçus pour digitaliser votre performance et gérer la logistique de vos compétitions avec précision technique.',
+    },
+    {
+      type: 'paragraph',
+      html: 'De la mesure de la vitesse de réaction neuromusculaire à la gestion des tableaux d\'élimination de tournois, nos calculateurs appliquent une logique algorithmique et statistique pour que vous vous concentriez sur l\'essentiel : dépasser vos limites.',
+    },
+    {
+      type: 'title',
+      text: 'Logistique Compétitive : Tableaux de Score et Organisateurs',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Organiser une compétition, qu\'il s\'agisse d\'un tournoi de padel local ou d\'un événement eSports, nécessite une structure claire. Notre <strong>organisateur de tournois</strong> automatise la création de tableaux de confrontations, éliminant les erreurs manuelles et garantissant une gestion équitable des éliminations.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Pour le jour du match, le <strong>tableau de score sportif géant</strong> transforme n\'importe quel écran en centre de contrôle professionnel, permettant aux joueurs et au public de suivre le score de padel, ping-pong ou tout sport à sets avec une visibilité totale.',
+    },
+    {
+      type: 'title',
+      text: 'Entraînement en Force : Suivi Basé sur la Progression',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En salle de sport, ce qui ne se mesure pas ne s\'améliore pas. Le <strong>suivi de l\'entraînement</strong> permet d\'enregistrer vos charges de travail et de visualiser des graphiques de progression réels. Comprendre la courbe de surcompensation et le volume d\'entraînement accumulé est vital pour éviter la stagnation et optimiser les gains de force et de masse musculaire.',
+    },
+    {
+      type: 'title',
+      text: 'Neurologie et Réflexes : Vitesse de Réaction',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La vitesse physique est limitée, mais la <strong>vitesse de réaction</strong> peut être entraînée. Notre test de réflexes mesure le temps de réponse neuromusculaire en millisecondes, vous permettant de comparer votre performance avec les plages des athlètes professionnels. C\'est un outil essentiel pour les sports de combat, les sports de raquette et le gaming compétitif.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Analyse de Progression :</strong> Visualisez votre évolution historique sur les exercices clés grâce à des graphiques de performance dynamiques.',
+        '<strong>Gestion Automatisée :</strong> Créez des structures de tournois complexes en quelques secondes sans complications administratives.',
+        '<strong>Entraînement Cognitif :</strong> Améliorez le traitement visuel et la vitesse de réponse motrice avec des tests de précision.',
+        '<strong>Contrôle en Temps Réel :</strong> Restez concentré sur le jeu avec des tableaux de score numériques haute visibilité.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Conseil de Performance Maximale',
+      html: '<p><strong>Physiologie Appliquée :</strong> Assurez-vous d\'effectuer le test de réflexes avant et après votre séance d\'entraînement pour évaluer la fatigue de votre système nerveux central. Une baisse de 10% par rapport à votre vitesse habituelle est un indicateur clé pour réduire le volume de travail.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Physiologie de l\'Entraînement : Zones de Fréquence Cardiaque',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Votre cœur est l\'indicateur le plus précis de l\'effort. La fréquence cardiaque maximale (FCM) varie selon l\'âge, la génétique et la capacité cardiovasculaire. La calculer correctement permet de s\'entraîner dans des zones spécifiques : zone aérobie (60-70% FCM) pour l\'endurance de base, zone anaérobie (80-90% FCM) pour l\'explosivité, zone VO2 max (95-100%) pour la capacité cardio-respiratoire.',
+    },
+    {
+      type: 'title',
+      text: 'Le Futur du Sport Connecté en 2026',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La tendance de 2026 est l\'<strong>Entraînement Basé sur la Vélocité (EBV)</strong>. Les appareils connectés et les applications de suivi démocratisent l\'accès à l\'analytique autrefois réservée au sport d\'élite. Ces outils vous placent à l\'avant-garde, vous permettant de vous entraîner plus intelligemment, pas nécessairement plus durement.',
+    },
+    {
+      type: 'grid',
+      columns: [
+        { type: 'card', title: 'Réflexes', html: '<p>Précision en millisecondes</p>' },
+        { type: 'card', title: 'Progression', html: '<p>Visualisation historique</p>' },
+        { type: 'card', title: 'Compétition', html: '<p>Gestion structurée</p>' },
+        { type: 'card', title: 'Précision', html: '<p>Données absolues</p>' },
+      ],
+    },
+  ],
+};

package/src/category/index.ts

@@ -0,0 +1,21 @@
+import type { SportsCategoryEntry, SportsToolEntry } from '../types';
+import { scoreKeeper } from '../tool/scoreKeeper/index';
+import { tournamentBracket } from '../tool/tournamentBracket/index';
+import { gymTracker } from '../tool/gymTracker/index';
+import { reactionTester } from '../tool/reactionTester/index';
+
+export const sportsCategory: SportsCategoryEntry = {
+  icon: 'mdi:basketball',
+  tools: [
+    scoreKeeper,
+    tournamentBracket,
+    gymTracker,
+    reactionTester,
+  ] as unknown as SportsToolEntry<Record<string, string>>[],
+  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),
+  },
+};
+

package/src/category/seo.astro

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

package/src/components/PreviewNavSidebar.astro

@@ -0,0 +1,116 @@
+---
+interface NavItem {
+  id: string;
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface Props {
+  categoryTitle: string;
+  tools?: NavItem[];
+}
+
+const { categoryTitle, tools = [] } = Astro.props;
+---
+
+<nav class="preview-nav-sidebar">
+  <div class="sidebar-header">
+    <h3>{categoryTitle}</h3>
+  </div>
+
+  <ul class="tools-list">
+    {tools.map((tool) => (
+      <li>
+        <a
+          href={tool.href}
+          class:list={['tool-link', { active: tool.isActive }]}
+        >
+          <span class="tool-title">{tool.title}</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+
+<style>
+  .preview-nav-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--bg-surface, #0f172a);
+  }
+
+  .sidebar-header {
+    padding: 2rem 1.5rem 1.5rem;
+    border-bottom: 1px solid var(--border-color, #1e293b);
+  }
+
+  .sidebar-header h3 {
+    margin: 0;
+    font-size: 0.75rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted, #94a3b8);
+  }
+
+  .tools-list {
+    list-style: none;
+    margin: 0;
+    padding: 0.5rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .tools-list li {
+    margin: 0;
+  }
+
+  .tool-link {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    color: var(--text-muted, #94a3b8);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 3px solid transparent;
+    position: relative;
+  }
+
+  .tool-link:hover {
+    color: var(--text-base, #f1f5f9);
+    background: rgba(255, 255, 255, 0.08);
+    padding-left: 1.75rem;
+  }
+
+  .tool-link.active {
+    color: var(--accent, #f43f5e);
+    background: rgba(244, 63, 94, 0.15);
+    border-left-color: var(--accent, #f43f5e);
+    font-weight: 600;
+  }
+
+  .tool-link.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 24px;
+    background: var(--accent, #f43f5e);
+    border-radius: 0 2px 2px 0;
+  }
+
+  .tool-title {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
+

package/src/components/PreviewToolbar.astro

@@ -0,0 +1,143 @@
+---
+import type { KnownLocale } from '../types';
+
+interface Props {
+  currentLocale: KnownLocale;
+  localeUrls?: Partial<Record<KnownLocale, string>>;
+}
+
+const { currentLocale, localeUrls = {} } = Astro.props;
+
+const otherLocales = Object.entries(localeUrls).filter(([l]) => l !== currentLocale) as [
+  KnownLocale,
+  string,
+][];
+---
+
+<nav class="preview-toolbar">
+  {
+    otherLocales.length > 0 && (
+      <div class="locale-group">
+        <span class="locale-current">{currentLocale.toUpperCase()}</span>
+        {otherLocales.map(([locale, url]) => (
+          <a href={url} class="btn-locale">
+            {locale.toUpperCase()}
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  <button id="theme-toggle" class="btn-theme" aria-label="Toggle theme" title="Toggle theme">
+    <span class="theme-icon"></span>
+  </button>
+</nav>
+
+<script>
+  function initToolbar() {
+    const btn = document.getElementById('theme-toggle');
+    if (!btn) return;
+
+    const applyTheme = (theme: string) => {
+      document.documentElement.classList.remove('theme-light', 'theme-dark');
+      document.documentElement.classList.add(theme);
+      localStorage.setItem('theme', theme);
+    };
+
+    btn.addEventListener('click', () => {
+      const next = document.documentElement.classList.contains('theme-dark')
+        ? 'theme-light'
+        : 'theme-dark';
+      applyTheme(next);
+    });
+  }
+
+  initToolbar();
+  document.addEventListener('astro:after-swap', initToolbar);
+</script>
+
+<style>
+  .preview-toolbar {
+    position: fixed;
+    top: 1rem;
+    right: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    z-index: 1000;
+    background: var(--bg-surface);
+    padding: 0.4rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border-color);
+    backdrop-filter: blur(12px);
+  }
+
+  .locale-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding-right: 0.5rem;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .locale-current {
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: var(--text-muted);
+    padding: 0.4rem 0.6rem;
+    letter-spacing: 0.08em;
+  }
+
+  .btn-locale {
+    background: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    cursor: pointer;
+    padding: 0.4rem 0.7rem;
+    border-radius: 0.5rem;
+    font-weight: 700;
+    font-size: 0.7rem;
+    text-decoration: none;
+    letter-spacing: 0.08em;
+    transition: all 0.2s ease;
+  }
+
+  .btn-locale:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+
+  .btn-theme {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s ease;
+  }
+
+  .btn-theme:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .theme-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+  }
+
+  :global(.theme-light) .theme-icon {
+    background: #f59e0b;
+    box-shadow: 0 0 8px #fbbf24;
+  }
+
+  :global(.theme-dark) .theme-icon {
+    background: #94a3b8;
+    box-shadow: inset -4px -2px 0 #1e293b;
+  }
+</style>
+