@jjlmoya/utils-nature 1.1.0

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "@jjlmoya/utils-nature",
+    "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"
+    },
+    "devDependencies": {
+        "@astrojs/check": "^0.9.8",
+        "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,110 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'nature',
+  title: 'Nature & Agriculture Tools',
+  description:
+    'Optimize your relationship with the environment with free online tools. Seeding calculators, rainwater harvesting, cricket thermometer and digital carbon footprint estimators.',
+  seo: [
+    {
+      type: 'title',
+      text: 'Biological Engineering and Sustainability: Data for the Planet',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The connection with nature in 2026 is mediated by a deeper technical understanding of our resources. In this section, we offer <strong>free online tools</strong> designed to optimize agricultural production at small and large scale, manage vital water resources and measure our invisible impact on the global ecosystem. <strong>Precision agriculture</strong> and sustainability are not just concepts, but actions based on exact calculations.',
+    },
+    {
+      type: 'paragraph',
+      html: 'From calibrating seeding machinery to calculating the environmental impact of your internet browsing, our utilities transform biological and physical variables into actionable data for a greener future.',
+    },
+    {
+      type: 'title',
+      text: 'Precision Agriculture: Seeding Calibration and Cultivation',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Efficiency in the field starts with the exact distribution of seeds. Our <strong>seed calculator</strong> allows mechanical and pneumatic seeders to be calibrated, converting the desired population per hectare into the exact spacing between seeds. Understanding the germination ratio and planting density is fundamental to maximizing crop yield and reducing input waste.',
+    },
+    {
+      type: 'title',
+      text: 'Water Resource Management: Rainwater Harvesting',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Water is a finite resource. The <strong>rain harvester</strong> calculates how many liters of water you can collect annually based on your roof surface area and your area\'s rainfall history. This tool is vital for sizing storage tanks and implementing supplementary irrigation systems for urban gardens and rural farms.',
+    },
+    {
+      type: 'title',
+      text: 'Natural Curiosities and Dolbear\'s Law',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nature follows fascinating mathematical laws. Did you know that crickets act as biological thermometers? Based on <strong>Dolbear\'s Law</strong>, our calculator translates the frequency of cricket chirps into degrees Celsius with surprising accuracy, demonstrating the interconnection between animal physiology and environmental thermodynamics.',
+    },
+    {
+      type: 'title',
+      text: 'Digital Sustainability: Web Carbon Footprint',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The internet is not immaterial; it has an energy cost. Our <strong>digital carbon footprint</strong> calculator analyzes the data weight of a website and estimates the CO2 emissions generated per visit, considering server consumption and the distribution network. It is an essential tool for conscious developers and brands seeking to implement sustainable design.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Resource Optimization:</strong> Reduce water and seed consumption through data-driven agricultural planning.',
+        '<strong>Environmental Awareness:</strong> Visualize the hidden impact of your digital activities on the global environment.',
+        '<strong>Biodiversity and Science:</strong> Tools that promote observation and understanding of wildlife rhythms.',
+        '<strong>Self-sufficiency:</strong> Size collection and cultivation infrastructure for a more resilient off-grid life.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Water Sustainability Tip',
+      html: '<p><strong>Irrigation Strategy:</strong> Use collected water during the first hours of the morning or the last hours of the afternoon. You will reduce evaporation by 30%, allowing a smaller amount of water to have a much greater impact on the development of your plants.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Crop Rotation and Biodiversity: The Millennial Agricultural Science',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Crop rotation is not medieval tradition; it is plant physiology. Different crops consume different soil nutrients and generate different bacterial compositions in the rhizosphere. Wheat depletes nitrogen; alfalfa fixes it. Corn demands a lot of potassium; oats leave it available. Smart rotation (wheat-alfalfa-corn-legumes) restores natural fertility without costly synthetic fertilizers.',
+    },
+    {
+      type: 'title',
+      text: 'Soil and Nutrient Conservation: Pedological Analysis',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Soil is alive. It contains trillions of microbes, fungi and organisms that create structure and fertility. Erosion from excessive plowing destroys this structure; compacted soil does not absorb water; low organic matter reduces water retention capacity. Soil analysis (pH, nutrients, organic matter, texture) is the diagnosis before any intervention.',
+    },
+    {
+      type: 'title',
+      text: 'The Future of Regenerative Agriculture 2026',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The trend of 2026 is the <strong>Internet of Natural Things (IoNT)</strong>. Humidity sensors, monitoring drones and environmental management software are democratizing regenerative agriculture. These tools give you the ability to manage your environment not as a resource to exploit, but as an ecosystem to nurture and protect through technical intelligence.',
+    },
+    {
+      type: 'stats',
+      columns: 2,
+      items: [
+        { label: 'Seeding', value: 'Precision', icon: 'mdi:sprout' },
+        { label: 'Water', value: 'Capacity', icon: 'mdi:water' },
+        { label: 'Carbon', value: 'Net Zero', icon: 'mdi:leaf' },
+        { label: 'Wildlife', value: 'Bio-rhythms', icon: 'mdi:bug' },
+      ],
+    },
+  ],
+};

package/src/category/i18n/es.ts

@@ -0,0 +1,127 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'naturaleza',
+  title: 'Herramientas y Calculadoras de Naturaleza y Agricultura',
+  description:
+    'Optimiza tu relación con el entorno con herramientas gratuitas online. Calculadoras de siembra, recolección de agua de lluvia, termómetro de grillos y estimadores de huella de carbono digital.',
+  seo: [
+    {
+      type: 'title',
+      text: 'Ingeniería Biológica y Sostenibilidad: Datos para el Planeta',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La conexión con la naturaleza en 2026 está mediada por una comprensión técnica más profunda de nuestros recursos. En esta sección, ofrecemos <strong>herramientas gratuitas online</strong> diseñadas para optimizar la producción agrícola a pequeña y gran escala, gestionar recursos hídricos vitales y medir nuestro impacto invisible en el ecosistema global. La <strong>agricultura de precisión</strong> y la sostenibilidad no son solo conceptos, sino acciones basadas en cálculos exactos.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Desde la calibración de maquinaria de siembra hasta el cálculo del impacto ambiental de tu navegación por internet, nuestras utilidades transforman variables biológicas y físicas en datos accionables para un futuro más verde.',
+    },
+    {
+      type: 'title',
+      text: 'Agricultura de Precisión: Calibración de Siembra y Cultivo',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La eficiencia en el campo empieza por la distribución exacta de las semillas. Nuestra <strong>calculadora de siembra</strong> permite calibrar sembradoras mecánicas y neumáticas, convirtiendo la población deseada por hectárea en el espaciado exacto entre semillas. Entender el ratio de germinación y la densidad de plantación es fundamental para maximizar el rendimiento de la cosecha y reducir el desperdicio de insumos.',
+    },
+    {
+      type: 'title',
+      text: 'Gestión de Recursos Hídricos: Recolección de Lluvia',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El agua es un recurso finito. El <strong>cosechador de lluvia</strong> calcula cuántos litros de agua puedes recolectar anualmente basándote en la superficie de tu tejado y el histórico de precipitaciones de tu zona. Esta herramienta es vital para dimensionar tanques de almacenamiento e implementar sistemas de riego suplementarios para huertos urbanos y fincas rurales.',
+    },
+    {
+      type: 'title',
+      text: 'Curiosidades Naturales y Ley de Dolbear',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La naturaleza sigue leyes matemáticas fascinantes. ¿Sabías que los grillos actúan como termómetros biológicos? Basada en la <strong>Ley de Dolbear</strong>, nuestra calculadora traduce la frecuencia de los chirridos de los grillos a grados centígrados con una precisión sorprendente, demostrando la interconexión entre la fisiología animal y la termodinámica ambiental.',
+    },
+    {
+      type: 'title',
+      text: 'Sostenibilidad Digital: Huella de Carbono Web',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Internet no es inmaterial; tiene un coste energético. Nuestra calculadora de <strong>huella de carbono digital</strong> analiza el peso en datos de un sitio web y estima las emisiones de CO2 generadas por cada visita, considerando el consumo de los servidores y la red de distribución. Es una herramienta esencial para desarrolladores y marcas conscientes que buscan implementar el diseño sostenible.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Optimización de Recursos:</strong> Reduce el consumo de agua y semillas mediante una planificación agrícola basada en datos.',
+        '<strong>Conciencia Ambiental:</strong> Visualiza el impacto oculto de tus actividades digitales en el medio ambiente global.',
+        '<strong>Biodiversidad y Ciencia:</strong> Herramientas que fomentan la observación y comprensión de los ritmos de la vida silvestre.',
+        '<strong>Autosuficiencia:</strong> Dimensiona infraestructuras de recolección y cultivo para una vida más resiliente fuera de la red.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Tip de Sostenibilidad Hídrica',
+      html: '<p><strong>Estrategia de Riego:</strong> Utiliza el agua recolectada durante las primeras horas de la mañana o las últimas de la tarde. Reducirás la evaporación en un 30%, permitiendo que una menor cantidad de agua tenga un impacto mucho mayor en el desarrollo de tus plantas.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Rotación de Cultivos y Biodiversidad: La Ciencia Agrícola Milenaria',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La rotación de cultivos no es tradición medieval; es fisiología de plantas. Diferentes cultivos consumen diferentes nutrientes del suelo y generan diferentes composiciones de bacterias en la rizosfera. El trigo agota nitrógeno; la alfalfa lo fija. El maíz demanda mucho potasio; la avena lo deja disponible. Una rotación inteligente (trigo-alfalfa-maíz-legumbres) restaura fertilidad natural sin fertilizantes sintéticos costosos.',
+    },
+    {
+      type: 'paragraph',
+      html: 'La biodiversidad de insectos beneficiosos sigue la biodiversidad de plantas. Un campo monolítico de maíz es un desierto para depredadores de plagas. El mismo campo con franjas de flores silvestres, setos y legumbres cultiva una población robusta de mariquitas, avispas parasitoides y arañas que controlan plagas naturalmente. Esto es "control biológico integrado" y reduce necesidad de pesticidas en un 50-80%.',
+    },
+    {
+      type: 'title',
+      text: 'Conservación de Suelo y Nutrientes: Análisis Edafológico',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El suelo es vivo. Contiene billones de microbios, hongos y organismos que crean la estructura y fertilidad. La erosión por arado excesivo destruye esta estructura; el suelo compactado no absorbe agua; la materia orgánica baja reduce capacidad de retención hídrica. El análisis de suelo (pH, nutrientes, materia orgánica, textura) es el diagnóstico antes de cualquier intervención.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Enfoques como "agricultura de conservación" (mínima labranza, cobertura de residuos) restauran estructura del suelo en 3-5 años. El costo inicial es bajo; el retorno es alto. Suelo sano produce más con menos insumos externos.',
+    },
+    {
+      type: 'title',
+      text: 'Impacto Climático Local: Microbotánica y Efecto Isla de Calor',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El cambio climático no es abstracto; se manifiesta localmente. Plantaciones masivas de árboles pueden reducir temperatura local en 5-8°C comparado con urbanización desértica. Los árboles producen evapotranspiración (liberan humedad) que enfría el ambiente. Entender microclimatología local permite diseñar fincas y huertos resilientes al cambio climático.',
+    },
+    {
+      type: 'title',
+      text: 'El futuro de la agricultura regenerativa 2026',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La tendencia de 2026 es el <strong>Internet de las Cosas Naturales (IoNT)</strong>. Sensores de humedad, drones de monitorización y software de gestión ambiental están democratizando la agricultura regenerativa. Estas herramientas te dan la capacidad de gestionar tu entorno no como un recurso a explotar, sino como un ecosistema a nutrir y proteger mediante la inteligencia técnica.',
+    },
+    {
+      type: 'stats',
+      columns: 2,
+      items: [
+        { label: 'Siembra', value: 'Precisión', icon: 'mdi:sprout' },
+        { label: 'Agua', value: 'Capacidad', icon: 'mdi:water' },
+        { label: 'Carbono', value: 'Net Zero', icon: 'mdi:leaf' },
+        { label: 'Fauna', value: 'Bio-ritmos', icon: 'mdi:bug' },
+      ],
+    },
+  ],
+};

package/src/category/i18n/fr.ts

@@ -0,0 +1,110 @@
+import type { CategoryLocaleContent } from '../../types';
+
+export const content: CategoryLocaleContent = {
+  slug: 'nature',
+  title: 'Outils Nature et Agriculture',
+  description:
+    'Optimisez votre relation avec l\'environnement avec des outils gratuits en ligne. Calculateurs de semis, récupération d\'eau de pluie, thermomètre à grillons et estimateurs d\'empreinte carbone numérique.',
+  seo: [
+    {
+      type: 'title',
+      text: 'Ingénierie Biologique et Durabilité : Données pour la Planète',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La connexion avec la nature en 2026 est médiatisée par une compréhension technique plus profonde de nos ressources. Dans cette section, nous proposons des <strong>outils gratuits en ligne</strong> conçus pour optimiser la production agricole à petite et grande échelle, gérer les ressources vitales en eau et mesurer notre impact invisible sur l\'écosystème mondial. L\'<strong>agriculture de précision</strong> et la durabilité ne sont pas seulement des concepts, mais des actions basées sur des calculs exacts.',
+    },
+    {
+      type: 'paragraph',
+      html: 'De l\'étalonnage des machines de semis au calcul de l\'impact environnemental de votre navigation sur internet, nos utilitaires transforment des variables biologiques et physiques en données exploitables pour un avenir plus vert.',
+    },
+    {
+      type: 'title',
+      text: 'Agriculture de Précision : Étalonnage des Semis et Culture',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'L\'efficacité dans les champs commence par la distribution exacte des graines. Notre <strong>calculateur de semis</strong> permet d\'étalonner les semoirs mécaniques et pneumatiques, en convertissant la population souhaitée par hectare en l\'espacement exact entre les graines. Comprendre le taux de germination et la densité de plantation est fondamental pour maximiser le rendement des récoltes et réduire le gaspillage des intrants.',
+    },
+    {
+      type: 'title',
+      text: 'Gestion des Ressources en Eau : Récupération d\'Eau de Pluie',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'L\'eau est une ressource finie. Le <strong>récupérateur d\'eau de pluie</strong> calcule combien de litres d\'eau vous pouvez collecter annuellement en fonction de la surface de votre toit et de l\'historique des précipitations de votre région. Cet outil est vital pour dimensionner les réservoirs de stockage et mettre en œuvre des systèmes d\'irrigation supplémentaires pour les jardins urbains et les exploitations rurales.',
+    },
+    {
+      type: 'title',
+      text: 'Curiosités Naturelles et Loi de Dolbear',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La nature suit des lois mathématiques fascinantes. Saviez-vous que les grillons agissent comme des thermomètres biologiques ? Basée sur la <strong>Loi de Dolbear</strong>, notre calculatrice traduit la fréquence des stridulations des grillons en degrés Celsius avec une précision surprenante, démontrant l\'interconnexion entre la physiologie animale et la thermodynamique environnementale.',
+    },
+    {
+      type: 'title',
+      text: 'Durabilité Numérique : Empreinte Carbone Web',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Internet n\'est pas immatériel ; il a un coût énergétique. Notre calculateur d\'<strong>empreinte carbone numérique</strong> analyse le poids en données d\'un site web et estime les émissions de CO2 générées par chaque visite, en tenant compte de la consommation des serveurs et du réseau de distribution. C\'est un outil essentiel pour les développeurs et les marques conscientes qui cherchent à mettre en œuvre un design durable.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Optimisation des Ressources :</strong> Réduisez la consommation d\'eau et de graines grâce à une planification agricole basée sur les données.',
+        '<strong>Conscience Environnementale :</strong> Visualisez l\'impact caché de vos activités numériques sur l\'environnement mondial.',
+        '<strong>Biodiversité et Science :</strong> Des outils qui favorisent l\'observation et la compréhension des rythmes de la vie sauvage.',
+        '<strong>Autosuffisance :</strong> Dimensionnez les infrastructures de collecte et de culture pour une vie plus résiliente hors réseau.',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Conseil de Durabilité Hydrique',
+      html: '<p><strong>Stratégie d\'Irrigation :</strong> Utilisez l\'eau collectée pendant les premières heures du matin ou les dernières heures de l\'après-midi. Vous réduirez l\'évaporation de 30 %, permettant à une plus petite quantité d\'eau d\'avoir un impact beaucoup plus important sur le développement de vos plantes.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Rotation des Cultures et Biodiversité : La Science Agricole Millénaire',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La rotation des cultures n\'est pas une tradition médiévale ; c\'est de la physiologie végétale. Différentes cultures consomment différents nutriments du sol et génèrent différentes compositions bactériennes dans la rhizosphère. Le blé épuise l\'azote ; la luzerne le fixe. Le maïs demande beaucoup de potassium ; l\'avoine le laisse disponible. Une rotation intelligente restaure la fertilité naturelle sans engrais synthétiques coûteux.',
+    },
+    {
+      type: 'title',
+      text: 'Conservation du Sol et des Nutriments : Analyse Pédologique',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Le sol est vivant. Il contient des billions de microbes, champignons et organismes qui créent la structure et la fertilité. L\'érosion due à un labour excessif détruit cette structure ; le sol compacté n\'absorbe pas l\'eau ; la faible matière organique réduit la capacité de rétention d\'eau. L\'analyse du sol (pH, nutriments, matière organique, texture) est le diagnostic avant toute intervention.',
+    },
+    {
+      type: 'title',
+      text: 'L\'Avenir de l\'Agriculture Régénérative 2026',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'La tendance de 2026 est l\'<strong>Internet des Choses Naturelles (IoNT)</strong>. Les capteurs d\'humidité, les drones de surveillance et les logiciels de gestion environnementale démocratisent l\'agriculture régénérative. Ces outils vous donnent la capacité de gérer votre environnement non pas comme une ressource à exploiter, mais comme un écosystème à nourrir et à protéger grâce à l\'intelligence technique.',
+    },
+    {
+      type: 'stats',
+      columns: 2,
+      items: [
+        { label: 'Semis', value: 'Précision', icon: 'mdi:sprout' },
+        { label: 'Eau', value: 'Capacité', icon: 'mdi:water' },
+        { label: 'Carbone', value: 'Net Zéro', icon: 'mdi:leaf' },
+        { label: 'Faune', value: 'Bio-rythmes', icon: 'mdi:bug' },
+      ],
+    },
+  ],
+};

package/src/category/index.ts

@@ -0,0 +1,14 @@
+import type { NatureCategoryEntry } from '../types';
+import { cricketThermometer } from '../tool/cricketThermometer/index';
+import { seedCalculator } from '../tool/seedCalculator/index';
+
+export const natureCategory: NatureCategoryEntry = {
+  icon: 'mdi:leaf',
+  tools: [cricketThermometer, seedCalculator],
+  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 { natureCategory } from './index';
+import type { KnownLocale } from '../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await natureCategory.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>
+