@jjlmoya/utils-diy 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-diy",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/drillCalculator/component.astro

@@ -416,9 +416,7 @@ const t = (ui ?? {}) as DrillCalculatorUI;
     --dc-border: rgba(255, 255, 255, 0.1);
   }
 
-  :global(.hidden) {
-    display: none;
-  }
+
 
   .dc-root {
     width: 100%;
@@ -1207,4 +1205,8 @@ const t = (ui ?? {}) as DrillCalculatorUI;
       font-size: 3.5rem;
     }
   }
+
+  :global(.hidden) {
+    display: none;
+  }
 </style>

package/src/tool/drillSharpener/i18n/es.ts

@@ -2,8 +2,8 @@ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'sche
 import type { ToolLocaleContent } from '../../../types';
 import type { DrillSharpenerUI } from '../ui';
 
-const slug = 'afilador-maestro-brocas';
-const title = 'Afilador Maestro de Brocas: Galga de Precisión';
+const slug = 'afilado-maestro-brocas';
+const title = 'Afilado Maestro de Brocas: Galga de Precisión';
 const description = 'Guía interactiva para afilar brocas HSS. Galga digital en pantalla para verificar ángulos de 118° y 135°. Calcula RPM y diagnostica errores de corte.';
 
 const faqData = [

package/src/tool/mortarCalculator/i18n/es.ts

@@ -2,7 +2,7 @@ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'sche
 import type { ToolLocaleContent } from '../../../types';
 import type { MortarCalculatorUI } from '../ui';
 
-const slug = 'morteros-cal';
+const slug = 'morteros';
 const title = 'Proporciones Morteros de Cal Tradicionales: Enfoscados y Revocos';
 const description =
   'Calculadora gratuita para morteros de cal y arena. Obtén las proporciones exactas para enfoscados, revocos y enlucidos según métodos tradicionales (Vitruvio)';

package/src/tool/stairCalculator/bibliography.astro

@@ -1,52 +1,13 @@
 ---
----
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { stairCalculator } from './index';
+import type { KnownLocale } from '../../types';
 
-<div class="sc-bibliography">
-  <h3>Referencias y Normativa</h3>
-  <ul>
-    <li>
-      <a href="https://www.codigotecnico.org/" target="_blank" rel="noopener noreferrer">
-        Normativa de Seguridad en Escaleras (CTE España)
-      </a>
-    </li>
-    <li>
-      <a href="https://es.wikipedia.org/wiki/Escalera" target="_blank" rel="noopener noreferrer">
-        Ergonomía de la Escalera - Wikipedia
-      </a>
-    </li>
-    <li>
-      <a href="https://www.idae.es/" target="_blank" rel="noopener noreferrer">
-        Instituto para la Diversificación y Ahorro de la Energía (IDAE)
-      </a>
-    </li>
-  </ul>
-</div>
+interface Props {
+  locale?: KnownLocale;
+}
+const { locale = 'es' } = Astro.props;
+const content = await stairCalculator.i18n[locale]?.();
+---
 
-<style>
-  .sc-bibliography {
-    max-width: 900px;
-    margin: 2rem auto;
-    padding: 1.5rem;
-  }
-  .sc-bibliography h3 {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: #1e293b;
-  }
-  .sc-bibliography ul {
-    list-style: none;
-    padding: 0;
-  }
-  .sc-bibliography li {
-    margin-bottom: 0.75rem;
-  }
-  .sc-bibliography a {
-    color: #4f46e5;
-    text-decoration: none;
-    font-weight: 600;
-  }
-  .sc-bibliography a:hover {
-    text-decoration: underline;
-  }
-</style>
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/stairCalculator/component.astro

@@ -457,9 +457,13 @@ const t = (ui ?? {}) as StairCalculatorUI;
     display: flex;
     align-items: center;
     background: rgba(255, 255, 255, 0.5);
-    border-radius: 1rem;
+    border-radius: 1.25rem;
     border: 2px solid var(--sc-border);
     transition: all 0.2s ease;
+    padding: 3px;
+    gap: 2px;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   :global(.theme-dark) .sc-stepper {
@@ -480,9 +484,12 @@ const t = (ui ?? {}) as StairCalculatorUI;
     background: none;
     border: none;
     color: var(--sc-neutral-light);
-    font-size: 1.25rem;
+    font-size: 1.6rem;
+    font-weight: 800;
     cursor: pointer;
-    border-radius: 0.5rem;
+    border-radius: 0.85rem;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
   }
 
   .sc-step-btn:hover {
@@ -492,6 +499,7 @@ const t = (ui ?? {}) as StairCalculatorUI;
 
   .sc-stepper input {
     flex: 1;
+    min-width: 0;
     background: none;
     border: none;
     color: var(--sc-neutral);
@@ -511,7 +519,7 @@ const t = (ui ?? {}) as StairCalculatorUI;
 
   .sc-select {
     width: 100%;
-    padding: 0.8rem;
+    padding: 0.8rem 2.8rem 0.8rem 1rem;
     border-radius: 1rem;
     border: 2px solid var(--sc-border);
     background: rgba(255, 255, 255, 0.5);
@@ -520,10 +528,27 @@ const t = (ui ?? {}) as StairCalculatorUI;
     color: var(--sc-neutral);
     outline: none;
     transition: all 0.2s ease;
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%236366f1' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    cursor: pointer;
   }
 
   :global(.theme-dark) .sc-select {
-    background: rgba(255, 255, 255, 0.04);
+    background-color: #0f172a;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23818cf8' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6l1.41-1.42Z'/%3E%3C/svg%3E");
+  }
+
+  .sc-select option {
+    background: white;
+    color: #1e293b;
+  }
+
+  :global(.theme-dark) .sc-select option {
+    background: #1e293b;
+    color: #f1f5f9;
   }
 
   .sc-optimize-btn {

package/src/tool/stairCalculator/seo.astro

@@ -1,211 +1,14 @@
 ---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { stairCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+const { locale = 'es' } = Astro.props;
+const content = await stairCalculator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-<article class="sc-seo-article">
-    <h2>Calculadora de Escaleras: Diseño y Ejecución en Obra</h2>
-
-    <p>
-        Diseñar una escalera no es solo una cuestión estética; es un desafío de ingeniería y ergonomía. Nuestra herramienta avanzada permite calcular desde la <strong>geometría básica</strong> hasta la <strong>cubicación de hormigón</strong>, integrando factores críticos de obra como el espesor de la losa y los materiales de acabado.
-    </p>
-
-    <div class="sc-seo-summary">
-        <h3>Capacidades de la Herramienta</h3>
-        <ul>
-            <li>Relación de <strong>Blondel (2CH + H)</strong> optimizada.</li>
-            <li>Cálculo de <strong>volumen de hormigón</strong> real (peldaños + losa).</li>
-            <li>Compensación por <strong>espesor de acabado</strong> (mármol, madera).</li>
-            <li>Guía de <strong>replanteo acumulado</strong> para evitar errores métricos.</li>
-        </ul>
-    </div>
-
-    <h3>Fundamentos Técnicos: La Ley de Blondel</h3>
-
-    <p>
-        La comodidad de una escalera depende de la longitud del paso humano. El estándar internacional establece que la suma de dos contrahuellas y una huella debe estar en el rango de <strong>62 a 64 cm</strong>.
-    </p>
-
-    <div class="sc-seo-tip">
-        <h4>Optimización de Peldaños</h4>
-        <p>
-            Una contrahuella de <strong>18 cm</strong> es el estándar de confort en viviendas. Si tienes dudas sobre cuántos peldaños usar, nuestra calculadora incluye un botón de optimización automática que ajusta el número de niveles para acercarse a esta medida ideal.
-        </p>
-    </div>
-
-    <h3>Control de Estructura y Materiales</h3>
-
-    <p>
-        Para una ejecución profesional, es vital considerar la <strong>losa de hormigón</strong> (el plano inclinado que sostiene los escalones). Ignorar este volumen resultaría en un pedido de hormigón insuficiente.
-    </p>
-
-    <div class="sc-seo-stats">
-        <div class="sc-stat">
-            <span class="sc-stat-label">Losa Estándar</span>
-            <span class="sc-stat-value">15</span>
-            <span class="sc-stat-unit">cm</span>
-        </div>
-        <div class="sc-stat">
-            <span class="sc-stat-label">CH Vivienda</span>
-            <span class="sc-stat-value">17.5</span>
-            <span class="sc-stat-unit">cm</span>
-        </div>
-        <div class="sc-stat">
-            <span class="sc-stat-label">Ángulo Ideal</span>
-            <span class="sc-stat-value">32</span>
-            <span class="sc-stat-unit">º</span>
-        </div>
-    </div>
-
-    <h3>Replanteo y Trazado: El Error Acumulado</h3>
-
-    <p>
-        En la construcción de escaleras, el mayor enemigo es el error milimétrico. Si mides cada escalón por separado, la suma de pequeños errores puede dejar el último peldaño con una altura peligrosa (el famoso 'escalón cojo').
-    </p>
-
-    <table class="sc-seo-table">
-        <thead>
-            <tr>
-                <th>Método</th>
-                <th>Precisión</th>
-                <th>Resultado en Obra</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Medición Individual</td>
-                <td>Baja</td>
-                <td>Riesgo de tropiezos por desigualdad.</td>
-            </tr>
-            <tr>
-                <td><strong>Trazado Acumulado</strong></td>
-                <td><strong>Alta</strong></td>
-                <td><strong>Peldaños idénticos y seguros.</strong></td>
-            </tr>
-        </tbody>
-    </table>
-
-    <h3>Previsión de Acabados Finales</h3>
-
-    <p>
-        ¿Vas a instalar peldaños de granito de 3 cm? Este dato es fundamental. Si no se prevé, el primer peldaño quedará 3 cm más alto y el último 3 cm más bajo respecto al suelo terminado. Nuestra calculadora ajusta estos niveles para que, tras la colocación del material, la escalera sea perfecta de principio a fin.
-    </p>
-
-    <pre class="sc-seo-code"><code>
-# Ejemplo de Cálculo Total
-Desnivel: 300 cm
-Peldaños: 17 (CH = 17.6 cm)
-Espesor Rampa: 15 cm
-# Vol. Hormigón = Vol. Triángulos + Vol. Rampa
-    </code></pre>
-</article>
-
-<style>
-    .sc-seo-article {
-      max-width: 900px;
-      margin: 2rem auto;
-      padding: 0 1.5rem;
-      color: #1e293b;
-      line-height: 1.6;
-    }
-    .sc-seo-article h2 {
-      font-size: 1.875rem;
-      font-weight: 800;
-      margin: 1.5rem 0 1rem;
-      color: #0f172a;
-    }
-    .sc-seo-article h3 {
-      font-size: 1.25rem;
-      font-weight: 700;
-      margin: 1.5rem 0 0.75rem;
-      color: #1e293b;
-    }
-    .sc-seo-article h4 {
-      font-size: 1rem;
-      font-weight: 700;
-      margin: 0.75rem 0 0.5rem;
-    }
-    .sc-seo-article p {
-      margin-bottom: 1rem;
-    }
-    .sc-seo-summary {
-      background: #f0f9ff;
-      border-left: 4px solid #4f46e5;
-      padding: 1.25rem;
-      border-radius: 0.5rem;
-      margin: 1.25rem 0;
-    }
-    .sc-seo-summary ul {
-      margin: 0.75rem 0 0;
-      padding-left: 1.5rem;
-    }
-    .sc-seo-summary li {
-      margin-bottom: 0.5rem;
-    }
-    .sc-seo-tip {
-      background: #fef9c3;
-      border-left: 4px solid #f59e0b;
-      padding: 1.25rem;
-      border-radius: 0.5rem;
-      margin: 1.25rem 0;
-    }
-    .sc-seo-tip p {
-      margin: 0;
-    }
-    .sc-seo-stats {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-      gap: 1rem;
-      margin: 1.25rem 0;
-    }
-    .sc-stat {
-      background: #fff;
-      border: 1px solid #e2e8f0;
-      border-radius: 0.75rem;
-      padding: 1rem;
-      text-align: center;
-    }
-    .sc-stat-label {
-      display: block;
-      font-size: 0.8rem;
-      color: #64748b;
-      margin-bottom: 0.5rem;
-      font-weight: 600;
-    }
-    .sc-stat-value {
-      display: block;
-      font-size: 1.875rem;
-      font-weight: 800;
-      color: #4f46e5;
-    }
-    .sc-stat-unit {
-      display: block;
-      font-size: 0.75rem;
-      color: #64748b;
-      margin-top: 0.25rem;
-    }
-    .sc-seo-table {
-      width: 100%;
-      border-collapse: collapse;
-      margin: 1.25rem 0;
-      border: 1px solid #e2e8f0;
-    }
-    .sc-seo-table th {
-      background: #f1f5f9;
-      padding: 0.75rem;
-      text-align: left;
-      font-weight: 700;
-      border-bottom: 2px solid #e2e8f0;
-    }
-    .sc-seo-table td {
-      padding: 0.75rem;
-      border-bottom: 1px solid #e2e8f0;
-    }
-    .sc-seo-code {
-      background: #1e293b;
-      color: #e2e8f0;
-      padding: 1.25rem;
-      border-radius: 0.75rem;
-      overflow-x: auto;
-      margin: 1.25rem 0;
-      font-size: 0.9rem;
-    }
-</style>
+<SEORenderer content={{ locale: locale as string, sections: content.seo }} />

package/src/tool/thermalExpansionCalculator/component.astro

@@ -410,7 +410,7 @@ const t = (ui ?? {}) as ThermalExpansionCalculatorUI;
   :global(.theme-dark) .te-input {
     background: rgba(0, 0, 0, 0.25);
     border-color: rgba(255, 255, 255, 0.1);
-    color: black;
+    color: #f9fafb;
   }
 
   :global(.theme-dark) .te-input:focus {