@jjlmoya/utils-chrono 1.23.0 → 1.24.0

package/src/tool/power-reserve-estimator/client.ts

@@ -25,18 +25,19 @@ const activityFactors: Record<string, number> = {
 };
 
 const movementSelect = document.getElementById('movement-select') as HTMLSelectElement;
+const root = movementSelect.closest('.power-reserve-card') || document;
 const turnsInput = document.getElementById('turns-input') as HTMLInputElement;
 const hoursInput = document.getElementById('hours-input') as HTMLInputElement;
-const activityChips = document.querySelectorAll('[data-activity]') as NodeListOf<HTMLButtonElement>;
-const customFields = document.getElementById('custom-fields') as HTMLElement;
-const customReserve = document.getElementById('custom-reserve') as HTMLInputElement;
-const customTurns = document.getElementById('custom-turns') as HTMLInputElement;
-const calcBtn = document.getElementById('calc-btn') as HTMLButtonElement;
-const resultCard = document.getElementById('result-card') as HTMLElement;
-const gaugeFill = document.getElementById('gauge-fill') as HTMLElement;
-const chargeValue = document.getElementById('charge-value') as HTMLElement;
-const reserveValue = document.getElementById('reserve-value') as HTMLElement;
-const stopValue = document.getElementById('stop-value') as HTMLElement;
+const activityChips = root.querySelectorAll('[data-activity]') as NodeListOf<HTMLButtonElement>;
+const customFields = root.querySelector('#custom-fields') as HTMLElement;
+const customReserve = root.querySelector('#custom-reserve') as HTMLInputElement;
+const customTurns = root.querySelector('#custom-turns') as HTMLInputElement;
+const calcBtn = root.querySelector('#calc-btn') as HTMLButtonElement;
+const resultCard = root.querySelector('#result-card') as HTMLElement;
+const gaugeFill = root.querySelector('#gauge-fill') as HTMLElement;
+const chargeValue = root.querySelector('#charge-value') as HTMLElement;
+const reserveValue = root.querySelector('#reserve-value') as HTMLElement;
+const stopValue = root.querySelector('#stop-value') as HTMLElement;
 
 let currentActivity = 'medium';
 
@@ -115,9 +116,9 @@ activityChips.forEach((chip) => {
   });
 });
 
-document.querySelectorAll('.stepper-btn').forEach((btn) => {
+root.querySelectorAll('.stepper-btn').forEach((btn) => {
   btn.addEventListener('click', () => {
-    const target = document.getElementById(btn.getAttribute('data-target') || '') as HTMLInputElement;
+    const target = root.querySelector('#' + (btn.getAttribute('data-target') || '')) as HTMLInputElement;
     const dir = parseInt(btn.getAttribute('data-dir') || '1', 10);
     if (target) {
       calcValue(target, dir);

package/src/tool/power-reserve-estimator/component.astro

@@ -8,7 +8,7 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+<div class="power-reserve-card" data-ui={JSON.stringify(ui)}>
   <EstimatorPanel labels={ui} />
 </div>
 

package/src/tool/power-reserve-estimator/power-reserve-estimator.css

@@ -1,4 +1,4 @@
-.tool-main-card {
+.power-reserve-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: 1.25rem;
@@ -13,7 +13,7 @@
   overflow: hidden;
 }
 
-.estimator-panel {
+.power-reserve-card .estimator-panel {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -21,13 +21,13 @@
   z-index: 1;
 }
 
-.panel-section {
+.power-reserve-card .panel-section {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
 
-.section-label {
+.power-reserve-card .section-label {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--text-dimmed);
@@ -38,7 +38,7 @@
   gap: 0.3rem;
 }
 
-.label-sub {
+.power-reserve-card .label-sub {
   font-size: 0.65rem;
   color: var(--text-base);
   opacity: 0.35;
@@ -47,7 +47,7 @@
   letter-spacing: 0;
 }
 
-.movement-select {
+.power-reserve-card .movement-select {
   width: 100%;
   padding: 0.65rem 0.75rem;
   background: var(--bg-page);
@@ -64,31 +64,31 @@
   padding-right: 2rem;
 }
 
-.movement-select:focus {
+.power-reserve-card .movement-select:focus {
   outline: none;
   border-color: var(--accent);
 }
 
-.input-row {
+.power-reserve-card .input-row {
   display: flex;
   gap: 0.75rem;
   align-items: flex-end;
 }
 
-.input-group {
+.power-reserve-card .input-group {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
 }
 
-.input-label {
+.power-reserve-card .input-label {
   font-size: 0.75rem;
   color: var(--text-dimmed);
   font-weight: 600;
 }
 
-.stepper-wrap {
+.power-reserve-card .stepper-wrap {
   display: flex;
   align-items: center;
   background: var(--bg-page);
@@ -98,11 +98,11 @@
   transition: border-color 0.2s;
 }
 
-.stepper-wrap:focus-within {
+.power-reserve-card .stepper-wrap:focus-within {
   border-color: var(--accent);
 }
 
-.stepper-input {
+.power-reserve-card .stepper-input {
   width: 100%;
   padding: 0.6rem 0.25rem;
   border: none;
@@ -115,17 +115,17 @@
   -moz-appearance: textfield;
 }
 
-.stepper-input::-webkit-inner-spin-button,
-.stepper-input::-webkit-outer-spin-button {
+.power-reserve-card .stepper-input::-webkit-inner-spin-button,
+.power-reserve-card .stepper-input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-.stepper-input:focus {
+.power-reserve-card .stepper-input:focus {
   outline: none;
 }
 
-.stepper-btn {
+.power-reserve-card .stepper-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -141,17 +141,17 @@
   user-select: none;
 }
 
-.stepper-btn:hover {
+.power-reserve-card .stepper-btn:hover {
   background: var(--bg-page);
   color: var(--accent);
 }
 
-.stepper-btn:active {
+.power-reserve-card .stepper-btn:active {
   background: var(--border-base);
   transform: scale(0.95);
 }
 
-.chip-group {
+.power-reserve-card .chip-group {
   display: flex;
   gap: 0.25rem;
   background: var(--bg-page);
@@ -160,7 +160,7 @@
   border: 1px solid var(--border-base);
 }
 
-.chip {
+.power-reserve-card .chip {
   flex: 1;
   padding: 0.3rem 0.4rem;
   border: none;
@@ -174,16 +174,16 @@
   white-space: nowrap;
 }
 
-.chip:hover {
+.power-reserve-card .chip:hover {
   color: var(--text-base);
 }
 
-.chip.active {
+.power-reserve-card .chip.active {
   background: var(--accent);
   color: var(--text-on-primary, #fff);
 }
 
-.calc-btn {
+.power-reserve-card .calc-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,17 +201,17 @@
   box-shadow: 0 2px 12px rgba(99, 102, 241, 0.25);
 }
 
-.calc-btn:hover {
+.power-reserve-card .calc-btn:hover {
   opacity: 0.9;
   transform: translateY(-1px);
   box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
 }
 
-.calc-btn:active {
+.power-reserve-card .calc-btn:active {
   transform: scale(0.97);
 }
 
-.result-card {
+.power-reserve-card .result-card {
   background: var(--bg-page);
   border: 1px solid var(--border-base);
   border-radius: 1rem;
@@ -222,7 +222,7 @@
   animation: fade-slide-in 0.3s ease;
 }
 
-.result-header {
+.power-reserve-card .result-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -231,13 +231,13 @@
   font-weight: 700;
 }
 
-.gauge-wrap {
+.power-reserve-card .gauge-wrap {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.gauge-track {
+.power-reserve-card .gauge-track {
   width: 100%;
   height: 14px;
   background: var(--border-base);
@@ -245,49 +245,49 @@
   overflow: hidden;
 }
 
-.gauge-fill {
+.power-reserve-card .gauge-fill {
   height: 100%;
   border-radius: 6px;
   transition: width 0.6s ease, background 0.6s ease;
 }
 
-.gauge-marks {
+.power-reserve-card .gauge-marks {
   display: flex;
   justify-content: space-between;
   padding: 0 0.1rem;
 }
 
-.gauge-mark {
+.power-reserve-card .gauge-mark {
   font-size: 0.6rem;
   font-weight: 700;
   color: var(--text-base);
   opacity: 0.4;
 }
 
-.gauge-mark.gauge-danger {
+.power-reserve-card .gauge-mark.gauge-danger {
   color: var(--color-danger, #ef4444);
   opacity: 0.9;
   font-weight: 800;
 }
 
-.gauge-mark.gauge-warning {
+.power-reserve-card .gauge-mark.gauge-warning {
   color: var(--color-warning, #f59e0b);
   opacity: 0.85;
   font-weight: 800;
 }
 
-.gauge-mark.gauge-ok {
+.power-reserve-card .gauge-mark.gauge-ok {
   color: var(--color-success, #22c55e);
   opacity: 0.85;
   font-weight: 800;
 }
 
-.charge-stats {
+.power-reserve-card .charge-stats {
   display: flex;
   gap: 0.5rem;
 }
 
-.charge-stat {
+.power-reserve-card .charge-stat {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -295,14 +295,14 @@
   gap: 0.15rem;
 }
 
-.stat-value {
+.power-reserve-card .stat-value {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--text-base);
   letter-spacing: -0.02em;
 }
 
-.stat-label {
+.power-reserve-card .stat-label {
   font-size: 0.6rem;
   font-weight: 600;
   color: var(--text-dimmed);
@@ -311,7 +311,7 @@
   text-align: center;
 }
 
-.steps-section {
+.power-reserve-card .steps-section {
   display: flex;
   flex-direction: column;
   gap: 0.625rem;
@@ -321,13 +321,13 @@
   border: 1px solid var(--border-base);
 }
 
-.step-row {
+.power-reserve-card .step-row {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
-.step-marker {
+.power-reserve-card .step-marker {
   width: 1.375rem;
   height: 1.375rem;
   border-radius: 50%;
@@ -341,14 +341,14 @@
   flex-shrink: 0;
 }
 
-.step-text {
+.power-reserve-card .step-text {
   font-size: 0.8125rem;
   color: var(--text-base);
   line-height: 1.4;
   opacity: 0.85;
 }
 
-.tip-row {
+.power-reserve-card .tip-row {
   display: flex;
   gap: 0.5rem;
   padding: 0.75rem 1rem;
@@ -357,13 +357,13 @@
   border: 1px solid var(--border-base);
 }
 
-.tip-icon {
+.power-reserve-card .tip-icon {
   flex-shrink: 0;
   margin-top: 0.1rem;
   color: var(--accent);
 }
 
-.tip-text {
+.power-reserve-card .tip-text {
   font-size: 0.8rem;
   color: var(--text-base);
   line-height: 1.5;
@@ -382,21 +382,37 @@
 }
 
 @media (max-width: 520px) {
-  .tool-main-card {
+  .power-reserve-card {
     padding: 1rem;
     gap: 1.25rem;
+    max-width: 100%;
+    border-radius: 0.875rem;
   }
 
-  .input-row {
+  .power-reserve-card .input-row {
     flex-direction: column;
     gap: 0.5rem;
+    align-items: stretch;
   }
 
-  .charge-stats {
-    flex-wrap: wrap;
+  .power-reserve-card .charge-stats {
+    display: grid;
+    grid-template-columns: 1fr;
   }
 
-  .charge-stat {
-    min-width: 30%;
+  .power-reserve-card .charge-stat {
+    min-width: 0;
+    padding: 0.5rem;
+    border-radius: 0.75rem;
+    background: var(--bg-surface);
+  }
+
+  .power-reserve-card .chip-group {
+    width: 100%;
+  }
+
+  .power-reserve-card .stat-value {
+    font-size: 1.1rem;
+    overflow-wrap: anywhere;
   }
 }

package/src/tool/quartz-battery-health/client.ts

@@ -16,25 +16,26 @@ const batteries: BatteryData[] = [
   { id: 'cr2025', name: 'CR2025', capacity: 165 },
 ];
 
-const mainEl = document.querySelector('.tool-main-card') as HTMLElement;
+const mainEl = document.querySelector('.quartz-battery-card') as HTMLElement;
 const ui = mainEl ? JSON.parse(mainEl.dataset.ui || '{}') : {};
 
-const batterySelect = document.getElementById('battery-select') as HTMLSelectElement;
-const customFields = document.getElementById('custom-fields') as HTMLElement;
-const customCapacity = document.getElementById('custom-capacity') as HTMLInputElement;
-const consumptionInput = document.getElementById('consumption-input') as HTMLInputElement;
-const installMonth = document.getElementById('install-month') as HTMLSelectElement;
-const installYear = document.getElementById('install-year') as HTMLInputElement;
-const calcBtn = document.getElementById('calc-btn') as HTMLButtonElement;
-const resultCard = document.getElementById('result-card') as HTMLElement;
-const lifeYears = document.getElementById('life-years') as HTMLElement;
-const lifeMonths = document.getElementById('life-months') as HTMLElement;
-const lifeDays = document.getElementById('life-days') as HTMLElement;
-const gaugeFill = document.getElementById('gauge-fill') as HTMLElement;
-const healthBadge = document.getElementById('health-badge') as HTMLElement;
-const changeDateRow = document.getElementById('change-date-row') as HTMLElement;
-const changeDateValue = document.getElementById('change-date-value') as HTMLElement;
-const changeDateHint = document.getElementById('change-date-hint') as HTMLElement;
+const root = mainEl || document;
+const batterySelect = root.querySelector('#battery-select') as HTMLSelectElement;
+const customFields = root.querySelector('#custom-fields') as HTMLElement;
+const customCapacity = root.querySelector('#custom-capacity') as HTMLInputElement;
+const consumptionInput = root.querySelector('#consumption-input') as HTMLInputElement;
+const installMonth = root.querySelector('#install-month') as HTMLSelectElement;
+const installYear = root.querySelector('#install-year') as HTMLInputElement;
+const calcBtn = root.querySelector('#calc-btn') as HTMLButtonElement;
+const resultCard = root.querySelector('#result-card') as HTMLElement;
+const lifeYears = root.querySelector('#life-years') as HTMLElement;
+const lifeMonths = root.querySelector('#life-months') as HTMLElement;
+const lifeDays = root.querySelector('#life-days') as HTMLElement;
+const gaugeFill = root.querySelector('#gauge-fill') as HTMLElement;
+const healthBadge = root.querySelector('#health-badge') as HTMLElement;
+const changeDateRow = root.querySelector('#change-date-row') as HTMLElement;
+const changeDateValue = root.querySelector('#change-date-value') as HTMLElement;
+const changeDateHint = root.querySelector('#change-date-hint') as HTMLElement;
 
 const STORAGE_KEY = 'quartz-battery-health-state';
 
@@ -179,9 +180,9 @@ calcBtn.addEventListener('click', commit);
   el.addEventListener('input', commit);
 });
 
-document.querySelectorAll('.stepper-btn').forEach((btn) => {
+root.querySelectorAll('.stepper-btn').forEach((btn) => {
   btn.addEventListener('click', () => {
-    const target = document.getElementById(btn.getAttribute('data-target') || '') as HTMLInputElement;
+    const target = root.querySelector('#' + (btn.getAttribute('data-target') || '')) as HTMLInputElement;
     const dir = parseFloat(btn.getAttribute('data-dir') || '1');
     if (target) {
       calcValue(target, dir);
@@ -195,4 +196,3 @@ toggleCustom();
 commit();
 
 export {};
-

package/src/tool/quartz-battery-health/component.astro

@@ -8,7 +8,7 @@ interface Props {
 const { ui } = Astro.props;
 ---
 
-<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+<div class="quartz-battery-card" data-ui={JSON.stringify(ui)}>
   <BatteryHealthPanel labels={ui} />
 </div>
 

package/src/tool/quartz-battery-health/i18n/es.ts

@@ -48,7 +48,7 @@ export const content: ToolLocaleContent<QuartzBatteryHealthUI> = {
       ],
       columns: 3,
     },
-    { type: 'paragraph', html: 'Se pregunta cuándo dejará de funcionar su reloj de cuarzo? El <strong>Comprobador de Salud de Batería de Cuarzo</strong> le ayuda a estimar la vida restante de cualquier pila de movimiento de cuarzo comparando la capacidad de la pila (medida en mAh) con el consumo medio de energía del movimiento (medido en microamperios, µA). Ya sea que tenga un ETA suizo, un Miyota japonés, un Seiko, un Ronda o un movimiento chino DG, esta herramienta calcula la vida útil teórica en años, meses y días, e incluso puede predecir la fecha exacta de reemplazo si introduce el mes y año de instalación.' },
+    { type: 'paragraph', html: '¿Se pregunta cuándo dejará de funcionar su reloj de cuarzo? El <strong>Comprobador de Salud de Batería de Cuarzo</strong> le ayuda a estimar la vida restante de cualquier pila de movimiento de cuarzo comparando la capacidad de la pila (medida en mAh) con el consumo medio de energía del movimiento (medido en microamperios, µA). Ya sea que tenga un ETA suizo, un Miyota japonés, un Seiko, un Ronda o un movimiento chino DG, esta herramienta calcula la vida útil teórica en años, meses y días, e incluso puede predecir la fecha exacta de reemplazo si introduce el mes y año de instalación.' },
     { type: 'title', text: 'Cómo se calcula la vida de la batería de cuarzo: las matemáticas detrás de la estimación', level: 3 },
     { type: 'paragraph', html: 'La vida de la batería sigue una fórmula eléctrica simple: <strong>Vida (horas) = (Capacidad de la pila en mAh x 1000) / Consumo de corriente en µA</strong>. Dividiendo ese resultado por 24 se obtienen días, y por 365,25 se obtienen años. Por ejemplo, una pila <strong>SR920SW (371) estándar de 40 mAh</strong> alimentando un movimiento que consume <strong>1,5 µA</strong> durará teóricamente unos <strong>3 años</strong>. Reduzca el consumo a 1,0 µA y la misma pila supera los 4,5 años. Auméntelo a 2,5 µA y la vida de la batería cae por debajo de 2 años. Cada fracción de microamperio importa a la hora de planificar los intervalos de servicio.' },
     { type: 'title', text: 'Tipos de pila de reloj de cuarzo más comunes y sus capacidades', level: 3 },

package/src/tool/quartz-battery-health/i18n/fr.ts

@@ -5,7 +5,7 @@ import { bibliography } from '../bibliography';
 export const content: ToolLocaleContent<QuartzBatteryHealthUI> = {
   slug: 'controleur-sante-pile-quartz',
   title: 'Controleur de Sante de Pile Quartz',
-  description: 'Calculez la duree de vie theorique d\'une pile de mouvement quartz en entrant la capacite de la cellule (mAh) et la consommation du calibre (µA). Ajoutez optionnellement la date d\'installation pour estimer la date de remplacement.',
+  description: 'Calculez la durée de vie théorique d\'une pile de mouvement quartz en entrant la capacité de la cellule (mAh) et la consommation du calibre (µA). Ajoutez optionnellement la date d\'installation pour estimer la date de remplacement.',
   ui: {
     title: 'Controleur de Sante de Pile Quartz',
     batteryLabel: 'Pile',

package/src/tool/quartz-battery-health/i18n/pt.ts

@@ -5,7 +5,7 @@ import { bibliography } from '../bibliography';
 export const content: ToolLocaleContent<QuartzBatteryHealthUI> = {
   slug: 'verificador-saude-bateria-quartzo',
   title: 'Verificador de Saude da Bateria de Quartzo',
-  description: 'Calcule a vida teorica da bateria de um movimento de quartzo inserindo a capacidade da pilha (mAh) e o consumo do calibre (microamperes). Opcionalmente defina a data de instalacao para estimar a data de substituicao.',
+  description: 'Calcule a vida teórica da bateria de um movimento de quartzo inserindo a capacidade da pilha (mAh) e o consumo do calibre (microamperes). Opcionalmente defina a data de instalação para estimar a data de substituição.',
   ui: {
     title: 'Verificador de Saude da Bateria de Quartzo',
     batteryLabel: 'Pilha',